:root {
    /* Colors */
    --color-black: #000000;
    --color-dark: #141414;
    --color-dark-alt: #1e1e1e;
    --color-dark-muted: #2d2d2d;
    --color-gray: #a6a6a6;
    --color-light-gray: #d9d9d9;
    --color-border: #dddddd;
    --color-accent: #eb3544;
    --color-white: #ffffff;

    /* Fonts */
    --font-primary: 'Helvetica', 'Arial', sans-serif;
    --font-secondary: 'Inter', sans-serif;

    /*
     * Fluid Font Sizes — scales proportionally from 1920px Figma canvas.
     * Formula: clamp(min, figma_px / 1920 * 100vw, figma_px)
     */
    --text-sm:   clamp(14px, 1.04vw, 20px);
    --text-base: clamp(16px, 1.25vw, 24px);
    --text-25:   clamp(16px, 1.30vw, 25px);
    --text-27:   clamp(17px, 1.40vw, 27px);
    --text-md:   clamp(18px, 1.56vw, 30px);
    --text-33:   clamp(20px, 1.72vw, 33px);
    --text-35:   clamp(20px, 1.82vw, 35px);
    --text-lg:   clamp(22px, 2.08vw, 40px);
    --text-45:   clamp(24px, 2.34vw, 45px);
    --text-46:   clamp(24px, 2.40vw, 46px);
    --text-xl:   clamp(26px, 2.60vw, 50px);
    --text-2xl:  clamp(28px, 3.13vw, 60px);
    --text-3xl:  clamp(32px, 3.65vw, 70px);
    --text-4xl:  clamp(36px, 5.47vw, 105px);
    --text-5xl:  clamp(36px, 6.25vw, 120px);
    --text-hero: clamp(40px, 8.33vw, 160px);

    /* Fluid Spacing */
    --spacing-xs:  clamp(4px, 0.42vw, 8px);
    --spacing-sm:  clamp(10px, 0.83vw, 16px);
    --spacing-md:  clamp(16px, 1.25vw, 24px);
    --spacing-lg:  clamp(24px, 2.08vw, 40px);
    --spacing-xl:  clamp(36px, 3.13vw, 60px);
    --spacing-2xl: clamp(48px, 4.17vw, 80px);
    --spacing-3xl: clamp(64px, 6.25vw, 120px);

    /* Border Radius */
    --radius-sm: 6px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* Container */
    --container-max: 1800px;
    --container-padding: clamp(16px, 3.13vw, 60px);
}

/* Mobile overrides */
@media (max-width: 768px) {
    :root {
        --text-5xl:  32px;
        --text-hero: 32px;
        --text-4xl:  28px;
        --text-3xl:  26px;
        --text-2xl:  24px;
        --text-xl:   22px;
        --text-45:   20px;
        --text-46:   20px;
        --text-lg:   20px;
        --text-35:   18px;
        --text-33:   18px;
        --text-md:   17px;
        --text-base: 16px;
        --text-sm:   14px;
    }
}