/**
 * SimCrise - Design System Variables
 * Index Page CSS Variables
 * 
 * Description: Toutes les variables CSS, design tokens et couleurs sémantiques
 * Usage: Importé en premier dans index.html pour assurer disponibilité globale
 * Version: 1.0.0
 */

/* CSS Variables and Root Configuration */
:root {
  --bg: #f7f7fb;
  --card: #ffffff;
  --line: #e7e7ef;
  --text: #181820;
  --muted: #5a5a6d;
  --accent: #1f6feb;
  --danger: #dc2626;
  --primary: #1a3f6e;
  --tap-min: 48px;
  --border-radius: 12px;
  --border-radius-sm: 6px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
  
  /* Responsive breakpoints */
  --mobile: 600px;
  --tablet: 768px;
  --desktop: 960px;
  
  /* NIVEAU 2: Système d'espacement fluide */
  --space-xs: clamp(0.25rem, 1vw, 0.5rem);
  --space-sm: clamp(0.5rem, 2vw, 0.75rem);
  --space-md: clamp(0.75rem, 3vw, 1rem);
  --space-lg: clamp(1rem, 4vw, 1.5rem);
  --space-xl: clamp(1.5rem, 5vw, 2rem);
  --space-2xl: clamp(2rem, 6vw, 3rem);
  --space-3xl: clamp(2.5rem, 8vw, 4rem);
  
  /* NIVEAU 2: Typographie fluide */
  --text-xs: clamp(0.75rem, 2.5vw, 0.875rem);
  --text-sm: clamp(0.875rem, 3vw, 1rem);
  --text-base: clamp(1rem, 3.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 4.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 5vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 6vw, 2.25rem);
  
  /* NIVEAU 2: Bordures et rayons fluides */
  --radius-sm: clamp(4px, 1vw, 6px);
  --radius-md: clamp(6px, 2vw, 10px);
  --radius-lg: clamp(10px, 3vw, 16px);
  --radius-xl: clamp(16px, 4vw, 24px);
  
  /* NIVEAU 2: Largeurs de conteneur fluides */
  --container-sm: min(100% - 2rem, 640px);
  --container-md: min(100% - 2rem, 768px);
  --container-lg: min(100% - 2rem, 1024px);
  --container-xl: min(100% - 2rem, 1280px);
  --container-2xl: min(100% - 2rem, 1536px);
  
  /* NIVEAU 3: Système de grille CSS Grid avancé */
  --grid-cols-1: repeat(1, minmax(0, 1fr));
  --grid-cols-2: repeat(2, minmax(0, 1fr));
  --grid-cols-3: repeat(3, minmax(0, 1fr));
  --grid-cols-auto: repeat(auto-fit, minmax(280px, 1fr));
  --grid-cols-responsive: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  
  /* NIVEAU 3: Gaps intelligents */
  --grid-gap-sm: clamp(0.5rem, 2vw, 1rem);
  --grid-gap-md: clamp(1rem, 3vw, 1.5rem);
  --grid-gap-lg: clamp(1.5rem, 4vw, 2.5rem);
  
  /* NIVEAU 3: Animations et transitions */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* 🎨 NIVEAU 4: DESIGN TOKENS AVANCÉS */
  
  /* Couleurs sémantiques avec support thème */
  --color-primary-hue: 215;
  --color-primary-sat: 100%;
  --color-primary-light: 50%;
  --color-primary: hsl(var(--color-primary-hue) var(--color-primary-sat) var(--color-primary-light));
  --color-primary-alpha: hsl(var(--color-primary-hue) var(--color-primary-sat) var(--color-primary-light) / 0.8);
  
  --color-surface-hue: 0;
  --color-surface-sat: 0%;
  --color-surface-light: 100%;
  --color-surface: hsl(var(--color-surface-hue) var(--color-surface-sat) var(--color-surface-light));
  
  /* Système d'élévation optimisé pour cartes blanches */
  --elevation-0: 0 0 0 0 transparent;
  --elevation-1: 0 1px 3px 0 hsl(0 0% 0% / 0.05), 0 1px 2px 0 hsl(0 0% 0% / 0.03);
  --elevation-2: 0 2px 8px 0 hsl(0 0% 0% / 0.04), 0 1px 3px 0 hsl(0 0% 0% / 0.02);
  --elevation-3: 0 8px 20px -4px hsl(0 0% 0% / 0.06), 0 2px 6px -1px hsl(0 0% 0% / 0.03);
  --elevation-4: 0 16px 32px -8px hsl(0 0% 0% / 0.08), 0 4px 12px -2px hsl(0 0% 0% / 0.04);
  
  /* Animation tokens avancés */
  --motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --motion-easing-decelerated: cubic-bezier(0.0, 0.0, 0.2, 1);
  --motion-easing-accelerated: cubic-bezier(0.4, 0.0, 1, 1);
  --motion-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  --motion-duration-instant: 0ms;
  --motion-duration-fast: 100ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 300ms;
  --motion-duration-slower: 500ms;
  
  /* États interactifs */
  --state-hover-opacity: 0.08;
  --state-focus-opacity: 0.12;
  --state-pressed-opacity: 0.16;
  --state-selected-opacity: 0.20;
  
  /* Préférences utilisateur */
  --prefer-reduced-motion: no-preference;
  --prefer-color-scheme: light;
}