/* ════════════════════════════════════════════════════════════════════════════════
   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: #e7e1da;
    --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-clair: #cbd5e1;
    --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;
}