$black: #202225;
$dark-grey-lightest: #5e6169;
$dark-grey-lighter: #4e5159;
$dark-grey-lightmore: #46494f;
$dark-grey-light: #3d4048;
$dark-grey: #25282e;
$dark-grey-2: #36393f;
$dark-grey-strong: #222427;
$dark-grey-stronger: #121417;
$purple-grey: #4a4a6f;
$white-grey: #eee;
$white-grey-light: #f9f9f9;
$white: #fefefe;
$light-grey-light: #ddd;
$light-grey: #ccc;
$mid-grey: #56595f;
$orange: #f57f77;
$orange-carrot: #e67e22;
$orange-light: #ffeaea;
$grey: #999;
$grey-strong: #666;
$green: #00b242;
$dark-green: #008732;
$light-green: #67be4b;
$light-green-light: #ccffcc;
$light-green-lightest: #f0fff0;
$red: #ff3860;
$dark-red: #da002c;
$pink-light: #ffc9d0;
$pink: #ff69c0;
$pink-strong: #ff49a0;
$light-purple: #f1e4ff;
$purple: #cfd1ff;
$purple-strong: #8f91eb;
$dark-purple: #5e60ba;
$dark-purple-strong: #4a4a6f;
$blue-light: #92a9fa;
$blue: #7289da;

:root {
  --background: #ffffff;
  --background-page: #f6f6f6;
  --background-alt: #f6f6f6;
  --background-rgb: 255, 255, 255;
  --background-alt-rgb: 246, 246, 246;
  --background-hover: #e1e4ff;
  --background-hover-rgb: 240, 255, 240;
  --background-tag: #eee;
  --background-tag-button: #f9f9f9;
  --background-selectable: #e1e4ff;
  --background-selectable-selectable: #cfd1ff;
  --background-selected: #cfd1ff;
  --border: #dbdbdb;
  --border-rgb: 219, 219, 219;
  --border-alt: #dbdbdb;
  --box-shadow: #ddd;
  --text: #7a7a7a;
  --text-strong: $black;
  --poster-color: #000;
  --vdp-bg-color: var(--background);
  --vdp-hover-bg-color: var(--background-selectable);
  --vdp-selected-bg-color: var(--background-selected);
  --vdp-heading-hover-color: var(--background-selectable);
  --vdp-hover-color: var(--text);
  --vdp-selected-color: var(--text);
  --vdp-text-color: var(--text);
  --vdp-box-shadow: 0 4px 10px 0 rgba(128, 144, 160, 0.1), 0 0 1px 0 rgba(128, 144, 160, 0.81)
  --vdp-heading-size: 2.5em;
  --vdp-elem-font-size: 1em;
  --slider-connect-bg: #00b242;
  --slider-tooltip-bg: #00b242;
}

.dark {
  --background: #36393f;
  --background-page: #36393f;
  --background-rgb: 54, 57, 63;
  --background-alt: #46494f;
  --background-alt-rgb: 70, 73, 79;
  --background-hover: #5e6169;
  --background-hover-rgb: 94, 97, 105;
  --background-tag: #36393f;
  --background-tag-button: #4e5159;
  --background-selectable: #7e80ca;
  --background-selectable-selectable: #878b97;
  --background-selected: #5e60ba;
  --border: #25282e;
  --border-rgb: 37, 40, 46;
  --border-alt: #666666;
  --box-shadow: #2226;
  --text: #eeeeee;
  --text-strong: #fefefe;
  --vdp-bg-color: var(--background);
  --vdp-hover-bg-color: var(--background-selectable);
  --vdp-selected-bg-color: var(--background-selected);
  --vdp-heading-hover-color: var(--background-selectable);
  --vdp-hover-color: var(--text);
  --vdp-selected-color: var(--text);
  --vdp-text-color: var(--text);
  --slider-connect-bg: #008732;
  --slider-tooltip-bg: #008732;
}
