/* ===========================================================================
 * It's in the Signs — design tokens (P0-16, week 2).
 * Single source of truth for theme tokens. Load FIRST on every page:
 *   <link rel="stylesheet" href="/tokens.css?v=1">
 * before learn/learn.css, /site-chrome.css, and any page-inline <style>.
 *
 * Values are the exact palettes previously duplicated in index.html's inline
 * :root block and learn/learn.css (both now consolidated here), plus the
 * week-2 additions: --gold-text (canonical home; site-chrome.css keeps an
 * identical copy for safety), --focus-ring, and the AA status pair
 * --status-good / --status-bad (WCAG-verified >=4.5:1 on every light
 * parchment surface and every dark card surface — see week2-changelog).
 * ======================================================================== */
:root{
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* LIGHT (parchment almanac) */
html[data-theme="light"]{
  --bg:radial-gradient(900px 500px at 10% -10%,rgba(224,184,78,.25),transparent 60%),radial-gradient(1000px 700px at 90% 0%,rgba(63,91,64,.18),transparent 58%),linear-gradient(180deg,#fbf6ea 0%,#f6f0e2 38%,#efe2c8 100%);
  --ink:#27231d; --muted:#61594c; --head:#283f2b; --gold:#b08433; --gold-soft:#d9b765;
  --card:rgba(251,247,236,.9); --card-2:#fff9e8; --line:#d6c6a6; --btn-ink:#30230b;
  --hero-ink:#283f2b; --star-op:0;
  /* text-safe + status tokens (AA on parchment) */
  --gold-text:#7d5e25;      /* 5.56:1 on #fbf6ea */
  --focus-ring:#7d5e25;     /* >=4.68:1 vs all light surfaces (needs 3:1) */
  --status-good:#4a7343;    /* 5.09:1 on #fbf6ea (was #5a8a52 @ 3.75 / #4f7d4a @ 4.46) */
  --status-bad:#a1502c;     /* 5.26:1 on #fbf6ea (was #b06a3f @ 3.91 / #b05a3f @ 4.45) */
}
/* DARK (moonlit celestial) */
html[data-theme="dark"]{
  --bg:radial-gradient(900px 560px at 12% 0%,rgba(216,183,101,.18),transparent 62%),radial-gradient(1000px 680px at 90% 0%,rgba(47,90,61,.32),transparent 62%),linear-gradient(180deg,#050705 0%,#09100b 45%,#0b100c 100%);
  --ink:#fff7e6; --muted:#cdbd95; --head:#f4dfa3; --gold:#d8b765; --gold-soft:#f4dfa3;
  --card:rgba(24,34,26,.66); --card-2:rgba(255,246,219,.06); --line:rgba(216,183,101,.34); --btn-ink:#111307;
  --hero-ink:#fff7e6; --star-op:.5;
  /* text-safe + status tokens (AA on dark cards) */
  --gold-text:#d8b765;      /* 8.76:1 on the darkest card surface */
  --focus-ring:#d8b765;     /* >=8.76:1 vs all dark surfaces */
  --status-good:#9ec98f;    /* 9.02:1 (was #4f7d4a @ 3.51 on dark card) */
  --status-bad:#e0a07f;     /* 7.65:1 (was #a4502f @ 3.03 on dark card) */
}

/* ---- Global visible focus indicator (a11y blocker 6.1-3) ----------------
 * Inputs/selects across the site set outline:none and signalled focus only by
 * a 1.14:1 border swap. A single ring token restores 2.4.7/1.4.11 compliance.
 * :focus-visible keeps mouse interaction visually unchanged; !important is
 * deliberate so the ring beats every scattered `outline:none`. */
html[data-theme] :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
html[data-theme] input:focus-visible,
html[data-theme] select:focus-visible,
html[data-theme] textarea:focus-visible,
html[data-theme] button:focus-visible,
html[data-theme] a:focus-visible{outline:2px solid var(--focus-ring) !important;outline-offset:2px}