/* Maeva Boujot — design system (refonte 2026). Source : maquette, porté tel quel. */

/* ============================== 1. TOKENS ============================== */
:root {
    /* --- Couleurs de marque -------------------------------------------------
     Les valeurs "soft" sont DÉCORATIVES (fonds, bordures, aplats).
     Ne jamais les utiliser pour du texte : elles échouent au niveau AA.
     Pour du texte, utiliser --forest, --sage, --terracotta, --ink, --muted.
     ⚠ Sur fond --beige, seuls --forest et --ink passent AA. ------------- */
    --green: #576f54; /* VERT DE FOND de la marque — blanc dessus  */

    /* 5.52:1, cream dessus 4.86:1 → AA          */
    --green-deep: #475c45; /* dégradé du hero, bord bas                 */
    --green-light: #66805f; /* forme organique du hero (décoratif)       */
    --forest: #3d5a47; /* 7.63:1 sur blanc — titres, texte, boutons */
    --forest-dark: #2f4636; /* 10.24:1 — survol, titres                  */
    --forest-soft: #e6ece7; /* aplat très clair                          */
    --sage: #5f7353; /* 5.17:1 — accent végétal                   */
    --sage-soft: #6b7f5e; /* décoratif uniquement                      */
    --terracotta: #8a6139; /* 5.46:1 sur blanc — accent chaud, CTA      */
    --terracotta-deep: #714e2b; /* pour les fonds beige, où le précédent     */

    /* ne tient que 4.07:1                       */
    --terracotta-soft: #a67c52; /* décoratif uniquement                      */
    --sand: #c4b59d; /* bordures, séparateurs                     */
    --cream: #f5f0e8; /* fond de page dominant                     */
    --beige: #e8ddd0; /* fond de section alternée                  */
    --white: #fff;

    /* --- Texte --- */
    --ink: #2b312e; /* 13.28:1 sur blanc — texte courant         */
    --muted: #56605a; /* 6.53:1 — texte secondaire                 */

    /* --- États --- */
    --focus: #8a6139;
    --danger: #9b3d2e;

    /* --- Typographie ------------------------------------------------------
     Échelle fluide : plus de saut brutal mobile → desktop.               */
    --font-title: "Playfair Display", georgia, "Times New Roman", serif;
    --font-body:
        "Inter", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
    --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --step-1: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
    --step-2: clamp(1.3rem, 1.19rem + 0.55vw, 1.625rem);
    --step-3: clamp(1.55rem, 1.34rem + 1.05vw, 2.125rem);
    --step-4: clamp(1.85rem, 1.47rem + 1.9vw, 2.75rem);
    --step-5: clamp(2.15rem, 1.55rem + 3vw, 3.5rem);

    /* --- Espacements --- */
    --space-2xs: 0.375rem;
    --space-xs: 0.625rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);

    /* --- Formes --- */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 18px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-s: 0 1px 2px rgb(43 49 46 / 6%), 0 2px 6px rgb(43 49 46 / 5%);
    --shadow-m:
        0 2px 4px rgb(43 49 46 / 5%), 0 10px 24px -8px rgb(43 49 46 / 12%);
    --shadow-l:
        0 4px 8px rgb(43 49 46 / 5%), 0 24px 48px -16px rgb(43 49 46 / 18%);

    /* --- Structure --- */
    --container: 76rem;
    --container-narrow: 46rem;
    --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
    --header-h: 4.4rem;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}