:root {
    --font-primary: 'Sora', sans-serif;
    --font-secondary: 'RobotMono', sans-serif;

    --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    /* 72px title */
    --fs-h2: clamp(2rem, 3.5vw + 1rem, 3.06rem);
    /* 49px subtitle */
    --fs-h3: clamp(1rem, 1.5vw + 0.5rem, 1rem);
    /* 16px (Highlight) */
    --fs-h4: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
    /* 20px (Text Capitale) */
    --fs-p: clamp(0.9rem, 1vw + 0.5rem, 1.25rem);
    /* 20px (Body Text) */
    --fs-cta: clamp(1.1rem, 1.2vw + 0.5rem, 1.375rem);
    /* 22px (CTA) */
    --fs-small: clamp(0.75rem, 0.5vw + 0.7rem, 0.875rem);
    /* 14px small */
}

/* Font Faces */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../assets/fonts/sora-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../assets/fonts/sora-semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../assets/fonts/sora-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'RobotMono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../assets/fonts/robotomono-regular.woff2') format('woff2');
}

h1,
h2,
h3,
h4,
.cta,
.tag,
.menu-item,
.footer-menu,
.footer-copyright,
.reset-filter,
.sort {
    font-family: var(--font-primary);
    line-height: 1.2;
}

h1,
.menu-item {
    font-size: var(--fs-h1);
    text-transform: uppercase;
    font-weight: 700;
}

h2 {
    font-size: var(--fs-h2);
    text-transform: uppercase;
    font-weight: 700;
}

h3,
.footer-copyright {
    font-size: var(--fs-h3);
    font-weight: 700;
    text-transform: uppercase;
}

h4,
.tag,
.footer-menu,
.reset-filter,
.sort {
    font-size: var(--fs-h4);
    font-weight: 400;
    text-transform: uppercase;
}

p,
.contact-form label,
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form input,
.contact-form textarea {
    font-family: var(--font-secondary);
    font-size: var(--fs-p);
    font-weight: 400;
    line-height: 1.5;
}

.small {
    font-family: var(--font-secondary);
    font-size: var(--fs-small);
    font-weight: 400;
}

.cta,
.thank-you-message {
    font-size: var(--fs-cta);
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

@media screen and (max-width: 768px) {

    :root {
        --fs-h1: clamp(2.2rem, 10vw, 3.2rem);
        --fs-h2: clamp(1.75rem, 6vw, 2.2rem);
        --fs-h3: 1rem;
        --fs-h4: 1.125rem;
        --fs-p: 1rem;
        --fs-cta: 1.125rem;
        --fs-small: 0.813rem;
    }

    h1,
    h2,
    h3,
    h4,
    .cta,
    .tag,
    .menu-item,
    .footer-menu,
    .footer-copyright,
    .reset-filter,
    .sort {
        line-height: 1.05;
        letter-spacing: -0.02em;
    }

    p,
    .contact-form label,
    .contact-form input::placeholder,
    .contact-form textarea::placeholder,
    .contact-form input,
    .contact-form textarea {
        line-height: 1.5;
    }
}