/*
Global foundation rules. The boring but critical stuff.

- html, body defaults
- Typography defaults (font-family, base font-size, line-height)
- Default link behavior
- Global layout rules like scroll behavior

No component styling. No utility classes. This is the atmosphere everything breathes in.
*/

:root {
	/* typography */
	--font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	--fs-0: 0.875rem;
	--fs-1: 1rem;
	--fs-2: 1.125rem;
	--fs-3: 1.25rem;
	--fs-4: 1.5rem;
	--fs-5: 1.875rem;
	--fs-6: 2.25rem;

	/* spacing (4px scale) */
	--s-0: 0;
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;

	/* radius */
	--r-1: 0.375rem;
	--r-2: 0.75rem;

	/* borders + shadow */
	--b-1: 1px;
	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-2: 0 6px 18px rgba(0, 0, 0, 0.12);

	/* motion */
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-1: 120ms;
	--dur-2: 200ms;

	/* layout */
	--container: 72rem;
	--gutter: var(--s-4);

	/* focus */
	--focus-ring: 0 0 0 3px color-mix(in oklab, var(--c-accent) 35%, transparent);
}

body {
	font-family: var(--font-sans);
	font-size: var(--fs-1);
	background: var(--c-bg);
	color: var(--c-text);
}

::selection {
	background: color-mix(in oklab, var(--c-accent) 35%, transparent);
}

a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
a:hover {
	text-decoration-thickness: 2px;
}

:where(code, kbd, samp, pre) {
	font-family: var(--font-mono);
}