/* Canonical colors, fonts, sizes and custom properties come from theme.json. */
body {
	--vr-gutter: var(--wp--custom--layout--gutter-mobile);
	--vr-section-space: var(--wp--custom--section--mobile);
	--vr-hero-space: var(--wp--custom--hero--mobile);
	--vr-footer-space: var(--wp--custom--footer--mobile);
	--vr-heading-gap: var(--wp--preset--spacing--16);
	--vr-column-gap: var(--wp--preset--spacing--32);
	--vr-header-height: var(--wp--custom--header--height-mobile);
	--vr-logo-width: var(--wp--custom--header--logo-mobile);
	--vr-focus-color: var(--wp--preset--color--brand);
	--vr-focus-separation: var(--wp--preset--color--surface);
	--vr-motion-duration: var(--wp--custom--motion--fast);
}

@media (min-width: 30rem) {
	body {
		--vr-gutter: var(--wp--custom--layout--gutter-tablet);
	}
}

@media (min-width: 48rem) {
	body {
		--vr-section-space: var(--wp--custom--section--tablet);
		--vr-hero-space: var(--wp--custom--hero--tablet);
		--vr-footer-space: var(--wp--custom--footer--tablet);
	}
}

@media (min-width: 64rem) {
	body {
		--vr-gutter: var(--wp--custom--layout--gutter-desktop);
		--vr-section-space: var(--wp--custom--section--desktop);
		--vr-hero-space: var(--wp--custom--hero--desktop);
		--vr-footer-space: var(--wp--custom--footer--desktop);
		--vr-heading-gap: var(--wp--preset--spacing--24);
		--vr-column-gap: var(--wp--preset--spacing--64);
		--vr-header-height: var(--wp--custom--header--height-desktop);
		--vr-logo-width: var(--wp--custom--header--logo-desktop);
	}
}

@media (prefers-reduced-motion: reduce) {
	body {
		--vr-motion-duration: 0s;
	}
}