/* SagiWiki brand stylesheet
   ---
   Implements RDS Brand Guide §2 (color), §3 (typography), §3b (drawing language),
   §6 (verbal voice register) within the Material for MkDocs theme.

   Font substitutions per Brand Guide §3:
     - Aktiv Grotesk -> Inter (Google, free)
     - Adobe Garamond Pro -> EB Garamond (Google, free; already in thered.school CSS)
     - Japanese sans -> Noto Sans JP
     - Japanese serif -> Zen Old Mincho + Hina Mincho
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Old+Mincho:wght@400;500;700;900&family=Hina+Mincho&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== Color tokens (light scheme) ===== */
:root,
[data-md-color-scheme="default"] {
  /* Brand */
  --rds-vermillion: #E04A14;
  --rds-vermillion-dark: #B83A0E;
  --rds-vermillion-light: #FF6B46;
  --rds-chartreuse: #D0FF00;
  --rds-chartreuse-muted: #B8E600;
  --rds-cream: #FAFAF7;
  --rds-cream-warm: #F6F2EC;
  --rds-ink: #1A1A1A;
  --rds-rule: rgba(26, 26, 26, 0.12);

  /* Material primary + accent overrides */
  --md-primary-fg-color: var(--rds-vermillion);
  --md-primary-fg-color--light: var(--rds-vermillion-light);
  --md-primary-fg-color--dark: var(--rds-vermillion-dark);
  /* Header now matches the page; its foreground is ink (dark on light). */
  --md-primary-bg-color: var(--rds-ink);
  --md-primary-bg-color--light: rgba(26, 26, 26, 0.7);

  --md-accent-fg-color: var(--rds-chartreuse-muted);
  --md-accent-fg-color--transparent: rgba(208, 255, 0, 0.12);
  --md-accent-bg-color: var(--rds-ink);
  --md-accent-bg-color--light: rgba(26, 26, 26, 0.7);

  /* Body */
  --md-default-fg-color: var(--rds-ink);
  --md-default-fg-color--light: rgba(26, 26, 26, 0.75);
  --md-default-fg-color--lighter: rgba(26, 26, 26, 0.5);
  --md-default-bg-color: var(--rds-cream);

  /* Links */
  --md-typeset-a-color: var(--rds-vermillion);

  /* Code */
  --md-code-bg-color: rgba(208, 255, 0, 0.10);
  --md-code-fg-color: var(--rds-ink);

  /* Type stacks — Brand Guide §3
     Content (headings + body) = Adobe Garamond Pro -> EB Garamond, paired with
     Zen Old Mincho / Hina Mincho for Japanese. UI chrome stays in the clean
     sans (Aktiv Grotesk -> Inter, paired Noto Sans JP). */
  --md-text-font: "EB Garamond", "Zen Old Mincho", "Hina Mincho", Georgia, "Times New Roman", serif;
  --rds-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* ===== Color tokens (dark scheme) ===== */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1A1A1A;
  --md-default-fg-color: #F6F2EC;
  /* Header matches the dark page; its foreground flips to cream. */
  --md-primary-bg-color: #F6F2EC;
  --md-primary-bg-color--light: rgba(246, 242, 236, 0.7);
  --md-default-fg-color--light: rgba(246, 242, 236, 0.85);
  --md-default-fg-color--lighter: rgba(246, 242, 236, 0.6);
  --md-typeset-a-color: var(--rds-vermillion-light);
  --md-code-bg-color: rgba(208, 255, 0, 0.12);
  --md-code-fg-color: var(--rds-cream-warm);
}

/* ===== Base body + headings ===== */
body, .md-typeset {
  font-family: var(--md-text-font);
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

.md-typeset {
  font-size: 0.85rem;
  line-height: 1.72;
}

/* Headings ride the serif (inherited from --md-text-font). Garamond display
   wants near-zero tracking, not the tight negative tracking a grotesque takes. */
/* The biggest titles get the display register (Brand Guide §3e): the clean
   sans in dark grey with a hard-offset, no-blur red drop-shadow (measured
   #f003 = #ff0000 at ~20%). h2/h3 stay in the editorial serif. */
.md-typeset h1 {
  font-family: var(--rds-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 2.1rem;
  line-height: 1.15;
  color: #262626;
  text-shadow: 3px 6px rgba(255, 0, 0, 0.2);
  margin-bottom: 1rem;
}

/* Alternate titles take the measured blue offset instead of red (§3e),
   toggled per page by javascripts/letter-color.js. */
.md-typeset h1.rds-title-blue {
  text-shadow: 3px 6px rgba(0, 115, 255, 0.2);
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #E6E6E6;
}

.md-typeset h2 {
  font-weight: 700;
  letter-spacing: 0;
  font-size: 1.55rem;
  border-bottom: 1px solid var(--rds-rule);
  padding-bottom: 0.3rem;
  margin-top: 2.5rem;
}

.md-typeset h3 {
  font-weight: 600;
  letter-spacing: 0;
  font-size: 1.2rem;
  color: var(--md-default-fg-color);
}

/* h4 keeps a small-caps editorial register, but in the sans so the uppercase
   tracking reads as a label rather than shouty serif caps. */
.md-typeset h4 {
  font-family: var(--rds-sans);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
}

/* Italics carry voice (Brand Guide §3). Body is already EB Garamond, so italics
   just lean; no family swap or size bump needed. */
.md-typeset em,
.md-typeset i,
.md-typeset blockquote em {
  font-style: italic;
}

/* Japanese content rides the serif mincho pairing to match the Garamond body
   (chrome keeps Noto Sans JP via --rds-sans). */
.md-typeset :lang(ja) {
  font-family: "Zen Old Mincho", "Hina Mincho", "Noto Sans JP", var(--md-text-font);
}

/* ===== "Random letter color on hover" — Brand Guide §3e =====
   Per-letter spans injected by javascripts/letter-color.js. The transition is
   what makes a hovered letter fade back to inherit (the site reverts after a
   timeout); rds-word keeps words from breaking mid-word once lettered. */
.md-typeset .rds-word {
  display: inline-block;
  white-space: nowrap;
}
.md-typeset .rds-letter {
  transition: color 0.45s ease;
}

/* ===== UI chrome stays in the clean sans (Brand Guide §3 display sans) =====
   Content (.md-typeset) is serif; navigation, tabs, sidebar, and search are
   sans so the chrome reads as crisp wayfinding against the editorial body. */
.md-header,
.md-tabs,
.md-nav,
.md-search,
.md-search__input {
  font-family: var(--rds-sans);
}

/* ===== Header + nav =====
   Header matches the page (white/cream), with ink text and a thin hairline
   rule, so red is reserved as an attention accent rather than the chrome. */
.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-primary-bg-color);
  box-shadow: 0 0 0 transparent;
  border-bottom: 1px solid var(--rds-rule);
}

.md-header__title {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.md-tabs {
  background-color: var(--md-default-bg-color);
  color: var(--md-primary-bg-color);
  border-bottom: 1px solid var(--rds-rule);
}

.md-tabs__link {
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.md-tabs__link:hover {
  opacity: 1;
}

/* Red is the attention accent: the active section reads in vermillion. */
.md-tabs__link--active {
  opacity: 1;
  color: var(--rds-vermillion);
}

/* Sidebar nav */
.md-nav__title {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
}

.md-nav__link--active {
  color: var(--rds-vermillion);
  font-weight: 600;
}

/* ===== Links — idle color cycle (Brand Guide §3e) =====
   Reproduces the thered.school /our-studios behavior: content links slowly
   cycle through the spectrum on their own (no hover), ~2s per loop. Measured
   sequence from the 2026-06-02 screen recording: orange -> gold -> green ->
   cyan -> pink -> orange. Excludes heading permalink anchors. */
@keyframes rds-link-cycle {
  0%   { color: #E8551E; } /* orange / vermillion */
  20%  { color: #FAC748; } /* gold-yellow */
  40%  { color: #5FB44A; } /* green */
  60%  { color: #37B6C4; } /* cyan / teal */
  80%  { color: #F88DAD; } /* pink */
  100% { color: #E8551E; } /* back to orange */
}

.md-typeset a:not(.headerlink) {
  border-bottom: 1px solid rgba(224, 74, 20, 0.3);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  animation: rds-link-cycle 2.2s linear infinite;
}

/* Keep the cycle running on hover; just emphasize the underline + chartreuse
   wash. (Overriding color here would fight the animation, so we don't.) */
.md-typeset a:not(.headerlink):hover {
  border-bottom-color: currentColor;
  background-color: rgba(208, 255, 0, 0.25);
}

/* Accessibility: honor reduced-motion — hold a steady vermillion. */
@media (prefers-reduced-motion: reduce) {
  .md-typeset a:not(.headerlink) {
    animation: none;
    color: var(--rds-vermillion);
  }
}

/* ===== Code ===== */
.md-typeset code {
  border: 1px solid rgba(224, 74, 20, 0.18);
  border-radius: 2px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  font-weight: 500;
}

.md-typeset pre code {
  border: 1px solid var(--rds-rule);
}

/* ===== Tables — architectural register ===== */
.md-typeset table:not([class]) {
  border: 1px solid var(--rds-ink);
  font-size: 0.82em;
  margin: 1.25em 0;
}

.md-typeset table:not([class]) th {
  background-color: var(--rds-vermillion);
  color: white;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78em;
  padding: 0.6em 0.85em;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.md-typeset table:not([class]) th:last-child {
  border-right: none;
}

.md-typeset table:not([class]) td {
  padding: 0.55em 0.85em;
  border: 1px solid var(--rds-rule);
}

.md-typeset table:not([class]) tr:hover td {
  background-color: rgba(208, 255, 0, 0.08);
}

/* ===== Images — light architectural-plate border ===== */
.md-typeset img {
  border: 1px solid var(--rds-rule);
  border-radius: 2px;
  max-width: 100%;
}

/* ===== Section rules — vermillion divider ===== */
.md-typeset hr {
  border: none;
  border-bottom: 2px solid var(--rds-vermillion);
  margin: 2em 0;
  width: 4em;
}

/* ===== Blockquotes — voice asides ===== */
.md-typeset blockquote {
  border-left: 4px solid var(--rds-vermillion);
  background-color: rgba(208, 255, 0, 0.06);
  padding: 0.75em 1.25em;
  color: var(--md-default-fg-color);
  font-style: normal;
}

.md-typeset blockquote p {
  margin-bottom: 0.5em;
}

/* ===== Search ===== */
.md-search__input {
  background-color: rgba(128, 128, 128, 0.14);
  color: var(--md-default-fg-color);
}

.md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter);
}

.md-search__input:hover,
.md-search__input:focus {
  background-color: rgba(128, 128, 128, 0.22);
}

.md-search-result__article--document .md-search-result__title {
  color: var(--rds-vermillion);
  font-weight: 600;
}

/* ===== Footer ===== */
.md-footer {
  background-color: var(--rds-ink);
}

.md-footer-meta {
  background-color: #000;
}

/* ===== Companion-wiki banner (cross-link; set per site via config.extra) ===== */
.rds-sibling {
  font-family: var(--rds-sans);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}
.rds-sibling a {
  color: var(--rds-vermillion);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* ===== Drawing-stamp signature mark for the footer =====
   Brand line only (no wiki name), so it reads correctly on both wikis. */
.md-footer-meta__inner::after {
  content: "The Red Dot School / レッドドットスクール";
  display: block;
  font-family: var(--rds-sans);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: 0.5em 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.5em;
}

/* ===== Admonitions get vermillion accent ===== */
.md-typeset .admonition {
  border-left: 4px solid var(--rds-vermillion);
  border-radius: 2px;
  font-size: 0.78rem;
}

/* ===== Whitespace — Brand Guide §4 page composition ===== */
.md-content__inner {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

@media (min-width: 76.25em) {
  .md-content__inner {
    margin: 0 1.2rem;
  }
}

/* ===== Page maturity badge (renders the `status:` frontmatter) ===== */
/* Injected by overrides/main.html at the top of the content area. */
.sagiwiki-status {
  display: inline-block;
  margin: 0 0 1.4rem 0;
  padding: 0.12rem 0.6rem;
  border-radius: 1rem;
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  border: 1px solid transparent;
}
.sagiwiki-status::before { content: "● "; }
/* stub: unstarted / placeholder */
.sagiwiki-status--stub {
  color: var(--rds-vermillion-dark);
  background: rgba(224, 74, 20, 0.10);
  border-color: rgba(224, 74, 20, 0.30);
}
/* draft: real first-pass content, still in motion */
.sagiwiki-status--draft {
  color: #6b5b00;
  background: rgba(208, 255, 0, 0.18);
  border-color: rgba(184, 230, 0, 0.55);
}
/* stable: reviewed, trusted */
.sagiwiki-status--stable {
  color: #1d6b2f;
  background: rgba(46, 160, 67, 0.12);
  border-color: rgba(46, 160, 67, 0.40);
}
[data-md-color-scheme="slate"] .sagiwiki-status--stub {
  color: var(--rds-vermillion-light);
  background: rgba(255, 107, 70, 0.14);
}
[data-md-color-scheme="slate"] .sagiwiki-status--draft {
  color: var(--rds-chartreuse);
  background: rgba(208, 255, 0, 0.12);
}
[data-md-color-scheme="slate"] .sagiwiki-status--stable {
  color: #7ee08f;
  background: rgba(46, 160, 67, 0.16);
}