/* Theme tokens — palette × mode on */
:root {
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Syne", var(--font-sans);
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 26px;
--blur-glass: 24px;
}
/* —— Aurora (default) · dark —— */
:root,
[data-palette="aurora"][data-mode="dark"] {
color-scheme: dark;
--bg: #03040c;
--bg-elevated: #0a0d18;
--surface: rgba(255, 255, 255, 0.045);
--surface-soft: rgba(255, 255, 255, 0.075);
--surface-hover: rgba(255, 255, 255, 0.11);
--glass: rgba(8, 12, 28, 0.82);
--text: #f4f6ff;
--text-secondary: #a8b4d4;
--muted: #6f7d9e;
--accent: #22d3ee;
--accent-2: #e879f9;
--accent-glow: rgba(34, 211, 238, 0.45);
--accent-subtle: rgba(34, 211, 238, 0.14);
--accent-border: rgba(34, 211, 238, 0.42);
--ok: #4ade80;
--warn: #fbbf24;
--border: rgba(148, 163, 210, 0.16);
--border-strong: rgba(186, 198, 235, 0.24);
--input-bg: rgba(0, 0, 0, 0.38);
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(120, 160, 255, 0.06) inset;
--shadow-glow: 0 0 56px rgba(34, 211, 238, 0.14), 0 0 80px rgba(232, 121, 249, 0.08);
--btn-fg: #03040c;
--btn-gradient: linear-gradient(125deg, #22d3ee 0%, #818cf8 48%, #e879f9 100%);
--btn-shadow: 0 6px 28px rgba(34, 211, 238, 0.35), 0 2px 12px rgba(232, 121, 249, 0.2);
--brand-title-gradient: linear-gradient(
100deg,
#ffffff 0%,
#a5f3fc 28%,
#c4b5fd 55%,
#f0abfc 78%,
#22d3ee 100%
);
--brand-title-glow: drop-shadow(0 2px 32px rgba(34, 211, 238, 0.28))
drop-shadow(0 0 48px rgba(232, 121, 249, 0.15));
--body-mesh:
radial-gradient(ellipse 100% 60% at 50% -20%, rgba(34, 211, 238, 0.2), transparent 58%),
radial-gradient(ellipse 75% 50% at 100% 15%, rgba(232, 121, 249, 0.14), transparent 52%),
radial-gradient(ellipse 70% 45% at 0% 75%, rgba(99, 102, 241, 0.12), transparent 48%),
radial-gradient(ellipse 55% 40% at 80% 90%, rgba(74, 222, 128, 0.06), transparent 45%),
linear-gradient(180deg, #050816 0%, var(--bg) 42%, #020308 100%);
--pill-fg: #cffafe;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(34, 211, 238, 0.55);
--modal-backdrop: rgba(2, 4, 12, 0.78);
--chip-badge-fg: #e9d5ff;
}
/* —— Aurora · light —— */
[data-palette="aurora"][data-mode="light"] {
color-scheme: light;
--bg: #eef2ff;
--bg-elevated: #ffffff;
--surface: rgba(79, 70, 229, 0.06);
--surface-soft: rgba(79, 70, 229, 0.1);
--surface-hover: rgba(79, 70, 229, 0.14);
--glass: rgba(255, 255, 255, 0.9);
--text: #0f172a;
--text-secondary: #475569;
--muted: #64748b;
--accent: #0891b2;
--accent-2: #c026d3;
--accent-glow: rgba(8, 145, 178, 0.22);
--accent-subtle: rgba(8, 145, 178, 0.1);
--accent-border: rgba(8, 145, 178, 0.35);
--ok: #059669;
--warn: #d97706;
--border: rgba(15, 23, 42, 0.1);
--border-strong: rgba(15, 23, 42, 0.16);
--input-bg: #ffffff;
--shadow-card: 0 4px 24px rgba(15, 23, 42, 0.08);
--shadow-glow: 0 0 40px rgba(8, 145, 178, 0.12);
--btn-fg: #ffffff;
--btn-gradient: linear-gradient(125deg, #06b6d4 0%, #6366f1 50%, #d946ef 100%);
--btn-shadow: 0 4px 18px rgba(6, 182, 212, 0.28);
--brand-title-gradient: linear-gradient(100deg, #0f172a 0%, #0891b2 40%, #7c3aed 70%, #c026d3 100%);
--brand-title-glow: none;
--body-mesh:
radial-gradient(ellipse 90% 55% at 50% -15%, rgba(6, 182, 212, 0.22), transparent 55%),
radial-gradient(ellipse 70% 45% at 100% 20%, rgba(217, 70, 239, 0.12), transparent 50%),
radial-gradient(ellipse 60% 40% at 0% 80%, rgba(99, 102, 241, 0.1), transparent 45%);
--pill-fg: #0e7490;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(8, 145, 178, 0.45);
--modal-backdrop: rgba(15, 23, 42, 0.42);
--chip-badge-fg: #6b21a8;
}
/* —— Warm coral · dark —— */
[data-palette="warm"][data-mode="dark"] {
color-scheme: dark;
--bg: #000000;
--bg-elevated: #0a0a0c;
--surface: rgba(255, 255, 255, 0.04);
--surface-soft: rgba(255, 255, 255, 0.07);
--surface-hover: rgba(255, 255, 255, 0.1);
--glass: rgba(14, 14, 16, 0.78);
--text: #f5f5f7;
--text-secondary: #a1a1aa;
--muted: #71717a;
--accent: #ff7a45;
--accent-2: #ff5500;
--accent-glow: rgba(255, 122, 69, 0.4);
--accent-subtle: rgba(255, 122, 69, 0.12);
--accent-border: rgba(255, 122, 69, 0.35);
--ok: #34d399;
--warn: #fbbf24;
--border: rgba(255, 255, 255, 0.09);
--border-strong: rgba(255, 255, 255, 0.14);
--input-bg: rgba(0, 0, 0, 0.35);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);
--shadow-glow: 0 0 48px rgba(255, 90, 40, 0.12);
--btn-fg: #0a0a0a;
--btn-gradient: linear-gradient(135deg, #ff9a6c 0%, #ff5500 100%);
--btn-shadow: 0 4px 20px rgba(255, 85, 0, 0.35);
--brand-title-gradient: linear-gradient(100deg, #ffffff 0%, #fff0e8 35%, #ffb088 70%, #ff7a45 100%);
--brand-title-glow: drop-shadow(0 2px 28px rgba(255, 100, 50, 0.2));
--body-mesh:
radial-gradient(ellipse 90% 55% at 50% -15%, rgba(255, 120, 60, 0.14), transparent 55%),
radial-gradient(ellipse 70% 45% at 100% 20%, rgba(120, 80, 255, 0.08), transparent 50%),
radial-gradient(ellipse 60% 40% at 0% 80%, rgba(255, 90, 40, 0.06), transparent 45%);
--pill-fg: #ffe8dc;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(255, 122, 69, 0.5);
--modal-backdrop: rgba(0, 0, 0, 0.72);
--chip-badge-fg: #ffd4c4;
}
/* —— Warm coral · light —— */
[data-palette="warm"][data-mode="light"] {
color-scheme: light;
--bg: #f4f4f5;
--bg-elevated: #ffffff;
--surface: rgba(0, 0, 0, 0.04);
--surface-soft: rgba(0, 0, 0, 0.06);
--surface-hover: rgba(0, 0, 0, 0.08);
--glass: rgba(255, 255, 255, 0.88);
--text: #18181b;
--text-secondary: #52525b;
--muted: #71717a;
--accent: #ea580c;
--accent-2: #c2410c;
--accent-glow: rgba(234, 88, 12, 0.25);
--accent-subtle: rgba(234, 88, 12, 0.1);
--accent-border: rgba(234, 88, 12, 0.35);
--ok: #059669;
--warn: #d97706;
--border: rgba(0, 0, 0, 0.1);
--border-strong: rgba(0, 0, 0, 0.14);
--input-bg: rgba(255, 255, 255, 0.95);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-glow: 0 0 40px rgba(234, 88, 12, 0.08);
--btn-fg: #ffffff;
--btn-gradient: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
--btn-shadow: 0 4px 16px rgba(234, 88, 12, 0.28);
--brand-title-gradient: linear-gradient(100deg, #18181b 0%, #9a3412 55%, #ea580c 100%);
--brand-title-glow: none;
--body-mesh:
radial-gradient(ellipse 90% 55% at 50% -15%, rgba(251, 146, 60, 0.2), transparent 55%),
radial-gradient(ellipse 70% 45% at 100% 20%, rgba(167, 139, 250, 0.1), transparent 50%),
radial-gradient(ellipse 60% 40% at 0% 80%, rgba(251, 146, 60, 0.08), transparent 45%);
--pill-fg: #7c2d12;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(234, 88, 12, 0.45);
--modal-backdrop: rgba(24, 24, 27, 0.45);
--chip-badge-fg: #9a3412;
}
/* —— Classic blue · dark —— */
[data-palette="blue"][data-mode="dark"] {
color-scheme: dark;
--bg: #0b1220;
--bg-elevated: #111b31;
--surface: rgba(255, 255, 255, 0.04);
--surface-soft: rgba(255, 255, 255, 0.07);
--surface-hover: rgba(255, 255, 255, 0.1);
--glass: rgba(17, 27, 49, 0.82);
--text: #f3f7ff;
--text-secondary: #9eb0d2;
--muted: #6b7d9e;
--accent: #56ccf2;
--accent-2: #2f80ed;
--accent-glow: rgba(86, 204, 242, 0.4);
--accent-subtle: rgba(86, 204, 242, 0.14);
--accent-border: rgba(86, 204, 242, 0.45);
--ok: #43d9a3;
--warn: #ebb03a;
--border: rgba(158, 176, 210, 0.22);
--border-strong: rgba(158, 176, 210, 0.32);
--input-bg: rgba(0, 0, 0, 0.28);
--shadow-card: 0 10px 32px rgba(0, 0, 0, 0.28);
--shadow-glow: 0 0 48px rgba(47, 128, 237, 0.15);
--btn-fg: #ffffff;
--btn-gradient: linear-gradient(120deg, #2f80ed, #56ccf2);
--btn-shadow: 0 4px 20px rgba(47, 128, 237, 0.35);
--brand-title-gradient: linear-gradient(
93deg,
#ffffff 0%,
rgba(245, 252, 255, 0.98) 18%,
rgba(130, 216, 248, 0.98) 78%,
#56ccf2 100%
);
--brand-title-glow: drop-shadow(0 1px 24px rgba(140, 220, 255, 0.16));
--body-mesh: radial-gradient(circle at top, #162544 0%, var(--bg) 45%);
--pill-fg: #d4ecff;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(86, 204, 242, 0.55);
--modal-backdrop: rgba(5, 10, 22, 0.72);
--chip-badge-fg: rgba(200, 236, 255, 0.98);
}
/* —— Classic blue · light —— */
[data-palette="blue"][data-mode="light"] {
color-scheme: light;
--bg: #eef4fc;
--bg-elevated: #ffffff;
--surface: rgba(47, 128, 237, 0.06);
--surface-soft: rgba(47, 128, 237, 0.1);
--surface-hover: rgba(47, 128, 237, 0.14);
--glass: rgba(255, 255, 255, 0.9);
--text: #0f172a;
--text-secondary: #475569;
--muted: #64748b;
--accent: #2563eb;
--accent-2: #1d4ed8;
--accent-glow: rgba(37, 99, 235, 0.25);
--accent-subtle: rgba(37, 99, 235, 0.1);
--accent-border: rgba(37, 99, 235, 0.35);
--ok: #059669;
--warn: #d97706;
--border: rgba(15, 23, 42, 0.1);
--border-strong: rgba(15, 23, 42, 0.16);
--input-bg: #ffffff;
--shadow-card: 0 4px 20px rgba(15, 23, 42, 0.08);
--shadow-glow: 0 0 40px rgba(37, 99, 235, 0.1);
--btn-fg: #ffffff;
--btn-gradient: linear-gradient(120deg, #1d4ed8, #3b82f6);
--btn-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
--brand-title-gradient: linear-gradient(93deg, #0f172a 0%, #1d4ed8 50%, #3b82f6 100%);
--brand-title-glow: none;
--body-mesh: radial-gradient(circle at top, #dbeafe 0%, var(--bg) 50%);
--pill-fg: #1e3a8a;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(37, 99, 235, 0.45);
--modal-backdrop: rgba(15, 23, 42, 0.4);
--chip-badge-fg: #1e40af;
}
/* —— Emerald · dark —— */
[data-palette="emerald"][data-mode="dark"] {
color-scheme: dark;
--bg: #050a08;
--bg-elevated: #0c1410;
--surface: rgba(255, 255, 255, 0.04);
--surface-soft: rgba(255, 255, 255, 0.07);
--surface-hover: rgba(255, 255, 255, 0.1);
--glass: rgba(10, 20, 16, 0.82);
--text: #ecfdf5;
--text-secondary: #94a89e;
--muted: #6b7f75;
--accent: #34d399;
--accent-2: #10b981;
--accent-glow: rgba(52, 211, 153, 0.35);
--accent-subtle: rgba(52, 211, 153, 0.12);
--accent-border: rgba(52, 211, 153, 0.4);
--ok: #4ade80;
--warn: #fbbf24;
--border: rgba(167, 243, 208, 0.12);
--border-strong: rgba(167, 243, 208, 0.2);
--input-bg: rgba(0, 0, 0, 0.32);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);
--shadow-glow: 0 0 48px rgba(16, 185, 129, 0.12);
--btn-fg: #042f1a;
--btn-gradient: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
--btn-shadow: 0 4px 20px rgba(16, 185, 129, 0.32);
--brand-title-gradient: linear-gradient(100deg, #ffffff 0%, #a7f3d0 45%, #34d399 100%);
--brand-title-glow: drop-shadow(0 2px 24px rgba(52, 211, 153, 0.18));
--body-mesh:
radial-gradient(ellipse 90% 55% at 50% -15%, rgba(52, 211, 153, 0.12), transparent 55%),
radial-gradient(ellipse 70% 45% at 100% 30%, rgba(16, 185, 129, 0.08), transparent 50%),
radial-gradient(ellipse 60% 40% at 0% 85%, rgba(52, 211, 153, 0.05), transparent 45%);
--pill-fg: #d1fae5;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(52, 211, 153, 0.5);
--modal-backdrop: rgba(0, 0, 0, 0.72);
--chip-badge-fg: #a7f3d0;
}
/* —— Emerald · light —— */
[data-palette="emerald"][data-mode="light"] {
color-scheme: light;
--bg: #f0fdf4;
--bg-elevated: #ffffff;
--surface: rgba(5, 150, 105, 0.06);
--surface-soft: rgba(5, 150, 105, 0.1);
--surface-hover: rgba(5, 150, 105, 0.14);
--glass: rgba(255, 255, 255, 0.9);
--text: #14532d;
--text-secondary: #3f6212;
--muted: #4d7c5f;
--accent: #059669;
--accent-2: #047857;
--accent-glow: rgba(5, 150, 105, 0.22);
--accent-subtle: rgba(5, 150, 105, 0.1);
--accent-border: rgba(5, 150, 105, 0.35);
--ok: #16a34a;
--warn: #ca8a04;
--border: rgba(20, 83, 45, 0.1);
--border-strong: rgba(20, 83, 45, 0.16);
--input-bg: #ffffff;
--shadow-card: 0 4px 20px rgba(20, 83, 45, 0.08);
--shadow-glow: 0 0 40px rgba(5, 150, 105, 0.08);
--btn-fg: #ffffff;
--btn-gradient: linear-gradient(135deg, #34d399 0%, #059669 100%);
--btn-shadow: 0 4px 16px rgba(5, 150, 105, 0.28);
--brand-title-gradient: linear-gradient(100deg, #14532d 0%, #047857 55%, #10b981 100%);
--brand-title-glow: none;
--body-mesh: radial-gradient(circle at top, #bbf7d0 0%, var(--bg) 48%);
--pill-fg: #065f46;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(5, 150, 105, 0.45);
--modal-backdrop: rgba(20, 83, 45, 0.35);
--chip-badge-fg: #047857;
}
/* —— Violet · dark —— */
[data-palette="violet"][data-mode="dark"] {
color-scheme: dark;
--bg: #0a0812;
--bg-elevated: #12101c;
--surface: rgba(255, 255, 255, 0.04);
--surface-soft: rgba(255, 255, 255, 0.07);
--surface-hover: rgba(255, 255, 255, 0.1);
--glass: rgba(18, 14, 28, 0.82);
--text: #f5f3ff;
--text-secondary: #a8a3b8;
--muted: #78728a;
--accent: #a78bfa;
--accent-2: #8b5cf6;
--accent-glow: rgba(167, 139, 250, 0.38);
--accent-subtle: rgba(167, 139, 250, 0.14);
--accent-border: rgba(167, 139, 250, 0.42);
--ok: #34d399;
--warn: #fbbf24;
--border: rgba(196, 181, 253, 0.12);
--border-strong: rgba(196, 181, 253, 0.2);
--input-bg: rgba(0, 0, 0, 0.32);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);
--shadow-glow: 0 0 48px rgba(139, 92, 246, 0.14);
--btn-fg: #1e1033;
--btn-gradient: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
--btn-shadow: 0 4px 20px rgba(139, 92, 246, 0.35);
--brand-title-gradient: linear-gradient(100deg, #ffffff 0%, #ddd6fe 45%, #a78bfa 100%);
--brand-title-glow: drop-shadow(0 2px 28px rgba(167, 139, 250, 0.22));
--body-mesh:
radial-gradient(ellipse 90% 55% at 50% -15%, rgba(167, 139, 250, 0.16), transparent 55%),
radial-gradient(ellipse 70% 45% at 100% 25%, rgba(139, 92, 246, 0.1), transparent 50%),
radial-gradient(ellipse 60% 40% at 0% 80%, rgba(124, 58, 237, 0.08), transparent 45%);
--pill-fg: #ede9fe;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(167, 139, 250, 0.5);
--modal-backdrop: rgba(0, 0, 0, 0.72);
--chip-badge-fg: #ddd6fe;
}
/* —— Violet · light —— */
[data-palette="violet"][data-mode="light"] {
color-scheme: light;
--bg: #f5f3ff;
--bg-elevated: #ffffff;
--surface: rgba(124, 58, 237, 0.06);
--surface-soft: rgba(124, 58, 237, 0.1);
--surface-hover: rgba(124, 58, 237, 0.14);
--glass: rgba(255, 255, 255, 0.9);
--text: #2e1065;
--text-secondary: #5b21b6;
--muted: #7c6a9a;
--accent: #7c3aed;
--accent-2: #6d28d9;
--accent-glow: rgba(124, 58, 237, 0.22);
--accent-subtle: rgba(124, 58, 237, 0.1);
--accent-border: rgba(124, 58, 237, 0.35);
--ok: #059669;
--warn: #d97706;
--border: rgba(46, 16, 101, 0.1);
--border-strong: rgba(46, 16, 101, 0.16);
--input-bg: #ffffff;
--shadow-card: 0 4px 20px rgba(46, 16, 101, 0.08);
--shadow-glow: 0 0 40px rgba(124, 58, 237, 0.1);
--btn-fg: #ffffff;
--btn-gradient: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
--btn-shadow: 0 4px 16px rgba(124, 58, 237, 0.28);
--brand-title-gradient: linear-gradient(100deg, #2e1065 0%, #6d28d9 55%, #8b5cf6 100%);
--brand-title-glow: none;
--body-mesh: radial-gradient(circle at top, #ede9fe 0%, var(--bg) 50%);
--pill-fg: #5b21b6;
--focus-ring: var(--accent-subtle);
--focus-border: rgba(124, 58, 237, 0.45);
--modal-backdrop: rgba(46, 16, 101, 0.4);
--chip-badge-fg: #6d28d9;
}