:root {
  /* =========================================
   * CONFIGURATION DE BASE - OKLCH
   * ========================================= */
  --primary-l: 0.34;
  --primary-c: 0.18;
  --primary-h: 304;
  --accent-mode: 150;
  
  /* =========================================
   * COULEUR PRIMAIRE (OKLCH)
   * ========================================= */
  --color-primary-base: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
  
  --color-primary-50:  oklch(0.97 calc(var(--primary-c) * 0.3) var(--primary-h));
  --color-primary-100: oklch(0.95 calc(var(--primary-c) * 0.4) var(--primary-h));
  --color-primary-200: oklch(0.90 calc(var(--primary-c) * 0.6) var(--primary-h));
  --color-primary-300: oklch(0.82 calc(var(--primary-c) * 0.8) var(--primary-h));
  --color-primary-400: oklch(0.75 calc(var(--primary-c) * 0.9) var(--primary-h));
  --color-primary-500: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
  --color-primary-600: oklch(0.55 calc(var(--primary-c) * 1.05) var(--primary-h));
  --color-primary-700: oklch(0.45 calc(var(--primary-c) * 0.95) var(--primary-h));
  --color-primary-800: oklch(0.35 calc(var(--primary-c) * 0.85) var(--primary-h));
  --color-primary-900: oklch(0.28 calc(var(--primary-c) * 0.7) var(--primary-h));
  --color-primary-950: oklch(0.20 calc(var(--primary-c) * 0.5) var(--primary-h));
  
  /* =========================================
   * COULEUR ACCENT - Harmonie: Complémentaire harmonieuse
   * ========================================= */
  --accent-h: calc(var(--primary-h) + var(--accent-mode));
  
  --color-accent-50:  oklch(0.97 calc(var(--primary-c) * 0.3) var(--accent-h));
  --color-accent-100: oklch(0.95 calc(var(--primary-c) * 0.4) var(--accent-h));
  --color-accent-200: oklch(0.90 calc(var(--primary-c) * 0.6) var(--accent-h));
  --color-accent-300: oklch(0.82 calc(var(--primary-c) * 0.8) var(--accent-h));
  --color-accent-400: oklch(0.75 calc(var(--primary-c) * 0.9) var(--accent-h));
  --color-accent-500: oklch(var(--primary-l) var(--primary-c) var(--accent-h));
  --color-accent-600: oklch(0.55 calc(var(--primary-c) * 1.05) var(--accent-h));
  --color-accent-700: oklch(0.45 calc(var(--primary-c) * 0.95) var(--accent-h));
  --color-accent-800: oklch(0.35 calc(var(--primary-c) * 0.85) var(--accent-h));
  --color-accent-900: oklch(0.28 calc(var(--primary-c) * 0.7) var(--accent-h));
  --color-accent-950: oklch(0.20 calc(var(--primary-c) * 0.5) var(--accent-h));
  
  /* =========================================
   * COULEURS NEUTRES (harmonisées)
   * ========================================= */
  --color-neutral-50:  oklch(0.98 0.005 var(--primary-h));
  --color-neutral-100: oklch(0.96 0.005 var(--primary-h));
  --color-neutral-200: oklch(0.92 0.008 var(--primary-h));
  --color-neutral-300: oklch(0.86 0.010 var(--primary-h));
  --color-neutral-400: oklch(0.70 0.012 var(--primary-h));
  --color-neutral-500: oklch(0.55 0.012 var(--primary-h));
  --color-neutral-600: oklch(0.42 0.012 var(--primary-h));
  --color-neutral-700: oklch(0.32 0.012 var(--primary-h));
  --color-neutral-800: oklch(0.24 0.012 var(--primary-h));
  --color-neutral-900: oklch(0.18 0.010 var(--primary-h));
  --color-neutral-950: oklch(0.12 0.008 var(--primary-h));
  
  /* =========================================
   * COULEURS SÉMANTIQUES - Success
   * ========================================= */
  --success-h: 145;
  
  --color-success-50:  oklch(0.97 0.05 var(--success-h));
  --color-success-100: oklch(0.94 0.08 var(--success-h));
  --color-success-200: oklch(0.89 0.12 var(--success-h));
  --color-success-300: oklch(0.82 0.15 var(--success-h));
  --color-success-400: oklch(0.74 0.18 var(--success-h));
  --color-success-500: oklch(0.65 0.20 var(--success-h));
  --color-success-600: oklch(0.55 0.19 var(--success-h));
  --color-success-700: oklch(0.45 0.17 var(--success-h));
  --color-success-800: oklch(0.35 0.14 var(--success-h));
  --color-success-900: oklch(0.28 0.11 var(--success-h));
  --color-success-950: oklch(0.20 0.08 var(--success-h));
  
  /* =========================================
   * COULEURS SÉMANTIQUES - Warning
   * ========================================= */
  --warning-h: 70;
  
  --color-warning-50:  oklch(0.97 0.04 var(--warning-h));
  --color-warning-100: oklch(0.94 0.08 var(--warning-h));
  --color-warning-200: oklch(0.89 0.13 var(--warning-h));
  --color-warning-300: oklch(0.82 0.17 var(--warning-h));
  --color-warning-400: oklch(0.76 0.19 var(--warning-h));
  --color-warning-500: oklch(0.70 0.20 var(--warning-h));
  --color-warning-600: oklch(0.62 0.19 var(--warning-h));
  --color-warning-700: oklch(0.52 0.16 var(--warning-h));
  --color-warning-800: oklch(0.42 0.13 var(--warning-h));
  --color-warning-900: oklch(0.34 0.10 var(--warning-h));
  --color-warning-950: oklch(0.25 0.07 var(--warning-h));
  
  /* =========================================
   * COULEURS SÉMANTIQUES - Error
   * ========================================= */
  --error-h: 25;
  
  --color-error-50:  oklch(0.97 0.03 var(--error-h));
  --color-error-100: oklch(0.94 0.06 var(--error-h));
  --color-error-200: oklch(0.89 0.11 var(--error-h));
  --color-error-300: oklch(0.82 0.16 var(--error-h));
  --color-error-400: oklch(0.73 0.20 var(--error-h));
  --color-error-500: oklch(0.64 0.22 var(--error-h));
  --color-error-600: oklch(0.55 0.22 var(--error-h));
  --color-error-700: oklch(0.46 0.19 var(--error-h));
  --color-error-800: oklch(0.38 0.16 var(--error-h));
  --color-error-900: oklch(0.31 0.13 var(--error-h));
  --color-error-950: oklch(0.23 0.09 var(--error-h));
}

/* =========================================
 * EXEMPLE D'UTILISATION
 * ========================================= */

/*
.button-primary {
  background-color: var(--color-primary-500);
  color: white;
}

.button-primary:hover {
  background-color: var(--color-primary-600);
}

.alert-success {
  background-color: var(--color-success-50);
  color: var(--color-success-700);
  border-left: 3px solid var(--color-success-500);
}
*/