/* Variables de couleurs globales */
:root {
  --background-primary: #042036;
  --background-secondary: #032541;
  --background-tertiary: #faf32a;
  --background-tertiary-hover: rgba(250, 243, 42, 0.8);
  --background-tertiary-light: #d2be00;

  /* Couleurs principales */
  --color-primary: #042036;
  --color-primary-light: #eff6ff;
  --color-secondary: #faf32a;
  --color-tertiary: #506dac;
  --color-tertiary-dark: #3b507e;

  --color-border: rgba(217, 217, 217, 0.15);
  --color-semi-border: rgba(217, 217, 217, 0.5);
  --color-border-dark: rgba(217, 217, 217, 1);

  /* Couleurs de statut */
  --color-success: #059669;
  --color-success-light: #ecfdf5;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;

  /* Nuances de rouge */
  --color-red-50: #fdf5f5;
  --color-red-100: #fbe7e7;
  --color-red-200: #f5d0d0;
  --color-red-300: #eba3a3; /* WP rouge clair */
  --color-red-400: #e07777;
  --color-red-500: #d14343;
  --color-red-600: #bc2c2c;
  --color-red-700: #961f1f;
  --color-red-800: #771818;
  --color-red-900: #570000; /* WP rouge foncé */
  --color-red-950: #450000;

  /* Nuances de vert */
  --color-green-50: #f7faf4;
  --color-green-100: #e8f0e8;
  --color-green-200: #c6e1c6; /* WP vert clair */
  --color-green-300: #a8d1a8;
  --color-green-400: #7ab07a;
  --color-green-500: #598c59;
  --color-green-600: #466e46;
  --color-green-700: #395939;
  --color-green-800: #2c4700; /* WP vert foncé */
  --color-green-900: #213600;
  --color-green-950: #162400;

  /* Nuances de bleu WordPress */
  --color-blue-50: #f5f8fa;
  --color-blue-100: #e5eef4;
  --color-blue-200: #c8d7e1; /* WP bleu clair */
  --color-blue-300: #a7c3d3;
  --color-blue-400: #7c9eb3;
  --color-blue-500: #507b96;
  --color-blue-600: #003d66; /* WP bleu foncé */
  --color-blue-700: #003356;
  --color-blue-800: #002847;
  --color-blue-900: #001f38;
  --color-blue-950: #001524;

  /* Nuances de jaune WordPress */
  --color-yellow-50: #fefaf2;
  --color-yellow-100: #fdf3e0;
  --color-yellow-200: #f8dda7; /* WP jaune clair */
  --color-yellow-300: #f3c87d;
  --color-yellow-400: #e5ac4c;
  --color-yellow-500: #cb8d2e;
  --color-yellow-600: #a36a1a;
  --color-yellow-700: #805015;
  --color-yellow-800: #573b00; /* WP jaune foncé */
  --color-yellow-900: #422d00;
  --color-yellow-950: #2b1d00;

  /* Nuances de gris WordPress */
  --color-gray-50: #f9f9f9;
  --color-gray-100: #f4f4f4;
  --color-gray-200: #e5e5e5; /* WP gris clair */
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #595959;
  --color-gray-700: #454545; /* WP gris foncé */
  --color-gray-800: #383838;
  --color-gray-900: #262626;
  --color-gray-950: #171717;
}

/* Tailles de texte */
.text-xs {
  font-size: 12px !important;
  line-height: 16px !important;
}

.text-sm {
  font-size: 14px !important;
  line-height: 20px !important;
}

.text-base {
  font-size: 16px !important;
  line-height: 24px !important;
}

.text-lg {
  font-size: 18px !important;
  line-height: 28px !important;
}

.text-xl {
  font-size: 20px !important;
  line-height: 30px !important;
}

/* Poids de la police */
.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

/* Espacement */
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 4px !important;
}
.mt-2 {
  margin-top: 8px !important;
}
.mt-3 {
  margin-top: 12px !important;
}
.mt-4 {
  margin-top: 16px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 4px !important;
}
.mb-2 {
  margin-bottom: 8px !important;
}
.mb-3 {
  margin-bottom: 12px !important;
}
.mb-4 {
  margin-bottom: 16px !important;
}

.ml-0 {
  margin-left: 0 !important;
}
.ml-1 {
  margin-left: 4px !important;
}
.ml-2 {
  margin-left: 8px !important;
}
.ml-3 {
  margin-left: 12px !important;
}
.ml-4 {
  margin-left: 16px !important;
}

.mr-0 {
  margin-right: 0 !important;
}
.mr-1 {
  margin-right: 4px !important;
}
.mr-2 {
  margin-right: 8px !important;
}
.mr-3 {
  margin-right: 12px !important;
}
.mr-4 {
  margin-right: 16px !important;
}

/* Alignement du texte */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

/* Couleurs de texte */
.text-primary {
  color: var(--color-primary) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-gray {
  color: var(--color-gray-500) !important;
}

/* Classes de texte pour les nuances de gris */
.text-gray-50 {
  color: var(--color-gray-50) !important;
}
.text-gray-100 {
  color: var(--color-gray-100) !important;
}
.text-gray-200 {
  color: var(--color-gray-200) !important;
}
.text-gray-300 {
  color: var(--color-gray-300) !important;
}
.text-gray-400 {
  color: var(--color-gray-400) !important;
}
.text-gray-500 {
  color: var(--color-gray-500) !important;
}
.text-gray-600 {
  color: var(--color-gray-600) !important;
}
.text-gray-700 {
  color: var(--color-gray-700) !important;
}
.text-gray-800 {
  color: var(--color-gray-800) !important;
}
.text-gray-900 {
  color: var(--color-gray-900) !important;
}

/* Arrière-plans */
.bg-primary {
  background-color: var(--color-primary-light) !important;
}

.bg-success {
  background-color: var(--color-success-light) !important;
}

.bg-danger {
  background-color: var(--color-danger-light) !important;
}

.bg-warning {
  background-color: var(--color-warning-light) !important;
}

.bg-gray {
  background-color: var(--color-gray-100) !important;
}

/* Classes de fond pour les nuances de gris */
.bg-gray-50 {
  background-color: var(--color-gray-50) !important;
}
.bg-gray-100 {
  background-color: var(--color-gray-100) !important;
}
.bg-gray-200 {
  background-color: var(--color-gray-200) !important;
}
.bg-gray-300 {
  background-color: var(--color-gray-300) !important;
}
.bg-gray-400 {
  background-color: var(--color-gray-400) !important;
}
.bg-gray-500 {
  background-color: var(--color-gray-500) !important;
}
.bg-gray-600 {
  background-color: var(--color-gray-600) !important;
}
.bg-gray-700 {
  background-color: var(--color-gray-700) !important;
}
.bg-gray-800 {
  background-color: var(--color-gray-800) !important;
}
.bg-gray-900 {
  background-color: var(--color-gray-900) !important;
}

/* Classes de texte pour chaque nuance */
/* Rouge */
.text-red-50 {
  color: var(--color-red-50) !important;
}
.text-red-100 {
  color: var(--color-red-100) !important;
}
.text-red-200 {
  color: var(--color-red-200) !important;
}
.text-red-300 {
  color: var(--color-red-300) !important;
}
.text-red-400 {
  color: var(--color-red-400) !important;
}
.text-red-500 {
  color: var(--color-red-500) !important;
}
.text-red-600 {
  color: var(--color-red-600) !important;
}
.text-red-700 {
  color: var(--color-red-700) !important;
}
.text-red-800 {
  color: var(--color-red-800) !important;
}
.text-red-900 {
  color: var(--color-red-900) !important;
}
.text-red-950 {
  color: var(--color-red-950) !important;
}

/* Vert */
.text-green-50 {
  color: var(--color-green-50) !important;
}
.text-green-100 {
  color: var(--color-green-100) !important;
}
.text-green-200 {
  color: var(--color-green-200) !important;
}
.text-green-300 {
  color: var(--color-green-300) !important;
}
.text-green-400 {
  color: var(--color-green-400) !important;
}
.text-green-500 {
  color: var(--color-green-500) !important;
}
.text-green-600 {
  color: var(--color-green-600) !important;
}
.text-green-700 {
  color: var(--color-green-700) !important;
}
.text-green-800 {
  color: var(--color-green-800) !important;
}
.text-green-900 {
  color: var(--color-green-900) !important;
}
.text-green-950 {
  color: var(--color-green-950) !important;
}

/* Bleu */
.text-blue-50 {
  color: var(--color-blue-50) !important;
}
.text-blue-100 {
  color: var(--color-blue-100) !important;
}
.text-blue-200 {
  color: var(--color-blue-200) !important;
}
.text-blue-300 {
  color: var(--color-blue-300) !important;
}
.text-blue-400 {
  color: var(--color-blue-400) !important;
}
.text-blue-500 {
  color: var(--color-blue-500) !important;
}
.text-blue-600 {
  color: var(--color-blue-600) !important;
}
.text-blue-700 {
  color: var(--color-blue-700) !important;
}
.text-blue-800 {
  color: var(--color-blue-800) !important;
}
.text-blue-900 {
  color: var(--color-blue-900) !important;
}
.text-blue-950 {
  color: var(--color-blue-950) !important;
}

/* Classes de fond pour chaque nuance */
/* Rouge */
.bg-red-50 {
  background-color: var(--color-red-50) !important;
}
.bg-red-100 {
  background-color: var(--color-red-100) !important;
}
.bg-red-200 {
  background-color: var(--color-red-200) !important;
}
.bg-red-300 {
  background-color: var(--color-red-300) !important;
}
.bg-red-400 {
  background-color: var(--color-red-400) !important;
}
.bg-red-500 {
  background-color: var(--color-red-500) !important;
}
.bg-red-600 {
  background-color: var(--color-red-600) !important;
}
.bg-red-700 {
  background-color: var(--color-red-700) !important;
}
.bg-red-800 {
  background-color: var(--color-red-800) !important;
}
.bg-red-900 {
  background-color: var(--color-red-900) !important;
}
.bg-red-950 {
  background-color: var(--color-red-950) !important;
}

/* Vert */
.bg-green-50 {
  background-color: var(--color-green-50) !important;
}
.bg-green-100 {
  background-color: var(--color-green-100) !important;
}
.bg-green-200 {
  background-color: var(--color-green-200) !important;
}
.bg-green-300 {
  background-color: var(--color-green-300) !important;
}
.bg-green-400 {
  background-color: var(--color-green-400) !important;
}
.bg-green-500 {
  background-color: var(--color-green-500) !important;
}
.bg-green-600 {
  background-color: var(--color-green-600) !important;
}
.bg-green-700 {
  background-color: var(--color-green-700) !important;
}
.bg-green-800 {
  background-color: var(--color-green-800) !important;
}
.bg-green-900 {
  background-color: var(--color-green-900) !important;
}
.bg-green-950 {
  background-color: var(--color-green-950) !important;
}

/* Bleu */
.bg-blue-50 {
  background-color: var(--color-blue-50) !important;
}
.bg-blue-100 {
  background-color: var(--color-blue-100) !important;
}
.bg-blue-200 {
  background-color: var(--color-blue-200) !important;
}
.bg-blue-300 {
  background-color: var(--color-blue-300) !important;
}
.bg-blue-400 {
  background-color: var(--color-blue-400) !important;
}
.bg-blue-500 {
  background-color: var(--color-blue-500) !important;
}
.bg-blue-600 {
  background-color: var(--color-blue-600) !important;
}
.bg-blue-700 {
  background-color: var(--color-blue-700) !important;
}
.bg-blue-800 {
  background-color: var(--color-blue-800) !important;
}
.bg-blue-900 {
  background-color: var(--color-blue-900) !important;
}
.bg-blue-950 {
  background-color: var(--color-blue-950) !important;
}