/* ═══════════════════════════════════════════════════════════════
   Noctua — Thèmes CSS (Variables)
   ═══════════════════════════════════════════════════════════════ */

/* ── Thème par défaut (Noctua) — Cyan/Teal vif ──────────────── */
:root, [data-theme="noctua"] {
    /* Background */
    --bg-primary: #020205;
    --bg-secondary: #010103;
    --bg-panel: rgba(8, 8, 25, 0.65);
    --bg-panel-solid: rgba(10, 10, 30, 0.8);
    --bg-input: rgba(10, 10, 30, 0.8);
    --bg-hover: rgba(0, 255, 204, 0.08);
    --bg-active: rgba(0, 255, 204, 0.15);

    /* Accent - Primary (Cyan) */
    --accent: #00ffcc;
    --accent-rgb: 0, 255, 204;
    --accent-dim: rgba(0, 255, 204, 0.4);
    --accent-subtle: rgba(0, 255, 204, 0.15);
    --accent-faint: rgba(0, 255, 204, 0.08);

    /* Text */
    --text-primary: #fff;
    --text-secondary: #ccc;
    --text-muted: #888;
    --text-dim: #666;

    /* Status */
    --status-online: #88ff88;
    --status-offline: #ff5555;
    --status-warning: #ffcc00;
    --status-error: #ff5577;

    /* Borders */
    --border-subtle: rgba(0, 255, 204, 0.08);
    --border-default: rgba(0, 255, 204, 0.15);
    --border-strong: rgba(0, 255, 204, 0.3);
    --border-active: #00ffcc;

    /* Shadows */
    --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 12px rgba(0, 255, 204, 0.2);

    /* Specific elements */
    --pinned-border: rgba(0, 255, 204, 0.5);
    --drag-handle-bg: rgba(0, 255, 204, 0.08);
    --btn-success: #88ff88;
    --btn-warning: #ffcc00;
    --btn-danger: #ff5577;
    --slider-track: rgba(0, 255, 204, 0.15);
    --slider-thumb: rgba(0, 255, 204, 0.6);
    --checkbox-accent: #00ffcc;
    --mode-btn-active-bg: var(--accent);
    --mode-btn-active-fg: #020205;
}

/* ── Thème sobre — Bleu-gris doux, sans flash ────────────────── */
[data-theme="sober"] {
    /* Background — léger voile bleuté, pas plus sombre */
    --bg-primary: #080b10;
    --bg-secondary: #060810;
    --bg-panel: rgba(16, 20, 32, 0.70);
    --bg-panel-solid: rgba(20, 26, 40, 0.82);
    --bg-input: rgba(14, 18, 28, 0.85);
    --bg-hover: rgba(120, 150, 180, 0.06);
    --bg-active: rgba(120, 150, 180, 0.12);

    /* Accent — bleu-gris discret, pas criard */
    --accent: #7a9ab0;
    --accent-rgb: 122, 154, 176;
    --accent-dim: rgba(122, 154, 176, 0.45);
    --accent-subtle: rgba(122, 154, 176, 0.18);
    --accent-faint: rgba(122, 154, 176, 0.08);

    /* Text — légèrement adouci, pas blanc pur */
    --text-primary: #d8dce2;
    --text-secondary: #a0a8b4;
    --text-muted: #6a7280;
    --text-dim: #484f58;

    /* Status — teintés pour rester dans la palette */
    --status-online: #7aaa82;
    --status-offline: #a06060;
    --status-warning: #b8a060;
    --status-error: #b06870;

    /* Borders — contours gris-bleu fins */
    --border-subtle: rgba(110, 130, 155, 0.08);
    --border-default: rgba(110, 130, 155, 0.16);
    --border-strong: rgba(110, 130, 155, 0.30);
    --border-active: #7a9ab0;

    /* Shadows — plus douces */
    --shadow-panel: 0 8px 32px rgba(0, 4, 12, 0.55);
    --shadow-glow: 0 0 10px rgba(100, 140, 180, 0.10);

    /* Specific elements */
    --pinned-border: rgba(110, 145, 180, 0.40);
    --drag-handle-bg: rgba(110, 130, 155, 0.06);
    --btn-success: #7aaa82;
    --btn-warning: #b8a060;
    --btn-danger: #b06870;
    --slider-track: rgba(110, 130, 155, 0.18);
    --slider-thumb: rgba(122, 154, 176, 0.55);
    --checkbox-accent: #7a9ab0;
    --mode-btn-active-bg: #7a9ab0;
    --mode-btn-active-fg: #0e1220;
}

/* ── Thème graphite — gris-bleu très désaturé, ultra sobre ─────── */
[data-theme="graphite"] {
    --bg-primary: #1a1e24;
    --bg-secondary: #141820;
    --bg-panel: rgba(38, 44, 54, 0.88);
    --bg-panel-solid: rgba(42, 48, 60, 0.92);
    --bg-input: rgba(30, 36, 46, 0.9);
    --bg-hover: rgba(130, 145, 160, 0.10);
    --bg-active: rgba(130, 145, 160, 0.18);
    --accent: #a8b8c8;
    --accent-rgb: 168, 184, 200;
    --accent-dim: rgba(168, 184, 200, 0.45);
    --accent-subtle: rgba(168, 184, 200, 0.18);
    --accent-faint: rgba(168, 184, 200, 0.08);
    --text-primary: #e0e6ee;
    --text-secondary: #b8c2d0;
    --text-muted: #8894a6;
    --text-dim: #5a6678;
    --status-online: #7a9a8a;
    --status-offline: #8a6a6a;
    --status-warning: #9e9a7a;
    --status-error: #9a6e7a;
    --border-subtle: rgba(130, 145, 160, 0.07);
    --border-default: rgba(130, 145, 160, 0.14);
    --border-strong: rgba(130, 145, 160, 0.26);
    --border-active: #8a9baa;
    --shadow-panel: 0 8px 28px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 0 8px rgba(130, 145, 160, 0.08);
    --pinned-border: rgba(138, 154, 170, 0.35);
    --drag-handle-bg: rgba(130, 145, 160, 0.05);
    --btn-success: #7a9a8a;
    --btn-warning: #9e9a7a;
    --btn-danger: #9a6e7a;
    --slider-track: rgba(130, 145, 160, 0.16);
    --slider-thumb: rgba(138, 154, 170, 0.5);
    --checkbox-accent: #8a9baa;
    --mode-btn-active-bg: #8a9baa;
    --mode-btn-active-fg: #0c0f13;
}

/* ── Thème twilight — navy profond / bleu acier ────────────────── */
[data-theme="twilight"] {
    --bg-primary: #0c1428;
    --bg-secondary: #080f20;
    --bg-panel: rgba(22, 38, 68, 0.88);
    --bg-panel-solid: rgba(28, 44, 78, 0.92);
    --bg-input: rgba(18, 30, 52, 0.9);
    --bg-hover: rgba(90, 120, 160, 0.10);
    --bg-active: rgba(90, 120, 160, 0.16);
    --accent: #6ea8d0;
    --accent-rgb: 110, 168, 208;
    --accent-dim: rgba(110, 168, 208, 0.45);
    --accent-subtle: rgba(110, 168, 208, 0.18);
    --accent-faint: rgba(110, 168, 208, 0.08);
    --text-primary: #dce8f5;
    --text-secondary: #a8b8d0;
    --text-muted: #7a8eb0;
    --text-dim: #526a88;
    --status-online: #7ab8a0;
    --status-offline: #8a6a7a;
    --status-warning: #b8a86a;
    --status-error: #b86e7a;
    --border-subtle: rgba(90, 120, 160, 0.08);
    --border-default: rgba(90, 120, 160, 0.15);
    --border-strong: rgba(90, 120, 160, 0.28);
    --border-active: #7aa5c2;
    --shadow-panel: 0 8px 28px rgba(2, 8, 20, 0.6);
    --shadow-glow: 0 0 10px rgba(90, 120, 160, 0.09);
    --pinned-border: rgba(122, 165, 194, 0.38);
    --drag-handle-bg: rgba(90, 120, 160, 0.06);
    --btn-success: #7ab8a0;
    --btn-warning: #b8a86a;
    --btn-danger: #b86e7a;
    --slider-track: rgba(90, 120, 160, 0.16);
    --slider-thumb: rgba(122, 165, 194, 0.52);
    --checkbox-accent: #7aa5c2;
    --mode-btn-active-bg: #7aa5c2;
    --mode-btn-active-fg: #0a0f1e;
}

/* ── Thème ember — charcoal chaud / ambre doux (vision nocturne) ─ */
[data-theme="ember"] {
    --bg-primary: #1a140f;
    --bg-secondary: #140f0a;
    --bg-panel: rgba(52, 36, 22, 0.88);
    --bg-panel-solid: rgba(58, 40, 24, 0.92);
    --bg-input: rgba(42, 28, 16, 0.9);
    --bg-hover: rgba(196, 154, 108, 0.10);
    --bg-active: rgba(196, 154, 108, 0.16);
    --accent: #e0a86a;
    --accent-rgb: 224, 168, 106;
    --accent-dim: rgba(224, 168, 106, 0.45);
    --accent-subtle: rgba(224, 168, 106, 0.18);
    --accent-faint: rgba(224, 168, 106, 0.08);
    --text-primary: #f5e8d5;
    --text-secondary: #d8c4a8;
    --text-muted: #a89078;
    --text-dim: #7a6a58;
    --status-online: #9ab87a;
    --status-offline: #8a6a60;
    --status-warning: #c4a86a;
    --status-error: #b87a6a;
    --border-subtle: rgba(196, 154, 108, 0.07);
    --border-default: rgba(196, 154, 108, 0.14);
    --border-strong: rgba(196, 154, 108, 0.26);
    --border-active: #c49a6c;
    --shadow-panel: 0 8px 28px rgba(12, 8, 6, 0.55);
    --shadow-glow: 0 0 8px rgba(196, 154, 108, 0.08);
    --pinned-border: rgba(196, 154, 108, 0.35);
    --drag-handle-bg: rgba(196, 154, 108, 0.06);
    --btn-success: #9ab87a;
    --btn-warning: #c4a86a;
    --btn-danger: #b87a6a;
    --slider-track: rgba(196, 154, 108, 0.16);
    --slider-thumb: rgba(196, 154, 108, 0.5);
    --checkbox-accent: #c49a6c;
    --mode-btn-active-bg: #c49a6c;
    --mode-btn-active-fg: #11100f;
}