/* Boxscore design tokens: the only place colors, type, radii, spacing, shadows
   and motion values are defined. Loaded before css/style.css on every page.
   The spec is docs/design-system/ (its tokens/*.css mirror this file); use
   var(--…) everywhere else. Keyframes stay in css/style.css. */


:root{
  color-scheme: dark;
  --ink-rgb: 255,255,255;
  --hero-fade-rgb: 10,11,13;
  --cta-bg: var(--accent-fill);
  --cta-border: transparent;
  --cta-color: var(--on-accent);
  --star-idle: var(--text-mute);
  --card-yellow: var(--accent-fill);
  --card-ring: transparent;
  --star-on: var(--accent);
  --hero-shadow: 0 10px 22px rgba(0,0,0,0.5);
  --bar-bg: rgba(19,20,24,0.82);
  --seg-track: rgba(var(--ink-rgb),0.06);
  --seg-thumb: rgba(var(--ink-rgb),0.13);
  --seg-thumb-shadow: 0 1px 2px rgba(0,0,0,0.35);
  --bg: #0A0B0D;
  --surface: #16171B;
  --surface-2: #1C1D21;
  --sheet: #18191D;
  --text: #F3F4F6;
  --text-sub: #94969E;
  --text-mute: #64666E;
  --hairline: rgba(var(--ink-rgb),0.07);
  --hairline-strong: rgba(var(--ink-rgb),0.14);
  --accent: #D9B45B;
  --accent-fill: #D9B45B;
  --accent-soft: rgba(217,180,91,0.14);
  --tab-pill: rgba(217,180,91,0.16);
  --accent-border: rgba(217,180,91,0.35);
  --win: #5FB88A;
  --win-soft: rgba(95,184,138,0.14);
  --loss: #D97066;
  --loss-soft: rgba(217,112,102,0.14);
  --draw: #B8A369;
  --draw-soft: rgba(184,163,105,0.16);
  --live: #E5484D;
  --provisional: #7C9CD9;
  --provisional-soft: rgba(124,156,217,0.16);
  --provisional-border: rgba(124,156,217,0.38);
  /* Leaderboard-only (js/overall.js, css below) — a few extra ink/rank
     tiers the design_handoff_leaderboard spec calls for that don't map
     onto an existing token above without either flattening a
     distinction the design deliberately makes (leader vs. non-leader
     total ink; rank 2-3 vs. rank 4+) or reusing a token at the wrong
     opacity (the rank-1 row wash is a much fainter accent than
     --accent-soft, which is already spoken for elsewhere). */
  --lb-ink-strong: #FFFFFF;
  --lb-ink-2: #E6E7EB;
  --lb-ink-3: #C7C9D1;
  --lb-rank-mid: #9C9EA6;
  --lb-rank-low: #5E6068;
  --lb-stroke: #4A4C54;
  --lb-divider: rgba(var(--ink-rgb),0.05);
  --lb-accent-wash: rgba(217,180,91,0.07);
  --lb-accent-wash-border: rgba(217,180,91,0.30);
  --record: #9AA5B5;
  --record-soft: rgba(154,165,181,0.16);
  --nav-h: 58px;
  /* Body's own horizontal padding — pulled into a variable so
     .standings-filter-row (see below) can bleed its sticky background
     out to the real screen edges instead of stopping at this inset,
     and stay in sync with the narrower value the max-width:700px
     breakpoint below swaps in, without restating body's own rule
     there. */
  --page-pad: 24px;
}

/* Appearance setting (js/settings.js): data-theme="light" forces light,
   "dark" forces dark, and "auto" (no attribute rule) follows the OS. The
   token list is written twice because CSS can't share one rule between a
   selector and a media query. */
:root[data-theme="light"]{
  color-scheme: light;
  --ink-rgb: 20,22,28;
  --hero-fade-rgb: 244,243,239;
  --cta-bg: var(--accent-fill);
  --cta-border: transparent;
  --cta-color: #16171B;
  --star-idle: #7C7E87;
  --card-yellow: #F2C315;
  --card-ring: rgba(20,22,28,0.18);
  --star-on: #D9A20F;
  --hero-shadow: 0 8px 18px rgba(20,22,28,0.22);
  --bar-bg: rgba(250,250,248,0.85);
  --seg-thumb: #FFFFFF;
  --seg-thumb-shadow: 0 1px 3px rgba(20,22,28,0.16), 0 0 0 0.5px rgba(20,22,28,0.06);
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #ECEAE4;
  --sheet: #FFFFFF;
  --text: #16171B;
  --text-sub: #5B5D66;
  --text-mute: #8A8C94;
  --accent: #85660C;
  --accent-fill: #E2B84A;
  --accent-soft: rgba(154,119,22,0.12);
  --tab-pill: rgba(154,119,22,0.16);
  --accent-border: rgba(154,119,22,0.4);
  --win: #2E8A5C;
  --win-soft: rgba(46,138,92,0.12);
  --loss: #C2453B;
  --loss-soft: rgba(194,69,59,0.12);
  --draw: #8A7430;
  --draw-soft: rgba(138,116,48,0.14);
  --provisional: #4A6FB8;
  --provisional-soft: rgba(74,111,184,0.12);
  --provisional-border: rgba(74,111,184,0.38);
  --lb-ink-strong: #0B0C0F;
  --lb-ink-2: #22242A;
  --lb-ink-3: #3F414A;
  --lb-rank-mid: #6B6D76;
  --lb-rank-low: #9A9CA4;
  --lb-stroke: #C9C7BF;
  --lb-accent-wash: rgba(154,119,22,0.07);
  --lb-accent-wash-border: rgba(154,119,22,0.30);
  --record: #56617A;
  --record-soft: rgba(86,97,122,0.12);
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    color-scheme: light;
  --ink-rgb: 20,22,28;
  --hero-fade-rgb: 244,243,239;
  --cta-bg: var(--accent-fill);
  --cta-border: transparent;
  --cta-color: #16171B;
  --star-idle: #7C7E87;
  --card-yellow: #F2C315;
  --card-ring: rgba(20,22,28,0.18);
  --star-on: #D9A20F;
  --hero-shadow: 0 8px 18px rgba(20,22,28,0.22);
  --bar-bg: rgba(250,250,248,0.85);
  --seg-thumb: #FFFFFF;
  --seg-thumb-shadow: 0 1px 3px rgba(20,22,28,0.16), 0 0 0 0.5px rgba(20,22,28,0.06);
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #ECEAE4;
  --sheet: #FFFFFF;
  --text: #16171B;
  --text-sub: #5B5D66;
  --text-mute: #8A8C94;
  --accent: #85660C;
  --accent-fill: #E2B84A;
  --accent-soft: rgba(154,119,22,0.12);
  --tab-pill: rgba(154,119,22,0.16);
  --accent-border: rgba(154,119,22,0.4);
  --win: #2E8A5C;
  --win-soft: rgba(46,138,92,0.12);
  --loss: #C2453B;
  --loss-soft: rgba(194,69,59,0.12);
  --draw: #8A7430;
  --draw-soft: rgba(138,116,48,0.14);
  --provisional: #4A6FB8;
  --provisional-soft: rgba(74,111,184,0.12);
  --provisional-border: rgba(74,111,184,0.38);
  --lb-ink-strong: #0B0C0F;
  --lb-ink-2: #22242A;
  --lb-ink-3: #3F414A;
  --lb-rank-mid: #6B6D76;
  --lb-rank-low: #9A9CA4;
  --lb-stroke: #C9C7BF;
  --lb-accent-wash: rgba(154,119,22,0.07);
  --lb-accent-wash-border: rgba(154,119,22,0.30);
  --record: #56617A;
  --record-soft: rgba(86,97,122,0.12);
  }
}

/* ==== Design tokens: scales (UI consistency pass) ====
   New rules should reach for these instead of literal values. Existing
   rules migrate over incrementally. */
:root{
  --font-display: 'Space Grotesk', sans-serif;
  --font-ui: 'Manrope', sans-serif;
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-30: 30px;
  --track-tight: -0.02em; --track-snug: -0.01em;
  --track-tag: 0.06em; --track-label: 0.08em;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-sheet: 28px; --r-pill: 999px;
  --dur-press: 120ms; --dur-ui: 200ms; --dur-move: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* iOS's own sheet curve: fast out, long settle, no overshoot (a bottom
     sheet that overshoots lifts off the bottom edge). SHEET_EASE in
     js/utils.js mirrors it. */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --live-stripe: repeating-linear-gradient(135deg, var(--provisional) 0 3px, var(--provisional-soft) 3px 6px);
  --risk-stripe: repeating-linear-gradient(135deg, var(--loss) 0 3px, color-mix(in srgb, var(--loss) 35%, transparent) 3px 6px);
  /* Race chart (js/race.js) lines and rules. On --ink-rgb, so they flip
     with the theme without a light-mode copy. */
  --race-line: rgba(var(--ink-rgb), 0.13);
  --race-ghost: rgba(var(--ink-rgb), 0.07);
  --race-grid: rgba(var(--ink-rgb), 0.05);
  --race-today: rgba(var(--ink-rgb), 0.22);
  --race-mini: rgba(var(--ink-rgb), 0.12);
  --on-accent: #0A0B0D;
  --hover: rgba(var(--ink-rgb), 0.04);
  /* The two desktop consoles' sidebars (Commissioner, system admin). */
  --console-rail: color-mix(in srgb, var(--surface) 18%, var(--bg));
  --press: rgba(var(--ink-rgb), 0.07);
  --live-soft: rgba(229, 72, 77, 0.12);
  --live-border: rgba(229, 72, 77, 0.36);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  /* Neutral ink fills, on --ink-rgb so they flip with the theme. */
  --fill-soft: rgba(var(--ink-rgb), 0.06);
  --divider: rgba(var(--ink-rgb), 0.06);
  --skeleton: rgba(var(--ink-rgb), 0.07);
  /* Sheet/modal backdrop. js/sheet.js fades it on --overlay-rgb. */
  --overlay-rgb: 6, 7, 9;
  --overlay: rgba(var(--overlay-rgb), 0.6);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-tip: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -24px 64px rgba(0, 0, 0, 0.55);
  --on-live: #FFFFFF;
  --knob: #FFFFFF;
  /* Light grounds behind crests and golfer headshots, same in both themes. */
  --crest-ground: #F1F2F4;
  --person-ground: #DDE3DF;
  /* The brand mark's own colors (launch splash, landing handoff). */
  --brand-dark: #0A0B0D;
  --brand-ink: #F3F2EF;
  --brand-square: #DC7D00;
}
:root[data-theme="light"]{
  --on-accent: #16171B;
  --live-soft: rgba(229, 72, 77, 0.10);
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --on-accent: #16171B;
    --live-soft: rgba(229, 72, 77, 0.10);
  }
}

/* Body's own horizontal padding at phone width (--page-pad, above). */
@media (max-width: 700px){
  :root{ --page-pad: 16px; }
}

/* ==== Added from the design system ====
   Tokens docs/design-system/tokens/ defines that no rule uses yet. Screens
   pick them up as they move to js/ui.js (docs/design-system-plan.md). */
:root{
  --splash-ink: var(--brand-ink);
  /* League chart colors (js/overall.js). Never used for meaning. */
  --league-epl: #826AC8;
  --league-cfb: #C86AA1;
  --league-nfl: #91C86A;
  --league-mcbb: #C58C6A;
  --league-nba: #B57FC0;
  --league-nhl: #6FBFC6;
  --league-mlb: #6AC87A;
  --league-wnba: #A8B36A;
  /* Semantic aliases */
  --surface-page: var(--bg);
  --surface-card: var(--surface);
  --surface-raised: var(--surface-2);
  --surface-sheet: var(--sheet);
  --text-body: var(--text);
  --text-secondary: var(--text-sub);
  --text-tertiary: var(--text-mute);
  --border-card: var(--hairline);
  --border-control: var(--hairline-strong);
  --status-positive: var(--win);
  --status-negative: var(--loss);
  --status-live: var(--live);
  --status-provisional: var(--provisional);
  --status-locked: var(--accent);
  /* Type roles */
  --fs-hero: 40px;
  --type-page-title: 700 var(--fs-30)/1 var(--font-display);
  --type-sheet-title: 700 var(--fs-20)/1.2 var(--font-display);
  --type-section: 700 var(--fs-15)/1.2 var(--font-display);
  --type-body: 500 var(--fs-15)/1.38 var(--font-ui);
  --type-row-title: 700 var(--fs-17)/1.15 var(--font-ui);
  --type-sub: 500 var(--fs-13)/1.4 var(--font-ui);
  --type-meta: 600 var(--fs-12)/1.3 var(--font-ui);
  --type-tag: 800 var(--fs-10)/1 var(--font-ui);
  --type-score: 700 var(--fs-17)/1 var(--font-display);
  /* Radii and layout. The product's own values, not snapped to a grid. */
  --r-badge: 13px;      /* 44px team badge */
  --r-badge-sm: 8px;    /* 26px team badge */
  --r-table: 16px;      /* points table, game card */
  --r-hero: 18px;       /* points hero, race card */
  --r-cta: 12px;        /* full-width CTA */
  --r-seg: 11px; --r-seg-thumb: 8px;
  --hit-min: 44px;
  --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px;
  --space-6: 14px; --space-7: 16px; --space-8: 18px; --space-9: 20px; --space-10: 22px; --space-11: 24px;
  /* Motion. Mirror any new curve in js/utils.js for the Web Animations API. */
  --ease-push: cubic-bezier(0.22, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
:root[data-theme="light"]{
  --splash-ink: #0B0C0F;
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --splash-ink: #0B0C0F;
  }
}