/* ============================================================
   MSJ CONNECT — DESIGN TOKENS
   Palette, typographie, espacements, ombres, transitions.
   Un seul fichier de vérité pour toutes les pages du site.
   ============================================================ */

:root{
  /* Couleurs de marque */
  --navy:#000743;
  --navy-mid:#0a1158;
  --navy-light:#2C3A6B;
  --navy-glass:rgba(0,7,67,0.9);

  --gold:#C09F22;
  --gold-light:#d4b94a;
  --gold-dark:#8f7419;
  --gold-pale:rgba(192,159,34,0.10);
  --gold-pale-2:rgba(192,159,34,0.18);

  --cream:#F5F0E8;
  --cream-dark:#e8e0d0;
  --white:#FAFAF7;

  --text:#1a1a2e;
  --text-light:#555;
  --text-faint:#8a8a9a;
  --border:rgba(0,7,67,0.08);
  --border-strong:rgba(0,7,67,0.14);

  /* Typographie */
  --ff-h:'Cormorant Garamond',Georgia,'Didot','Bauer Bodoni',serif;
  --ff-b:'Atkinson Hyperlegible','Helvetica Neue',Arial,sans-serif;

  --fs-xs:0.8rem;
  --fs-sm:0.9rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.35rem;
  --fs-xl:1.75rem;
  --fs-2xl:2.25rem;
  --fs-3xl:2.85rem;
  --fs-4xl:3.6rem;

  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-normal:1.6;
  --ls-eyebrow:0.14em;

  /* Espacements (échelle 4px) */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --sp-10:128px;

  /* Rayons */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-full:999px;

  /* Ombres */
  --shadow-xs:0 2px 8px rgba(0,7,67,0.04);
  --shadow-sm:0 4px 24px rgba(0,7,67,0.06);
  --shadow-md:0 12px 36px rgba(0,7,67,0.09);
  --shadow-lg:0 24px 64px rgba(0,7,67,0.14);
  --shadow-gold:0 8px 28px rgba(192,159,34,0.22);

  /* Mise en page */
  --mw:1100px;
  --mw-wide:1280px;
  --mw-narrow:760px;

  /* Mouvement */
  --ease:cubic-bezier(0.4,0,0.2,1);
  --dur-fast:0.18s;
  --dur-base:0.28s;
  --dur-slow:0.5s;

  /* Z-index */
  --z-nav:100;
  --z-dropdown:110;
  --z-modal:200;
}

/* Breakpoints de référence (documentation — pas utilisables en CSS var) :
   480px  — mobile étroit / empilement footer
   768px  — bascule menu mobile, grilles 2 → 1 colonne
   900px  — mise en page article / diagnostic
   1100px — largeur de contenu standard (--mw)
   1280px — largeur large (--mw-wide)
*/