:root {
	--sl-color-accent-low: hsl(41, 86%, 23%);
	--sl-color-accent: hsl(41, 86%, 63%);
	--sl-color-accent-high: hsl(41, 86%, 83%);
	--sl-color-white: #cdd6f4;
	--sl-color-gray-1: #bac2de;
	--sl-color-gray-2: #a6adc8;
	--sl-color-gray-3: #9399b2;
	--sl-color-gray-4: #45475a;
	--sl-color-gray-5: #313244;
	--sl-color-gray-6: #181825;
	--sl-color-gray-7: #11111b;
	--sl-color-black: #1e1e2e;

  --sl-hue-orange: 23;
	--sl-color-orange-low: hsl(23, 32%, 25%);
	--sl-color-orange: hsl(23, 72%, 76%);
	--sl-color-orange-high: hsl(23, 92%, 76%);
	--sl-hue-green: 115;
	--sl-color-green-low: hsl(115, 14%, 26%);
	--sl-color-green: hsl(115, 34%, 76%);
	--sl-color-green-high: hsl(115, 54%, 76%);
	--sl-hue-blue: 217;
	--sl-color-blue-low: hsl(217, 32%, 26%);
	--sl-color-blue: hsl(217, 72%, 76%);
	--sl-color-blue-high: hsl(217, 92%, 76%);
	--sl-hue-purple: 267;
	--sl-color-purple-low: hsl(267, 33%, 26%);
	--sl-color-purple: hsl(267, 64%, 81%);
	--sl-color-purple-high: hsl(267, 84%, 81%);
	--sl-hue-red: 343;
	--sl-color-red-low: hsl(343, 26%, 25%);
	--sl-color-red: hsl(343, 61%, 75%);
	--sl-color-red-high: hsl(343, 81%, 75%);

  color-scheme: dark;
}