$breakpoint: 80rem;

$narrow-content-width: 50rem;
$content-width: 60rem;
$wide-content-width: 80rem;

%narrow-content {
	margin-left: auto;
	margin-right: auto;
	max-width: $narrow-content-width;
}

%narrow-content-gutter {
	margin: var(--gap-m);

	@media screen and (min-width: $breakpoint) {
		margin-left: auto;
		margin-right: auto;
		max-width: $narrow-content-width;
	}
}

%content {
	margin-left: auto;
	margin-right: auto;
	max-width: $content-width;
}

%content-gutter {
	margin: var(--gap-m);

	@media screen and (min-width: $breakpoint) {
		margin-left: auto;
		margin-right: auto;
		max-width: $content-width;
	}
}

%wide-content {
	margin-left: auto;
	margin-right: auto;
	max-width: $wide-content-width;
}

%wide-content-gutter {
	margin: var(--gap-m) auto;
	max-width: $wide-content-width;
}

@mixin setup {
	:root {
		$-text-lower-base: 1rem / 20 * 16;
		$-text-upper-base: 1rem;
		--text-m: #{fluids.harmonic-value(0, $-text-lower-base, $-text-upper-base)};
		--text-l: #{fluids.harmonic-value(1, $-text-lower-base, $-text-upper-base)};
		--text-xl: #{fluids.harmonic-value(2, $-text-lower-base, $-text-upper-base)};
		--text-2xl: #{fluids.harmonic-value(3, $-text-lower-base, $-text-upper-base)};

		$-line-height-factor: 1.5;
		--scale-s: #{0.8 * $-line-height-factor};
		--scale-m: #{$-line-height-factor};
		--scale-l: #{1.5 * $-line-height-factor};
		--scale-xl: #{1.7 * $-line-height-factor};

		$-gap-lower-base: $-text-lower-base * $-line-height-factor;
		$-gap-upper-base: $-text-upper-base * $-line-height-factor;
		--gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)};
		--gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
		--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};
		--gap-l: #{fluids.harmonic-value(2, $-gap-lower-base, $-gap-upper-base)};
		--gap-xl: #{fluids.harmonic-value(3, $-gap-lower-base, $-gap-upper-base)};
		--gap-2xl: #{fluids.harmonic-value(5, $-gap-lower-base, $-gap-upper-base)};
	}
}