/* ============================================================================
 * Module : shared/styles/base/tokens.css
 * Rôle   : Source UNIQUE des variables CSS du design system MDA (vert Prestalgo).
 * Dépend de : (aucun)
 * Utilisé par : toutes les pages + tous les composants (via var(--xxx))
 *
 * Charte unifiée 2026-05-13 : vert Prestalgo partout, fin du bleu legacy.
 * RÈGLE D'OR : aucune valeur en dur dans les CSS enfants — toujours var(--xxx).
 * ============================================================================ */

:root {
  /* ─── Couleurs marque (vert Prestalgo) ─── */
  --brand-dark:  #0C2D1E;  /* titres, footer dark */
  --brand:       #065F46;  /* couleur principale, CTA, links hover */
  --brand-mid:   #10B981;  /* links, accents */
  --brand-light: #34D399;  /* highlights */
  --brand-50:    #ECFDF5;  /* fond léger (toc, banners) */
  --brand-100:   #D1FAE5;  /* fond léger insistant */

  /* ─── Couleurs neutres (grays) ─── */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --white:    #ffffff;

  /* ─── Ombres ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);

  /* ─── Radius ─── */
  --radius-sm: 9px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ─── Espacements (échelle 4px) ─── */
  --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-20: 80px;

  /* ─── Familles typographiques ─── */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ─── Tailles texte ─── */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  /* ─── Poids texte ─── */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ─── Layout containers ─── */
  --container-narrow: 900px;   /* pages legal, blog */
  --container-wide:   1200px;  /* landing, marketing */

  /* ─── Layout dashboard (sidebar + topbar) ─── */
  --sidebar-w:  260px;
  --topbar-h:   72px;          /* hauteur de la topbar (utile en mobile fixed) */

  /* ─── Transitions ─── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}