/* Starter stylesheet — extracted from mattsafaii.com (src/css/style.css).
   Copy as the project's single stylesheet. Fill in the palette, keep the bones. */

/* ── Layers ──────────────────────────────────────────────── */

@layer config, reset, elements, components;

@layer config {
	:root {
		/* ── Color ── warm paper + ink, tool-orange accent */
		color-scheme: light; /* light-only by default; opt into dark deliberately */
		--color-bg: oklch(96.5% 0.006 60);
		--color-text: oklch(25% 0.02 60);
		--color-accent: oklch(56% 0.15 45);
		accent-color: var(--color-accent);

		/* ── Typography ── */
		font-size: clamp(95%, 85% + 0.5dvi, 115%);
		--font-sans: system-ui, sans-serif;
		--font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
		--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
		--font-body: var(--font-serif); /* document default */
		--font-heading: var(--font-mono); /* CLI identity — mono headings */
		--line-height: 1.5;
		--measure: 64ch; /* line length */

		/* ── Spacing ── 4px grid, rem-based */
		--space-1: 0.25rem; /* 4 */
		--space-2: 0.5rem; /* 8 */
		--space-3: 0.75rem; /* 12 */
		--space-4: 1rem; /* 16 */
		--space-5: 1.25rem; /* 20 */
		--space-6: 1.5rem; /* 24 */
		--space-8: 2rem; /* 32 */
		--space-10: 2.5rem; /* 40 */
		--space-12: 3rem; /* 48 */
		--space-16: 4rem; /* 64 */

		/* Semantic spacing — fluid, bounded by scale steps. The scale gives
		   fixed values; these two give responsive rhythm without leaving the
		   grid. Anything needing an exact value uses --space-* directly. */
		--gutter: clamp(var(--space-4), 2.5vmax, var(--space-6)); /* inline, 16 → 24 */
		--stack: clamp(var(--space-3), 2vmax, var(--space-4)); /* block, 12 → 16 */

		/* ── Radius ── */
		--radius-sm: 0.125rem; /* 2 */
		--radius: 0.25rem; /* 4 — base */
		--radius-lg: 0.5rem; /* 8 */
	}

	@view-transition {
		navigation: auto;
	}
}

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		font-kerning: normal;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	@media (forced-colors: active) {
		:where(button) {
			border: 1px solid;
		}
	}
}

@layer elements {
	@media (prefers-reduced-motion: no-preference) {
		:root {
			scroll-behavior: smooth;
		}
	}

	body {
		-webkit-font-smoothing: antialiased;
		font-family: var(--font-body);
		font-size: 1rem;
		line-height: var(--line-height);
		color: var(--color-text);
		background-color: var(--color-bg);
		display: grid;
		grid-template-columns:
			[bleed-start] minmax(var(--gutter), 1fr)
			[content-start] minmax(0, var(--measure))
			[content-end] minmax(var(--gutter), 1fr)
			[bleed-end];
		align-items: start;
		padding-block: 8vh calc(var(--gutter) * 2);
		overflow-x: clip;
	}

	body > header,
	body > footer {
		grid-column: content;
		font-family: var(--font-mono);
	}

	body > header {
		margin-block-end: calc(var(--stack) * 2);
	}

	body > header ul {
		display: flex;
		gap: var(--gutter);
		list-style: none;
		padding-inline-start: 0;
	}

	body > header a {
		text-decoration: none;
	}

	body > header a:hover {
		text-decoration: underline;
		text-decoration-color: var(--color-accent);
	}

	body > header a[aria-current="page"] {
		text-decoration: underline;
		text-decoration-color: var(--color-accent);
	}

	body > footer {
		margin-block-start: calc(var(--stack) * 4);
		font-size: 0.875rem;
		color: color-mix(in oklch, var(--color-text), var(--color-bg) 25%);
	}

	body > footer p {
		margin-block-end: calc(var(--stack) / 2);
	}

	main {
		grid-column: bleed;
		display: grid;
		grid-template-columns: subgrid;
		align-items: start;
	}

	main > * {
		grid-column: content;
	}

	main > * + * {
		margin-block-start: calc(var(--stack) * 2);
	}

	a {
		color: inherit;
		text-underline-offset: 0.15em;
		text-decoration-thickness: 0.05em;
	}

	a:hover {
		text-decoration-color: var(--color-accent);
	}

	h1,
	h2,
	h3 {
		font-family: var(--font-heading);
		margin-block-end: calc(var(--stack) / 2);
		text-wrap: balance;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	p,
	ul,
	ol {
		margin-block-end: var(--stack);
		text-wrap: pretty;
	}

	ul,
	ol {
		padding-inline-start: 2ch;
	}

	::selection {
		background: var(--color-accent);
		color: var(--color-bg);
	}

	:where(:focus-visible) {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	:where(img, svg, video, iframe) {
		max-inline-size: 100%;
		block-size: auto;
	}

	:where(svg) {
		fill: currentColor;
	}

	:where(input:is([type="checkbox"], [type="radio"]), select, label, button) {
		cursor: pointer;
	}

	article {
		content-visibility: auto; /* skip rendering off-screen articles */
		contain-intrinsic-size: auto 60rem; /* size estimate so the scrollbar doesn't jump; auto remembers the real size after first render */
	}
}

@layer components {
	/* Each component: @scope to the root; use `to (...)` to stop at
	   nested component boundaries. Example shape:

	@scope (.site-nav) {
		:scope {
			display: flex;
			gap: var(--gutter);
		}

		a {
			text-decoration: none;
		}
	}

	   In .card below, the inset img uses a nested concentric corner —
	   inner = outer − gap (padding + border) — as a calc() from tokens, so
	   the curves stay parallel and the relationship holds if spacing changes.
	   Use `@scope (.card) to (.card-body)` instead when the card wraps
	   another component, to stop these rules at that nested boundary.

	@scope (.card) {
		:scope {
			padding: var(--gutter);
			border: 1px solid var(--color-text);
			border-radius: var(--radius-lg);
		}

		img {
			border-radius: calc(var(--radius-lg) - var(--gutter) - 1px);
		}
	}
	*/
}