:root {
    --header-height: 117px;
    --footer-height: 177px;
    
    /* || Typography */
    --font-family: 'IBM Plex Sans', sans-serif;
    
    --text-xl: 6rem; /* 60px */
    --text-lg: 4.6rem; /* 46px */
    --text-md: 2.4rem; /* 24px */
    --text-sm: 2rem; /* 20px */
    --text-xs: 1.8rem; /* 18px */
    --text-2xs: 1.4rem; /* 14px */
    --text-eyebrow: 1.4rem; /* 14px */
    --text-button: 1.4rem; /* 14px */
    --text-nav: 1.4rem; /* 14px */
    --text-quote: 3.6rem; /* 36px */

    --line-height-xl: 6.4rem; /* 64px */
    --line-height-lg: 5.2rem; /* 52px */
    --line-height-md: 3.2rem; /* 32px */
    --line-height-sm: 2.4rem; /* 24px */
    --line-height-xs: 2.4rem; /* 24px */
    --line-height-2xs: 1.8rem; /* 18px */
    --line-height-eyebrow: 1.4rem; /* 14px */
    --line-height-button: 1.4rem; /* 14px */
    --line-height-nav: 1.4rem; /* 14px */
    --line-height-quote: 4.6rem; /* 46px */

    --letter-spacing-xl: -0.5px;
    --letter-spacing-lg: -0.5px;
    --letter-spacing-md: 0px;
    --letter-spacing-sm: 2px;
    --letter-spacing-xs: 0px;
    --letter-spacing-2xs: 0px;
    --letter-spacing-eyebrow: 2px;
    --letter-spacing-button: 1px;
    --letter-spacing-nav: 2px;
    --letter-spacing-quote: 0px;
    --letter-spacing-none: 0px;
    
    --extralight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;

    /* || Color */
    --teal-20: #A1B2B4;
    --teal-40: #75898C;
    --teal-60: #1A5B53;
    --teal-80: #0B2B2E;
    --teal-100: #061B1C;

    --neutral-10: #F8F8F8;
    --neutral-20: #F1F1F1;
    --neutral-30: #EAEAEA;
    --neutral-40: #C3C3C3;
    --neutral-50: #9C9C9C;
    --neutral-60: #757575;
    --neutral-80: #4E4E4E;
    --neutral-100: #2F2F2F;
    
    --sage-10: #EDF3EF;
    --sage-20: #DBE8DE;
    --sage-30: #C9DCCE;
    --sage-40: #A7B7AC;
    --sage-50: #869389;
    --sage-60: #656E67;
    --sage-80: #434945;
    --sage-100: #282C29;

    --green-10: #B8FAAF;
    --green-20: #72F460;
    --green-30: #2BEF10;
    --green-40: #24C70D;
    --green-50: #1D9F0B;
    --green-60: #167808;
    --green-80: #0E5005;
    --green-100: #093003;


    --blue-10: #ABFFF8;
    --blue-20: #56FFF1;
    --blue-30: #02FFEA;
    --blue-40: #02D4C3;
    --blue-50: #01AA9C;
    --blue-60: #018075;
    --blue-80: #01554E;
    --blue-100: #00332F;

    --error: #FF4B2B;

    /* || Border Radius */
    --border-radius: 4px;
}


@media (max-width: 1024px) {
    :root {
        --text-xl: 5rem; /* 50px */
        --text-lg: 4rem; /* 40px */
        --text-md: 2.2rem; /* 22px */
        --text-sm: 1.8rem; /* 18px */
        --text-xs: 1.6rem; /* 16px */
        --text-2xs: 1.4rem; /* 14px */
        --text-eyebrow: 1.4rem; /* 14px */
        --text-button: 1.4rem; /* 14px */
        --text-nav: 2rem; /* 20px */
        --text-quote: 3rem; /* 30px */

        --line-height-xl: 5.6rem; /* 56px */
        --line-height-lg: 4.4rem; /* 44px */
        --line-height-md: 2.8rem; /* 28px */
        --line-height-sm: 2.2rem; /* 22px */
        --line-height-xs: 2rem; /* 20px */
        --line-height-2xs: 1.8rem; /* 18px */
        --line-height-eyebrow: 1.4rem; /* 14px */
        --line-height-button: 1.4rem; /* 14px */
        --line-height-nav: 2rem; /* 20px, matches --text-nav at this tier */
        --line-height-quote: 3.6rem; /* 36px */

        --letter-spacing-xl: -0.5px;
        --letter-spacing-lg: -0.5px;
        --letter-spacing-md: 0px;
        --letter-spacing-sm: 2px;
        --letter-spacing-xs: 0px;
        --letter-spacing-2xs: 0px;
        --letter-spacing-eyebrow: 2px;
        --letter-spacing-button: 1px;
        --letter-spacing-nav: 2px;
        --letter-spacing-quote: 0px;
    }
    
}

@media (max-width: 767px) {
    :root {
        --text-xl: 4rem; /* 40px */
        --text-lg: 3.2rem; /* 32px */
        --text-md: 2rem; /* 20px */
        --text-sm: 1.8rem; /* 18px */
        --text-xs: 1.6rem; /* 16px */
        --text-2xs: 1.4rem; /* 14px */
        --text-eyebrow: 1.4rem; /* 14px */
        --text-button: 1.4rem; /* 14px */
        --text-nav: 2rem; /* 20px */
        --text-quote: 2.4rem; /* 24px */
        
        --line-height-xl: 4.4rem; /* 44px */
        --line-height-lg: 3.8rem; /* 38px */
        --line-height-md: 2.8rem; /* 28px */
        --line-height-sm: 2.4rem; /* 24px */
        --line-height-xs: 2.0rem; /* 20px */
        --line-height-2xs: 1.8rem; /* 18px */
        --line-height-eyebrow: 1.4rem; /* 14px */
        --line-height-button: 1.4rem; /* 14px */
        --line-height-nav: 2rem; /* 20px */
        --line-height-quote: 2.8rem; /* 28px */

        --letter-spacing-xl: -0.5px;
        --letter-spacing-lg: -0.5px;
        --letter-spacing-md: 0px;
        --letter-spacing-sm: 2px;
        --letter-spacing-xs: 0px;
        --letter-spacing-2xs: 0px;
        --letter-spacing-eyebrow: 2px;
        --letter-spacing-button: 1px;
        --letter-spacing-nav: 2px;
        --letter-spacing-quote: 0px;
    }
}