:root {
    /* --- Colors --- */
    --bg: #101010;
    --bg-alt: #000000;
    --bg-glass: rgba(16, 16, 16, 0.85);
    
    --text: #ffffff;
    --text-dim: #a3a3a3;
    --text-muted: #d1d1d1;
    
    --accent: #bafa77;
    --accent-dim: #97cc60;
    --gradient: linear-gradient(90deg, #01aef0 0%, #d42672 50%, #f8ec1d 100%);
    
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-border-hover: rgba(255, 255, 255, 0.2);

    /* --- Spacing Scale --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* --- Typography --- */
    --font-main: 'Geist', sans-serif;
    --font-mono: 'Geist Mono', monospace;
    --font-display: 'PP Monument Extended Black', sans-serif;

    /* Mobile (Default) */
    --fs-hero: 48px;
    --fs-section: 32px;
    --fs-h3: 24px;
    --fs-base: 16px;
    --fs-sm: 14px;
    --fs-xs: 12px;

    /* Desktop (Overridden in main.css) */
    --fs-hero-dt: 80px;
    --fs-section-dt: 48px;
    --fs-h3-dt: 28px;

    --lh-tight: 1.1;
    --lh-base: 1.5;
    --lh-loose: 1.7;

    /* --- Layout --- */
    --container-max: 1280px;
    --text-max: 680px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* --- Animation --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 0.3s var(--ease-out);
    --transition-fast: 0.15s var(--ease-out);
}