/* ════════════════════════════════════════════════════════════════════════════════
   MODE CLAIR - DESIGN SYSTEM
   Palette: Minimaliste, chaleureuse, profesionnelle pour ERP
   ════════════════════════════════════════════════════════════════════════════════ */

html.light-mode {
   /* ─────────────────────────────────────
       Backgrounds - Mode Clair (Palette chaleureuse)
       ───────────────────────────────────── */
   --color-bg-base: #fafbfc;
   /* Page bg - Gris très clair, chaud */
   --color-bg-primary: #fafbfc;
   /* Main bg - Blanc très chaud */
   --color-bg-secondary: #f5f3f0;
   /* Secondary bg - Beige très clair */
   --color-bg-tertiary: #ede9e5;
   /* Tertiary bg - Beige clair */
   --color-bg-hover: #e7e1da;
   /* Hover state - Beige moyen */
   --color-bg-active: #dfd7cf;
   /* Active state - Beige actif */

   --color-surface: #ffffff;
   /* Card/surface - Blanc pur */
   --color-surface-hover: #fafbfc;
   /* Surface hover */
   --color-surface-alt: #f5f3f0;
   /* Alternative surface */

   /* ─────────────────────────────────────
       Text Colors - Mode Clair
       ───────────────────────────────────── */
   --color-text-primary: #2c2520;
   /* Texte principal - Brun chaud foncé */
   --color-text-secondary: #3d3530;
   /* Texte secondaire - Brun plus foncé */
   --color-text-muted: #6b6258;
   /* Texte muted - Brun doux */
   --color-text-dim: #9a8f84;
   /* Texte dim - Brun pâle */
   --color-text-subtle: #d4cfc8;
   /* Texte subtle - Beige pâle */
   --color-text-disabled: #c7bfb8;
   /* Disabled text - Beige grisé */

   /* ─────────────────────────────────────
       Borders & Dividers - Mode Clair
       ───────────────────────────────────── */
   --color-border: #e7e1da;
   /* Border principal - Beige clair */
   --color-border-light: #f0ede9;
   /* Border light - Beige très clair */
   --color-border-subtle: #f5f3f0;
   /* Border subtle - Beige minimal */
   --color-divider: rgba(44, 37, 32, 0.05);

   /* ─────────────────────────────────────
       Modal & Overlay - Mode Clair
       ───────────────────────────────────── */
   --overlay-bg: rgba(44, 37, 32, 0.35);
   --modal-scrollbar-bg: transparent;
   --modal-scrollbar-thumb: rgba(75, 85, 99, 0.25);
   --modal-scrollbar-thumb-hover: rgba(75, 85, 99, 0.35);

   /* ─────────────────────────────────────
       Input & Form - Mode Clair
       ───────────────────────────────────── */
   --color-fond-input: #ffffff;
   --color-texte-input: #2c2520;
   --color-placeholder: #9a8f84;
   --color-bordure-input: #e7e1da;
   --color-bordure-input-focus: #3b82f6;

   /* ─────────────────────────────────────
       Button - Mode Clair
       ───────────────────────────────────── */
   --color-fond-bouton: #f5f3f0;
   --color-fond-bouton-hover: #ede9e5;
   --color-bouton: #f5f3f0;
   --color-bouton-hover: #ede9e5;
   --color-texte-bouton: #2c2520;

   --color-bouton-danger: #dc2626;
   --color-texte-bouton-danger: #ffffff;
   --color-bouton-warning: #f59e0b;
   --color-texte-bouton-warning: #ffffff;
   --color-bouton-success: #10b981;
   --color-texte-bouton-success: #ffffff;

   /* ─────────────────────────────────────
       Links - Mode Clair
       ───────────────────────────────────── */
   --color-texte-lien: #0891b2;
   --color-texte-lien-hover: #0369a1;
   --color-texte-lien-visite: #0891b2;

   /* ─────────────────────────────────────
       Heading Colors - Mode Clair
       ───────────────────────────────────── */
   --color-titre-h1: #1a1410;
   --color-titre-h2: #2c2520;
   --color-titre-h3: #2c2520;
   --color-titre-h4: #3d3530;
   --color-titre-h5: #3d3530;
   --color-titre-h6: #4d4740;

   /* ─────────────────────────────────────
       SVG Colors - Mode Clair
       ───────────────────────────────────── */
   --svg-color-fond-noir: #2c2520;
   --svg-color-fond-clair: #ffffff;
   --svg-color-fill: currentColor;
   --svg-color-stroke: none;

   /* ─────────────────────────────────────
       Utility Colors - Mode Clair
       ───────────────────────────────────── */
   --color-fondeur-principal: #fafbfc;
   --color-fond-secondaire: #f5f3f0;
   --color-fond-principal: #fafbfc;
   --color-bg-secondaire: #f5f3f0;
   --color-muted-button: #f5f3f0;
   --color-bg-muted: #f5f3f0;
   --background-color-bouton1: #f5f3f0;
   --color-texte: #2c2520;
   --color-texte2: #2c2520;
   --color-texte-secondaire: #6b6258;
   --color-action: #0891b2;
   --color-text-muted: #6b6258;
   --color-border-muted: #f5f3f0;
   --color-bg-light: #fafbfc;

   --color-zoom-overlay: rgba(0, 0, 0, 0.5);
   --color-drop-shadow-white-0-3: rgba(0, 0, 0, 0.08);
   --color-drop-shadow-black-0-7: rgba(0, 0, 0, 0.12);
   --color-shadow: rgba(0, 0, 0, 0.08);
   --color-rgba-82-aa-ff-0-2: rgba(99, 102, 241, 0.08);

   --color-footer-texte: #6b6258;
   --color-gris-clair: #646464;
   --color-gris-moyen: #9a8f84;
   --color-gris-fonce: #6b6258;
   --color-blanc: #ffffff;
   --color-bleu: #2563eb;
   --color-vert: #10b981;
   --color-jaune: #f59e0b;
   --color-rouge: #dc2626;
   --accent-color: #0891b2;
   --success-color: #10b981;
   --danger-color: #dc2626;

   /* ─────────────────────────────────────
       App Variables - Mode Clair
       ───────────────────────────────────── */
   --app-primary: #3b82f6;
   --app-primary-hover: #2563eb;
   --app-accent: #0891b2;
   --app-success: #10b981;
   --app-warning: #f59e0b;
   --app-danger: #dc2626;
   --app-bg-canvas: #fafbfc;
   --app-bg-card: #ffffff;
   --app-bg-hover: #f5f3f0;
   --app-text-main: #2c2520;
   --app-text-muted: #6b6258;
   --app-text-dim: #9a8f84;
   --app-border: #e7e1da;
   --app-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   --app-radius-sm: var(--radius-sm);
   --app-radius-md: var(--radius-md);
   --app-radius-lg: var(--radius-lg);

   /* ─────────────────────────────────────
       Alert Styles - Mode Clair
       ───────────────────────────────────── */
   --background-alert-warning-glass: rgba(245, 158, 11, 0.08);
   --background-alert-warning-glass-hover: rgba(245, 158, 11, 0.12);
   --border-alert-warning-glass: rgba(245, 158, 11, 0.3);
   --border-alert-warning-glass-hover: rgba(245, 158, 11, 0.5);
   --color-text-alert-warning-glass: #78350f;
   --shadow-alert-warning-glass: rgba(0, 0, 0, 0.08);
   --svg-color-alert-warning-glass: #d97706;
   --strong-color-alert-warning-glass: #f59e0b;

   /* ─────────────────────────────────────
       Border & Panel - Mode Clair
       ───────────────────────────────────── */
   --color-border-default: #e7e1da;
   --color-border-focus: #2563eb;
   --color-panel-dark: #ffffff;
   --color-gradient-highlight: linear-gradient(90deg, #3b82f6, #0891b2);
   --color-bordure: #e7e1da;
   --color-bordure-light: #f0ede9;

   /* ─────────────────────────────────────
       Infinite Table - Mode Clair
       ───────────────────────────────────── */
   --infinite-border-color: #e7e1da;
   --infinite-bg-card: #ffffff;
   --infinite-text-color: #2c2520;
   --infinite-text-muted: #4b5563;
   --infinite-accent-color: #0891b2;
   --infinite-box-shadow-accent: rgba(8, 145, 178, 0.1);
   --infinite-bg-white-90: rgba(255, 255, 255, 0.95);
   --infinite-box-shadow-soft: rgba(0, 0, 0, 0.08);
   --infinite-bg-danger-soft: rgba(220, 38, 38, 0.08);
   --infinite-danger-color: #dc2626;
   --infinite-bg-danger: #dc2626;

   /* ─────────────────────────────────────
       Salon Wizard - Mode Clair
       ───────────────────────────────────── */
   --salon-wizard-box-shadow-color: rgba(59, 130, 246, 0.1);
   --salon-wizard-bg-info: #dbeafe;
   --salon-wizard-color-info: #1e40af;
   --salon-wizard-bg-dim: rgba(59, 130, 246, 0.08);
   --salon-wizard-bg-dark: #f5f3f0;
   --salon-wizard-bg-hsl: hsl(25, 20%, 96%);

   /* ─────────────────────────────────────
       Payment - Mode Clair
       ───────────────────────────────────── */
   --payment-color: #be123c;
   --payment-text-muted: #6b6258;
   --payment-border: #e7e1da;

   /* ─────────────────────────────────────
       Status Colors - Mode Clair
       ───────────────────────────────────── */
   --status-success-bg: rgba(16, 185, 129, 0.1);
   --status-success-text: #047857;
   --status-danger-bg: rgba(220, 38, 38, 0.1);
   --status-danger-text: #991b1b;
   --status-warning-bg: rgba(245, 158, 11, 0.1);
   --status-warning-text: #b45309;
   --status-secondary-bg: rgba(107, 98, 88, 0.1);
   --status-secondary-text: #3d3530;
   --status-panel-bg: #ffffff;
   --status-border-color: #f5f3f0;

   /* ─────────────────────────────────────
       Hover Colors - Mode Clair
       ───────────────────────────────────── */
   --hover-color-background: rgba(59, 130, 246, 0.08);
   --hover-color-background2: rgba(59, 130, 246, 0.12);

   --color-background: #fafbfc;
   --color-background-trait: rgba(44, 37, 32, 0.05);

   /* ─────────────────────────────────────
       RGBA Colors - Mode Clair
       ───────────────────────────────────── */
   --color-rgba-fond-5: rgba(245, 243, 240, 0.5);
   --color-rgba-fond-4: rgba(237, 233, 229, 0.3);
   --color-rgba-fond-card: rgba(250, 251, 252, 0.4);
   --color-rgba-border: rgba(231, 225, 218, 0.3);
   --color-bg-danger: #dc2626;
   --color-bg-danger-dark: #991b1b;
}

/* ════════════════════════════════════════════════════════════════════════════════
   MODE CLAIR - DESIGN SYSTEM
   Toutes les variables pour le thème clair
   ════════════════════════════════════════════════════════════════════════════════ */

html.light-mode {
   /* ─────────────────────────────────────
       Backgrounds - Mode Clair
       ───────────────────────────────────── */
   --color-bg-base: #f8fafc;
   /* Page bg - Slate 50 */
   --color-bg-primary: #ffffff;
   /* Main bg - White */
   --color-bg-secondary: #f1f5f9;
   /* Secondary bg - Slate 100 */
   --color-bg-tertiary: #e2e8f0;
   /* Tertiary bg - Slate 200 */
   --color-bg-hover: #d1d5db;
   /* Hover state - Gray 300 */
   --color-bg-active: #cbd5e1;
   /* Active state - Slate 300 */

   --color-surface: #ffffff;
   /* Card/surface */
   --color-surface-hover: #f1f5f9;
   /* Surface hover */
   --color-surface-alt: #f8fafc;
   /* Alternative surface */

   /* ─────────────────────────────────────
       Text Colors - Mode Clair
       ───────────────────────────────────── */
   --color-text-primary: #0f172a;
   /* Slate 950 */
   --color-text-secondary: #334155;
   /* Slate 800 */
   --color-text-muted: #64748b;
   /* Slate 500 */
   --color-text-dim: #94a3b8;
   /* Slate 400 */
   --color-text-subtle: #cbd5e1;
   /* Slate 200 */
   --color-text-disabled: #cbd5e1;
   /* Disabled text */

   /* ─────────────────────────────────────
       Borders & Dividers - Mode Clair
       ───────────────────────────────────── */
   --color-border: #cbd5e1;
   /* Slate 200 */
   --color-border-light: #e2e8f0;
   /* Slate 100 */
   --color-border-subtle: #f1f5f9;
   /* Slate 50 */
   --color-divider: rgba(15, 23, 42, 0.05);

   /* ─────────────────────────────────────
       Modal & Overlay - Mode Clair
       ───────────────────────────────────── */
   --overlay-bg: rgba(15, 23, 42, 0.4);
   --modal-scrollbar-bg: transparent;
   --modal-scrollbar-thumb: rgba(31, 41, 55, 0.2);
   --modal-scrollbar-thumb-hover: rgba(31, 41, 55, 0.3);

   /* ─────────────────────────────────────
       Input & Form - Mode Clair
       ───────────────────────────────────── */
   --color-fond-input: #ffffff;
   --color-texte-input: #0f172a;
   --color-placeholder: #94a3b8;
   --color-bordure-input: #cbd5e1;
   --color-bordure-input-focus: #3b82f6;

   /* ─────────────────────────────────────
       Button - Mode Clair
       ───────────────────────────────────── */
   --color-fond-bouton: #e2e8f0;
   --color-fond-bouton-hover: #cbd5e1;
   --color-bouton: #e2e8f0;
   --color-bouton-hover: #cbd5e1;
   --color-texte-bouton: #0f172a;

   --color-bouton-danger: #ef4444;
   --color-texte-bouton-danger: #ffffff;
   --color-bouton-warning: #f59e0b;
   --color-texte-bouton-warning: #ffffff;
   --color-bouton-success: #10b981;
   --color-texte-bouton-success: #ffffff;

   /* ─────────────────────────────────────
       Links - Mode Clair
       ───────────────────────────────────── */
   --color-texte-lien: #0891b2;
   --color-texte-lien-hover: #0369a1;
   --color-texte-lien-visite: #0891b2;

   /* ─────────────────────────────────────
       Heading Colors - Mode Clair
       ───────────────────────────────────── */
   --color-titre-h1: #0f172a;
   --color-titre-h2: #1e293b;
   --color-titre-h3: #1e293b;
   --color-titre-h4: #334155;
   --color-titre-h5: #334155;
   --color-titre-h6: #475569;

   /* ─────────────────────────────────────
       SVG Colors - Mode Clair
       ───────────────────────────────────── */
   --svg-color-fond-noir: #0f172a;
   --svg-color-fond-clair: #ffffff;
   --svg-color-fill: currentColor;
   --svg-color-stroke: none;

   /* ─────────────────────────────────────
       Utility Colors - Mode Clair
       ───────────────────────────────────── */
   --color-fondeur-principal: #ffffff;
   --color-fond-secondaire: #f1f5f9;
   --color-texte: #0f172a;
   --color-texte2: #0f172a;
   --color-texte-secondaire: #64748b;
   --color-action: #0ea5e9;
   --color-text-muted: #64748b;
   --color-border-muted: #f1f5f9;
   --color-bg-light: #f8fafc;

   --color-zoom-overlay: rgba(15, 23, 42, 0.6);
   --color-drop-shadow-white-0-3: rgba(0, 0, 0, 0.08);
   --color-drop-shadow-black-0-7: rgba(0, 0, 0, 0.15);
   --color-shadow: rgba(0, 0, 0, 0.1);
   --color-rgba-82-aa-ff-0-2: rgba(99, 102, 241, 0.08);

   --color-footer-texte: #64748b;
   --color-gris-moyen: #94a3b8;
   --color-gris-fonce: #64748b;
   --color-blanc: #ffffff;
   --color-bleu: #0ea5e9;
   --color-vert: #10b981;
   --color-jaune: #f59e0b;
   --color-rouge: #ef4444;
   --accent-color: #06b6d4;
   --success-color: #10b981;
   --danger-color: #ef4444;

   /* ─────────────────────────────────────
       App Variables - Mode Clair
       ───────────────────────────────────── */
   --app-primary: #6366f1;
   --app-primary-hover: #4f46e5;
   --app-accent: #06b6d4;
   --app-success: #10b981;
   --app-warning: #f59e0b;
   --app-danger: #ef4444;
   --app-bg-canvas: #f8fafc;
   --app-bg-card: #ffffff;
   --app-bg-hover: #f1f5f9;
   --app-text-main: #0f172a;
   --app-text-muted: #64748b;
   --app-text-dim: #94a3b8;
   --app-border: #cbd5e1;
   --app-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   --app-radius-sm: var(--radius-sm);
   --app-radius-md: var(--radius-md);
   --app-radius-lg: var(--radius-lg);

   /* ─────────────────────────────────────
       Alert Styles - Mode Clair
       ───────────────────────────────────── */
   --background-alert-warning-glass: rgba(245, 158, 11, 0.1);
   --background-alert-warning-glass-hover: rgba(245, 158, 11, 0.15);
   --border-alert-warning-glass: rgba(245, 158, 11, 0.3);
   --border-alert-warning-glass-hover: rgba(245, 158, 11, 0.5);
   --color-text-alert-warning-glass: #78350f;
   --shadow-alert-warning-glass: rgba(0, 0, 0, 0.08);
   --svg-color-alert-warning-glass: #d97706;
   --strong-color-alert-warning-glass: #f59e0b;

   /* ─────────────────────────────────────
       Border & Panel - Mode Clair
       ───────────────────────────────────── */
   --color-border-default: #cbd5e1;
   --color-border-focus: #0ea5e9;
   --color-panel-dark: #ffffff;
   --color-gradient-highlight: linear-gradient(90deg, #6366f1, #0891b2);
   --color-bordure: #cbd5e1;
   --color-bordure-light: #e2e8f0;

   /* ─────────────────────────────────────
       Infinite Table - Mode Clair
       ───────────────────────────────────── */
   --infinite-border-color: #cbd5e1;
   --infinite-bg-card: #ffffff;
   --infinite-text-color: #0f172a;
   --infinite-text-muted: #475569;
   --infinite-accent-color: #06b6d4;
   --infinite-box-shadow-accent: rgba(6, 182, 212, 0.1);
   --infinite-bg-white-90: rgba(255, 255, 255, 0.95);
   --infinite-box-shadow-soft: rgba(0, 0, 0, 0.08);
   --infinite-bg-danger-soft: rgba(239, 68, 68, 0.08);
   --infinite-danger-color: #dc2626;
   --infinite-bg-danger: #dc2626;

   /* ─────────────────────────────────────
       Salon Wizard - Mode Clair
       ───────────────────────────────────── */
   --salon-wizard-box-shadow-color: rgba(99, 102, 241, 0.1);
   --salon-wizard-bg-info: #dbeafe;
   --salon-wizard-color-info: #1d4ed8;
   --salon-wizard-bg-dim: rgba(99, 102, 241, 0.08);
   --salon-wizard-bg-dark: #e2e8f0;
   --salon-wizard-bg-hsl: hsl(210, 60%, 95%);

   /* ─────────────────────────────────────
       Payment - Mode Clair
       ───────────────────────────────────── */
   --payment-color: #be123c;
   --payment-text-muted: #64748b;
   --payment-border: #cbd5e1;

   /* ─────────────────────────────────────
       Status Colors - Mode Clair
       ───────────────────────────────────── */
   --status-success-bg: rgba(16, 185, 129, 0.1);
   --status-success-text: #047857;
   --status-danger-bg: rgba(239, 68, 68, 0.1);
   --status-danger-text: #b91c1c;
   --status-warning-bg: rgba(245, 158, 11, 0.1);
   --status-warning-text: #b45309;
   --status-secondary-bg: rgba(148, 163, 184, 0.1);
   --status-secondary-text: #475569;
   --status-panel-bg: #ffffff;
   --status-border-color: #e2e8f0;

   /* ─────────────────────────────────────
       Hover Colors - Mode Clair
       ───────────────────────────────────── */
   --hover-color-background: rgba(99, 102, 241, 0.08);
   --hover-color-background2: rgba(99, 102, 241, 0.12);

   --color-background: #f8fafc;
   --color-background-trait: rgba(15, 23, 42, 0.05);

   /* ─────────────────────────────────────
       RGBA Colors - Mode Clair
       ───────────────────────────────────── */
   --color-rgba-fond-5: rgba(241, 245, 249, 0.5);
   --color-rgba-border: rgba(203, 213, 225, 0.3);
   --color-fond-principal: #ffffff;
   --color-bg-secondaire: #f1f5f9;
   --color-muted-button: #e2e8f0;
   --color-bg-muted: #e2e8f0;
   --background-color-bouton1: #e2e8f0;

   /* ─────────────────────────────────────
       RGBA Colors - Mode Clair
       ───────────────────────────────────── */
   --color-rgba-fond-5: rgba(241, 245, 249, 0.5);
   --color-rgba-fond-4: rgba(241, 245, 249, 0.3);
   --color-rgba-fond-card: rgba(249, 250, 251, 0.4);
   --color-rgba-border: rgba(203, 213, 225, 0.3);
   --color-bg-danger: #dc2626;
   --color-bg-danger-dark: #991b1b;


   /* ─────────────────────────────────────
       POP UP - Mode Clair
       ───────────────────────────────────── */

   /* SUCCESS POPUP */
   --popup-bg-success: #ecfdf5;
   --popup-text-success: #065f46;
   --popup-text-hint: #047857;
   --popup-text-highlight: #10b981;

   /* ERROR POPUP */
   --popup-bg-error: #fef2f2;
   --popup-text-error: #991b1b;
   --popup-text-danger: #dc2626;
   --popup-text-warning: #f59e0b;

   /* INFO POPUP */
   --popup-bg-primary: #eff6ff;
   --popup-text-info: #1e3a8a;
   --popup-text-link: #0369a1;
   --popup-text-subtle: #64748b;



   /* ─────────────────────────────────────
       ESPACE EXPOSANT - Mode Clair
       ───────────────────────────────────── */
   /* TABLE */
   --pb-table-width: 90%;

   --pb-table-bg: #ffffff;
   --pb-table-header-bg: #f8fafc;
   --pb-table-row-bg: #ffffff;
   --pb-table-row-alt-bg: #fcfcfd;
   --pb-table-row-hover: #f1f7ff;

   --pb-table-border: #e6eaf0;
   --pb-table-header-border: #d8e0ea;

   --pb-table-text: #1f2937;
   --pb-table-header-text: #111827;

   --pb-table-radius: 16px;

   --pb-table-shadow:
      0 1px 2px rgba(16, 24, 40, .04),
      0 8px 24px rgba(16, 24, 40, .06);

   /* admin dashboard  */
   --erp-icon-background: #F5F8FC;
}