/*
 * Design system monochrome — Patrouille Stoneham
 * Couleur primaire unique (#A3292E) + nuances + gris neutres.
 * Charge ce fichier APRES bootstrap.min.css et AVANT le CSS de page,
 * pour surcharger les tokens Bootstrap et les couleurs contextuelles.
 */

:root {
  /* Primaire (rouge bordeaux) */
  --primary-50:  #fbeded;
  --primary-100: #f5d3d4;
  --primary-200: #e9a8ab;
  --primary-300: #d97d81;
  --primary-400: #c2565b;
  --primary-500: #a3292e; /* couleur de base demandee */
  --primary-600: #8a2226;
  --primary-700: #6e1b1f;
  --primary-800: #551519;
  --primary-900: #3b0f12;
  --primary: var(--primary-500);
  --primary-rgb: 163, 41, 46;

  /* Neutres (gris pur, sans teinte bleutee) */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;

  /* Tokens de design */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .16);
  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Surcharge des tokens globaux Bootstrap (utilises par bg-*, text-*, border-*) */
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-link-color: var(--gray-700);
  --bs-link-color-rgb: 63, 63, 70;
  --bs-link-hover-color: var(--primary-500);
  --bs-link-hover-color-rgb: var(--primary-rgb);

  --bs-success: var(--gray-700);
  --bs-success-rgb: 63, 63, 70;
  --bs-danger: var(--primary-500);
  --bs-danger-rgb: var(--primary-rgb);
  --bs-warning: var(--gray-500);
  --bs-warning-rgb: 113, 113, 122;
  --bs-info: var(--gray-500);
  --bs-info-rgb: 113, 113, 122;
  --bs-secondary: var(--gray-600);
  --bs-secondary-rgb: 82, 82, 91;
}

/* ── Boutons pleins ── */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary-500);
  --bs-btn-border-color: var(--primary-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-600);
  --bs-btn-hover-border-color: var(--primary-600);
  --bs-btn-active-bg: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-700);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--gray-700);
  --bs-btn-border-color: var(--gray-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gray-800);
  --bs-btn-hover-border-color: var(--gray-800);
  --bs-btn-active-bg: var(--gray-900);
  --bs-btn-active-border-color: var(--gray-900);
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--primary-500);
  --bs-btn-border-color: var(--primary-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-600);
  --bs-btn-hover-border-color: var(--primary-600);
  --bs-btn-active-bg: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-700);
}
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--gray-400);
  --bs-btn-border-color: var(--gray-400);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gray-500);
  --bs-btn-hover-border-color: var(--gray-500);
  --bs-btn-active-bg: var(--gray-600);
  --bs-btn-active-border-color: var(--gray-600);
}
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--gray-500);
  --bs-btn-border-color: var(--gray-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gray-600);
  --bs-btn-hover-border-color: var(--gray-600);
  --bs-btn-active-bg: var(--gray-700);
  --bs-btn-active-border-color: var(--gray-700);
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--gray-600);
  --bs-btn-border-color: var(--gray-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gray-700);
  --bs-btn-hover-border-color: var(--gray-700);
  --bs-btn-active-bg: var(--gray-800);
  --bs-btn-active-border-color: var(--gray-800);
}

/* ── Boutons contour (outline) ── */
.btn-outline-primary { --bs-btn-color: var(--primary-500); --bs-btn-border-color: var(--primary-500); --bs-btn-hover-bg: var(--primary-500); --bs-btn-hover-border-color: var(--primary-500); --bs-btn-active-bg: var(--primary-600); --bs-btn-active-border-color: var(--primary-600); }
.btn-outline-success  { --bs-btn-color: var(--gray-700); --bs-btn-border-color: var(--gray-400); --bs-btn-hover-bg: var(--gray-700); --bs-btn-hover-border-color: var(--gray-700); --bs-btn-active-bg: var(--gray-800); --bs-btn-active-border-color: var(--gray-800); }
.btn-outline-danger   { --bs-btn-color: var(--primary-500); --bs-btn-border-color: var(--primary-500); --bs-btn-hover-bg: var(--primary-500); --bs-btn-hover-border-color: var(--primary-500); --bs-btn-active-bg: var(--primary-600); --bs-btn-active-border-color: var(--primary-600); }
.btn-outline-warning  { --bs-btn-color: var(--gray-600); --bs-btn-border-color: var(--gray-400); --bs-btn-hover-bg: var(--gray-400); --bs-btn-hover-border-color: var(--gray-400); --bs-btn-active-bg: var(--gray-500); --bs-btn-active-border-color: var(--gray-500); }
.btn-outline-info     { --bs-btn-color: var(--gray-600); --bs-btn-border-color: var(--gray-500); --bs-btn-hover-bg: var(--gray-500); --bs-btn-hover-border-color: var(--gray-500); --bs-btn-active-bg: var(--gray-600); --bs-btn-active-border-color: var(--gray-600); }
.btn-outline-secondary{ --bs-btn-color: var(--gray-600); --bs-btn-border-color: var(--gray-500); --bs-btn-hover-bg: var(--gray-600); --bs-btn-hover-border-color: var(--gray-600); --bs-btn-active-bg: var(--gray-700); --bs-btn-active-border-color: var(--gray-700); }

/* ── Alertes ── */
.alert-success { --bs-alert-color: var(--gray-800); --bs-alert-bg: var(--gray-100); --bs-alert-border-color: var(--gray-300); }
.alert-info     { --bs-alert-color: var(--gray-700); --bs-alert-bg: var(--gray-50);  --bs-alert-border-color: var(--gray-200); }
.alert-danger  { --bs-alert-color: var(--primary-800); --bs-alert-bg: var(--primary-50); --bs-alert-border-color: var(--primary-300); }
.alert-warning { --bs-alert-color: var(--gray-800); --bs-alert-bg: var(--gray-100); --bs-alert-border-color: var(--gray-300); }
.alert-success .alert-link,
.alert-info .alert-link,
.alert-warning .alert-link { color: var(--gray-900); }
.alert-danger .alert-link { color: var(--primary-900); }

/* ── Icones dans les boutons (remplacent les emojis, legerement agrandies) ── */
.btn > i.fa-solid,
.btn > i.fa-regular {
  font-size: 1.15em;
  vertical-align: -0.08em;
}

/* ── Focus ring / selection ── */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-300);
  box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .2);
}
::selection { background: var(--gray-300); }