// Variables ESTAIR Modern Premium
:root {
  // Couleurs ESTAIR
  --estair-blue: #4AA8DC;
  --estair-blue-dark: #3B82F6;
  --estair-blue-light: #E3F2FD;
  --estair-green: #8DA969;
  --estair-green-dark: #10B981;
  --estair-green-light: #E8F5E8;
  
  // Neutres
  --bg-primary: #FAFBFC;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F8F9FA;
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  
  // Texte
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-inverse: #FFFFFF;
  
  // Status
  --status-success: #10B981;
  --status-warning: #F59E0B;
  --status-error: #EF4444;
  --status-info: #3B82F6;
  
  // Ombres
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  // Espacement (réduit de 20%)
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  
  // Typographie (réduite de 15-20%)
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 13px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 22px;
  
  // Rayons
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  
  // Transitions
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

// Variables SCSS pour compatibilité
$estair-blue: var(--estair-blue);
$estair-blue-dark: var(--estair-blue-dark);
$estair-blue-light: var(--estair-blue-light);
$estair-green: var(--estair-green);
$estair-green-dark: var(--estair-green-dark);
$estair-green-light: var(--estair-green-light);

$bg-primary: var(--bg-primary);
$bg-secondary: var(--bg-secondary);
$bg-tertiary: var(--bg-tertiary);
$border-light: var(--border-light);
$border-medium: var(--border-medium);

$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$text-muted: var(--text-muted);
$text-inverse: var(--text-inverse);

$status-success: var(--status-success);
$status-warning: var(--status-warning);
$status-error: var(--status-error);
$status-info: var(--status-info);

$shadow-sm: var(--shadow-sm);
$shadow-md: var(--shadow-md);
$shadow-lg: var(--shadow-lg);

$space-xs: var(--space-xs);
$space-sm: var(--space-sm);
$space-md: var(--space-md);
$space-lg: var(--space-lg);
$space-xl: var(--space-xl);

$text-xs: var(--text-xs);
$text-sm: var(--text-sm);
$text-base: var(--text-base);
$text-lg: var(--text-lg);
$text-xl: var(--text-xl);
$text-2xl: var(--text-2xl);

$radius-sm: var(--radius-sm);
$radius-md: var(--radius-md);
$radius-lg: var(--radius-lg);
$radius-xl: var(--radius-xl);

$transition-fast: var(--transition-fast);
$transition-normal: var(--transition-normal);
$transition-slow: var(--transition-slow);

// Variable manquante pour les composants dashboard
$bg-light: #F8F9FA;

// Breakpoints
$mobile: 768px;
$tablet: 1024px;
$desktop: 1200px;

// Layout
$header-height: 64px;
$main-tabs-height: 48px;
$sidebar-width: 240px;
$sidebar-collapsed-width: 64px;

// Z-index
$z-dropdown: 1000;
$z-sticky: 1020;
$z-fixed: 1030;
$z-modal: 1040;