/* ==========================================================================
   Design tokens — niu-lai.net
   Direction: the whole joke is the gap between an elegant ink-wash poster
   and crude low-poly CGI. So the system carries both worlds and lets them
   sit next to each other. Paper-and-ink for the editorial voice, RGB-split
   and scanlines for the CGI voice.

   Theme contract (three states, not two):
     :root                                  -> complete light palette
     @media (prefers-color-scheme: dark)
       :root:not([data-theme="light"])      -> system dark
     :root[data-theme="dark"]               -> explicit toggle
   Components read tokens only; never declare a colour inside a theme block.
   ========================================================================== */

:root {
  /* --- paper world (light) --- */
  --bg:          #EDE6D6;
  --bg-alt:      #E3DAC3;
  --surface:     #FFFDF8;
  --surface-2:   #F7F1E4;
  --ink:         #23201A;
  --ink-dim:     #5B5344;   /* darkened from #6B6252: passed vs --bg (4.83) but only 4.32 vs --bg-alt */
  --ink-faint:   #5E5644;   /* darkened from an earlier #938974 to clear AA (2.78:1 -> 5.84:1) */
  --border:      rgba(35, 32, 26, 0.14);
  --border-hard: rgba(35, 32, 26, 0.28);

  /* --- accents ---
     Values below are deliberately darker than the "obvious" ink-gold swatch:
     the obvious #9C7220/#B8862B pairing reads correctly by eye but fails
     WCAG AA (4.5:1) against --bg and --bg-alt at the small sizes used for
     eyebrows and dates. These pass at every light-theme surface tested. */
  --gold:        #7C5A17;   /* primary accent, ink-gold */
  --gold-soft:   #785616;
  --vermilion:   #B23A24;   /* seal-red, used sparingly */

  /* Text colour for content sitting ON the gold accent (primary button).
     --gold's luminance flips between themes (dark accent on light ground vs
     light accent on dark ground), so the text riding on it has to flip too —
     see the dark-theme block below. */
  --on-gold:     #FFFDF8;

  /* --- CGI world: RGB channel split --- */
  --glitch-c:    #12847D;
  --glitch-m:    #9C3766;

  /* --- semantic (facts page verdicts) --- */
  --verdict-false: #B23A24;
  --verdict-true:  #2F7A46;
  --verdict-murky: #7C5A17;

  /* --- type --- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- scale --- */
  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.22rem, 1.15rem + 0.35vw, 1.42rem);
  --step-2:  clamp(1.50rem, 1.36rem + 0.70vw, 1.94rem);
  --step-3:  clamp(1.85rem, 1.60rem + 1.25vw, 2.62rem);
  --step-4:  clamp(2.25rem, 1.80rem + 2.25vw, 3.60rem);

  /* --- space --- */
  --sp-1: 0.35rem;
  --sp-2: 0.65rem;
  --sp-3: 1rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.6rem;
  --sp-7: 5.2rem;

  /* --- shape --- */
  --radius:    3px;
  --radius-lg: 6px;
  --measure:   65ch;
  --container: 1060px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #17140F;
    --bg-alt:      #201C15;
    --surface:     #221E17;
    --surface-2:   #291F17;
    --ink:         #EFE7D6;
    --ink-dim:     #A79C86;
    --ink-faint:   #7E7563;
    --border:      rgba(239, 231, 214, 0.14);
    --border-hard: rgba(239, 231, 214, 0.30);

    --gold:        #D9A53B;
    --gold-soft:   #E7B75C;
    --vermilion:   #E2634A;
    --on-gold:     #1B1305;   /* dark theme's gold is light — needs dark text on it */

    --glitch-c:    #4FD8CF;
    --glitch-m:    #E36FA0;

    --verdict-false: #E2634A;
    --verdict-true:  #6FCB8C;
    --verdict-murky: #D9A53B;
  }
}

:root[data-theme="dark"] {
  --bg:          #17140F;
  --bg-alt:      #201C15;
  --surface:     #221E17;
  --surface-2:   #291F17;
  --ink:         #EFE7D6;
  --ink-dim:     #A79C86;
  --ink-faint:   #7E7563;
  --border:      rgba(239, 231, 214, 0.14);
  --border-hard: rgba(239, 231, 214, 0.30);

  --gold:        #D9A53B;
  --gold-soft:   #E7B75C;
  --vermilion:   #E2634A;
  --on-gold:     #1B1305;

  --glitch-c:    #4FD8CF;
  --glitch-m:    #E36FA0;

  --verdict-false: #E2634A;
  --verdict-true:  #6FCB8C;
  --verdict-murky: #D9A53B;
}