:root {
  --alert-error: #dd4132;
  --alert-info: #008dd5;
  --alert-success: #087004;
  --color-orange: #ff8800;
  --color-black: #222222;
  --color-white: #f7f7f7;
  --color-light: #cfcfcf;
  --color-dark: #3b3b3b;
  --color-overlay: rgba(255, 255, 255, 0.12);
  --color-dark-overlay: rgba(0, 0, 0, 0.12);
  --theme-color-1: #373F51;
  --theme-color-2: #008dd5;
  --theme-color-3: #ffa400;
  --theme-color-4: #5bc8af;
  --theme-color-5: #a77e58;
}

html[data-theme='dark'] {
  --hover-overlay: rgba(255, 255, 255, 0.04);
  --color-blue: #2ab8ff;
  --color-red: #ff3b4d;
  --background-color: #222222;
  --text-color: #f7f7f7;
  --link-color: #2ab8ff;
  --grey-50: #f7f7f7;
  --grey-100: #e1e1e1;
  --grey-200: #cfcfcf;
  --grey-300: #b1b1b1;
  --grey-400: #9e9e9e;
  --grey-500: #7e7e7e;
  --grey-600: #626262;
  --grey-700: #515151;
  --grey-800: #3b3b3b;
  --grey-900: #222222;
}

html[data-theme='light'] {
  --hover-overlay: rgba(0, 0, 0, 0.04);
  --color-blue: #0076b3;
  --color-red: #ad0011;
  --background-color: #f7f7f7;
  --text-color: #222222;
  --link-color: ##0076b3;
  --grey-900: #f7f7f7;
  --grey-800: #e1e1e1;
  --grey-700: #cfcfcf;
  --grey-600: #b1b1b1;
  --grey-500: #9e9e9e;
  --grey-400: #7e7e7e;
  --grey-300: #626262;
  --grey-200: #515151;
  --grey-100: #3b3b3b;
  --grey-50: #222222;
}