:root {
  /* Thème sombre (par défaut) - CONSERVÉ INTACT */
  --font-head: "Poppins", system-ui;
  --font-body: "Poppins", system-ui;
  --clr-bg: #0b1220;
  --clr-surface: #0f172a;
  --clr-primary: #57b5e7;
  --clr-accent: #e879f9;
  --clr-text: #e5e7eb;
  --radius: 16px;
  --shadow: 0 6px 30px rgba(99, 102, 241, 0.25);
  --bg-image: url("/assets/bg-hectoflex.webp");
  
  /* Variables unifiées pour thèmes - DARK (CONSERVÉES) */
  --bg-primary: #000000;
  --bg-secondary: #111827;
  --bg-card: #1f2937;
  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --border-color: #374151;
  --accent-color: #f97316;
}

/* ================================================================== */
/* NOUVEAU THÈME CLAIR - Inspiré de l'affiche HFCustoms */
/* ================================================================== */

/* Variables data-theme="light" selon la palette HFCustoms */
:root[data-theme="light"] {
  /* Nouvelles variables sémantiques HFCustoms */
  --bg: #F5F6F7;
  --bg-image: linear-gradient(135deg, 
    #E8E9EA 0%, 
    #D4D6D8 15%, 
    #C8CACC 30%, 
    #DADCDE 45%, 
    #E2E4E6 60%, 
    #D8DADC 75%, 
    #EAEBEC 90%, 
    #F0F1F2 100%),
    radial-gradient(circle at 20% 80%, rgba(200, 202, 204, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(232, 233, 234, 0.4) 0%, transparent 50%);
  --surface: #FFFFFF;
  --text: #121417;
  --muted: #555B63;
  --subtle: #2B2F35;
  --border: #D7DBE0;
  --accent: #F3691A;
  --accent-contrast: #FFFFFF;
  --shadow: 0 6px 24px rgba(18,20,23,0.08);
  
  /* Mapping des anciennes variables pour compatibilité */
  --clr-bg: #F5F6F7;
  --clr-surface: #FFFFFF;
  --clr-text: #121417;
  --clr-primary: #F3691A;
  --clr-accent: #F3691A;
  
  /* Variables unifiées remappées */
  --bg-primary: #F5F6F7;
  --bg-secondary: #FFFFFF;
  --bg-card: #FFFFFF;
  --text-primary: #121417;
  --text-secondary: #2B2F35;
  --text-muted: #555B63;
  --border-color: #D7DBE0;
  --accent-color: #F3691A;
}

/* Support prefers-color-scheme pour auto-détection */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { 
    --bg: #F5F6F7;
    --bg-image: linear-gradient(135deg, 
      #E8E9EA 0%, 
      #D4D6D8 15%, 
      #C8CACC 30%, 
      #DADCDE 45%, 
      #E2E4E6 60%, 
      #D8DADC 75%, 
      #EAEBEC 90%, 
      #F0F1F2 100%),
      radial-gradient(circle at 20% 80%, rgba(200, 202, 204, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(232, 233, 234, 0.4) 0%, transparent 50%);
    --surface: #FFFFFF;
    --text: #121417;
    --muted: #555B63;
    --subtle: #2B2F35;
    --border: #D7DBE0;
    --accent: #F3691A;
    --accent-contrast: #FFFFFF;
    --shadow: 0 6px 24px rgba(18,20,23,0.08);
    
    /* Mapping des anciennes variables */
    --clr-bg: #F5F6F7;
    --clr-surface: #FFFFFF;
    --clr-text: #121417;
    --clr-primary: #F3691A;
    --clr-accent: #F3691A;
    
    --bg-primary: #F5F6F7;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-primary: #121417;
    --text-secondary: #2B2F35;
    --text-muted: #555B63;
    --border-color: #D7DBE0;
    --accent-color: #F3691A;
  }
}

/* Variables utilitaires pour messages */
:root[data-theme="light"] {
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --success: #22C55E;
    --warning: #F59E0B;
    --error: #EF4444;
  }
}