/* ═══════════════════════════════════════════════════════════════
   THEME VARIANTS v1.0.0
   Variantes de thèmes — héritent de leur base (light ou dark)
   et ne redéfinissent que les variables qui changent.

   Cascade : :root → [data-theme="dark"] → [data-theme-variant="X"]
   ═══════════════════════════════════════════════════════════════ */

/* ─── PURE LIGHT — Blanc immaculé, zéro gris ──────────────────── */
[data-theme-variant="pure-light"] {
    --bg-primary: #FFFFFF;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F5F5F7;
    --bg-elevated: #FFFFFF;
    --bg-hover: rgba(0, 0, 0, 0.03);
    --bg-active: rgba(0, 0, 0, 0.06);
    --bg-input: #FFFFFF;

    --surface-card: #FFFFFF;
    --surface-modal: #FFFFFF;
    --surface-sidebar: #FFFFFF;
    --surface-header: rgba(255, 255, 255, 0.92);

    --border-color: rgba(0, 0, 0, 0.10);
    --border-strong: rgba(0, 0, 0, 0.15);
    --border-light: rgba(0, 0, 0, 0.06);
    --divider-color: rgba(0, 0, 0, 0.08);

    /* Ombres plus marquées (surfaces blanches sur blanc) */
    --shadow-xs: 0 1px 3px rgba(17, 17, 17, 0.06);
    --shadow-sm: 0 1px 4px rgba(17, 17, 17, 0.10);
    --shadow-md: 0 2px 8px rgba(17, 17, 17, 0.12);
    --shadow-lg: 0 4px 16px rgba(17, 17, 17, 0.12);
    --shadow-xl: 0 8px 32px rgba(17, 17, 17, 0.14);
}

/* ─── MAGIC BLUE — Bleu nuit profond ──────────────────────────── */
[data-theme-variant="magic-blue"] {
    --bg-primary: #0B1120;
    --bg-secondary: #111827;
    --bg-tertiary: #1E293B;
    --bg-elevated: #263248;
    --bg-hover: rgba(99, 152, 255, 0.08);
    --bg-active: rgba(99, 152, 255, 0.12);
    --bg-input: #0F1729;

    --text-primary: #E2E8F0;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --text-muted: #475569;
    --text-disabled: #334155;
    --text-inverse: #0B1120;

    --border-color: rgba(99, 152, 255, 0.12);
    --border-strong: rgba(99, 152, 255, 0.20);
    --border-light: rgba(99, 152, 255, 0.06);
    --divider-color: rgba(99, 152, 255, 0.08);
    --border-linear: #1E2D45;

    --surface-card: #111827;
    --surface-modal: #1E293B;
    --surface-sidebar: #0B1120;
    --surface-header: rgba(11, 17, 32, 0.90);

    /* Accent bleu clair */
    --accent: #60A5FA;
    --accent-blue: #60A5FA;
    --accent-subtle: rgba(96, 165, 250, 0.10);
    --accent-border: rgba(96, 165, 250, 0.25);
    --accent-glow: rgba(96, 165, 250, 0.15);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.5);

    /* Status */
    --color-success: #34D399;
    --color-success-bg: rgba(52, 211, 153, 0.15);
    --color-warning: #FBBF24;
    --color-warning-bg: rgba(251, 191, 36, 0.15);
    --color-danger: #F87171;
    --color-danger-bg: rgba(248, 113, 113, 0.15);
    --color-info: #60A5FA;
    --color-info-bg: rgba(96, 165, 250, 0.12);
}

/* ─── CLASSIC DARK — Gris chaud (style VS Code / Sublime) ─────── */
[data-theme-variant="classic-dark"] {
    --bg-primary: #1E1E1E;
    --bg-secondary: #252526;
    --bg-tertiary: #2D2D2D;
    --bg-elevated: #353535;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: rgba(255, 255, 255, 0.10);
    --bg-input: #1E1E1E;

    --text-primary: #D4D4D4;
    --text-secondary: #9D9D9D;
    --text-tertiary: #6D6D6D;
    --text-muted: #505050;
    --text-disabled: #3D3D3D;
    --text-inverse: #1E1E1E;

    --border-color: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-light: rgba(255, 255, 255, 0.05);
    --divider-color: rgba(255, 255, 255, 0.07);
    --border-linear: #3C3C3C;

    --surface-card: #252526;
    --surface-modal: #2D2D2D;
    --surface-sidebar: #1E1E1E;
    --surface-header: rgba(30, 30, 30, 0.90);

    /* Accent bleu VS Code */
    --accent: #569CD6;
    --accent-blue: #569CD6;
    --accent-subtle: rgba(86, 156, 214, 0.10);
    --accent-border: rgba(86, 156, 214, 0.25);
    --accent-glow: rgba(86, 156, 214, 0.15);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.40);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.45);

    /* Status — tons légèrement adoucis */
    --color-success: #6A9955;
    --color-success-bg: rgba(106, 153, 85, 0.15);
    --color-warning: #D7BA7D;
    --color-warning-bg: rgba(215, 186, 125, 0.15);
    --color-danger: #F44747;
    --color-danger-bg: rgba(244, 71, 71, 0.15);
    --color-info: #569CD6;
    --color-info-bg: rgba(86, 156, 214, 0.12);
}

/* ─── CUSTOM — Palette utilisateur (définie via JS style.setProperty) ── */
/* Pas de variables pré-définies — ThemeManager injecte en inline */
/* Ce sélecteur sert juste de hook pour la détection */
[data-theme-variant="custom"] {
    /* Les variables sont injectées dynamiquement par ThemeManager.setCustomColors() */
}