/* ---------------------------------------------------------------------------
   Design tokens: one light palette and one set of font tokens for the whole
   dashboard.

   BEFORE THIS FILE there were four light palettes. players/teams/match ran a
   neutral white (--bg:#f5f4f1), sequences/insights/search/glossary a warm paper
   (#f4f2ea), index a third warm variant (#f4f2ec), and match.html carried a
   SECOND light block of its own (#f4f2ec with a different --text3) plus a
   runtime override that wrote --bg and --bg2 straight onto the root element.
   That is why light mode felt like a different product on every page.

   Linked BEFORE each page's inline <style>, like shell.css.

   WHY html:not(.dark) AND NOT :root
   The pages declare their light values on :root and their dark values on
   html.dark. A light palette on :root here would lose to each page's own :root
   (same specificity, later in source) and would also leak into dark mode for
   any token a page's dark block happens not to redeclare. html:not(.dark)
   (0,2,0) outranks a page :root (0,1,0) in light and cannot match at all in
   dark, so a page's :root value survives as its dark value where it was already
   serving as one. Both themes now explicitly pair surface and foreground tokens;
   dark aliases below prevent terminal pages inheriting a light overlay.
   A page that genuinely needs to differ in light overrides at html:not(.dark)
   or higher.

   FONT TOKENS are theme independent, with explicit theme specificity, and apply to
   both modes. teams.html declared none of them while using them in ten font:
   shorthands; an unresolved var() invalidates the whole declaration, so weight,
   size and line-height were being dropped along with the family and those rules
   rendered as inherited body type. They resolve now.
--------------------------------------------------------------------------- */

:root{
  --f-display:'Archivo','Inter',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  /* Spelling aliases. The pages were written with two other names for the same
     two stacks; they alias here rather than being renamed across several
     hundred rules, so there is still one source of truth for the values. */
  --f-disp:var(--f-display);
  --f-data:var(--f-mono);
  /* Plot roles stay consistent between player, team and match views. Event
     outcome still has its own shape, so colour is never its only cue. */
  --viz-positive:#0b5f50;
  --viz-negative:#c04c3d;
  --viz-progress:#2d66b1;
  --viz-carry:#966817;
  --viz-box:#86529b;
  --viz-neutral:#596674;
  --viz-key:#965018;
}

html.dark:root{
  color-scheme:dark;
  --bg:#111820;--bg2:#19232e;--bg3:#23313f;
  --surface:#19232e;--surface2:#293746;
  --border:#405063;--border2:#687c91;
  --text:#f2f5fa;--text2:#d0d9e5;--text3:#aab8ca;--text4:#aab8ca;
  --panel:var(--bg2);--panel2:var(--bg3);--paper:var(--bg2);
  --ink:var(--text);--muted:var(--text2);--dim:var(--text2);--dim2:var(--text3);
  --line:var(--border);--line2:var(--border2);
  --overlay:#19232e;--overlay-text:#f2f5fa;
  --selection:#304963;--selection-text:#fff;--focus:#9cc8ff;
  --accent:#ff8d88;--red:#ff8d88;--red-bright:#ff8d88;--green:#59cbb3;--amber:#e8c477;
  --viz-positive:#59cbb3;
  --viz-negative:#ff826f;
  --viz-progress:#83b4f0;
  --viz-carry:#e8c477;
  --viz-box:#ca9fdf;
  --viz-neutral:#aab7c6;
  --viz-key:#f4ab67;
}

html:not(.dark){
  color-scheme:light;
  --overlay:#fffdf8;--overlay-text:#16191f;
  --selection:#dce8f5;--selection-text:#132b43;--focus:#145bbb;
  --paper:var(--bg2);--ink:var(--text);--muted:var(--text2);
  --bg:#faf8f3;          /* page canvas */
  --bg2:#f4f1e9;         /* raised surface: header, cards */
  --bg3:#eceadf;         /* recessed surface: pitch fill */
  --surface:rgba(25,28,34,.03);
  --surface2:#e8e4d8;
  --border:#ded9cd;
  --border2:#b9b2a1;
  --text:#16191f;        /* primary */
  --text2:#4a5262;       /* secondary, body */
  --text3:#596170;
  --text4:#596170;
  --green:#0f7a52;
  --red-bright:#c23b34;
  --accent:#EF0107;

  /* Same palette under the names the terminal-styled pages use: index,
     insights, search, glossary, sequences, and the three gated documents
     guide, methodology and validation. Aliases, not new values, so those pages
     share the canvas, surfaces, lines and text colours rather than keeping a
     warm paper set of their own. The three gated pages needed no new aliases:
     their vocabulary is the same one this block already covered, and --f-disp
     is aliased at root scope above.
     What stays on those pages is what this file does not carry: --amber and its
     tints, which are their own accent and deliberately not the brand red, plus
     --blue, and guide.html's reading serif --f-read. */
  --panel:var(--bg2);
  --panel2:var(--bg3);
  --line:var(--border);
  --line2:var(--border2);
  --dim:var(--text2);
  --dim2:var(--text3);
  --red:var(--red-bright);
}

html:not(.dark),html.dark:root{
  --f-display:'Archivo','Inter',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --f-disp:var(--f-display);--f-data:var(--f-mono);
  --sans:var(--f-body);--mono:var(--f-mono);--serif:Georgia,serif;
}

/* Shared interaction semantics; plot series retain their own role tokens. */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
button,input,select,textarea{color:var(--text);font-family:var(--f-body)}
select option{background:var(--overlay);color:var(--overlay-text)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:640px){pre{max-width:100%;overflow:auto}main{min-width:0}table{max-width:100%}}