@layer base {
	/* ─────────────────────────────────────────────────────────────────────────
     * Design Token Aliases
     * All values come from theme.json. Change colors/fonts there, not here.
     * ───────────────────────────────────────────────────────────────────────── */
	:root {
		/* Colors — aliased from theme.json via WP presets */
		--uw-primary:      var(--wp--preset--color--primary);
		--uw-bg:           var(--wp--preset--color--background);
		--uw-fg:           var(--wp--preset--color--foreground);
		--uw-accent:       var(--wp--preset--color--accent);
		--uw-accent-light: var(--wp--preset--color--accent-light);

		/* Fonts — aliased from theme.json via WP presets (these do generate reliably) */
		--uw-font-heading: var(--wp--preset--font-family--heading);
		--uw-font-body: var(--wp--preset--font-family--body);

		/* Type scale — raw values matching theme.json (WP font-size presets unreliable) */
		--uw-text-xs: 0.75rem;
		--uw-text-sm: 0.875rem;
		--uw-text-base: 1rem;
		--uw-text-lg: 1.25rem;
		--uw-text-xl: 1.5rem;
		--uw-text-2xl: 1.875rem;
		--uw-text-3xl: 2.25rem;
		--uw-text-4xl: 3rem;
		--uw-text-5xl: 3.75rem;

		/* Spacing — raw values matching theme.json (WP spacing presets unreliable) */
		--uw-space-1: 0.25rem;
		--uw-space-2: 0.5rem;
		--uw-space-3: 0.75rem;
		--uw-space-4: 1rem;
		--uw-space-6: 1.5rem;
		--uw-space-8: 2rem;
		--uw-space-10: 2.5rem;
		--uw-space-12: 3rem;
		--uw-space-16: 4rem;
		--uw-space-20: 5rem;
		--uw-space-24: 6rem;
		--uw-space-32: 8rem;

		/* Layout */
		--uw-container-width: 1280px;
		--uw-container-padding: var(--uw-space-6);
		--uw-header-height: 88px;

		/* Border radius */
        --uw-radius-xs: 2px;
		--uw-radius-sm: 4px;
		--uw-radius-md: 8px;
		--uw-radius-lg: 16px;
		--uw-radius-pill: 9999px;

		/* Transitions */
		--uw-transition-fast: 150ms ease;
		--uw-transition-base: 250ms ease;
		--uw-transition-slow: 400ms ease;

		/* Shadows — derived from foreground color */
		--uw-shadow-sm: 0 1px 3px rgba(14, 20, 24, 0.08);
		--uw-shadow-md: 0 4px 12px rgba(14, 20, 24, 0.12);
		--uw-shadow-lg: 0 10px 24px rgba(14, 20, 24, 0.18);
	}

	/* ─── Global base styles ─── */

	html {
		scroll-behavior: smooth;
		overscroll-behavior: none;
	}

	body {
		font-family: var(--uw-font-body);
		font-size: var(--uw-text-base);
		color: var(--uw-fg);
		background-color: var(--uw-bg);
		line-height: 1.6;
		text-wrap: pretty;
	}

	.italic {
		font-style: italic;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--uw-font-heading);
		font-weight: 400;
		line-height: 1.1;
	}

	/* ── Desktop (default) ── */
	h1 {
		font-size: var(--uw-text-5xl);
		letter-spacing: -0.025em;
	}
	h2 {
		font-size: var(--uw-text-4xl);
		letter-spacing: -0.0125em;
	}
	h3 {
		font-size: var(--uw-text-3xl);
		letter-spacing: -0.0075em;
	}
	h4 {
		font-size: var(--uw-text-2xl);
	}
	h5 {
		font-size: var(--uw-text-xl);
	}
	h6 {
		font-size: var(--uw-text-lg);
	}

	/* ── Tablet (≤ 1024px) ── */
	@media (max-width: 1024px) {
		h1 {
			font-size: var(--uw-text-4xl);
		}
		h2 {
			font-size: var(--uw-text-3xl);
		}
		h3 {
			font-size: var(--uw-text-2xl);
		}
	}

	/* ── Mobile (≤ 640px) ── */
	@media (max-width: 640px) {
		h1 {
			font-size: var(--uw-text-3xl);
		}
		h2 {
			font-size: var(--uw-text-2xl);
		}
		h3 {
			font-size: var(--uw-text-xl);
		}
	}

	p {
		margin-block-end: var(--uw-space-4);
	}

	p:last-child {
		margin-block-end: 0;
	}

	a {
		color: var(--uw-primary);
		transition: opacity var(--uw-transition-fast);
	}

	a:hover {
		opacity: 0.75;
	}

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

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

	img {
		height: auto;
	}

	/* ─── Layout ─── */

	.container {
		width: min(var(--uw-container-width), 100%);
		padding-inline: var(--uw-container-padding);
		margin-inline: auto;
	}

	.section {
		padding-block: var(--uw-space-32);
		background: var(--wp--preset--color--background);
	}

	/* ─── Accessibility ─── */

	.screen-reader-text {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.screen-reader-text:focus {
		clip: auto;
		clip-path: none;
		display: block;
		font-size: var(--uw-text-sm);
		height: auto;
		left: 5px;
		padding: var(--uw-space-4) var(--uw-space-6);
		top: 5px;
		width: auto;
		z-index: 100000;
		background: var(--uw-bg);
		color: var(--uw-fg);
		border-radius: var(--uw-radius-md);
		box-shadow: var(--uw-shadow-lg);
	}
}