/* ==========================================
   SERVME - CORE VARIABLES
   Variables CSS centralisées du système de design
   Extrait de design-system.css
   ========================================== */

:root {
  /* === COULEURS PRIMAIRES === */
  --primary: #FF385C;
  --primary-hover: #E61E4D;
  --primary-dark: #D70466;
  --primary-light: #FF6B86;
  --primary-lightest: #FFE8ED;
  
  /* === COULEURS SECONDAIRES === */
  --secondary: #00A699;
  --secondary-hover: #008E82;
  --accent: #008489;
  
  /* === COULEURS DE STATUT === */
  --success: #00b894;
  --success-light: #D4EDDA;
  --warning: #FFB400;
  --warning-light: #FFF3CD;
  --error: #FF385C;
  --error-light: #FFE8ED;
  --info: #0066FF;
  --info-light: #D1E7FF;
  
  /* === ÉCHELLE DE GRIS === */
  --gray-900: #222222;
  --gray-800: #484848;
  --gray-700: #717171;
  --gray-600: #B0B0B0;
  --gray-500: #DDDDDD;
  --gray-400: #EBEBEB;
  --gray-300: #F7F7F7;
  --gray-200: #FAFAFA;
  --gray-100: #FCFCFC;
  --gray-50: #FEFEFE;
  --white: #FFFFFF;
  --black: #000000;
  
  /* === TYPOGRAPHIE === */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Tailles de police */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-md: 18px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-2xl: 32px;
  --font-3xl: 40px;
  --font-4xl: 48px;
  --font-5xl: 64px;
  
  /* Poids de police */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Hauteur de ligne */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* === ESPACEMENT === */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  
  /* === BORDER RADIUS === */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  
  /* === OMBRES === */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.08), 0 2px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.10);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.18), 0 12px 24px rgba(0, 0, 0, 0.12);
  
  /* === TRANSITIONS === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* === Z-INDEX === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;
  --z-notification: 1300;
  --z-toast: 2000;
  
  /* === LAYOUT === */
  --header-height: 70px;
  --sidebar-width: 280px;
  --max-width-xs: 320px;
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1440px;
  --max-width-full: 100%;
  
  /* === BREAKPOINTS (pour référence) === */
  /* sm: 640px */
  /* md: 768px */
  /* lg: 1024px */
  /* xl: 1280px */
  /* 2xl: 1536px */
  
  /* === BOUTONS - TAILLES === */
  --btn-height-sm: 32px;
  --btn-height-base: 40px;
  --btn-height-md: 44px;
  --btn-height-lg: 48px;
  --btn-height-xl: 56px;
  
  --btn-padding-x-sm: 12px;
  --btn-padding-x-base: 16px;
  --btn-padding-x-md: 20px;
  --btn-padding-x-lg: 24px;
  --btn-padding-x-xl: 32px;
  
  --btn-font-size-sm: var(--font-sm);
  --btn-font-size-base: var(--font-base);
  --btn-font-size-md: var(--font-md);
  --btn-font-size-lg: var(--font-lg);
  --btn-font-size-xl: var(--font-xl);
  
  /* === INPUTS === */
  --input-height-sm: 36px;
  --input-height-base: 44px;
  --input-height-lg: 52px;
  
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-3);
  
  /* === ANIMATIONS === */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* === RESPONSIVE VARIABLES === */
@media (max-width: 768px) {
  :root {
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 17px;
    --font-lg: 19px;
    --font-xl: 22px;
    --font-2xl: 28px;
    --font-3xl: 36px;
    --font-4xl: 42px;
    
    --space-6: 20px;
    --space-8: 28px;
    --space-12: 40px;
    --space-16: 56px;
    
    --btn-height-base: 44px; /* Plus grand sur mobile pour meilleure ergonomie */
    --btn-height-lg: 52px;
    --input-height-base: 48px; /* Plus grand sur mobile */
  }
}

/* === MODE SOMBRE (préparé pour le futur) === */
@media (prefers-color-scheme: dark) {
  :root {
    /* Variables pour mode sombre à implémenter si besoin */
  }
}