:root {
    /* Colors */
    --color-brown: #32130a;
    --color-red: #ff2b00;
    --color-pink: #ffc4cc;

    /* Typefaces */
    --font-titling: "Merca", sans-serif;
    --font-copy: "Merca", sans-serif;

    /* Typography */
    --tracking: 0.01em;
    --text-upper: uppercase;

    /* Fluid type scale (360px to 1440px viewport) */
    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
    --text-xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
    --text-2xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
    --text-3xl: clamp(3.5rem, 2.2rem + 6.5vw, 8rem);
    --text-4xl: clamp(5rem, 2.5rem + 12.5vw, 14rem);

    /* Line heights */
    --leading-tight: 0.9;
    --leading-snug: 1.1;
    --leading-normal: 1.3;

    /* Spacing scale (4px base, fluid at larger steps) */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --space-lg: clamp(2rem, 1.6rem + 2vw, 3rem);
    --space-xl: clamp(3rem, 2.2rem + 4vw, 5rem);
    --space-2xl: clamp(4rem, 2.8rem + 6vw, 8rem);
    --space-3xl: clamp(6rem, 3.6rem + 12vw, 12rem);

    /* Layout */
    --gutter: var(--space-md);
    --page-padding: var(--space-md);
    --logo-width: clamp(100px, 10vw, 200px);
}