/* Story of the Line — shared design tokens.
   ---------------------------------------------------------------------------
   ONE palette. This file used to carry two: a "Data for Thought v0.1" set and a
   "Locked palette v1" set that disagreed with it (MLB green vs MLB red, two
   WNBA oranges, two EPL purples, --page-background vs --ground holding the same
   hex under different names). The locked palette had no consumers at all — it
   was a spec sitting next to the live tokens — so the two could drift without
   anything breaking.

   Now the locked palette IS the source of truth, and the DfT-era names are thin
   aliases onto it. The aliases stay because ~600 call sites in shell.css and the
   hub's inline styles still use them; they are not a second palette.

   Layer 1 ground+ink · Layer 2 slate · Layer 3 figures · Layer 4 sport accents.
   Team colour lives in shared/team-colors.js(.json) + the clash resolver.

   Contrast rules this file is held to (checked against the surface each token
   actually sits on — --card, --subtle-fill and --ground):
     text          >= 4.5:1   (WCAG AA, and these run at 9-11px)
     bar fills,
     ball marks    >= 3.0:1   (WCAG 1.4.11 non-text)
   Anything added here should clear the same bar. */

:root {
  /* ---- Layer 1: ground + ink ------------------------------------------- */
  --ground: #E3E8D6;          /* every page */
  --card: #FFFFFF;            /* the only true white */
  --subtle-fill: #F4F6EE;     /* table header rows, zebra */
  --track: #E4E7DE;           /* empty half of any bar */
  --ink-deep: #1C3A5E;        /* headings, links, chrome */
  --ink-black: #1B2420;       /* primary body copy */
  --body-text: #3F4A50;       /* secondary copy (9.10:1 on card) */
  --muted-sage: #606961;      /* eyebrows, units. Was var(--muted-sage,#606961): 3.84:1 on card
                                 and 3.07:1 on ground, which failed AA at the
                                 9-11px this token is used at. */
  --hairline-sage: #CFD7C0;
  --hairline-white: #E3E7D8;
  --border-subtle: #D6DAD1;   /* a third hairline, live in shell.css (91 uses).
                                 Deliberately not merged into the two above —
                                 they are visibly lighter and swapping it would
                                 drop borders out of the hub's cards. */
  --border-strong: #B9BFB4;

  /* ---- Layer 2: slate (the dark panels) -------------------------------- */
  --slate-top: #51749B; --slate-bottom: #466683; --slate-border: #3C5872;
  --columbia: #9BBBD9; --columbia-border: #7E9DBA;  /* ink text only */
  /* Ice: the light half of the blue. Panels that used to be a mid-blue fill with
     white type are now ice with navy type - 8.75:1, against 4.86:1 before. Ice
     is only 1.06:1 against the cream ground, so an ice panel MUST carry a border
     or it has no edge; --ice-border is the old slate, kept for exactly that. */
  --ice: #D3E2EF; --ice-border: #51749B;

  /* ---- Layer 3: figures ------------------------------------------------ */
  /* -dark = on the slate panels. -text = on light surfaces.
     The base --fig-* values are chart-line colours (>= 3.0:1, non-text). They
     were also being used for pundit NAMES in the results tables, where 7 of 8
     fell between 3.2 and 4.3:1 and failed AA. Use --fig-*-text for any type. */
  --house-blue: #0E8FBC;      /* lines + link hover */
  --house-blue-text: #0A6F92; /* the same blue as type (4.53:1 on ground) */
  --pos: #2C7A4B; --neg: #B23A2E;
  --gold: #c08a12;            /* leader/consensus marks on the boards */
  --draw: #c6c6ca;            /* the tie block in a soccer forecast bar */

  --fig-pro: #1C3A5E;        --fig-pro-dark: #FFFFFF;      --fig-pro-text: #1C3A5E;
  --fig-streaker: #0E8FBC;   --fig-streaker-dark: #8ED8F5; --fig-streaker-text: #0A6F92;
  --fig-sharp: #8E6FB8;      --fig-sharp-dark: #C9B6E8;    --fig-sharp-text: #745B96;
  --fig-matchup: #A98232;    --fig-matchup-dark: #EBD29A;  --fig-matchup-text: #806226;
  --fig-bandwagon: #C96F4A;  --fig-bandwagon-dark: #EFA98A;--fig-bandwagon-text: #985438;
  --fig-cash: #3E8E6E;       --fig-cash-dark: #8FD4B5;     --fig-cash-text: #317158;
  --fig-buzz: #B85C79;       --fig-buzz-dark: #E8A2B8;     --fig-buzz-text: #9C4E66;
  --fig-consensus: #8A9098;  --fig-consensus-dark: #DDE5EE;--fig-consensus-text: #63676D;
  --fig-grid-on-white: #D8DDD2;

  /* ---- Layer 4: sport accents ------------------------------------------ */
  /* The ball mark and the NWSL season-progress bar. There used to be a 3px rule
     across the top of every page too; it's gone (owner call 2026-08-07), so
     these no longer need to clear 3:1 against the ground.
     Each dashboard repeats its own value as --sport-accent in site-<x>/styles.css
     (the boards don't load this file); keep the two in step.
     Ratios are against --ground, which the ball mark still sits on. */
  --sport-mlb: #C8102E;   /*  4.70:1 */
  --sport-nwsl: #8E0E2A;  /*  7.47:1 */
  --sport-epl: #4B1B73;   /*  9.85:1 */
  --sport-wnba: #D2600A;  /*  3.10:1, split from the shared basketball orange */
  --sport-nba: #1D428A;   /*  7.63:1, the other half of that split */
  --sport-nfl: #013369;   /* 10.00:1 */
  --sport-nhl: #2B3A45;   /*  9.35:1 */

  /* ---- Type ------------------------------------------------------------ */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Newsreader', 'Iowan Old Style', Palatino, Georgia, serif;

  /* ---- Layout scale ---------------------------------------------------- */
  /* 1160 - 2*20 = 1120 content, matching the site header exactly, and matching
     shared/base.css's .wrap so a board and a hub tab are the same width. */
  --maxw: 1160px;
  --radius: 16px;
  --radius-small: 8px;
  --shadow-card: 0 1px 2px rgba(27, 36, 32, 0.06), 0 4px 16px rgba(27, 36, 32, 0.05);
  --header-rule: 4px;

  /* ---- Compatibility aliases ------------------------------------------- */
  /* Live names from the DfT era, now resolving to the palette above so each hex
     is declared exactly once. Prefer the layer names in new code. */
  --brand-paper: var(--ground);
  --brand-teal: var(--ink-deep);          /* named "teal", always been navy */
  --brand-teal-light: #4A7BB0;
  --brand-sand-light: #EDB65C;
  --page-background: var(--ground);
  --surface-primary: var(--card);
  --surface-secondary: var(--subtle-fill);
  --text-primary: var(--ink-black);
  --text-secondary: var(--body-text);     /* was #4A5450; --body-text is 1 step
                                             darker and clears AA by more */
  /* House sand. Drives .dft-header's bottom rule, the active nav underline and
     .dft-card-accent on every hub page that doesn't set data-pillar. Left at its
     original value: collapsing the file shouldn't restyle the site. */
  --pillar-accent: #E0A03C;
  --pillar-accent-ink: #8A6A0A;   /* AA-safe text weight of the accent */
}

/* Pillar identities. Only "games" is in use here (site-sports/index.html); the
   other two belong to the sibling DfT properties and are kept so a shared shell
   page can set them. */
body[data-pillar="claims"]   { --pillar-accent: #23364E; --pillar-accent-ink: #23364E; }
body[data-pillar="measures"] { --pillar-accent: #4C6B5C; --pillar-accent-ink: #4C6B5C; }
body[data-pillar="games"]    { --pillar-accent: #5B4B8A; --pillar-accent-ink: #5B4B8A; }

/* Motion: honour a reduced-motion preference everywhere rather than per page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}