/**
 * KOnekt ISP-Console — Centralized Theme Variables System
 *
 * This stylesheet centralizes all semantic design tokens and color variables
 * for light and dark modes, supporting live dynamic customization via CSS custom properties.
 *
 * Fundamental Contrast Rule:
 * When an element uses a color as its background, the content displayed on top
 * MUST provide strong contrast (preferring the secondary color when primary is the background,
 * and falling back to high-contrast white/dark text if needed).
 */

:root {
  /* ==========================================================================
     1. PALETTE PRINCIPALE & SECONDAIRE (Personnalisables dynamiquement)
     ========================================================================== */
  --theme-primary: #FF9800;
  --theme-primary-rgb: 255, 152, 0;
  --theme-primary-hover: #FFB74D;
  --theme-primary-active: #F57C00;
  --theme-primary-subtle: rgba(var(--theme-primary-rgb), 0.12);
  --theme-primary-subtle-hover: rgba(var(--theme-primary-rgb), 0.20);
  --theme-on-primary: #1E1E2D; /* Contenu contrasté sur fond couleur principale */

  --theme-secondary: #1E1E2D;
  --theme-secondary-rgb: 30, 30, 45;
  --theme-secondary-hover: #2B2B40;
  --theme-secondary-subtle: rgba(var(--theme-secondary-rgb), 0.08);
  --theme-on-secondary: #FFFFFF; /* Contenu contrasté sur fond couleur secondaire */

  /* ==========================================================================
     2. COULEURS FONCTIONNELLES & ÉTATS (Success, Warning, Error, Info)
     ========================================================================== */
  --theme-success: #4CAF50;
  --theme-success-rgb: 76, 175, 80;
  --theme-success-subtle: rgba(76, 175, 80, 0.12);
  --theme-on-success: #FFFFFF;

  --theme-warning: #F5A524;
  --theme-warning-rgb: 245, 165, 36;
  --theme-warning-subtle: rgba(245, 165, 36, 0.12);
  --theme-on-warning: #1E1E2D;

  --theme-danger: #E5484D;
  --theme-danger-rgb: 229, 72, 77;
  --theme-danger-subtle: rgba(229, 72, 77, 0.12);
  --theme-on-danger: #FFFFFF;

  --theme-info: #0284C7;
  --theme-info-rgb: 2, 132, 199;
  --theme-info-subtle: rgba(2, 132, 199, 0.12);
  --theme-on-info: #FFFFFF;

  /* ==========================================================================
     3. THÈME CLAIR (Mode par défaut)
     ========================================================================== */
  --theme-bg-body: #F4F6F9;
  --theme-bg-surface: #FFFFFF;
  --theme-bg-card: #FFFFFF;
  --theme-bg-subtle: #F8F9FA;
  --theme-bg-hover: #F1F3F5;

  --theme-text-primary: #1E1E2D;
  --theme-text-secondary: #5E6278;
  --theme-text-muted: #7E8299;
  --theme-text-inverse: #FFFFFF;

  --theme-border: #E4E6EF;
  --theme-border-subtle: #F1F1F4;
  --theme-border-strong: #D1D5DB;
  --theme-divider: #EFF2F5;

  /* Éléments interactifs */
  --theme-interactive: var(--theme-primary);
  --theme-interactive-hover: var(--theme-primary-hover);
  --theme-interactive-text: var(--theme-on-primary);
  --theme-hover-bg: #F8F9FA;
  --theme-selected-bg: rgba(var(--theme-primary-rgb), 0.12);

  /* Formulaires & Champs de saisie */
  --theme-input-bg: #FFFFFF;
  --theme-input-border: #E4E6EF;
  --theme-input-text: #1E1E2D;
  --theme-input-placeholder: #A1A5B7;
  --theme-input-focus-border: var(--theme-primary);
  --theme-input-focus-ring: rgba(var(--theme-primary-rgb), 0.25);

  /* Menus & Navigation */
  --theme-nav-primary-bg: #0D0E12;
  --theme-nav-primary-border: rgba(255, 255, 255, 0.06);
  --theme-nav-primary-text: #7E8299;
  --theme-nav-primary-hover-bg: rgba(var(--theme-primary-rgb), 0.15);
  --theme-nav-primary-hover-text: var(--theme-primary);
  --theme-nav-primary-active-bg: var(--theme-primary);
  --theme-nav-primary-active-text: var(--theme-on-primary);

  --theme-nav-secondary-bg: #FFFFFF;
  --theme-nav-secondary-border: #E8ECEF;
  --theme-nav-secondary-heading: #1E1E2D;
  --theme-nav-item-text: #3F4254;
  --theme-nav-item-hover-bg: #F8F9FA;
  --theme-nav-item-hover-text: var(--theme-primary);
  --theme-nav-item-active-bg: var(--theme-primary-subtle);
  --theme-nav-item-active-text: var(--theme-primary);
  --theme-nav-item-active-indicator: var(--theme-primary);

  --theme-inactive-text: #A1A5B7;
  --theme-inactive-bg: transparent;

  /* En-tête & Pied de page */
  --theme-header-bg: #FFFFFF;
  --theme-header-border: #EFF2F5;
  --theme-footer-bg: #FFFFFF;
  --theme-footer-border: #EFF2F5;

  /* Tableaux */
  --theme-table-header-bg: #F8F9FA;
  --theme-table-header-text: #1E1E2D;
  --theme-table-border: #EFF2F5;
  --theme-table-hover-bg: rgba(var(--theme-primary-rgb), 0.04);
  --theme-table-selected-bg: rgba(var(--theme-primary-rgb), 0.10);

  /* Modales & Panneaux */
  --theme-modal-bg: #FFFFFF;
  --theme-modal-header-bg: #F8F9FA;
  --theme-modal-border: #EFF2F5;
  --theme-modal-text: #1E1E2D;

  /* Ombres */
  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ==========================================================================
     4. COMPATIBILITÉ & BRIDGES VERS FRAMEWORKS EXISTANTS
     ========================================================================== */
  --kt-primary: var(--theme-primary);
  --kt-primary-active: var(--theme-primary-hover);
  --kt-primary-light: var(--theme-primary-subtle);
  --kt-primary-inverse: var(--theme-on-primary);

  --brand-primary: var(--theme-primary);
  --brand-secondary: var(--theme-secondary);

  --konekt-orange: var(--theme-primary);
  --konekt-orange-hover: var(--theme-primary-hover);

  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);
  --bs-pagination-active-bg: var(--theme-primary);
  --bs-pagination-active-border-color: var(--theme-primary);
  --bs-pagination-active-color: var(--theme-on-primary);
  --bs-pagination-hover-color: var(--theme-primary);
  --bs-pagination-focus-color: var(--theme-primary);
}

/* ==========================================================================
   5. THÈME SOMBRE (Dark Mode)
   ========================================================================== */
body.dark-version,
body.dark-mode,
body[data-theme="dark"],
html[data-theme="dark"] {
  --theme-bg-body: #08090B;
  --theme-bg-surface: #14151B;
  --theme-bg-card: #14151B;
  --theme-bg-subtle: #1A1B22;
  --theme-bg-hover: #1E1F28;

  --theme-text-primary: #FFFFFF;
  --theme-text-secondary: #A1A5B7;
  --theme-text-muted: #6C7280;
  --theme-text-inverse: #1E1E2D;

  --theme-border: rgba(255, 255, 255, 0.08);
  --theme-border-subtle: rgba(255, 255, 255, 0.04);
  --theme-border-strong: rgba(255, 255, 255, 0.16);
  --theme-divider: rgba(255, 255, 255, 0.08);

  --theme-hover-bg: #1A1B22;
  --theme-selected-bg: rgba(var(--theme-primary-rgb), 0.18);

  --theme-input-bg: #0E0F14;
  --theme-input-border: rgba(255, 255, 255, 0.12);
  --theme-input-text: #FFFFFF;
  --theme-input-placeholder: #56596A;
  --theme-input-focus-border: var(--theme-primary);
  --theme-input-focus-ring: rgba(var(--theme-primary-rgb), 0.30);

  --theme-nav-primary-bg: #060709;
  --theme-nav-primary-border: rgba(255, 255, 255, 0.05);
  --theme-nav-primary-text: #7E8299;
  --theme-nav-primary-hover-bg: rgba(var(--theme-primary-rgb), 0.20);
  --theme-nav-primary-hover-text: var(--theme-primary);
  --theme-nav-primary-active-bg: var(--theme-primary);
  --theme-nav-primary-active-text: var(--theme-on-primary);

  --theme-nav-secondary-bg: #121318;
  --theme-nav-secondary-border: rgba(255, 255, 255, 0.07);
  --theme-nav-secondary-heading: #FFFFFF;
  --theme-nav-item-text: #A1A5B7;
  --theme-nav-item-hover-bg: #1A1B22;
  --theme-nav-item-hover-text: var(--theme-primary);
  --theme-nav-item-active-bg: rgba(var(--theme-primary-rgb), 0.16);
  --theme-nav-item-active-text: var(--theme-primary);
  --theme-nav-item-active-indicator: var(--theme-primary);

  --theme-inactive-text: #56596A;
  --theme-inactive-bg: transparent;

  --theme-header-bg: #121318;
  --theme-header-border: rgba(255, 255, 255, 0.07);
  --theme-footer-bg: #121318;
  --theme-footer-border: rgba(255, 255, 255, 0.07);

  --theme-table-header-bg: #101116;
  --theme-table-header-text: #FFFFFF;
  --theme-table-border: rgba(255, 255, 255, 0.06);
  --theme-table-hover-bg: rgba(var(--theme-primary-rgb), 0.06);
  --theme-table-selected-bg: rgba(var(--theme-primary-rgb), 0.15);

  --theme-modal-bg: #14151B;
  --theme-modal-header-bg: #101116;
  --theme-modal-border: rgba(255, 255, 255, 0.08);
  --theme-modal-text: #FFFFFF;

  --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --theme-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
}