/* ===========================================
   Design Tokens & Dash Variable Overrides
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    /* Palette */
    --f1-red:         #E10600 !important;
    --f1-red-dim:     rgba(225, 6, 0, 0.12) !important;
    --f1-red-glow:    rgba(225, 6, 0, 0.25) !important;
    --f1-gold:        #D4A843 !important;
    --f1-gold-dim:    rgba(212, 168, 67, 0.12) !important;
    --f1-gold-glow:   rgba(212, 168, 67, 0.30) !important;
    --bg-root:        #0B0E14 !important;
    --bg-surface:     #151821 !important;
    --bg-card:        #1A1E2A !important;
    --bg-card-alt:    #1F2436 !important;
    --bg-elevated:    #242A3A !important;
    --text-primary:   #F0F1F4 !important;
    --text-secondary: #9498A8 !important;
    --text-muted:     #6B6F80 !important;
    --border-subtle:  rgba(148, 152, 168, 0.12) !important;
    --border-medium:  rgba(148, 152, 168, 0.20) !important;

    /* Typography */
    --font-sans:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace !important;

    /* Spacing scale (4px base) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2);
    --shadow-raised: 0 4px 20px rgba(0,0,0,0.5);

    /* Broadcast gradients */
    --gradient-header: linear-gradient(135deg, #0D1117 0%, #151821 50%, #1A1020 100%);
    --gradient-panel: linear-gradient(180deg, var(--bg-card), var(--bg-surface));

    /* Position badge colors */
    --pos-gold: #D4A843;
    --pos-silver: #C0C0C0;
    --pos-bronze: #CD7F32;

    /* Typography scale */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Dash overrides */
    --Dash-Spacing: 4px !important;
    --Dash-Stroke-Strong: #6B6F80 !important;
    --Dash-Stroke-Weak: #3A3F52 !important;
    --Dash-Fill-Interactive-Strong: var(--f1-red) !important;
    --Dash-Fill-Interactive-Weak: var(--bg-card) !important;
    --Dash-Fill-Inverse-Strong: var(--bg-surface) !important;
    --Dash-Text-Primary: var(--text-primary) !important;
    --Dash-Text-Strong: var(--text-primary) !important;
    --Dash-Text-Weak: var(--text-secondary) !important;
    --Dash-Text-Disabled: var(--text-muted) !important;
    --Dash-Fill-Primary-Hover: var(--f1-red-dim) !important;
    --Dash-Fill-Primary-Active: var(--f1-red) !important;
    --Dash-Fill-Disabled: #2A2F42 !important;
    --Dash-Shading-Strong: rgba(0, 0, 0, 0.5) !important;
    --Dash-Shading-Weak: rgba(0, 0, 0, 0.3) !important;
}