:root {

	/* Typographic scale */
	--go--type-scale-0: calc(var(--go--heading-size, var(--go--font-size)) * 0.7);

	@include media(large) {
		--go--type-scale-0: var(--go--heading-size, var(--go--font-size)); /* --go--heading-size is a future user-controlled value, in rem. */
	}

	--go--type-scale-1: calc(var(--go--type-scale-0) * var(--go--type-ratio));
	--go--type-scale-2: calc(var(--go--type-scale-1) * var(--go--type-ratio));
	--go--type-scale-3: calc(var(--go--type-scale-2) * var(--go--type-ratio));
	--go--type-scale-4: calc(var(--go--type-scale-3) * var(--go--type-ratio));
	--go--type-scale-5: calc(var(--go--type-scale-4) * var(--go--type-ratio));
	--go--type-scale-6: calc(var(--go--type-scale-5) * var(--go--type-ratio));

	/* Spacing */
	--go--spacing--vertical: calc(var(--go--spacing--paragraph) / var(--go--viewport-basis) * 100rem);
	--go--spacing--vertical--lg: calc(120 / var(--go--viewport-basis) * 100vw);

	--go-block--padding--x: calc(var(--go--spacing--horizontal) / var(--go--viewport-basis) * 100vw);
	--go-header--padding--y: calc(var(--go--spacing--header) / var(--go--viewport-basis) * 100vw);

	@include media(medium) {
		--go--spacing--vertical--lg: calc(100 / var(--go--viewport-basis) * 100vw);
	}
	@include media(xlarge) {
		--go--spacing--vertical--lg: calc(90 / var(--go--viewport-basis) * 100rem);
		--go-block--padding--x: calc(var(--go--spacing--horizontal) / var(--go--viewport-basis) * 90rem);
		--go-header--padding--y: calc(var(--go--spacing--header) / var(--go--viewport-basis) * 90rem);
	}
}
