/* ── Theme system ────────────────────────────────── */ /* Themes are applied via data-theme attribute on */ /* Default (Midnight) uses the original color palette */ :root, [data-theme="midnight"] { --bg-primary: #0a0c14; --bg-secondary: #0d1117; --bg-card: #111827; --bg-input: #0f172a; --bg-composer: #1e293b; --bg-hover: rgba(255,255,255,0.03); --bg-active: rgba(99,102,241,0.15); --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-dim: #64748b; --text-faint: #475569; --text-ghost: #334155; --accent: #6366f1; --accent-light: #818cf8; --accent-lighter: #a5b4fc; --accent-dark: #4f46e5; --accent-bg: rgba(99,102,241,0.12); --accent-border: rgba(99,102,241,0.25); --accent-glow: rgba(99,102,241,0.35); --accent-gradient: linear-gradient(135deg, #6366f1, #818cf8); --border: rgba(255,255,255,0.07); --border-subtle: rgba(255,255,255,0.06); --border-card: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.1); --terminal-color: #39ff14; --terminal-glow: rgba(57,255,20,0.7); --error-bg: rgba(239,68,68,0.12); --error-border: rgba(239,68,68,0.35); --error-text: #fca5a5; --progress-gradient: linear-gradient(90deg, #6366f1, #818cf8, #a5b4fc); --progress-glow: rgba(99,102,241,0.6); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99,102,241,0.18) 0%, transparent 70%); } /* ── Dawn — warm light theme ────────────────────── */ [data-theme="dawn"] { --bg-primary: #faf8f5; --bg-secondary: #f3f0eb; --bg-card: #ffffff; --bg-input: #f5f3ef; --bg-composer: #ffffff; --bg-hover: rgba(0,0,0,0.03); --bg-active: rgba(180,83,9,0.1); --text-primary: #1c1917; --text-secondary: #44403c; --text-muted: #78716c; --text-dim: #a8a29e; --text-faint: #a8a29e; --text-ghost: #d6d3d1; --accent: #b45309; --accent-light: #d97706; --accent-lighter: #f59e0b; --accent-dark: #92400e; --accent-bg: rgba(180,83,9,0.1); --accent-border: rgba(180,83,9,0.25); --accent-glow: rgba(180,83,9,0.25); --accent-gradient: linear-gradient(135deg, #b45309, #d97706); --border: rgba(0,0,0,0.08); --border-subtle: rgba(0,0,0,0.06); --border-card: rgba(0,0,0,0.1); --border-input: rgba(0,0,0,0.15); --terminal-color: #b45309; --terminal-glow: rgba(180,83,9,0.4); --error-bg: rgba(239,68,68,0.08); --error-border: rgba(239,68,68,0.25); --error-text: #dc2626; --progress-gradient: linear-gradient(90deg, #b45309, #d97706, #f59e0b); --progress-glow: rgba(180,83,9,0.4); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(180,83,9,0.1) 0%, transparent 70%); } /* ── Forest — deep green dark theme ─────────────── */ [data-theme="forest"] { --bg-primary: #0c1410; --bg-secondary: #0f1a14; --bg-card: #132218; --bg-input: #0d1a12; --bg-composer: #1a2e22; --bg-hover: rgba(255,255,255,0.03); --bg-active: rgba(34,197,94,0.15); --text-primary: #ecfdf5; --text-secondary: #bbf7d0; --text-muted: #86efac; --text-dim: #4ade80; --text-faint: #22804a; --text-ghost: #166534; --accent: #22c55e; --accent-light: #4ade80; --accent-lighter: #86efac; --accent-dark: #16a34a; --accent-bg: rgba(34,197,94,0.12); --accent-border: rgba(34,197,94,0.25); --accent-glow: rgba(34,197,94,0.35); --accent-gradient: linear-gradient(135deg, #22c55e, #4ade80); --border: rgba(255,255,255,0.07); --border-subtle: rgba(255,255,255,0.05); --border-card: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.1); --terminal-color: #4ade80; --terminal-glow: rgba(74,222,128,0.7); --error-bg: rgba(239,68,68,0.12); --error-border: rgba(239,68,68,0.35); --error-text: #fca5a5; --progress-gradient: linear-gradient(90deg, #22c55e, #4ade80, #86efac); --progress-glow: rgba(34,197,94,0.6); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(34,197,94,0.15) 0%, transparent 70%); } /* ── Sunset — warm dark theme with orange/rose ──── */ [data-theme="sunset"] { --bg-primary: #1a0c0c; --bg-secondary: #1f1010; --bg-card: #291515; --bg-input: #1c0e0e; --bg-composer: #331c1c; --bg-hover: rgba(255,255,255,0.03); --bg-active: rgba(244,63,94,0.15); --text-primary: #fff1f2; --text-secondary: #fecdd3; --text-muted: #fda4af; --text-dim: #f472b6; --text-faint: #9d174d; --text-ghost: #4c0519; --accent: #f43f5e; --accent-light: #fb7185; --accent-lighter: #fda4af; --accent-dark: #e11d48; --accent-bg: rgba(244,63,94,0.12); --accent-border: rgba(244,63,94,0.25); --accent-glow: rgba(244,63,94,0.35); --accent-gradient: linear-gradient(135deg, #f43f5e, #fb7185); --border: rgba(255,255,255,0.07); --border-subtle: rgba(255,255,255,0.05); --border-card: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.1); --terminal-color: #fb7185; --terminal-glow: rgba(251,113,133,0.7); --error-bg: rgba(239,68,68,0.12); --error-border: rgba(239,68,68,0.35); --error-text: #fca5a5; --progress-gradient: linear-gradient(90deg, #f43f5e, #fb7185, #fda4af); --progress-glow: rgba(244,63,94,0.6); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(244,63,94,0.15) 0%, transparent 70%); } /* ── Ocean — deep blue/cyan ─────────────────────── */ [data-theme="ocean"] { --bg-primary: #0a1628; --bg-secondary: #0c1a2e; --bg-card: #112240; --bg-input: #0d1b33; --bg-composer: #1a3050; --bg-hover: rgba(255,255,255,0.03); --bg-active: rgba(6,182,212,0.15); --text-primary: #e0f2fe; --text-secondary: #bae6fd; --text-muted: #7dd3fc; --text-dim: #38bdf8; --text-faint: #0e6fa0; --text-ghost: #0c4a6e; --accent: #06b6d4; --accent-light: #22d3ee; --accent-lighter: #67e8f9; --accent-dark: #0891b2; --accent-bg: rgba(6,182,212,0.12); --accent-border: rgba(6,182,212,0.25); --accent-glow: rgba(6,182,212,0.35); --accent-gradient: linear-gradient(135deg, #06b6d4, #22d3ee); --border: rgba(255,255,255,0.07); --border-subtle: rgba(255,255,255,0.05); --border-card: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.1); --terminal-color: #22d3ee; --terminal-glow: rgba(34,211,238,0.7); --error-bg: rgba(239,68,68,0.12); --error-border: rgba(239,68,68,0.35); --error-text: #fca5a5; --progress-gradient: linear-gradient(90deg, #06b6d4, #22d3ee, #67e8f9); --progress-glow: rgba(6,182,212,0.6); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(6,182,212,0.18) 0%, transparent 70%); } /* ── Dracula — classic purple dark ──────────────── */ [data-theme="dracula"] { --bg-primary: #282a36; --bg-secondary: #21222c; --bg-card: #313545; --bg-input: #1e1f29; --bg-composer: #3b3f54; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(189,147,249,0.15); --text-primary: #f8f8f2; --text-secondary: #e2e0d8; --text-muted: #bfbdb6; --text-dim: #8b89a0; --text-faint: #6272a4; --text-ghost: #44475a; --accent: #bd93f9; --accent-light: #caa6fc; --accent-lighter: #d6b9fd; --accent-dark: #9b6dfa; --accent-bg: rgba(189,147,249,0.12); --accent-border: rgba(189,147,249,0.25); --accent-glow: rgba(189,147,249,0.35); --accent-gradient: linear-gradient(135deg, #bd93f9, #caa6fc); --border: rgba(255,255,255,0.08); --border-subtle: rgba(255,255,255,0.06); --border-card: rgba(255,255,255,0.09); --border-input: rgba(255,255,255,0.11); --terminal-color: #50fa7b; --terminal-glow: rgba(80,250,123,0.7); --error-bg: rgba(255,85,85,0.12); --error-border: rgba(255,85,85,0.35); --error-text: #ff6e6e; --progress-gradient: linear-gradient(90deg, #bd93f9, #ff79c6, #8be9fd); --progress-glow: rgba(189,147,249,0.6); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(189,147,249,0.18) 0%, transparent 70%); } /* ── Nord — arctic blue-gray ────────────────────── */ [data-theme="nord"] { --bg-primary: #2e3440; --bg-secondary: #292e39; --bg-card: #3b4252; --bg-input: #2e3440; --bg-composer: #434c5e; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(136,192,208,0.15); --text-primary: #eceff4; --text-secondary: #d8dee9; --text-muted: #b0b8c8; --text-dim: #7b88a1; --text-faint: #5e6a82; --text-ghost: #4c566a; --accent: #88c0d0; --accent-light: #8fbcbb; --accent-lighter: #a3d4d8; --accent-dark: #5e9baa; --accent-bg: rgba(136,192,208,0.12); --accent-border: rgba(136,192,208,0.25); --accent-glow: rgba(136,192,208,0.3); --accent-gradient: linear-gradient(135deg, #88c0d0, #8fbcbb); --border: rgba(255,255,255,0.07); --border-subtle: rgba(255,255,255,0.05); --border-card: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.1); --terminal-color: #a3be8c; --terminal-glow: rgba(163,190,140,0.7); --error-bg: rgba(191,97,106,0.15); --error-border: rgba(191,97,106,0.35); --error-text: #d08787; --progress-gradient: linear-gradient(90deg, #88c0d0, #81a1c1, #5e81ac); --progress-glow: rgba(136,192,208,0.5); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(136,192,208,0.15) 0%, transparent 70%); } /* ── Solarized Dark ─────────────────────────────── */ [data-theme="solarized-dark"] { --bg-primary: #002b36; --bg-secondary: #003340; --bg-card: #073642; --bg-input: #00303b; --bg-composer: #0a4050; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(38,139,210,0.15); --text-primary: #fdf6e3; --text-secondary: #eee8d5; --text-muted: #93a1a1; --text-dim: #839496; --text-faint: #657b83; --text-ghost: #586e75; --accent: #268bd2; --accent-light: #4ea3e0; --accent-lighter: #75b8e8; --accent-dark: #1a6fb0; --accent-bg: rgba(38,139,210,0.12); --accent-border: rgba(38,139,210,0.3); --accent-glow: rgba(38,139,210,0.35); --accent-gradient: linear-gradient(135deg, #268bd2, #4ea3e0); --border: rgba(255,255,255,0.07); --border-subtle: rgba(255,255,255,0.05); --border-card: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.1); --terminal-color: #859900; --terminal-glow: rgba(133,153,0,0.7); --error-bg: rgba(220,50,47,0.12); --error-border: rgba(220,50,47,0.35); --error-text: #e06060; --progress-gradient: linear-gradient(90deg, #268bd2, #2aa198, #859900); --progress-glow: rgba(38,139,210,0.5); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(38,139,210,0.18) 0%, transparent 70%); } /* ── Solarized Light ────────────────────────────── */ [data-theme="solarized-light"] { --bg-primary: #fdf6e3; --bg-secondary: #f5efdc; --bg-card: #eee8d5; --bg-input: #f8f2e5; --bg-composer: #eee8d5; --bg-hover: rgba(0,0,0,0.03); --bg-active: rgba(38,139,210,0.1); --text-primary: #073642; --text-secondary: #586e75; --text-muted: #657b83; --text-dim: #839496; --text-faint: #93a1a1; --text-ghost: #c4bda8; --accent: #268bd2; --accent-light: #4ea3e0; --accent-lighter: #75b8e8; --accent-dark: #1a6fb0; --accent-bg: rgba(38,139,210,0.1); --accent-border: rgba(38,139,210,0.25); --accent-glow: rgba(38,139,210,0.25); --accent-gradient: linear-gradient(135deg, #268bd2, #4ea3e0); --border: rgba(0,0,0,0.08); --border-subtle: rgba(0,0,0,0.06); --border-card: rgba(0,0,0,0.1); --border-input: rgba(0,0,0,0.14); --terminal-color: #859900; --terminal-glow: rgba(133,153,0,0.4); --error-bg: rgba(220,50,47,0.08); --error-border: rgba(220,50,47,0.25); --error-text: #dc322f; --progress-gradient: linear-gradient(90deg, #268bd2, #2aa198, #859900); --progress-glow: rgba(38,139,210,0.4); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(38,139,210,0.1) 0%, transparent 70%); } /* ── Monokai — vibrant dark classic ─────────────── */ [data-theme="monokai"] { --bg-primary: #272822; --bg-secondary: #22231c; --bg-card: #32332b; --bg-input: #1e1f19; --bg-composer: #3c3d35; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(166,226,46,0.12); --text-primary: #f8f8f2; --text-secondary: #e6e6da; --text-muted: #b8b8a8; --text-dim: #90908a; --text-faint: #75715e; --text-ghost: #49483e; --accent: #a6e22e; --accent-light: #b8eb55; --accent-lighter: #ccf27e; --accent-dark: #8cc41f; --accent-bg: rgba(166,226,46,0.1); --accent-border: rgba(166,226,46,0.25); --accent-glow: rgba(166,226,46,0.3); --accent-gradient: linear-gradient(135deg, #a6e22e, #b8eb55); --border: rgba(255,255,255,0.07); --border-subtle: rgba(255,255,255,0.05); --border-card: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.1); --terminal-color: #a6e22e; --terminal-glow: rgba(166,226,46,0.7); --error-bg: rgba(249,38,114,0.12); --error-border: rgba(249,38,114,0.35); --error-text: #f9568a; --progress-gradient: linear-gradient(90deg, #f92672, #a6e22e, #66d9ef); --progress-glow: rgba(166,226,46,0.5); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(166,226,46,0.12) 0%, transparent 70%); } /* ── Cyberpunk — electric neon ──────────────────── */ [data-theme="cyberpunk"] { --bg-primary: #0d0015; --bg-secondary: #10001a; --bg-card: #1a0030; --bg-input: #0f0020; --bg-composer: #24003e; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(0,255,255,0.12); --text-primary: #f0f0ff; --text-secondary: #d0d0e8; --text-muted: #a0a0c0; --text-dim: #7070a0; --text-faint: #505080; --text-ghost: #303060; --accent: #00ffff; --accent-light: #40ffff; --accent-lighter: #80ffff; --accent-dark: #00cccc; --accent-bg: rgba(0,255,255,0.08); --accent-border: rgba(0,255,255,0.25); --accent-glow: rgba(0,255,255,0.4); --accent-gradient: linear-gradient(135deg, #00ffff, #ff00ff); --border: rgba(128,0,255,0.15); --border-subtle: rgba(128,0,255,0.1); --border-card: rgba(128,0,255,0.2); --border-input: rgba(128,0,255,0.25); --terminal-color: #00ff88; --terminal-glow: rgba(0,255,136,0.8); --error-bg: rgba(255,0,80,0.15); --error-border: rgba(255,0,80,0.4); --error-text: #ff4090; --progress-gradient: linear-gradient(90deg, #00ffff, #ff00ff, #ff0080); --progress-glow: rgba(0,255,255,0.6); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(128,0,255,0.25) 0%, transparent 70%); } /* ── Rosé Pine — muted elegant dark ─────────────── */ [data-theme="rose-pine"] { --bg-primary: #191724; --bg-secondary: #1f1d2e; --bg-card: #26233a; --bg-input: #1a1830; --bg-composer: #2a2740; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(235,111,146,0.12); --text-primary: #e0def4; --text-secondary: #c4c1db; --text-muted: #908caa; --text-dim: #6e6a86; --text-faint: #555170; --text-ghost: #403d52; --accent: #eb6f92; --accent-light: #f0889f; --accent-lighter: #f5a3b5; --accent-dark: #d45676; --accent-bg: rgba(235,111,146,0.1); --accent-border: rgba(235,111,146,0.25); --accent-glow: rgba(235,111,146,0.3); --accent-gradient: linear-gradient(135deg, #eb6f92, #f0889f); --border: rgba(255,255,255,0.06); --border-subtle: rgba(255,255,255,0.04); --border-card: rgba(255,255,255,0.07); --border-input: rgba(255,255,255,0.09); --terminal-color: #9ccfd8; --terminal-glow: rgba(156,207,216,0.6); --error-bg: rgba(235,111,146,0.12); --error-border: rgba(235,111,146,0.35); --error-text: #f0889f; --progress-gradient: linear-gradient(90deg, #eb6f92, #c4a7e7, #9ccfd8); --progress-glow: rgba(235,111,146,0.5); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(235,111,146,0.15) 0%, transparent 70%); } /* ── Catppuccin — pastel dark ───────────────────── */ [data-theme="catppuccin"] { --bg-primary: #1e1e2e; --bg-secondary: #181825; --bg-card: #2a2a3e; --bg-input: #1a1a2c; --bg-composer: #313244; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(137,180,250,0.12); --text-primary: #cdd6f4; --text-secondary: #bac2de; --text-muted: #a6adc8; --text-dim: #7f849c; --text-faint: #6c7086; --text-ghost: #45475a; --accent: #89b4fa; --accent-light: #a4c4fb; --accent-lighter: #b4d0fc; --accent-dark: #5e95f7; --accent-bg: rgba(137,180,250,0.1); --accent-border: rgba(137,180,250,0.25); --accent-glow: rgba(137,180,250,0.3); --accent-gradient: linear-gradient(135deg, #89b4fa, #b4befe); --border: rgba(255,255,255,0.06); --border-subtle: rgba(255,255,255,0.04); --border-card: rgba(255,255,255,0.07); --border-input: rgba(255,255,255,0.09); --terminal-color: #a6e3a1; --terminal-glow: rgba(166,227,161,0.6); --error-bg: rgba(243,139,168,0.12); --error-border: rgba(243,139,168,0.35); --error-text: #f38ba8; --progress-gradient: linear-gradient(90deg, #89b4fa, #cba6f7, #f38ba8); --progress-glow: rgba(137,180,250,0.5); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(137,180,250,0.15) 0%, transparent 70%); } /* ── Slate — neutral gray dark ──────────────────── */ [data-theme="slate"] { --bg-primary: #18181b; --bg-secondary: #1c1c20; --bg-card: #27272a; --bg-input: #1e1e22; --bg-composer: #303034; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(161,161,170,0.12); --text-primary: #fafafa; --text-secondary: #d4d4d8; --text-muted: #a1a1aa; --text-dim: #71717a; --text-faint: #52525b; --text-ghost: #3f3f46; --accent: #a1a1aa; --accent-light: #b4b4bb; --accent-lighter: #d4d4d8; --accent-dark: #71717a; --accent-bg: rgba(161,161,170,0.1); --accent-border: rgba(161,161,170,0.2); --accent-glow: rgba(161,161,170,0.2); --accent-gradient: linear-gradient(135deg, #71717a, #a1a1aa); --border: rgba(255,255,255,0.08); --border-subtle: rgba(255,255,255,0.06); --border-card: rgba(255,255,255,0.09); --border-input: rgba(255,255,255,0.12); --terminal-color: #a1a1aa; --terminal-glow: rgba(161,161,170,0.5); --error-bg: rgba(239,68,68,0.12); --error-border: rgba(239,68,68,0.35); --error-text: #fca5a5; --progress-gradient: linear-gradient(90deg, #52525b, #71717a, #a1a1aa); --progress-glow: rgba(161,161,170,0.4); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(161,161,170,0.1) 0%, transparent 70%); } /* ── Ember — dark warm orange ───────────────────── */ [data-theme="ember"] { --bg-primary: #1a1008; --bg-secondary: #1e140a; --bg-card: #2a1c10; --bg-input: #1c120a; --bg-composer: #352414; --bg-hover: rgba(255,255,255,0.03); --bg-active: rgba(234,88,12,0.15); --text-primary: #fef3c7; --text-secondary: #fde68a; --text-muted: #fbbf24; --text-dim: #d97706; --text-faint: #92400e; --text-ghost: #5c2d0a; --accent: #ea580c; --accent-light: #f97316; --accent-lighter: #fb923c; --accent-dark: #c2410c; --accent-bg: rgba(234,88,12,0.12); --accent-border: rgba(234,88,12,0.25); --accent-glow: rgba(234,88,12,0.35); --accent-gradient: linear-gradient(135deg, #ea580c, #f97316); --border: rgba(255,255,255,0.06); --border-subtle: rgba(255,255,255,0.04); --border-card: rgba(255,255,255,0.07); --border-input: rgba(255,255,255,0.09); --terminal-color: #f97316; --terminal-glow: rgba(249,115,22,0.7); --error-bg: rgba(239,68,68,0.12); --error-border: rgba(239,68,68,0.35); --error-text: #fca5a5; --progress-gradient: linear-gradient(90deg, #ea580c, #f97316, #fb923c); --progress-glow: rgba(234,88,12,0.6); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(234,88,12,0.18) 0%, transparent 70%); } /* ── Sakura — soft pink light ───────────────────── */ [data-theme="sakura"] { --bg-primary: #fdf2f8; --bg-secondary: #fce7f3; --bg-card: #ffffff; --bg-input: #fdf2f8; --bg-composer: #ffffff; --bg-hover: rgba(0,0,0,0.02); --bg-active: rgba(219,39,119,0.08); --text-primary: #1e1028; --text-secondary: #4a2040; --text-muted: #8b5070; --text-dim: #b78095; --text-faint: #d4a0b5; --text-ghost: #e8c8d6; --accent: #db2777; --accent-light: #ec4899; --accent-lighter: #f472b6; --accent-dark: #be185d; --accent-bg: rgba(219,39,119,0.08); --accent-border: rgba(219,39,119,0.2); --accent-glow: rgba(219,39,119,0.2); --accent-gradient: linear-gradient(135deg, #db2777, #ec4899); --border: rgba(0,0,0,0.06); --border-subtle: rgba(0,0,0,0.04); --border-card: rgba(0,0,0,0.08); --border-input: rgba(0,0,0,0.12); --terminal-color: #db2777; --terminal-glow: rgba(219,39,119,0.4); --error-bg: rgba(239,68,68,0.08); --error-border: rgba(239,68,68,0.2); --error-text: #dc2626; --progress-gradient: linear-gradient(90deg, #db2777, #ec4899, #f472b6); --progress-glow: rgba(219,39,119,0.4); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(219,39,119,0.1) 0%, transparent 70%); } /* ── Mint — fresh green light ───────────────────── */ [data-theme="mint"] { --bg-primary: #f0fdf9; --bg-secondary: #e6faf4; --bg-card: #ffffff; --bg-input: #f0fdf9; --bg-composer: #ffffff; --bg-hover: rgba(0,0,0,0.02); --bg-active: rgba(13,148,136,0.1); --text-primary: #0c1e1a; --text-secondary: #1a3830; --text-muted: #4d7068; --text-dim: #80a099; --text-faint: #a0c0b8; --text-ghost: #c8ddd8; --accent: #0d9488; --accent-light: #14b8a6; --accent-lighter: #2dd4bf; --accent-dark: #0f766e; --accent-bg: rgba(13,148,136,0.08); --accent-border: rgba(13,148,136,0.2); --accent-glow: rgba(13,148,136,0.2); --accent-gradient: linear-gradient(135deg, #0d9488, #14b8a6); --border: rgba(0,0,0,0.06); --border-subtle: rgba(0,0,0,0.04); --border-card: rgba(0,0,0,0.08); --border-input: rgba(0,0,0,0.12); --terminal-color: #0d9488; --terminal-glow: rgba(13,148,136,0.4); --error-bg: rgba(239,68,68,0.08); --error-border: rgba(239,68,68,0.2); --error-text: #dc2626; --progress-gradient: linear-gradient(90deg, #0d9488, #14b8a6, #2dd4bf); --progress-glow: rgba(13,148,136,0.4); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(13,148,136,0.1) 0%, transparent 70%); } /* ── Arctic — cool light blue ───────────────────── */ [data-theme="arctic"] { --bg-primary: #f0f7ff; --bg-secondary: #e4f0fc; --bg-card: #ffffff; --bg-input: #f0f7ff; --bg-composer: #ffffff; --bg-hover: rgba(0,0,0,0.02); --bg-active: rgba(37,99,235,0.08); --text-primary: #0c1a2e; --text-secondary: #1e3a5f; --text-muted: #4a6d8c; --text-dim: #8aaec8; --text-faint: #a8c8e0; --text-ghost: #c8ddef; --accent: #2563eb; --accent-light: #3b82f6; --accent-lighter: #60a5fa; --accent-dark: #1d4ed8; --accent-bg: rgba(37,99,235,0.08); --accent-border: rgba(37,99,235,0.2); --accent-glow: rgba(37,99,235,0.2); --accent-gradient: linear-gradient(135deg, #2563eb, #3b82f6); --border: rgba(0,0,0,0.06); --border-subtle: rgba(0,0,0,0.04); --border-card: rgba(0,0,0,0.08); --border-input: rgba(0,0,0,0.12); --terminal-color: #2563eb; --terminal-glow: rgba(37,99,235,0.4); --error-bg: rgba(239,68,68,0.08); --error-border: rgba(239,68,68,0.2); --error-text: #dc2626; --progress-gradient: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa); --progress-glow: rgba(37,99,235,0.4); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(37,99,235,0.1) 0%, transparent 70%); } /* ── Sand — warm neutral light ──────────────────── */ [data-theme="sand"] { --bg-primary: #f9f7f3; --bg-secondary: #f0ece4; --bg-card: #ffffff; --bg-input: #f5f2ec; --bg-composer: #ffffff; --bg-hover: rgba(0,0,0,0.03); --bg-active: rgba(120,90,60,0.08); --text-primary: #2c2418; --text-secondary: #4a3f30; --text-muted: #7a6e5d; --text-dim: #a89880; --text-faint: #c4b8a5; --text-ghost: #ddd4c6; --accent: #8b6a3e; --accent-light: #a68050; --accent-lighter: #c49a60; --accent-dark: #6e5230; --accent-bg: rgba(139,106,62,0.08); --accent-border: rgba(139,106,62,0.2); --accent-glow: rgba(139,106,62,0.2); --accent-gradient: linear-gradient(135deg, #8b6a3e, #a68050); --border: rgba(0,0,0,0.07); --border-subtle: rgba(0,0,0,0.05); --border-card: rgba(0,0,0,0.09); --border-input: rgba(0,0,0,0.13); --terminal-color: #8b6a3e; --terminal-glow: rgba(139,106,62,0.4); --error-bg: rgba(239,68,68,0.08); --error-border: rgba(239,68,68,0.2); --error-text: #dc2626; --progress-gradient: linear-gradient(90deg, #8b6a3e, #a68050, #c49a60); --progress-glow: rgba(139,106,62,0.4); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139,106,62,0.08) 0%, transparent 70%); } /* ── Lavender — soft purple light ───────────────── */ [data-theme="lavender"] { --bg-primary: #f5f3ff; --bg-secondary: #ede9fe; --bg-card: #ffffff; --bg-input: #f5f3ff; --bg-composer: #ffffff; --bg-hover: rgba(0,0,0,0.02); --bg-active: rgba(124,58,237,0.08); --text-primary: #1e1030; --text-secondary: #3b2360; --text-muted: #6d4fa0; --text-dim: #a48bc8; --text-faint: #c4b0e0; --text-ghost: #ddd0f0; --accent: #7c3aed; --accent-light: #8b5cf6; --accent-lighter: #a78bfa; --accent-dark: #6d28d9; --accent-bg: rgba(124,58,237,0.08); --accent-border: rgba(124,58,237,0.2); --accent-glow: rgba(124,58,237,0.2); --accent-gradient: linear-gradient(135deg, #7c3aed, #8b5cf6); --border: rgba(0,0,0,0.06); --border-subtle: rgba(0,0,0,0.04); --border-card: rgba(0,0,0,0.08); --border-input: rgba(0,0,0,0.12); --terminal-color: #7c3aed; --terminal-glow: rgba(124,58,237,0.4); --error-bg: rgba(239,68,68,0.08); --error-border: rgba(239,68,68,0.2); --error-text: #dc2626; --progress-gradient: linear-gradient(90deg, #7c3aed, #8b5cf6, #a78bfa); --progress-glow: rgba(124,58,237,0.4); --auth-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124,58,237,0.1) 0%, transparent 70%); } /* ── Theme picker ───────────────────────────────── */ .theme-picker { display: flex; gap: 0.75rem; flex-wrap: wrap; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0; background: none; border: 2px solid transparent; border-radius: 14px; transition: border-color 140ms, transform 120ms; font-family: inherit; } .theme-swatch:hover { transform: translateY(-2px); } .theme-swatch--active { border-color: var(--accent); } .theme-swatch-preview { width: 72px; height: 52px; border-radius: 10px; overflow: hidden; display: flex; border: 1px solid rgba(128,128,128,0.2); } .theme-swatch-sidebar { width: 20px; height: 100%; } .theme-swatch-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 6px; gap: 3px; } .theme-swatch-line { height: 3px; border-radius: 2px; opacity: 0.6; } .theme-swatch-line:first-child { width: 70%; } .theme-swatch-line:nth-child(2) { width: 100%; } .theme-swatch-line:nth-child(3) { width: 50%; } .theme-swatch-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .theme-swatch--active .theme-swatch-label { color: var(--accent); }