/* ============================================================
   trakr.hockey — Shared CSS Variables (Design Tokens)
   ------------------------------------------------------------
   REBRAND (Team Capsule–inspired light theme)
   ------------------------------------------------------------
   This file is the single source of truth for the app's colour
   palette, typography references, radii, spacing, shadows and
   safe-area tokens. It replaces the previous all-dark theme with
   a light, off-white canvas + white card surfaces + a three-tone
   brand accent system (blue / purple / orange), matching the
   supplied Team Capsule reference art.

   BACK-COMPAT ALIASES:
   Several legacy token names (--glass, --glass-border, --dark,
   --navy, --surface-dark, --text-light, --text-info, etc.) are
   kept and re-pointed at new light-theme values below, rather
   than deleted. Hundreds of existing rules across the app
   reference these names directly (e.g. `background: var(--glass)`)
   — aliasing them means those rules automatically inherit the
   new light look without needing every single call site edited
   in this pass. Pages with hardcoded rgba() literals (not using
   variables) still need direct edits, tracked separately.
   ============================================================ */

:root {

  /* ── Page canvas & surfaces ─────────────────────────────── */
  --page-bg:       #F3F3F1;  /* warm off-white app background */
  --surface:       #FFFFFF;  /* cards, panels, modals, table bg */
  --surface-alt:   #F7F8FA;  /* stripes, subtle wells, input bg */
  --ink-black:     #0A0A0C;  /* reserved: dark accent "module" cards + nav-on-dark contexts only */

  /* ── Brand Accent Colours (Team Capsule) ────────────────── */
  --brand-blue:    #2E7CF6;  /* primary — Stats IQ */
  --brand-purple:  #8B5CF6;  /* secondary — Story IQ */
  --brand-orange:  #FF7A1A;  /* tertiary — Broadcast IQ */

  /* ── Legacy brand names kept as aliases (back-compat) ───── */
  --ice:           #EAF2FE;
  --blue:          var(--brand-blue);
  --navy:          #0E1A2B;   /* only used where a literal dark navy accent is intentional (e.g. scorebug/livestream overlays) */
  --dark:          var(--page-bg);   /* body background alias now points at light page bg */
  --red:           #E0293B;  /* danger — retuned for AA contrast on white */
  --gold:          #C98A00;  /* warning — retuned for AA contrast on white */
  --green:         #17A673;  /* success — retuned for AA contrast on white */
  --teal:          #0AA5C2;

  /* ── Glass / Surface Colours (aliased to light equivalents) ── */
  --glass:         var(--surface-alt);
  --glass-border:  var(--border-soft);
  /* NOTE: --surface-dark now points at the LIGHT surface, not --ink-black.
     The vast majority of existing call sites (`var(--surface-dark)` used for
     .modal-content backgrounds and <option> backgrounds across teams.php,
     players.php, opponents.php, organizations.php, venues.php, users.php,
     games.php, admin-plans.php, controls.php, settings.php, stats-analysis.php,
     player-stats.php, team-stats.php, livestream.php, etc.) were written when
     the app was all-dark and assumed a dark surface; repointing this one
     token to light is the single highest-leverage fix to bring those pages'
     modals/dropdowns in line with the new light theme without editing each
     page individually. Pages that intentionally want a literal near-black
     panel (e.g. scorebug/broadcast overlay) use --ink-black directly instead
     of this alias, so they are unaffected by this change. */
  --surface-dark:  var(--surface);


  /* ── Text Colours ───────────────────────────────────────── */
  --text-light:    var(--text-body);   /* alias: legacy "light text" now means default body text on white */
  --text-heading:  #0A0A0C;
  --text-info:     #33363D;
  --text-muted:    #6B7280;
  --text-muted-2:  #8A8F98;
  --text-link:     var(--brand-blue);
  --text-body:     #33363D;
  --text-on-dark:  #F3F3F1;   /* text placed on --ink-black surfaces (module cards, nav-on-dark, scorebug) */

  /* ── Border Colours ─────────────────────────────────────── */
  --border-soft:   rgba(10,10,12,0.10);
  --border-strong: rgba(10,10,12,0.18);
  --border-faint:  rgba(10,10,12,0.06);

  /* ── Border Radius (unchanged scale — no breakage) ──────── */
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-circle: 50%;

  /* ── Spacing (unchanged) ─────────────────────────────────── */
  --space-xs:      0.35rem;
  --space-sm:      0.5rem;
  --space-md:      0.75rem;
  --space-lg:      1rem;
  --space-xl:      1.5rem;
  --space-2xl:     2rem;

  /* ── Font Sizes (unchanged) ──────────────────────────────── */
  --font-size-sm:   0.82rem;
  --font-size-base: 14px;
  --font-size-md:   1rem;
  --font-size-lg:   1.15rem;

  /* ── Typography family references ────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', 'Nunito', sans-serif;
  --tracking-eyebrow: 0.14em;

  /* ── Elevation — soft light-theme shadows (replace old dark glows) ── */
  --shadow-sm:     0 2px 8px rgba(10,10,12,0.06);
  --shadow-md:     0 8px 24px rgba(10,10,12,0.08);
  --shadow-lg:     0 20px 60px rgba(10,10,12,0.12);

  /* ── Accent glows — reserved for --ink-black module/feature cards only ── */
  --glow-blue:     0 0 24px rgba(46,124,246,0.30),  0 8px 24px rgba(0,0,0,0.14);
  --glow-purple:   0 0 24px rgba(139,92,246,0.30),  0 8px 24px rgba(0,0,0,0.14);
  --glow-orange:   0 0 24px rgba(255,122,26,0.30),  0 8px 24px rgba(0,0,0,0.14);

  /* ── Touch targets (Capacitor / mobile requirement) ─────── */
  --tap-min:         44px;  /* iOS HIG minimum */
  --tap-comfortable: 48px;

  /* ── iOS / Android safe-area insets ──────────────────────── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* ── Overlay (unchanged use — dim scrim behind modals) ──── */
  --overlay-dim:   rgba(10,10,12,0.45);
}