@mixin setup {
	:root {
		--system-fonts: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,
		"Source Sans 3", Ubuntu, Roboto, Noto, system-ui, sans-serif;
		--monospace-system-fonts: ui-monospace, "Source Code Pro", "Ubuntu Mono",
		"Cascadia Code", Menlo, Consolas, Monaco, "Andale Mono", "Liberation Mono",
		"Lucida Console", monospace;

		font-synthesis: none;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color-scheme: light dark;
	}

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

	html {
		font-size: 100%;
		hanging-punctuation: first last;
		orphans: 3;
	}

	body {
		margin: 0;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	@media (prefers-reduced-data: reduce) {
		// Use var(--font-override, "The Font you actually want") to disable loading
		// web fonts when prefers-reduce-data is on.
		:root {
			--font-override: var(--system-fonts);
			--monospace-font-override: var(--monospace-system-fonts);
		}
	}

	@media (prefers-reduced-motion) {
		// Similar to the above, use something like var(--timing-override, 2s) to
		// disable animations where appropriate.
		:root {
			--timing-override: 0;
			--timing-state-override: paused;
		}
	}
}