:root {
	--body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--heading-font: Georgia, "Times New Roman", serif;
	--detail: #515551;
	--selection: #e6dfd4;
}
:root[data-mode="dark"] {
	color-scheme: dark;
	--paper: #20201e;
	--ink: #e8e5de;
	--muted: #aba99e;
	--accent: #d6b5a1;
	--line: #41413a;
	--detail: #c6c5bb;
	--selection: #514b43;
}
:root[data-theme="rosepine"] {
	--paper: #faf4ed;
	--ink: #575279;
	--muted: #706987;
	--accent: #286983;
	--line: #dfdad9;
	--detail: #625c7e;
	--selection: #f2e9e1;
}
:root[data-theme="rosepine"][data-mode="dark"] {
	--paper: #191724;
	--ink: #e0def4;
	--muted: #a7a2bf;
	--accent: #ebbcba;
	--line: #403d52;
	--detail: #c5c0da;
	--selection: #524f67;
}
:root[data-theme="slate"] {
	--paper: #f7f9fc;
	--ink: #263344;
	--muted: #606f82;
	--accent: #345b91;
	--line: #dbe2ec;
	--detail: #4c5c70;
	--selection: #dce7f5;
}
:root[data-theme="slate"][data-mode="dark"] {
	--paper: #17202b;
	--ink: #e0e8f2;
	--muted: #a0afc2;
	--accent: #a2c5ed;
	--line: #344355;
	--detail: #bcc9da;
	--selection: #344b66;
}
:root[data-theme="forest"] {
	--paper: #f5f7f1;
	--ink: #2c382f;
	--muted: #616f61;
	--accent: #3c6951;
	--line: #d8dfd2;
	--detail: #50604f;
	--selection: #dce6d5;
}
:root[data-theme="forest"][data-mode="dark"] {
	--paper: #1b241f;
	--ink: #e1e8dc;
	--muted: #a4b29f;
	--accent: #b5cda3;
	--line: #38483a;
	--detail: #bdcaba;
	--selection: #41553f;
}
:root[data-font="modern"] {
	--heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-font="bookish"] {
	--heading-font: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
	--body-font: Georgia, "Times New Roman", serif;
}
:root[data-font="humanist"] {
	--heading-font: "Trebuchet MS", sans-serif;
	--body-font: "Trebuchet MS", sans-serif;
}
body { font-family: var(--body-font); transition: background-color .2s, color .2s; }
h1, h2, .wordmark { font-family: var(--heading-font); }
article > p, .contact p { color: var(--detail); }
::selection { background: var(--selection); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.mode-toggle {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 5px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: color .25s, background-color .25s;
}
.mode-toggle:hover, .mode-toggle:focus-visible { color: var(--ink); background: var(--selection); }
.mode-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mode-toggle svg { width: 18px; height: 18px; }
.sun, [data-mode="dark"] .moon { display: none; }
[data-mode="dark"] .sun { display: block; }
@media (max-width: 640px) {
	.header-actions { gap: 10px; }
	nav { gap: 13px; }
}
@media (max-width: 360px) {
	.header-actions { gap: 5px; }
	nav { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
	body, .mode-toggle { transition: none; }
}
