/* Theme tokens — applied via html[data-theme="..."] */
:root,
[data-theme="moss"] {
color-scheme: dark;
--bg0: #0c1210;
--bg1: #14201c;
--bg2: #1c2e28;
--ink: #e8f2ee;
--muted: #8aa399;
--accent: #3ecf8e;
--accent-dim: #2a9b6a;
--accent-hover: #7ae0b0;
--btn-ink: #062016;
--warn: #e8a54b;
--danger: #e86a6a;
--line: rgba(232, 242, 238, 0.12);
--card: rgba(20, 32, 28, 0.85);
--header-bg: rgba(12, 18, 16, 0.75);
--legal: #c9ddd4;
--glow-a: rgba(62, 207, 142, 0.18);
--glow-b: rgba(42, 155, 106, 0.12);
--bg-end: #0a100e;
--radius: 12px;
--font: "DM Sans", system-ui, sans-serif;
--display: "Syne", "DM Sans", sans-serif;
}
/* 1 — Iron Man / Jarvis HUD */
[data-theme="jarvis"] {
color-scheme: dark;
--bg0: #05070c;
--bg1: #0a1018;
--bg2: #121a28;
--ink: #e8f4ff;
--muted: #7a93a8;
--accent: #4fd2ff;
--accent-dim: #c41e3a;
--accent-hover: #9ae8ff;
--btn-ink: #031018;
--warn: #f5c542;
--danger: #ff4d4d;
--line: rgba(79, 210, 255, 0.18);
--card: rgba(10, 16, 28, 0.9);
--header-bg: rgba(5, 7, 12, 0.85);
--legal: #b8cfe0;
--glow-a: rgba(79, 210, 255, 0.22);
--glow-b: rgba(196, 30, 58, 0.14);
--bg-end: #02040a;
--font: "DM Sans", system-ui, sans-serif;
--display: "Syne", "DM Sans", sans-serif;
}
/* 2 — Graphite steel */
[data-theme="graphite"] {
color-scheme: dark;
--bg0: #0e0f12;
--bg1: #16181d;
--bg2: #22262e;
--ink: #eef0f4;
--muted: #9aa3b2;
--accent: #a8b4c4;
--accent-dim: #6d7888;
--accent-hover: #d0d7e2;
--btn-ink: #12141a;
--warn: #d4a017;
--danger: #e07070;
--line: rgba(238, 240, 244, 0.1);
--card: rgba(22, 24, 29, 0.92);
--header-bg: rgba(14, 15, 18, 0.88);
--legal: #c5cad3;
--glow-a: rgba(168, 180, 196, 0.12);
--glow-b: rgba(100, 110, 130, 0.08);
--bg-end: #090a0c;
}
/* 3 — Ember forge */
[data-theme="ember"] {
color-scheme: dark;
--bg0: #120c0a;
--bg1: #1c1210;
--bg2: #2a1a14;
--ink: #fff1e6;
--muted: #b89888;
--accent: #ff7a3d;
--accent-dim: #c44a1a;
--accent-hover: #ffb088;
--btn-ink: #1a0a04;
--warn: #ffc14d;
--danger: #ff5c5c;
--line: rgba(255, 122, 61, 0.16);
--card: rgba(28, 18, 16, 0.9);
--header-bg: rgba(18, 12, 10, 0.88);
--legal: #e8d0c4;
--glow-a: rgba(255, 122, 61, 0.2);
--glow-b: rgba(196, 74, 26, 0.12);
--bg-end: #0a0604;
}
/* 4 — Deep ocean */
[data-theme="ocean"] {
color-scheme: dark;
--bg0: #061018;
--bg1: #0a1a28;
--bg2: #123048;
--ink: #e6f4ff;
--muted: #7aa0b8;
--accent: #3db8ff;
--accent-dim: #1a6fa0;
--accent-hover: #8ad4ff;
--btn-ink: #021018;
--warn: #f0c040;
--danger: #ff6b7a;
--line: rgba(61, 184, 255, 0.15);
--card: rgba(10, 26, 40, 0.9);
--header-bg: rgba(6, 16, 24, 0.88);
--legal: #b8d4e8;
--glow-a: rgba(61, 184, 255, 0.2);
--glow-b: rgba(26, 111, 160, 0.12);
--bg-end: #030a12;
}
/* 5 — Noir cinema */
[data-theme="noir"] {
color-scheme: dark;
--bg0: #080808;
--bg1: #111111;
--bg2: #1c1c1c;
--ink: #f5f5f5;
--muted: #8a8a8a;
--accent: #ffffff;
--accent-dim: #e11d48;
--accent-hover: #ffdddd;
--btn-ink: #111111;
--warn: #fbbf24;
--danger: #e11d48;
--line: rgba(255, 255, 255, 0.12);
--card: rgba(17, 17, 17, 0.95);
--header-bg: rgba(8, 8, 8, 0.9);
--legal: #d0d0d0;
--glow-a: rgba(225, 29, 72, 0.16);
--glow-b: rgba(255, 255, 255, 0.04);
--bg-end: #000000;
}
/* 6 — Frost (light) */
[data-theme="frost"] {
color-scheme: light;
--bg0: #f4f7fb;
--bg1: #e8eef6;
--bg2: #dce6f2;
--ink: #152033;
--muted: #5a6b82;
--accent: #2563eb;
--accent-dim: #1d4ed8;
--accent-hover: #1e40af;
--btn-ink: #ffffff;
--warn: #b45309;
--danger: #b91c1c;
--line: rgba(21, 32, 51, 0.12);
--card: rgba(255, 255, 255, 0.85);
--header-bg: rgba(244, 247, 251, 0.9);
--legal: #334155;
--glow-a: rgba(37, 99, 235, 0.12);
--glow-b: rgba(148, 163, 184, 0.15);
--bg-end: #dbe4f0;
}
/* 7 — Copper works */
[data-theme="copper"] {
color-scheme: dark;
--bg0: #140f0c;
--bg1: #1e1612;
--bg2: #2c2118;
--ink: #f3e6d8;
--muted: #a89078;
--accent: #d4a574;
--accent-dim: #8b5e34;
--accent-hover: #e8c9a8;
--btn-ink: #1a1008;
--warn: #e8b84a;
--danger: #d46565;
--line: rgba(212, 165, 116, 0.16);
--card: rgba(30, 22, 18, 0.92);
--header-bg: rgba(20, 15, 12, 0.9);
--legal: #dcc8b4;
--glow-a: rgba(212, 165, 116, 0.16);
--glow-b: rgba(139, 94, 52, 0.1);
--bg-end: #0c0907;
}
/* 8 — Terminal phosphor */
[data-theme="terminal"] {
color-scheme: dark;
--bg0: #010805;
--bg1: #04140c;
--bg2: #0a2216;
--ink: #b8ffce;
--muted: #4a9a68;
--accent: #33ff88;
--accent-dim: #1a994d;
--accent-hover: #88ffbb;
--btn-ink: #001408;
--warn: #c8ff33;
--danger: #ff4466;
--line: rgba(51, 255, 136, 0.18);
--card: rgba(4, 20, 12, 0.92);
--header-bg: rgba(1, 8, 5, 0.92);
--legal: #8fd9a8;
--glow-a: rgba(51, 255, 136, 0.15);
--glow-b: rgba(26, 153, 77, 0.1);
--bg-end: #000402;
--font: "IBM Plex Mono", "DM Sans", ui-monospace, monospace;
--display: "IBM Plex Mono", "Syne", monospace;
--radius: 4px;
}
/* 9 — Parchment studio (light warm) */
[data-theme="parchment"] {
color-scheme: light;
--bg0: #f7f1e6;
--bg1: #efe6d6;
--bg2: #e4d7c2;
--ink: #2a2118;
--muted: #7a6a58;
--accent: #8b4518;
--accent-dim: #5c2e0e;
--accent-hover: #a0522d;
--btn-ink: #fff8f0;
--warn: #9a6700;
--danger: #9b2c2c;
--line: rgba(42, 33, 24, 0.14);
--card: rgba(255, 250, 242, 0.9);
--header-bg: rgba(247, 241, 230, 0.92);
--legal: #4a3c2e;
--glow-a: rgba(139, 69, 24, 0.08);
--glow-b: rgba(228, 215, 194, 0.5);
--bg-end: #e8dcc8;
--display: "Libre Baskerville", "Syne", Georgia, serif;
}
/* 10 — Royal ink (deep indigo, not candy purple) */
[data-theme="ink"] {
color-scheme: dark;
--bg0: #0b0a14;
--bg1: #12101f;
--bg2: #1c1830;
--ink: #ece8ff;
--muted: #9088b0;
--accent: #c4b5fd;
--accent-dim: #7c3aed;
--accent-hover: #ddd6fe;
--btn-ink: #1a1030;
--warn: #fbbf24;
--danger: #f472b6;
--line: rgba(196, 181, 253, 0.14);
--card: rgba(18, 16, 31, 0.92);
--header-bg: rgba(11, 10, 20, 0.9);
--legal: #c8c0e0;
--glow-a: rgba(124, 58, 237, 0.18);
--glow-b: rgba(196, 181, 253, 0.08);
--bg-end: #07060e;
}