:root {
  --color-primary: #82c7ff;
  --color-secondary: orange;
  --color-tertiary: blueviolet;
  --color-link-visited: #9ea2ff;
  --color-text: var(--color-white);
  --color-text-alt: #2b2b2b;
  --color-bg: var(--color-white);
  --color-bg-alt: #efefef;

  --color-white: #fff;
  --color-grey: #b9b9b9;
  --color-black: #111;
  --color-black-deep: #000;
  --color-black-light: #222;

  --color-green: mediumseagreen;
  --color-red: indianred;
  --color-orange: darkorange;
  --color-blue: deepskyblue;

  --transparent-background: rgb(from var(--color-bg) r g b / 0.5);
  --transparent-background-dark: rgb(from var(--color-bg) r g b / 0.75);
  --transparent-background-darker: rgb(from var(--color-bg) r g b / 0.9);
  --transparent-text: rgb(from var(--color-text) r g b / 0.5);
  --transparent-primary: rgb(from var(--color-primary) r g b / 0.5);
  --gradient: linear-gradient(20deg, var(--color-primary), var(--color-tertiary));
  --gradient-reverse: linear-gradient(200deg, var(--color-primary), var(--color-tertiary));
  --border-radius: 5px;
  --border-radius-lg: 8px;
  --backdrop-blur: blur(8px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-black);
    --color-bg-alt: var(--color-black-light);
    --color-text: var(--color-white);
    --color-text-alt: var(--color-grey);
  }
}