:root {
    --clr-black: #0a0a0a;
    --clr-dark: #111111;
    --clr-dark-gray: #1a1a1a;
    --clr-mid-gray: #2a2a2a;
    --clr-gray: #888888;
    --clr-light-gray: #cccccc;
    --clr-white: #f0f0f0;
    --clr-pure-white: #ffffff;
    --clr-accent: #c2185b;
    --clr-accent-light: #e91e6d;
    --clr-accent-dim: rgba(194, 24, 91, 0.1);

    --ff-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ff-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --fs-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --fs-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
    --fs-base: clamp(0.9rem, 0.85rem + 0.35vw, 1rem);
    --fs-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    --fs-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --fs-xl: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    --fs-2xl: clamp(2.25rem, 1.5rem + 3vw, 4rem);
    --fs-hero: clamp(2.75rem, 2rem + 4vw, 5.5rem);

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 3.5rem;
    --spacing-4xl: 5.5rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(194, 24, 91, 0.15);

    --nav-height: 60px;
    --max-width: 1200px;
    --max-width-narrow: 900px;
}

@media (max-width: 640px) {
    :root {
        --spacing-2xl: 2rem;
        --spacing-3xl: 2.25rem;
        --spacing-4xl: 3.5rem;
    }
}