/* Control Freak design tokens: the "Hi-vis" style.
   Rules for using them are in docs/design.md. In short:
   - Hi-vis means "yours": your line, your score, your fastest split, the one main button.
   - Hi-vis is a fill with black on it, never text on white.
   - Map colours (course purple, best-route blue) keep their map meanings.
   Map drawing uses fixed colours (COL in app.js) because the map photo is always light. */
:root{
  /* surfaces and ink */
  --paper:#FFFFFF;        /* panels, the app bar, cards */
  --ground:#EFF0EC;       /* behind the panels */
  --ink:#111111;          /* text, 2 px rules, hard shadow */
  --muted:#5D6166;        /* secondary text, labels */
  --hair:#DCDDD8;         /* light dividers inside a block */
  --rule:#111111;         /* structural 2 px rules and borders */

  /* yours */
  --hivis:#C9F400;
  --on-hivis:#111111;     /* text on a hi-vis fill */
  --hivis-tint:rgba(201,244,0,.35);
  --score-ink:#111111;    /* your big score: black with a hi-vis marker stroke under it */
  --score-mark:#C9F400;
  /* your current choice (selected tab / segment): ink fill with a hi-vis underline */
  --sel-bg:#111111; --sel-ink:#FFFFFF; --sel-mark:#C9F400;

  /* map meanings */
  --course:#A3106F;       /* controls, the start, gaps: the map's overprint purple */
  --best:#0B4FD0;         /* the best route and the AI */

  /* materials */
  --thermal:#FAFAF6;      /* the splits slip */

  /* state */
  --good:#1F7A45; --warn:#C4101F; --shadow:#111111;
  /* the leg heat (time lost per leg, map and score card): hotter = more lost. Same values as COL.some/big in app.js */
  --heat-some:#F07828; --heat-big:#C81E1E;

  /* type */
  --f-ui:"Chivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-mono:"Chivo Mono",ui-monospace,Menlo,Consolas,monospace;

  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#161719; --ground:#0D0E0F; --ink:#F1F2EE; --muted:#A2A6AB; --hair:#2C2E31; --rule:#F1F2EE;
  --hivis:#D2FF1A; --on-hivis:#111111; --hivis-tint:rgba(210,255,26,.16);
  --score-ink:#D2FF1A; --score-mark:transparent;     /* on black, hi-vis can be the text itself */
  --sel-bg:#D2FF1A; --sel-ink:#111111; --sel-mark:transparent;   /* on black: a solid hi-vis fill (a pale fill hid the line) */
  --course:#E46CC2; --best:#6FA6FF;
  --thermal:#1F2022;
  --good:#62C48C; --warn:#FF6B6B; --shadow:#000000;
  color-scheme:dark }}