/* ──────────────────────────────────────────────────────────────────────────
   Driveline Baseball — shared theme (light / White Surface)
   Single source of truth for the palette + typography across index.html
   (form) and landing-page.html (report). Link this BEFORE each page's inline
   <style>; the page-specific component CSS reads these tokens via var().

   Brand reference: driveline-baseball-design skill — White Surface treatment.
   Palette is closed: only the hexes below. Two typefaces only: Gotham + Lato.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Accent — goldenrod is THE Driveline color */
  --orange:       #FFA300;
  --orange-hover: #CF7F00;   /* Burnt Orange — secondary warmth */
  --orange-dim:   rgba(255,163,0,0.10);   /* light goldenrod tint for selected states */

  /* Surfaces — white canvas, separation via 1px borders + spacing (no shadows).
     Athens Gray #F4F4F5 is ~4% off white and Light Track #E5E7EB still read as
     near-invisible 1px lines, so structural borders sit one more step down the
     gray ramp: Distribution Gray for standard lines, Muted Gray for emphasis.
     (--border-hi also tints placeholder / "optional" text — keep it readable.) */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #FFFFFF;
  --border:    #D1D5DB;   /* Distribution Gray — dividers, input + container borders */
  --border-hi: #9CA3AF;   /* Muted Gray — stronger separation, back-button border */

  /* Text */
  --text:  #262626;   /* Mine Shaft — primary */
  --dim:   #6B7280;   /* Mid Gray — secondary body */
  --muted: #6B7280;   /* Mid Gray — labels (Muted Gray #9CA3AF fails AA on white for small text) */

  /* Data / semantic */
  --green:     #10B981;   /* Score Green */
  --green-dim: rgba(16,185,129,0.10);
  --red:       #EF4444;   /* Score Red */
  --track:     #E5E7EB;   /* chart tracks on white */
  --dist-fill: #D1D5DB;   /* bell-curve / distribution area fill */

  /* Type — Gotham for headlines/labels (ALL CAPS), Lato for body/data values */
  --display: 'Gotham', system-ui, sans-serif;
  --mono:    'Gotham', system-ui, sans-serif;   /* eyebrows/labels were DM Mono; now Gotham caps */
  --body:    'Lato', system-ui, sans-serif;
}

/* Gotham — local font files (assets/fonts/, relative to this stylesheet).
   No Bold file exists, so 700/800 map to Ultra. */
@font-face { font-family:'Gotham'; src:url('fonts/Gotham-Ultra.otf')  format('opentype'); font-weight:900; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('fonts/Gotham-Ultra.otf')  format('opentype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('fonts/Gotham-Ultra.otf')  format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('fonts/Gotham-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('fonts/Gotham-Book.otf')   format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('fonts/Gotham-Light.otf')  format('opentype'); font-weight:300; font-display:swap; }

/* Brand hard rule: no SVG filter effects (shadows/blur). Hand-crafted charts only.
   (The video poster B&W treatment is a CSS filter on a <div>, not an <svg>, so it
   is intentionally unaffected.) */
svg, svg * { filter: none; }

/* Driveline lockup in page headers — never render the wordmark as text. */
.brand-logo { display:block; height:44px; width:auto; }