/* ============================================
   DESIGN TOKENS — Virginie Lehmann Avocat
   Source : Figma (Gf2ZI6iFTbNul7bsk205ea)
   ============================================ */

:root {

    /* ---- Couleurs ---- */

    /* Couleurs de marque */
    --color-green:        #2e492e;   /* primary-green — fond sombre, textes, accents */
    --color-yellow:       #f6f4c7;   /* primay-yellow — CTA inversés, textes sur fond vert */
    --color-bg:           #fffef3;   /* fond principal crème */
    --color-bg-light:     #fbfbfb;   /* fond clair (bordures, séparateurs) */

    /* Couleurs de texte */
    --color-text:         #1e1e1e;   /* text/black — corps de texte */
    --color-text-inverse: #ffffff;   /* texte sur fond sombre */

    /* Couleurs utilitaires */
    --color-border:       rgba(0, 0, 0, 0.10);
    --color-overlay:      rgba(255, 254, 243, 0.90);

    /* Rétrocompatibilité avec l'ancien naming */
    --couleur-fond:        var(--color-bg);
    --couleur-principale:  var(--color-green);
    --couleur-accent:      var(--color-yellow);
    --couleur-texte:       var(--color-text);
    --couleur-texte-clair: var(--color-text-inverse);


    /* ---- Typographie ---- */

    --font-titre: 'Mukta', sans-serif;
    --font-corps: 'Inter', sans-serif;

    /* Grammages Mukta (nommage Figma → font-weight CSS) */
    /* Light = 300 | Regular = 400 | Medium = 500 | SemiBold = 600 | Bold = 700 | ExtraBold = 800 */
    --font-weight-light:      300;
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;
    --font-weight-extrabold:  800;

    /* Grammages Inter (nommage Figma → font-weight CSS) */
    /* Regular = 400 | Medium = 500 | Semi Bold = 600 */

    /* Échelle de tailles (valeurs fixes Figma → fluid CSS) */
    --text-3xl:  clamp(2.25rem, 4.5vw, 3.5rem);    /* 56px → hero */
    --text-2xl:  clamp(1.75rem, 3.5vw, 2.5rem);    /* 40px → titres de section */
    --text-xl:   clamp(1.375rem, 2.5vw, 2rem);     /* 32px → sous-titres */
    --text-l:    clamp(1.125rem, 2vw, 1.5rem);     /* 24px → plans, coordonnées */
    --text-m:    clamp(1rem, 1.75vw, 1.25rem);     /* 20px → corps principal */
    --text-s:    1.125rem;                          /* 18px → témoignages */
    --text-base: 1rem;                              /* 16px → navigation, labels */

    /* Interlignages */
    --leading-tight:   1.2;
    --leading-normal:  1.3;
    --leading-relaxed: 1.45;
    --leading-loose:   1.5;

    /* Espacement entre lettres */
    --tracking-tight: -0.02em;   /* -0.64px à 32px */
    --tracking-s:     -0.01em;   /* -0.08px à 16px */

    /* Rétrocompatibilité */
    --taille-h1:    var(--text-3xl);
    --taille-h2:    var(--text-2xl);
    --taille-h3:    var(--text-xl);
    --taille-corps: var(--text-base);


    /* ---- Espacements ---- */
    /* Basés sur la grille 8px du Figma */

    --space-1:   0.5rem;    /*  8px */
    --space-2:   1rem;      /* 16px */
    --space-3:   1.25rem;   /* 20px */
    --space-4:   1.5rem;    /* 24px */
    --space-5:   2rem;      /* 32px */
    --space-6:   2.5rem;    /* 40px */
    --space-7:   3rem;      /* 48px */
    --space-8:   3.5rem;    /* 56px */
    --space-9:   5rem;      /* 80px */
    --space-10:  5.5rem;    /* 88px */
    --space-11:  7.5rem;    /* 120px */
    --space-12:  8.5rem;    /* 136px */
    --space-13:  12rem;     /* 192px */

    /* Rétrocompatibilité */
    --espace-xs:  var(--space-1);
    --espace-s:   var(--space-2);
    --espace-m:   var(--space-5);
    --espace-l:   var(--space-9);
    --espace-xl:  var(--space-11);


    /* ---- Mise en page ---- */

    --largeur-max:       1280px;   /* largeur du Figma Desktop */
    --largeur-contenu:   1200px;   /* conteneur interne */
    --padding-section-x: var(--space-13);  /* 192px côtés section */
    --padding-section-y: var(--space-11);  /* 120px haut/bas section */
    --padding-nav:       var(--space-5);   /* 32px nav */


    /* ---- Bordures & Rayons ---- */

    --radius-s:   4px;    /* boutons, nav */
    --radius-m:   8px;    /* boutons CTA */
    --radius-l:   16px;   /* cartes témoignages */

    /* Rétrocompatibilité */
    --rayon: var(--radius-s);


    /* ---- Ombres ---- */

    --shadow-card:   0px 0px 10px 0px rgba(0, 0, 0, 0.10);   /* CTA hero */
    --shadow-button: 0px 2px 4px 0px rgba(59, 59, 59, 0.15); /* boutons principaux */


    /* ---- Transitions ---- */

    --transition: 0.25s ease;
    --transition-fast: 0.15s ease;

}