/* ============================================================
   DESIGN TOKENS — couleurs, rayons, ombres, transitions
============================================================ */
:root {
  /* Palette bleue */
  --blue-900: #0a1628;
  --blue-800: #0d2144;
  --blue-700: #103565;
  --blue-600: #1a56db;
  --blue-500: #2563eb;
  --blue-400: #3b82f6;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;

  /* Palette verte */
  --green:      #10b981;
  --green-dark: #059669;

  /* Neutres */
  --white:    #ffffff;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-900: #111827;

  /* Erreur */
  --red: #ef4444;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .14);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .18);

  /* Transition globale */
  --transition: .22s cubic-bezier(.4, 0, .2, 1);
}