/* ════════════════════════════════════════════════════════════════════════════════
   MODE SOMBRE - DESIGN SYSTEM
   Toutes les variables pour le thème sombre
   ════════════════════════════════════════════════════════════════════════════════ */

:root {
   /* ─────────────────────────────────────
       Backgrounds - Mode Sombre
       ───────────────────────────────────── */
   --color-bg-base: #0f172a;
   /* Page bg - Slate 950 */
   --color-bg-primary: #111827;
   /* Main bg - Gray 950 */
   --color-bg-secondary: #1f2937;
   /* Secondary bg - Gray 900 */
   --color-bg-tertiary: #374151;
   /* Tertiary bg - Gray 700 */
   --color-bg-hover: #4b5563;
   /* Hover state - Gray 600 */
   --color-bg-active: #6b7280;
   /* Active state - Gray 500 */

   --color-surface: #1e1e2e;
   /* Card/surface */
   --color-surface-hover: #2d2d3b;
   /* Surface hover */
   --color-surface-alt: #262633;
   /* Alternative surface */

   /* ─────────────────────────────────────
       Text Colors - Mode Sombre
       ───────────────────────────────────── */
   --color-text-primary: #f1f5f9;
   /* Slate 100 */
   --color-text-secondary: #cbd5e1;
   /* Slate 200 */
   --color-text-muted: #94a3b8;
   /* Slate 400 */
   --color-text-dim: #64748b;
   /* Slate 500 */
   --color-text-subtle: #475569;
   /* Slate 700 */
   --color-text-disabled: #334155;
   /* Disabled text */

   /* ─────────────────────────────────────
       Borders & Dividers
       ───────────────────────────────────── */
   --color-border: #334155;
   /* Slate 700 */
   --color-border-light: #475569;
   /* Slate 600 */
   --color-border-subtle: #1e293b;
   /* Slate 900 */
   --color-divider: rgba(148, 163, 184, 0.1);

   /* ─────────────────────────────────────
       Modal & Overlay - Mode Sombre
       ───────────────────────────────────── */
   --overlay-bg: rgba(15, 23, 42, 0.7);
   --modal-scrollbar-bg: transparent;
   --modal-scrollbar-thumb: rgba(203, 213, 225, 0.2);
   --modal-scrollbar-thumb-hover: rgba(203, 213, 225, 0.3);

   /* ─────────────────────────────────────
       Input & Form - Mode Sombre
       ───────────────────────────────────── */
   --color-fond-input: var(--color-surface);
   --color-texte-input: var(--color-text-primary);
   --color-placeholder: var(--color-text-dim);
   --color-bordure-input: var(--color-border);
   --color-bordure-input-focus: var(--color-principal);

   /* ─────────────────────────────────────
       Button - Mode Sombre
       ───────────────────────────────────── */
   --color-fond-bouton: var(--color-bg-tertiary);
   --color-fond-bouton-hover: var(--color-bg-active);
   --color-bouton: var(--color-bg-tertiary);
   --color-bouton-hover: var(--color-bg-active);
   --color-texte-bouton: var(--color-text-primary);

   --color-bouton-danger: var(--color-danger);
   --color-texte-bouton-danger: #ffffff;
   --color-bouton-warning: var(--color-warning);
   --color-texte-bouton-warning: #000000;
   --color-bouton-success: var(--color-success);
   --color-texte-bouton-success: #ffffff;

   /* ─────────────────────────────────────
       Links - Mode Sombre
       ───────────────────────────────────── */
   --color-texte-lien: var(--color-accent);
   --color-texte-lien-hover: var(--color-accent-hover);
   --color-texte-lien-visite: var(--color-accent);

   /* ─────────────────────────────────────
       Heading Colors - Mode Sombre
       ───────────────────────────────────── */
   --color-titre-h1: var(--color-text-primary);
   --color-titre-h2: var(--color-text-secondary);
   --color-titre-h3: var(--color-text-secondary);
   --color-titre-h4: var(--color-text-muted);
   --color-titre-h5: var(--color-text-muted);
   --color-titre-h6: var(--color-text-dim);

   /* ─────────────────────────────────────
       SVG Colors - Mode Sombre
       ───────────────────────────────────── */
   --svg-color-fond-noir: white;
   --svg-color-fond-clair: #1f1f1f;
   --svg-color-fill: currentColor;
   --svg-color-stroke: none;

   /* ─────────────────────────────────────
       Utility Colors - Mode Sombre
       ───────────────────────────────────── */
   --color-fondeur-principal: var(--color-bg-primary);
   --color-fond-secondaire: var(--color-surface);
   --color-fond-principal: var(--color-bg-primary);
   --color-bg-secondaire: var(--color-bg-secondary);
   --color-muted-button: var(--color-bg-tertiary);
   --color-bg-muted: var(--color-bg-tertiary);
   --color-rgba-fond-orange-10: #ef444438;
   --color-texte: var(--color-text-primary);
   --color-texte2: var(--color-text-primary);
   --color-texte-secondaire: var(--color-text-muted);
   --color-action: var(--color-info);
   --color-text-muted: var(--color-text-muted);
   --color-border-muted: var(--color-border-subtle);
   --color-bg-light: var(--color-surface);

   --color-zoom-overlay: rgba(15, 23, 42, 0.9);
   --color-drop-shadow-white-0-3: rgba(255, 255, 255, 0.3);
   --color-drop-shadow-black-0-7: rgba(0, 0, 0, 0.7);
   --color-shadow: rgba(0, 0, 0, 0.5);
   --color-rgba-82-aa-ff-0-2: rgba(99, 102, 241, 0.2);

   --color-footer-texte: var(--color-text-muted);
   --color-gris-clair: #94a3b8;
   --color-gris-moyen: #64748b;
   --color-gris-fonce: #475569;
   --color-blanc: #ffffff;
   --color-bleu: var(--color-info);
   --color-vert: var(--color-success);
   --color-jaune: var(--color-warning);
   --color-rouge: var(--color-danger);
   --accent-color: var(--color-accent);
   --success-color: var(--color-success);
   --danger-color: var(--color-danger);

   --color-bleu-status: var(--color-info);
   --color-vert-status: var(--color-success);
   --color-jaune-status: var(--color-warning);
   --color-rouge-status: var(--color-danger);

   /* ─────────────────────────────────────
       App Variables - Mode Sombre
       ───────────────────────────────────── */
   --app-primary: var(--color-principal);
   --app-primary-hover: var(--color-principal-hover);
   --app-accent: var(--color-accent);
   --app-success: var(--color-success);
   --app-warning: var(--color-warning);
   --app-danger: var(--color-danger);
   --app-bg-canvas: var(--color-bg-primary);
   --app-bg-card: var(--color-surface);
   --app-bg-hover: var(--color-surface-hover);
   --app-text-main: var(--color-text-primary);
   --app-text-muted: var(--color-text-muted);
   --app-text-dim: var(--color-text-dim);
   --app-border: var(--color-border);
   --app-shadow: var(--shadow-lg);
   --app-radius-sm: var(--radius-sm);
   --app-radius-md: var(--radius-md);
   --app-radius-lg: var(--radius-lg);

   /* ─────────────────────────────────────
       Alert Styles - Mode Sombre
       ───────────────────────────────────── */
   --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.25);
   --border-alert-warning-glass-hover: rgba(245, 158, 11, 0.4);
   --color-text-alert-warning-glass: #f5f5f5;
   --shadow-alert-warning-glass: rgba(0, 0, 0, 0.4);
   --svg-color-alert-warning-glass: #facc15;
   --strong-color-alert-warning-glass: #fde68a;

   /* ─────────────────────────────────────
       Border & Panel - Mode Sombre
       ───────────────────────────────────── */
   --color-border-default: #334155;
   --color-border-focus: #06b6d4;
   --color-panel-dark: #1e1e2e;
   --color-gradient-highlight: linear-gradient(90deg, #6366f1, #22d3ee);
   --color-bordure: var(--color-border);
   --color-bordure-light: var(--color-border-light);

   /* ─────────────────────────────────────
       Infinite Table - Mode Sombre
       ───────────────────────────────────── */
   --infinite-border-color: #334155;
   --infinite-bg-card: #1e1e2e;
   --infinite-text-color: #f1f5f9;
   --infinite-text-muted: #94a3b8;
   --infinite-accent-color: #06b6d4;
   --infinite-box-shadow-accent: rgba(6, 182, 212, 0.15);
   --infinite-bg-white-90: rgba(255, 255, 255, 0.9);
   --infinite-box-shadow-soft: rgba(0, 0, 0, 0.1);
   --infinite-bg-danger-soft: rgba(239, 68, 68, 0.1);
   --infinite-danger-color: #ef4444;
   --infinite-bg-danger: #ef4444;

   /* ─────────────────────────────────────
       Salon Wizard - Mode Sombre
       ───────────────────────────────────── */
   --salon-wizard-box-shadow-color: rgba(99, 102, 241, 0.15);
   --salon-wizard-bg-info: #1e3a8a;
   --salon-wizard-color-info: #93c5fd;
   --salon-wizard-bg-dim: rgba(79, 70, 229, 0.1);
   --salon-wizard-bg-dark: #1f2937;
   --salon-wizard-bg-hsl: hsl(210, 40%, 20%);

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

   /* ─────────────────────────────────────
       Status Colors - Mode Sombre
       ───────────────────────────────────── */
   --status-success-bg: rgba(16, 185, 129, 0.1);
   --status-success-text: #34d399;
   --status-danger-bg: rgba(239, 68, 68, 0.1);
   --status-danger-text: #f87171;
   --status-warning-bg: rgba(245, 158, 11, 0.1);
   --status-warning-text: #fbbf24;
   --status-secondary-bg: rgba(148, 163, 184, 0.1);
   --status-secondary-text: #cbd5e1;
   --status-panel-bg: #1e1e2e;
   --status-border-color: #334155;

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

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

   /* ─────────────────────────────────────
       RGBA Colors - Mode Sombre
       ───────────────────────────────────── */
   --color-rgba-fond-5: rgba(30, 30, 46, 0.5);
   --color-rgba-fond-4: rgba(69, 69, 92, 0.3);
   --color-rgba-fond-card: rgba(45, 45, 59, 0.4);
   --color-rgba-border: rgba(51, 65, 85, 0.3);
   --background-color-bouton1: var(--color-bg-tertiary);
   --color-bg-danger: #dc2626;
   --color-bg-danger-dark: #991b1b;

   /* ─────────────────────────────────────
       POP UP - Mode sombre
       ───────────────────────────────────── */

   /* SUCCESS POPUP */
   --popup-bg-success: #052e26;
   --popup-text-success: #a7f3d0;
   --popup-text-hint: #34d399;
   --popup-text-highlight: #10b981;

   /* ERROR POPUP */
   --popup-bg-error: #2a0f12;
   --popup-text-error: #fecaca;
   --popup-text-danger: #f87171;
   --popup-text-warning: #fbbf24;

   /* INFO POPUP */
   --popup-bg-primary: #0b1b3a;
   --popup-text-info: #bfdbfe;
   --popup-text-link: #38bdf8;
   --popup-text-subtle: #94a3b8;

   /* ─────────────────────────────────────
       ESPACE EXPOSANT - Mode Clair
       ───────────────────────────────────── */
   /* TABLE */


   --pb-table-bg: #1a1d23;
   --pb-table-header-bg: #232833;
   --pb-table-row-bg: #1a1d23;
   --pb-table-row-alt-bg: #20252e;
   --pb-table-row-hover: #2a3443;

   --pb-table-border: #303845;
   --pb-table-header-border: #3d4756;

   --pb-table-text: #edf2f7;
   --pb-table-header-text: #ffffff;

   --pb-table-shadow:
      0 1px 3px rgba(0, 0, 0, .35),
      0 16px 40px rgba(0, 0, 0, .45);


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