/* Configuration CSS personnalisée pour BBB */
/* 
   Note: Ce fichier utilise du CSS standard au lieu des directives Tailwind (@tailwind, @apply)
   car l'application utilise le CDN Tailwind qui ne supporte pas ces directives.
   
   Pour éviter l'avertissement "cdn.tailwindcss.com should not be used in production",
   il faudrait migrer vers une installation locale de Tailwind avec PostCSS.
*/

/* Palette de couleurs BBB harmonieuse avec #BE2026 comme primaire */
:root {
  /* Rouge primaire - Couleur principale du club */
  --color-primary: #BE2026;
  --color-primary-50: #FEF2F2;
  --color-primary-100: #FEE2E2;
  --color-primary-200: #FECACA;
  --color-primary-300: #FCA5A5;
  --color-primary-400: #F87171;
  --color-primary-500: #EF4444;
  --color-primary-600: #BE2026;
  --color-primary-700: #A21B20;
  --color-primary-800: #86161A;
  --color-primary-900: #701015;

  /* Gris chauds complémentaires */
  --color-neutral-50: #FAFAF9;
  --color-neutral-100: #F5F5F4;
  --color-neutral-200: #E7E5E4;
  --color-neutral-300: #D6D3D1;
  --color-neutral-400: #A8A29E;
  --color-neutral-500: #78716C;
  --color-neutral-600: #57534E;
  --color-neutral-700: #44403C;
  --color-neutral-800: #292524;
  --color-neutral-900: #1C1917;

  /* Bleu-gris pour contraste et sections admin */
  --color-secondary: #475569;
  --color-secondary-50: #F8FAFC;
  --color-secondary-100: #F1F5F9;
  --color-secondary-200: #E2E8F0;
  --color-secondary-300: #CBD5E1;
  --color-secondary-400: #94A3B8;
  --color-secondary-500: #64748B;
  --color-secondary-600: #475569;
  --color-secondary-700: #334155;
  --color-secondary-800: #1E293B;
  --color-secondary-900: #0F172A;

  /* Couleurs d'état harmonieuses */
  --color-success: #16A34A;
  --color-success-bg: #DCFCE7;
  --color-warning: #CA8A04;
  --color-warning-bg: #FEF3C7;
  --color-error: #DC2626;
  --color-error-bg: #FEE2E2;
  --color-info: #2563EB;
  --color-info-bg: #DBEAFE;
}

/* Classes utilitaires personnalisées */
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }

.text-secondary { color: var(--color-secondary); }
.bg-secondary { background-color: var(--color-secondary); }
.border-secondary { border-color: var(--color-secondary); }

/* Boutons personnalisés */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--color-primary-700);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}
.btn-secondary:hover {
  background-color: var(--color-secondary-700);
}

.btn-outline-primary {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: transparent;
  transition: all 0.2s ease;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: white;
}

/* Messages d'alerte harmonieux */
.alert-success {
  background-color: rgb(240 253 244);
  border: 1px solid rgb(187 247 208);
  color: rgb(22 101 52);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.alert-error {
  background-color: rgb(254 242 242);
  border: 1px solid rgb(254 202 202);
  color: rgb(153 27 27);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.alert-warning {
  background-color: rgb(254 252 232);
  border: 1px solid rgb(254 240 138);
  color: rgb(146 64 14);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.alert-info {
  background-color: rgb(239 246 255);
  border: 1px solid rgb(147 197 253);
  color: rgb(30 58 138);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

/* Navigation personnalisée */
.nav-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-700) 100%);
}

.nav-link {
  color: white;
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: rgb(254 202 202);
}

/* Footer harmonieux */
.footer-primary {
  background: linear-gradient(135deg, var(--color-secondary-800) 0%, var(--color-secondary-900) 100%);
}

/* Focus states harmonieux */
.focus-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(190, 32, 38, 0.5);
}

/* Gradients harmonieux */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-700) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-700) 100%);
}

/* Cards avec ombres harmonieuses */
.card-primary {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-neutral-200);
  transition: box-shadow 0.3s ease;
}
.card-primary:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Textes harmonieux */
.text-muted {
  color: var(--color-neutral-600);
}

.text-heading {
  color: var(--color-neutral-900);
  font-weight: bold;
}

/* Formulaires harmonieux */
.input-primary {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: 0.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
  border-color: var(--color-primary-500);
}

.select-primary {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: 0.5rem;
  background-color: white;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.select-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
  border-color: var(--color-primary-500);
}

/* Sections colorées pour organisation */
.section-info {
  background-color: rgb(239 246 255);
  border-left: 4px solid rgb(96 165 250);
}

.section-success {
  background-color: rgb(240 253 244);
  border-left: 4px solid rgb(74 222 128);
}

.section-warning {
  background-color: rgb(254 252 232);
  border-left: 4px solid rgb(251 191 36);
}

.section-primary {
  background-color: rgb(254 242 242);
  border-left: 4px solid var(--color-primary);
}