/* Leonida Field Guide (working name) — design tokens v1 · 13/11/2026
 * Source of truth for colour, type, space, radius, motion and layout.
 * Contrast ratios measured with WCAG 2.x relative luminance (see DESIGN-DIRECTION.md §3).
 * Rule: --coral and --sun are FILLS/DECOR only on light surfaces. Text accents use
 * --coral-ink. Never convey meaning by colour alone (pair with icon + label).
 */

:root {
  color-scheme: light dark;

  /* ── Colour: light (default) ─────────────────────────────── */
  --paper:        #F4EADC;  /* page background                         */
  --paper-raised: #FBF6EE;  /* cards, answer box, inputs               */
  --paper-sunk:   #EADCC8;  /* table header, code, quiet wells         */
  --ink:          #111820;  /* body text 15.0:1 on paper               */
  --ink-muted:    #4F5963;  /* meta text 6.0:1 on paper                */
  --green:        #245A50;  /* links, primary actions 6.65:1 on paper  */
  --green-strong: #1A443C;  /* hover/pressed                           */
  --coral:        #F07864;  /* fill/decor only (2.3:1 on paper)        */
  --coral-ink:    #A8402C;  /* coral-family text 5.1:1 on paper        */
  --sun:          #F2C14E;  /* highlight fill; ink on sun 10.6:1       */
  --line:         #CDBDA6;  /* hairlines, dividers (decorative)        */
  --line-strong:  #8C7B66;  /* control borders 3.4:1 (UI ≥3:1)         */
  --spoiler:      #6B3FA0;  /* spoiler accent 6.2:1 on paper           */
  --on-green:     #F4EADC;  /* text on --green fill 6.65:1             */
  --on-coral:     #111820;  /* text on --coral fill 6.4:1              */
  --focus:        #111820;  /* focus ring core                         */
  --focus-halo:   #F2C14E;  /* focus ring halo                         */
  --shadow:       0 1px 0 rgba(17,24,32,.06), 0 8px 24px -12px rgba(17,24,32,.22);

  /* Status (always rendered with icon + text label) */
  --st-announced-bg: #DCEBE5; --st-announced-fg: #1A443C;
  --st-tested-bg:    #111820; --st-tested-fg:    #F4EADC;
  --st-review-bg:    #F7DE9A; --st-review-fg:    #111820;
  --st-archived-bg:  #E3DACD; --st-archived-fg:  #4F5963;
  --st-unconfirmed-bg: transparent; --st-unconfirmed-fg: #A8402C;

  /* ── Type ────────────────────────────────────────────────── */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.8125rem;  /* 13px — only uppercase labels w/ tracking  */
  --fs-sm:   0.9375rem;  /* 15px — meta, captions                      */
  --fs-base: 1.125rem;   /* 18px — body                                */
  --fs-lg:   1.25rem;    /* 20px — answer box, lead                    */
  --fs-h3:   1.3125rem;
  --fs-h2:   clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --fs-h1:   clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-display: clamp(2.375rem, 1.5rem + 4vw, 4.5rem);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.62;
  --tracking-label: 0.08em;
  --measure: 68ch;

  /* ── Space (4px base) ────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: clamp(16px, 4vw, 40px);

  /* ── Shape ───────────────────────────────────────────────── */
  --r-sm: 4px;  --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --rule: 1px solid var(--line);
  --rule-strong: 1.5px solid var(--ink);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container: 1200px;
  --toc-w: 260px;
  --header-h: 64px;
  --tap: 44px;
  --z-header: 50; --z-modal: 100; --z-toast: 110;
}

/* ── Colour: dark ──────────────────────────────────────────── */
/* Dark values are intentionally duplicated: OS preference (unless the reader chose
 * light) and explicit [data-theme="dark"]. Keep both blocks identical. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0F151B; --paper-raised:#18212A; --paper-sunk:#0A0F14;
    --ink:#F1E8DA; --ink-muted:#A7B0B8;
    --green:#7CC4B0; --green-strong:#9FD8C7;
    --coral:#F28C78; --coral-ink:#F59A86; --sun:#F2C14E;
    --line:#2C3844; --line-strong:#6B7A88; --spoiler:#C3A6F0;
    --on-green:#0F151B; --on-coral:#0F151B;
    --focus:#F1E8DA; --focus-halo:#245A50;
    --shadow: 0 1px 0 rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    --st-announced-bg:#1D3A33; --st-announced-fg:#BFE6DA;
    --st-tested-bg:#F1E8DA;    --st-tested-fg:#0F151B;
    --st-review-bg:#4A3C12;    --st-review-fg:#F7DE9A;
    --st-archived-bg:#232C35;  --st-archived-fg:#A7B0B8;
    --st-unconfirmed-fg:#F59A86;
  }
}
:root[data-theme="dark"] {
  --paper:#0F151B; --paper-raised:#18212A; --paper-sunk:#0A0F14;
  --ink:#F1E8DA; --ink-muted:#A7B0B8;
  --green:#7CC4B0; --green-strong:#9FD8C7;
  --coral:#F28C78; --coral-ink:#F59A86; --sun:#F2C14E;
  --line:#2C3844; --line-strong:#6B7A88; --spoiler:#C3A6F0;
  --on-green:#0F151B; --on-coral:#0F151B;
  --focus:#F1E8DA; --focus-halo:#245A50;
  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --st-announced-bg:#1D3A33; --st-announced-fg:#BFE6DA;
  --st-tested-bg:#F1E8DA;    --st-tested-fg:#0F151B;
  --st-review-bg:#4A3C12;    --st-review-fg:#F7DE9A;
  --st-archived-bg:#232C35;  --st-archived-fg:#A7B0B8;
  --st-unconfirmed-fg:#F59A86;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }