:root {
	--page-container: 1380px;
	--page-gutter: 30px;
	--page-radius: 16px;
	--footer-radius: 18px;
	--button-radius: 9999px;
	--section-padding-y: 60px;
	--section-gap-y: 49px;
	--section-footer-gap: 110px;
	--content-gutter: 70px;
	--section-space-xlarge: 140px;
	--section-space-large: 100px;
	--section-space-medium: 64px;
	--section-space-small: 32px;
	--component-gap: 16px;
	--z-below: -2;
	--z-behind: -1;
	--z-base: 0;
	--z-content: 2;
	--z-record: 3;
	--z-cta: 5;
	--z-menu: 900;
	--z-header: 910;
	--z-loader: 1000;
}

@media (max-width: 1366px) {
	:root {
		--section-padding-y: 56px;
		--section-gap-y: 44px;
		--section-footer-gap: 100px;
		--content-gutter: 60px;
		--section-space-xlarge: 128px;
		--section-space-large: 92px;
		--section-space-medium: 58px;
		--section-space-small: 30px;
	}
}

@media (max-width: 1280px) {
	:root {
		--page-container: 1140px;
		--section-padding-y: 52px;
		--section-footer-gap: 92px;
		--content-gutter: 52px;
		--section-space-xlarge: 116px;
		--section-space-large: 84px;
		--section-space-medium: 54px;
	}
}

@media (max-width: 1166px) {
	:root {
		--section-padding-y: 48px;
		--section-gap-y: 40px;
		--section-footer-gap: 84px;
		--content-gutter: 44px;
		--section-space-xlarge: 104px;
		--section-space-large: 76px;
		--section-space-medium: 48px;
		--section-space-small: 28px;
	}
}

@media (max-width: 1024px) {
	:root {
		--page-gutter: 24px;
		--section-padding-y: 44px;
		--section-gap-y: 36px;
		--section-footer-gap: 76px;
		--content-gutter: 36px;
		--section-space-xlarge: 92px;
		--section-space-large: 68px;
		--section-space-medium: 44px;
		--section-space-small: 26px;
	}
}

@media (max-width: 768px) {
	:root {
		--page-gutter: 20px;
		--section-padding-y: 36px;
		--section-gap-y: 32px;
		--section-footer-gap: 64px;
		--content-gutter: 28px;
		--section-space-xlarge: 78px;
		--section-space-large: 58px;
		--section-space-medium: 38px;
		--section-space-small: 24px;
		--component-gap: 14px;
	}
}

@media (max-width: 480px) {
	:root {
		--page-gutter: 16px;
		--section-padding-y: 32px;
		--section-gap-y: 28px;
		--section-footer-gap: 52px;
		--content-gutter: 20px;
		--section-space-xlarge: 66px;
		--section-space-large: 50px;
		--section-space-medium: 34px;
		--section-space-small: 22px;
		--component-gap: 12px;
	}
}

@media (max-width: 360px) {
	:root {
		--page-gutter: 12px;
		--section-padding-y: 28px;
		--section-gap-y: 24px;
		--section-footer-gap: 44px;
		--content-gutter: 16px;
		--section-space-xlarge: 58px;
		--section-space-large: 44px;
		--section-space-medium: 30px;
		--section-space-small: 20px;
		--component-gap: 10px;
	}
}

/*
* Short desktop and laptop viewports need the same shared spacing rhythm at a
* smaller vertical scale. Width-based tokens remain the default at normal
* heights; these overrides reuse the same global roles rather than creating a
* second responsive variable system.
*/
@media (min-width: 769px) and (max-height: 720px) {
	:root {
		--section-padding-y: 44px;
		--section-gap-y: 36px;
		--section-footer-gap: 72px;
		--content-gutter: 44px;
		--section-space-xlarge: 96px;
		--section-space-large: 70px;
		--section-space-medium: 44px;
		--section-space-small: 26px;
		--component-gap: 14px;
	}
}

@media (min-width: 769px) and (max-height: 620px) {
	:root {
		--section-padding-y: 38px;
		--section-gap-y: 32px;
		--section-footer-gap: 60px;
		--content-gutter: 40px;
		--section-space-xlarge: 78px;
		--section-space-large: 58px;
		--section-space-medium: 36px;
		--section-space-small: 22px;
		--component-gap: 12px;
	}
}

@media (max-width: 768px) and (max-height: 560px) and (orientation: landscape) {
	:root {
		--section-padding-y: 32px;
		--section-gap-y: 28px;
		--section-footer-gap: 52px;
		--content-gutter: 20px;
		--section-space-xlarge: 66px;
		--section-space-large: 50px;
		--section-space-medium: 34px;
		--section-space-small: 22px;
		--component-gap: 12px;
	}
}