:root {
  --blue: #5079d9;
  --blue-light: color-mod(var(--blue) tint(15%));
  --blue-lighter: color-mod(var(--blue) tint(20%));
  --blue-lightest: color-mod(var(--blue) tint(30%));
  --blue-dark: color-mod(var(--blue) shade(15%));
  --blue-alpha-15: color-mod(var(--blue) alpha(15%));
  --blue-alpha-20: color-mod(var(--blue) alpha(20%));
  --green: #8abf43;
  --green-light: color-mod(var(--green) tint(15%));
  --green-lighter: color-mod(var(--green) tint(20%));
  --green-lightest: color-mod(var(--green) tint(30%));
  --green-dark: color-mod(var(--green) shade(15%));
  --green-alpha-1: color-mod(var(--green) alpha(10%));
  --green-alpha-2: color-mod(var(--green) alpha(20%));;
  --orange: #ff9d4b;
  --orange-light: color-mod(var(--orange) tint(15%));
  --orange-lighter: color-mod(var(--orange) tint(20%));
  --orange-lightest: color-mod(var(--orange) tint(30%));
  --orange-dark: color-mod(var(--orange) shade(15%));
  --orange-alpha-15: color-mod(var(--orange) alpha(15%));
  --orange-alpha-2: color-mod(var(--orange) alpha(20%));
  --red: #d44d44;
  --red-light: color-mod(var(--red) tint(15%));
  --red-lighter: color-mod(var(--red) tint(20%));
  --red-lightest: color-mod(var(--red) tint(30%));
  --red-dark: color-mod(var(--red) shade(15%));
  --red-alpha-1: color-mod(var(--red) alpha(10%));
  --red-alpha-2: color-mod(var(--red) alpha(20%));
  --grey: #bfbfbf;
  --grey-light: #d2d2d2;
  --grey-lighter: #ececec;
  --grey-lightest: #f7f7f7;
  --grey-dark: #b1b1b1;
  --black: #2c405a;
  --black-light: #6b798c;
  --black-dark: #213248;

  --primary-color: var(--blue);
  --primary-light: var(--blue-light);
  --primary-lighter: var(--blue-lighter);
  --primary-lightest: var(--blue-lightest);
  --primary-dark: var(--blue-dark);
  --primary-alpha-15: var(--blue-alpha-15);
  --primary-alpha-20: var(--blue-alpha-20);

  --success-color: var(--green);
  --success-light: var(--green-light);
  --success-lighter: var(--green-lighter);
  --success-lightest: var(--green-lightest);
  --success-dark: var(--green-dark);
  --success-alpha-1: var(--green-alpha-1);
  --success-alpha-2: var(--green-alpha-2);

  --warning-color: var(--orange);
  --warning-light: var(--orange-light);
  --warning-lighter: var(--orange-lighter);
  --warning-lightest: var(--orange-lightest);
  --warning-dark: var(--orange-dark);
  --warning-alpha-1: var(--orange-alpha-1);
  --warning-alpha-2: var(--orange-alpha-2);

  --error-color: var(--red);
  --error-light: var(--red-light);
  --error-lighter: var(--red-lighter);
  --error-lightest: var(--red-lightest);
  --error-dark: var(--red-dark);
  --error-alpha-1: var(--red-alpha-1);
  --error-alpha-2: var(--red-alpha-2);

  --inactive-color: #b0bec5;

  --text-color: #444;
  --text-dark: #222;
  --text-light: #888;
  --text-lighter: #bbb;

  --border-color: #c0c0c0;
  --border-light: #d4d4d4;
  --border-lighter: #dddddd;
  --border-lightest: #e7e7e7;
  --border-dark: #acacac;

  --background-color: #fafafa;
  --background-dark: #f5f5f5;
}