:root {
    
    --color-brand-primary: #163A66;
    --color-brand-primary-hover: #245C91;
    --color-brand-primary-active: #0E2745;
    --color-brand-primary-contrast: #FFFFFF;

    --color-breaking: #B13A2E;
    --color-breaking-hover: #8F2B22;
    --color-breaking-contrast: #ffffff;

    --color-live: #B13A2E;
    --color-sport: #B13A2E;
    --color-sport-contrast: #FFFFFF;
    --color-local: #163A66;

    --color-background: #F5F7FA;
    --color-surface: #FFFFFF;
    --color-surface-muted: #EEF2F6;
    --color-text-primary: #132132;
    --color-text-secondary: #5C6B7A;
    --color-text-muted: #687789;
    --color-border: #D7DEE8;
    --color-border-dark: #163A66;
    --color-focus: #245C91;
    --color-header-bg: #102A4C;
    --color-footer-bg: #102A4C;

    --color-success: #16803c;
    --color-warning: #b54708;
    --color-danger: #B13A2E;
    --color-info: #175cd3;

    
    --font-family-base: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --font-size-display: clamp(1.75rem, 4vw, 2.5rem);
    --font-size-h1: clamp(1.5rem, 3vw, 2.125rem);
    --font-size-h2: clamp(1.25rem, 2.5vw, 1.625rem);
    --font-size-h3: clamp(1.05rem, 2vw, 1.25rem);
    --font-size-body-lg: 1.125rem;
    --font-size-body: 1rem;
    --font-size-body-sm: 0.875rem;
    --font-size-caption: 0.75rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 900;

    --line-height-heading: 1.25;
    --line-height-body: 1.65;
    --line-height-compact: 1.35;

    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 2px 6px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
    --shadow-overlay: 0 20px 40px rgba(0, 0, 0, 0.25);

    
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

    
    --touch-target-min: 44px;
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);

    
    --container-max-width: 1280px;
    --header-topbar-height: 38px;
    --header-main-height: 72px;
}


[data-theme="dark"] {
    --color-background: #081A2F;
    --color-surface: #102A4C;
    --color-surface-muted: #0B213B;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #D7DEE8;
    --color-text-muted: #cbd5e1;
    --color-border: #2D4B70;
    --color-border-dark: #B13A2E;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
}