:root {
    --text: 400 16px/1.5 var(--ff-helvetica);
    --text-xs: 300 14px/1.3 var(--ff-helvetica);
    --text-sm: 300 16px/1.5 var(--ff-helvetica);
    --text-md: 400 clamp(16px, 1.8vw, 18px)/1.5 var(--ff-helvetica);
    --text-lg: 400 clamp(16px, 2vw, 20px)/1.5 var(--ff-helvetica);
    --text-max: 400 clamp(16px, 2.2vw, 22px)/1.5 var(--ff-helvetica);

    --title: 700 clamp(20px, 2.8vw, 28px)/1.1 var(--ff-eclisse);
    --title-xs: 700 18px/1.3 var(--ff-helvetica);
    --title-sm: 700 clamp(24px, 3vw, 32px)/1.1 var(--ff-eclisse);
    --title-md: 700 clamp(28px, 4vw, 40px)/1.2 var(--ff-eclisse);
    --title-lg: 700 clamp(28px, 5vw, 56px)/1.1 var(--ff-eclisse);
    --title-max: 700 clamp(32px, 5vw, 96px)/1 var(--ff-eclisse);

    --space: clamp(18px, 2.4vw, 24px);
    --space-xs: clamp(16px, 2vw, 20px);
    --space-sm: clamp(24px, 3vw, 32px);
    --space-md: clamp(28px, 4vw, 40px);
    --space-lg: clamp(32px, 4vw, 40px);
    --space-max: clamp(32px, 4vw, 48px);

    --section-space: clamp(40px, 5vw, 56px);
    --section-space-sm: clamp(56px, 8vw, 80px);
    --section-space-md: clamp(56px, 8vw, 96px);
    --section-space-lg: clamp(56px, 8vw, 124px);

    --ff-eclisse: "Eclisse", sans-serif;
    --ff-helvetica: "Helvetica", sans-serif;
    --ff-helvetica-compressed: "Helvetica Compressed", sans-serif;
    --ff-helvetica-rounded: "Helvetica Rounded", sans-serif;

    --shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06), 0 0 64px 0 rgba(0, 0, 0, 0.03);
}