/* ════════════════════════════════════════════════════════════════════════════════
   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(30, 30, 46, 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;
}