/* ==========================================================================
   Beta Sigma Design System — Production Design Tokens
   ==========================================================================
   Authoritative source: docs/design-system/Beta_Sigma_Design_System_v1.0.html

   This file is a production CSS-custom-property extraction of that document's
   §04 (Design tokens), §05 (Color system), §06 (Sports analytics color
   system), §07 (Typography), §08 (Spacing), §10 (Shape & elevation), §19
   (Motion), and §22 (Dark/light strategy) — transcribed from the document's
   own live :root token block (the same block that drives the document's own
   rendering and its System/Dark/Light theme toggle), not a re-derivation.

   This file is NOT a replacement for the Design System document. It does not
   restate rationale, usage rules, contrast data, or component specs — only
   the token values themselves. Where this file and the Design System HTML
   disagree, the Design System HTML is authoritative; fix the disagreement by
   correcting this file, never by reinterpreting the source.

   Phase 0 scope note: this file only defines tokens. It is not yet consumed
   by any existing selector, component, or callback-generated style — see
   docs/frontend/CONVENTIONS.md §3–§4 for adoption rules.
   ========================================================================== */

:root {
  /* ---- PRIMITIVE — navy scale (neutral) ---- */
  --bs-navy-950: #060B18;
  --bs-navy-900: #0A1530;
  --bs-navy-800: #0F2248;
  --bs-navy-700: #16264A;
  --bs-navy-600: #1A2B4E;
  --bs-navy-500: #263866;
  --bs-navy-400: #344C93;
  --bs-navy-300: #5C71A8;
  --bs-navy-200: #8FA0BD;
  --bs-navy-100: #B7C2D6;
  --bs-navy-50: #DCE2ED;

  /* ---- PRIMITIVE — neon scale (brand accent) ---- */
  --bs-neon-950: #062E1A;
  --bs-neon-900: #0B4A2A;
  --bs-neon-800: #13543B;
  --bs-neon-700: #0B7A46;
  --bs-neon-600: #02C161;
  --bs-neon-500: #02EA76;
  --bs-neon-400: #4CE896;
  --bs-neon-300: #85F0B3;
  --bs-neon-200: #BEF8D7;
  --bs-neon-100: #E3FCEF;
  --bs-neon-50: #F2FDF7;

  /* ---- PRIMITIVE — off-white / support / sports-data ---- */
  --bs-offwhite: #F1EFEF;
  --bs-white: #FFFFFF;
  --bs-warn-500: #F5B544;
  --bs-hot-500: #FF5C5C;
  --bs-cool-500: #5BC0EB;
  --bs-gold-500: #C9A227;
  --bs-rose-500: #E0559C;

  /* ---- TYPE ---- */
  --bs-font-display: 'League Spartan', ui-sans-serif, system-ui, sans-serif;
  --bs-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bs-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- SPACE — 4px base, athletic/technical rhythm ---- */
  --bs-space-0: 0;
  --bs-space-1: 4px;
  --bs-space-2: 8px;
  --bs-space-3: 12px;
  --bs-space-4: 16px;
  --bs-space-5: 20px;
  --bs-space-6: 24px;
  --bs-space-7: 32px;
  --bs-space-8: 40px;
  --bs-space-9: 48px;
  --bs-space-10: 64px;
  --bs-space-11: 80px;
  --bs-space-12: 96px;
  --bs-space-13: 128px;

  /* ---- RADIUS ---- */
  --bs-radius-xs: 4px;
  --bs-radius-sm: 6px;
  --bs-radius-md: 10px;
  --bs-radius-lg: 16px;
  --bs-radius-xl: 24px;
  --bs-radius-full: 999px;

  /* ---- MOTION ---- */
  --bs-motion-instant: 80ms;
  --bs-motion-fast: 140ms;
  --bs-motion-normal: 220ms;
  --bs-motion-slow: 360ms;
  --bs-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --bs-ease-out: cubic-bezier(0, 0, .2, 1);
  --bs-ease-in: cubic-bezier(.4, 0, 1, 1);

  /* ---- SEMANTIC — dark is the un-stamped default (§22) ---- */
  --bs-color-canvas: var(--bs-navy-900);
  --bs-color-bg: var(--bs-navy-800);
  --bs-color-surface: var(--bs-navy-700);
  --bs-color-surface-elevated: var(--bs-navy-600);
  --bs-color-overlay: rgba(6, 11, 24, .72);
  --bs-color-text-primary: var(--bs-offwhite);
  --bs-color-text-secondary: #C3CCDE;
  --bs-color-text-muted: var(--bs-navy-200);
  --bs-color-text-on-accent: var(--bs-navy-900);
  --bs-color-border: rgba(143, 160, 189, .22);
  --bs-color-border-strong: rgba(143, 160, 189, .42);
  --bs-color-accent: var(--bs-neon-500);
  --bs-color-accent-text: var(--bs-neon-500);
  --bs-color-accent-hover: var(--bs-neon-400);
  --bs-color-accent-pressed: var(--bs-neon-600);
  --bs-color-link: #8FB4FF;
  --bs-color-shadow: rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---- SEMANTIC — light alternate via system preference, unless an explicit
   data-theme="dark" stamp overrides it (§22 Dark/light strategy) ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bs-color-canvas: #E7E3DD;
    --bs-color-bg: var(--bs-offwhite);
    --bs-color-surface: var(--bs-white);
    --bs-color-surface-elevated: var(--bs-white);
    --bs-color-overlay: rgba(15, 34, 72, .5);
    --bs-color-text-primary: var(--bs-navy-900);
    --bs-color-text-secondary: #3A4568;
    --bs-color-text-muted: #5C6B8A;
    --bs-color-text-on-accent: var(--bs-navy-900);
    --bs-color-border: rgba(15, 34, 72, .13);
    --bs-color-border-strong: rgba(15, 34, 72, .28);
    --bs-color-accent: var(--bs-neon-500);
    --bs-color-accent-text: var(--bs-neon-800);
    --bs-color-accent-hover: var(--bs-neon-700);
    --bs-color-accent-pressed: var(--bs-neon-900);
    --bs-color-link: #26418F;
    --bs-color-shadow: rgba(15, 20, 40, .14);
    color-scheme: light;
  }
}

/* ---- SEMANTIC — explicit light stamp (manual theme-toggle "Light") ---- */
:root[data-theme="light"] {
  --bs-color-canvas: #E7E3DD;
  --bs-color-bg: var(--bs-offwhite);
  --bs-color-surface: var(--bs-white);
  --bs-color-surface-elevated: var(--bs-white);
  --bs-color-overlay: rgba(15, 34, 72, .5);
  --bs-color-text-primary: var(--bs-navy-900);
  --bs-color-text-secondary: #3A4568;
  --bs-color-text-muted: #5C6B8A;
  --bs-color-text-on-accent: var(--bs-navy-900);
  --bs-color-border: rgba(15, 34, 72, .13);
  --bs-color-border-strong: rgba(15, 34, 72, .28);
  --bs-color-accent: var(--bs-neon-500);
  --bs-color-accent-text: var(--bs-neon-800);
  --bs-color-accent-hover: var(--bs-neon-700);
  --bs-color-accent-pressed: var(--bs-neon-900);
  --bs-color-link: #26418F;
  --bs-color-shadow: rgba(15, 20, 40, .14);
  color-scheme: light;
}

/* ---- SEMANTIC — explicit dark stamp (manual theme-toggle "Dark") ---- */
:root[data-theme="dark"] {
  --bs-color-canvas: var(--bs-navy-900);
  --bs-color-bg: var(--bs-navy-800);
  --bs-color-surface: var(--bs-navy-700);
  --bs-color-surface-elevated: var(--bs-navy-600);
  --bs-color-overlay: rgba(6, 11, 24, .72);
  --bs-color-text-primary: var(--bs-offwhite);
  --bs-color-text-secondary: #C3CCDE;
  --bs-color-text-muted: var(--bs-navy-200);
  --bs-color-text-on-accent: var(--bs-navy-900);
  --bs-color-border: rgba(143, 160, 189, .22);
  --bs-color-border-strong: rgba(143, 160, 189, .42);
  --bs-color-accent: var(--bs-neon-500);
  --bs-color-accent-text: var(--bs-neon-500);
  --bs-color-accent-hover: var(--bs-neon-400);
  --bs-color-accent-pressed: var(--bs-neon-600);
  --bs-color-link: #8FB4FF;
  --bs-color-shadow: rgba(0, 0, 0, .45);
  color-scheme: dark;
}