:root {
  --foreground: 0deg 0% 90%;

  --primary-main: 220deg 75% 75%;
  --primary-light: 220deg 85% 85%;

  --primary-background-main: 220deg 50% 40%;
  --primary-background-light: 220deg 40% 50%;
  --primary-background-contrast: 220deg 100% 100%;

  --secondary-dark: 0deg 0% 65%;
  --secondary-main: 0deg 0% 75%;
  --secondary-light: 0deg 0% 85%;

  --error-main: 0deg 75% 75%;
  --warning-main: 30deg 90% 75%;

  --error-background-main: 0deg 50% 40%;
  --error-background-light: 0deg 40% 50%;
  --error-background-contrast: 0deg 100% 100%;

  --warning-background-main: 30deg 50% 40%;
  --warning-background-light: 30deg 40% 50%;
  --warning-background-contrast: 30deg 100% 100%;

  --luminosity: 75%;
  --color-scheme: dark;

  .icon {
    mix-blend-mode: screen;
    opacity: 0.9;
    width: 7ch;
  }

  --red: 0deg 75% 75%;
  --orange: 25deg 75% 75%;
  --yellow: 50deg 75% 75%;
  --green: 90deg 75% 75%;
  --blue: 230deg 75% 75%;
  --purple: 260deg 75% 75%;

  --background-50: hsl(230deg 5% 7%);
  --background-100: hsl(230deg 5% 10%);
  --background-200: hsl(230deg 5% 12%);
  --background-300: hsl(230deg 5% 15%);
  --background-400: hsl(230deg 5% 17%);
  --background-500: hsl(230deg 5% 20%);
  --background-600: hsl(230deg 5% 25%);
}