@if (variable-exists(c-root)) {
	:root {
		@include clay-css($c-root);
	}

	[data-color-scheme='light']:root,
	:root [data-color-scheme='light'] {
		color-scheme: light;
	}
} @else {
	:root {
		// Custom variable values only support SassScript inside `#{}`

		@each $color, $value in $colors {
			--#{$color}: #{$value};
		}

		@each $color, $value in $theme-colors {
			--#{$color}: #{$value};
		}

		@each $bp, $value in $grid-breakpoints {
			--breakpoint-#{$bp}: #{$value};
		}

		// Use `inspect` for lists so that quoted items keep the quotes. See https://github.com/sass/sass/issues/2383#issuecomment-336349172

		--font-family-sans-serif: #{inspect($font-family-sans-serif)};
		--font-family-monospace: #{inspect($font-family-monospace)};
	}
}

@if (variable-exists(c-dark)) {
	@media (prefers-color-scheme: dark) {
		:root {
			@include clay-css($c-dark);
		}
	}

	[data-color-scheme='dark']:root,
	:root [data-color-scheme='dark'] {
		@include clay-css($c-dark);
	}
}

@if (variable-exists(c-dark-high-contrast)) {
	@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
		:root {
			@include clay-css($c-dark-high-contrast);
		}
	}

	[data-color-scheme='dark-high-contrast']:root,
	:root [data-color-scheme='dark-high-contrast'] {
		@include clay-css($c-dark-high-contrast);
	}
}