:root {
    /* Colors: dark first, hot amber accent for a motorsport read */
    --color-bg: #08090b;
    --color-bg-gradient: linear-gradient(180deg, #101317 0%, #08090b 100%);
    --color-surface: rgba(255, 255, 255, 0.05);
    --color-surface-hover: rgba(255, 255, 255, 0.08);
    --color-border: rgba(255, 255, 255, 0.12);
    --color-text: #f4f5f7;
    --color-text-secondary: rgba(244, 245, 247, 0.62);
    --color-text-tertiary: rgba(244, 245, 247, 0.35);
    --color-accent: #FF5A1F;
    --color-accent-hover: #E04409;
    --color-accent-contrast: #ffffff;
    --color-success: #34C759;
    --color-error: #FF453A;
    --color-nav-bg: rgba(8, 9, 11, 0.85);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;

    /* Layout */
    --max-width: 1040px;
    --max-width-narrow: 720px;
    --nav-height: 56px;
    --border-radius: 16px;
    --border-radius-sm: 12px;

    /* Effects */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --blur-nav: saturate(180%) blur(20px);
}

@media (prefers-color-scheme: light) {
    :root {
        --color-bg: #ffffff;
        --color-bg-gradient: linear-gradient(180deg, #f6f7f9 0%, #ffffff 100%);
        --color-surface: rgba(0, 0, 0, 0.03);
        --color-surface-hover: rgba(0, 0, 0, 0.06);
        --color-border: rgba(0, 0, 0, 0.1);
        --color-text: #16181c;
        --color-text-secondary: rgba(22, 24, 28, 0.62);
        --color-text-tertiary: rgba(22, 24, 28, 0.35);
        --color-accent: #E04409;
        --color-accent-hover: #B83606;
        --color-accent-contrast: #ffffff;
        --color-success: #248A3D;
        --color-error: #D70015;
        --color-nav-bg: rgba(255, 255, 255, 0.72);
    }
}