/* ═════════════════════════════════════════════════════════════════════════
   theme.css — SIDELINE's brand.

   The reference is a race pit wall, not a dashboard: graphite chrome, a single
   saturated accent, geometry with corners on it, and numbers that read like a
   timing tower. Speed is communicated by TYPE AND ANGLE — heavy condensed
   weights, tight tracking, a slight forward lean on numerals — not by gradients
   or glow, which go muddy on a phone in a gym at night.

   THE ACCENT IS NOT FIXED. An athletic director sets the school's colours in
   Settings; Settings::cssVars() then overrides --brand-accent with the school's
   own, so every component that already references var(--color-accent) follows.
   The values here are the fallback for a school that has not set theirs yet.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand colors (fallback until an AD sets the school's) ───────────────── */
  --brand-primary:   #16171a;   /* graphite chrome — sidebar, headers */
  --brand-accent:    #2a78d6;   /* Sideline blue, from the PWA manifest */
  --brand-on-accent: #ffffff;

  /* Set for real by Settings::cssVars(); defaults keep this file standalone. */
  --school-primary:      #2a78d6;
  --school-secondary:    #1c1c19;
  --school-on-primary:   #ffffff;
  --school-on-secondary: #ffffff;

  /* ── Fonts ───────────────────────────────────────────────────────────────
     System stack: this gets opened on cell service in a parking lot, and a
     webfont is a render-blocking request a roster does not need. The sporting
     feel comes from weight, tracking and case, which cost nothing.

     Numerals are the exception that matters — jersey numbers and times sit in
     columns and must not jitter, so tabular figures are set wherever digits
     line up. */
  --brand-font-body:    system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-font-mono:    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  /* ── Neutrals: warm graphite, not cold slate ─────────────────────────────
     Cool greys go slightly dead under gym lighting and on cheap phone screens.
     These carry a hint of warmth so the paper reads as paper. */
  --slate-50:  #f7f7f5;
  --slate-100: #eeeeea;
  --slate-200: #dededa;
  --slate-300: #c0c0ba;
  --slate-400: #8c8c85;
  --slate-500: #67675f;
  --slate-600: #4a4a43;
  --slate-700: #33332e;
  --slate-800: #212120;
  --slate-900: #16171a;

  --bg-sunken: #f4f4f1;

  /* ── Status hues ─────────────────────────────────────────────────────────
     Only two carry meaning on the roster board — amber = not cleared to play,
     red = nobody to call. Green stays quiet on purpose: "fine" should never
     compete for a coach's attention. */
  --green-fg: #12724a; --green-bg: #e6f3ec;
  --amber-fg: #8a5300; --amber-bg: #fdefd4;
  --blue-fg:  #1f5fbf; --blue-bg:  #e8f0fc;
  --red-fg:   #b3261e; --red-bg:   #fbe9e7;

  /* ── Geometry: corners, not pills ────────────────────────────────────────
     Sharpened hard from the template's 6/9/14px. A race car has edges. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 2px;          /* deliberately NOT round — chips are cut, not soft */

  /* ── Shadows: contact shadows only ───────────────────────────────────────
     Tight and dark rather than soft and wide, so panels look machined rather
     than floating. */
  --shadow-sm: 0 1px 0 rgba(22, 23, 26, .07);
  --shadow-md: 0 2px 6px rgba(22, 23, 26, .12);
  --shadow-lg: 0 8px 24px rgba(22, 23, 26, .18);

  --transition: 120ms cubic-bezier(.2, .7, .3, 1);   /* quick, slight overshoot */

  /* ── The racing bits, used by sideline.css and roster.css ────────────────── */
  --lean: -9deg;                   /* forward skew on number plates */
  --hairline: rgba(22, 23, 26, .10);
  --track-dark: #16171a;
  --track-dark-2: #212120;

  /* ── Logo ────────────────────────────────────────────────────────────────
     The wordmark is type, so nothing blocks on an image and nothing goes
     missing: "Side" in the ink colour, "line" in the school's. */
  --brand-logo-white: none;
  --brand-monogram: "SL";
}