/* ============================================================
   TOKENS CSS — HDF Signalétique
   Charte alignée sur les maquettes design/ (Archivo + Manrope).
   ============================================================ */

:root {
  /* ─── Couleurs de marque ─────────────────────────────────── */
  --color-brand:        #2eb35d;   /* Vert CTA / accents */
  --color-brand-dark:   #0e3a2f;   /* Vert forêt — header, footer, hero */
  --color-brand-light:  #5fe08e;   /* Vert clair — promo, badges */
  --color-brand-50:     #eafaf0;   /* Fond vert très léger */
  --color-brand-100:    #c7ecd4;   /* Fond vert clair */
  --color-brand-link:   #1f8f48;   /* Liens */

  /* ─── Accent (CTA secondaire, promos) ───────────────────── */
  --color-accent:       #5fe08e;
  --color-accent-soft:  rgba(95, 224, 142, 0.16);

  /* ─── Neutres ────────────────────────────────────────────── */
  --color-bg:           #ffffff;
  --color-bg-alt:       #f4f7f5;
  --color-bg-dark:      #0e3a2f;
  --color-border:       #e2e8e4;
  --color-border-light: #eef1ef;

  /* ─── Texte ──────────────────────────────────────────────── */
  --color-text:         #16211c;
  --color-text-muted:   #5f6b64;
  --color-text-light:   #7d8a82;
  --color-text-inverse: #ffffff;
  --color-text-on-dark: #cfe6d8;

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

  /* ─── Typographie ────────────────────────────────────────── */
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Code', '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;
  --fw-black:    900;

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

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

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

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

  /* ─── Ombres ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 58, 47, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 58, 47, 0.08);
  --shadow-md: 0 6px 20px rgba(15, 58, 47, 0.10);
  --shadow-lg: 0 16px 48px rgba(15, 58, 47, 0.14);
  --shadow-xl: 0 32px 80px rgba(15, 58, 47, 0.18);

  /* ─── 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;
}