/* ============================================================
 * STOUX — THEME COULEURS
 * ============================================================
 * Pour changer les couleurs du site, modifier UNIQUEMENT les
 * 6 variables HSL ci-dessous (primary + secondary).
 * Toutes les variantes dark/light/hover sont auto-calculées
 * par décalage relatif autour de la teinte de BASE.
 *
 * FORMAT HSL :
 *   H = Teinte    (0–360)  ex: 243 = indigo, 25 = orange, 152 = vert
 *   S = Saturation (0–100%)
 *   L = Luminosité de la teinte BASE (niveau 600)
 *
 * CONSEIL : garder L entre 30% et 65% pour un contraste correct.
 * ============================================================ */

:root {

  /* ---- COULEUR PRIMAIRE : Bleu #2a4797 -------------------------
   * 🎨 CHANGER CES 3 VALEURS pour modifier toute la palette primaire
   * ------------------------------------------------------------ */
  --primary-h: 224;
  --primary-s: 56%;
  --primary-l: 38%;

  /* Palette primaire — décalages relatifs autour de la base (ne pas modifier) */
  --color-primary-50:  hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 36%));
  --color-primary-100: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 28%));
  --color-primary-200: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%));
  --color-primary-300: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 13%));
  --color-primary-400: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 7%));
  --color-primary-500: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 3%));
  --color-primary-600: hsl(var(--primary-h), var(--primary-s), var(--primary-l));  /* BASE */
  --color-primary-700: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%));
  --color-primary-800: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 14%));
  --color-primary-900: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 19%));

  /* Alias sémantiques primaire */
  --color-primary-light: var(--color-primary-400);
  --color-primary:       var(--color-primary-600);
  --color-primary-dark:  var(--color-primary-800);
  --color-primary-hover: var(--color-primary-700);
  --color-primary-text:  #ffffff;


  /* ---- COULEUR SECONDAIRE : Orange --------------------------------
   * 🎨 CHANGER CES 3 VALEURS pour modifier toute la palette secondaire
   * ------------------------------------------------------------ */
  --secondary-h: 25;
  --secondary-s: 94%;
  --secondary-l: 53%;

  /* Palette secondaire — décalages relatifs (ne pas modifier) */
  --color-secondary-50:  hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 36%));
  --color-secondary-100: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 28%));
  --color-secondary-200: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%));
  --color-secondary-300: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 13%));
  --color-secondary-400: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 7%));
  --color-secondary-500: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 3%));
  --color-secondary-600: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));  /* BASE */
  --color-secondary-700: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 8%));
  --color-secondary-800: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 14%));
  --color-secondary-900: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 19%));

  /* Alias sémantiques secondaire */
  --color-secondary-light: var(--color-secondary-400);
  --color-secondary:       var(--color-secondary-600);
  --color-secondary-dark:  var(--color-secondary-800);
  --color-secondary-hover: var(--color-secondary-700);
  --color-secondary-text:  #ffffff;


  /* ---- COULEURS NEUTRES (fond, surfaces, textes) -------------- */
  --color-bg:         #f4f7f9;
  --color-surface:    #ffffff;
  --color-border:     #e5e7eb;
  --color-text:       #111827;
  --color-text-muted: #6b7280;
  --color-sidebar-bg: #ffffff;


  /* ---- COULEUR DANGER (boutons annuler, erreurs) -------------- */
  --color-danger:       #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-ring:  #ef4444;
  --color-danger-text:  #ffffff;

}