64 lines
1.4 KiB
CSS
64 lines
1.4 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
/* Class-based dark mode: <html class="dark"> is toggled by ThemeToggle.tsx */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme inline {
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
|
|
--color-bg: var(--bg);
|
|
--color-surface: var(--surface);
|
|
--color-surface-alt: var(--surface-alt);
|
|
--color-border: var(--border);
|
|
--color-text: var(--text);
|
|
--color-text-muted: var(--text-muted);
|
|
--color-primary: var(--primary);
|
|
--color-primary-hover: var(--primary-hover);
|
|
--color-accent: var(--accent);
|
|
--color-accent-deep: var(--accent-deep);
|
|
}
|
|
|
|
:root {
|
|
--bg: #fbf9f6;
|
|
--surface: #ffffff;
|
|
--surface-alt: #f3ede3;
|
|
--border: #e7dfd0;
|
|
--text: #201a14;
|
|
--text-muted: #6b5f52;
|
|
--primary: #e8590c;
|
|
--primary-hover: #c2410c;
|
|
--accent: #c77d00;
|
|
--accent-deep: #7a1204;
|
|
}
|
|
|
|
.dark {
|
|
--bg: #15110d;
|
|
--surface: #1d1712;
|
|
--surface-alt: #241c15;
|
|
--border: #392c20;
|
|
--text: #f3ece2;
|
|
--text-muted: #b6a996;
|
|
--primary: #ff7a3d;
|
|
--primary-hover: #ff9a63;
|
|
--accent: #ffc24c;
|
|
--accent-deep: #ff8a63;
|
|
}
|
|
|
|
html {
|
|
color-scheme: light;
|
|
}
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--color-primary);
|
|
color: #fff;
|
|
}
|