/* Design tokens - the whole palette, type scale and layout metrics.
   Light values on :root, dark twice: once for the OS preference (unless the visitor forced
   light) and once for an explicit data-theme="dark". The explicit block MUST stay last -
   both have the same specificity, so it only wins by source order. _Layout's pre-paint
   script sets data-theme from localStorage['rlag-theme']. Owned by everyone: talk first. */

:root {
    --blue: #007AFF;
    --red: #FF3B30;
    --green: #248A3D;
    --bg: #F4F5F8;
    --surface: #FFFFFF;
    --surface-2: #EDEFF4;
    --ink: #14171F;
    --ink-soft: #3A404C;
    --muted: #6B7280;
    --border: #D7DBE3;
    --grid-line: rgba(20, 23, 31, 0.045);
    --pole-glow: rgba(255, 59, 48, 0.20);
    --shadow: 0 1px 2px rgba(20, 23, 31, .05), 0 4px 14px rgba(20, 23, 31, .05);
    --shadow-lg: 0 8px 30px rgba(20, 23, 31, .10);

    /* Race videos. Brand red/blue as small text or under white text fall short of 4.5:1, so the
       video screens use these darker inks; the rest of the site is unchanged for now. */
    --red-strong: #D92D20;
    --red-ink: #B42318;
    --blue-ink: #0066D6;
    --green-ink: #1E7A35;
    --amber-ink: #8A3F00;
    --amber-bg: #FFF4E5;
    --amber-line: #F5C98A;
    --thumb-bg: #1B1E26;

    --track-bg: #E7E8EC;
    --track-line: #1B1E26;
    --slot-fill: rgba(255, 255, 255, 0.6);
    --rumble-white: #F5F5F7;

    --shell: 72rem;
    --gutter: 1.5rem;
    --header-h: 4.25rem;

    --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --blue: #0A84FF;
        --red: #FF453A;
        --green: #30D158;
        --bg: #0B0D13;
        --surface: #12151D;
        --surface-2: #191D28;
        --ink: #F1F3F8;
        --ink-soft: #C8CCD6;
        --muted: #8A93A3;
        --border: #262B37;
        --grid-line: rgba(255, 255, 255, 0.05);
        --pole-glow: rgba(255, 69, 58, 0.30);
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
        --shadow-lg: 0 10px 34px rgba(0, 0, 0, .5);
        --track-bg: #23262E;
        --track-line: #EEF1F6;
        --slot-fill: rgba(255, 255, 255, 0.055);
        --rumble-white: #E9E9EC;
        --red-strong: #D92D20;
        --red-ink: #FF7A70;
        --blue-ink: #5AB0FF;
        --green-ink: #4ADE80;
        --amber-ink: #FBBF6B;
        --amber-bg: rgba(251, 191, 107, .10);
        --amber-line: rgba(251, 191, 107, .35);
        --thumb-bg: #050608;
    }
}

:root[data-theme="dark"] {
    --blue: #0A84FF;
    --red: #FF453A;
    --green: #30D158;
    --bg: #0B0D13;
    --surface: #12151D;
    --surface-2: #191D28;
    --ink: #F1F3F8;
    --ink-soft: #C8CCD6;
    --muted: #8A93A3;
    --border: #262B37;
    --grid-line: rgba(255, 255, 255, 0.05);
    --pole-glow: rgba(255, 69, 58, 0.30);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-lg: 0 10px 34px rgba(0, 0, 0, .5);
    --track-bg: #23262E;
    --track-line: #EEF1F6;
    --slot-fill: rgba(255, 255, 255, 0.055);
    --rumble-white: #E9E9EC;
    --red-strong: #D92D20;
    --red-ink: #FF7A70;
    --blue-ink: #5AB0FF;
    --green-ink: #4ADE80;
    --amber-ink: #FBBF6B;
    --amber-bg: rgba(251, 191, 107, .10);
    --amber-line: rgba(251, 191, 107, .35);
    --thumb-bg: #050608;
}