:root {

    /* ---- Colors (official palette only) ---- */
    --teal:   #0E8B8B;
    --green:  #2E9E5B;
    --slate:  #1F2A37;
    --gray:   #6B7280;
    --mint:   #F7F7F7;
    --white:  #FFFFFF;

    /* hover / dark states — same hue, darker */
    --teal-dark:  #0A6E6E;
    --green-dark: #268A4F;

        /* ---- Typography ---- */
    --font-head: 'Archivo', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --fw-thin: 200;
    --fw-regular: 400;
    --fw-semibold: 600;
    /* ---- Layout ---- */
    --container:  1440px;   /* max width of the whole site */
    --gutter:     2rem;     /* left/right page padding */
    --header-h:   84px;     /* header height */

    /* ---- Spacing scale ---- */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;

    /* ---- Radius ---- */
    --radius:      12px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 2px 8px rgba(31, 42, 55, 0.08);
    --shadow-md: 0 8px 24px rgba(31, 42, 55, 0.12);

    /* ---- Transitions ---- */
    --transition: 0.2s ease;
}