/* AZALPLUS — Design tokens
 * Source de vérité : docs/CHARTE_GRAPHIQUE.md (verrouillée 2026-06-05)
 * Ne pas modifier sans relecture user explicite.
 */
:root {
  /* === 1. COULEURS — Brand === */
  --brand-blue-500: #3454D1;
  --brand-blue-700: #1E3A8A;
  --brand-blue-gradient: linear-gradient(135deg, #3454D1 0%, #1E3A8A 100%);
  --brand-blue-glow: 0 8px 24px rgba(30, 58, 138, 0.35);

  /* === 1. COULEURS — Sémantique (pastel sourd)
   * Usage : background / border / icônes décoratives uniquement.
   * Ne JAMAIS utiliser comme `color:` texte (cf. audit a11y 2026-06-07).
   * Pour texte sémantique, utiliser --text-on-success / --text-on-warning etc.
   * Teintes calibrées pour atteindre 3:1 vs blanc (WCAG 1.4.11 non-text). */
  --primary: #4F46E5;
  --accent: #EA7C18;
  --success: #16A34A;
  --warning: #CA8A04;
  --error: #EF4444;
  --info: #8B5CF6;

  /* === 1. COULEURS — Neutres (10 niveaux) === */
  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAF9;
  --neutral-100: #F5F5F4;
  --neutral-200: #E7E5E4;
  --neutral-300: #D6D3D1;
  --neutral-400: #A8A29E;
  --neutral-500: #78716C;
  --neutral-600: #57534E;
  --neutral-700: #44403C;
  --neutral-800: #292524;
  --neutral-950: #0A0A0A;

  /* === 1. COULEURS — Backgrounds sémantiques pastel === */
  --bg-success: #DCFCE7;
  --text-on-success: #14532D;
  --bg-warning: #FEF3C7;
  --text-on-warning: #78350F;
  --bg-error: #FEE2E2;
  --text-on-error: #7F1D1D;
  --bg-info: #EDE9FE;
  --text-on-info: #4C1D95;

  /* === 2. TYPOGRAPHIE — Familles === */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* === 2. TYPOGRAPHIE — Échelle (taille / line-height) === */
  --text-xs: 11px;
  --leading-xs: 16px;
  --text-sm: 13px;
  --leading-sm: 20px;
  --text-base: 15px;
  --leading-base: 24px;
  --text-lg: 17px;
  --leading-lg: 26px;
  --text-xl: 20px;
  --leading-xl: 28px;
  --text-2xl: 24px;
  --leading-2xl: 32px;
  --text-3xl: 32px;
  --leading-3xl: 40px;
  --text-display: clamp(40px, 6vw, 72px);
  --leading-display: 0.95;

  /* === 2. TYPOGRAPHIE — Poids === */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 800;

  /* === 2. TYPOGRAPHIE — Letter-spacing === */
  --tracking-display: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-caps: 0.1em;

  /* === 3. 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;

  /* === 3. RAYONS (medium) === */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === 3. OMBRES (5 niveaux) === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);

  /* === 4. GRADIENTS (tokenisés — utilitaires + sémantiques) === */
  --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #3454D1 100%);
  --gradient-success: linear-gradient(135deg, #059669 0%, #047857 100%);
  --gradient-sunset: linear-gradient(135deg, #FB923C 0%, #F43F5E 100%);
  --gradient-forest: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  --gradient-candy: linear-gradient(135deg, #A78BFA 0%, #D946EF 100%);
  --gradient-gold: linear-gradient(135deg, #FACC15 0%, #FB923C 100%);
  --gradient-ocean: linear-gradient(135deg, #06B6D4 0%, #3454D1 100%);
}