/* Layers: reset → base → layout → components → utilities */
@layer reset, base, layout, components, utilities;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	img,
	video {
		max-width: 100%;
		display: block;
	}
	input,
	button,
	textarea,
	select {
		font: inherit;
	}
}

@layer base {
	:root {
		--color-bg: #faf9f7;
		--color-surface: #ffffff;
		--color-text: #1a1a1a;
		--color-text-muted: #555;
		--color-accent: #2563eb;
		--color-accent-hover: #1d4ed8;
		--color-border: #e2e0dc;
		--color-error: #dc2626;
		--font-sans: system-ui, -apple-system, sans-serif;
		--font-mono: ui-monospace, 'Cascadia Code', monospace;
		--space-xs: 0.25rem;
		--space-sm: 0.5rem;
		--space-md: 1rem;
		--space-lg: 2rem;
		--space-xl: 4rem;
		--radius: 0.375rem;
		--max-width: 65ch;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--color-bg: #111110;
			--color-surface: #1c1c1b;
			--color-text: #e8e6e1;
			--color-text-muted: #999;
			--color-accent: #60a5fa;
			--color-accent-hover: #93c5fd;
			--color-border: #2e2d2a;
			--color-error: #f87171;
		}
	}

	html {
		font-family: var(--font-sans);
		font-size: 1rem;
		line-height: 1.6;
		color: var(--color-text);
		background: var(--color-bg);
		-webkit-text-size-adjust: 100%;
	}

	body {
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
	}

	h1,
	h2,
	h3 {
		line-height: 1.25;
		font-weight: 700;
	}
	h1 {
		font-size: clamp(1.75rem, 5vw, 2.5rem);
	}
	h2 {
		font-size: clamp(1.25rem, 3vw, 1.75rem);
		margin-top: var(--space-lg);
	}
	h3 {
		font-size: 1.125rem;
		margin-top: var(--space-md);
	}

	p {
		max-width: var(--max-width);
	}
	p + p {
		margin-top: var(--space-md);
	}

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

	ul,
	ol {
		padding-left: var(--space-lg);
		max-width: var(--max-width);
	}
	li + li {
		margin-top: var(--space-xs);
	}

	code {
		font-family: var(--font-mono);
		font-size: 0.875em;
	}
}

@layer layout {
	.skip-link {
		position: absolute;
		inset-block-start: -100%;
		inset-inline-start: var(--space-md);
		background: var(--color-accent);
		color: #fff;
		padding: var(--space-sm) var(--space-md);
		border-radius: var(--radius);
		text-decoration: none;
		z-index: 100;

		&:focus {
			inset-block-start: var(--space-md);
		}
	}

	header {
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-md) var(--space-lg);
	}

	nav[aria-label='Main navigation'] {
		max-width: 80ch;
		margin: 0 auto;
		display: flex;
		align-items: center;
		gap: var(--space-lg);
		flex-wrap: wrap;

		ul {
			list-style: none;
			padding: 0;
			display: flex;
			gap: var(--space-md);
		}

		a {
			text-decoration: none;
			color: var(--color-text-muted);

			&:hover,
			&[aria-current='page'] {
				color: var(--color-text);
			}
		}

		.site-title {
			font-weight: 700;
			color: var(--color-text);
			font-size: 1.125rem;
			margin-right: auto;
		}
	}

	main {
		flex: 1;
		padding: var(--space-xl) var(--space-lg);
		max-width: 80ch;
		margin: 0 auto;
		width: 100%;
	}

	footer {
		border-top: 1px solid var(--color-border);
		padding: var(--space-md) var(--space-lg);
		text-align: center;
		color: var(--color-text-muted);
		font-size: 0.875rem;
	}
}

@layer components {
	.hero {
		nav {
			margin-top: var(--space-lg);
			display: flex;
			gap: var(--space-md);
			flex-wrap: wrap;
		}
		h1 {
			margin-bottom: var(--space-sm);
		}
		.lead {
			font-size: 1.25rem;
			color: var(--color-text-muted);
			margin-bottom: var(--space-md);
		}
	}

	.button {
		display: inline-block;
		padding: 0.625rem 1.25rem;
		background: var(--color-accent);
		color: #fff;
		text-decoration: none;
		border-radius: var(--radius);
		font-weight: 600;
		border: 2px solid transparent;
		cursor: pointer;
		transition: background 0.15s;

		&:hover {
			background: var(--color-accent-hover);
			color: #fff;
		}

		&.button--outline {
			background: transparent;
			border-color: var(--color-accent);
			color: var(--color-accent);

			&:hover {
				background: var(--color-accent);
				color: #fff;
			}
		}
	}

	.field {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		margin-bottom: var(--space-md);

		label {
			font-weight: 600;
		}

		input,
		textarea {
			padding: 0.5rem 0.75rem;
			border: 1px solid var(--color-border);
			border-radius: var(--radius);
			background: var(--color-surface);
			color: var(--color-text);
			width: 100%;
			max-width: var(--max-width);

			&:focus {
				outline: 2px solid var(--color-accent);
				outline-offset: 1px;
				border-color: transparent;
			}
		}
	}

	form button[type='submit'] {
		display: inline-block;
		padding: 0.625rem 1.5rem;
		background: var(--color-accent);
		color: #fff;
		text-decoration: none;
		border-radius: var(--radius);
		font-weight: 600;
		border: 2px solid transparent;
		cursor: pointer;
		transition: background 0.15s;

		&:hover {
			background: var(--color-accent-hover);
		}
	}

	.error {
		color: var(--color-error);
		border: 1px solid var(--color-error);
		padding: var(--space-sm) var(--space-md);
		border-radius: var(--radius);
		margin-bottom: var(--space-md);
		max-width: var(--max-width);
	}

	article {
		h1 {
			margin-bottom: var(--space-md);
		}
		h2 {
			margin-bottom: var(--space-sm);
		}
		ul,
		ol {
			margin-top: var(--space-sm);
		}
	}
}

@layer utilities {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}