/* Theme tokens — set data-theme on */
:root,
[data-theme="dark"] {
--color-bg: #0f172a;
--color-bg-elevated: #1e293b;
--color-surface: #1e293b;
--color-surface-hover: #334155;
--color-border: #334155;
--color-border-subtle: #1e293b;
--color-text: #e2e8f0;
--color-text-strong: #f8fafc;
--color-muted: #94a3b8;
--color-muted-dim: #64748b;
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-primary-muted: rgba(59, 130, 246, 0.15);
--color-accent: #38bdf8;
--color-success: #16a34a;
--color-success-hover: #15803d;
--color-success-muted: rgba(34, 197, 94, 0.15);
--color-success-text: #4ade80;
--color-warning: #d97706;
--color-warning-hover: #b45309;
--color-warning-muted: rgba(251, 191, 36, 0.15);
--color-warning-text: #fbbf24;
--color-danger: #dc2626;
--color-danger-hover: #b91c1c;
--color-danger-muted: rgba(239, 68, 68, 0.15);
--color-danger-text: #f87171;
--color-purple: #8b5cf6;
--color-purple-text: #a78bfa;
--color-sidebar: #0c1222;
--color-sidebar-border: #1e293b;
--color-topbar: #1e293b;
--color-shadow: rgba(0, 0, 0, 0.35);
--color-overlay: rgba(0, 0, 0, 0.55);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--sidebar-width: 260px;
--sidebar-collapsed-width: 52px;
--topbar-height: 64px;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
[data-theme="light"] {
--color-bg: #f1f5f9;
--color-bg-elevated: #ffffff;
--color-surface: #ffffff;
--color-surface-hover: #f1f5f9;
--color-border: #e2e8f0;
--color-border-subtle: #f1f5f9;
--color-text: #334155;
--color-text-strong: #0f172a;
--color-muted: #64748b;
--color-muted-dim: #94a3b8;
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-primary-muted: rgba(37, 99, 235, 0.1);
--color-accent: #0284c7;
--color-success: #16a34a;
--color-success-hover: #15803d;
--color-success-muted: rgba(22, 163, 74, 0.12);
--color-success-text: #15803d;
--color-warning: #d97706;
--color-warning-hover: #b45309;
--color-warning-muted: rgba(217, 119, 6, 0.12);
--color-warning-text: #b45309;
--color-danger: #dc2626;
--color-danger-hover: #b91c1c;
--color-danger-muted: rgba(220, 38, 38, 0.1);
--color-danger-text: #b91c1c;
--color-purple: #7c3aed;
--color-purple-text: #6d28d9;
--color-sidebar: #ffffff;
--color-sidebar-border: #e2e8f0;
--color-topbar: #ffffff;
--color-shadow: rgba(15, 23, 42, 0.08);
--color-overlay: rgba(15, 23, 42, 0.4);
}
[data-theme="midnight"] {
--color-bg: #070b14;
--color-bg-elevated: #0f1629;
--color-surface: #121c32;
--color-surface-hover: #1a2744;
--color-border: #243352;
--color-border-subtle: #121c32;
--color-text: #cbd5e1;
--color-text-strong: #f1f5f9;
--color-muted: #7c8ba3;
--color-muted-dim: #5a6b85;
--color-primary: #6366f1;
--color-primary-hover: #4f46e5;
--color-primary-muted: rgba(99, 102, 241, 0.18);
--color-accent: #818cf8;
--color-success: #10b981;
--color-success-hover: #059669;
--color-success-muted: rgba(16, 185, 129, 0.15);
--color-success-text: #34d399;
--color-warning: #f59e0b;
--color-warning-hover: #d97706;
--color-warning-muted: rgba(245, 158, 11, 0.15);
--color-warning-text: #fbbf24;
--color-danger: #ef4444;
--color-danger-hover: #dc2626;
--color-danger-muted: rgba(239, 68, 68, 0.15);
--color-danger-text: #fca5a5;
--color-purple: #a78bfa;
--color-purple-text: #c4b5fd;
--color-sidebar: #050810;
--color-sidebar-border: #121c32;
--color-topbar: #0f1629;
--color-shadow: rgba(0, 0, 0, 0.5);
--color-overlay: rgba(0, 0, 0, 0.65);
}
[data-theme="ocean"] {
--color-bg: #0c1929;
--color-bg-elevated: #132f4c;
--color-surface: #173a5e;
--color-surface-hover: #1e4976;
--color-border: #265d97;
--color-border-subtle: #132f4c;
--color-text: #b2ccd6;
--color-text-strong: #e7f0f5;
--color-muted: #7da0b8;
--color-muted-dim: #5a7f96;
--color-primary: #0ea5e9;
--color-primary-hover: #0284c7;
--color-primary-muted: rgba(14, 165, 233, 0.18);
--color-accent: #22d3ee;
--color-success: #14b8a6;
--color-success-hover: #0d9488;
--color-success-muted: rgba(20, 184, 166, 0.15);
--color-success-text: #5eead4;
--color-warning: #f59e0b;
--color-warning-hover: #d97706;
--color-warning-muted: rgba(245, 158, 11, 0.15);
--color-warning-text: #fcd34d;
--color-danger: #f43f5e;
--color-danger-hover: #e11d48;
--color-danger-muted: rgba(244, 63, 94, 0.15);
--color-danger-text: #fda4af;
--color-purple: #38bdf8;
--color-purple-text: #7dd3fc;
--color-sidebar: #071018;
--color-sidebar-border: #132f4c;
--color-topbar: #132f4c;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.6);
}
[data-theme="forest"] {
--color-bg: #0f1a14;
--color-bg-elevated: #1a2e22;
--color-surface: #1f3628;
--color-surface-hover: #274533;
--color-border: #355940;
--color-border-subtle: #1a2e22;
--color-text: #c8d9ce;
--color-text-strong: #ecfdf3;
--color-muted: #8faa96;
--color-muted-dim: #6b8a75;
--color-primary: #22c55e;
--color-primary-hover: #16a34a;
--color-primary-muted: rgba(34, 197, 94, 0.18);
--color-accent: #4ade80;
--color-success: #22c55e;
--color-success-hover: #16a34a;
--color-success-muted: rgba(34, 197, 94, 0.15);
--color-success-text: #86efac;
--color-warning: #ca8a04;
--color-warning-hover: #a16207;
--color-warning-muted: rgba(202, 138, 4, 0.15);
--color-warning-text: #fde047;
--color-danger: #ef4444;
--color-danger-hover: #dc2626;
--color-danger-muted: rgba(239, 68, 68, 0.15);
--color-danger-text: #fca5a5;
--color-purple: #a3e635;
--color-purple-text: #bef264;
--color-sidebar: #0a120d;
--color-sidebar-border: #1a2e22;
--color-topbar: #1a2e22;
--color-shadow: rgba(0, 0, 0, 0.35);
--color-overlay: rgba(0, 0, 0, 0.55);
}
[data-theme="sunset"] {
--color-bg: #1a1210;
--color-bg-elevated: #2a1c18;
--color-surface: #352420;
--color-surface-hover: #45302a;
--color-border: #5c4038;
--color-border-subtle: #2a1c18;
--color-text: #e8d5cf;
--color-text-strong: #fff7ed;
--color-muted: #b89a8f;
--color-muted-dim: #8f7268;
--color-primary: #f97316;
--color-primary-hover: #ea580c;
--color-primary-muted: rgba(249, 115, 22, 0.2);
--color-accent: #fb923c;
--color-success: #84cc16;
--color-success-hover: #65a30d;
--color-success-muted: rgba(132, 204, 22, 0.15);
--color-success-text: #bef264;
--color-warning: #eab308;
--color-warning-hover: #ca8a04;
--color-warning-muted: rgba(234, 179, 8, 0.15);
--color-warning-text: #fde047;
--color-danger: #dc2626;
--color-danger-hover: #b91c1c;
--color-danger-muted: rgba(220, 38, 38, 0.15);
--color-danger-text: #fca5a5;
--color-purple: #e879f9;
--color-purple-text: #f0abfc;
--color-sidebar: #120c0a;
--color-sidebar-border: #2a1c18;
--color-topbar: #2a1c18;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.6);
}
[data-theme="monochrome"] {
--color-bg: #ffffff;
--color-bg-elevated: #f5f5f5;
--color-surface: #fafafa;
--color-surface-hover: #eeeeee;
--color-border: #bdbdbd;
--color-border-subtle: #e0e0e0;
--color-text: #212121;
--color-text-strong: #000000;
--color-muted: #616161;
--color-muted-dim: #757575;
--color-primary: #212121;
--color-primary-hover: #000000;
--color-primary-muted: rgba(0, 0, 0, 0.08);
--color-accent: #424242;
--color-success: #2e7d32;
--color-success-hover: #1b5e20;
--color-success-muted: rgba(46, 125, 50, 0.12);
--color-success-text: #1b5e20;
--color-warning: #f57c00;
--color-warning-hover: #e65100;
--color-warning-muted: rgba(245, 124, 0, 0.12);
--color-warning-text: #e65100;
--color-danger: #c62828;
--color-danger-hover: #b71c1c;
--color-danger-muted: rgba(198, 40, 40, 0.1);
--color-danger-text: #b71c1c;
--color-purple: #424242;
--color-purple-text: #212121;
--color-sidebar: #f5f5f5;
--color-sidebar-border: #bdbdbd;
--color-topbar: #ffffff;
--color-shadow: rgba(0, 0, 0, 0.12);
--color-overlay: rgba(0, 0, 0, 0.45);
}