/* ==========================================================================
   Knuckleball design tokens -- D2 "Broadcast · Big Shoulders" (Oct 13 2026)

   One file, loaded by every page before its own <style>. Names are D1's
   (plans/d1-design-standardization.md, rename map); values are the D2 target
   (docs/design/target/css-variables.css; plans/d2-broadcast-rebrand.md, Stage A).
   ONE meaning per name. Contrast notes are WCAG 2.1 (AA: 4.5:1 text, 3:1 large
   text, icons and lines).

   Scopes:
     :root                                  the light app, baseball
     html[data-sport="softball"]            softball, same names (navy and rally pink)

   VARIABLES ONLY -- no rule here styles an element. report.html loads this file
   and draws every stored (frozen) report inside its own page; each report defines
   its own variables, so nothing here may ever reach one (plans/d2-preconditions.md §5).

   Not here on purpose: component geometry (--chip, --g5c, --zg, --kb-*, --velo-visible,
   --flash-bg), the Live Game field art (.gg-field --gg-*, scoped in the app), the
   pitch-type palettes' source of truth (SPORTS[sport].palette in the app,
   SPORT_PALETTE_HEX in send-session-report/helpers.ts -- --pitch-N must equal both,
   in order; .githooks/pre-push checks it).
   ========================================================================== */

:root{
  /* ---- Surfaces ---- */
  --bg:               #F3F5F2;   /* page background */
  --card:             #FFFFFF;   /* cards, panels, grid cells, inputs */
  --card-2:           #F8FAF8;   /* nested wells, zebra rows */
  --surface:          #E8EDE9;   /* soft fill: trays, secondary buttons, sidebar, strike zone */
  --surface-border:   #D5DDD7;   /* rules, grid frame, selected rows */
  --border:           rgba(7,20,15,0.10);
  --border-strong:    rgba(7,20,15,0.24);

  /* ---- Ink (text on light) ---- */
  --ink:              #07140F;   /* 17.2:1 on --bg */
  --ink-dim:          #26342D;   /* 13.0:1 on white */
  --ink-faint:        #56645C;   /* 6.2:1 on white, 5.3:1 on --surface */
  --ink-rgb:          7,20,15;

  /* ---- Brand (the dark field green) ---- */
  --brand-bg:         #061A12;   /* brand strip, status bars, dark fills */
  --brand-bg-deep:    #030D09;   /* scoreboard cells, deepest band */
  --brand-bg-2:       #0A2A1D;   /* raised areas on dark */
  --brand-line:       rgba(255,255,255,0.10);   /* hairlines on dark */
  --brand-mid:        #16593D;   /* links and focus on light: 8.3:1 on white */
  --brand-soft:       #7FC9A1;   /* avatars, secondary chart marks */
  --brand-mid-ring:   rgba(22,89,61,0.18);   /* the input focus ring */

  /* ---- Text on dark ---- */
  --on-dark:          #FFFFFF;
  --on-dark-dim:      #C2CEC6;   /* 11.1:1 on --brand-bg */
  --on-dark-faint:    #86978C;   /* 5.9:1 on --brand-bg */

  /* ---- Accent (gold): a FILL. Never text on light -- use --accent-ink ---- */
  --accent:           #FFB81C;   /* 1.7:1 as text on white */
  --accent-bright:    #FFC94F;
  --accent-rgb:       255,184,28;
  --accent-ink:       #8A5A00;   /* accent-colored text on light: 5.9:1 on white */
  --on-accent:        var(--ink);   /* text on gold: 10.9:1 */
  --accent-game:      var(--accent);   /* Live Game gold: one gold */

  /* ---- Buttons (U13 buttons.css reads these) ---- */
  --btn-ink:            var(--ink);
  --btn-soft:           var(--surface);
  --btn-primary:        var(--accent);
  --btn-on-primary:     var(--on-accent);
  --btn-primary-hover:  var(--accent-bright);
  --btn-accent:         var(--ink);   /* the selected segment's underline: the sport's dark ink (Joel, Oct 9, E) */
  --btn-danger:         var(--danger);
  --btn-disabled-bg:    #F1F3F2;
  --btn-disabled-fg:    #A7B0AA;
  --btn-h:              44px;
  --chooser:            var(--brand-bg);     /* Bullpen / Live Game */
  --chooser-hover:      var(--brand-bg-2);
  --chooser-active:     var(--brand-bg-deep);

  /* ---- Status ---- */
  --danger:           #C42B21;   /* danger text: 4.8:1 on --surface */
  --danger-bg:        #C42B21;   /* solid destructive fill, white text 5.7:1 */
  --on-danger:        #FFFFFF;
  --warning:          #9A5B00;   /* warning text: 5.4:1 on white */
  --warning-line:     #C77700;
  --warning-tint:     rgba(255,184,28,0.16);
  --success:          #1E7F4A;   /* Sent, Saved: 5.0:1 on white */
  --strike:           #188A4E;   /* strike flash; white letter 4.4:1 (large text) */
  --ball:             #E0443A;   /* ball flash; white letter 4.2:1 (large text) */
  --flash-fg:         #FFFFFF;

  /* ---- Leaderboard ---- */
  --rank-1:           var(--accent);
  --rank-2:           #7C8B85;
  --rank-3:           #A8621F;

  /* ---- Live Game panels ---- */
  --game-chip-border: var(--surface-border);
  --game-panel-bg:    var(--card-2);

  /* ---- Overlays and the coach dock ---- */
  --scrim:            rgba(3,13,9,0.60);   /* modals and the one-time notices' backdrop */
  --dock-bg:          rgba(6,26,18,0.82);
  --dock-fg:          rgba(255,255,255,0.80);
  --dock-pill:        rgba(255,255,255,0.16);

  /* ---- Each sport's own colors, whatever the page's sport (the account switcher's
     sport chips, the "Which sport?" cards) ---- */
  --bb-brand:         #061A12;  --bb-brand-2: #0A2A1D;  --bb-brand-3: #113726;
  --bb-accent:        #FFB81C;  --bb-surface: #E8EDE9;  --bb-surface-border: #D5DDD7;  --bb-on-dark-dim: #C2CEC6;
  --sb-brand:         #0B2540;  --sb-brand-2: #12345A;  --sb-brand-3: #1A426E;
  --sb-accent:        #FF4F9A;  --sb-surface: #E6F1FA;  --sb-surface-border: #CFE0EE;  --sb-on-dark-dim: #C5D3E2;
  --sb-bg:            #F4F7FB;  --sb-ink-dim: #2C4560;  --sb-ink-faint: #5A6E84;   /* the legal pages' #softball view (no script) */

  /* ---- Pitch types by slot (= SPORTS.baseball.palette = TYPE_PALETTE_HEX) ---- */
  --pitch-1: #FFB81C; --pitch-2: #22B573; --pitch-3: #FF6B35; --pitch-4: #E63946;
  --pitch-5: #3D8BFF; --pitch-6: #B15CFF; --pitch-7: #F2E14C; --pitch-8: #00B8C4;

  /* ---- Type faces (Stage B switches the pages to these; the files arrive with it) ---- */
  --font-display:     'Big Shoulders Display', 'Archivo', 'Arial Narrow', sans-serif;
  --font-sans:        'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:        var(--font-sans);   /* aligned digits: Archivo with tabular figures */
  --font-wordmark:    'Black Ops One', 'Big Shoulders Display', sans-serif;

  /* ---- Type scale (D1's nine steps; used from Stage B) ---- */
  --t-64: 64px; --t-44: 44px; --t-32: 32px; --t-24: 24px; --t-20: 20px;
  --t-16: 16px; --t-14: 14px; --t-12: 12px; --t-10: 10px;
  --lh-tight: 1; --lh-ui: 1.2; --lh-body: 1.5;
  --tr-display: 0.01em; --tr-label: 0.1em; --tr-tag: 0.14em;

  /* ---- Radius, shadows, spacing (used from Stage C) ---- */
  --radius-cell:    4px;  --radius-segment: 9px;  --radius-control: 12px;
  --radius-dock:    18px; --radius-pill: 999px;   --radius-circle: 50%;
  --radius-mark:    2px;   /* chart marks only (pitch-log dots, report legend) -- data, not restyled (D3) */
  --cut:            28px;
  --shadow-segment: 0 1px 3px rgba(0,0,0,0.18);
  --shadow-pop:     0 10px 26px rgba(var(--ink-rgb),0.22);
  --shadow-modal:   0 8px 32px rgba(var(--ink-rgb),0.35);
  --ring-select:    inset 0 -3px 0 var(--btn-accent);
  --ring-target:    inset 0 0 0 2px var(--accent);
  --focus:          2px solid var(--brand-mid);
  /* D3 Stage C (Oct 14): every box-shadow reads one of these. Colors that vary per element (a pitch
     type's underline) add their color at the point of use to the geometry-only --ring-under. */
  --shadow-lift:    0 10px 22px rgba(0,0,0,0.30);              /* a lifted / dragged thing: the dock pill, a dragged runner */
  --press:          inset 0 0 0 999px rgba(0,0,0,0.04);        /* U13 pressed */
  --ring-focus:     0 0 0 3px var(--brand-mid-ring);           /* input focus halo */
  --ring-select-4:  inset 0 0 0 4px var(--btn-accent);         /* the runner token's ring (Live Game field) */
  --ring-target-strong: inset 0 0 0 3px var(--accent-game);    /* the field's selected box (measured 3px) */
  --ring-drop:      inset 0 0 0 3px var(--on-dark);            /* the field's drop target / held box */
  --ring-pulse:     inset 0 0 0 3px rgba(var(--accent-rgb),0.55);   /* the field choices' flash */
  --ring-plate:     0 0 0 3px var(--brand-bg);                 /* the dark plate behind a button (v232) */
  --ring-danger:    inset 0 0 0 2px var(--danger);             /* the bullpen clock's out-of-range time */
  --ring-halo:      0 0 0 4px rgba(var(--accent-rgb),0.28);    /* the target dot's glow */
  --ring-under:     inset 0 -3px 0;                            /* geometry of --ring-select, for a per-element color */
  --s-2: 2px;  --s-4: 4px;  --s-6: 6px;  --s-8: 8px;   /* --s-6: D3 Option 2 (Jordan / Joel, Oct 13-14) */  --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;

  /* ---- Motion ---- */
  --duration-fast:  150ms;
  --duration-base:  220ms;
  --duration-slow:  250ms;
  --duration-flip:  325ms;
  --duration-flash: 1400ms;
  --ease-dock:      cubic-bezier(.3,.7,.3,1);
  --ease-spring:    cubic-bezier(.2,.9,.3,1.2);

  /* ---- Layout ---- */
  --tap-min:   44px;
  --app-max:   1320px;
  --sidebar-w: 280px;
}
@media (prefers-reduced-motion: reduce){
  :root{ --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; --duration-flip:0ms; }
}

/* ---------- Softball: same names, navy and rally pink ---------- */
html[data-sport="softball"]{
  --bg:               #F4F7FB;
  --card-2:           #F8FAFD;
  --surface:          #E6F1FA;
  --surface-border:   #CFE0EE;
  --border:           rgba(11,37,64,0.10);
  --border-strong:    rgba(11,37,64,0.24);
  --ink:              #0B2540;   /* 14.5:1 on --bg */
  --ink-dim:          #2C4560;   /* 9.9:1 on white */
  --ink-faint:        #5A6E84;   /* 5.3:1 on white, 4.6:1 on --surface */
  --ink-rgb:          11,37,64;
  --brand-bg:         #0B2540;
  --brand-bg-deep:    #06172A;
  --brand-bg-2:       #12345A;
  --brand-mid:        #1F5C99;   /* 6.9:1 on white */
  --brand-soft:       #8EC3EE;
  --brand-mid-ring:   rgba(31,92,153,0.18);
  --on-dark-dim:      #C5D3E2;
  --on-dark-faint:    #8A9BB0;   /* 5.5:1 on --brand-bg */
  --accent:           #FF4F9A;   /* rally pink: a fill, never text on light */
  --accent-bright:    #FF79B3;
  --accent-rgb:       255,79,154;
  --accent-ink:       #B0175A;   /* 6.7:1 on white */
  --on-accent:        var(--ink);   /* navy on pink 5.1:1 (white on pink is only 3.1:1) */
  --scrim:            rgba(6,23,42,0.60);
  --dock-bg:          rgba(11,37,64,0.82);
  --pitch-1: #FF4F9A; --pitch-2: #2F9BFF; --pitch-3: #7A3FB8; --pitch-4: #FF9F1C;
  --pitch-5: #00A99D; --pitch-6: #7A53FF; --pitch-7: #CD4730; --pitch-8: #6C7684;   /* 6-8 darkened from the target (Joel, Oct 13: white chip labels 4.6:1) */
}