/*
 * site/css/site.css — colour tokens and base styles shared by the site pages
 * (index, privacy, terms, accessibility). Each page's own <style> adds its layout.
 *
 * Light is warm paper around the editor's light accent (app/css/app.css);
 * dark is the editor's dark mode. The pages follow the system preference, and
 * print always takes the light tokens. Contrast figures for both are in
 * docs/accessibility.md.
 */
:root {
	color-scheme: light dark;

	--bg: #f7f4ed;
	--surface: #fdfbf7;
	--surface-2: #ffffff;
	--border: #e6e0d4;
	--border-strong: #d4ccbc;
	--text: #3b3731;
	--text-strong: #1c1a17;
	--muted: #696257;
	--faint: #6f675c;
	--accent: #16749f;
	--accent-wash: rgba(22, 116, 159, 0.08);
	--accent-line: rgba(22, 116, 159, 0.28);
	--btn: #147aa6;
	--btn-hover: #0f6a90;
	--btn-ink: #ffffff;
	--btn-glow: rgba(20, 122, 166, 0.34);
	--green: #2f8f5f;
	--code-bg: #efe9de;
	--code-ink: #1d5a78;
	--selection: rgba(22, 116, 159, 0.2);
	--selection-ink: var(--text-strong);
	--nav-bg: rgba(247, 244, 237, 0.8);
	--footer-bg: rgba(90, 70, 40, 0.035);
	--glow-blue: rgba(22, 116, 159, 0.07);
	--glow-green: rgba(51, 153, 102, 0.06);
	--glow-blue-soft: rgba(22, 116, 159, 0.04);

	--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--bg: #17191c;
		--surface: #212429;
		--surface-2: #262a30;
		--border: #2f343a;
		--border-strong: #3d4248;
		--text: #d7dbe0;
		--text-strong: #f1f3f5;
		--muted: #9aa1a8;
		--faint: #7d848b;
		--accent: #5cc8f2;
		--accent-wash: rgba(34, 170, 224, 0.1);
		--accent-line: rgba(34, 170, 224, 0.3);
		--btn: #147aa6;
		--btn-hover: #0f6a90;
		--btn-ink: #ffffff;
		--btn-glow: rgba(34, 170, 224, 0.55);
		--green: #45c07d;
		--code-bg: #262a30;
		--code-ink: #cfe6f2;
		--selection: rgba(34, 170, 224, 0.38);
		--selection-ink: #ffffff;
		--nav-bg: rgba(23, 25, 28, 0.72);
		--footer-bg: rgba(0, 0, 0, 0.15);
		--glow-blue: rgba(34, 170, 224, 0.16);
		--glow-green: rgba(69, 192, 125, 0.1);
		--glow-blue-soft: rgba(34, 170, 224, 0.08);
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	color: var(--text);
	line-height: 1.65;
	background-color: var(--bg);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); color: var(--selection-ink); }

a { color: var(--accent); }
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

strong { color: var(--text-strong); font-weight: 650; }

/* long link text such as a bare URL wraps at 320px instead of scrolling */
main { overflow-wrap: break-word; }

code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.86em;
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 1px 6px;
	color: var(--code-ink);
}

/* ---- top bar: each page sets .nav-inner's max-width ---- */
.nav {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	background: var(--nav-bg);
	border-bottom: 1px solid var(--border);
}
.nav-inner {
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-strong); }
.brand svg { display: block; }

/* ---- footer of the privacy, terms and accessibility pages ---- */
.site-foot { border-top: 1px solid var(--border); background: var(--footer-bg); }
.site-foot-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 26px 24px 36px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14px;
}
.site-foot-inner a { color: var(--muted); }
.site-foot-inner a:hover { color: var(--text-strong); }
.site-foot-inner a[aria-current] { color: var(--text-strong); }