/* ========================================
   THEME - Variables de couleurs et thèmes
   ======================================== */

/* ------------------------------
   Palette HSL - Mode clair (défaut)
   ------------------------------ */
:root {
  /* Couleurs de base */
  --bg: hsl(120 20% 98%);
  --bg-muted: hsl(120 20% 96%);
  --card: hsl(120 20% 100%);
  
  /* Texte */
  --text: hsl(210 20% 12%);
  --text-muted: hsl(210 10% 35%);
  
  /* Couleurs primaires (vert) */
  --primary: hsl(150 60% 40%); /* vert feuille */
  --primary-2: hsl(160 60% 35%); /* vert forêt */
  --primary-3: hsl(145 70% 45%); /* vert nature vif */
  --ring: hsla(150, 60%, 40%, 0.35);
  
  /* Bordures et effets */
  --border: hsl(210 16% 90%);
  --shadow: 0 8px 28px rgba(0,0,0,0.08);
  --glass: hsla(0,0%,100%,0.55);
  --overlay: hsla(120, 20%, 90%, 0.35);
  
  /* Status */
  --status-ok: hsl(160 55% 35%);
  --status-warn: hsl(40 85% 55%);
  --status-soon: hsl(210 10% 70%);
  
  /* Autres */
  --table-hover: hsla(210, 10%, 5%, 0.02);
}

/* ------------------------------
   Palette HSL - Mode sombre
   ------------------------------ */
html[data-theme="dark"] {
  /* Couleurs de base */
  --bg: hsl(218 56% 6%);
  --bg-muted: hsl(220 40% 10%);
  --card: hsl(220 35% 12%);
  
  /* Texte */
  --text: hsl(210 22% 98%);
  --text-muted: hsl(210 15% 70%);
  
  /* Couleurs primaires (vert) */
  --primary: hsl(150 60% 45%);
  --primary-2: hsl(160 60% 38%);
  --primary-3: hsl(145 70% 48%);
  --ring: hsla(150, 60%, 50%, 0.35);
  
  /* Bordures et effets */
  --border: hsl(220 30% 18%);
  --shadow: 0 16px 48px rgba(0,0,0,0.42);
  --glass: hsla(0,0%,100%,0.06);
  --overlay: hsla(220, 65%, 6%, 0.50);
  
  /* Status */
  --status-ok: hsl(160 55% 35%);
  --status-warn: hsl(40 85% 55%);
  --status-soon: hsl(210 10% 60%);
  
  /* Autres */
  --table-hover: hsla(0,0%,100%,0.03);
}