/* ============================================================
   TOKENS CSS — HDF Signalétique
   Variables globales : couleurs, typographie, espacements, ombres.
   Source de vérité de la charte graphique.
   ============================================================ */

:root {
  /* ─── Couleurs de marque ─────────────────────────────────── */
  --color-brand:        #2aac64;   /* Vert HDF principal */
  --color-brand-dark:   #133537;   /* Vert foncé — header, footer, fonds */
  --color-brand-light:  #34c97a;   /* Vert clair — hover, accents */
  --color-brand-50:     #e8f7ef;   /* Fond vert très léger — badges, alertes */
  --color-brand-100:    #c3ecd4;   /* Fond vert clair */

  /* ─── Accent (CTA secondaire, promos) ───────────────────── */
  --color-accent:       #f59e0b;   /* Ambre — bandeaux promo, étoiles */
  --color-accent-soft:  #fef3c7;   /* Fond ambre clair */

  /* ─── Neutres ────────────────────────────────────────────── */
  --color-bg:           #ffffff;
  --color-bg-alt:       #f7f8fa;
  --color-bg-dark:      #0e2828;   /* Fond très foncé — footer */
  --color-border:       #e3e6ec;
  --color-border-light: #f0f2f5;

  /* ─── Texte ──────────────────────────────────────────────── */
  --color-text:         #1a1f2c;
  --color-text-muted:   #5a6478;
  --color-text-light:   #8a94a6;
  --color-text-inverse: #ffffff;

  /* ─── États ──────────────────────────────────────────────── */
  --color-success:      #2ba84a;
  --color-warning:      #f2b04b;
  --color-danger:       #d7263d;
  --color-info:         #3b82f6;

  /* ─── Typographie ────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Échelle fluide avec clamp() */
  --fs-xs:   clamp(0.75rem,  0.70rem + 0.20vw, 0.85rem);
  --fs-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --fs-base: clamp(1rem,     0.95rem + 0.22vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-xl:   clamp(1.25rem,  1.10rem + 0.65vw, 1.75rem);
  --fs-2xl:  clamp(1.5rem,   1.25rem + 1.10vw, 2.25rem);
  --fs-3xl:  clamp(2rem,     1.55rem + 1.90vw, 3rem);
  --fs-4xl:  clamp(2.5rem,   1.90rem + 2.60vw, 4rem);

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-base:   1.6;
  --lh-relaxed:1.75;

  /* ─── Espacements (base 8 px) ────────────────────────────── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* ─── Layout ─────────────────────────────────────────────── */
  --container-max:     1280px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --grid-gap:          clamp(1rem, 2vw, 1.5rem);

  /* ─── Formes ─────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;

  /* ─── Ombres ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(10, 30, 20, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 30, 20, 0.08);
  --shadow-md: 0 6px 20px rgba(10, 30, 20, 0.10);
  --shadow-lg: 0 16px 48px rgba(10, 30, 20, 0.12);
  --shadow-xl: 0 32px 80px rgba(10, 30, 20, 0.15);

  /* ─── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ─── Z-index ────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-header:  500;
}