:root {
  /* === COLORS: BLACK & WHITE THEME (DEFAULT) === */
  --white: #ffffff;
  --black: #000000;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  
  /* === ACCENT COLORS === */
  --blue: #2196F3;
  --green: #4CAF50;
  --red: #f44336;
  --orange: #FF9800;
  --yellow: #FFC107;
  
  /* === SEMANTIC (Light mode par défaut) === */
  --bg: var(--white);
  --bg-alt: var(--gray-50);
  --bg-dark: var(--gray-700);
  --bg-elevated: var(--white);
  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --border: var(--gray-300);
  --border-light: var(--gray-200);
  
  --primary: var(--black);
  --primary-hover: var(--gray-800);
  --secondary: var(--gray-500);
  --success: var(--green);
  --danger: var(--red);
  --warning: var(--orange);
  --info: var(--blue);
  
  /* === SPACING === */
  --gap-xs: 0.25rem;
  --gap-sm: 0.5rem;
  --gap: 1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 2rem;
  --gap-2xl: 3rem;
  
  /* === TYPOGRAPHY === */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Courier New', Consolas, Monaco, monospace;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  
  --line-tight: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.75;
  
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* === BORDERS & RADIUS === */
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
  
  --border-width: 1px;
  
  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  
  /* === TRANSITIONS === */
  --duration-fast: 100ms;
  --duration: 200ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* === Z-INDEX === */
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
  --z-tooltip: 1300;
}

/* === THEME: DARK MODE === */
[data-theme="dark"] {
  --bg: var(--gray-900);
  --bg-alt: var(--gray-800);
  --bg-elevated: var(--gray-700);
  --text: var(--gray-50);
  --text-muted: var(--gray-400);
  --border: var(--gray-700);
  --border-light: var(--gray-800);
  
  --primary: var(--white);
  --primary-hover: var(--gray-200);
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
}