:root {
  /* Couleur primaire configurable - surcharge celle du custom.css */
  --color-primary: #be2026 !important;
  --color-primary-50: #FBF3F4;
  --color-primary-100: #F8E8E9;
  --color-primary-200: #F2D2D3;
  --color-primary-300: #EBBCBD;
  --color-primary-400: #E5A5A8;
  --color-primary-500: #D8797C;
  --color-primary-600: #be2026;
  --color-primary-700: #A11B20;
  --color-primary-800: #85161A;
  --color-primary-900: #681114;
}

/* =========================
   CLASSES TAILWIND ROUGE SURCHARGÉES
   ========================= */

/* Backgrounds rouges - toutes les nuances */
.bg-red-50 { background-color: var(--color-primary-50) !important; }
.bg-red-100 { background-color: var(--color-primary-100) !important; }
.bg-red-200 { background-color: var(--color-primary-200) !important; }
.bg-red-300 { background-color: var(--color-primary-300) !important; }
.bg-red-400 { background-color: var(--color-primary-400) !important; }
.bg-red-500 { background-color: var(--color-primary-500) !important; }
.bg-red-600 { background-color: var(--color-primary-600) !important; }
.bg-red-700 { background-color: var(--color-primary-700) !important; }
.bg-red-800 { background-color: var(--color-primary-800) !important; }
.bg-red-900 { background-color: var(--color-primary-900) !important; }

/* Textes rouges - toutes les nuances */
.text-red-50 { color: var(--color-primary-50) !important; }
.text-red-100 { color: var(--color-primary-100) !important; }
.text-red-200 { color: var(--color-primary-200) !important; }
.text-red-300 { color: var(--color-primary-300) !important; }
.text-red-400 { color: var(--color-primary-400) !important; }
.text-red-500 { color: var(--color-primary-500) !important; }
.text-red-600 { color: var(--color-primary-600) !important; }
.text-red-700 { color: var(--color-primary-700) !important; }
.text-red-800 { color: var(--color-primary-800) !important; }
.text-red-900 { color: var(--color-primary-900) !important; }

/* Bordures rouges - toutes les nuances */
.border-red-50 { border-color: var(--color-primary-50) !important; }
.border-red-100 { border-color: var(--color-primary-100) !important; }
.border-red-200 { border-color: var(--color-primary-200) !important; }
.border-red-300 { border-color: var(--color-primary-300) !important; }
.border-red-400 { border-color: var(--color-primary-400) !important; }
.border-red-500 { border-color: var(--color-primary-500) !important; }
.border-red-600 { border-color: var(--color-primary-600) !important; }
.border-red-700 { border-color: var(--color-primary-700) !important; }
.border-red-800 { border-color: var(--color-primary-800) !important; }
.border-red-900 { border-color: var(--color-primary-900) !important; }

/* =========================
   ÉTATS HOVER ET FOCUS
   ========================= */

/* Hover backgrounds */
.hover\:bg-red-50:hover { background-color: var(--color-primary-50) !important; }
.hover\:bg-red-100:hover { background-color: var(--color-primary-100) !important; }
.hover\:bg-red-200:hover { background-color: var(--color-primary-200) !important; }
.hover\:bg-red-300:hover { background-color: var(--color-primary-300) !important; }
.hover\:bg-red-400:hover { background-color: var(--color-primary-400) !important; }
.hover\:bg-red-500:hover { background-color: var(--color-primary-500) !important; }
.hover\:bg-red-600:hover { background-color: var(--color-primary-600) !important; }
.hover\:bg-red-700:hover { background-color: var(--color-primary-700) !important; }
.hover\:bg-red-800:hover { background-color: var(--color-primary-800) !important; }
.hover\:bg-red-900:hover { background-color: var(--color-primary-900) !important; }

/* Hover textes */
.hover\:text-red-50:hover { color: var(--color-primary-50) !important; }
.hover\:text-red-100:hover { color: var(--color-primary-100) !important; }
.hover\:text-red-200:hover { color: var(--color-primary-200) !important; }
.hover\:text-red-300:hover { color: var(--color-primary-300) !important; }
.hover\:text-red-400:hover { color: var(--color-primary-400) !important; }
.hover\:text-red-500:hover { color: var(--color-primary-500) !important; }
.hover\:text-red-600:hover { color: var(--color-primary-600) !important; }
.hover\:text-red-700:hover { color: var(--color-primary-700) !important; }
.hover\:text-red-800:hover { color: var(--color-primary-800) !important; }
.hover\:text-red-900:hover { color: var(--color-primary-900) !important; }

/* Hover bordures */
.hover\:border-red-50:hover { border-color: var(--color-primary-50) !important; }
.hover\:border-red-100:hover { border-color: var(--color-primary-100) !important; }
.hover\:border-red-200:hover { border-color: var(--color-primary-200) !important; }
.hover\:border-red-300:hover { border-color: var(--color-primary-300) !important; }
.hover\:border-red-400:hover { border-color: var(--color-primary-400) !important; }
.hover\:border-red-500:hover { border-color: var(--color-primary-500) !important; }
.hover\:border-red-600:hover { border-color: var(--color-primary-600) !important; }
.hover\:border-red-700:hover { border-color: var(--color-primary-700) !important; }
.hover\:border-red-800:hover { border-color: var(--color-primary-800) !important; }
.hover\:border-red-900:hover { border-color: var(--color-primary-900) !important; }

/* Focus states */
.focus\:border-red-500:focus, .focus\:ring-red-500:focus {
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 2px rgba(190, 32, 38, 0.5) !important;
}
.focus\:border-red-600:focus, .focus\:ring-red-600:focus {
  border-color: var(--color-primary-600) !important;
  box-shadow: 0 0 0 2px rgba(190, 32, 38, 0.5) !important;
}

/* =========================
   GRADIENTS
   ========================= */
.from-red-50 { --tw-gradient-from: var(--color-primary-50) !important; }
.from-red-100 { --tw-gradient-from: var(--color-primary-100) !important; }
.from-red-200 { --tw-gradient-from: var(--color-primary-200) !important; }
.from-red-300 { --tw-gradient-from: var(--color-primary-300) !important; }
.from-red-400 { --tw-gradient-from: var(--color-primary-400) !important; }
.from-red-500 { --tw-gradient-from: var(--color-primary-500) !important; }
.from-red-600 { --tw-gradient-from: var(--color-primary-600) !important; }
.from-red-700 { --tw-gradient-from: var(--color-primary-700) !important; }
.from-red-800 { --tw-gradient-from: var(--color-primary-800) !important; }
.from-red-900 { --tw-gradient-from: var(--color-primary-900) !important; }

.to-red-50 { --tw-gradient-to: var(--color-primary-50) !important; }
.to-red-100 { --tw-gradient-to: var(--color-primary-100) !important; }
.to-red-200 { --tw-gradient-to: var(--color-primary-200) !important; }
.to-red-300 { --tw-gradient-to: var(--color-primary-300) !important; }
.to-red-400 { --tw-gradient-to: var(--color-primary-400) !important; }
.to-red-500 { --tw-gradient-to: var(--color-primary-500) !important; }
.to-red-600 { --tw-gradient-to: var(--color-primary-600) !important; }
.to-red-700 { --tw-gradient-to: var(--color-primary-700) !important; }
.to-red-800 { --tw-gradient-to: var(--color-primary-800) !important; }
.to-red-900 { --tw-gradient-to: var(--color-primary-900) !important; }

/* =========================
   CLASSES CUSTOM HARMONIEUSES
   ========================= */

/* Boutons primaires */
.btn-primary {
  background-color: var(--color-primary-600) !important;
  border: 1px solid var(--color-primary-600) !important;
}
.btn-primary:hover {
  background-color: var(--color-primary-700) !important;
  border-color: var(--color-primary-700) !important;
}

/* Classes utilitaires custom */
.text-primary { color: var(--color-primary-600) !important; }
.bg-primary { background-color: var(--color-primary-600) !important; }
.border-primary { border-color: var(--color-primary-600) !important; }

/* Navigation harmonieuse */
.nav-primary {
  background: var(--color-primary-700) !important;
}

/* Navigation spécifique - surcharge forte */
nav.fixed.bg-red-700 {
  background-color: var(--color-primary-700) !important;
}
nav.bg-red-700, nav .bg-red-700 {
  background-color: var(--color-primary-700) !important;
}
nav.bg-red-800, nav .bg-red-800 {
  background-color: var(--color-primary-800) !important;
}
nav.bg-red-900, nav .bg-red-900 {
  background-color: var(--color-primary-900) !important;
}
nav .hover\:bg-red-600:hover {
  background-color: var(--color-primary-600) !important;
}
nav .hover\:bg-red-700:hover {
  background-color: var(--color-primary-700) !important;
}
nav .hover\:bg-red-800:hover {
  background-color: var(--color-primary-800) !important;
}
nav .hover\:bg-red-900:hover {
  background-color: var(--color-primary-900) !important;
}
nav .hover\:text-red-200:hover {
  color: var(--color-primary-200) !important;
}

/* Alert harmonieux avec la couleur primaire */
.alert-primary {
  background-color: var(--color-primary-50) !important;
  border: 1px solid var(--color-primary-200) !important;
  color: var(--color-primary-900) !important;
}

/* Focus harmonieux pour inputs */
.input-primary:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(190, 32, 38, 0.5) !important;
  border-color: var(--color-primary-500) !important;
}

/* =========================
   CLASSES CUSTOM SPÉCIFIQUES AUX PAGES
   ========================= */

/* Boutons de mode (page /fun) */
.mode-btn.active {
  background: var(--color-primary-600) !important;
  color: white !important;
  border-color: var(--color-primary-600) !important;
}
.mode-btn:hover {
  border-color: var(--color-primary-400) !important;
  background: var(--color-primary-50) !important;
}

/* Cartes d'entraînement avec accent coloré */
.training-card:hover {
  border-left: 4px solid var(--color-primary-600) !important;
}
.training-card .category-badge {
  background: var(--color-primary-100) !important;
  color: var(--color-primary-900) !important;
}

/* Badges et pills avec thème */
.badge-primary {
  background: var(--color-primary-600) !important;
  color: white !important;
}
.pill-primary {
  background: var(--color-primary-100) !important;
  color: var(--color-primary-900) !important;
  border: 1px solid var(--color-primary-300) !important;
}

/* Liens avec couleur thématique */
.link-primary {
  color: var(--color-primary-600) !important;
}
.link-primary:hover {
  color: var(--color-primary-700) !important;
}

/* Accents colorés pour cartes et sections */
.card-accent {
  border-left: 4px solid var(--color-primary-600) !important;
}
.section-accent {
  background: linear-gradient(90deg, var(--color-primary-50) 0%, transparent 100%) !important;
  border-left: 3px solid var(--color-primary-600) !important;
}