/* static/css/tokens.css — the Phase 6 token layer (DSGN-02).
 *
 * Loaded as a plain, UNLAYERED <link> from templates/base.html. It declares custom
 * properties on :root only; nothing in game.css or theme.css declares these names
 * (they use --bg-primary/--accent/…), so there is no collision for a cascade layer
 * to resolve and adding one would be ceremony. See 06-UI-SPEC.md "@layer order".
 *
 * Promoted verbatim from .planning/sketches/themes/dir-a.css — do not edit these 8 values,
 * the decorative palette, or the two derived hairlines without a user decision (GA-1).
 */
:root{
  --bg:#0B0E11; --pnl:#12161B; --line:#1F262E; --fg:#D6DDE5; --dim:#7C8896;
  --acc:#F5A524; --pos:#4ADE80; --neg:#F87171;
  --pnl2:#171C23; --line2:#2A333E;
  --acc-dim:rgba(245,165,36,.14); --acc-line:rgba(245,165,36,.42);
  --pos-dim:rgba(74,222,128,.12); --neg-dim:rgba(248,113,113,.12);
  --warn:#E3B341;
  --s-brown:#8D6748; --s-lblue:#7FB6D9; --s-pink:#C97BA8; --s-orange:#D98A45;
  --s-red:#C4564F; --s-yellow:#CBB04A; --s-green:#5C9E6B; --s-blue:#4A6FA5;
  --s-rail:#6E7A88; --s-util:#7E8AA0;
  /* D-020 requires Inter stay in the fallback stack. It is inserted HERE, in the block an
     executor actually copies -- an earlier draft left this line as dir-a.css's original and put
     the Inter requirement only in the Fonts section's prose, so the shipped token would have
     missed it. This is the one intentional edit to a dir-a.css line, and D-020 is its authority. */
  --sans:'IBM Plex Sans','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --row:26px; --row-tap:44px; --tap:var(--row-tap);

  /* reused, not new: dir-a.css already declares --s-lblue:#7FB6D9, the identical hex */
  --info:var(--s-lblue); --info-dim:rgba(127,182,217,.12);

  /* NEW, and it is a REAL KIT HEX with no home in dir-a.css: the primary button's hover fill.
     `.btn.pri:hover{background:#FFB933}` is the one colour the kit uses that dir-a.css never
     declares. Tokenised rather than inlined so it is not lost in the port. Not a new hue — a
     lighter stop of the approved accent. */
  --acc-hover:#FFB933;

  /* NEW derived — foreground-on-accent. dark mode: kit hardcodes #0B0E11 on every .btn.pri;
     this just names what already ships. */
  --on-acc:#0B0E11;

  /* NEW derived — spacing scale, multiples of 4, for layout Phase 6 authors net-new
     (dialog padding, gaps between stacked toasts). NOT applied to the ported kit
     controls — those stay pinned to their approved literal values instead of being
     rounded onto this grid. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* NEW derived — radius. The kit's panel IS 2px (`.pnl{…border-radius:2px}`); 3px belongs to
     the MODAL/frame container (`.mock`, `.frame`, `.gal`). Two different things, two tokens. */
  --radius-control:2px;   /* buttons, inputs, chips, toast — kit .btn/.inp/.chip/.toastx */
  --radius-panel:2px;     /* kit .pnl — a panel, NOT 3px */
  --radius-modal:3px;     /* kit .mock/.frame — the dialog container */

  /* NEW derived — elevation. The kit has exactly one shadow value, on the one floating
     element it shows (.toastx). Dialog/sheet reuse its alpha and hue, scaled for a
     bigger surface, since nothing bigger existed to measure. */
  --elev-toast: 0 8px 28px rgba(0,0,0,.6);      /* verbatim from kit's .toastx */
  --elev-dialog: 0 16px 48px rgba(0,0,0,.6);    /* NEW — same alpha/hue, larger spread */
  --elev-sheet: 0 -8px 28px rgba(0,0,0,.6);     /* NEW — inverted for a bottom-docked sheet */
  --z-toast: 100000; /* NEW — one above the highest legacy z-index measured today (99999,
                        reconnect-loading-overlay). This applies to the TOAST CONTAINER
                        (#toast-container), which is an ordinary positioned element and does
                        need it. The dialog needs no z-index at all: showModal() puts it in the
                        browser's top layer, above every z-index unconditionally. Do not put
                        --z-toast on the dialog — it would have no effect and would imply the
                        top layer can be out-stacked, which it cannot. */

  /* Motion. Measured counts in the kit: .15s x6, .18s x2, .7s x1. Only --dur-dialog is
     genuinely new (nothing in the kit opens a floating panel). */
  --dur-micro:150ms;      /* kit's .15s — control transitions */
  --dur-toggle:180ms;     /* kit's .18s — switch travel */
  --dur-spin:700ms;       /* kit's .7s — the busy spinner. NOT optional; the button needs it. */
  --dur-dialog:200ms;     /* NEW — dialog open */
  --ease-standard:ease;

  /* D-021: the app is dark-only. This makes browser-rendered chrome — form controls,
     scrollbars, spellcheck underlines — match, and it is NOT a second palette.
     No prefers-color-scheme block and no [data-theme] selectors ship. */
  color-scheme: dark;
}
.num,.mono,.v,.amt{font-family:var(--mono);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;}

/* Verbatim from the kit — the ONE justified use of !important in this whole layer:
   an accessibility override, not a specificity workaround. */
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}