:root {
    --color-bg: #08090b;
    --color-surface: #0e1115;
    --color-surface-raised: #15191e;
    --color-text: #f5f7fa;
    --color-text-muted: #a7adb6;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-red: #e3222d;
    --color-red-hover: #ff3540;
    --color-blue: #1479ff;
    --font-sans: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --container: 76rem;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: clamp(4.5rem, 9vw, 8rem);
    --radius-sm: 0.25rem;
    --radius-md: 0.75rem;
    --header-height: 4.75rem;
    --transition-fast: 180ms ease;
    --transition-medium: 320ms cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-header: 0 1rem 3rem rgba(0, 0, 0, 0.24);
}

@media (min-width: 64rem) {
    :root { --header-height: 5.5rem; }
}

