:root {

    /* ----------------- */
    /* --- 🎨 Colors --- */
    /* ----------------- */

    --color-main-blue: #285F6E;
    --color-main-dark-blue: #2F4858;
    --color-main-green: #DDE8D7;
    --color-white: #ffffff;
    --color-black: #000000;

    --color-background: #ffffff;
    --color-muted: #f5f5f5;

    /* ----------------- */
    /* - 🧠 Typography - */
    /* ----------------- */

    --font-primary: "Inter", sans-serif;
    --font-secondary: "Montserrat Alternates", sans-serif;

    /* Headings */
    --font-h1: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);      /* 28 → 48px */
    --font-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);     /* 24 → 36px */
    --font-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);  /* 20 → 26px */
    --font-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);    /* 18 → 22px */

    /* Body */
    --font-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);   /* 16 → 18px */

    /* Line heights */
    --lh-h1: 1.15;
    --lh-h2: 1.25;
    --lh-h3: 1.3;
    --lh-h4: 1.3;
    --lh-body: 1.6;

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ----------------- */
    /* 📐 Spacing */
    /* ----------------- */

    /* Spacing scale */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 120px;

    /* Section layout */
    --section-padding-y: 120px;
    --section-padding-x: 160px;
    --section-gap: 64px;

    /* 🟦 Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 32px;


    /* 📦 Layout */
    --container-width: 1100px;
}

@media (max-width: 1120px) {
    :root {
        --section-padding-y: 120px;
        --section-padding-x: 48px;
        --section-gap: 48px;
    }
}

@media (max-width: 680px) {
    :root {
        --section-padding-y: 48px;
        --section-padding-x: 16px;
        --section-gap: 32px;
    }
}