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

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

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin: 0;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		block-size: auto;
		max-inline-size: 100%;
	}

	iframe {
		max-inline-size: 100%;
	}

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

	button {
		color: inherit;
	}

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

@layer base {
	html {
		min-inline-size: 20rem;
		background: var(--fg-color-background);
		scroll-behavior: smooth;
		scroll-padding-block-start: calc(var(--fg-header-height-scrolled) + var(--fg-space-4));
		scrollbar-gutter: stable;
	}

	body {
		min-block-size: 100vh;
		background: var(--fg-color-background);
		color: var(--fg-color-text);
		font-family: var(--fg-font-sans);
		font-size: var(--fg-font-size-body);
		font-weight: var(--fg-font-weight-regular);
		letter-spacing: var(--fg-letter-spacing-body);
		line-height: var(--fg-line-height-body);
		text-rendering: optimizeLegibility;
	}

	body.has-open-menu {
		overflow: hidden;
	}

	h1,
	h2,
	h3,
	h4 {
		font-weight: var(--fg-font-weight-semibold);
		letter-spacing: var(--fg-letter-spacing-heading);
		line-height: var(--fg-line-height-heading);
		text-wrap: balance;
	}

	h1 {
		font-size: var(--fg-font-size-display);
		line-height: var(--fg-line-height-display);
	}

	h2 {
		font-size: var(--fg-font-size-section);
	}

	h3,
	h4 {
		font-size: var(--fg-font-size-xl);
	}

	p,
	li {
		max-inline-size: 72ch;
	}

	a {
		color: inherit;
		text-decoration-thickness: 0.075em;
		text-underline-offset: 0.2em;
	}

	button,
	[role="button"] {
		cursor: pointer;
	}

	button:disabled,
	[aria-disabled="true"] {
		cursor: not-allowed;
	}

	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline: max(2px, 0.125rem) solid var(--fg-color-focus);
		outline-offset: 0.25rem;
	}

	:where(main, [tabindex="-1"]):focus {
		outline: none;
	}

	::selection {
		background: var(--fg-color-selection);
		color: var(--fg-color-on-brand);
	}
}