@layer base {
	:root {
		color-scheme: light dark;

		--inline-space: 1ch;
		--block-space: 1rem;
		--radius: 0.75rem;
		--radius-sm: 0.5rem;

		--surface: oklch(97% 0.008 260);
		--surface-raised: oklch(100% 0 0);
		--surface-sunken: oklch(95% 0.008 260);
		--border: oklch(88% 0.014 260);
		--ink: oklch(22% 0.02 260);
		--ink-muted: oklch(48% 0.018 260);
		--accent: oklch(49% 0.17 260);
		--accent-ink: oklch(99% 0 0);
		--good: oklch(43% 0.12 155);
		--bad: oklch(50% 0.16 25);
		--bad-soft: oklch(96% 0.03 25);

		--font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--surface: oklch(17% 0.013 260);
			--surface-raised: oklch(22% 0.016 260);
			--surface-sunken: oklch(27% 0.018 260);
			--border: oklch(34% 0.02 260);
			--ink: oklch(95% 0.008 260);
			--ink-muted: oklch(73% 0.015 260);
			--accent: oklch(77% 0.13 260);
			--accent-ink: oklch(16% 0.025 260);
			--good: oklch(78% 0.12 155);
			--bad: oklch(76% 0.13 25);
			--bad-soft: oklch(30% 0.05 25);
		}
	}

	body {
		min-block-size: 100dvh;
		background: var(--surface);
		color: var(--ink);
		font-family: var(--font-body);
		line-height: 1.55;
	}

	h1 {
		font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
		line-height: 1.1;
		letter-spacing: -0.035em;
	}

	h2 {
		font-size: 0.9rem;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: var(--ink-muted);
	}

	h3 {
		font-size: 1.1rem;
		line-height: 1.35;
		letter-spacing: -0.01em;
	}

	a {
		color: var(--accent);
		text-underline-offset: 0.2em;
	}

	:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
		border-radius: var(--radius-sm);
	}
}