/* ==========================================================================
   VARIABLES GLOBALES
   Couleurs, typographie, espacements, transitions
   ========================================================================== */

:root {
  /* ── Palette principale ──────────────────────────────────── */
  --forest:      #1a3a2a;
  --moss:        #2d5a3d;
  --lime:        #EEF2E9;    /* fond clair (bg uniquement) */
  --lime-dark:   #4fa830;    /* accent texte/icône sur fond sombre */
  --lime-accent: #6fcf42;    /* accent interactif (hover, border, glow) */

  /* Aliases sémantiques */
  --color-bg-lime:   var(--lime);        /* fond seulement, jamais texte */
  --color-accent:    var(--lime-dark);   /* texte/icône sur fond sombre  */
  --color-accent-lt: var(--lime-accent); /* borders, glow, hover         */

  /* ── Neutres ─────────────────────────────────────────────── */
  --chalk:       #f4f1ec;
  --chalk2:      #e4e1ec;
  --texte-clair: #f4f1ec;   /* alias de --chalk, préférer --chalk */
  --smoke:       #e8e4dd;
  --ink:         #2a2a2a;
  --ink-mid:     #3d3d3d;
  --ink-soft:    #787878;
  --white:       #ffffff;

  /* ── Border-radius — échelle standardisée ────────────────── */
  /*   Avant : 18 valeurs en dur (2px à 999px) sans token      */
  --radius-xs:   4px;   /* badges inline, micro-éléments       */
  --radius-sm:   8px;   /* boutons, inputs, petites cards       */
  --radius:      10px;  /* cards standard, panels               */
  --radius-md:   12px;  /* cards moyennes                       */
  --radius-lg:   20px;  /* modales, grandes cards               */
  --radius-pill: 999px; /* pills, tags entièrement arrondis     */

  /* ── Ombres ──────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.06);
  --shadow:      0 2px 12px rgba(0,0,0,.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,.12);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.16);

  /* ── Typographie ─────────────────────────────────────────── */
  --font:        'Outfit', system-ui, sans-serif;
  --font-display:'Bebas Neue', var(--font);

  /* ── Transitions — 3 vitesses standard ──────────────────── */
  /*   Avant : 8 durées en dur (.15s à .5s) dans 6 fichiers   */
  --transition-fast: 0.15s ease;   /* hover léger, micro-feedback  */
  --transition:      0.22s ease;   /* défaut — la plupart des états */
  --transition-slow: 0.4s ease;    /* animations d'entrée           */

  /* ── Layout ──────────────────────────────────────────────── */
  --header-h: 70px;
  --max-w:    1200px;

  /* ── Z-index — échelle centralisée ──────────────────────── */
  --z-base:    1;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   9000;
  --z-loader:  9999;
}

/*
 * =========================================================================
 * CHARTE TYPOGRAPHIQUE — règles d'usage
 * =========================================================================
 *
 *  --font-display (Bebas Neue) :
 *    → Titres de sections (h1, h2 de page, hero, spirit, gpx-featured)
 *    → Éléments d'identité (logo, footer brand, dashboard greeting)
 *    → NE PAS utiliser pour les titres de cards ou blocs d'UI
 *
 *  --font (Outfit) :
 *    → Tout le reste : corps, labels, UI, cards, badges
 *    → Titres de cards : font-weight 700 (pas 800 sauf exceptions UI dense)
 *    → Corps : font-weight 400, line-height 1.6-1.75
 *
 * =========================================================================
 */