/**
 * Reset + container-query layout foundation.
 *
 * Spacing tokens (--container-px / --block-gap / --section-py) scale with the
 * width of #page, which is set up as the "site" container. Figma's component
 * variants are named "container=Narrow (<720) / Wide (>=720)" — thresholds
 * for individual components (header 960/1280, equipment pattern 720, etc.)
 * are applied on their own wrapper via additional container queries where
 * they differ from this default.
 */

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

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

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-text-primary);
	background-color: var(--color-bg-base);
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
}

#page {
	container-type: inline-size;
	container-name: site;

	/* Narrow (<720) spacing defaults */
	--container-px: 20px;
	--block-gap: 32px;
	--section-py: 64px;
}

@container site (min-width: 720px) {
	#page {
		/* Wide (>=720) spacing */
		--container-px: 40px;
		--block-gap: 48px;
		--section-py: 120px;
	}
}

.u-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--container-px);
}

.u-text-primary {
	color: var(--color-text-primary);
}

.u-text-inverse {
	color: var(--color-text-inverse);
}

.u-text-accent {
	color: var(--color-text-accent);
}

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