:root {
	--color-primary: hsla(40 39% 55% / 1);
	--color-on-primary: hsla(220 97% 98% / 1);

	--color-accent: hsla(6 92% 59% / 1);
	--color-on-accent: hsla(6 12% 98% / 1);

	--color-dark-red: hsla(6 92% 19% / 1);
	--color-red-apple: hsla(353 100% 50% / 1);

	--color-background: hsla(0 0% 100% / 1);
	--color-background-translucent: hsla(0 0% 100% / 0.93);
	--color-background-transparent: hsla(0 0% 100% / 0.77);
	--color-background-glass: hsla(0 0% 100% / 0.34);
	--color-on-background: hsla(220 21.1% 22.4% / 1);
	--color-on-background-reduced: hsla(220 21.1% 32.4% / 1);

	--color-intro-bg: hsla(0 0% 100% / 1);
	--color-on-intro-bg: hsla(220 21.1% 22.4% / 1);

	--color-video-bg: hsla(211 4% 10% / 1);
	/* --color-video-surface: hsla(211 4% 12% / 1); */
	--color-video-surface: hsla(40 2% 12% / 1);
	--color-on-video-bg: hsla(0 0% 90% / 1);

	--color-surface: hsla(220 21.1% 96.4% / 1);
	--color-surface-translucent: hsla(220 21.1% 96.4% / 0.77);
	--color-surface-transparent: hsla(220 21.1% 96.4% / 0.57);
	--color-on-surface: hsla(220 21.1% 22.4% / 1);
	--color-on-surface-info: hsla(216.4 100% 40.2% / 1);

	/* System */
	--color-info: hsla(216.4 100% 60.2% / 1);
	--color-on-info: hsla(216.4 100% 97.7% / 1);
	--color-on-video-bg: hsla(0 0% 90% / 1);

	--color-warning: hsla(51.5 96% 51% / 1);
	--color-on-warning: hsla(51.5 96% 16.4% / 1);

	--color-accept: hsla(125.1 65.7% 54.3% / 1);
	--color-on-accept: rgb(1, 42, 14);

	--color-reject: hsla(2.9 90.3% 59.6% / 1);
	--color-on-reject: hsla(3 83.2% 98.5% / 1);

	--color-marker: hsla(240 28.6% 94.5% / 1);
	--color-on-marker: hsla(240 28.6% 14.5% / 1);
}

[data-theme="dark"] {
	--color-primary: hsla(40 39% 55% / 1);
	--color-on-primary: hsla(53.5 97.1% 12.8% / 1);

	/* hsl(228deg 4 26) */
	--color-background: hsla(211 4% 10% / 1);
	--color-background-translucent: hsla(0 0% 20% / 0.93);
	--color-background-transparent: hsla(0 0% 20% / 0.77);
	--color-background-glass: hsla(0 0% 20% / 0.34);
	--color-on-background: hsla(0 0% 90% / 1);

	--color-intro-bg: hsla(211 4% 18% / 1);
	--color-on-intro-bg: hsla(0 0% 90% / 1);

	--color-video-bg: hsla(211 4% 10% / 1);
	--color-video-surface: hsla(40 2% 12% / 1);
	--color-on-video-bg: hsla(0 0% 90% / 1);

	--color-surface: hsl(0, 0%, 16.1%);
	--color-surface-translucent: hsla(0 0% 16% / 0.93);
	--color-surface-transparent: hsla(0 0% 16% / 0.8);
	--color-on-surface: hsla(0 0% 84% / 1);
	--color-on-surface-info: hsla(216.4 8% 66.2% / 1);

	/* System */
	--color-info: hsla(211 100% 65% / 1);
	--color-on-info: hsla(216.4 100% 97.7% / 1);

	--color-warning: hsla(51.5 96% 51% / 1);
	--color-on-warning: hsla(51.5 96% 16.4% / 1);

	--color-accept: hsla(125.1 65.7% 54.3% / 1);
	--color-on-accept: rgb(1, 42, 14);

	--color-reject: hsla(2.9 90.3% 59.6% / 1);
	--color-on-reject: hsla(3 83.2% 98.5% / 1);

	--color-marker: hsla(240 28.6% 94.5% / 1);
	--color-on-marker: hsla(240 28.6% 14.5% / 1);
}