:root {
    --max-width: 80rem;
    --spacing-unit: 1.5rem;
    --spacing-unit-half: calc(var(--spacing-unit) / 2);
    --spacing-unit-quarter: calc(var(--spacing-unit) / 4);
    --spacing-unit-double: calc(var(--spacing-unit) * 2);
    --spacing-unit-triple: calc(var(--spacing-unit) * 3);

    --font-family: var(--font-body);
    --font-family-mono: var(--font-mono);
    --font-family-heading: var(--font-heading);
    --font-size-base: 16px;
    --line-height: 1.6;
    --line-height-heading: 1.2;

    --font-size-h1: 2.5rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.1rem;
    --font-size-h6: 1rem;
    --font-size-small: 0.9rem;
    --font-size-smaller: 0.85rem;

    --font-weight-thin: 200;

    --border-radius: 4px;
}

/* ========================================= */
/* TAILLES GLOBALES RESPONSIVE (BREAKPOINTS) */
/* ========================================= */

/* Par défaut (tablettes et petits ordinateurs) : la variable est déjà à 16px en haut du fichier */

/* 1. Sur Mobile (< 600px) : on réduit légèrement tout le site */
@media (max-width: 600px) {
    :root {
        --font-size-base: 18px;
    }
}

/* 2. Sur les grands écrans (ex: MacBook Pro 14/16 pouces) */
@media (min-width: 1440px) {
    :root {
        /* Tout le site (textes, marges) grossit de 12.5% */
        --font-size-base: 20px;
        --max-width: 80rem; /* On laisse le conteneur s'élargir un peu plus */
    }
}

/* 3. Sur les très grands écrans (ex: ton écran 2560x1440) */
@media (min-width: 1920px) {
    :root {
        /* Tout le site grossit de plus de 35% par rapport à un portable classique ! */
        --font-size-base: 24px;
        --max-width: 90rem;
    }
}

/* 4. Sur les écrans géants (4K, iMac 27) */
@media (min-width: 2560px) {
    :root {
        /* Tout le site grossit de plus de 60% */
        --font-size-base: 28px;
        --max-width: 100rem;
    }
}