html {
    --hue: 233;
    --accent-hue: 240;
    --accent2-hue: 202;
    --special-hue: 233;
    --special2-hue: 218;
    --progress-hue: 208;
    --text-color-normal: hsl(var(--hue), 7%, 50%);
    --text-color-medium: hsl(var(--hue), 7%, 60%);
    --text-color-light: hsl(var(--hue), 7%, 75%);
    --text-color-lighter: hsl(var(--hue), 7%, 85%);
    --text-color-richer: hsl(var(--hue), 50%, 72%);
    --text-color-highlight: hsl(var(--accent-hue), 4%, 95%);
    --text-color-highlight-a: hsl(var(--accent2-hue), 64%, 60%);
    --text-color-navigation: hsl(var(--hue), 7%, 60%);
    --text-color-navigation-highlight: hsl(var(--hue), 7%, 85%);
    --background: hsl(var(--hue), 19%, 17%);
    --background-content: hsl(var(--hue), 23%, 13%);
    --background-filter: hsl(var(--hue), 23%, 14%);
    --background-navigation: hsl(var(--hue), 19%, 17%);
    --background-menu: hsl(var(--hue), 23%, 12%);
    --background-superlowlight: hsl(var(--hue), 23%, 8%);
    --background-lowlight: hsl(var(--hue), 23%, 10%);
    --background-highlight: hsl(var(--hue), 19%, 17%);
    --background-progress: hsl(var(--progress-hue), 84%,40%);
    --background-dark: hsl(var(--hue), 19%, 17%);
    --border-color: hsl(var(--hue), 19%, 17%);
    --border-color-lowlight: hsl(var(--hue), 19%, 17%);
    --border-color-superlowlight: hsl(var(--special2-hue), 8%, 17%);
    --border-color-highlight: hsl(var(--hue), 0%, 75%);
    --scrollbar-thumb: hsl(var(--hue), 7%, 50%);
    --box-shadow-color: hsl(var(--hue), 7%, 10%);
    --separator: hsl(var(--hue), 7%, 55%);
}

html[data-theme-color='light'] {
    --black: 0;
    --hue: 220;
    --special-hue: 208;
    --special2-hue: 233;
    --text-color-normal: hsl(var(--hue), 0%, 0%);
    --text-color-medium: hsl(var(--hue), 7%, 50%);
    --text-color-light: hsl(var(--hue), 7%, 25%);
    --text-color-lighter: hsl(var(--hue), 7%, 5%);
    --text-color-navigation: hsl(var(--hue), 7%, 75%);
    --text-color-navigation-highlight: hsl(var(--hue), 7%, 100%);
    --background: hsl(var(--hue), 27.3%, 97.1%);
    --background-content: hsl(var(--hue), 100%, 100%);
    --background-filter: hsl(var(--hue), 17%, 18%);
    --background-navigation: hsl(var(--special-hue), 84%, 40%);
    --background-menu: hsl(var(--special-hue), 84%, 20%);
    --background-superlowlight: hsl(var(--hue), 8%, 40%);
    --background-lowlight: hsl(var(--hue), 8%, 98%);
    --background-highlight: hsl(var(--special-hue), 84%, 50%);
    --background-progress: hsl(var(--black), 0%, 75%);
    --background-dark: hsl(var(--special2-hue), 19%, 17%);
    --border-color: hsl(var(--hue), 0%, 75%);
    --border-color-lowlight: hsl(var(--hue), 19%, 17%);
    --border-color-superlowlight: hsl(var(--special2-hue), 4%, 50%);
    --border-color-highlight: hsl(var(--hue), 0%, 75%);
    --scrollbar-thumb: hsl(var(--hue), 13%, 73%);
    --box-shadow-color: hsla(var(--black), 0%, 0%, 0.3);
    --separator: hsl(var(--hue), 7%, 65%);
}