/* 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);
  --tour-screen-shadow: 0 24px 60px rgba(0,0,0,0.4); /* the landing tour's mini screen */
  --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);
  --scrub-thumb-shadow: 0 1px 3px rgba(0,0,0,0.4);
  --accent-glow: rgba(217,180,91,0.45);
  --bg: #0A0B0D;
  --surface: #16171B;
  --surface-2: #1C1D21;
  --sheet: #18191D;
  --text: #F3F4F6;
  --text-sub: #A3A5AD;
  /* 5.3:1 on --surface, so small muted labels stay readable (HIG contrast). */
  --text-mute: #8A8C94;
  --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);
  /* The playoffs reveal's gold strip (.ps-hero-in) and Home's card for it
     (.ps-home): lit from above so they read gold, not olive, on the dark
     card; the flare is the brighter light the strip opens with. */
  --ps-hero-bg: radial-gradient(120% 90% at 50% 0%, rgba(240,205,120,0.38), rgba(217,180,91,0.16) 65%, rgba(217,180,91,0.10));
  --ps-hero-flare: radial-gradient(120% 90% at 50% 0%, rgba(248,220,140,0.5), rgba(217,180,91,0.18) 70%, rgba(217,180,91,0));
  --win: #5FB88A;
  --win-soft: rgba(95,184,138,0.14);
  --presence: var(--win);   /* the draft lobby's "in the room" dot */
  --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: #A3A5AD;
  --lb-rank-low: #8A8C94;
  --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: 68px;      /* room the floating tab bar takes above the safe area */
  --tab-bar-h: 60px;
  --title-bar-h: 44px; /* the title bar that appears on scroll (phones; 0 in the wide layout) */
  /* 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);
  --tour-screen-shadow: 0 24px 60px rgba(20,22,28,0.16);
  --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);
  --scrub-thumb-shadow: 0 1px 3px rgba(20,22,28,0.22);
  --accent-glow: rgba(226,184,74,0.6);
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #ECEAE4;
  --sheet: #FFFFFF;
  --text: #16171B;
  --text-sub: #4E5059;
  --text-mute: #6B6D76;
  --accent: #80620C;
  --accent-fill: #E2B84A;
  /* Gold tints and glows are the fill gold (--accent-fill), so they read
     warm yellow like Send; only --accent (text) is the darker gold. */
  --accent-soft: rgba(226,184,74,0.2);
  --tab-pill: rgba(226,184,74,0.26);
  --accent-border: rgba(205,160,45,0.55);
  --ps-hero-bg: radial-gradient(120% 90% at 50% 0%, rgba(226,184,74,0.36), rgba(226,184,74,0.2) 65%, rgba(226,184,74,0.16));
  --ps-hero-flare: radial-gradient(120% 90% at 50% 0%, rgba(240,200,95,0.45), rgba(226,184,74,0.15) 70%, rgba(226,184,74,0));
  /* Light-theme meaning colors are darker, for 4.5:1 small text on every
     light surface (tests/design-tokens.test.mjs checks it). The tints keep
     the brighter hue. */
  --live: #C91D22;
  --win: #26714B;
  --win-soft: rgba(46,138,92,0.12);
  --loss: #AC3D34;
  --loss-soft: rgba(194,69,59,0.12);
  --draw: #8A7430;
  --draw-soft: rgba(138,116,48,0.14);
  --provisional: #4163A5;
  --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: #4F515A;
  --lb-rank-low: #6B6D76;
  --lb-stroke: #C9C7BF;
  --lb-accent-wash: rgba(226,184,74,0.12);
  --lb-accent-wash-border: rgba(205,160,45,0.4);
  --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);
  --tour-screen-shadow: 0 24px 60px rgba(20,22,28,0.16);
  --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);
  --scrub-thumb-shadow: 0 1px 3px rgba(20,22,28,0.22);
  --accent-glow: rgba(226,184,74,0.6);
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #ECEAE4;
  --sheet: #FFFFFF;
  --text: #16171B;
  --text-sub: #4E5059;
  --text-mute: #6B6D76;
  --accent: #80620C;
  --accent-fill: #E2B84A;
  --accent-soft: rgba(226,184,74,0.2);
  --tab-pill: rgba(226,184,74,0.26);
  --accent-border: rgba(205,160,45,0.55);
  --ps-hero-bg: radial-gradient(120% 90% at 50% 0%, rgba(226,184,74,0.36), rgba(226,184,74,0.2) 65%, rgba(226,184,74,0.16));
  --ps-hero-flare: radial-gradient(120% 90% at 50% 0%, rgba(240,200,95,0.45), rgba(226,184,74,0.15) 70%, rgba(226,184,74,0));
  --live: #C91D22;
  --win: #26714B;
  --win-soft: rgba(46,138,92,0.12);
  --loss: #AC3D34;
  --loss-soft: rgba(194,69,59,0.12);
  --draw: #8A7430;
  --draw-soft: rgba(138,116,48,0.14);
  --provisional: #4163A5;
  --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: #4F515A;
  --lb-rank-low: #6B6D76;
  --lb-stroke: #C9C7BF;
  --lb-accent-wash: rgba(226,184,74,0.12);
  --lb-accent-wash-border: rgba(205,160,45,0.4);
  --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;
  /* Type sizes follow the iPhone's text size setting (Dynamic Type). 1rem is
     the system body size: 17px by default, larger or smaller with Settings >
     Display > Text Size (html in css/style.css). Each step is its px value at
     the default, so calc(15rem / 17) is 15px until the reader changes it.
     11px is the floor (Apple's Caption 2): --fs-10 is kept as a name so old
     rules still read, but it is 11 now. --fs-tab stays 10px and fixed, like
     the system tab bar's labels. */
  --fs-10: calc(11rem / 17); --fs-11: calc(11rem / 17); --fs-12: calc(12rem / 17); --fs-13: calc(13rem / 17);
  --fs-14: calc(14rem / 17); --fs-15: calc(15rem / 17); --fs-16: calc(16rem / 17); --fs-17: 1rem;
  --fs-18: calc(18rem / 17); --fs-20: calc(20rem / 17); --fs-22: calc(22rem / 17); --fs-24: calc(24rem / 17);
  --fs-30: calc(30rem / 17);
  --fs-tab: 10px;
  --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);
  --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);
  /* The same ring drawn inside, for rows in a scroller or a clipped card. */
  --focus-ring-inset: inset 0 0 0 2px 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);
  }
}

/* Glass: the material for floating controls only (the tab bar, the title
   bar that appears on scroll), never for cards or other content. A
   translucent base, a blur that picks up what scrolls under it, a thin edge
   and a soft lift. With Reduce Transparency on it turns into a solid
   surface. */
:root{
  --glass-bar: rgba(30,31,36,0.62);
  --glass-blur: blur(24px) saturate(180%);
  --glass-edge: rgba(255,255,255,0.14);
  --glass-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-rule: rgba(255,255,255,0.10);   /* the title bar's bottom edge */
  --tab-lens: rgba(var(--ink-rgb),0.10);
}
:root[data-theme="light"]{
  --glass-bar: rgba(252,252,250,0.72);
  --glass-edge: rgba(20,22,28,0.10);
  --glass-shadow: 0 8px 24px rgba(20,22,28,0.14), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-rule: rgba(20,22,28,0.10);
  --tab-lens: rgba(var(--ink-rgb),0.07);
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --glass-bar: rgba(252,252,250,0.72);
    --glass-edge: rgba(20,22,28,0.10);
    --glass-shadow: 0 8px 24px rgba(20,22,28,0.14), inset 0 1px 0 rgba(255,255,255,0.8);
    --glass-rule: rgba(20,22,28,0.10);
    --tab-lens: rgba(var(--ink-rgb),0.07);
  }
}
@media (prefers-reduced-transparency: reduce){
  :root, :root[data-theme]{ --glass-bar: var(--surface); --glass-blur: none; }
}

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

/* Wide layout (js/wide.js, css/style.css "Wide layout"): the team rail,
   the top header and the chat column. --chat-w is the room the docked
   chat takes on the right: none under 1280px (it's a slide-over there),
   a thin strip while collapsed. */
:root{
  --rail-w: 96px;
  --wide-head-h: 68px;
  --wide-pad: 32px;
  --chat-w: 0px;
  --chat-over-w: 380px;
}
@media (min-width: 900px){
  :root{ --title-bar-h: 0px; }
}
@media (min-width: 1280px){
  :root{ --chat-w: 340px; }
  :root.chat-collapsed{ --chat-w: 52px; }
}

/* ==== 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: calc(40rem / 17);
  --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);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);    /* leaving: a sheet closing */
}
:root[data-theme="light"]{
  --splash-ink: #0B0C0F;
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --splash-ink: #0B0C0F;
  }
}

/* ==== Delight pass (docs/delight-plan.md) ====
   The team orb: a soft blurred circle of a team's own color behind a hero
   (.team-orb, teamOrbHtml in js/ui.js); --orb-blur is the blur's σ, drawn
   with a radial mask. Its color comes from data, inline
   as --orb. The crest that sits on it gets --crest-shadow. */
:root{
  --orb-blur: 64px;
  --orb-opacity: 0.5;
  --orb-opacity-soft: 0.42;
  --crest-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
:root[data-theme="light"]{
  --crest-shadow: 0 10px 24px rgba(20,22,28,0.2);
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --crest-shadow: 0 10px 24px rgba(20,22,28,0.2);
  }
}

/* Tip (tipHtml in js/ui.js, js/tips.js): the one-time gesture hint, a
   floating pill. Aliases, so they follow the theme with no light values of
   their own. --z-tip is the first z-order token: over the tab bar (200),
   under sheets and modals (300 and up). */
:root{
  --tip-bg: var(--sheet);
  --tip-ink: var(--text);
  --z-tip: 250;
}

/* A crest in a badge (.badge img): a drop shadow so a thin, dark crest
   doesn't wash into the dark page. On white it only needs a hint; the dark
   theme's heavy shadow reads as a gray smudge there. */
:root{
  --crest-img-shadow: 0 2px 5px rgba(0,0,0,0.55);
}
:root[data-theme="light"]{
  --crest-img-shadow: 0 1px 2px rgba(20,22,28,0.16);
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --crest-img-shadow: 0 1px 2px rgba(20,22,28,0.16);
  }
}

/* Postseason ladder (js/postseason.js): an eliminated team's chip, grayed
   and faded. On white, the dark theme's 0.4 fade turns pale crests (the
   Chargers' bolt) and the owner name nearly invisible, so light fades
   less and darkens the gray a little. */
:root{
  --ps-out-opacity: 0.4;
  --ps-out-filter: grayscale(1);
}
:root[data-theme="light"]{
  --ps-out-opacity: 0.7;
  --ps-out-filter: grayscale(1) brightness(0.85);
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --ps-out-opacity: 0.7;
    --ps-out-filter: grayscale(1) brightness(0.85);
  }
}