/**
 * CAP ÉLECTRIQUE - DESIGN SYSTEM VARIABLES
 * Couleurs issues de l'identité visuelle officielle (Solaire, Technique, Énergie)
 */
:root {
  /* Couleurs de la Marque CAP Électrique (Identité Officielle Noir Onyx & Rouge Électrique) */
  --color-primary: #0F172A;        /* Noir Ardoise Profond & Technique */
  --color-primary-dark: #090D16;   /* Noir Carbone Intense */
  --color-primary-light: #1E293B;  /* Ardoise Élégante */
  --color-secondary: #C52127;      /* Rouge Électrique Officiel CAP Électrique */
  --color-secondary-hover: #A81B20;/* Rouge Foncé Dynamique */
  --color-secondary-light: #C52127;/* Rouge Électrique Lumineux */
  --color-secondary-bg: #FEF2F2;   /* Fond Teinté Rouge Très Léger */
  
  /* Rouge Officiel CAP Électrique (Accent) */
  --color-accent: #C52127;         /* Rouge Électrique Officiel CAP Électrique */
  --color-accent-hover: #A81B20;   /* Rouge Foncé Dynamique */
  --color-accent-light: #FEF2F2;   /* Fond Rouge Très Léger */
  --color-accent-glow: rgba(197, 33, 39, 0.25);
  
  /* Écologie & Rentabilité */
  --color-success: #10B981;        /* Vert Énergie Renouvelable */
  --color-success-dark: #059669;
  --color-success-bg: #ECFDF5;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-danger-bg: #FEF2F2;

  /* Textes & Neutres */
  --color-text: #0F172A;           /* Ardoise Foncée Presque Noire */
  --color-text-muted: #475569;     /* Gris Texte Corps de Lecture */
  --color-text-subtle: #64748B;    /* Légendes & Meta */
  --color-text-light: #94A3B8;     /* Inactif / Bordure discrète */
  --color-text-inverse: #FFFFFF;   /* Texte sur Fond Foncé */

  /* Surfaces & Arrière-plans */
  --color-background: #F8FAFC;     /* Fond Page Clair & Épuré */
  --color-surface: #FFFFFF;        /* Cartes & Volets Blanc Pur */
  --color-surface-alt: #F1F5F9;    /* Surface Neutre Délimitée */
  --color-surface-dark: #0F172A;   /* Surface Sombre / Hero & Footer */
  --color-border: #E2E8F0;         /* Ligne de Séparation */
  --color-border-hover: #CBD5E1;   /* Hover Ligne */

  /* Typographie */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */
  --font-size-5xl: 3.75rem;   /* 60px */

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-base: 1.6;
  --line-height-loose: 1.75;

  /* Espacements */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.25rem;  /* 20px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-10: 2.5rem;  /* 40px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-16: 4rem;    /* 64px */
  --spacing-20: 5rem;    /* 80px */
  --spacing-24: 6rem;    /* 96px */

  /* Rayons de Bordure */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Ombres Portées */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.09), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-solar: 0 12px 28px -6px rgba(2, 132, 199, 0.18);
  --shadow-accent: 0 10px 25px -5px rgba(197, 33, 39, 0.35);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Dimensions & Conteneurs */
  --container-max-width: 1240px;
  --container-narrow-width: 900px;
  --header-height: 80px;
  --header-compact-height: 68px;

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-modal-backdrop: 1050;
  --z-modal: 1100;
  --z-floating-btn: 1200;
  --z-toast: 1300;
}