/* ============================================================
   TOKENS — Caractère Libre
   Source : Figma CLibre-PartageLM + proto-nav
   ============================================================ */

:root {

  /* ── Couleurs principales ── */
  --color-blue:        #1E4B9C; /* Figma V2 exact */
  --color-blue-dark:   #163880;
  --color-blue-light:  #eef2fa;

  /* ── Couleurs accent ── */
  --color-gold:      #cdad04; /* fond hero HP */
  --color-red:       #b32222; /* accent typographique */
  --color-burgundy:  #86434e; /* tags catégorie */

  /* ── Couleurs texte ── */
  --color-text:           #36344C;;
  --color-text-secondary: #747887;
  --color-text-tertiary:  #a5a9b8;
  --color-text-inverted:  #ffffff;

  /* ── Surfaces ── */
  --color-page:    #f7f7f6;
  --color-white:   #ffffff;
  --color-surface: #f2f4f9;

  /* ── Bordures ── */
  --color-border: #dfe3ec;

  /* ── Vins ──────────────────────────────────────────────
     Trois rôles par couleur de vin. Ne pas les confondre :
       --color-wine-{c}-strong  couleur identitaire
                                → texte de .cave-card--{c} (shared.css)
                                → fond de card fiche vin (--fvin-card-bg)
       --color-wine-{c}-pale    teinte claire
                                → fond de page fiche vin (--fvin-bg)
                                → rollover de .cave-card--{c}
       --color-wine-{c}-accent  accent
                                → --fvin-accent (fiche vin)
                                → boutons de filtre de la cave
     ────────────────────────────────────────────────────── */
  --color-wine-rouge-strong:        #A20034;
  --color-wine-rouge-pale:          #FAF2F5;
  --color-wine-rouge-accent:        #8e1d2d;

  --color-wine-rose-strong:         #E35D90;
  --color-wine-rose-pale:           #FEF7F9;
  --color-wine-rose-accent:         #e95b8d;

  --color-wine-blanc-strong:        #D1A617;
  --color-wine-blanc-pale:          #FAF6E8;
  --color-wine-blanc-accent:        #d8b318;

  --color-wine-orange-strong:       #EC6425;
  --color-wine-orange-pale:         #FDF3EE;
  --color-wine-orange-accent:       #e97926;

  --color-wine-effervescent-strong: #A2AA6C;
  --color-wine-effervescent-pale:   #F6F7F0;
  --color-wine-effervescent-accent: #bfa46a;

  /* Card « région » : pas une couleur de vin, c'est le bleu de marque.
     Pas d'accent (la région n'apparaît ni en fiche vin ni dans les filtres couleur). */
  --color-wine-region-strong:       var(--color-blue);
  --color-wine-region-pale:         #e7effe;

  /* ── Typographie ── */
  --font-display: 'Big Shoulders Display', Impact, 'Arial Black', sans-serif;
  --font-body:    'Inter', Arial, Helvetica, sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  34px;
  --text-40:  40px;
  --text-3xl:  clamp(28px, 4vw, 36px);
  --text-4xl:  clamp(36px, 5vw, 52px);
  --text-hero: clamp(54px, 8vw, 92px);

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;
  --weight-black:   900;

  --leading-tight:  0.9;
  --leading-snug:   1.08;
  --leading-normal: 1.25;
  --leading-relaxed:1.5;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:   0.015em;
  --tracking-wider:  0.02em;
  --tracking-widest: 0.06em;

  /* ── Espacements ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 70px;
  --space-20: 80px;
  --space-22: 110px;
  --space-24: 140px;

  /* ── Espacement inter-sections majeur (entre carte blanche et section suivante) ── */
  /* Desktop : 180px · Tablette : 100px · Mobile : 64px — voir .section-gap dans shared.css */
  --space-section-gap: 180px;

  /* ── Rayons ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ── Ombres ── */
  --shadow-sm:  0 4px 12px rgba(32, 42, 68, 0.06);
  --shadow-md:  0 12px 34px rgba(25, 37, 70, 0.08);
  --shadow-lg:  0 18px 40px rgba(20, 35, 70, 0.10);
  --shadow-xl:  0 22px 50px rgba(32, 42, 68, 0.12);

  /* ── Z-index ── */
  --z-nav:    100;
  --z-menu:   200;
  --z-modal:  300;

  /* ── Layout ── */
  --container-max:    1180px;
  --container-gutter: 24px;
  --nav-height:       68px;  /* Figma V2 exact */
  --nav-pill-radius:  55px;

  /* ── Grille 12 colonnes (Figma : 1440px, marge 80px, gouttière 24px) ── */
  --col-gap:  24px;  /* gouttière entre colonnes */
  --col:      calc((var(--container-max) - 11 * var(--col-gap)) / 12); /* ≈ 76.33px */
  --col-1:    var(--col);
  --col-2:    calc(var(--col) * 2  + var(--col-gap));   /* ≈ 176.67px */
  --col-3:    calc(var(--col) * 3  + var(--col-gap) * 2); /* ≈ 253px   */
  --col-4:    calc(var(--col) * 4  + var(--col-gap) * 3); /* ≈ 377px   */
  --col-6:    calc(var(--col) * 6  + var(--col-gap) * 5); /* ≈ 578px   */
  --col-8:    calc(var(--col) * 8  + var(--col-gap) * 7); /* ≈ 779px   */

  /* ── Transitions (spec 11) ── */
  --transition-fast:      220ms ease;
  --transition-carousel:  360ms cubic-bezier(.2,.9,.2,1);
  --transition-fade:      300ms ease;
  --transition-fade-long: 400ms ease;
  --transition-accordion: 280ms ease;
  --transition-nav-in:    300ms ease;
  --transition-nav-out:   200ms ease;

  /* ── Breakpoints (référence commentée — utiliser en media queries) ── */
  /* --bp-mobile: 767px  */
  /* --bp-tablet: 1024px */
  /* --bp-desktop: 1180px */
}