@layer base {
	*, *::before, *::after { box-sizing: border-box; }
	html { color-scheme: light dark; }
	body {
		margin: 0;
		background-color: var(--color-background);
		color: var(--color-foreground);
		font-family: var(--font-sans);
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
	}
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-display);
		font-weight: 700;
		letter-spacing: -0.01em;
		margin: 0;
	}
	p { margin: 0; }
	a { color: inherit; }
	img, svg { max-width: 100%; display: block; }
	ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

	.skip-link {
		position: absolute;
		left: 1rem; top: -3rem;
		z-index: 100;
		background: var(--color-primary);
		color: var(--color-primary-foreground);
		padding: 0.5rem 1rem;
		border-radius: var(--radius-sm);
		font-weight: 600;
		font-size: 0.875rem;
		transition: top 0.15s ease;
	}
	.skip-link:focus {
		top: 1rem;
	}

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}