/* ==========================================================================
   EONIX - DESIGN SYSTEM CSS VARIABLES
   Charte graphique pour ERP interne .NET 8 + Bootstrap 5
   Version: 1.0
   ========================================================================== */

:root {
  /* ==========================================================================
     COULEURS PRINCIPALES EONIX
     ========================================================================== */

  /* Couleur primaire - Bleu/Turquoise Eonix */
  --eonix-primary: #00A0B0;
  --eonix-primary-dark: #008494;
  --eonix-primary-light: #4DC4D1;
  --eonix-primary-subtle: #E5F6F8;

  /* Couleur secondaire - Bleu foncé/Marine */
  --eonix-secondary: #1A2E40;
  --eonix-secondary-dark: #0F1A24;
  --eonix-secondary-light: #2C4356;

  /* Accent - Orange/Coral (pour CTA et actions importantes) */
  --eonix-accent: #E85A4F;
  --eonix-accent-dark: #D14940;
  --eonix-accent-light: #F2847C;

  /* ==========================================================================
     COULEURS NEUTRES & GRAYS
     ========================================================================== */
  --eonix-gray-900: #1A1A1A;
  --eonix-gray-800: #2D2D2D;
  --eonix-gray-700: #4A4A4A;
  --eonix-gray-600: #6B6B6B;
  --eonix-gray-500: #8C8C8C;
  --eonix-gray-400: #ADADAD;
  --eonix-gray-300: #D4D4D4;
  --eonix-gray-200: #E8E8E8;
  --eonix-gray-100: #F5F5F5;
  --eonix-gray-50: #FAFAFA;

  --eonix-white: #FFFFFF;
  --eonix-black: #000000;

  /* ==========================================================================
     COULEURS SEMANTIQUES (Etats)
     ========================================================================== */
  --eonix-success: #28A745;
  --eonix-success-light: #D4EDDA;
  --eonix-success-dark: #1E7E34;

  --eonix-warning: #FFC107;
  --eonix-warning-light: #FFF3CD;
  --eonix-warning-dark: #D39E00;

  --eonix-danger: #DC3545;
  --eonix-danger-light: #F8D7DA;
  --eonix-danger-dark: #BD2130;

  --eonix-info: #17A2B8;
  --eonix-info-light: #D1ECF1;
  --eonix-info-dark: #117A8B;

  /* ==========================================================================
     TYPOGRAPHIE
     ========================================================================== */

  --eonix-font-primary: 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --eonix-font-secondary: 'Open Sans', 'Segoe UI', sans-serif;
  --eonix-font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;

  /* Tailles de police */
  --eonix-font-size-xs: 0.75rem;
  --eonix-font-size-sm: 0.875rem;
  --eonix-font-size-base: 1rem;
  --eonix-font-size-md: 1.125rem;
  --eonix-font-size-lg: 1.25rem;
  --eonix-font-size-xl: 1.5rem;
  --eonix-font-size-2xl: 2rem;
  --eonix-font-size-3xl: 2.5rem;

  /* Poids de police */
  --eonix-font-weight-light: 300;
  --eonix-font-weight-normal: 400;
  --eonix-font-weight-medium: 500;
  --eonix-font-weight-semibold: 600;
  --eonix-font-weight-bold: 700;

  /* Hauteur de ligne */
  --eonix-line-height-tight: 1.25;
  --eonix-line-height-normal: 1.5;
  --eonix-line-height-relaxed: 1.75;

  /* ==========================================================================
     ESPACEMENTS
     ========================================================================== */
  --eonix-spacing-0: 0;
  --eonix-spacing-1: 0.25rem;
  --eonix-spacing-2: 0.5rem;
  --eonix-spacing-3: 0.75rem;
  --eonix-spacing-4: 1rem;
  --eonix-spacing-5: 1.25rem;
  --eonix-spacing-6: 1.5rem;
  --eonix-spacing-8: 2rem;
  --eonix-spacing-10: 2.5rem;
  --eonix-spacing-12: 3rem;
  --eonix-spacing-16: 4rem;

  /* ==========================================================================
     BORDURES & RAYONS
     ========================================================================== */
  --eonix-border-width: 1px;
  --eonix-border-color: var(--eonix-gray-300);

  --eonix-radius-sm: 0.25rem;
  --eonix-radius-md: 0.5rem;
  --eonix-radius-lg: 0.75rem;
  --eonix-radius-xl: 1rem;
  --eonix-radius-full: 9999px;

  /* ==========================================================================
     OMBRES (Subtle, professional)
     ========================================================================== */
  --eonix-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --eonix-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --eonix-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --eonix-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --eonix-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* Ombre focus pour accessibilite */
  --eonix-focus-ring: 0 0 0 3px rgba(0, 160, 176, 0.4);

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */
  --eonix-transition-fast: 150ms ease-in-out;
  --eonix-transition-normal: 250ms ease-in-out;
  --eonix-transition-slow: 350ms ease-in-out;

  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */
  --eonix-z-dropdown: 1000;
  --eonix-z-sticky: 1020;
  --eonix-z-fixed: 1030;
  --eonix-z-modal-backdrop: 1040;
  --eonix-z-modal: 1050;
  --eonix-z-popover: 1060;
  --eonix-z-tooltip: 1070;
  --eonix-z-toast: 1080;

  /* ==========================================================================
     LAYOUT ERP
     ========================================================================== */
  --eonix-sidebar-width: 260px;
  --eonix-sidebar-collapsed-width: 64px;
  --eonix-header-height: 64px;
  --eonix-content-max-width: 1400px;
}

/* ==========================================================================
   THEME SOMBRE
   Basé sur les conventions Material Design 3 / Apple HIG :
   - Fond principal gris très foncé (#1C1C1E), jamais noir pur
   - Surfaces élevées progressivement plus claires (elevation overlay)
   - Texte principal #E0E0E0, jamais blanc pur
   - Couleurs primaires légèrement désaturées pour le confort visuel
   Ajouter data-theme="dark" sur <html>
   ========================================================================== */

[data-theme="dark"] {
  /* Primaire - légèrement désaturée et éclaircie */
  --eonix-primary: #4DC4D1;
  --eonix-primary-dark: #3AAFBB;
  --eonix-primary-light: #7AD5DF;
  --eonix-primary-subtle: #1A2F33;

  /* Secondaire - bleu-gris clair, rappel du marine en version dark */
  --eonix-secondary: #90B4CE;
  --eonix-secondary-dark: #B0CDE0;
  --eonix-secondary-light: #6A94B0;

  /* Accent */
  --eonix-accent: #F2847C;
  --eonix-accent-dark: #E85A4F;
  --eonix-accent-light: #F7ACA7;

  /* Grays inversés — échelle Material Design dark
     gray-900 = texte principal (clair), gray-50 = fond (foncé) */
  --eonix-gray-900: #E0E0E0;  /* texte principal */
  --eonix-gray-800: #CCCCCC;  /* texte secondaire */
  --eonix-gray-700: #B0B0B0;  /* texte tertiaire */
  --eonix-gray-600: #9E9E9E;  /* texte désactivé */
  --eonix-gray-500: #757575;  /* placeholder */
  --eonix-gray-400: #616161;  /* bordures inactives */
  --eonix-gray-300: #424242;  /* bordures */
  --eonix-gray-200: #2C2C2C;  /* surface élevée (cards, modals) */
  --eonix-gray-100: #212121;  /* surface de base (navbar, footer) */
  --eonix-gray-50:  #1C1C1E;  /* fond de page (Apple HIG) */

  /* Blanc = surface de base, Noir = texte clair */
  --eonix-white: #212121;
  --eonix-black: #E0E0E0;

  /* Sémantiques — désaturées pour le dark */
  --eonix-success: #4CAF50;
  --eonix-success-light: #1B3A1D;
  --eonix-success-dark: #81C784;

  --eonix-warning: #FFB74D;
  --eonix-warning-light: #3A2E1A;
  --eonix-warning-dark: #FFD54F;

  --eonix-danger: #EF5350;
  --eonix-danger-light: #3A1A1A;
  --eonix-danger-dark: #E57373;

  --eonix-info: #4FC3F7;
  --eonix-info-light: #1A2E3A;
  --eonix-info-dark: #81D4FA;

  /* Bordures */
  --eonix-border-color: var(--eonix-gray-300);

  /* Ombres — plus prononcées en dark */
  --eonix-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --eonix-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --eonix-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --eonix-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6), 0 4px 6px rgba(0, 0, 0, 0.3);
  --eonix-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.3);

  /* Focus ring adapté */
  --eonix-focus-ring: 0 0 0 3px rgba(77, 196, 209, 0.4);
}