/* Shared design-token sheet — F1 / Ex7.1 (the Rili-shaped B1 app-shell foundation).
   The :root token SYSTEM lifted VERBATIM out of play.html so every B1 surface (the shell,
   the discovery grid, the play stage, the creation/card-intro/quest views) reads ONE source of
   truth. Selectors, values, and the per-token comments are byte-identical to play.html's former
   inline :root rules — F1 relocates the tokens, it does not retune them (parity-first). Served at
   /play/assets/tokens.css as text/css; play.html (and every later view) links it render-blocking.

   What is HERE: only the rules whose body is purely custom-property declarations on the root
   element — the base parchment palette + typography/spacing/prose/sidebar-width tokens, the
   slate/sepia/dark theme token-sets, the data-prose-* reading-style overrides, and the
   data-layout-sidebar-width override. What STAYS in play.html: rules that key off a data-*
   attribute to restyle a specific element (`#layout` row-reverse, `#prior-turns` hidden) — those
   are component styling, not tokens, and the catalogue of not-yet-tokenized component color
   literals stays with the components it documents. */
:root {
  --bg: #f7f3ec;             /* warm parchment page ground */
  --surface: #fffdf9;        /* card / panel surface, a touch lighter than the page */
  --surface-muted: #f3ede2;  /* subtle inset panels (status bar, change-cue, history) */
  --ink: #2b2a26;            /* primary warm near-black text */
  --ink-soft: #6c665b;       /* secondary / label text */
  --ink-faint: #6f695d;      /* faint meta text — WCAG-AA on the tinted panel grounds */
  --line: #e4dccd;           /* hairline borders on the warm ground */
  --accent: #b5532e;         /* single terracotta accent (display / large use) */
  --accent-soft: #f4e7df;    /* accent wash for hovers / highlights */
  --danger: #b00;            /* destructive-red error TEXT (login/start/save/hint errors) — Ex4.7 tokenized the former hardcoded #b00 so it flips per palette. #b00 clears WCAG-AA on every LIGHT ground (parchment >=5.79:1, slate >=5.80:1, sepia >=5.17:1); the dark palette overrides it (literal #b00 was only ~2.4:1 on dark). */
  --accent-ink: #9d4525;     /* darker terracotta for SMALL accent text — clears WCAG-AA 4.5:1 on the tinted/amber grounds where #b5532e dips below it */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Ex3.4 — prose-surface reading-style tokens. Default to the current #prose look so the page
     is byte-identical until a data-prose-* attribute is set (absence = these defaults, the same
     idiom as the parchment data-theme default). */
  --prose-font: var(--serif);
  --prose-size: 1.12rem;
  --prose-leading: 1.78;
  /* Ex3.5 — layout-preference token: the C.14 sidebar rail width. Default reproduces the
     existing 220px rail byte-for-byte (absence of a data-layout-sidebar-width attribute =
     this value); the dormant data-layout-sidebar-width overrides below re-point it. */
  --sidebar-width: 220px;
  --radius: 10px;
}
/* Ex3.2 — named theme palettes (token-sets over the CSS variables above). The base :root
   IS the default "parchment" palette; an alternate is selected by setting a data-theme
   attribute on the root element (the Ex3.7 preferences switcher will do this; absence of the
   attribute = parchment). Each palette re-skins only the COLOR tokens — fonts/radius stay
   shared. Every TOKENIZED text/ground pair (ink/accent color tokens on bg/surface/accent-soft
   ground tokens) is WCAG-AA verified (>=4.5:1) in ALL palettes.
   (The catalogue of NOT-YET-TOKENIZED component color literals — dormant while nothing sets
   data-theme — stays in play.html with the components it documents.) */
:root[data-theme="slate"] {
  --bg: #f4f5f7;             /* cool light-gray page ground */
  --surface: #ffffff;        /* clean white card / panel surface */
  --surface-muted: #eceef1;  /* subtle cool inset panels */
  --ink: #1f2328;            /* primary cool near-black text */
  --ink-soft: #565d66;       /* secondary / label text */
  --ink-faint: #5b626b;      /* faint meta text — AA on the cool panel grounds */
  --line: #d9dde2;           /* hairline borders on the cool ground */
  --accent: #2f6f8f;         /* steel-blue accent (display / large use) */
  --accent-soft: #e4eef3;    /* accent wash for hovers / highlights */
  --accent-ink: #275f7b;     /* darker steel for SMALL accent text */
}
:root[data-theme="sepia"] {
  --bg: #f3e9d8;             /* warm high-contrast paper ground */
  --surface: #fbf4e6;        /* lighter warm card / panel surface */
  --surface-muted: #ede0c9;  /* subtle warm inset panels */
  --ink: #2a2118;            /* primary deep warm-brown near-black text */
  --ink-soft: #5f5340;       /* secondary / label text */
  --ink-faint: #635741;      /* faint meta text — AA on the warm panel grounds */
  --line: #ddcdae;           /* hairline borders on the warm ground */
  --accent: #925417;         /* amber-brown accent (display / large use) */
  --accent-soft: #efe1cb;    /* accent wash for hovers / highlights */
  --accent-ink: #874e18;     /* darker amber-brown for SMALL accent text */
}
/* Ex3.3 — DARK palette. Warm dark token-set (inverts parchment's grounds/ink, keeps the
   terracotta family), selected like the other alternates by data-theme="dark". Every TOKENIZED
   text/ground pair rendered in play.html is WCAG-AA verified (>=4.5:1) on the dark grounds:
   --ink 14.6:1, --ink-soft >=6.8:1, --ink-faint >=5.9:1, and --accent-ink (small accent text)
   >=6.9:1 incl. on the --accent-soft wash. --accent is NOT used as text anywhere (background/
   border/large-display only); its one rendered constraint is the #fff button label on --accent:
   white on #b85733 = 4.72:1 (AA), and #b85733 on --bg = 3.78:1 (>=3:1 for borders / large
   display). The OS-preference auto-default stays deferred to Ex3.7 (see play.html).

   F6 / Ex7.6 — the second selector `[data-theme="dark"]` (NOT :root-anchored) lets this same warm-dark
   token-set scope to a NESTED subtree, not only the document root: the B1 app shell's right character/role
   pane sets data-theme="dark" on its <aside> to render the Rili-style dark panel while the rest of the app
   stays parchment — reusing these exact AA-verified token values, no new color literals. Backward-compatible
   for play.html's root toggle: the document root still matches the higher-specificity :root[data-theme="dark"]
   selector, so its resolution (and any specificity battle with the data-prose and data-layout root rules) is
   unchanged; the bare [data-theme="dark"] only newly applies to nested elements, where no :root[...] rule
   competes.

   DO NOT write a `*` immediately followed by a `/` anywhere in this comment. Fm.8d: the phrase that used to
   sit two lines above ("data-prose-<star>/data-layout-<star>", written literally) contains the comment-CLOSE
   sequence, which ended this comment early. The remaining prose then parsed as garbage and the CSS parser
   resynced by discarding the whole next rule — the dark palette below. So THIS rule was live in the source
   and absent from the CSSOM in every browser. Nothing referenced the dark tokens incorrectly; they simply
   were never parsed.

   What that did and did NOT break (measured, not assumed — the earlier draft of this note overstated it and a
   review leg caught it): the pages that carry their OWN inline copy of this dark token block were unaffected
   (app.html, settings.html, history.html, image.html, mods.html — they render dark from the inline copy, with
   these same values). The pages that rely SOLELY on this shared sheet for the dark tokens had none: play.html,
   editor.html, loadout-builder.html, new-game-plus.html, and the React client — whose index.html carries only a
   body-level dark background, so it rendered a dark GROUND with parchment CARDS (antd's darkAlgorithm ran while
   the --surface seed it was fed still read the light value). Fm.8d's browser assertion pins --surface to the
   dark value below, so this rule cannot silently fall out of the CSSOM again. */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg: #1a1715;             /* warm near-black page ground */
  --surface: #262220;        /* raised card / panel surface, lighter than the page */
  --surface-muted: #211e1c;  /* subtle inset panels (status bar, change-cue, history) */
  --ink: #ede8e0;            /* primary warm near-white text */
  --ink-soft: #b3a89c;       /* secondary / label text — AA on the dark panel grounds */
  --ink-faint: #a89d90;      /* faint meta text — AA on the tinted dark panel grounds */
  --line: #3a3531;           /* hairline borders on the dark ground */
  --accent: #b85733;         /* terracotta accent (display / border / large use); #fff label clears AA */
  --accent-soft: #3a2a22;    /* dark accent wash for hovers / highlights */
  --accent-ink: #f0a884;     /* lighter terracotta for SMALL accent text — AA on dark grounds + the wash */
  --danger: #ff8a80;         /* light coral-red error TEXT on dark — Ex4.7. The light palettes' #b00 is only ~2.4:1 on the dark grounds; #ff8a80 reads clearly red and clears WCAG-AA (>=6.9:1 on surface, >=7.8:1 on bg). */
}
/* Ex3.4 — prose-surface reading-style OPTIONS (font family / size / line-height/density), the
   reading-comfort analogue of the Ex3.2/3.3 palette options: dormant token overrides selected by
   data-prose-* attributes on the root element. Absence of an attribute = the :root defaults above
   (today's exact #prose look). Font-only: no color token is touched, so every palette's WCAG-AA
   contrast is unaffected. */
:root[data-prose-font="sans"]       { --prose-font: var(--sans); }
:root[data-prose-size="small"]      { --prose-size: 1rem; }
:root[data-prose-size="large"]      { --prose-size: 1.28rem; }
:root[data-prose-leading="compact"] { --prose-leading: 1.55; }
:root[data-prose-leading="relaxed"] { --prose-leading: 2; }
/* Ex3.5 — the sidebar-WIDTH token override (re-points the --sidebar-width token consumed by
   #sidebar's flex-basis; inert on mobile, where the rail goes full-width regardless of the
   token). The sibling sidebar-POSITION and prior-turns-VISIBILITY rules target #layout /
   #prior-turns and so stay in play.html as component styling, not tokens. */
:root[data-layout-sidebar-width="narrow"] { --sidebar-width: 180px; }
:root[data-layout-sidebar-width="wide"]   { --sidebar-width: 280px; }