body {
  --color-blue: hsl(259, 82%, 26%);
  --color-blue-dark: hsl(259, 82%, 10%);
  --color-lavender: hsl(273, 43%, 65%);
  --color-mauve: hsl(286, 73%, 81%);

  --color-grey: hsl(44, 7%, 41%);
  --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
  --color-grey-light: hsl(42, 7%, 72%);

  --color-red: hsl(7, 100%, 56%);
  --color-red-light: hsl(7, 100%, 61%);
  --color-red-lighter: hsl(7, 100%, 68%);
  --color-red-dark: hsl(7, 100%, 48%);
  --color-red-desat: hsl(7, 20%, 56%);
  --color-red-desat-dark: hsl(7, 20%, 30%);
  --color-red-desat-desat: hsl(7, 8%, 56%);

  --color-text: var(--color-blue);
  --color-border: var(--color-grey);
  --color-link: var(--color-mauve);
  --color-link-visited: var(--color-lavender);
  --color-bg: var(--color-grey-light);
  --color-button: var(--color-red-light);
  --color-button-shadow: var(--color-red-desat-dark);
  --color-button-hover: var(--color-red);
  --color-button-deactivated: var(--color-red-desat-desat);
  --color-button-text: var(--color-blue-dark);

  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
}

a {
  color: var(--color-link);
}
a:visited {
  color: var(--color-link-visited);
}

@media (prefers-color-scheme: dark) {
  body {
    --color-text: var(--color-grey-light);
    --color-border: var(--color-grey-light);
    --color-link: var(--color-mauve);
    --color-link-visited: var(--color-lavender);
    --color-bg: var(--color-blue);
    --color-button: var(--color-red-light);
    --color-button-shadow: var(--color-red-desat);
    --color-button-hover: var(--color-red);
    --color-button-deactivated: var(--color-red-desat-desat);
    --color-button-text: var(--color-blue-dark);
  }
}