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

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800&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;
    --f1-green:       #18C37E !important;
    --f1-amber:       #FFB300 !important;
    --bg-root:        #0B0E14 !important;
    --bg-shell:       #10141D !important;
    --bg-surface:     #151821 !important;
    --bg-card:        #1A1E2A !important;
    --bg-card-alt:    #1F2436 !important;
    --bg-elevated:    #242A3A !important;
    --bg-highlight:   rgba(225, 6, 0, 0.06) !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;
    --border-strong:  rgba(148, 152, 168, 0.28) !important;
    --accent-structural: rgba(148, 152, 168, 0.22) !important;

    /* Typography */
    --font-sans:  'Space Grotesk', '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-data: 1.02rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-display: 1.35rem;

    /* 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;

    /* Layout */
    --content-max: 1240px;
    --masthead-max: 1320px;

    /* Broadcast redesign tokens */
    --bc-bg:        #0A0A0A;
    --bc-bg-1:      #121212;
    --bc-bg-2:      #1B1B1B;
    --bc-bg-3:      #262626;
    --bc-bg-4:      #313137;
    --bc-text:      #FFFFFF;
    --bc-text-2:    #A0A0A0;
    --bc-text-3:    #5C5C5C;
    --bc-accent:    #FF2D2D;
    --bc-accent-2:  #C20000;
    --bc-yellow:    #FFEC00;
    --bc-green:     #19D080;
    --bc-line:      rgba(255,255,255,0.10);
    --bc-line-2:    rgba(255,255,255,0.06);
    --bc-density:   1;
    --bc-font-display: 'Archivo Black', 'Archivo', sans-serif;
    --bc-font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bc-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}