/* Cut Day THEME — the ONE place that decides how the app looks: every colour and every typeface.
   ------------------------------------------------------------------------------------------------
   To retune the app, edit this file and nothing else:
     1 · fonts    the three faces (files, names, the stacks) and the type scale
     2 · palette  the raw colours — hex only, each defined ONCE here
     3 · roles    what a colour is FOR (yards, mult, win, boss, card, position, fx…), built on the palette
     4 · washes   the translucent inks and chalks, derived from the palette with color-mix()
   No other stylesheet or script may hold a colour literal or a font name: they read these variables
   (`var(--wo)`, `var(--display)`). `tests/unit/theme.test.js` fails the build if one sneaks back in.
   Three values cannot read a variable and are mirrored by `npm run theme:sync` (tools/sync-theme.mjs):
   the `<meta name="theme-color">` of the two documents and the manifests' background/theme colour —
   all four take `--wg`.
   Contrast (WCAG 2.2): body text ≥ 4.5:1; EVERY figure ≥ 4.5:1 as well (the owner's rule, 2026-09-30) —
   hence the -deep fills under warm-white figures and the -deep inks for figures on the warm-white card
   face. If you change a colour, re-check the ratios noted next to it. */

/* ===================== 1 · Fonts — self-hosted, SIL OFL 1.1 (app/shared/fonts/README.md) ===================== */
@font-face { font-family: 'CD Display'; src: url('/shared/fonts/big-shoulders-display-800.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jersey 10'; src: url('/shared/fonts/jersey-10.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('/shared/fonts/barlow-semi-condensed-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('/shared/fonts/barlow-semi-condensed-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('/shared/fonts/barlow-semi-condensed-700.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }

:root {
  /* Three faces, three jobs: an athletic condensed display (Big Shoulders ExtraBold, one static cut declared
     for every weight so a `font-weight: 400` rule never thins it), the pixel face ONLY for figures (scores,
     counters, card ranks — the arcade accent), and a condensed UI grotesk for everything read. */
  --display: 'CD Display', 'Barlow Semi Condensed', sans-serif;
  --num: 'Jersey 10', 'CD Display', sans-serif;
  --ui: 'Barlow Semi Condensed', system-ui, sans-serif;
  --sys: system-ui, sans-serif;   /* the OS face, for the few glyphs the three above do not draw (▲ ▼) */

  /* the type scale — nothing reads below 12 px */
  --fs-xs: 12px; --fs-label: 13px; --fs-small: 14px; --fs-body: 16px; --fs-lead: 18px; --fs-h3: 20px; --fs-h2: 28px;
}

/* ===================== 2 · Palette — "Prime Time Arcade": night-turf green felt, no violet anywhere ===================== */
:root {
  /* the ground: four steps of night turf (text on them 16.0 / 14.5 / 13.1 / 10.4 : 1) */
  --wg: #051e13;      /* ground */
  --felt-2: #072819;  /* sunken panel */
  --panel: #09311e;   /* panel */
  --panel-hi: #0c4329; /* raised panel, the dark card face */
  --ink: #020d08;    /* outlines, shadows, text on light fills — the green-black */

  /* the brand hues — one job each */
  --wb: #2f6bff;       /* electric blue — YARDS accents, bursts, rules */
  --wb-deep: #2451d6;  /* YARDS fill under warm-white figures (5.95:1) and YARDS ink on the card face */
  --wbt: #93b2ff;      /* blue for small text, 8.4:1 on ground */
  --wr: #ef2a5f;       /* raspberry red — MULT accents, boss, loss (ink on it 4.9:1) */
  --wr-deep: #c9184c;  /* MULT fill under warm-white figures (5.16:1) and MULT ink on the card face */
  --wp: #ff7c9c;       /* red for small text, 7.2:1 on ground */
  --wo: #ffbe2e;       /* marquee gold — PLAY, coins, coaches, TD, big play (ink on it 11.9:1) */
  --wt: #a8ef3a;       /* chalk lime — 1st down, success, focus (12.5:1 on ground) */
  --legend: #7fe6ff;   /* legendary coach ice cyan (ink on it 13.8:1) */
  --wl: #d9b36c;       /* pigskin tan — the ball, the LINE (ink on it 10.0:1) */

  /* the neutrals: warm white for body text, green-tinted greys for the rest */
  --wy: #fff3e3;       /* warm white — all body text */
  --dim: #cfe3d6;      /* secondary text */
  --faint: #a4c0ae;    /* tertiary text (5.8:1 on the raised panel) */
  --soft: #e8f1ea;     /* light label on a darkened tile */
  --card-dim-ink: #3a5a4c; /* dimmed ink on the warm-white card face (7.0:1) */
  --white: #fff;       /* the few labels that must be pure white on a coloured fill */
  --steel: #2f5a49;    /* the disabled key's bottom stop */
  --orange: #ff8a3d;   /* the "medium" threat pip */
  --blue-pos: #4d80ff; /* the WR position window (ink on it 5.3:1) */
  --ball-1: #c4602a; --ball-2: #8e3b12; --ball-3: #6b2a0c;   /* the leather of the football on the favicon (the only file that cannot read a variable) */

  /* the weekly tiers (gold is --wo) */
  --tier-silver: #c8d2e4; --tier-bronze: #c88a4a; --tier-wood: #8a9aa8;
}

/* ===================== 3 · Roles — what each colour is FOR ===================== */
:root {
  --felt: var(--wg); --chalk: var(--wy);
  --yards: var(--wb); --yards-deep: var(--wy); --mult: var(--wr); --mult-deep: var(--wp);
  --gold: var(--wo); --gold-deep: var(--ink); --win: var(--wt); --loss: var(--wp); --boss: var(--wp); --boss-bg: var(--ink); --first: var(--wt);
  --card: var(--panel-hi); --card-ink: var(--wy); --card-dim: var(--dim);
  /* one hue per position, on the card's photo window and on every position chip (ink on each ≥ 4.8:1) */
  --pos-qb: var(--wr); --pos-wr: var(--blue-pos); --pos-rb: var(--wt); --pos-te: var(--wo); --pos-line: var(--wl);
  /* confetti, bursts and the canvas particles draw from this list only */
  --fx-1: var(--wo); --fx-2: var(--wr); --fx-3: var(--wb); --fx-4: var(--wt); --fx-5: var(--wy); --fx-6: var(--wbt);
  /* legacy names still read by a few rules (nothing new should use them) */
  --felt2: var(--felt-2); --cream: var(--chalk); --red: var(--wr); --blue: var(--wb); --green: var(--wt); --danger: var(--wp);
}

/* ===================== 4 · Washes — a colour at a given opacity, derived (never a second hex) ===================== */
:root {
  --y-16: color-mix(in srgb, var(--wy) 16%, transparent); --p-16: color-mix(in srgb, var(--wr) 20%, transparent);
  --ink-20: color-mix(in srgb, var(--ink) 20%, transparent); --ink-25: color-mix(in srgb, var(--ink) 25%, transparent);
  --ink-35: color-mix(in srgb, var(--ink) 35%, transparent); --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-72: color-mix(in srgb, var(--ink) 72%, transparent); --ink-90: color-mix(in srgb, var(--ink) 90%, transparent);
  --chalk-05: color-mix(in srgb, var(--wy) 5%, transparent); --chalk-08: color-mix(in srgb, var(--wy) 8%, transparent);
  --chalk-10: color-mix(in srgb, var(--wy) 10%, transparent); --chalk-14: color-mix(in srgb, var(--wy) 14%, transparent);
  --chalk-28: color-mix(in srgb, var(--wy) 28%, transparent);
}