/*
 * The design tokens: every colour, gradient, type stack and radius the site
 * uses, named once.
 *
 * WEB-13. Before this each sheet carried its own literals. `#667eea` was
 * written out ten times across five files, the page-background gradient four,
 * and the brand gradient five -- so "change the accent" meant finding all of
 * them, and missing one was invisible until somebody looked at two pages side
 * by side. That is the same failure WEB-10 had to clean up after: four
 * different treatments of one `<select>`, each page having quietly grown its
 * own.
 *
 * `controls.css` already had the shape of the answer and said so in its own
 * comment -- its tokens "are not a new palette, they are the values already
 * load-bearing elsewhere in the site, named once so a control cannot drift
 * from the page it sits on". This is that, for the whole site. Its `:root`
 * block moved here; two token blocks would be two palettes again.
 *
 * **Nothing here is new.** Every value is the literal it replaced, and that is
 * checkable rather than asserted: `tests/css_cascade.py` resolves `var()`
 * against this table, so the sheets before and after the hoist can be compared
 * as the values a browser would actually apply. Measured across the six pages,
 * 1,894 declarations, of which 312 are this token table and **9 moved** -- the
 * three-digit spellings `#fff` (on `th` and `.team-spread`), `#bbb` and `#888`,
 * which are now the six-digit form of the same three colours. Every other
 * declaration on every page is byte-identical.
 *
 * Adding a colour here is a design decision. This file was built by taking an
 * inventory, not by choosing.
 *
 * Loaded first by every template, ahead of even the shared sheets, because a
 * definition should be readable before its uses. Custom properties resolve at
 * use rather than at parse, so load order is not what makes it work -- it is
 * what makes it legible.
 *
 * What is deliberately NOT here: the `rgba()` scrims. There are about thirty
 * and they are overwhelmingly one-offs -- the same base colour at eight
 * different alphas, each tuned to what sits behind it. Those are component
 * opacities rather than palette, and naming them would produce thirty tokens
 * with one use each, which is a list of literals with extra steps. The rule
 * the suite enforces is narrower and holds: no sheet but this one writes a
 * **hex** colour.
 */

:root {
    /* -- The ground the pages sit on ---------------------------------- */
    --ground-900: #1a1a2e;
    --ground-800: #16213e;
    --ground-700: #0f3460;
    /* The three table pages and /chart. */
    --page-gradient: linear-gradient(135deg, var(--ground-900) 0%, var(--ground-800) 100%);
    /* /upcoming and the other skeleton, which run one stop deeper. */
    --page-gradient-deep: linear-gradient(135deg, var(--ground-900) 0%, var(--ground-800) 50%, var(--ground-700) 100%);
    --panel: #1e293b;

    /* -- Brand: the indigo-to-violet on the nav, the headings, the rank
          badge and the model toggle ------------------------------------ */
    --brand-start: #667eea;
    --brand-end: #764ba2;
    --brand-gradient: linear-gradient(135deg, var(--brand-start) 0%, var(--brand-end) 100%);
    /* Reversed on hover, which is the whole of the nav button's hover state. */
    --brand-gradient-flipped: linear-gradient(135deg, var(--brand-end) 0%, var(--brand-start) 100%);

    /* -- Accents ------------------------------------------------------ */
    --accent: #ff6600;
    --flame-red: #ff6b35;
    --flame-orange: #f7931e;
    --flame-gold: #ffcd3c;
    --flame-sky: #35a0ff;
    /* The animated "Upcoming Games" title. Four stops, ending on blue. */
    --title-gradient: linear-gradient(45deg, var(--flame-red), var(--flame-orange), var(--flame-gold), var(--flame-sky));
    /* The 4px rule across the top of every game card. Same three warm stops. */
    --card-rule-gradient: linear-gradient(90deg, var(--flame-red), var(--flame-orange), var(--flame-gold));
    --gold: #fbbf24;
    --gold-deep: #f59e0b;
    --gold-gradient: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
    --amber: #ffa500;

    /* -- Type --------------------------------------------------------- */
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Ratings are columns of digits; they need to line up. */
    --font-mono: 'Courier New', monospace;

    --text: #e4e4e7;
    --text-soft: #e0e0e0;
    --text-strong: #ffffff;
    --text-bright: #f1f5f9;
    --text-muted: #94a3b8;
    --text-faint: #bbbbbb;
    --text-dim: #888888;
    --text-on-panel: #f8f9fa;
    /* On a light surface -- the inside of a game card, which is white. */
    --ink: #2c3e50;
    --ink-muted: #6c757d;

    /* -- Card surfaces ------------------------------------------------ */
    --card-surface: #6c757d;
    /* One step darker: the card's border, and its background on hover. */
    --card-edge: #5a6268;

    /* -- Meaning ------------------------------------------------------
          Three, not the six an inventory of the old sheets would give. The
          `#22c55e`/`#ef4444`/`#20c997` family lived only on the EV badge, which
          WEB-14 took off the card face; a token whose last user is gone is a
          colour the site does not have. They come back if something paints with
          them again. */
    --positive-deep: #28a745;
    /* BET-4's counterpart to the green above, and the same family: Bootstrap's
       danger beside its success, which is where `--positive-deep` came from.
       Added when `/tracker` needed a *semantic* negative -- `--flame-red` is an
       accent in the title gradient and using it for "this bet lost" would tie
       one meaning to the other. */
    --negative-deep: #dc3545;
    --positive-wash: #e8f5e8;
    --neutral: #9ca3af;
    --info: #007bff;

    /* -- Team colours -------------------------------------------------
          `--team-color` itself is set per row as an inline style by the
          templates and is never declared in a sheet. These are what shows for
          a team with no colour on file. */
    --team-fallback: #333333;
    --team-fallback-ink: #ffffff;

    /* -- Geometry ------------------------------------------------------ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* -- Controls (WEB-10, hoisted here by WEB-13) --------------------- */
    --control-surface: rgba(30, 41, 59, 0.7);
    --control-surface-hover: rgba(30, 41, 59, 0.95);
    --control-border: rgba(102, 126, 234, 0.35);
    --control-border-hover: rgba(102, 126, 234, 0.8);
    --control-ink: var(--text-strong);
    --control-ink-muted: var(--text-muted);
    --control-radius: var(--radius-md);
}