/*
 * ShrimpPicks design tokens: the one place the site's core colours live (audit section 8, plan PR 19).
 *
 * Every styling layer reads these: the sheet's own styles (legacy/sheet.html), runtime/site.css,
 * runtime/desktop.css, the blue copies (scripts/blue-scope.mjs takes its blue from here), runtime/matches.css,
 * the sign-in pages (app/globals.css) and the NBA frame. Light mode (runtime/theme.ts) and the ten accents
 * (runtime/accent.ts) turn these values round in the browser like any other colour.
 *
 * The values are design F, Graphite (plan PR 21, 28/10/2026): neutral greys with no blue in them, one orange for the
 * accent with dark text on it. Jason 29/10/2026: the orange brightened (#E0633F read as brown) and the Ink pastels
 * replaced by the green, red and amber the big sports sites use (wins green, losses red, draws and riding money amber). Where the audit found text
 * too faint to read, the floors below still hold:
 * - muted text is one grey (the old dim grey was 3.2:1 on panels, audit U6)
 * - the text on the accent is dark, 4.9:1 (white on the old blue was 3.67:1, audit U4)
 * - text box borders are 3:1 or better on every panel (audit U9)
 * tests/tokens.test.ts checks those floors. The redesign (Graphite) changes the values here.
 */
:root {
  /* surfaces */
  --sb-bg: #1A1B1E;
  --sb-panel: #232529;
  --sb-panel2: #2C2E33;
  --sb-line: #383B41;
  /* text */
  --sb-text: #F0F0F2;
  --sb-muted: #A3A7AE;
  /* the accent: as text, lines and tints; the fill under white text; the text on that fill */
  --sb-accent: #FF7A3D;
  --sb-accent-fill: #FF7A3D;
  --sb-on-accent: #1A1B1E;
  /* meaning */
  --sb-win: #22C55E;
  --sb-loss: #F25C5C;
  --sb-gold: #F59E0B;
  --sb-warn: #F59E0B;
  --sb-home: #22C55E;
  --sb-away: #F59E0B;
  /* controls */
  --sb-field-line: #80858E;
  --sb-focus: #FF9D6E;

  /* the Matches page's own palette (runtime/matches.css), now the graphite tokens (plan PR 22); the form strips
     and result boxes use the standard green, amber and red (Jason 29/10/2026, in place of the Ink pastels) */
  --pgbg: var(--sb-bg); --pgcard: var(--sb-panel); --pgink: var(--sb-text); --pgmut: var(--sb-muted); --pgrule: var(--sb-line);
  --pgband: var(--sb-panel2); --pgbandink: var(--sb-text); --pgface: var(--sb-panel2); --pggold: var(--sb-gold); --pgred: var(--sb-accent);
  --pgpitch: #1F2A24; --pgpitch2: #1F2A24; --pgline: rgba(255,255,255,.18); --pgchip: var(--sb-panel2);
  --pgw: #22C55E; --pgd: #F59E0B; --pgl: #F25C5C; --pgonw: #1A1B1E;
}
/* the Matches page in light mode: the mock-up's light greys (light mode leaves the --pg colours alone) */
html[data-theme=light] {
  --pgbg: #F3F3F1; --pgcard: #fff; --pgink: #1A1B1E; --pgmut: #5E6168; --pgrule: #DCDCD8;
  --pgband: #EAEAE7; --pgbandink: #1A1B1E; --pggold: #B45309; --pgred: #FF7A3D; --pgface: #fff; /* the same orange as dark mode (Jason 30/10/2026) */
  --pgpitch: #DCE8DF; --pgpitch2: #DCE8DF; --pgline: rgba(26,27,30,.3); --pgchip: #EAEAE7;
  /* deep enough for 4.5:1 with white on the result boxes */
  --pgw: #15803D; --pgd: #B45309; --pgl: #DC2626; --pgonw: #fff;
}