/* ======================================
FONT WEIGHT UTILITIES
====================================== */


:root {
    --Font-Family-type-family-primary: "figtree", "Figtree", sans-serif;
    --header-font: "figtree", "Figtree", sans-serif;
}

body {
    font-family: var(--Font-Family-type-family-primary);
}



/* ======================================
DISPLAY
Figma: Display / ExtraBold
====================================== */

.text-display {
    font-size: var(--Font-Size-type-size-display);
    line-height: var(--Line-Height-type-lh-display);
    font-weight: var(--Font-Weight-type-weight-extra-bold-800);
}

/* ======================================
H1
Figma: Heading/H1 - 700
====================================== */

h1,
.text-heading-h1 {
    font-size: var(--Font-Size-type-size-heading-h1);
    line-height: var(--Line-Height-type-lh-heading-h1);
    font-weight: var(--Font-Weight-type-weight-bold-700);
}

/* ======================================
H2
Figma: SubHeading/H2 - 600
====================================== */

h2,
.text-heading-h2 {
    font-size: var(--Font-Size-type-size-sub-heading-h2);
    line-height: var(--Line-Height-type-lh-sub-heading-h2);
    font-weight: var(--Font-Weight-type-weight-semi-bold-600);
}

.text-title-h2 {
    font-size: var(--Font-Size-type-size-sub-heading-h2);
    line-height: var(--Line-Height-type-lh-sub-heading-h2);
    font-weight: var(--Font-Weight-type-weight-bold-700);
}

/* ======================================
H3
Figma: Title/H3 - 700
====================================== */

h3,
.text-title-h3 {
    font-size: var(--Font-Size-type-size-title-h3);
    line-height: var(--Line-Height-type-lh-title-h3);
    font-weight: var(--Font-Weight-type-weight-bold-700);
}

/* ======================================
H4
Figma: SubTitle/H4 - 600
====================================== */

h4,
.text-title-h4 {
    font-size: var(--Font-Size-type-size-sub-title-h4);
    line-height: var(--Line-Height-type-lh-sub-title-h4);
    font-weight: var(--Font-Weight-type-weight-semi-bold-600);
}

/* ======================================
BODY
Figma: Body/P1 - 500
====================================== */

.text-body-p1 {
    font-size: var(--Font-Size-type-size-body-p1);
    line-height: var(--Line-Height-type-lh-body-p1);
    font-weight: var(--Font-Weight-type-weight-medium-500);
}

/* ======================================
LABEL
Figma: Label/Medium - 500
====================================== */

.text-label {
    font-size: var(--Font-Size-type-size-label);
    line-height: var(--Line-Height-type-lh-label);
    font-weight: var(--Font-Weight-type-weight-medium-500);
}


/* ======================================
CAPTION
Figma: Caption/Medium - 500
====================================== */

.text-caption {
    font-size: var(--Font-Size-type-size-caption);
    line-height: var(--Line-Height-type-lh-caption);
    font-weight: var(--Font-Weight-type-weight-medium-500);
}


.main-heading {
    /* Title _H3/Bold - 700 */
    font-family: var(--Font-Family-type-family-primary);
    font-size: var(--Line-Height-type-lh-sub-title-h4);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Line-Height-type-lh-title-h3);
    /* 130% */
}
/* ======================================
WITHOUT FONT WEIGHT, LETTER SPACING and CAPITALIZE
====================================== */

.text-normal {
     font-size: var(--Font-Size-type-size-label);
    line-height: var(--Line-Height-type-lh-label)
}
.text-spacing {
    letter-spacing: var(--Letter-Spacing-type-spacing-label);
}
.capitalize {
    text-transform: capitalize;
}
.uppercase {
    text-transform: uppercase;
}

/* Keep legacy 404 template proportions when global heading tokens are active */
.error404 .container-404 h2 {
    line-height: 1.4;
}

.error404 .container-404 h3 {
    line-height: 1.25;
}

.error404 .container-404 h4 {
    line-height: 1.4;
}

@media (max-width: 767px) {
    :root {
        --Font-Size-type-size-heading-h1: 24px;
        --Line-Height-type-lh-heading-h1: 32px;
        --Font-Size-type-size-sub-heading-h2: 20px;
        --Line-Height-type-lh-sub-heading-h2: 26px;
        --Font-Size-type-size-title-h3:16px;
        --Line-Height-type-lh-title-h3: 20px;
        --Font-Size-type-size-sub-title-h4: 14px;
        --Line-Height-type-lh-sub-title-h4: 18px;
        --Font-Size-type-size-label: 12px;
        --Line-Height-type-lh-label: 16px;
        --Font-Size-type-size-caption: 10px;
        --Line-Height-type-lh-caption: 13px;
        --Font-Size-type-size-body-p1: 16px;
        --Line-Height-type-lh-body-p1: 24px;
    }
}