@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		margin: 0;
		background: var(--color-bg);
		color: var(--color-text);
		font-family: var(--font-base);
		font-size: var(--fs-base);
		line-height: var(--lh-base);
	}

	h1,
	h2,
	h3,
	p {
		margin: 0 0 var(--space-3);
	}

	h1 {
		font-size: var(--fs-2xl);
		font-weight: 900;
		line-height: 1.25;
	}

	h2 {
		font-size: var(--fs-xl);
		font-weight: 700;
		line-height: 1.3;
	}

	h3 {
		font-size: var(--fs-md);
		font-weight: 700;
	}

	p {
		color: var(--color-text-muted);
	}

	a {
		color: var(--color-primary-dark);
	}

	img {
		max-width: 100%;
		display: block;
	}

	button {
		font: inherit;
	}

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

	[hidden] {
		display: none !important;
	}
}