/* =========================================
   GLOBAL FONTS VARIABLES — single source of truth
   Update values here only. Never hardcode fonts
   anywhere else in the codebase.
========================================= */

/* Font Family */
:root {
    --primary-font: "Google Sans Flex", sans-serif;
    --secondary-font: "Inter", sans-serif;
}

/* Font Weights */
.font-regular{font-weight: 400 !important;}
.font-medium{font-weight: 500 !important;}
.font-semibold{font-weight: 600 !important;}
.font-bold{font-weight: 700 !important;}

/************************** Global Typography **************************/

/* Primary Fonts */
.display-xl {
    font-family: var(--primary-font);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.4px;
}
.display-l {
    font-family: var(--primary-font);
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.36px;
}
.display-h1 {
    font-family: var(--primary-font);
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.32px;
}
.display-h2 {
    font-family: var(--primary-font);
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.26px;
}
.display-h3 {
    font-family: var(--primary-font);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.24px;
}

/* Secondary Fonts */
.display-h4 {
    font-family: var(--secondary-font);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.22px;
}
.text-xl {
    font-family: var(--secondary-font);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.20px;
}
.text-lg {
    font-family: var(--secondary-font);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.18px;
}
.text-body {
    font-family: var(--secondary-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.16px;
}
.text-body-medium {
    font-family: var(--secondary-font);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.14px;
}
.text-label {
    font-family: var(--secondary-font);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.12px;
}

/* Nav & Mega Menu */
.nav-link {
    font-family: var(--secondary-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.16px;
}
.mega_menu_heading {
    color: var(--text-muted);
    font-family: var(--secondary-font);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.92px;
    text-transform: uppercase;
}

/* Footer Fonts */
.footer-heading{
    color: var(--text-disabled);
    font-family: var(--secondary-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.footer-link{
    font-family: var(--secondary-font);
    color: var(--text-muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}
.footer-blurb{
    color: var(--text-muted);
    font-family: var(--secondary-font);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}
.footer-legal{
    color: var(--text-disabled);
    font-family: var(--secondary-font);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

/* Header Fonts */
.hiver-nav__link {
    color: var(--text-secondary);
    font-family: var(--secondary-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.14px;
    text-decoration: none;
}
/* Toc Fonts */
.toc-section__link{
    font-family: var(--secondary-font);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; 
    letter-spacing: -0.14px;
}

@media (min-width: 1025px) {
    /* Primary Fonts */
    .display-xl {
        font-size: 51px;
        line-height: 1.2;
        letter-spacing: -0.51px;
    }
    .display-l {
        font-size: 42px;
        letter-spacing: -0.42px;
    }
    .display-h1 {
        font-size: 34px;
        line-height: 1.15;
        letter-spacing: -0.34px;
    }
    .display-h2 {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -0.28px;
    }
    .display-h3 {
        font-size: 26px;
        line-height: 1.1;
        letter-spacing: -0.26px;
    }

    /* Secondary Fonts */
    .display-h4 {
        font-size: 24px;
        letter-spacing: -0.24px;
    }
    .text-xl {
        font-size: 20px;
        letter-spacing: -0.20px;
    }
    .text-lg {
        font-size: 18px;
        letter-spacing: -0.18px;
    }
}
@media (min-width: 1400px) {
    /* Primary Fonts */
    .display-xl {
        font-size: 68px;
        letter-spacing: -0.68px;
    }
    .display-l {
        font-size: 56px;
        letter-spacing: -0.56px;
    }
    .display-h1 {
        font-size: 42px;
        letter-spacing: -0.42px;
    }
    .display-h2 {
        font-size: 36px;
        letter-spacing: -0.36px;
    }
    .display-h3 {
        font-size: 30px;
        letter-spacing: -0.30px;
    }

    /* Secondary Fonts */
    .display-h4 {
        font-size: 26px;
        letter-spacing: -0.26px;
    }
    .text-xl {
        font-size: 22px;
        letter-spacing: -0.22px;
    }
    .text-lg {
        font-size: 18px;
        letter-spacing: -0.18px;
    }
}
@media (min-width: 1700px) {
    /* Primary Fonts */
    .display-xl {
        font-size: 85px;
        letter-spacing: -0.85px;
    }
    .display-l {
        font-size: 65px;
        letter-spacing: -0.65px;
    }
    .display-h1 {
        font-size: 53px;
        letter-spacing: -0.53px;
    }
    .display-h2 {
        font-size: 43px;
        letter-spacing: -0.43px;
    }
    .display-h3 {
        font-size: 33px;
        letter-spacing: -0.33px;
    }

    /* Secondary Fonts */
    .display-h4 {
        font-size: 28px;
        letter-spacing: -0.28px;
    }
    .text-xl {
        font-size: 24px;
        letter-spacing: -0.24px;
    }
    .text-lg {
        font-size: 20px;
        letter-spacing: -0.20px;
    }
    .text-body {
        font-size: 18px;
        letter-spacing: -0.18px;
    }
    .text-body-medium {
        font-size: 16px;
        letter-spacing: -0.16px;
    }
}