72 lines
1.8 KiB
CSS
72 lines
1.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Enable class-based dark mode for Tailwind v4 */
|
|
@variant dark (&:where(.dark, .dark *));
|
|
|
|
/* ── Semantic color tokens ───────────────────────────────────────────────── */
|
|
:root {
|
|
--c-text: #172B4D;
|
|
--c-muted: #5E6C84;
|
|
--c-subtle: #97A0AF;
|
|
--c-surface: #FFFFFF;
|
|
--c-surface-raised: #FAFBFC;
|
|
--c-surface-muted: #F4F5F7;
|
|
--c-border: #DFE1E6;
|
|
--c-brand: #0052CC;
|
|
--c-brand-hover: #0065FF;
|
|
--c-brand-focus: #4C9AFF;
|
|
--c-brand-tint: #DEEBFF;
|
|
--c-success: #00875A;
|
|
--c-danger: #DE350B;
|
|
--c-danger-dark: #BF2600;
|
|
--c-danger-tint: #FFEBE6;
|
|
--c-warning: #FF8B00;
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--c-text: #CBD5E1;
|
|
--c-muted: #94A3B8;
|
|
--c-subtle: #64748B;
|
|
--c-surface: #1E293B;
|
|
--c-surface-raised: #1A2535;
|
|
--c-surface-muted: #0F172A;
|
|
--c-border: #334155;
|
|
--c-brand: #3B82F6;
|
|
--c-brand-hover: #60A5FA;
|
|
--c-brand-focus: #93C5FD;
|
|
--c-brand-tint: #1E3A5F;
|
|
--c-success: #34D399;
|
|
--c-danger: #F87171;
|
|
--c-danger-dark: #EF4444;
|
|
--c-danger-tint: #451a1a;
|
|
--c-warning: #FBBF24;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: var(--c-text);
|
|
background: var(--c-surface-raised);
|
|
}
|
|
|
|
#root {
|
|
height: 100dvh;
|
|
}
|
|
|
|
/* Native form elements in dark mode */
|
|
.dark input,
|
|
.dark textarea,
|
|
.dark select {
|
|
background-color: var(--c-surface);
|
|
color: var(--c-text);
|
|
border-color: var(--c-border);
|
|
color-scheme: dark;
|
|
}
|
|
.dark input::placeholder,
|
|
.dark textarea::placeholder {
|
|
color: var(--c-subtle);
|
|
}
|