:root {
  --black: #222;
  --white: rgb(var(--white-rgb), var(--white-transparancy,1));
  --white-rgb: var(--white-rgb-var);
  --white-rgb-var: 248, 249, 250;
  --bright-grey: 240, 242, 245;
  --less-bright-grey: 232, 234, 238;
  --grey: 213, 217, 222;
  --dark-grey: 159, 163, 168;
  --dim-grey: 91, 92, 94;
  --black-grey: 11, 12, 12;
  --black-grey-alt: 24, 25, 25;
  --transparent-black: #05060722;
  --default-button-color: royalblue;
  --default-button-color-rgb: 65, 105, 225;
  --primary-bg-rgb: 231 240 255;
  --error: #e14141;
  --error-light: #e7aaaa;
  --real-white-rgb-var: 255, 255, 255;
  --real-black-rgb-var: 0, 0, 0;
  --real-white: rgb(var(--real-white-rgb-var));
  --real-black: rgb(var(--real-black-rgb-var));
  --real-white-rgb: var(--real-white-rgb-var);
  --real-black-rgb: var(--real-black-rgb-var);
  --background: var(--real-white);
  --svelte-text: #4a4a55;
  --header-height: 80px;
}
html[data-theme="dark"] {
  --black: #eee;
  --white-rgb: 15, 16, 17;
  --transparent-black: rgba(250, 251, 252, 0.133);
  --bright-grey: 28, 29, 31;
  --less-bright-grey: var(--black-grey-alt);
  --grey: 91, 95, 99;
  --dark-grey: 100, 103, 108;
  --dim-grey: 149, 151, 153;
  --real-white-rgb: var(--real-black-rgb-var);
  --real-black-rgb: var(--real-white-rgb-var);
  --real-white: rgb(var(--real-black-rgb-var));
  --real-black: rgb(var(--real-white-rgb-var));
  --background: rgb(var(--black-grey));
  --svelte-text: lab(88.83% 2.55 -6.5);
  --primary-bg-rgb: 28 34 43;
}

@media (prefers-color-scheme: dark) {
  :root {
      --black: #eee;
      --white-rgb-var: 15, 16, 17;
      --transparent-black: rgba(250, 251, 252, 0.133);
      --bright-grey: 28, 29, 31;
      --less-bright-grey: var(--black-grey-alt);
      --grey: 91, 95, 99;
      --dark-grey: 100, 103, 108;
      --dim-grey: 149, 151, 153;
      --real-white-rgb: var(--real-black-rgb-var);
      --real-black-rgb: var(--real-white-rgb-var);
      --real-white: rgb(var(--real-black-rgb-var));
      --real-black: rgb(var(--real-white-rgb-var));
      --background: rgb(var(--black-grey));
      --svelte-text: lab(88.83% 2.55 -6.5);
      --primary-bg-rgb: 28 34 43;
  }
  html[data-theme="light"] {
      --black: #222;
      --white-rgb-var: 248, 249, 250;
      --bright-grey: 240, 242, 245;
      --less-bright-grey: 232, 234, 238;
      --grey: 213, 217, 222;
      --dark-grey: 159, 163, 168;
      --dim-grey: 91, 92, 94;
      --transparent-black: #05060722;
      --real-white-rgb: var(--real-white-rgb-var);
      --real-black-rgb: var(--real-black-rgb-var);
      --real-white: rgb(var(--real-white-rgb-var));
      --real-black: rgb(var(--real-black-rgb-var));
      --background: var(--real-white);
      --svelte-text: #4a4a55;
      --primary-bg-rgb: 231 240 255;
  }
}