/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-white: #FFFFFF;
  --primitive-color-black: #000000;
  --primitive-color-ink-50: #F4F5F8;
  --primitive-color-ink-100: #E4E6EC;
  --primitive-color-ink-200: #C7CBD6;
  --primitive-color-ink-300: #9AA0B2;
  --primitive-color-ink-400: #6C7488;
  --primitive-color-ink-500: #484F63;
  --primitive-color-ink-600: #2E3446;
  --primitive-color-ink-700: #1B2033;
  --primitive-color-ink-800: #111528;
  --primitive-color-ink-900: #0A0A23;
  --primitive-color-ink-950: #050515;
  --primitive-color-gray-50: #FAFBFC;
  --primitive-color-gray-100: #F2F4F7;
  --primitive-color-gray-200: #E7EAF0;
  --primitive-color-gray-300: #DBDFE7;
  --primitive-color-gray-400: #C2C8D4;
  --primitive-color-gray-500: #98A0B0;
  --primitive-color-gray-600: #6B7484;
  --primitive-color-gray-700: #4A5261;
  --primitive-color-gray-800: #333A47;
  --primitive-color-gray-900: #1F2530;
  --primitive-color-blue-50: #ECF1FF;
  --primitive-color-blue-100: #D6E1FF;
  --primitive-color-blue-200: #AEC3FF;
  --primitive-color-blue-300: #7C9CFF;
  --primitive-color-blue-400: #4E77FF;
  --primitive-color-blue-500: #2C5BFF;
  --primitive-color-blue-600: #0047FF;
  --primitive-color-blue-700: #0038CC;
  --primitive-color-blue-800: #002C9E;
  --primitive-color-blue-900: #001C66;
  --primitive-color-volt-50: #F2FEE6;
  --primitive-color-volt-100: #E2FCC6;
  --primitive-color-volt-300: #B6F778;
  --primitive-color-volt-400: #95F23F;
  --primitive-color-volt-500: #74F125;
  --primitive-color-volt-600: #54CE0C;
  --primitive-color-volt-700: #3F9E0A;
  --primitive-color-purple-100: #EBE1FF;
  --primitive-color-purple-400: #A97CFF;
  --primitive-color-purple-500: #9747FF;
  --primitive-color-purple-600: #7B29E8;
  --primitive-color-green-100: #D7F5E3;
  --primitive-color-green-500: #17B26A;
  --primitive-color-green-600: #0E9155;
  --primitive-color-amber-100: #FDECCB;
  --primitive-color-amber-500: #F5A623;
  --primitive-color-amber-600: #D5850B;
  --primitive-color-red-100: #FBDAD7;
  --primitive-color-red-500: #F0342B;
  --primitive-color-red-600: #E10600;
  --primitive-color-red-700: #B70600;
  --primitive-color-series-f1: #E10600;
  --primitive-color-series-f2: #0090D0;
  --primitive-color-series-f3: #7A7D82;
  --primitive-color-series-formulae: #7C3AED;
  --primitive-color-series-wec: #00B2A9;
  --primitive-color-series-imsa: #FF6B00;
  --primitive-color-series-indycar: #1E4B8F;
  --primitive-color-series-nascar: #F5C400;
  --primitive-color-series-motogp: #A6001E;
  --primitive-color-series-wrc: #00843D;
  --primitive-spacing-0: 0;
  --primitive-spacing-1: 0.25rem;
  --primitive-spacing-2: 0.5rem;
  --primitive-spacing-3: 0.75rem;
  --primitive-spacing-4: 1rem;
  --primitive-spacing-5: 1.25rem;
  --primitive-spacing-6: 1.5rem;
  --primitive-spacing-8: 2rem;
  --primitive-spacing-10: 2.5rem;
  --primitive-spacing-12: 3rem;
  --primitive-spacing-16: 4rem;
  --primitive-spacing-20: 5rem;
  --primitive-spacing-24: 6rem;
  --primitive-spacing-32: 8rem;
  --primitive-spacing-px: 1px;
  --primitive-fontFamily-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --primitive-fontFamily-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --primitive-fontFamily-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --primitive-fontSize-3xs: 0.625rem;
  --primitive-fontSize-2xs: 0.6875rem;
  --primitive-fontSize-xs: 0.75rem;
  --primitive-fontSize-sm: 0.875rem;
  --primitive-fontSize-base: 1rem;
  --primitive-fontSize-lg: 1.125rem;
  --primitive-fontSize-xl: 1.25rem;
  --primitive-fontSize-2xl: 1.5rem;
  --primitive-fontSize-3xl: 1.875rem;
  --primitive-fontSize-4xl: 2.5rem;
  --primitive-fontSize-5xl: 3.25rem;
  --primitive-fontSize-6xl: 4.25rem;
  --primitive-fontSize-7xl: 5.5rem;
  --primitive-fontWeight-regular: 400;
  --primitive-fontWeight-medium: 500;
  --primitive-fontWeight-semibold: 600;
  --primitive-fontWeight-bold: 700;
  --primitive-fontWeight-extrabold: 800;
  --primitive-fontWeight-black: 900;
  --primitive-lineHeight-none: 1;
  --primitive-lineHeight-tight: 1.1;
  --primitive-lineHeight-snug: 1.25;
  --primitive-lineHeight-normal: 1.5;
  --primitive-lineHeight-relaxed: 1.65;
  --primitive-letterSpacing-tighter: -0.02em;
  --primitive-letterSpacing-tight: -0.01em;
  --primitive-letterSpacing-normal: 0em;
  --primitive-letterSpacing-wide: 0.02em;
  --primitive-letterSpacing-wider: 0.06em;
  --primitive-letterSpacing-widest: 0.14em;
  --primitive-radius-none: 0;
  --primitive-radius-sm: 2px;
  --primitive-radius-md: 4px;
  --primitive-radius-lg: 8px;
  --primitive-radius-xl: 14px;
  --primitive-radius-pill: 999px;
  --primitive-borderWidth-hairline: 1px;
  --primitive-borderWidth-thick: 2px;
  --primitive-borderWidth-heavy: 3px;
  --primitive-shadow-none: none;
  --primitive-shadow-sm: 0 1px 2px rgba(10, 10, 35, 0.06);
  --primitive-shadow-md: 0 4px 12px rgba(10, 10, 35, 0.08);
  --primitive-shadow-lg: 0 12px 32px rgba(10, 10, 35, 0.12);
  --primitive-shadow-focus: 0 0 0 3px rgba(0, 71, 255, 0.35);
  --primitive-duration-instant: 80ms;
  --primitive-duration-fast: 120ms;
  --primitive-duration-normal: 200ms;
  --primitive-duration-slow: 320ms;
  --primitive-duration-deliberate: 500ms;
  --primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --primitive-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --primitive-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --primitive-container-sm: 640px;
  --primitive-container-md: 768px;
  --primitive-container-lg: 1024px;
  --primitive-container-xl: 1200px;
  --primitive-container-2xl: 1440px;
}

/* === SEMANTIC === */
:root {
  --color-canvas: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #FAFBFC;
  --color-surface-muted: #F2F4F7;
  --color-surface-inverse: #0A0A23;
  --color-text: #0A0A23;
  --color-text-muted: #6C7488;
  --color-text-subtle: #9AA0B2;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #0047FF;
  --color-border: #E7EAF0;
  --color-border-strong: #0A0A23;
  --color-border-interactive: #0047FF;
  --color-primary: #0047FF;
  --color-primary-hover: #0038CC;
  --color-primary-active: #002C9E;
  --color-primary-subtle: #ECF1FF;
  --color-on-primary: #FFFFFF;
  --color-accent: #74F125;
  --color-accent-hover: #54CE0C;
  --color-accent-subtle: #F2FEE6;
  --color-on-accent: #0A0A23;
  --color-focus-ring: #2C5BFF;
  --color-success: #17B26A;
  --color-success-subtle: #D7F5E3;
  --color-warning: #F5A623;
  --color-warning-subtle: #FDECCB;
  --color-danger: #E10600;
  --color-danger-subtle: #FBDAD7;
  --color-live: #E10600;
  --spacing-gutter: 1rem;
  --spacing-component: 1rem;
  --spacing-stack: 1.5rem;
  --spacing-section: 5rem;
  --spacing-page-margin: 1.5rem;
  --typography-eyebrow-size: 0.6875rem;
  --typography-eyebrow-tracking: 0.14em;
  --typography-display-family: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --typography-display-weight: 800;
  --typography-display-tracking: -0.01em;
  --typography-heading-family: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --typography-heading-weight: 700;
  --typography-body-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --typography-body-size: 1rem;
  --typography-body-line: 1.5;
  --typography-data-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-control: 2px;
  --radius-card: 4px;
  --radius-surface: 8px;
  --radius-pill: 999px;
  --elevation-flat: none;
  --elevation-raised: 0 1px 2px rgba(10, 10, 35, 0.06);
  --elevation-overlay: 0 4px 12px rgba(10, 10, 35, 0.08);
  --elevation-modal: 0 12px 32px rgba(10, 10, 35, 0.12);
  --motion-hover-duration: 120ms;
  --motion-enter-duration: 200ms;
  --motion-enter-easing: cubic-bezier(0, 0, 0.2, 1);
  --motion-exit-easing: cubic-bezier(0.4, 0, 1, 1);
}

/* === COMPONENTS === */
:root {
  --button-font-family: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --button-font-weight: 700;
  --button-font-size: 0.875rem;
  --button-tracking: 0.06em;
  --button-radius: 2px;
  --button-padding-x: 1.25rem;
  --button-padding-y: 0.75rem;
  --button-height: 2.75rem;
  --button-primary-bg: #0047FF;
  --button-primary-bg-hover: #0038CC;
  --button-primary-bg-active: #002C9E;
  --button-primary-fg: #FFFFFF;
  --button-secondary-bg: #FFFFFF;
  --button-secondary-fg: #0A0A23;
  --button-secondary-border: #0A0A23;
  --button-ghost-fg: #0047FF;
  --button-disabled-bg: #E7EAF0;
  --button-disabled-fg: #98A0B0;
  --race-card-bg: #FFFFFF;
  --race-card-border: #E7EAF0;
  --race-card-border-hover: #0A0A23;
  --race-card-radius: 4px;
  --race-card-padding: 1.25rem;
  --race-card-shadow-hover: 0 4px 12px rgba(10, 10, 35, 0.08);
  --race-card-accent-bar-width: 3px;
  --race-card-round-label-size: 0.6875rem;
  --race-card-name-size: 1.25rem;
  --race-card-name-weight: 800;
  --race-card-meta-size: 0.875rem;
  --series-badge-font-family: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --series-badge-font-size: 0.6875rem;
  --series-badge-font-weight: 700;
  --series-badge-tracking: 0.06em;
  --series-badge-radius: 2px;
  --series-badge-padding-x: 0.5rem;
  --series-badge-padding-y: 0.25rem;
  --countdown-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --countdown-digit-size: 1.875rem;
  --countdown-digit-weight: 700;
  --countdown-digit-color: #0A0A23;
  --countdown-label-size: 0.625rem;
  --countdown-label-color: #6C7488;
  --countdown-label-tracking: 0.14em;
  --status-pill-radius: 999px;
  --status-pill-font-size: 0.6875rem;
  --status-pill-font-weight: 700;
  --status-pill-tracking: 0.02em;
  --status-pill-padding-x: 0.5rem;
  --status-pill-padding-y: 0.25rem;
  --status-pill-live-bg: #E10600;
  --status-pill-live-fg: #FFFFFF;
  --status-pill-upcoming-bg: #ECF1FF;
  --status-pill-upcoming-fg: #0038CC;
  --status-pill-done-bg: #F2F4F7;
  --status-pill-done-fg: #6C7488;
  --filter-chip-radius: 999px;
  --filter-chip-font-size: 0.875rem;
  --filter-chip-font-weight: 600;
  --filter-chip-padding-x: 1rem;
  --filter-chip-padding-y: 0.5rem;
  --filter-chip-idle-bg: #FFFFFF;
  --filter-chip-idle-fg: #6C7488;
  --filter-chip-idle-border: #E7EAF0;
  --filter-chip-active-bg: #0A0A23;
  --filter-chip-active-fg: #FFFFFF;
  --nav-height: 4rem;
  --nav-bg: #FFFFFF;
  --nav-border: #E7EAF0;
  --nav-link-family: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --nav-link-size: 0.875rem;
  --nav-link-weight: 700;
  --nav-link-tracking: 0.06em;
  --nav-link-fg: #0A0A23;
  --nav-link-fg-hover: #0047FF;
  --nav-indicator: #0047FF;
  --table-header-bg: #0A0A23;
  --table-header-fg: #FFFFFF;
  --table-header-size: 0.6875rem;
  --table-header-tracking: 0.06em;
  --table-row-border: #E7EAF0;
  --table-row-hover-bg: #FAFBFC;
  --table-cell-padding-x: 1rem;
  --table-cell-padding-y: 0.75rem;
  --table-numeric-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --input-bg: #FFFFFF;
  --input-fg: #0A0A23;
  --input-border: #0A0A23;
  --input-placeholder: #9AA0B2;
  --input-radius: 2px;
  --input-padding-x: 1rem;
  --input-padding-y: 0.75rem;
  --input-focus-ring: 0 0 0 3px rgba(0, 71, 255, 0.35);
}

/* === DARK MODE === */
.dark {
  --color-canvas: #050515;
  --color-surface: #0A0A23;
  --color-surface-subtle: #111528;
  --color-surface-muted: #1B2033;
  --color-surface-inverse: #FFFFFF;
  --color-text: #FAFBFC;
  --color-text-muted: #9AA0B2;
  --color-text-subtle: #6C7488;
  --color-text-inverse: #0A0A23;
  --color-border: #1B2033;
  --color-border-strong: #FAFBFC;
  --color-primary: #4E77FF;
  --color-primary-hover: #7C9CFF;
  --color-on-primary: #050515;
  --color-primary-subtle: #001C66;
}