/* ============================================================
   TOKENS v2 — El Tout Bio Design System
   Brief v2.0 — palette mise à jour
   ============================================================ */

:root {

  /* ------------------------------------------------------------------
     COULEURS
     ------------------------------------------------------------------ */
  --primary:      #1F3A5F;   /* Bleu Ardoise — footer, manifeste */
  --primary-alt:  #0A4A8C;   /* Bleu Biocoop — liens, accents saturés */
  --accent:       #7A9B57;   /* Vert Mousse — local, bio */
  --warm:         #E58A3A;   /* Terracotta — CTAs secondaires, badges chauds */

  --bg:           #F3F1E8;   /* Crème — fond principal */
  --bg-2:         #E8E5D6;   /* Sable — sections alternées, cartes */
  --paper:        #FBFAF5;   /* Paper — cartes sur fond crème */

  --ink:          #0E2A4A;   /* Encre — texte principal (bleu très foncé) */
  --ink-2:        #3B5470;   /* Encre douce — sous-titres, légendes */
  --muted:        #8390A3;   /* Muted — métadonnées tertiaires */
  --line:         #D6D3C4;   /* Line — bordures, séparateurs */

  /* Aliases sémantiques */
  --color-bg:       var(--bg);
  --color-bg-alt:   var(--bg-2);
  --color-text:     var(--ink);
  --color-muted:    var(--ink-2);
  --color-accent:   var(--accent);
  --color-warm:     var(--warm);
  --color-dark:     var(--primary);
  --color-line:     var(--line);

  /* ------------------------------------------------------------------
     TYPOGRAPHIE
     ------------------------------------------------------------------ */
  --font-title: 'Fraunces', Georgia, serif;
  --font-body:  'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Échelle typographique */
  --text-display: clamp(48px, 7.5vw, 92px);
  --text-h1:      clamp(36px, 5.5vw, 80px);
  --text-h2:      clamp(36px, 4.5vw, 62px);
  --text-h3:      clamp(21px, 2.2vw, 27px);
  --text-body-lg: clamp(18px, 1.8vw, 20px);
  --text-body:    clamp(16px, 1.4vw, 17px);
  --text-small:   14px;
  --text-eyebrow: 12px;

  /* Line heights */
  --lh-display: 1.0;
  --lh-h1:      1.05;
  --lh-h2:      1.12;
  --lh-h3:      1.28;
  --lh-body:    1.65;
  --lh-body-lg: 1.6;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-normal:  0;
  --ls-eyebrow: 0.14em;

  /* ------------------------------------------------------------------
     ESPACEMENT
     ------------------------------------------------------------------ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-24:  96px;
  --sp-32:  128px;

  --section-py:    clamp(50px, 4.5vw, 64px);
  --section-py-sm: clamp(40px, 3.5vw, 50px);

  /* ------------------------------------------------------------------
     GRILLE
     ------------------------------------------------------------------ */
  --container-max: 1280px;
  --container-px:  clamp(20px, 4vw, 48px);

  /* ------------------------------------------------------------------
     BORDURES & RAYONS
     ------------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --border: 1px solid var(--line);

  /* ------------------------------------------------------------------
     OMBRES
     ------------------------------------------------------------------ */
  --shadow-sm:    0 1px 3px rgba(14,42,74,0.05);
  --shadow-hover: 0 12px 30px -16px rgba(14,42,74,0.22);

  /* ------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------ */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-mid:  260ms;
  --t-slow: 560ms;

  /* ------------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------------ */
  --z-nav:     100;
  --z-overlay: 200;

  /* ------------------------------------------------------------------
     RÉTRO-COMPATIBILITÉ (anciens noms v1 → v2)
     ------------------------------------------------------------------ */
  --color-bleu-ardoise:  var(--primary);
  --color-vert-mousse:   var(--accent);
  --color-miel-brule:    var(--warm);
  --color-creme:         var(--bg);
  --color-sable:         var(--bg-2);
  --color-encre:         var(--ink);
  --color-encre-60:      var(--ink-2);
  --color-encre-20:      var(--line);
  --color-bg:            var(--bg);
  --color-bg-alt:        var(--bg-2);
  --color-text:          var(--ink);
  --color-text-muted:    var(--ink-2);
  --color-accent:        var(--accent);
  --color-dark:          var(--primary);
  --color-line:          var(--line);
  --space-4:      var(--sp-4);
  --space-6:      var(--sp-6);
  --space-8:      var(--sp-8);
  --space-3:      var(--sp-3);
  --space-12:     var(--sp-12);
  --radius-card:  var(--radius-lg);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --border-subtle: 1px solid var(--line);
  --shadow-card:  var(--shadow-sm);
  --space-16:     var(--sp-16);
}