/* Pitchline Design System Tokens */
:root {
  /* Primitive – blues */
  --blue-50: #eff5ff;
  --blue-100: #dbe7fe;
  --blue-300: #7aa6fc;
  --blue-500: #1F5BD8;
  --blue-600: #1849b3;
  --blue-700: #143b94;
  --blue-900: #0a1e4a;

  /* Primitive – neutrals (cool) */
  --n-0: #ffffff;
  --n-25: #fafbfd;
  --n-50: #f4f6fa;
  --n-100: #e8ecf3;
  --n-200: #d3d9e4;
  --n-300: #b1bacb;
  --n-400: #8a93a8;
  --n-500: #5e6678;
  --n-600: #404756;
  --n-700: #292f3c;
  --n-800: #181c26;
  --n-900: #0a0e1a;
  --n-950: #050811;

  /* Primitive – semantic hues */
  --green-500: #10b981;
  --green-300: #6ee7b7;
  --amber-500: #f59e0b;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --cyan-400: #22d3ee;
  --violet-500: #8b5cf6;

  /* Brand */
  --brand-primary: var(--blue-500);
  --brand-primary-hover: var(--blue-600);
  --brand-primary-pressed: var(--blue-700);
  --brand-secondary: #00d68f; /* electric pitch green */
  --brand-tertiary: #ffd84d;  /* whistle yellow accent */

  /* Premium */
  --premium-accent: linear-gradient(135deg, #ffd84d 0%, #ff8a3d 100%);
  --premium-solid: #ffb020;

  /* Result */
  --result-win: #10b981;
  --result-draw: #94a3b8;
  --result-loss: #ef4444;
  --card-yellow: #f5c518;
  --card-red: #e23434;

  /* Probability */
  --prob-high: #10b981;
  --prob-mid: #f59e0b;
  --prob-low: #94a3b8;

  /* Live */
  --live: #ff3b3b;

  /* Surfaces – light (default) */
  --bg-base: var(--n-50);
  --bg-elevated: var(--n-0);
  --bg-surface: var(--n-25);
  --bg-muted: var(--n-100);
  --bg-overlay: rgba(10, 14, 26, 0.55);
  --bg-subtle: var(--n-100);
  --border-subtle: var(--n-100);
  --border-strong: var(--n-200);

  /* Text - light. text-tertiary was n-400 (#8a93a8), which is only ~3:1
     against bg-base (#f4f6fa) and bg-elevated (#fff). WCAG AA needs 4.5:1
     for normal text. Bumped to n-500 (#5e6678 ≈ 6.5:1) so muted captions
     and helper labels pass PageSpeed / axe colour-contrast checks. */
  --text-primary: var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-500);
  --text-on-brand: #ffffff;
  --text-inverse: #ffffff;

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Density (controlled by tweak) */
  --density-y: 14px;
  --density-x: 16px;
  --row-h: 48px;

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-full: 999px;

  /* Shadows – light */
  --sh-1: 0 1px 2px rgba(10, 14, 26, 0.06), 0 1px 1px rgba(10, 14, 26, 0.04);
  --sh-2: 0 2px 8px rgba(10, 14, 26, 0.08), 0 1px 2px rgba(10, 14, 26, 0.04);
  --sh-3: 0 8px 24px rgba(10, 14, 26, 0.12), 0 2px 4px rgba(10, 14, 26, 0.06);
  --sh-4: 0 16px 48px rgba(10, 14, 26, 0.18), 0 4px 8px rgba(10, 14, 26, 0.08);

  /* Motion */
  --dur-instant: 100ms;
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
}

[data-theme="dark"] {
  --bg-base: var(--n-900);
  --bg-elevated: #111623;
  --bg-surface: #0d1019;
  --bg-muted: #0f1320;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-subtle: #0f1320;
  --border-subtle: #1c2230;
  --border-strong: #283040;
  --text-primary: #f0f3f8;
  --text-secondary: #b8c1d3;   /* was #9aa3b6 ≈ 6.6:1 vs bg-base — kept easy on the eyes */
  --text-tertiary: #a8b1c5;    /* was #5e6678 ≈ 3.6:1 against #0a0e1a → fails AA; now ≈ 8:1 */
  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 2px 12px rgba(0,0,0,0.5);
  --sh-3: 0 8px 28px rgba(0,0,0,0.55);
  --sh-4: 0 16px 48px rgba(0,0,0,0.65);
  --brand-primary: #4d8bff;
  --brand-primary-hover: #6ba0ff;
}

[data-density="compact"] {
  --density-y: 10px;
  --density-x: 12px;
  --row-h: 40px;
}

/* Spacing scale (used across .tab-nav, hero, sections, etc) */
:root {
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 40px;
  --sp-10: 48px;
  --sp-12: 64px;
  --sp-16: 96px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-base);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
}
.tab-num { font-variant-numeric: tabular-nums; }