/* Design tokens — themes are data-theme on */
:root,
html[data-theme="light"] {
--bg: #ffffff;
--bg-elevated: #ffffff;
--ink: #1a1a1a;
--muted: #5c5c5c;
--accent: #c9a227;
--accent-ink: #1a1a1a;
--btn: #1d4ed8;
--btn-ink: #ffffff;
--btn-hover: #1e40af;
--line: rgba(26, 26, 26, 0.07);
--grain-opacity: 0;
--wash-a: transparent;
--wash-b: transparent;
--wash-c: transparent;
}
html[data-theme="dark"] {
--bg: #121212;
--bg-elevated: #1c1c1c;
--ink: #f2f2f2;
--muted: #a3a3a3;
--accent: #f0b429;
--accent-ink: #121212;
--btn: #3b82f6;
--btn-ink: #ffffff;
--btn-hover: #2563eb;
--line: rgba(255, 255, 255, 0.1);
--grain-opacity: 0.05;
--wash-a: rgba(28, 28, 28, 0.95);
--wash-b: rgba(18, 18, 18, 0.8);
--wash-c: rgba(24, 24, 24, 0.9);
}
html[data-theme="sand"] {
--bg: #ebe4d6;
--bg-elevated: #f6f1e7;
--ink: #2a241c;
--muted: #6b6256;
--accent: #c9892a;
--accent-ink: #fffaf0;
--btn: #1d4ed8;
--btn-ink: #ffffff;
--btn-hover: #1e40af;
--line: rgba(42, 36, 28, 0.1);
--grain-opacity: 0.04;
--wash-a: rgba(246, 241, 231, 0.95);
--wash-b: rgba(230, 220, 200, 0.5);
--wash-c: rgba(240, 232, 218, 0.85);
}
html {
color-scheme: light dark;
}