/* ==========================================================================
   variables.css — Couche 3 (site icyam.fr) — Surcouche au-dessus du DS
   --------------------------------------------------------------------------
   Chaîne CSS du site :
     1. tokens.css           (couche 1 — DS, tokens bruts + sémantiques + dark)
     2. colors_and_type.css  (couche 2 — DS, alias ergonomiques + Lexend local)
     3. variables.css        (cette couche — compat ascendante site + custom)
     4. reset.css
     5. main.css
     6. components/*.css

   Cette couche fait le pont entre les noms historiques utilisés par les
   composants du site (--color-blue, --text-h1, --font-main…) et les tokens
   officiels du DS ICyam v1.2. À terme, migrer progressivement les
   composants vers les noms sémantiques du DS (--text-brand, --font-size-h1,
   --font-family-base, --accent-default…) — chantier v2.

   Source de vérité : 02_PROJETS/Design-System-ICyam/DESIGN.md v1.2
   ========================================================================== */

:root {
  /* === Aliases site → DS (compat ascendante avec composants historiques) === */

  /* Couleurs — noms historiques du site qui n'existent pas tels quels côté DS */
  --color-blue:         var(--color-blue-marine);     /* Bleu Marine ICyam */
  --color-green:        var(--color-green-menthe);    /* Vert Menthe ICyam */
  --color-gray-dark:    var(--color-gray-graphite);   /* Gris Graphite — texte */
  --color-gray-bg:      var(--color-gray-very-light); /* Gris Très Clair — fond alt */
  /* Les autres (--color-blue-dark/mid/light/pastel, --color-green-dark/light/pastel,
     --color-white, --color-gray-mid/light) sont déjà définis à l'identique par
     tokens.css du DS — aucune redéfinition nécessaire. */

  /* Typographie */
  --font-main: var(--font-family-base);
  --font-mono: var(--font-family-mono);
  --text-h1:   var(--font-size-h1);
  --text-h2:   var(--font-size-h2);
  --text-h3:   var(--font-size-h3);
  --text-h4:   var(--font-size-h4);
  --text-body: var(--font-size-body);
  --text-sm:   var(--font-size-small);

  /* Layout */
  --container-max: var(--container-max-width);
  --radius:        var(--radius-md);
  /* --radius-lg : déjà défini par tokens.css */

  /* Transitions */
  --transition: var(--transition-base);
  /* Note : le site utilisait 0.2s, le DS impose 250ms. Différence imperceptible. */

  /* === Espacements — VALEURS SITE PRÉSERVÉES ===
     ⚠️ Conflit nominal avec le DS :
       DS   --space-* : 0.25/0.5/1/1.5/2/3/4/6/8rem (base 8 + 4px) =  4/8/16/24/32/48/64/96/128 px
       Site --space-* : 0.5/1/2/4/8rem                              =  8/16/32/64/128 px

     Cette redéfinition (placée après tokens.css dans la cascade) maintient
     le comportement actuel des composants existants du site. Pour un nouveau
     composant, préférer les noms du DS si possible (--space-2xs, xs, sm, md,
     lg, xl, 2xl, 3xl, 4xl) — qui sont accessibles côté DS via les valeurs
     ci-dessus. Migration espaces → DS = chantier v2 dédié.                  */
  --space-xs:  0.5rem;   /* 8px   */
  --space-sm:  1rem;     /* 16px  */
  --space-md:  2rem;     /* 32px  (DS = 24px) */
  --space-lg:  4rem;     /* 64px  (DS = 32px) */
  --space-xl:  8rem;     /* 128px (DS = 48px) */

  /* Ombres — déjà définies par tokens.css :
       --shadow-sm = 0 1px 3px rgba(0,0,0,0.08)
       --shadow-md = 0 4px 16px rgba(28,63,99,0.10)
       --shadow-lg = 0 8px 32px rgba(28,63,99,0.14)
     Aucune redéfinition nécessaire. */

  /* === Tokens custom site (hors DS) === */
  --color-footer: #1F2329;  /* Bleu Marine très foncé — custom site icyam.fr */
}