/* ── Color Themes ──────────────────────────────────── */

/* 1. Dracula (default dark) */
:root {
    --bg-primary: #282a36;
    --bg-secondary: #21222c;
    --bg-tertiary: #3e3f4b;
    --bg-hover: #44475a;
    --border: #6272a4;
    --border-light: #6272a4;
    --text-primary: #f8f8f2;
    --text-secondary: #8be9fd;
    --text-muted: #6272a4;
    --accent: #50fa7b;
    --accent-alt: #ff79c6;
    --accent-mid: #f1fa8c;
    --accent-dim: rgba(80,250,123,0.12);
}

/* 2. Gruvbox Dark: Warm retro */
:root.theme-gruvbox {
    --bg-primary: #282828;
    --bg-secondary: #1d2021;
    --bg-tertiary: #3c3836;
    --bg-hover: #504945;
    --border: #665c54;
    --border-light: #7c6f64;
    --text-primary: #ebdbb2;
    --text-secondary: #83a598;
    --text-muted: #928374;
    --accent: #b8bb26;
    --accent-alt: #fb4934;
    --accent-mid: #fabd2f;
    --accent-dim: rgba(184,187,38,0.12);
}

/* 4. Monokai: Classic high contrast */
:root.theme-monokai {
    --bg-primary: #272822;
    --bg-secondary: #1e1f1c;
    --bg-tertiary: #3e3d32;
    --bg-hover: #49483e;
    --border: #75715e;
    --border-light: #75715e;
    --text-primary: #f8f8f2;
    --text-secondary: #a1efe4;
    --text-muted: #75715e;
    --accent: #a6e22e;
    --accent-alt: #f92672;
    --accent-mid: #e6db74;
    --accent-dim: rgba(166,226,46,0.12);
}

/* 5. One Dark: Clean modern dark */
:root.theme-onedark {
    --bg-primary: #282c34;
    --bg-secondary: #21252b;
    --bg-tertiary: #353b45;
    --bg-hover: #3e4451;
    --border: #4b5263;
    --border-light: #5c6370;
    --text-primary: #abb2bf;
    --text-secondary: #61afef;
    --text-muted: #5c6370;
    --accent: #98c379;
    --accent-alt: #e06c75;
    --accent-mid: #e5c07b;
    --accent-dim: rgba(152,195,121,0.12);
}

/* 6. Tokyo Night: Modern dark */
:root.theme-tokyo {
    --bg-primary: #1a1b26;
    --bg-secondary: #16161e;
    --bg-tertiary: #292e42;
    --bg-hover: #3b4261;
    --border: #3b4261;
    --border-light: #565f89;
    --text-primary: #c0caf5;
    --text-secondary: #7aa2f7;
    --text-muted: #565f89;
    --accent: #9ece6a;
    --accent-alt: #f7768e;
    --accent-mid: #e0af68;
    --accent-dim: rgba(158,206,106,0.12);
}

/* 8. Everforest: Calm green */
:root.theme-everforest {
    --bg-primary: #2d3534;
    --bg-secondary: #272e2d;
    --bg-tertiary: #374240;
    --bg-hover: #414b49;
    --border: #5a6e63;
    --border-light: #6b8076;
    --text-primary: #d3c6aa;
    --text-secondary: #7fbbb3;
    --text-muted: #5a6e63;
    --accent: #a7c080;
    --accent-alt: #e67e80;
    --accent-mid: #dbbc7f;
    --accent-dim: rgba(167,192,128,0.12);
}

/* 9. Solarized Dark: Time-tested */
:root.theme-solarized-dark {
    --bg-primary: #002b36;
    --bg-secondary: #073642;
    --bg-tertiary: #094050;
    --bg-hover: #0a4b5e;
    --border: #586e75;
    --border-light: #657b83;
    --text-primary: #eee8d5;
    --text-secondary: #2aa198;
    --text-muted: #586e75;
    --accent: #859900;
    --accent-alt: #dc322f;
    --accent-mid: #b58900;
    --accent-dim: rgba(133,153,0,0.12);
}

/* 10. Solarized Light */
:root.theme-solarized-light {
    --bg-primary: #fdf6e3;
    --bg-secondary: #eee8d5;
    --bg-tertiary: #e8e1cc;
    --bg-hover: #ddd6c1;
    --border: #cfc9b4;
    --border-light: #c0baa5;
    --text-primary: #073642;
    --text-secondary: #268bd2;
    --text-muted: #93a1a1;
    --accent: #859900;
    --accent-alt: #dc322f;
    --accent-mid: #b58900;
    --accent-dim: rgba(133,153,0,0.12);
}

/* 12. Light: High contrast */
:root.theme-light {
    --bg-primary: #fafaf8;
    --bg-secondary: #f0f0ee;
    --bg-tertiary: #e8e8e6;
    --bg-hover: #dcdcda;
    --border: #c8c8c6;
    --border-light: #c0c0be;
    --text-primary: #1c1c1c;
    --text-secondary: #0066cc;
    --text-muted: #888888;
    --accent: #008000;
    --accent-alt: #cc3300;
    --accent-mid: #996600;
    --accent-dim: rgba(0,128,0,0.12);
}

/* Apply theme colors */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

#topbar {
    background: var(--bg-secondary);
    border-bottom-color: var(--border);
}

.topbar-item,
.topbar-link {
    color: var(--text-secondary);
}

.topbar-item:hover,
.topbar-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.topbar-item.active {
    color: var(--accent);
}

.topbar-selector {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.topbar-selector:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.topbar-selector:focus {
    border-color: var(--accent);
}