/* ===============================================
   CENTRALIZED COLOR PALETTE
   ===============================================
   Source unique de vérité pour toutes les couleurs
   du projet. JAMAIS de couleur hardcoded en dur
   dans un fichier HTML.
   =============================================== */

:root {
  /* ===== PRIMAIRE & ACCENT ===== */
  --color-primary: #00aeff;
  --color-primary-light: #06b6d4;
  --color-primary-hover: #06b6d4;

  /* ===== BACKGROUNDS ===== */
  --bg-dark-0: #000000;
  --bg-dark-1: #0f172a;
  --bg-dark-2: #1a1a1a;
  --bg-dark-3: #1e293b;
  --bg-dark-4: #082f49;
  --bg-dark-5: #0c4a6e;
  --bg-dark-6: #164e63;
  --bg-dark-7: #1a3a52;

  /* Menu background */
  --bg-menu: #0f172a;

  /* ===== SEMI-TRANSPARENT BACKGROUNDS ===== */
  --bg-rgba-dark-1-50: rgba(15, 23, 42, 0.5);
  --bg-rgba-dark-1-40: rgba(15, 23, 42, 0.4);
  --bg-rgba-dark-1-30: rgba(15, 23, 42, 0.3);
  --bg-rgba-dark-gray-60: rgba(31, 41, 55, 0.6);
  --bg-rgba-dark-gray-80: rgba(31, 41, 55, 0.8);
  --bg-rgba-primary-30: rgba(6, 182, 212, 0.3);
  --bg-rgba-primary-20: rgba(6, 182, 212, 0.2);
  --bg-rgba-primary-15: rgba(6, 182, 212, 0.15);
  --bg-rgba-primary-10: rgba(6, 182, 212, 0.1);
  --bg-rgba-black-50: rgba(0, 0, 0, 0.5);

  /* ===== TEXT COLORS ===== */
  --text-white: #ffffff;
  --text-gray-100: rgb(243, 244, 246); /* tailwind gray-100 */
  --text-gray-300: rgb(209, 213, 219); /* tailwind gray-300 */
  --text-gray-400: rgb(156, 163, 175); /* tailwind gray-400 */
  --text-gray-500: rgb(107, 114, 128); /* tailwind gray-500 */
  --text-cyan-300: rgb(34, 211, 238); /* tailwind cyan-300 */
  --text-cyan-400: rgb(34, 211, 238); /* tailwind cyan-400 */
  --text-purple-300: rgb(216, 180, 254); /* tailwind purple-300 */
  --text-purple-400: rgb(192, 132, 250); /* tailwind purple-400 */
  --text-red-300: rgb(252, 165, 165); /* tailwind red-300 */

  /* ===== HIGHLIGHT & ACCENT ===== */
  --highlight-alpha: 0.3;
  --highlight-color: rgba(6, 182, 212, var(--highlight-alpha));

  /* ===== GRADIENT STOPS ===== */
  --gradient-cyan-500: rgb(34, 211, 238);
  --gradient-blue-500: rgb(59, 130, 246);
  --gradient-purple-500: rgb(168, 85, 247);
  --gradient-pink-500: rgb(236, 72, 153);

  /* ===== TRANSPARENT VARIANTS (for gradients & overlays) ===== */
  --cyan-500-10: rgba(34, 211, 238, 0.1);
  --cyan-500-20: rgba(34, 211, 238, 0.2);
  --cyan-500-30: rgba(34, 211, 238, 0.3);
  --cyan-500-50: rgba(34, 211, 238, 0.5);

  --blue-500-10: rgba(59, 130, 246, 0.1);
  --blue-500-20: rgba(59, 130, 246, 0.2);
  --blue-500-50: rgba(59, 130, 246, 0.5);

  --purple-500-10: rgba(168, 85, 247, 0.1);
  --purple-500-20: rgba(168, 85, 247, 0.2);
  --purple-500-50: rgba(168, 85, 247, 0.5);

  --pink-500-10: rgba(236, 72, 153, 0.1);
  --pink-500-20: rgba(236, 72, 153, 0.2);
  --pink-500-50: rgba(236, 72, 153, 0.5);

  /* ===== BORDER COLORS ===== */
  --border-cyan-20: rgba(6, 182, 212, 0.2);
  --border-cyan-40: rgba(6, 182, 212, 0.4);
  --border-cyan-50: rgba(6, 182, 212, 0.5);
  --border-blue-20: rgba(59, 130, 246, 0.2);
  --border-blue-50: rgba(59, 130, 246, 0.5);
  --border-purple-20: rgba(168, 85, 247, 0.2);
  --border-purple-50: rgba(168, 85, 247, 0.5);
  --border-pink-20: rgba(236, 72, 153, 0.2);
  --border-pink-50: rgba(236, 72, 153, 0.5);

  /* ===== SHADOW COLORS ===== */
  --shadow-cyan: rgba(6, 182, 212, 0.3);
  --shadow-cyan-hover: rgba(6, 182, 212, 0.5);
  --shadow-blue: rgba(59, 130, 246, 0.2);
  --shadow-purple: rgba(168, 85, 247, 0.2);

  /* ===== STATUS COLORS ===== */
  --color-error: rgb(239, 68, 68);
  --color-error-bg-10: rgba(239, 68, 68, 0.1);
  --color-error-border: rgba(239, 68, 68, 0.5);
  --color-error-text: rgb(252, 165, 165);
}