:root {
	color-scheme: light;
	--bg: #fafafa;
	--surface: #ffffff;
	--subtle: #f0f0f0;
	--text: #202020;
	--muted: #606060;
	--border: #888888;
	--hairline: #d9d9d9;
	--tint: #e0ebff;
	--tint-ink: #2b5bd0;
	--accent: #242424;
	--accent-ink: #ffffff;
	--link: #303030;
	--danger: #a92428;
	--focus: #505050;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--display: "Avenir Next", "Trebuchet MS", sans-serif;
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;
	--s8: 4rem;
	--s9: 6rem;
	--radius: 0.4rem;
	--line: 1px;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.25rem;
	--text-xl: 2rem;
	--title: clamp(1.75rem, 4vw, 2.5rem);
	--hero-space: clamp(4rem, 12vh, 8rem);
	--page-width: 68rem;
	--reading-width: 45rem;
	--avatar-size: 5.5rem;
	--portrait-size: 6rem;
	--theme-control-size: 2.75rem;
	--theme-icon-size: 1.0625rem;
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #1c1c1c;
	--surface: #242424;
	--subtle: #292929;
	--text: #f4f4f4;
	--muted: #bcbcbc;
	--border: #808080;
	--hairline: #3d3d3d;
	--tint: #1f2f52;
	--tint-ink: #9db8ff;
	--accent: #e8e8e8;
	--accent-ink: #202020;
	--link: #e0e0e0;
	--danger: #ffaaaa;
	--focus: #d0d0d0;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		color-scheme: dark;
		--bg: #1c1c1c;
		--surface: #242424;
		--subtle: #292929;
		--text: #f4f4f4;
		--muted: #bcbcbc;
		--border: #808080;
		--hairline: #3d3d3d;
		--tint: #1f2f52;
		--tint-ink: #9db8ff;
		--accent: #e8e8e8;
		--accent-ink: #202020;
		--link: #e0e0e0;
		--danger: #ffaaaa;
		--focus: #d0d0d0;
	}
}