/* ==========================================================================
   Diamond Board design tokens
   Youth-baseball streaming + scorekeeping. One system, three surfaces:
     1. Stream overlay  — always dark "scoreboard" panels; never themed.
     2. App surfaces    — scorekeeper PWA (light-first, sun glare), camera app (dark-first).
     3. Public website  — light default with a dark variant.

   Fonts (Google Fonts):
     <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Atkinson+Hyperlegible+Next:wght@400;500;700;800&display=swap" rel="stylesheet">
   Big Shoulders Display  — scoreboard numerals, team names, display headings. Tall, condensed,
                            heavy strokes: fits a lot of digits into a small bug and survives
                            4:2:0 chroma subsampling because it is weight, not color, that carries it.
   Atkinson Hyperlegible  — every UI and body string. Built for low-vision legibility; the
                            distinct 1/l/I and 0/O shapes matter on a sun-washed phone.
   ========================================================================== */

:root {
  /* ---- Raw palette ----------------------------------------------------- */
  /* Scoreboard green: the painted plywood board at every town field. */
  --board-950: #06180F;
  --board-900: #0A2619;
  --board-800: #0F3424;
  --board-700: #164A34;
  --board-600: #1E6146;
  --board-300: #8FB8A3;

  --chalk:     #FFFFFF;      /* foul-line chalk; all overlay text */
  --chalk-dim: #B9D0C3;      /* secondary overlay text on board green (7.9:1 on board-900) */

  --foul:      #FFC414;      /* foul-pole yellow: the one accent. Runners on, batting team, "final inning" */
  --foul-ink:  #2A1F00;      /* text on foul yellow */
  --strike:    #E1352B;      /* strikes, outs, errors, REC */
  --strike-ink:#FFFFFF;
  --go:        #1F9D55;      /* balls, connected, healthy */
  --go-ink:    #FFFFFF;
  --sky:       #2B6FD6;      /* info, links on light */

  /* Scorebook paper: cool and bright, not cream. Reads in direct sun. */
  --paper:     #FFFFFF;
  --paper-2:   #F2F6F3;
  --paper-3:   #E3EBE6;
  --rule:      #C3D2C8;
  --ink:       #08140E;
  --ink-2:     #33463B;
  --ink-3:     #5B6E63;

  /* Example team colors (teams pick their own; overlay only needs one solid color per team
     that passes 4.5:1 against white text — enforce in the team editor). */
  --team-hawks: #1D4EA6;
  --team-bears: #8C2232;

  /* ---- Type ----------------------------------------------------------- */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* App/web scale (1.25 minor third-ish, rounded to whole px) */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;   /* body; scorekeeper never goes below this */
  --text-lg: 21px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 46px;
  --text-4xl: 64px;
  --leading-tight: 1.1;
  --leading-body: 1.45;

  /* Overlay scale, in 1080p frame pixels. Floor is 28px (= ~19px on a 720p stream). */
  --ov-text-min: 28px;
  --ov-text-sm: 30px;
  --ov-text-md: 36px;
  --ov-text-lg: 48px;
  --ov-text-xl: 64px;
  --ov-text-hero: 120px;

  /* ---- Space (4px base) ---------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --ov-safe: 48px;          /* overlay title-safe margin at 1080p */

  /* ---- Shape: radius signals hierarchy, not decoration ---------------- */
  --radius-tile: 4px;       /* scoreboard tiles, numerals, table cells */
  --radius-control: 14px;   /* buttons, inputs */
  --radius-card: 18px;      /* sheets, panels, cards */
  --radius-pill: 999px;     /* status chips only */

  /* ---- Touch ---------------------------------------------------------- */
  --tap-min: 56px;          /* scorekeeper minimum target (Apple asks 44; gloves + sun ask more) */
  --tap-primary: 88px;      /* Ball / Strike / Foul / In play */

  /* ---- Overlay rules (not themeable) ---------------------------------- */
  --ov-panel: var(--board-900);
  --ov-panel-2: var(--board-800);
  --ov-panel-3: var(--board-700);
  --ov-text: var(--chalk);
  --ov-text-2: var(--chalk-dim);
  --ov-accent: var(--foul);
  --ov-accent-ink: var(--foul-ink);
  --ov-off: var(--board-600);  /* empty base, unlit out — shown by fill, never by outline */

  /* ---- Semantic: light (default for scorekeeper + web) ---------------- */
  color-scheme: light;
  --bg: var(--paper-2);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --border: var(--rule);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--board-800);      /* primary buttons on light: board green */
  --accent-ink: var(--chalk);
  --highlight: var(--foul);
  --highlight-ink: var(--foul-ink);
  --ok: #157A41;
  --warn: #8A5A00;
  --warn-bg: #FFF1C2;
  --danger: #C2231A;
  --danger-bg: #FDE3E1;
  --link: #1C5BC0;
  --focus: #1C5BC0;
  --shadow-sheet: 0 12px 40px rgba(6, 24, 15, .22);
}

/* ---- Semantic: dark (camera app default; web + scorekeeper on request) - */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--board-950);
    --surface: var(--board-900);
    --surface-2: var(--board-800);
    --surface-3: var(--board-700);
    --border: #2A5C45;
    --text: var(--chalk);
    --text-2: #CFE0D6;
    --text-3: #9DB8A9;
    --accent: var(--foul);
    --accent-ink: var(--foul-ink);
    --ok: #48C77E;
    --warn: #FFC414;
    --warn-bg: #3A2E05;
    --danger: #FF6B5E;
    --danger-bg: #3D1210;
    --link: #8DBAFF;
    --focus: #FFC414;
    --shadow-sheet: 0 12px 40px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --bg: var(--board-950);
  --surface: var(--board-900);
  --surface-2: var(--board-800);
  --surface-3: var(--board-700);
  --border: #2A5C45;
  --text: var(--chalk);
  --text-2: #CFE0D6;
  --text-3: #9DB8A9;
  --accent: var(--foul);
  --accent-ink: var(--foul-ink);
  --ok: #48C77E;
  --warn: #FFC414;
  --warn-bg: #3A2E05;
  --danger: #FF6B5E;
  --danger-bg: #3D1210;
  --link: #8DBAFF;
  --focus: #FFC414;
  --shadow-sheet: 0 12px 40px rgba(0, 0, 0, .5);
}
.theme-light {
  color-scheme: light;
  --bg: var(--paper-2);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --border: var(--rule);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--board-800);
  --accent-ink: var(--chalk);
  --ok: #157A41;
  --warn: #8A5A00;
  --warn-bg: #FFF1C2;
  --danger: #C2231A;
  --danger-bg: #FDE3E1;
  --link: #1C5BC0;
  --focus: #1C5BC0;
}

/* Overlay compression rules, for the Metal renderer and any HTML preview:
   1. Every glyph sits on a solid panel. No text directly on video.
   2. No strokes under 6px at 1080p, no colored hairlines, no gradients, no drop shadows.
   3. State is fill: lit = foul yellow or chalk, unlit = --ov-off. Never outline-only.
   4. Cards change by hard cut or a fade of 200ms or less, then hold still. No tickers.
   5. Text floor 28px at 1080p; team names 36px+, score numerals 64px+. */