:root {
	--bg: #f6f7f9;
	--bg-side: #eef1f5;
	--bg-card: #ffffff;
	--bg-sunken: #eaeef3;
	--bg-selected: #e2e8f1;
	--text: #11151b;
	--text-muted: #3e4652;
	--accent: #1b427c;
	--on-accent: #ffffff;
	--danger: #7f1d1d;
	--on-danger: #ffffff;
	--pill-bg: #e0e6ee;
	--pill-text: #29313d;
	--border: #dde2e9;
	--border-firm: #bfc7d2;
	--shadow: 0 1px 2px rgb(16 20 27 / .06), 0 8px 24px rgb(16 20 27 / .08);
	--scrim: rgb(0 0 0 / .45);
	--dot-red: #c44a3a;
	--dot-orange: #cc6a1e;
	--dot-amber: #c08a1e;
	--dot-lime: #7d9a1e;
	--dot-green: #2f8a62;
	--dot-teal: #1f8c8a;
	--dot-cyan: #2a8fbf;
	--dot-blue: #3a72c4;
	--dot-indigo: #5a5fcf;
	--dot-purple: #8452c2;
	--dot-pink: #c24a8c;
	--dot-grey: #7a8491;
	--side-width: 15.5rem;
	--list-width: 25rem;
	--read-width: 48rem;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-pill: 999px;
	--font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--text-sm: 0.8125rem;
}

html.dark {
	--bg: #0f1216;
	--bg-side: #13171c;
	--bg-card: #171b21;
	--bg-sunken: #0b0d10;
	--bg-selected: #222a36;
	--text: #eef1f5;
	--text-muted: #b2bbc8;
	--accent: #96bff0;
	--on-accent: #0a1626;
	--danger: #f4abab;
	--on-danger: #2a0b0b;
	--pill-bg: #262d38;
	--pill-text: #c8d0db;
	--border: #262c35;
	--border-firm: #3a424e;
	--shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .4);
	--scrim: rgb(0 0 0 / .65);
	--dot-red: #e8806f;
	--dot-orange: #f0995a;
	--dot-amber: #e0b04a;
	--dot-lime: #b2cf55;
	--dot-green: #5fbf92;
	--dot-teal: #4fc4c0;
	--dot-cyan: #62bfe8;
	--dot-blue: #6f9fe0;
	--dot-indigo: #9097ec;
	--dot-purple: #b08ae6;
	--dot-pink: #e682b8;
	--dot-grey: #9aa4b1;
	--side-width: 15.5rem;
	--list-width: 25rem;
	--read-width: 48rem;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-pill: 999px;
	--font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--text-sm: 0.8125rem;
}