:root{
	--dark-theme-check: 1;
	--theme-color-check: 0;
	--accent-color-check: 0;
	--theme-hue: 0;
	--accent-hue: 0;
	
	/* Contrast hue - the color for hyperlinks and selection.
	Default hue is 210, but we want it the +180 opposite hue of theme if there is a theme color.*/
	--theme-contrast-hue: calc(calc(var(--theme-hue) + 180) * var(--theme-color-check));
	--default-contrast-hue: calc(210 - calc(var(--theme-color-check) * 210));
	--contrast-hue: calc(var(--theme-contrast-hue) + var(--default-contrast-hue));

	--foreground-lightness: calc(0% + calc(var(--dark-theme-check) * 90%));
	--background-lightness: calc(100% - calc(var(--dark-theme-check) * 90%));
	--contrast-lightness: calc(50% + calc(var(--dark-theme-check) * 0%));
	
	/* Accent hue - the color for all other elements beside <p> foreground and the main background.
	We want to inherit the theme hue if accent color is disabled.*/
	--theme-accent-hue: calc(var(--theme-hue) * calc(1 - var(--accent-color-check)));
	--accent-check-hue: calc(var(--accent-hue) * var(--accent-color-check));
	--applied-accent-hue: calc(var(--theme-accent-hue) + var(--accent-check-hue));

	--accent-saturation: calc(
		max(var(--accent-color-check), var(--theme-color-check)) * 
		calc(75% - calc(var(--dark-theme-check) * 20%))
		);
	--contrast-saturation: calc(100% - calc(var(--dark-theme-check) * 10%));

	--foreground-theme-color: hsl(
		var(--theme-hue),
		calc(var(--theme-color-check) * 75%),
		var(--foreground-lightness)
		);
	--background-theme-color: hsl(
		var(--theme-hue),
		calc(var(--theme-color-check) * 25%),
		var(--background-lightness)
		);
	--foreground-accent-color: hsl(
		var(--applied-accent-hue),
		var(--accent-saturation),
		var(--contrast-lightness)
		);
	--background-accent-color: hsl(
		var(--applied-accent-hue),
		calc(var(--accent-color-check) * 25%),
		var(--background-lightness)
		);
	--contrast-color: hsl(
		var(--contrast-hue), 
		var(--contrast-saturation), 
		var(--contrast-lightness)
		);
}