/* ==========================================================================
   VaultUI Themes — MonkeyType-style multi-theme system
   Each theme overrides CSS custom properties via [data-theme] selector.
   The default (Serika Light) is defined in vault-ui.css :root.
   ========================================================================== */

/* --- Additional tokens needed for theming --- */
:root,
[data-theme="serika-light"] {
    --color-hover-overlay: rgba(0, 0, 0, 0.04);
    --color-hover-overlay-strong: rgba(0, 0, 0, 0.06);
    --color-modal-backdrop: rgba(0, 0, 0, 0.4);
    --color-primary-text: #ffffff;
    --color-danger-subtle: rgba(239, 68, 68, 0.08);
    --color-danger-border: rgba(239, 68, 68, 0.3);
    --color-danger-bg: rgba(239, 68, 68, 0.07);
    --color-danger-focus: rgba(239, 68, 68, 0.12);
    --color-success-subtle: rgba(34, 197, 94, 0.1);
    --color-success-text: #16a34a;
    --color-success-border: rgba(34, 197, 94, 0.2);
    --color-warning-subtle: rgba(245, 158, 11, 0.1);
    --color-warning-text: #d97706;
    --color-primary-overlay: rgba(79, 110, 247, 0.04);
    --color-primary-subtle-10: rgba(79, 110, 247, 0.1);
    --color-primary-subtle-02: rgba(79, 110, 247, 0.02);
    --color-category-purple: rgba(139, 92, 246, 0.1);
    --color-category-purple-text: #7c3aed;
    --color-scrollbar-thumb: rgba(0, 0, 0, 0.05);
    --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.12);
    --color-input-bg: #FFFFFF;
    --pwdgen-strength-track: rgba(0, 0, 0, 0.06);
    --color-diff-bg: rgba(255, 193, 7, 0.08);
}

/* ==========================================================================
   THEME: Midnight Ocean — deep navy with cyan accent
   ========================================================================== */
[data-theme="midnight"] {
    /* Colors — Base */
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-raised: #334155;
    --color-border: #334155;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-placeholder: #64748b;
    --color-input-bg: #1e293b;

    /* Colors — Brand accent */
    --color-primary: #38bdf8;
    --color-primary-hover: #0ea5e9;
    --color-primary-text: #0f172a;
    --color-primary-subtle: rgba(56, 189, 248, 0.12);
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-danger: #f87171;

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.25);

    /* Overlay tokens */
    --color-hover-overlay: rgba(255, 255, 255, 0.05);
    --color-hover-overlay-strong: rgba(255, 255, 255, 0.08);
    --color-modal-backdrop: rgba(0, 0, 0, 0.6);
    --color-danger-subtle: rgba(248, 113, 113, 0.12);
    --color-danger-border: rgba(248, 113, 113, 0.3);
    --color-danger-bg: rgba(248, 113, 113, 0.1);
    --color-danger-focus: rgba(248, 113, 113, 0.2);
    --color-success-subtle: rgba(52, 211, 153, 0.12);
    --color-success-text: #34d399;
    --color-success-border: rgba(52, 211, 153, 0.25);
    --color-warning-subtle: rgba(251, 191, 36, 0.12);
    --color-warning-text: #fbbf24;
    --color-primary-overlay: rgba(56, 189, 248, 0.06);
    --color-primary-subtle-10: rgba(56, 189, 248, 0.15);
    --color-primary-subtle-02: rgba(56, 189, 248, 0.04);
    --color-category-purple: rgba(167, 139, 250, 0.15);
    --color-category-purple-text: #a78bfa;
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.16);
    --pwdgen-strength-track: rgba(255, 255, 255, 0.1);
    --color-diff-bg: rgba(251, 191, 36, 0.1);
}

/* ==========================================================================
   THEME: Mocha — warm chocolate with amber/gold accent
   ========================================================================== */
[data-theme="mocha"] {
    /* Colors — Base */
    --color-bg: #1a1520;
    --color-surface: #2a2230;
    --color-surface-raised: #3a3042;
    --color-border: #3a3042;
    --color-text-primary: #f5e6d3;
    --color-text-secondary: #a89984;
    --color-text-placeholder: #7c6f64;
    --color-input-bg: #2a2230;

    /* Colors — Brand accent */
    --color-primary: #f5a623;
    --color-primary-hover: #e8951a;
    --color-primary-text: #1a1520;
    --color-primary-subtle: rgba(245, 166, 35, 0.12);
    --color-success: #a6e3a1;
    --color-warning: #fab387;
    --color-danger: #f38ba8;

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 3px rgba(245, 166, 35, 0.25);

    /* Overlay tokens */
    --color-hover-overlay: rgba(255, 255, 255, 0.04);
    --color-hover-overlay-strong: rgba(255, 255, 255, 0.07);
    --color-modal-backdrop: rgba(0, 0, 0, 0.6);
    --color-danger-subtle: rgba(243, 139, 168, 0.12);
    --color-danger-border: rgba(243, 139, 168, 0.3);
    --color-danger-bg: rgba(243, 139, 168, 0.1);
    --color-danger-focus: rgba(243, 139, 168, 0.2);
    --color-success-subtle: rgba(166, 227, 161, 0.12);
    --color-success-text: #a6e3a1;
    --color-success-border: rgba(166, 227, 161, 0.25);
    --color-warning-subtle: rgba(250, 179, 135, 0.12);
    --color-warning-text: #fab387;
    --color-primary-overlay: rgba(245, 166, 35, 0.06);
    --color-primary-subtle-10: rgba(245, 166, 35, 0.15);
    --color-primary-subtle-02: rgba(245, 166, 35, 0.04);
    --color-category-purple: rgba(203, 166, 247, 0.15);
    --color-category-purple-text: #cba6f7;
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.16);
    --pwdgen-strength-track: rgba(255, 255, 255, 0.1);
    --color-diff-bg: rgba(250, 179, 135, 0.1);
}

/* ==========================================================================
   THEME: Botanical — forest greens with mint accent
   ========================================================================== */
[data-theme="botanical"] {
    /* Colors — Base */
    --color-bg: #0d1f13;
    --color-surface: #162b1c;
    --color-surface-raised: #1f3a27;
    --color-border: #2a4a33;
    --color-text-primary: #e8f5e9;
    --color-text-secondary: #81c784;
    --color-text-placeholder: #5a8a5e;
    --color-input-bg: #162b1c;

    /* Colors — Brand accent */
    --color-primary: #66bb6a;
    --color-primary-hover: #4caf50;
    --color-primary-text: #0d1f13;
    --color-primary-subtle: rgba(102, 187, 106, 0.14);
    --color-success: #81c784;
    --color-warning: #ffcc02;
    --color-danger: #ef5350;

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 3px rgba(102, 187, 106, 0.25);

    /* Overlay tokens */
    --color-hover-overlay: rgba(255, 255, 255, 0.04);
    --color-hover-overlay-strong: rgba(255, 255, 255, 0.07);
    --color-modal-backdrop: rgba(0, 0, 0, 0.6);
    --color-danger-subtle: rgba(239, 83, 80, 0.12);
    --color-danger-border: rgba(239, 83, 80, 0.3);
    --color-danger-bg: rgba(239, 83, 80, 0.1);
    --color-danger-focus: rgba(239, 83, 80, 0.2);
    --color-success-subtle: rgba(129, 199, 132, 0.14);
    --color-success-text: #81c784;
    --color-success-border: rgba(129, 199, 132, 0.25);
    --color-warning-subtle: rgba(255, 204, 2, 0.12);
    --color-warning-text: #ffcc02;
    --color-primary-overlay: rgba(102, 187, 106, 0.06);
    --color-primary-subtle-10: rgba(102, 187, 106, 0.15);
    --color-primary-subtle-02: rgba(102, 187, 106, 0.04);
    --color-category-purple: rgba(186, 104, 200, 0.15);
    --color-category-purple-text: #ba68c8;
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.16);
    --pwdgen-strength-track: rgba(255, 255, 255, 0.1);
    --color-diff-bg: rgba(255, 204, 2, 0.1);
}

/* ==========================================================================
   THEME: Carbon — ultra-professional monochrome gray
   ========================================================================== */
[data-theme="carbon"] {
    --color-bg: #18181b;
    --color-surface: #27272a;
    --color-surface-raised: #3f3f46;
    --color-border: #3f3f46;
    --color-text-primary: #fafafa;
    --color-text-secondary: #a1a1aa;
    --color-text-placeholder: #71717a;
    --color-input-bg: #27272a;

    --color-primary: #a1a1aa;
    --color-primary-hover: #d4d4d8;
    --color-primary-text: #18181b;
    --color-primary-subtle: rgba(161, 161, 170, 0.12);
    --color-success: #4ade80;
    --color-warning: #facc15;
    --color-danger: #f87171;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(161, 161, 170, 0.25);

    --color-hover-overlay: rgba(255, 255, 255, 0.05);
    --color-hover-overlay-strong: rgba(255, 255, 255, 0.08);
    --color-modal-backdrop: rgba(0, 0, 0, 0.65);
    --color-danger-subtle: rgba(248, 113, 113, 0.12);
    --color-danger-border: rgba(248, 113, 113, 0.3);
    --color-danger-bg: rgba(248, 113, 113, 0.1);
    --color-danger-focus: rgba(248, 113, 113, 0.2);
    --color-success-subtle: rgba(74, 222, 128, 0.12);
    --color-success-text: #4ade80;
    --color-success-border: rgba(74, 222, 128, 0.25);
    --color-warning-subtle: rgba(250, 204, 21, 0.12);
    --color-warning-text: #facc15;
    --color-primary-overlay: rgba(161, 161, 170, 0.06);
    --color-primary-subtle-10: rgba(161, 161, 170, 0.15);
    --color-primary-subtle-02: rgba(161, 161, 170, 0.04);
    --color-category-purple: rgba(167, 139, 250, 0.15);
    --color-category-purple-text: #a78bfa;
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.16);
    --pwdgen-strength-track: rgba(255, 255, 255, 0.1);
    --color-diff-bg: rgba(250, 204, 21, 0.1);
}

/* ==========================================================================
   THEME: Nord — cool arctic blue with soft contrasts
   ========================================================================== */
[data-theme="nord"] {
    --color-bg: #2e3440;
    --color-surface: #3b4252;
    --color-surface-raised: #434c5e;
    --color-border: #434c5e;
    --color-text-primary: #eceff4;
    --color-text-secondary: #d8dee9;
    --color-text-placeholder: #7b88a1;
    --color-input-bg: #3b4252;

    --color-primary: #88c0d0;
    --color-primary-hover: #81a1c1;
    --color-primary-text: #2e3440;
    --color-primary-subtle: rgba(136, 192, 208, 0.14);
    --color-success: #a3be8c;
    --color-warning: #ebcb8b;
    --color-danger: #bf616a;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45);
    --shadow-focus: 0 0 0 3px rgba(136, 192, 208, 0.25);

    --color-hover-overlay: rgba(255, 255, 255, 0.04);
    --color-hover-overlay-strong: rgba(255, 255, 255, 0.07);
    --color-modal-backdrop: rgba(0, 0, 0, 0.55);
    --color-danger-subtle: rgba(191, 97, 106, 0.14);
    --color-danger-border: rgba(191, 97, 106, 0.3);
    --color-danger-bg: rgba(191, 97, 106, 0.1);
    --color-danger-focus: rgba(191, 97, 106, 0.2);
    --color-success-subtle: rgba(163, 190, 140, 0.14);
    --color-success-text: #a3be8c;
    --color-success-border: rgba(163, 190, 140, 0.25);
    --color-warning-subtle: rgba(235, 203, 139, 0.14);
    --color-warning-text: #ebcb8b;
    --color-primary-overlay: rgba(136, 192, 208, 0.06);
    --color-primary-subtle-10: rgba(136, 192, 208, 0.15);
    --color-primary-subtle-02: rgba(136, 192, 208, 0.04);
    --color-category-purple: rgba(180, 142, 173, 0.15);
    --color-category-purple-text: #b48ead;
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.16);
    --pwdgen-strength-track: rgba(255, 255, 255, 0.1);
    --color-diff-bg: rgba(235, 203, 139, 0.1);
}

/* ==========================================================================
   THEME: Slate — professional light-gray with teal accent
   ========================================================================== */
[data-theme="slate"] {
    --color-bg: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-border: #cbd5e1;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-placeholder: #94a3b8;
    --color-input-bg: #ffffff;

    --color-primary: #0d9488;
    --color-primary-hover: #0f766e;
    --color-primary-text: #ffffff;
    --color-primary-subtle: rgba(13, 148, 136, 0.1);
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
    --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.2);

    --color-hover-overlay: rgba(0, 0, 0, 0.03);
    --color-hover-overlay-strong: rgba(0, 0, 0, 0.06);
    --color-modal-backdrop: rgba(0, 0, 0, 0.4);
    --color-danger-subtle: rgba(220, 38, 38, 0.08);
    --color-danger-border: rgba(220, 38, 38, 0.25);
    --color-danger-bg: rgba(220, 38, 38, 0.06);
    --color-danger-focus: rgba(220, 38, 38, 0.12);
    --color-success-subtle: rgba(22, 163, 74, 0.1);
    --color-success-text: #16a34a;
    --color-success-border: rgba(22, 163, 74, 0.2);
    --color-warning-subtle: rgba(217, 119, 6, 0.1);
    --color-warning-text: #d97706;
    --color-primary-overlay: rgba(13, 148, 136, 0.04);
    --color-primary-subtle-10: rgba(13, 148, 136, 0.12);
    --color-primary-subtle-02: rgba(13, 148, 136, 0.02);
    --color-category-purple: rgba(124, 58, 237, 0.1);
    --color-category-purple-text: #7c3aed;
    --color-scrollbar-thumb: rgba(0, 0, 0, 0.06);
    --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.14);
    --pwdgen-strength-track: rgba(0, 0, 0, 0.06);
    --color-diff-bg: rgba(217, 119, 6, 0.08);
}

/* ==========================================================================
   THEME: Lavender — soft pastel purple light theme
   ========================================================================== */
[data-theme="lavender"] {
    --color-bg: #f5f3ff;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-border: #ddd6fe;
    --color-text-primary: #1e1b4b;
    --color-text-secondary: #6d63a5;
    --color-text-placeholder: #a8a0d2;
    --color-input-bg: #ffffff;

    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    --color-primary-text: #ffffff;
    --color-primary-subtle: rgba(124, 58, 237, 0.1);
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #e11d48;

    --shadow-sm: 0 1px 4px rgba(124, 58, 237, 0.06);
    --shadow-md: 0 4px 16px rgba(124, 58, 237, 0.08);
    --shadow-lg: 0 8px 40px rgba(124, 58, 237, 0.12);
    --shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.18);

    --color-hover-overlay: rgba(124, 58, 237, 0.04);
    --color-hover-overlay-strong: rgba(124, 58, 237, 0.07);
    --color-modal-backdrop: rgba(30, 27, 75, 0.4);
    --color-danger-subtle: rgba(225, 29, 72, 0.08);
    --color-danger-border: rgba(225, 29, 72, 0.25);
    --color-danger-bg: rgba(225, 29, 72, 0.06);
    --color-danger-focus: rgba(225, 29, 72, 0.12);
    --color-success-subtle: rgba(22, 163, 74, 0.1);
    --color-success-text: #16a34a;
    --color-success-border: rgba(22, 163, 74, 0.2);
    --color-warning-subtle: rgba(217, 119, 6, 0.1);
    --color-warning-text: #d97706;
    --color-primary-overlay: rgba(124, 58, 237, 0.04);
    --color-primary-subtle-10: rgba(124, 58, 237, 0.12);
    --color-primary-subtle-02: rgba(124, 58, 237, 0.02);
    --color-category-purple: rgba(124, 58, 237, 0.1);
    --color-category-purple-text: #7c3aed;
    --color-scrollbar-thumb: rgba(124, 58, 237, 0.08);
    --color-scrollbar-thumb-hover: rgba(124, 58, 237, 0.16);
    --pwdgen-strength-track: rgba(124, 58, 237, 0.08);
    --color-diff-bg: rgba(217, 119, 6, 0.08);
}

/* ==========================================================================
   THEME: Dracula — iconic purple-dark with pink/green pops
   ========================================================================== */
[data-theme="dracula"] {
    --color-bg: #282a36;
    --color-surface: #343746;
    --color-surface-raised: #44475a;
    --color-border: #44475a;
    --color-text-primary: #f8f8f2;
    --color-text-secondary: #bd93f9;
    --color-text-placeholder: #6272a4;
    --color-input-bg: #343746;

    --color-primary: #bd93f9;
    --color-primary-hover: #caa8fb;
    --color-primary-text: #282a36;
    --color-primary-subtle: rgba(189, 147, 249, 0.14);
    --color-success: #50fa7b;
    --color-warning: #f1fa8c;
    --color-danger: #ff5555;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(189, 147, 249, 0.3);

    --color-hover-overlay: rgba(255, 255, 255, 0.05);
    --color-hover-overlay-strong: rgba(255, 255, 255, 0.08);
    --color-modal-backdrop: rgba(0, 0, 0, 0.6);
    --color-danger-subtle: rgba(255, 85, 85, 0.14);
    --color-danger-border: rgba(255, 85, 85, 0.35);
    --color-danger-bg: rgba(255, 85, 85, 0.1);
    --color-danger-focus: rgba(255, 85, 85, 0.2);
    --color-success-subtle: rgba(80, 250, 123, 0.12);
    --color-success-text: #50fa7b;
    --color-success-border: rgba(80, 250, 123, 0.25);
    --color-warning-subtle: rgba(241, 250, 140, 0.12);
    --color-warning-text: #f1fa8c;
    --color-primary-overlay: rgba(189, 147, 249, 0.06);
    --color-primary-subtle-10: rgba(189, 147, 249, 0.16);
    --color-primary-subtle-02: rgba(189, 147, 249, 0.04);
    --color-category-purple: rgba(255, 121, 198, 0.15);
    --color-category-purple-text: #ff79c6;
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.16);
    --pwdgen-strength-track: rgba(255, 255, 255, 0.1);
    --color-diff-bg: rgba(241, 250, 140, 0.1);
}

/* ==========================================================================
   THEME: Sunset — warm gradients, coral-to-rose dark
   ========================================================================== */
[data-theme="sunset"] {
    --color-bg: #1c1017;
    --color-surface: #2a1a22;
    --color-surface-raised: #3d2530;
    --color-border: #3d2530;
    --color-text-primary: #fde8e8;
    --color-text-secondary: #d4a0a0;
    --color-text-placeholder: #8a5a5a;
    --color-input-bg: #2a1a22;

    --color-primary: #fb7185;
    --color-primary-hover: #f43f5e;
    --color-primary-text: #1c1017;
    --color-primary-subtle: rgba(251, 113, 133, 0.14);
    --color-success: #86efac;
    --color-warning: #fcd34d;
    --color-danger: #ef4444;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(251, 113, 133, 0.28);

    --color-hover-overlay: rgba(255, 255, 255, 0.04);
    --color-hover-overlay-strong: rgba(255, 255, 255, 0.07);
    --color-modal-backdrop: rgba(0, 0, 0, 0.6);
    --color-danger-subtle: rgba(239, 68, 68, 0.14);
    --color-danger-border: rgba(239, 68, 68, 0.35);
    --color-danger-bg: rgba(239, 68, 68, 0.1);
    --color-danger-focus: rgba(239, 68, 68, 0.2);
    --color-success-subtle: rgba(134, 239, 172, 0.12);
    --color-success-text: #86efac;
    --color-success-border: rgba(134, 239, 172, 0.25);
    --color-warning-subtle: rgba(252, 211, 77, 0.12);
    --color-warning-text: #fcd34d;
    --color-primary-overlay: rgba(251, 113, 133, 0.06);
    --color-primary-subtle-10: rgba(251, 113, 133, 0.16);
    --color-primary-subtle-02: rgba(251, 113, 133, 0.04);
    --color-category-purple: rgba(249, 168, 37, 0.15);
    --color-category-purple-text: #f9a825;
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.16);
    --pwdgen-strength-track: rgba(255, 255, 255, 0.1);
    --color-diff-bg: rgba(252, 211, 77, 0.1);
}

/* ==========================================================================
   THEME: Ivory — warm cream/paper light theme
   ========================================================================== */
[data-theme="ivory"] {
    --color-bg: #faf8f5;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-border: #e8e0d4;
    --color-text-primary: #292524;
    --color-text-secondary: #78716c;
    --color-text-placeholder: #a8a29e;
    --color-input-bg: #ffffff;

    --color-primary: #b45309;
    --color-primary-hover: #92400e;
    --color-primary-text: #ffffff;
    --color-primary-subtle: rgba(180, 83, 9, 0.08);
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-danger: #dc2626;

    --shadow-sm: 0 1px 3px rgba(41, 37, 36, 0.06);
    --shadow-md: 0 4px 12px rgba(41, 37, 36, 0.08);
    --shadow-lg: 0 8px 32px rgba(41, 37, 36, 0.12);
    --shadow-focus: 0 0 0 3px rgba(180, 83, 9, 0.16);

    --color-hover-overlay: rgba(41, 37, 36, 0.03);
    --color-hover-overlay-strong: rgba(41, 37, 36, 0.06);
    --color-modal-backdrop: rgba(41, 37, 36, 0.4);
    --color-danger-subtle: rgba(220, 38, 38, 0.08);
    --color-danger-border: rgba(220, 38, 38, 0.25);
    --color-danger-bg: rgba(220, 38, 38, 0.06);
    --color-danger-focus: rgba(220, 38, 38, 0.12);
    --color-success-subtle: rgba(22, 163, 74, 0.1);
    --color-success-text: #16a34a;
    --color-success-border: rgba(22, 163, 74, 0.2);
    --color-warning-subtle: rgba(202, 138, 4, 0.1);
    --color-warning-text: #ca8a04;
    --color-primary-overlay: rgba(180, 83, 9, 0.04);
    --color-primary-subtle-10: rgba(180, 83, 9, 0.1);
    --color-primary-subtle-02: rgba(180, 83, 9, 0.02);
    --color-category-purple: rgba(124, 58, 237, 0.08);
    --color-category-purple-text: #7c3aed;
    --color-scrollbar-thumb: rgba(41, 37, 36, 0.06);
    --color-scrollbar-thumb-hover: rgba(41, 37, 36, 0.14);
    --pwdgen-strength-track: rgba(41, 37, 36, 0.06);
    --color-diff-bg: rgba(202, 138, 4, 0.08);
}

/* ==========================================================================
   THEME: Neon — cyberpunk black with electric accents
   ========================================================================== */
[data-theme="neon"] {
    --color-bg: #0a0a0a;
    --color-surface: #141414;
    --color-surface-raised: #1f1f1f;
    --color-border: #2a2a2a;
    --color-text-primary: #e0ffe0;
    --color-text-secondary: #7df9a0;
    --color-text-placeholder: #3d6b4a;
    --color-input-bg: #141414;

    --color-primary: #00ff88;
    --color-primary-hover: #00cc6e;
    --color-primary-text: #0a0a0a;
    --color-primary-subtle: rgba(0, 255, 136, 0.1);
    --color-success: #00ff88;
    --color-warning: #ffe600;
    --color-danger: #ff2d55;

    --shadow-sm: 0 1px 4px rgba(0, 255, 136, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 255, 136, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 255, 136, 0.12);
    --shadow-focus: 0 0 0 3px rgba(0, 255, 136, 0.25);

    --color-hover-overlay: rgba(0, 255, 136, 0.04);
    --color-hover-overlay-strong: rgba(0, 255, 136, 0.07);
    --color-modal-backdrop: rgba(0, 0, 0, 0.75);
    --color-danger-subtle: rgba(255, 45, 85, 0.14);
    --color-danger-border: rgba(255, 45, 85, 0.35);
    --color-danger-bg: rgba(255, 45, 85, 0.1);
    --color-danger-focus: rgba(255, 45, 85, 0.2);
    --color-success-subtle: rgba(0, 255, 136, 0.12);
    --color-success-text: #00ff88;
    --color-success-border: rgba(0, 255, 136, 0.25);
    --color-warning-subtle: rgba(255, 230, 0, 0.1);
    --color-warning-text: #ffe600;
    --color-primary-overlay: rgba(0, 255, 136, 0.04);
    --color-primary-subtle-10: rgba(0, 255, 136, 0.12);
    --color-primary-subtle-02: rgba(0, 255, 136, 0.03);
    --color-category-purple: rgba(191, 0, 255, 0.15);
    --color-category-purple-text: #bf00ff;
    --color-scrollbar-thumb: rgba(0, 255, 136, 0.1);
    --color-scrollbar-thumb-hover: rgba(0, 255, 136, 0.2);
    --pwdgen-strength-track: rgba(0, 255, 136, 0.08);
    --color-diff-bg: rgba(255, 230, 0, 0.08);
}

/* ==========================================================================
   THEME: Solarized — Ethan Schoonover's classic warm dark
   ========================================================================== */
[data-theme="solarized"] {
    --color-bg: #002b36;
    --color-surface: #073642;
    --color-surface-raised: #0a4555;
    --color-border: #0a4555;
    --color-text-primary: #fdf6e3;
    --color-text-secondary: #93a1a1;
    --color-text-placeholder: #586e75;
    --color-input-bg: #073642;

    --color-primary: #268bd2;
    --color-primary-hover: #1a6fb0;
    --color-primary-text: #ffffff;
    --color-primary-subtle: rgba(38, 139, 210, 0.14);
    --color-success: #859900;
    --color-warning: #b58900;
    --color-danger: #dc322f;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(38, 139, 210, 0.3);

    --color-hover-overlay: rgba(253, 246, 227, 0.04);
    --color-hover-overlay-strong: rgba(253, 246, 227, 0.07);
    --color-modal-backdrop: rgba(0, 0, 0, 0.6);
    --color-danger-subtle: rgba(220, 50, 47, 0.14);
    --color-danger-border: rgba(220, 50, 47, 0.3);
    --color-danger-bg: rgba(220, 50, 47, 0.1);
    --color-danger-focus: rgba(220, 50, 47, 0.2);
    --color-success-subtle: rgba(133, 153, 0, 0.14);
    --color-success-text: #859900;
    --color-success-border: rgba(133, 153, 0, 0.25);
    --color-warning-subtle: rgba(181, 137, 0, 0.14);
    --color-warning-text: #b58900;
    --color-primary-overlay: rgba(38, 139, 210, 0.06);
    --color-primary-subtle-10: rgba(38, 139, 210, 0.16);
    --color-primary-subtle-02: rgba(38, 139, 210, 0.04);
    --color-category-purple: rgba(211, 54, 130, 0.15);
    --color-category-purple-text: #d33682;
    --color-scrollbar-thumb: rgba(253, 246, 227, 0.08);
    --color-scrollbar-thumb-hover: rgba(253, 246, 227, 0.16);
    --pwdgen-strength-track: rgba(253, 246, 227, 0.08);
    --color-diff-bg: rgba(181, 137, 0, 0.1);
}

/* ==========================================================================
   THEME SWITCHER COMPONENT
   ========================================================================== */
.theme-switcher {
    position: relative;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
}

.theme-switcher-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.theme-switcher-toggle:hover {
    background: var(--color-hover-overlay);
    color: var(--color-text-primary);
}

.theme-switcher-toggle svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.theme-switcher-toggle:hover svg {
    opacity: 1;
}

.theme-switcher-label {
    flex: 1;
    text-align: left;
}

/* Dropdown panel */
.theme-dropdown {
    position: absolute;
    bottom: 100%;
    left: var(--space-3);
    right: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    display: none;
    z-index: 200;
}

.theme-dropdown.open {
    display: block;
    animation: themeDropIn 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes themeDropIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.theme-dropdown-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 var(--space-2) var(--space-2);
}

.theme-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 340px;
    overflow-y: auto;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: background 150ms ease, color 150ms ease;
    width: 100%;
    text-align: left;
}

.theme-option:hover {
    background: var(--color-hover-overlay);
    color: var(--color-text-primary);
}

.theme-option.active {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

/* Color swatch preview */
.theme-swatch {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.theme-swatch span {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.2);
}

.theme-option-name {
    flex: 1;
}

.theme-option .check-icon {
    width: 16px;
    height: 16px;
    opacity: 0;
    color: var(--color-primary);
    flex-shrink: 0;
}

.theme-option.active .check-icon {
    opacity: 1;
}

/* --- Tablet: sidebar collapsed — show only icon --- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .theme-switcher-label,
    .theme-switcher-toggle .chevron-icon {
        display: none;
    }

    .theme-switcher-toggle {
        justify-content: center;
        padding: var(--space-2);
    }

    .theme-switcher {
        padding: var(--space-2) var(--space-3);
    }

    .theme-dropdown {
        left: calc(100% + var(--space-2));
        right: auto;
        bottom: 0;
        width: 220px;
        margin-bottom: 0;
    }
}

/* --- Mobile: full-width inside sidebar --- */
@media (max-width: 767.98px) {
    .theme-dropdown {
        left: var(--space-2);
        right: var(--space-2);
    }
}