:root {
    --violet: hsl(257, 40%, 49%);
    --soft-magenta: hsl(300, 69%, 71%);
    --white: hsl(0, 0%, 100%);

    --base-size: 1rem;
    
    --space-xs: clamp(0.25rem, 2vw, 0.5rem);
    --space-sm: clamp(0.5rem, 3vw, 0.75rem);
    --space-md: clamp(0.75rem, 4vw, 1rem);
    --space-lg: clamp(1rem, 5vw, 1.5rem);
    --space-xl: clamp(1.5rem, 6vw, 2rem);
    --space-xxl: clamp(2rem, 7vw, 2.5rem);

    --font-size-heading: clamp(1.4rem, 6vw, 2.5rem);
    --font-size-heading-tablet: clamp(1.8rem, 4.5vw, 2rem);
    --font-size-heading-desktop: clamp(2rem, 5vw, 2rem);
    --font-size-btn: clamp(0.8rem, 3vw, 1rem);
    --font-size-attribution: clamp(0.7rem, 2.5vw, 0.75rem);

    --logo-width: clamp(7rem, 25vw, 12rem);
    --btn-padding-vertical: clamp(0.7rem, 3vw, 1rem);
    --btn-padding-horizontal: clamp(5rem, 12vw, 6rem);
    --btn-border-radius: clamp(1.5rem, 5vw, 2rem);
    --social-icon-size: clamp(1.8rem, 6vw, 2.5rem);

    --container-max-width: 100%;
    --illustration-ratio: 1;

    --btn-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}