/* ==========================================================================
   tokens.css — colour, type, space, motion primitives
   Design concept: "The Ledger" — an evidence-first dossier on paper stock.
   Light palette is defined on bare :root. Dark redefines only tokens, twice:
   once under prefers-color-scheme (guarded against an explicit light choice)
   and once under [data-theme="dark"] so the visible toggle wins both ways.
   All text pairs are checked against WCAG AA (>= 4.5:1 body, >= 3:1 large/UI).
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Surfaces (light: warm paper stock) --- */
  --paper:        #faf7f1;
  --paper-2:      #f3eee4;
  --card:         #ffffff;
  --card-2:       #fbf9f5;
  --sunk:         #ece5d8;
  --rule:         #ddd3c1;
  --rule-strong:  #b9ab92;
  --overlay:      rgba(24, 20, 14, 0.44);

  /* --- Ink --- */
  --ink:          #17140e;   /* 15.9:1 on --paper */
  --ink-2:        #423a2c;   /* 9.1:1  on --paper */
  --ink-3:        #635944;   /* 5.6:1  on --paper — smallest text still AA */
  --ink-inv:      #fdfbf7;

  /* --- Generation accents. Never the sole carrier of meaning:
         every use is paired with a glyph and a text label. --- */
  --g1:           #9a4a06;   /* legacy / amber-rust  — 5.6:1 on paper */
  --g1-soft:      #fdf0dc;
  --g1-edge:      #d98a2b;
  --g2:           #0b6a63;   /* teal                 — 5.3:1 on paper */
  --g2-soft:      #e0f2ef;
  --g2-edge:      #12a094;
  --g3:           #3b34b8;   /* indigo               — 8.0:1 on paper */
  --g3-soft:      #e8e7fb;
  --g3-edge:      #6f68e8;

  /* --- Semantic --- */
  --good:         #14653c;
  --good-soft:    #dcf3e6;
  --warn:         #8a5300;
  --warn-soft:    #fbeed3;
  --bad:          #a2231d;
  --bad-soft:     #fbe4e2;
  --info:         #1e4f8f;
  --info-soft:    #e2ecfb;

  /* --- Focus --- */
  --focus:        #1b53d0;
  --focus-halo:   #ffffff;

  /* --- Type --- */
  --font-display: "Iowan Old Style", "Sitka Text", Charter, "Bitstream Charter",
                  "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, "Noto Sans", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Fluid scale — clamps keep 320px and 200% zoom legible */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --t-base: clamp(0.95rem, 0.91rem + 0.20vw, 1.05rem);
  --t-md:   clamp(1.08rem, 1.02rem + 0.30vw, 1.24rem);
  --t-lg:   clamp(1.28rem, 1.16rem + 0.58vw, 1.62rem);
  --t-xl:   clamp(1.52rem, 1.30rem + 1.05vw, 2.15rem);
  --t-2xl:  clamp(1.85rem, 1.45rem + 1.90vw, 2.85rem);
  --t-3xl:  clamp(2.15rem, 1.62rem + 2.35vw, 3.45rem);

  /* --- Space --- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;

  /* --- Shape --- */
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 22px; --r-pill: 999px;

  /* --- Elevation (paper: low, warm, close) --- */
  --sh-1: 0 1px 2px rgba(46, 36, 18, 0.07), 0 1px 1px rgba(46, 36, 18, 0.05);
  --sh-2: 0 2px 6px rgba(46, 36, 18, 0.09), 0 6px 18px rgba(46, 36, 18, 0.07);
  --sh-3: 0 10px 34px rgba(46, 36, 18, 0.16), 0 2px 8px rgba(46, 36, 18, 0.10);

  /* --- Motion --- */
  --e-out:   cubic-bezier(0.16, 0.84, 0.36, 1);
  --e-inout: cubic-bezier(0.62, 0.02, 0.24, 1);
  --e-pop:   cubic-bezier(0.34, 1.46, 0.52, 1);
  --d-1: 120ms; --d-2: 200ms; --d-3: 340ms; --d-4: 560ms; --d-5: 900ms;

  --wrap: 1180px;
  --wrap-narrow: 760px;
}

/* Dark: system preference, unless the reader explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:        #14151b;
    --paper-2:      #191b23;
    --card:         #1d1f28;
    --card-2:       #232633;
    --sunk:         #101117;
    --rule:         #333747;
    --rule-strong:  #565d75;
    --overlay:      rgba(6, 7, 10, 0.62);

    --ink:          #f4f2ee;   /* 15.4:1 */
    --ink-2:        #cdcbd6;   /* 10.0:1 */
    --ink-3:        #a2a2b4;   /*  5.9:1 */
    --ink-inv:      #14151b;

    --g1:           #f0ac4a;
    --g1-soft:      #37280f;
    --g1-edge:      #b97c22;
    --g2:           #48d6c4;
    --g2-soft:      #0d2f2d;
    --g2-edge:      #2a9c90;
    --g3:           #a3a0f5;
    --g3-soft:      #23214a;
    --g3-edge:      #6f6ade;

    --good:         #58d69a;
    --good-soft:    #0f2f22;
    --warn:         #f3bb5c;
    --warn-soft:    #362a11;
    --bad:          #ff8f86;
    --bad-soft:     #3a1c1a;
    --info:         #86b4f7;
    --info-soft:    #152743;

    --focus:        #8fb6ff;
    --focus-halo:   #14151b;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --sh-2: 0 2px 8px rgba(0, 0, 0, 0.48), 0 8px 22px rgba(0, 0, 0, 0.34);
    --sh-3: 0 12px 40px rgba(0, 0, 0, 0.60), 0 3px 10px rgba(0, 0, 0, 0.45);
  }
}

/* Dark: explicit reader choice — same tokens, higher specificity than the query. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:        #14151b;
  --paper-2:      #191b23;
  --card:         #1d1f28;
  --card-2:       #232633;
  --sunk:         #101117;
  --rule:         #333747;
  --rule-strong:  #565d75;
  --overlay:      rgba(6, 7, 10, 0.62);

  --ink:          #f4f2ee;
  --ink-2:        #cdcbd6;
  --ink-3:        #a2a2b4;
  --ink-inv:      #14151b;

  --g1:           #f0ac4a;
  --g1-soft:      #37280f;
  --g1-edge:      #b97c22;
  --g2:           #48d6c4;
  --g2-soft:      #0d2f2d;
  --g2-edge:      #2a9c90;
  --g3:           #a3a0f5;
  --g3-soft:      #23214a;
  --g3-edge:      #6f6ade;

  --good:         #58d69a;
  --good-soft:    #0f2f22;
  --warn:         #f3bb5c;
  --warn-soft:    #362a11;
  --bad:          #ff8f86;
  --bad-soft:     #3a1c1a;
  --info:         #86b4f7;
  --info-soft:    #152743;

  --focus:        #8fb6ff;
  --focus-halo:   #14151b;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.48), 0 8px 22px rgba(0, 0, 0, 0.34);
  --sh-3: 0 12px 40px rgba(0, 0, 0, 0.60), 0 3px 10px rgba(0, 0, 0, 0.45);
}

/* Per-generation token bundle. Any element carrying data-gen="g1|g2|g3"
   exposes --gen / --gen-soft / --gen-edge to its subtree. */
[data-gen="g1"] { --gen: var(--g1); --gen-soft: var(--g1-soft); --gen-edge: var(--g1-edge); }
[data-gen="g2"] { --gen: var(--g2); --gen-soft: var(--g2-soft); --gen-edge: var(--g2-edge); }
[data-gen="g3"] { --gen: var(--g3); --gen-soft: var(--g3-soft); --gen-edge: var(--g3-edge); }