:root {
    /* Layout Widths */
    --width: 1140px;
    --quarter: 25%;
    --half: 50%;
    --full: 100%;
    --mg-col-min: 280px;

    /* Spacing */
    --spacing-xs: .875rem;
    --spacing-s: 1rem;
    --spacing-m: 2rem;
    --spacing-l: 3rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 5rem;
    --spacing-xxxl: 6rem;

    /* Section Padding */
    --padding: 0;
    --padding-0: 0;
    --padding-full: var(--spacing-l) 0;
    --padding-no-hero: var(--spacing-xxl) 0;

    /* Font Families */
    --dm: "DM Sans", sans-serif;
    --tenor: "Tenor Sans", serif;

    /* Brand Colors */
    --honest-blue: #003139;
    --calming-white: #e8e5df;
    --cool-white: #d2d1cb;
    --warm-leather: #885b46;
    --americana-red: #3c0000;
    --oxford-blue: #9db1b8;

    /* RGB versions (useful for overlays, opacity, etc.) */
    --honest-blue-rgb: 0, 49, 57;
    --calming-white-rgb: 232, 229, 223;
    --cool-white-rgb: 210, 209, 203;
    --warm-leather-rgb: 136, 91, 70;
    --americana-red-rgb: 60, 0, 0;
    --oxford-blue-rgb: 157, 177, 184;

    /* Font Sizes */
    --h1: clamp(2.375rem, 6vw, 4rem);
    --h2: clamp(2.25rem, 5vw, 3.5rem);
    --h3: clamp(2rem, 4vw, 3rem);
    --h4: clamp(1.75rem, 3vw, 2.5rem);
    --h5: clamp(1.5rem, 2vw, 1.75rem);
    --h6: clamp(1.25rem, 1.5vw, 1.5rem);

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text: 1rem;
    --text-md: clamp(1rem, 1.6vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.8vw, 1.25rem);
    --text-xl: clamp(1.25rem, 2vw, 1.5rem);
    --text-2xl: clamp(1.375rem, 2.2vw, 1.75rem);
    --text-3xl: clamp(1.5rem, 2.5vw, 2rem);

    /* Line Heights */
    --lh: 1;
    --lh-1: 1.1;
    --lh-2: 1.2;
    --lh-3: 1.3;
    --lh-4: 1.4;
    --lh-5: 1.5;
    --lh-l: 2;

    /* Font Weights */
    --thin: 100;
    --extralight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;
    --black: 900;
}

/*****************************
*********** Tablet ***********
*****************************/
@media (max-width: 1024px) {
    :root {
        --width: var(--full);
        --padding: 0 2rem;
        --padding-no-hero: var(--spacing-xl) var(--spacing-m);
        --padding-full: var(--spacing-xl) var(--spacing-m);
    }
}

/*****************************
*********** Mobile ***********
*****************************/
@media (max-width: 767px) {
    :root {
        --width: var(--full);
        --padding: 0 1rem;
        --padding-no-hero: var(--spacing-l) var(--spacing-s);
        --padding-full: var(--spacing-l) var(--spacing-s);
    }
}