/* ==========================================================================
   Torch Analytics - Base Styles
   Reset, typography, CSS custom properties (:root vars)
   ========================================================================== */

/* --- Design Tokens / CSS Variables --- */
:root {
    --bg-color: #070a12;
    --card-bg: #0f1420;
    --card-bg-hover: #141a28;
    --card-bg-translucent: rgba(15, 20, 32, 0.6);
    --primary: #f5b731;
    --primary-dim: rgba(245, 183, 49, 0.08);
    --primary-hover: #fcd34d;
    --secondary: #FFFFFF;
    --secondary-dim: rgba(255, 255, 255, 0.15);
    --text-main: #dfe2ea;
    --text-light: #FFFFFF;
    --text-muted: rgba(200, 206, 220, 0.5);
    --border-color: rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --success: #4ade80;
    --success-dim: rgba(74, 222, 128, 0.15);
    --danger: #f87171;
    --danger-dim: rgba(248, 113, 113, 0.15);
    --warning: #fbbf24;
    --warning-dim: rgba(251, 191, 36, 0.15);
    --info: #60a5fa;
    --info-dim: rgba(96, 165, 250, 0.15);
    --accent-orange: #e8782a;
    --accent-teal: #4d9eb8;
    --gold: #f5b731;
    --font-display: 'Sora', 'Outfit', system-ui, sans-serif;
    --font-body: 'Outfit', 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ── Type Scale ─────────────────────────────────── */
    --fs-2xs: 0.625rem;
    --fs-xs: 0.6875rem;
    --fs-sm: 0.75rem;
    --fs-base: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-lg: 1rem;
    --fs-xl: 1.125rem;
    --fs-2xl: 1.25rem;
    --fs-3xl: 1.5rem;
    --fs-4xl: 1.75rem;
    --fs-5xl: 2rem;
    --fs-6xl: 2.5rem;
    --fs-hero: 3.5rem;
    --fs-data-xs: 0.5rem;
    --fs-data-sm: 0.6875rem;
    --fs-data: 0.8125rem;
    --fs-data-lg: 1.125rem;
    --fs-data-xl: 1.5rem;

    /* ── Spacing Scale ──────────────────────────────── */
    --sp-2xs: 0.125rem;
    --sp-xs: 0.25rem;
    --sp-sm: 0.5rem;
    --sp-md: 0.75rem;
    --sp-lg: 1rem;
    --sp-xl: 1.5rem;
    --sp-2xl: 2rem;
    --sp-3xl: 3rem;
    --sp-4xl: 4rem;

    --torch-teal: #4d9eb8;
    --torch-ember: #e8782a;
    --torch-green: #3ddba0;
    --border-gold: rgba(245, 183, 49, 0.15);
    --surface-alt: #141a28;
    --text-dim: rgba(200, 206, 220, 0.2);

    /* Extended palette */
    --accent-purple: #c084fc;
    --accent-gray: #9ca3af;
    --success-dark: #10b981;
    --primary-gradient-end: #651fff;
    --success-gradient-end: #16a34a;
    --danger-gradient-end: #dc2626;
    --warning-gradient-end: #d97706;

    /* Backgrounds & surfaces */
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-bg-alt: rgba(0, 0, 0, 0.4);
    --container-bg-dim: rgba(0, 0, 0, 0.2);
    --bg-subtle: rgba(255, 255, 255, 0.03);
    --card-footer-bg: rgba(0, 0, 0, 0.1);
    --dropdown-bg: rgba(30, 30, 40, 0.98);
    --tooltip-bg: rgba(0, 0, 0, 0.9);
    --overlay-dark: rgba(0, 0, 0, 0.8);
    --overlay-medium: rgba(0, 0, 0, 0.55);
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
    --workspace-panel-bg: rgba(26, 26, 46, 0.9);
    --surface-terminal: rgba(12, 15, 25, 0.96);
    --surface-terminal-dim: rgba(12, 15, 25, 0.6);
    --surface-terminal-solid: rgba(12, 15, 25, 0.99);
    --overlay-light: rgba(0, 0, 0, 0.6);
    --table-header-bg: rgba(77, 158, 184, 0.1);
    --table-row-hover-bg: rgba(77, 158, 184, 0.05);

    /* Subtle surface fills */
    --bg-muted: rgba(255, 255, 255, 0.06);

    /* Borders */
    --card-border: rgba(255, 255, 255, 0.08);
    --border-color-medium: rgba(255, 255, 255, 0.2);
    --border-teal-light: rgba(77, 158, 184, 0.25);
    --border-teal-medium: rgba(77, 158, 184, 0.4);
    --border-purple-light: rgba(124, 58, 237, 0.3);
    --border-green-light: rgba(16, 185, 129, 0.3);

    /* Row / cell hover states */
    --row-hover: rgba(255, 255, 255, 0.02);
    --row-hover-alt: rgba(255, 255, 255, 0.04);

    /* Hover states */
    --hover-subtle: rgba(255, 255, 255, 0.08);
    --hover-teal-light: rgba(77, 158, 184, 0.1);

    /* Focus rings */
    --focus-ring-teal: 0 0 0 3px rgba(77, 158, 184, 0.15);

    /* Gradient midpoints */
    --danger-mid: rgba(248, 113, 113, 0.5);
    --success-mid: rgba(74, 222, 128, 0.5);

    /* Shimmer / skeleton */
    --shimmer-highlight: rgba(255, 255, 255, 0.05);

    /* Highlight backgrounds */
    --highlight-teal-dim: rgba(77, 158, 184, 0.3);
    --highlight-teal-light: rgba(77, 158, 184, 0.15);
    --highlight-warning-light: rgba(250, 204, 21, 0.15);
    --highlight-success-light: rgba(74, 222, 128, 0.1);
    --highlight-success-border: rgba(74, 222, 128, 0.3);
    --highlight-cyan-light: rgba(0, 229, 255, 0.1);

    /* Badge backgrounds */
    --badge-primary-bg: rgba(77, 158, 184, 0.2);
    --badge-primary-bg-strong: rgba(77, 158, 184, 0.25);
    --badge-success-bg: rgba(34, 197, 94, 0.2);
    --badge-warning-bg: rgba(245, 158, 11, 0.2);
    --badge-danger-bg: rgba(239, 68, 68, 0.2);
    --badge-info-bg: rgba(0, 229, 255, 0.2);
    --badge-gold-bg: rgba(255, 215, 0, 0.15);
    --badge-orange-bg: rgba(249, 115, 22, 0.15);

    /* Heat-map scale */
    --heat-success-strong: rgba(74, 222, 128, 0.2);
    --heat-success-light: rgba(74, 222, 128, 0.1);
    --heat-success-text: rgba(74, 222, 128, 0.8);
    --heat-neutral: rgba(255, 255, 255, 0.04);
    --heat-danger-light: rgba(248, 113, 113, 0.1);
    --heat-danger-strong: rgba(248, 113, 113, 0.2);
    --heat-danger-text: rgba(248, 113, 113, 0.8);

    /* Alert variants */
    --alert-info-bg: rgba(59, 130, 246, 0.15);
    --alert-info-border: rgba(59, 130, 246, 0.3);
    --alert-info-text: #93c5fd;
    --alert-success-bg: rgba(34, 197, 94, 0.15);
    --alert-success-border: rgba(34, 197, 94, 0.3);
    --alert-success-text: #86efac;
    --alert-warning-bg: rgba(245, 158, 11, 0.15);
    --alert-warning-border: rgba(245, 158, 11, 0.3);
    --alert-warning-text: #fde047;
    --alert-danger-bg: rgba(239, 68, 68, 0.15);
    --alert-danger-border: rgba(239, 68, 68, 0.3);
    --alert-danger-text: #fca5a5;

    /* Shadow variants */
    --shadow-teal: 0 4px 14px rgba(77, 158, 184, 0.35);
    --shadow-teal-hover: 0 6px 20px rgba(77, 158, 184, 0.45);
    --shadow-success: 0 4px 14px rgba(34, 197, 94, 0.35);
    --shadow-success-hover: 0 6px 20px rgba(34, 197, 94, 0.45);
    --shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.35);
    --shadow-danger-hover: 0 6px 20px rgba(239, 68, 68, 0.45);
    --glow-teal: 0 0 20px rgba(77, 158, 184, 0.3);

    /* Sport-specific surface & accent overlays */
    --ufc-red-overlay: rgba(210, 10, 10, 0.10);
    --ufc-red-overlay-subtle: rgba(210, 10, 10, 0.04);
    --ufc-gold-border: rgba(212, 175, 55, 0.2);
    --ufc-gold-bg-dim: rgba(212, 175, 55, 0.05);
    --ufc-gold-border-light: rgba(212, 175, 55, 0.3);
    --ufc-red-bg-dim: rgba(210, 10, 10, 0.2);
    --tennis-green-overlay: rgba(46, 125, 50, 0.10);
    --tennis-yellow-overlay: rgba(204, 255, 0, 0.03);
    --tennis-yellow-bg: rgba(204, 255, 0, 0.12);
    --tennis-green-bg: rgba(46, 125, 50, 0.12);
    --tennis-hard-bg: rgba(51, 102, 204, 0.15);
    --tennis-clay-bg: rgba(212, 114, 42, 0.15);
    --tennis-grass-bg: rgba(76, 175, 80, 0.15);
    --tennis-hard-bg-dim: rgba(51, 102, 204, 0.10);
    --f1-red-border: rgba(225, 6, 0, 0.3);
    --mlb-blue-overlay: rgba(0, 45, 114, 0.25);
    --mlb-red-overlay: rgba(213, 0, 50, 0.15);
    --mlb-blue-bg: rgba(0, 45, 114, 0.15);
    --mlb-accent-overlay: rgba(191, 13, 62, 0.12);
    --mlb-accent-bg-dim: rgba(191, 13, 62, 0.2);
    --mlb-accent-border: rgba(191, 13, 62, 0.25);
    --mlb-accent-border-hover: rgba(191, 13, 62, 0.25);
    --mlb-blue-icon-bg: rgba(0, 45, 114, 0.2);
    --mlb-green-icon-bg: rgba(45, 114, 48, 0.2);
    --mlb-red-icon-bg: rgba(213, 0, 50, 0.2);
    --mlb-accent-border-strong: rgba(191, 13, 62, 0.35);
    --golf-dark-overlay: rgba(12, 12, 20, 0.4);
    --golf-green-border: rgba(0, 103, 71, 0.3);
    --golf-green-hover: rgba(0, 103, 71, 0.06);
    --golf-gold-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    --golf-success-badge-bg: rgba(34, 197, 94, 0.12);
    --golf-risky-badge-bg: rgba(242, 199, 92, 0.12);
    --golf-danger-badge-bg: rgba(239, 68, 68, 0.12);
    --golf-gold-border: rgba(242, 199, 92, 0.3);
    --esports-neon-border: rgba(34, 197, 94, 0.2);
    --esports-neon-border-dim: rgba(34, 197, 94, 0.1);
    --esports-neon-hover: rgba(34, 197, 94, 0.03);
    --esports-neon-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
    --esports-neon-border-dashed: rgba(34, 197, 94, 0.2);
    --soccer-green-hover: rgba(0, 166, 81, 0.1);
    --soccer-green-bg: rgba(0, 166, 81, 0.04);
    --soccer-green-border: rgba(0, 166, 81, 0.2);
    --nba-blue-gradient: rgba(29, 66, 138, 0.3);
    --nba-red-gradient: rgba(200, 16, 46, 0.2);
    --nba-accent-border: rgba(253, 185, 39, 0.3);

    /* Extended sport-specific rgba tokens (TADS remediation) */
    --ufc-red-70: rgba(210, 10, 10, 0.7);
    --ufc-gold-70: rgba(212, 175, 55, 0.7);
    --ufc-purple-20: rgba(156, 39, 176, 0.2);
    --ufc-blue-20: rgba(33, 150, 243, 0.2);
    --golf-green-08: rgba(0, 103, 71, 0.08);
    --golf-green-10: rgba(0, 103, 71, 0.1);
    --golf-green-15: rgba(0, 103, 71, 0.15);
    --golf-green-20: rgba(0, 103, 71, 0.2);
    --golf-green-25: rgba(0, 103, 71, 0.25);
    --golf-gold-08: rgba(242, 199, 92, 0.08);
    --golf-gold-20: rgba(242, 199, 92, 0.2);
    --mlb-blue-30: rgba(0, 45, 114, 0.3);
    --mlb-green-30: rgba(45, 114, 48, 0.3);
    --f1-red-15: rgba(225, 6, 0, 0.15);
    --f1-testing-blue: rgba(100, 140, 200, 0.6);
    --tennis-yellow-15: rgba(204, 255, 0, 0.15);
    --tennis-green-15: rgba(46, 125, 50, 0.15);
    --tennis-hard-80: rgba(51, 102, 204, 0.8);
    --tennis-hard-85: rgba(51, 102, 204, 0.85);
    --tennis-clay-80: rgba(212, 114, 42, 0.8);
    --tennis-clay-85: rgba(212, 114, 42, 0.85);
    --tennis-grass-80: rgba(76, 175, 80, 0.8);
    --tennis-grass-85: rgba(76, 175, 80, 0.85);
    --tennis-purple-15: rgba(160, 32, 240, 0.15);
    --tennis-clay-alt-12: rgba(212, 184, 150, 0.12);
    --esports-green-alt-15: rgba(45, 125, 70, 0.15);

    /* Gradient endpoints & accent variants (TADS remediation) */
    --accent-orange-warm: #ff8c00;
    --f1-red-hover: #ff3b33;
    --chart-tick-color: #a0a0b0;
    --error-text-light: #ffd5d5;
    --ufc-purple-text: #ce93d8;
    --ufc-blue-text: #64b5f6;
    --ufc-ko-text: #f44336;
    --nba-positive: #4caf50;
    --nba-negative: #f44336;
    --tennis-negative: #ef5350;
    --golf-gradient-dark: #0a1f15;
    --f1-sector-purple: #a020f0;

    /* Extended semantic / neutral rgba tokens (TADS remediation) */
    --white-35: rgba(255, 255, 255, 0.35);
    --text-dim-med: rgba(200, 206, 220, 0.3);
    --text-muted-strong: rgba(200, 206, 220, 0.7);
    --purple-bg-subtle: rgba(192, 132, 252, 0.05);
    --info-bg-light: rgba(59, 130, 246, 0.12);
    --primary-accent-bg: rgba(124, 58, 237, 0.2);
    --primary-accent-bg-light: rgba(124, 77, 255, 0.12);
    --success-70: rgba(74, 222, 128, 0.7);
    --success-green-70: rgba(34, 197, 94, 0.7);
    --teal-70: rgba(77, 158, 184, 0.7);
    --cyan-70: rgba(0, 229, 255, 0.7);
    --gold-ffd-50: rgba(255, 215, 0, 0.5);
    --silver-badge-bg: rgba(192, 192, 220, 0.15);
    --bronze-badge-bg: rgba(205, 127, 50, 0.15);
    --esports-neon-hover-alt: rgba(34, 197, 94, 0.05);
    --danger-bg-light: rgba(239, 68, 68, 0.1);

    /* White opacity scale (TADS remediation batch 3) */
    --white-25: rgba(255, 255, 255, 0.25);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-80: rgba(255, 255, 255, 0.8);

    /* Danger/warning opacity scale (TADS remediation batch 3) */
    --danger-25: rgba(239, 68, 68, 0.25);
    --danger-40: rgba(239, 68, 68, 0.4);
    --warning-12: rgba(251, 191, 36, 0.12);
    --warning-25: rgba(251, 191, 36, 0.25);

    /* Primary (gold) opacity scale (TADS remediation batch 3) */
    --primary-12: rgba(245, 183, 49, 0.12);
    --primary-20: rgba(245, 183, 49, 0.2);
    --primary-25: rgba(245, 183, 49, 0.25);
    --primary-30: rgba(245, 183, 49, 0.3);
    --primary-40: rgba(245, 183, 49, 0.4);
    --primary-60: rgba(245, 183, 49, 0.6);

    /* Neutral gray scale (TADS remediation batch 3) */
    --gray-12: rgba(156, 163, 175, 0.12);
    --gray-15: rgba(160, 160, 176, 0.15);
    --gray-25: rgba(156, 163, 175, 0.25);
    --gray-80: rgba(160, 160, 176, 0.8);
    --orange-25: rgba(249, 115, 22, 0.25);

    /* Additional gold tokens (TADS remediation batch 3) */
    --gold-08: rgba(255, 215, 0, 0.08);
    --gold-30: rgba(255, 215, 0, 0.3);

    /* Teal/cyan extended (TADS remediation batch 3) */
    --teal-60: rgba(77, 158, 184, 0.6);
    --teal-80: rgba(77, 158, 184, 0.8);
    --cyan-01: rgba(0, 229, 255, 0.01);
    --cyan-08: rgba(0, 229, 255, 0.08);
    --cyan-60: rgba(0, 229, 255, 0.6);

    /* Purple scale (TADS remediation batch 3) */
    --purple-50: rgba(124, 58, 237, 0.5);
    --purple-70: rgba(124, 58, 237, 0.7);
    --silver-70: rgba(148, 163, 184, 0.7);
    --bronze-70: rgba(217, 119, 6, 0.7);

    /* F1 extended red scale (TADS remediation batch 3) */
    --f1-red-04: rgba(225, 6, 0, 0.04);
    --f1-red-06: rgba(225, 6, 0, 0.06);
    --f1-red-08: rgba(225, 6, 0, 0.08);
    --f1-red-10: rgba(225, 6, 0, 0.1);
    --f1-red-35: rgba(225, 6, 0, 0.35);
    --f1-red-60: rgba(225, 6, 0, 0.6);
    --f1-red-70: rgba(225, 6, 0, 0.7);

    /* UFC extended (TADS remediation batch 3) */
    --ufc-red-40: rgba(210, 10, 10, 0.4);
    --ufc-red-80: rgba(210, 10, 10, 0.8);
    --ufc-gold-80: rgba(212, 175, 55, 0.8);

    /* MLB extended (TADS remediation batch 3) */
    --mlb-accent-08: rgba(191, 13, 62, 0.08);
    --mlb-red-30: rgba(213, 0, 50, 0.3);

    /* NBA extended (TADS remediation batch 3) */
    --nba-blue-10: rgba(30, 60, 114, 0.1);
    --nba-blue-20: rgba(30, 60, 114, 0.2);
    --nfl-blue-30: rgba(0, 53, 148, 0.3);

    /* NHL accent scale (TADS remediation batch 3) */
    --nhl-accent-08: rgba(252, 181, 20, 0.08);
    --nhl-accent-10: rgba(252, 181, 20, 0.1);
    --nhl-accent-15: rgba(252, 181, 20, 0.15);
    --nhl-accent-20: rgba(252, 181, 20, 0.2);
    --nhl-accent-30: rgba(252, 181, 20, 0.3);

    /* Golf extended (TADS remediation batch 3) */
    --golf-green-04: rgba(0, 103, 71, 0.04);
    --golf-green-05: rgba(0, 103, 71, 0.05);
    --golf-green-40: rgba(0, 103, 71, 0.4);
    --golf-green-70: rgba(0, 103, 71, 0.7);

    /* Tennis extended (TADS remediation batch 3) */
    --tennis-grass-20: rgba(76, 175, 80, 0.2);
    --tennis-green-05: rgba(46, 125, 50, 0.05);
    --tennis-green-06: rgba(46, 125, 50, 0.06);
    --tennis-green-30: rgba(46, 125, 50, 0.3);
    --tennis-green-80: rgba(46, 125, 50, 0.8);

    /* Esports extended (TADS remediation batch 3) */
    --esports-neon-04: rgba(0, 255, 136, 0.04);
    --esports-neon-08: rgba(0, 255, 136, 0.08);
    --esports-neon-12: rgba(0, 255, 136, 0.12);
    --esports-neon-35: rgba(0, 255, 136, 0.35);
    --esports-blue-12: rgba(26, 140, 255, 0.12);
    --esports-purple-12: rgba(145, 70, 255, 0.12);
    --esports-green-50: rgba(45, 125, 70, 0.5);

    /* Fadepicks extended (TADS remediation batch 3) */
    --fadepicks-08: rgba(61, 219, 160, 0.08);
    --fadepicks-40: rgba(61, 219, 160, 0.4);

    /* TADS remediation batch 4 — extended opacity scales */
    --blue-bright-15: rgba(0, 119, 255, 0.15);
    --cyan-15: rgba(0, 229, 255, 0.15);
    --cyan-30: rgba(0, 229, 255, 0.3);
    --danger-04: rgba(239, 68, 68, 0.04);
    --danger-06: rgba(239, 68, 68, 0.06);
    --danger-22: rgba(239, 68, 68, 0.22);
    --danger-80: rgba(239, 68, 68, 0.8);
    --danger-mid-12: rgba(248, 113, 113, 0.12);
    --danger-mid-25: rgba(248, 113, 113, 0.25);
    --ember-06: rgba(232, 120, 42, 0.06);
    --esports-neon-06: rgba(0, 255, 136, 0.06);
    --esports-neon-15: rgba(0, 255, 136, 0.15);
    --esports-purple-10: rgba(145, 70, 255, 0.1);
    --esports-purple-30: rgba(145, 70, 255, 0.3);
    --f1-red-05: rgba(225, 6, 0, 0.05);
    --f1-red-20: rgba(225, 6, 0, 0.2);
    --f1-red-40: rgba(225, 6, 0, 0.4);
    --fadepicks-05: rgba(61, 219, 160, 0.05);
    --fadepicks-06: rgba(61, 219, 160, 0.06);
    --fadepicks-12: rgba(61, 219, 160, 0.12);
    --fadepicks-25: rgba(61, 219, 160, 0.25);
    --fadepicks-85: rgba(61, 219, 160, 0.85);
    --gold-12: rgba(255, 215, 0, 0.12);
    --gold-bright-30: rgba(255, 200, 0, 0.3);
    --golf-green-12: rgba(0, 103, 71, 0.12);
    --green-dark-12: rgba(45, 90, 39, 0.12);
    --indigo-12: rgba(99, 102, 241, 0.12);
    --info-06: rgba(59, 130, 246, 0.06);
    --info-10: rgba(59, 130, 246, 0.1);
    --info-dim-30: rgba(96, 165, 250, 0.3);
    --mlb-red-10: rgba(213, 0, 50, 0.1);
    --mlb-red-12: rgba(213, 0, 50, 0.12);
    --nba-accent-20: rgba(253, 185, 39, 0.2);
    --nba-blue-25: rgba(29, 66, 138, 0.25);
    --nba-red-15: rgba(200, 16, 46, 0.15);
    --nhl-blue-20: rgba(0, 168, 255, 0.2);
    --nhl-cyan-04: rgba(34, 211, 238, 0.04);
    --nhl-cyan-08: rgba(34, 211, 238, 0.08);
    --nhl-orange-20: rgba(222, 135, 34, 0.2);
    --nhl-red-20: rgba(255, 70, 85, 0.2);
    --orange-12: rgba(249, 115, 22, 0.12);
    --orange-warm-15: rgba(255, 165, 0, 0.15);
    --primary-06: rgba(245, 183, 49, 0.06);
    --primary-accent-15: rgba(124, 77, 255, 0.15);
    --primary-accent-30: rgba(124, 77, 255, 0.3);
    --purple-light-15: rgba(167, 139, 250, 0.15);
    --purple-light-20: rgba(167, 139, 250, 0.2);
    --silver-10: rgba(148, 163, 184, 0.1);
    --soccer-green-06: rgba(0, 166, 81, 0.06);
    --soccer-green-08: rgba(0, 166, 81, 0.08);
    --soccer-green-12: rgba(0, 166, 81, 0.12);
    --soccer-green-15: rgba(0, 166, 81, 0.15);
    --soccer-green-30: rgba(0, 166, 81, 0.3);
    --success-12: rgba(74, 222, 128, 0.12);
    --success-dark-15: rgba(22, 101, 52, 0.15);
    --success-dark-alt-15: rgba(21, 128, 61, 0.15);
    --success-light-08: rgba(134, 239, 172, 0.08);
    --surface-navy-80: rgba(22, 22, 37, 0.8);
    --surface-terminal-60: rgba(12, 12, 20, 0.6);
    --teal-05: rgba(77, 158, 184, 0.05);
    --teal-06: rgba(77, 158, 184, 0.06);
    --teal-12: rgba(77, 158, 184, 0.12);
    --tennis-clay-20: rgba(212, 114, 42, 0.2);
    --tennis-clay-25: rgba(212, 114, 42, 0.25);
    --tennis-clay-alt-15: rgba(212, 184, 150, 0.15);
    --tennis-grass-25: rgba(76, 175, 80, 0.25);
    --tennis-green-08: rgba(46, 125, 50, 0.08);
    --tennis-hard-20: rgba(51, 102, 204, 0.2);
    --tennis-hard-25: rgba(51, 102, 204, 0.25);
    --tennis-yellow-04: rgba(204, 255, 0, 0.04);
    --tennis-yellow-06: rgba(204, 255, 0, 0.06);
    --tennis-yellow-08: rgba(204, 255, 0, 0.08);
    --text-dim-05: rgba(200, 206, 220, 0.05);
    --text-dim-06: rgba(200, 206, 220, 0.06);
    --text-dim-10: rgba(200, 206, 220, 0.1);
    --ufc-gold-00: rgba(212, 175, 55, 0);
    --ufc-gold-08: rgba(212, 175, 55, 0.08);
    --ufc-gold-15: rgba(212, 175, 55, 0.15);
    --ufc-gold-25: rgba(212, 175, 55, 0.25);
    --ufc-gold-40: rgba(212, 175, 55, 0.4);
    --ufc-ko-15: rgba(244, 67, 54, 0.15);
    --ufc-ko-20: rgba(244, 67, 54, 0.2);
    --ufc-purple-25: rgba(156, 39, 176, 0.25);
    --ufc-red-00: rgba(210, 10, 10, 0);
    --ufc-red-03: rgba(210, 10, 10, 0.03);
    --ufc-red-08: rgba(210, 10, 10, 0.08);
    --ufc-red-15: rgba(210, 10, 10, 0.15);
    --ufc-red-25: rgba(210, 10, 10, 0.25);
    --ufc-red-30: rgba(210, 10, 10, 0.3);
    --warning-08: rgba(251, 191, 36, 0.08);
    --warning-10: rgba(251, 191, 36, 0.1);
    --warning-20: rgba(251, 191, 36, 0.2);
    --warning-30: rgba(251, 191, 36, 0.3);
    --warning-40: rgba(251, 191, 36, 0.4);

    /* TADS remediation batch 5 — additional tokens */
    --black-25: rgba(0, 0, 0, 0.25);
    --f1-red-03: rgba(225, 6, 0, 0.03);
    --primary-05: rgba(245, 183, 49, 0.05);
    --green-bright-30: rgba(76, 175, 80, 0.3);
    --danger-mid-08: rgba(248, 113, 113, 0.08);
    --purple-primary-08: rgba(124, 58, 237, 0.08);
    --purple-primary-20: rgba(124, 58, 237, 0.2);
    --danger-alt-08: rgba(232, 64, 64, 0.08);
    --danger-alt-25: rgba(232, 64, 64, 0.25);
    --overlay-heavy: rgba(0, 0, 0, 0.85);
    --surface-overlay-96: rgba(10, 10, 15, 0.96);

    /* Social login buttons */
    --social-apple-bg: #000;
    --social-apple-border: #333;
    --social-apple-hover: #1a1a1a;
    --social-google-bg: #fff;
    --social-google-text: #1f1f1f;
    --social-google-border: #dadce0;
    --social-google-hover: #f8f9fa;
    --social-google-hover-border: #c1c1c1;
    --social-discord-bg: #5865F2;
    --social-discord-hover: #4752c4;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --content-max-width: 1920px;

    /* Sub-brand accents */
    --fadepicks-accent: #3ddba0;
    --ember-accent: #e8782a;
    --gridline-accent: #4d9eb8;
    --flare-accent: #f5b731;
    /* Sport accents */
    --sport-nfl: #013369;
    --sport-f1: #E8002D;
    --sport-nba: #1d428a;
    --sport-mlb: #002d72;
    --sport-nhl: #000000;
    --sport-soccer: #00a651;
    --sport-tennis: #4e008e;
    --sport-golf: #006747;
    --sport-ufc: #d20a0a;
    --sport-esports: #9146ff;

    /* Sport accent colors (for Forge theming) */
    --sport-nfl-accent: #FBBF24;
    --sport-nfl-accent-dim: rgba(251, 191, 36, 0.15);
    --sport-f1-accent: #EF4444;
    --sport-f1-accent-dim: rgba(239, 68, 68, 0.15);
    --sport-nba-accent: #3B82F6;
    --sport-nba-accent-dim: rgba(59, 130, 246, 0.15);
    --sport-mlb-accent: #60A5FA;
    --sport-mlb-accent-dim: rgba(96, 165, 250, 0.15);
    --sport-nhl-accent: #64C4FF;
    --sport-nhl-accent-dim: rgba(100, 196, 255, 0.15);
    --sport-soccer-accent: #22C55E;
    --sport-soccer-accent-dim: rgba(34, 197, 94, 0.15);
    --sport-tennis-accent: #A3E635;
    --sport-tennis-accent-dim: rgba(163, 230, 53, 0.15);
    --sport-golf-accent: #10B981;
    --sport-golf-accent-dim: rgba(16, 185, 129, 0.15);
    --sport-ufc-accent: #E8782A;
    --sport-ufc-accent-dim: rgba(232, 120, 42, 0.15);
    --sport-esports-accent: #C084FC;
    --sport-esports-accent-dim: rgba(192, 132, 252, 0.15);

    /* Sport Secondary Accents (charts, badges) */
    --sport-nfl-secondary: #4D9EB8;
    --sport-f1-secondary: #F5B731;
    --sport-nba-secondary: #F97316;
    --sport-mlb-secondary: #EF4444;
    --sport-nhl-secondary: #F5B731;
    --sport-soccer-secondary: #F5B731;
    --sport-tennis-secondary: #C084FC;
    --sport-golf-secondary: #F5B731;
    --sport-ufc-secondary: #EF4444;
    --sport-esports-secondary: #22C55E;

    /* F1 Team Colors */
    --f1-team-red-bull: #3671C6;
    --f1-team-ferrari: #E80020;
    --f1-team-mclaren: #FF8000;
    --f1-team-mercedes: #27F4D2;
    --f1-team-aston-martin: #229971;
    --f1-team-alpine: #00A1E8;
    --f1-team-williams: #1868DB;
    --f1-team-racing-bulls: #6692FF;
    --f1-team-haas: #DEE1E2;
    --f1-team-audi: #FF2D00;
    --f1-team-cadillac: #AAAAAD;

    /* F1 Tire Compounds */
    --f1-tire-soft: #EF4444;
    --f1-tire-medium: #F5B731;
    --f1-tire-hard: #DFE2EA;
    --f1-tire-inter: #3DDBA0;
    --f1-tire-wet: #3B82F6;

    /* NFL Position Colors */
    --nfl-pos-qb: #EF4444;
    --nfl-pos-rb: #3DDBA0;
    --nfl-pos-wr: #4D9EB8;
    --nfl-pos-te: #F5B731;
    --nfl-pos-k: #C084FC;
    --nfl-pos-def: #E8782A;

    /* LoL Role Colors */
    --lol-role-top: #8D6E63;
    --lol-role-jungle: #4CAF50;
    --lol-role-mid: #42A5F5;
    --lol-role-adc: #EF5350;
    --lol-role-support: #FFD54F;

    /* Semantic chart colors */
    --chart-positive: #3ddba0;
    --chart-negative: #ef4444;
    --chart-neutral: #4d9eb8;
    /* Brand alias */
    --accent-gold: #f5b731;

    /* Spacing (4px base grid) — NEW: token-backed spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Motion — NEW: token-backed animation values */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 400ms;
    --duration-burst: 600ms;
    --easing-default: ease;
    --easing-out: ease-out;
    --easing-in-out: ease-in-out;

    /* Missing brand soft tokens — NEW */
    --gold-soft: rgba(245, 183, 49, 0.08);
    --teal-soft: rgba(77, 158, 184, 0.1);
    --green-soft: rgba(61, 219, 160, 0.1);
    --ember-soft: rgba(232, 120, 42, 0.1);
    --gold-bright: #fcd34d;

    /* Gold / Primary rgba variants */
    --gold-glow-sm: 0 2px 8px rgba(245, 183, 49, 0.3);
    --gold-glow-md: 0 4px 15px rgba(245, 183, 49, 0.4);
    --gold-glow-lg: 0 6px 28px rgba(245, 183, 49, 0.55);
    --gold-glow-btn: 0 3px 10px rgba(245, 183, 49, 0.4);
    --gold-glow-box: 0 4px 20px rgba(245, 183, 49, 0.35);
    --gold-border-light: rgba(245, 183, 49, 0.2);
    --gold-border-medium: rgba(245, 183, 49, 0.3);
    --gold-border-strong: rgba(245, 183, 49, 0.4);
    --gold-text-dim: rgba(245, 183, 49, 0.55);
    --gold-bg-light: rgba(245, 183, 49, 0.1);
    --gold-bg-medium: rgba(245, 183, 49, 0.15);
    --gold-bg-strong: rgba(245, 183, 49, 0.2);
    --gold-focus-ring: 0 0 0 2px rgba(245, 183, 49, 0.2);
    --gold-focus-ring-sm: 0 0 0 3px rgba(245, 183, 49, 0.15);

    /* Green / Fadepicks rgba variants */
    --green-border-light: rgba(61, 219, 160, 0.2);
    --green-border-strong: rgba(61, 219, 160, 0.4);
    --green-bg-medium: rgba(61, 219, 160, 0.15);
    --green-glow-sm: 0 2px 8px rgba(61, 219, 160, 0.3);

    /* Navbar surface */
    --navbar-bg: rgba(22, 22, 37, 0.97);

    /* Neutral white rgba variants */
    --white-02: rgba(255, 255, 255, 0.02);
    --white-03: rgba(255, 255, 255, 0.03);
    --white-04: rgba(255, 255, 255, 0.04);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-06: rgba(255, 255, 255, 0.06);
    --white-08: rgba(255, 255, 255, 0.08);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-15: rgba(255, 255, 255, 0.15);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-25: rgba(255, 255, 255, 0.25);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-80: rgba(255, 255, 255, 0.8);

    /* Neutral black rgba variants */
    --black-15: rgba(0, 0, 0, 0.15);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-25: rgba(0, 0, 0, 0.25);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-40: rgba(0, 0, 0, 0.4);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-60: rgba(0, 0, 0, 0.6);

    /* Warning color rgba variants */
    --warning-glow: 0 0 10px rgba(250, 204, 21, 0.2);
    --warning-bg-light: rgba(250, 204, 21, 0.1);
    --warning-bg-medium: rgba(250, 204, 21, 0.2);
    --warning-bg-strong: rgba(250, 204, 21, 0.25);
    --warning-border-medium: rgba(250, 204, 21, 0.3);
    --warning-border-strong: rgba(250, 204, 21, 0.4);
    --warning-pulse: rgba(250, 204, 21, 0.4);
    --warning-pulse-dim: rgba(250, 204, 21, 0.2);

    /* Danger color rgba variants */
    --danger-bg-light: rgba(248, 113, 113, 0.1);
    --danger-bg-medium: rgba(248, 113, 113, 0.2);
    --danger-border-medium: rgba(248, 113, 113, 0.3);
    --danger-border-strong: rgba(248, 113, 113, 0.4);
    --danger-bg-solid: rgba(248, 113, 113, 0.9);
    --danger-bg-solid-strong: rgba(248, 113, 113, 0.95);
    --danger-alt-bg: rgba(255, 82, 82, 0.1);
    --danger-alt-bg-medium: rgba(255, 82, 82, 0.2);
    --danger-alt-border: rgba(255, 82, 82, 0.3);
    --danger-ef-bg: rgba(239, 68, 68, 0.2);
    --danger-ef-border: rgba(239, 68, 68, 0.4);

    /* Success color rgba variants */
    --success-bg-light: rgba(74, 222, 128, 0.2);
    --success-border-strong: rgba(74, 222, 128, 0.4);
    --success-bg-solid: rgba(74, 222, 128, 0.9);
    --success-bg-solid-strong: rgba(74, 222, 128, 0.95);
    --success-alt-bg: rgba(0, 230, 118, 0.1);
    --success-alt-bg-medium: rgba(0, 230, 118, 0.2);
    --success-green-bg: rgba(34, 197, 94, 0.2);
    --success-dark-bg: rgba(16, 185, 129, 0.2);
    --success-dark-border: rgba(16, 185, 129, 0.4);

    /* Info / Blue rgba variants */
    --info-bg-medium: rgba(59, 130, 246, 0.2);
    --info-border-strong: rgba(59, 130, 246, 0.4);
    --info-alt-bg: rgba(96, 165, 250, 0.15);
    --info-alt-bg-medium: rgba(96, 165, 250, 0.2);
    --info-nhl-bg: rgba(100, 196, 255, 0.15);

    /* Accent rgba variants */
    --orange-bg: rgba(249, 115, 22, 0.2);
    --yellow-bg: rgba(234, 179, 8, 0.2);
    --purple-bg: rgba(168, 85, 247, 0.2);
    --gray-bg: rgba(156, 163, 175, 0.2);
    --gray-border: rgba(156, 163, 175, 0.4);
    --gray-muted-bg: rgba(160, 160, 176, 0.15);
    --gray-muted-med: rgba(160, 160, 176, 0.2);
    --gray-muted-placeholder: rgba(160, 160, 176, 0.5);
    --gray-muted-placeholder-med: rgba(160, 160, 176, 0.6);
    --nhl-pp2-bg: rgba(148, 163, 184, 0.15);
    --snow-bg: rgba(186, 230, 253, 0.2);
    --sleeper-bg: rgba(0, 77, 64, 0.8);
    --gold-ffd-bg: rgba(255, 215, 0, 0.1);
    --cyan-glow: 0 4px 20px rgba(0, 229, 255, 0.4);
    --cyan-bg-light: rgba(0, 229, 255, 0.05);

    /* Chart / surface dark backgrounds (TADS remediation) */
    --surface-dark-80: rgba(12, 12, 20, 0.8);
    --surface-dark-95: rgba(12, 12, 20, 0.95);
    --soccer-green-10: rgba(0, 166, 81, 0.1);
    --soccer-gold-08: rgba(255, 215, 0, 0.08);

    /* Toast solid backgrounds */
    --toast-success: rgba(74, 222, 128, 0.9);
    --toast-success-strong: rgba(74, 222, 128, 0.95);
    --toast-error: rgba(248, 113, 113, 0.9);
    --toast-error-strong: rgba(248, 113, 113, 0.95);
    --toast-info: rgba(245, 183, 49, 0.9);

    /* Shimmer gradient */
    --shimmer-gradient: linear-gradient(90deg, var(--white-03) 25%, var(--white-08) 50%, var(--white-03) 75%);

    /* Gradient for data-table mobile fade */
    --table-fade-gradient: linear-gradient(to right, rgba(26, 26, 46, 0), rgba(26, 26, 46, 0.85));

    /* AI card gradients */
    --ai-card-gradient: linear-gradient(135deg, rgba(245, 183, 49, 0.15), rgba(0, 229, 255, 0.05));

    /* Overlay variants */
    --overlay-pro-gate: rgba(12, 12, 20, 0.85);

    /* Tier badge gradients */
    --tier-pro-gradient: linear-gradient(135deg, rgba(255, 214, 0, 0.2), rgba(255, 152, 0, 0.2));
    --tier-pro-border: rgba(255, 214, 0, 0.3);

    /* Logo drop-shadow */
    --logo-drop-shadow: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));

    /* Soccer form fallbacks */
    --success-muted: rgba(0, 200, 100, 0.15);
    --danger-muted: rgba(255, 60, 60, 0.15);

    /* Lifecycle gradient */
    --lifecycle-gradient: linear-gradient(120deg, rgba(77, 158, 184, 0.12), rgba(0, 229, 255, 0.08));

    /* Dark surface / background tokens */
    --bg-dark: #0c0c14;
    --bronze: #cd7f32;
    --accent-teal-53: rgba(77, 158, 184, 0.53);

    /* Blog gradient surface tokens */
    --soccer-blog-dark: #1a2e1a;
    --soccer-blog-light: #2d5a27;
    --tennis-blog-dark: #0c1a0c;
    --tennis-blog-clay-dark: #2a1a0c;
    --tennis-blog-clay-light: #3d2a1a;
    --tennis-blog-grass-dark: #1a1a0c;
    --tennis-blog-grass-light: #2e2e0c;
    --tennis-blog-hard-dark: #0c1a2e;
    --tennis-blog-hard-light: #1a2a3e;
    --tennis-blog-purple: #2d1b4e;
    --ufc-blog-dark: #1a0a0a;
    --ufc-blog-mid: #2a1020;
}

/* --- Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: none;         /* Firefox */
}

*::-webkit-scrollbar {
    display: none;                 /* Chrome, Safari, Edge */
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Preserve keyboard discoverability for all interactive controls. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
}

h1 {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.hero-heading {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--text-light), var(--accent-gray));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

p.subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    max-width: 600px;
}

.section-title {
    margin: 2rem 0 1rem 0;
    font-size: 1.5rem;
    border-left: 4px solid var(--secondary);
    padding-left: 1rem;
}

.card-title {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Color Utilities
   ========================================================================== */
.score-high {
    color: var(--success);
}

.score-med {
    color: var(--warning);
}

.score-low {
    color: var(--danger);
}

.good-text {
    color: var(--danger);
}

.bad-text {
    color: var(--success);
}

.winner {
    color: var(--success);
}

.loser {
    color: var(--danger);
}

/* Grade colors */
.grade-a {
    color: var(--success);
}

.grade-b {
    color: var(--alert-success-text);
}

.grade-c {
    color: var(--warning);
}

.grade-d {
    color: var(--accent-orange);
}

.grade-f {
    color: var(--danger);
}