:root {
    /* Typography */
    --font-heading: "Sofia Pro", sans-serif;
    --font-body: "Noto Sans", sans-serif;

    --heading-display-size: 64px;
    --heading-display-line-height: 1.1;
    --heading-display-letter-spacing: -0.02em;

    --heading-h1-size: 48px;
    --heading-h1-line-height: 1.15;
    --heading-h1-letter-spacing: -0.012em;

    --heading-h2-size: 40px;
    --heading-h2-line-height: 1.15;
    --heading-h2-letter-spacing: -0.012em;

    --heading-h3-size: 32px;
    --heading-h3-line-height: 1.25;
    --heading-h3-letter-spacing: -0.012em;

    --heading-h4-size: 24px;
    --heading-h4-line-height: 1.35;
    --heading-h4-letter-spacing: -0.012em;

    --heading-h5-size: 20px;
    --heading-h5-line-height: 1.4;
    --heading-h5-letter-spacing: -0.012em;

    --heading-h6-size: 16px;
    --heading-h6-line-height: 1.45;
    --heading-h6-letter-spacing: -0.012em;

    --eyebrow-size: 12px;
    --eyebrow-line-height: 1.6;
    --eyebrow-letter-spacing: 0.02em;

    --body-large-size: 18px;
    --body-large-line-height: 1.5;
    --body-large-letter-spacing: 0;

    --body-medium-size: 16px;
    --body-medium-line-height: 1.5;
    --body-medium-letter-spacing: 0;

    --body-small-size: 14px;
    --body-small-line-height: 1.55;
    --body-small-letter-spacing: 0;

    --body-extra-small-size: 12px;
    --body-extra-small-line-height: 1.6;
    --body-extra-small-letter-spacing: 0;

    --label-large-size: 14px;
    --label-large-line-height: 1.45;
    --label-large-letter-spacing: -0.01em;

    --label-medium-size: 14px;
    --label-medium-line-height: 1.45;
    --label-medium-letter-spacing: -0.01em;

    --label-small-size: 14px;
    --label-small-line-height: 1.45;
    --label-small-letter-spacing: -0.01em;

    --blockquote-size: 28px;
    --blockquote-line-height: 1.4;
    --blockquote-letter-spacing: 0;

    /* Colors */
    --brand-primary: #972F9C;
    --text: #111212;
}

body,
p {
    font-family: var(--font-body);
    font-size: var(--body-medium-size);
    font-weight: 400;
    line-height: var(--body-medium-line-height);
    letter-spacing: var(--body-medium-letter-spacing);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-heading);
    font-weight: 700;
}

h1,
.h1,
.heading-1 {
    font-family: var(--font-heading);
    font-size: var(--heading-h1-size);
    font-weight: 900;
    line-height: var(--heading-h1-line-height);
    letter-spacing: var(--heading-h1-letter-spacing);
}

h2,
.h2,
.heading-2 {
    font-family: var(--font-heading);
    font-size: var(--heading-h2-size);
    font-weight: 700;
    line-height: var(--heading-h2-line-height);
    letter-spacing: var(--heading-h2-letter-spacing);
}

h3,
.h3,
.heading-3 {
    font-family: var(--font-heading);
    font-size: var(--heading-h3-size);
    font-weight: 700;
    line-height: var(--heading-h3-line-height);
    letter-spacing: var(--heading-h3-letter-spacing);
}

h4,
.h4,
.heading-4 {
    font-family: var(--font-heading);
    font-size: var(--heading-h4-size);
    font-weight: 600;
    line-height: var(--heading-h4-line-height);
    letter-spacing: var(--heading-h4-letter-spacing);
}

h5,
.h5,
.heading-5 {
    font-family: var(--font-heading);
    font-size: var(--heading-h5-size);
    font-weight: 600;
    line-height: var(--heading-h5-line-height);
    letter-spacing: var(--heading-h5-letter-spacing);
}

h6,
.h6,
.heading-6 {
    font-family: var(--font-body);
    font-size: var(--heading-h6-size);
    font-weight: 600;
    line-height: var(--heading-h6-line-height);
    letter-spacing: var(--heading-h6-letter-spacing);
}

.display-large,
.heading-display,
.h0 {
    font-family: var(--font-heading);
    font-size: var(--heading-display-size);
    font-weight: 900;
    line-height: var(--heading-display-line-height);
    letter-spacing: var(--heading-display-letter-spacing);
}

.eyebrow,
.heading-eyebrow {
    font-family: var(--font-body);
    font-size: var(--eyebrow-size);
    font-weight: 400;
    line-height: var(--eyebrow-line-height);
    letter-spacing: var(--eyebrow-letter-spacing);
    text-transform: uppercase;
}

.text-large,
.body-large {
    font-family: var(--font-body);
    font-size: var(--body-large-size);
    font-weight: 400;
    line-height: var(--body-large-line-height);
    letter-spacing: var(--body-large-letter-spacing);
}

.text-medium,
.body-medium {
    font-family: var(--font-body);
    font-size: var(--body-medium-size);
    font-weight: 400;
    line-height: var(--body-medium-line-height);
    letter-spacing: var(--body-medium-letter-spacing);
}

.text-small,
.body-small {
    font-family: var(--font-body);
    font-size: var(--body-small-size);
    font-weight: 400;
    line-height: var(--body-small-line-height);
    letter-spacing: var(--body-small-letter-spacing);
}

.text-extra-small,
.body-extra-small {
    font-family: var(--font-body);
    font-size: var(--body-extra-small-size);
    font-weight: 400;
    line-height: var(--body-extra-small-line-height);
    letter-spacing: var(--body-extra-small-letter-spacing);
}

.label-large {
    font-family: var(--font-body);
    font-size: var(--label-large-size);
    font-weight: 500;
    line-height: var(--label-large-line-height);
    letter-spacing: var(--label-large-letter-spacing);
}

.label-medium {
    font-family: var(--font-body);
    font-size: var(--label-medium-size);
    font-weight: 500;
    line-height: var(--label-medium-line-height);
    letter-spacing: var(--label-medium-letter-spacing);
}

.label-small {
    font-family: var(--font-body);
    font-size: var(--label-small-size);
    font-weight: 500;
    line-height: var(--label-small-line-height);
    letter-spacing: var(--label-small-letter-spacing);
}

blockquote,
.blockquote {
    font-family: var(--font-body);
    font-size: var(--blockquote-size);
    font-weight: 300;
    line-height: var(--blockquote-line-height);
    letter-spacing: var(--blockquote-letter-spacing);
}

@media (max-width: 767px) {
    :root {
        --heading-display-size: 64px;
        --heading-display-line-height: 1.1;
        --heading-display-letter-spacing: -0.02em;

        --heading-h1-size: 48px;
        --heading-h1-line-height: 1.15;
        --heading-h1-letter-spacing: -0.012em;

        --heading-h2-size: 40px;
        --heading-h2-line-height: 1.15;
        --heading-h2-letter-spacing: -0.01em;

        --heading-h3-size: 32px;
        --heading-h3-line-height: 1.25;
        --heading-h3-letter-spacing: -0.01em;

        --heading-h4-size: 24px;
        --heading-h4-line-height: 1.35;
        --heading-h4-letter-spacing: -0.01em;

        --heading-h5-size: 20px;
        --heading-h5-line-height: 1.4;
        --heading-h5-letter-spacing: -0.01em;

        --heading-h6-size: 16px;
        --heading-h6-line-height: 1.45;
        --heading-h6-letter-spacing: -0.01em;

        --eyebrow-size: 12px;
        --eyebrow-line-height: 1.6;
        --eyebrow-letter-spacing: 0.02em;

        --body-large-size: 18px;
        --body-large-line-height: 1.5;
        --body-large-letter-spacing: 0;

        --body-medium-size: 16px;
        --body-medium-line-height: 1.5;
        --body-medium-letter-spacing: 0;

        --body-small-size: 14px;
        --body-small-line-height: 1.55;
        --body-small-letter-spacing: 0;

        --body-extra-small-size: 12px;
        --body-extra-small-line-height: 1.6;
        --body-extra-small-letter-spacing: 0;

        --label-large-size: 14px;
        --label-large-line-height: 1.45;
        --label-large-letter-spacing: -0.01em;

        --label-medium-size: 14px;
        --label-medium-line-height: 1.45;
        --label-medium-letter-spacing: -0.01em;

        --label-small-size: 14px;
        --label-small-line-height: 1.45;
        --label-small-letter-spacing: -0.01em;

        --blockquote-size: 28px;
        --blockquote-line-height: 1.4;
        --blockquote-letter-spacing: 0;
    }
}