/* Placeholder landing page. The tokens are the real skeleton — one light block, one dark
   block, reduced motion respected — so the design lands on top of them rather than beside
   them. docs/style-guide.md takes over as the source of truth once it exists. */

:root {
	--bg: #f6f5f2;
	--fg: #1b1b1f;
	--muted: #5c5c66;
	--link: #2f5fd6;
	--measure: 36rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #111114;
		--fg: #ececf0;
		--muted: #a0a0ab;
		--link: #8fb0ff;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

html {
	background: var(--bg);
	color: var(--fg);
	font-family:
		ui-sans-serif,
		system-ui,
		-apple-system,
		'Helvetica Neue',
		sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: clamp(2rem, 8vh, 6rem) 1.25rem;
}

main {
	max-width: var(--measure);
	margin: 0 auto;
}

h1 {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 2rem;
}

.pitch {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 1.25rem;
}

p {
	margin: 0 0 1rem;
	color: var(--muted);
}

.pitch,
a {
	color: var(--fg);
}

a {
	color: var(--link);
	text-underline-offset: 0.15em;
}