/* base.css — shared theme tokens, reset, and chrome for beule.
   Page-specific layout lives inline in each page's <style>. */

:root {
	color-scheme: light dark;
	--bg: #faf8f4;
	--fg: #1a1a1a;
	--muted: #8a857c;
	--rule: #e6e2dc;
	--accent: #8b6b4a;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #15140f;
		--fg: #ece8df;
		--muted: #837f74;
		--rule: #2a2823;
		--accent: #c9a875;
	}
}
:root[data-theme="light"] {
	--bg: #faf8f4; --fg: #1a1a1a; --muted: #8a857c;
	--rule: #e6e2dc; --accent: #8b6b4a;
}
:root[data-theme="dark"] {
	--bg: #15140f; --fg: #ece8df; --muted: #837f74;
	--rule: #2a2823; --accent: #c9a875;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--bg);
	color: var(--fg);
	font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
	min-height: 100vh;
	transition: background 0.25s ease, color 0.25s ease;
}

/* Visible keyboard focus everywhere */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Shared "← home" back link (subpages) */
.back {
	display: inline-flex; align-items: center; gap: 0.35rem;
	color: var(--muted); font-size: 0.85rem; text-decoration: none;
	margin-bottom: 2.5rem;
	transition: color 0.15s;
}
.back:hover { color: var(--fg); }

/* Theme toggle button */
#theme-toggle {
	position: fixed; top: 1rem; right: 1rem;
	width: 2.25rem; height: 2.25rem;
	display: grid; place-items: center;
	background: var(--bg); color: var(--fg);
	border: 1.5px solid var(--muted); border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,0.10);
	transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#theme-toggle:hover { border-color: var(--fg); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
#theme-toggle svg { width: 1rem; height: 1rem; display: block; }

#theme-toggle .sun { display: none; }
#theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #theme-toggle .sun { display: block; }
	:root:not([data-theme="light"]) #theme-toggle .moon { display: none; }
}
:root[data-theme="dark"] #theme-toggle .sun { display: block; }
:root[data-theme="dark"] #theme-toggle .moon { display: none; }
:root[data-theme="light"] #theme-toggle .sun { display: none; }
:root[data-theme="light"] #theme-toggle .moon { display: block; }

/* Page design-version switcher — each number is a round button matching the
   theme toggle, sitting in a row just to its left. */
#version-switch {
	position: fixed; top: 1rem; right: 3.75rem;
	display: flex; align-items: center; gap: 0.4rem;
}
#version-switch .ver {
	width: 2.25rem; height: 2.25rem;
	display: grid; place-items: center;
	background: var(--bg); color: var(--fg);
	border: 1.5px solid var(--muted); border-radius: 999px;
	cursor: pointer;
	font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
	font-size: 0.9rem; line-height: 1;
	box-shadow: 0 1px 4px rgba(0,0,0,0.10);
	transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#version-switch .ver:hover { border-color: var(--fg); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
#version-switch .ver.active { border-color: var(--accent); color: var(--accent); }
#version-switch .ver.missing { opacity: 0.4; }
#version-switch .ver.missing:hover { opacity: 0.7; border-color: var(--muted); box-shadow: 0 1px 4px rgba(0,0,0,0.10); }

@media (max-width: 420px) {
	#version-switch { gap: 0.3rem; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}