:root {
  --grey: #757575;
  --black: #000;
  --grey-dark: rgba(0, 0, 0, 0.1);
  --light-grey: #f6f6f6;
  --white: #fff;
  --grey-darker: #5b6677;
  --pink: #d55f5a;
  --another-pink: #cc8889;
  --blue-dark: #161a23;
  --white-dark: rgba(128, 128, 128, 0.1);
  --white-lighter: rgba(255, 255, 255, 0.5);
  --white-light: rgba(255, 255, 255, 0.8);
  --blue: #2d2f39;
}

@media (prefers-color-scheme: light) {
  :root {
    --main-background-color: var(--grey-darker);
    --submenu-background-color: var(--white);
    --main-font-color: var(--grey);
    --panel-background: var(--white);
    --border-color: var(--grey-dark);
    --divider-color: var(--light-grey);
    --accent: var(--black);
    --exit-color: var(--pink);
    --tooltip-background-color: var(--black);
    --tooltip-text-color: var(--white);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-background-color: var(--black);
    --submenu-background-color: var(--blue-dark);
    --main-font-color: var(--white-lighter);
    --panel-background: var(--blue-dark);
    --border-color: var(--white-dark);
    --divider-color: var(--blue);
    --accent: var(--white-light);
    --exit-color: var(--another-pink);
    --tooltip-background-color: var(--blue);
    --tooltip-text-color: var(--white-light);
  }
}