:root {
	--color-scheme: light;
	--color-bg: hsl(0, 0%, 95%);
	--color-bg-inverse: hsl(0, 0%, 10%);
	--color-bg-surface: hsl(0, 0%, 100%);
	--color-bg-surface-hover: hsl(0, 0%, 97%);
	--color-bg-surface-active: hsl(0, 0%, 95%);
	--color-bg-surface-selected: hsl(0, 0%, 95%);
	--color-bg-surface-disabled: hsla(0, 0%, 0%, 0.05);
	--color-bg-surface-secondary: hsl(0, 0%, 97%);
	--color-bg-surface-secondary-hover: hsl(0, 0%, 95%);
	--color-bg-surface-secondary-active: hsl(0, 0%, 92%);
	--color-bg-surface-secondary-selected: hsl(0, 0%, 92%);
	--color-bg-surface-tertiary: hsl(0, 0%, 95%);
	--color-bg-surface-tertiary-hover: hsl(0, 0%, 92%);
	--color-bg-surface-tertiary-active: hsl(0, 0%, 89%);
	--color-bg-surface-brand: hsl(0, 0%, 89%);
	--color-bg-surface-brand-hover: hsl(0, 0%, 92%);
	--color-bg-surface-brand-active: hsl(0, 0%, 95%);
	--color-bg-surface-brand-selected: hsl(0, 0%, 95%);
	--color-bg-surface-info: hsl(210, 100%, 96%);
	--color-bg-surface-info-hover: hsl(210, 100%, 94%);
	--color-bg-surface-info-active: hsl(210, 100%, 90%);
	--color-bg-surface-success: hsl(127, 97%, 90%);
	--color-bg-surface-success-hover: hsl(130, 98%, 84%);
	--color-bg-surface-success-active: hsl(131, 96%, 78%);
	--color-bg-surface-caution: hsl(48, 100%, 93%);
	--color-bg-surface-caution-hover: hsl(48, 100%, 87%);
	--color-bg-surface-caution-active: hsl(48, 100%, 81%);
	--color-bg-surface-warning: hsl(30, 100%, 95%);
	--color-bg-surface-warning-hover: hsl(30, 100%, 92%);
	--color-bg-surface-warning-active: hsl(30, 100%, 89%);
	--color-bg-surface-critical: hsl(350, 95%, 95%);
	--color-bg-surface-critical-hover: hsl(350, 96%, 94%);
	--color-bg-surface-critical-active: hsl(350, 95%, 92%);
	--color-bg-surface-emphasis: hsl(233, 100%, 98%);
	--color-bg-surface-emphasis-hover: hsl(233, 100%, 96%);
	--color-bg-surface-emphasis-active: hsl(233, 100%, 94%);
	--color-bg-surface-magic: hsl(244, 100%, 99%);
	--color-bg-surface-magic-hover: hsl(244, 100%, 98%);
	--color-bg-surface-magic-active: hsl(244, 100%, 95%);
	--color-bg-surface-inverse: hsl(0, 0%, 19%);
	--color-bg-surface-transparent: hsla(0, 0%, 0%, 0);
	--color-bg-fill: hsl(0, 0%, 100%);
	--color-bg-fill-hover: hsl(0, 0%, 98%);
	--color-bg-fill-active: hsl(0, 0%, 97%);
	--color-bg-fill-selected: hsl(0, 0%, 80%);
	--color-bg-fill-disabled: hsla(0, 0%, 0%, 0.05);
	--color-bg-fill-secondary: hsl(0, 0%, 95%);
	--color-bg-fill-secondary-hover: hsl(0, 0%, 92%);
	--color-bg-fill-secondary-active: hsl(0, 0%, 89%);
	--color-bg-fill-secondary-selected: hsl(0, 0%, 89%);
	--color-bg-fill-tertiary: hsl(0, 0%, 89%);
	--color-bg-fill-tertiary-hover: hsl(0, 0%, 83%);
	--color-bg-fill-tertiary-active: hsl(0, 0%, 80%);
	--color-bg-fill-brand: hsl(166, 100%, 21%);
	--color-bg-fill-brand-hover: hsl(166, 100%, 16%);
	--color-bg-fill-brand-active: hsl(166, 100%, 12%);
	--color-bg-fill-brand-selected: hsl(166, 100%, 21%);
	--color-bg-fill-brand-disabled: hsla(166, 100%, 21%, 0.4);
	--color-bg-fill-info: hsl(207, 100%, 78%);
	--color-bg-fill-info-hover: hsl(203, 100%, 66%);
	--color-bg-fill-info-active: hsl(199, 100%, 42%);
	--color-bg-fill-info-secondary: hsl(210, 100%, 92%);
	--color-bg-fill-success: hsl(166, 94%, 25%);
	--color-bg-fill-success-hover: hsl(166, 95%, 19%);
	--color-bg-fill-success-active: hsl(167, 97%, 15%);
	--color-bg-fill-success-secondary: hsl(130, 98%, 84%);
	--color-bg-fill-warning: hsl(42, 100%, 50%);
	--color-bg-fill-warning-hover: hsl(42, 100%, 45%);
	--color-bg-fill-warning-active: hsl(42, 100%, 35%);
	--color-bg-fill-warning-secondary: hsl(34, 100%, 82%);
	--color-bg-fill-caution: hsl(54, 100%, 50%);
	--color-bg-fill-caution-hover: hsl(54, 100%, 46%);
	--color-bg-fill-caution-active: hsl(54, 100%, 44%);
	--color-bg-fill-caution-secondary: hsl(52, 100%, 74%);
	--color-bg-fill-critical: hsl(351, 90%, 41%);
	--color-bg-fill-critical-hover: hsl(351, 88%, 34%);
	--color-bg-fill-critical-active: hsl(351, 86%, 30%);
	--color-bg-fill-critical-selected: hsl(351, 86%, 30%);
	--color-bg-fill-critical-secondary: hsl(352, 97%, 91%);
	--color-bg-fill-emphasis: hsl(214, 100%, 41%);
	--color-bg-fill-emphasis-hover: hsl(214, 100%, 30%);
	--color-bg-fill-emphasis-active: hsl(214, 100%, 21%);
	--color-bg-fill-magic: hsl(256, 100%, 66%);
	--color-bg-fill-magic-secondary: hsl(244, 100%, 95%);
	--color-bg-fill-magic-secondary-hover: hsl(244, 100%, 93%);
	--color-bg-fill-magic-secondary-active: hsl(244, 100%, 92%);
	--color-bg-fill-inverse: hsl(0, 0%, 19%);
	--color-bg-fill-inverse-hover: hsl(0, 0%, 29%);
	--color-bg-fill-inverse-active: hsl(0, 0%, 38%);
	--color-bg-fill-transparent: hsla(0, 0%, 0%, 0.02);
	--color-bg-fill-transparent-hover: hsla(0, 0%, 0%, 0.05);
	--color-bg-fill-transparent-active: hsla(0, 0%, 0%, 0.08);
	--color-bg-fill-transparent-selected: hsla(0, 0%, 0%, 0.08);
	--color-bg-fill-transparent-secondary: hsla(0, 0%, 0%, 0.06);
	--color-bg-fill-transparent-secondary-hover: hsla(0, 0%, 0%, 0.08);
	--color-bg-fill-transparent-secondary-active: hsla(0, 0%, 0%, 0.11);
	--color-text: hsl(0, 0%, 19%);
	--color-text-secondary: hsl(0, 0%, 38%);
	--color-text-disabled: hsl(0, 0%, 71%);
	--color-text-link: hsl(214, 100%, 41%);
	--color-text-link-hover: hsl(214, 100%, 30%);
	--color-text-link-active: hsl(214, 100%, 21%);
	--color-text-brand: hsl(166, 100%, 21%);
	--color-text-brand-hover: hsl(166, 100%, 16%);
	--color-text-brand-on-bg-fill: hsl(0, 0%, 100%);
	--color-text-brand-on-bg-fill-hover: hsl(0, 0%, 89%);
	--color-text-brand-on-bg-fill-active: hsl(0, 0%, 80%);
	--color-text-brand-on-bg-fill-disabled: hsl(0, 0%, 100%);
	--color-text-info: hsl(200, 100%, 18%);
	--color-text-info-hover: hsl(200, 100%, 18%);
	--color-text-info-active: hsl(200, 100%, 10%);
	--color-text-info-secondary: hsl(199, 100%, 35%);
	--color-text-info-on-bg-fill: hsl(200, 100%, 10%);
	--color-text-success: hsl(167, 97%, 15%);
	--color-text-success-hover: hsl(167, 77%, 12%);
	--color-text-success-active: hsl(167, 90%, 8%);
	--color-text-success-secondary: hsl(166, 94%, 25%);
	--color-text-success-on-bg-fill: hsl(140, 100%, 99%);
	--color-text-caution: hsl(54, 100%, 15%);
	--color-text-caution-hover: hsl(54, 100%, 10%);
	--color-text-caution-active: hsl(54, 100%, 6%);
	--color-text-caution-secondary: hsl(54, 100%, 26%);
	--color-text-caution-on-bg-fill: hsl(54, 100%, 10%);
	--color-text-warning: hsl(42, 100%, 18%);
	--color-text-warning-hover: hsl(42, 100%, 13%);
	--color-text-warning-active: hsl(42, 100%, 7%);
	--color-text-warning-secondary: hsl(42, 100%, 29%);
	--color-text-warning-on-bg-fill: hsl(42, 100%, 7%);
	--color-text-critical: hsl(351, 86%, 30%);
	--color-text-critical-hover: hsl(351, 86%, 20%);
	--color-text-critical-active: hsl(351, 85%, 10%);
	--color-text-critical-secondary: hsl(351, 90%, 41%);
	--color-text-critical-on-bg-fill: hsl(350, 100%, 99%);
	--color-text-emphasis: hsl(214, 100%, 41%);
	--color-text-emphasis-hover: hsl(214, 100%, 30%);
	--color-text-emphasis-active: hsl(214, 100%, 21%);
	--color-text-emphasis-on-bg-fill: hsl(227, 100%, 99%);
	--color-text-emphasis-on-bg-fill-hover: hsl(233, 100%, 94%);
	--color-text-emphasis-on-bg-fill-active: hsl(233, 100%, 92%);
	--color-text-magic: hsl(256, 100%, 41%);
	--color-text-magic-secondary: hsl(256, 100%, 58%);
	--color-text-magic-on-bg-fill: hsl(260, 100%, 99%);
	--color-text-inverse: hsl(0, 0%, 89%);
	--color-text-inverse-secondary: hsl(0, 0%, 71%);
	--color-text-link-inverse: hsl(226, 100%, 89%);
	--color-border: hsl(0, 0%, 89%);
	--color-border-hover: hsl(0, 0%, 80%);
	--color-border-disabled: hsl(0, 0%, 92%);
	--color-border-secondary: hsl(0, 0%, 92%);
	--color-border-tertiary: hsl(0, 0%, 80%);
	--color-border-focus: hsl(166, 100%, 21%);
	--color-border-brand: hsl(0, 0%, 89%);
	--color-border-info: hsl(207, 100%, 83%);
	--color-border-success: hsl(131, 96%, 78%);
	--color-border-caution: hsl(52, 100%, 74%);
	--color-border-warning: hsl(34, 100%, 74%);
	--color-border-critical: hsl(351, 97%, 88%);
	--color-border-critical-secondary: hsl(351, 86%, 30%);
	--color-border-emphasis: hsl(214, 100%, 41%);
	--color-border-emphasis-hover: hsl(214, 100%, 30%);
	--color-border-emphasis-active: hsl(214, 100%, 21%);
	--color-border-magic: hsl(244, 100%, 93%);
	--color-border-magic-secondary: hsl(256, 100%, 73%);
	--color-border-magic-secondary-hover: hsl(256, 100%, 66%);
	--color-border-inverse: hsl(0, 0%, 38%);
	--color-border-inverse-hover: hsl(0, 0%, 80%);
	--color-border-inverse-active: hsl(0, 0%, 89%);
	--color-tooltip-tail-down-border: hsl(0, 0%, 83%);
	--color-tooltip-tail-up-border: hsl(0, 0%, 89%);
	--color-icon: hsl(0, 0%, 29%);
	--color-icon-hover: hsl(0, 0%, 19%);
	--color-icon-active: hsl(0, 0%, 10%);
	--color-icon-disabled: hsl(0, 0%, 80%);
	--color-icon-secondary: hsl(0, 0%, 54%);
	--color-icon-secondary-hover: hsl(0, 0%, 38%);
	--color-icon-secondary-active: hsl(0, 0%, 29%);
	--color-icon-brand: hsl(166, 100%, 21%);
	--color-icon-info: hsl(199, 100%, 42%);
	--color-icon-success: hsl(166, 94%, 25%);
	--color-icon-caution: hsl(54, 100%, 30%);
	--color-icon-warning: hsl(42, 100%, 35%);
	--color-icon-critical: hsl(355, 72%, 53%);
	--color-icon-emphasis: hsl(214, 100%, 41%);
	--color-icon-emphasis-hover: hsl(214, 100%, 30%);
	--color-icon-emphasis-active: hsl(214, 100%, 21%);
	--color-icon-magic: hsl(256, 100%, 66%);
	--color-icon-inverse: hsl(0, 0%, 89%);
	--color-avatar-bg-fill: hsl(0, 0%, 71%);
	--color-avatar-five-bg-fill: hsl(338, 98%, 64%);
	--color-avatar-five-text-on-bg-fill: hsl(338, 100%, 98%);
	--color-avatar-four-bg-fill: hsl(203, 100%, 66%);
	--color-avatar-four-text-on-bg-fill: hsl(200, 100%, 10%);
	--color-avatar-one-bg-fill: hsl(300, 61%, 48%);
	--color-avatar-one-text-on-bg-fill: hsl(300, 94%, 97%);
	--color-avatar-seven-bg-fill: hsl(256, 100%, 73%);
	--color-avatar-seven-text-on-bg-fill: hsl(244, 100%, 99%);
	--color-avatar-six-bg-fill: hsl(121, 81%, 53%);
	--color-avatar-six-text-on-bg-fill: hsl(122, 91%, 12%);
	--color-avatar-text-on-bg-fill: hsl(0, 0%, 100%);
	--color-avatar-three-bg-fill: hsl(177, 70%, 53%);
	--color-avatar-three-text-on-bg-fill: hsl(178, 91%, 12%);
	--color-avatar-two-bg-fill: hsl(147, 91%, 64%);
	--color-avatar-two-text-on-bg-fill: hsl(167, 97%, 15%);
	--color-backdrop-bg: hsla(0, 0%, 0%, 0.71);
	--color-button-gradient-bg-fill: linear-gradient(
		180deg,
		hsla(0, 0%, 19%, 0) 63.53%,
		hsla(0, 0%, 100%, 0.15) 100%
	);
	--color-checkbox-bg-surface-disabled: hsla(0, 0%, 0%, 0.08);
	--color-checkbox-icon-disabled: hsl(0, 0%, 100%);
	--color-input-bg-surface: hsl(0, 0%, 99%);
	--color-input-bg-surface-hover: hsl(0, 0%, 98%);
	--color-input-bg-surface-active: hsl(0, 0%, 97%);
	--color-input-border: hsl(0, 0%, 54%);
	--color-input-border-hover: hsl(0, 0%, 38%);
	--color-input-border-active: hsl(0, 0%, 10%);
	--color-nav-bg: hsl(0, 0%, 92%);
	--color-nav-bg-surface: hsla(0, 0%, 0%, 0.02);
	--color-nav-bg-surface-hover: hsl(0, 0%, 95%);
	--color-nav-bg-surface-active: hsl(0, 0%, 98%);
	--color-nav-bg-surface-selected: hsl(0, 0%, 98%);
	--color-radio-button-bg-surface-disabled: hsla(0, 0%, 0%, 0.08);
	--color-radio-button-icon-disabled: hsl(0, 0%, 100%);
	--color-video-thumbnail-play-button-bg-fill-hover: hsla(0, 0%, 0%, 0.81);
	--color-video-thumbnail-play-button-bg-fill: hsla(0, 0%, 0%, 0.71);
	--color-video-thumbnail-play-button-text-on-bg-fill: hsl(0, 0%, 100%);
	--color-scrollbar-thumb-bg-hover: hsl(0, 0%, 54%);
	--color-scrollbar-thumb-bg: hsl(0, 0%, 71%);
}