:root {
  --color-black: #000;
  --color-black-opacity-88: rgba(0, 0, 0, .88);
  --color-black-opacity-64: rgba(0, 0, 0, .64);
  --color-black-opacity-40: rgba(0, 0, 0, .4);
  --color-black-opacity-20: rgba(0, 0, 0, .2);

  --color-white: #fff;
  --color-white-opacity-88: rgba(255, 255, 255, .88);
  --color-white-opacity-64: rgba(255, 255, 255, .64);
  --color-white-opacity-40: rgba(255, 255, 255, .4);

  --color-coral: #f55;
  --color-coral-64: #ff8383;
  --color-coral-40: #fbb;
  --color-coral-11: #fee;
  --color-coral-6: #fff6f6;


  --color-accent: #4859E3;
  --color-accent-64: #4859E3;
  --color-accent-40: #4859E3;
  --color-accent-11: #4859E3;
  --color-accent-6: #4859E3;

  --color-grey: #1f1f1f;
  --color-grey-64: #5c5c5c;
  --color-grey-40: #999;
  --color-grey-11: #e5e5e5;
  --color-grey-6: #f2f2f2;

  --color-yellow: #fc5;
  --color-yellow-64: #ffda83;
  --color-yellow-40: #ffe8b1;
  --color-yellow-11: #fff9ee;
  --color-yellow-6: #fffcf6;

  --color-green-11: #e7f3ec;
  --color-green-6: #f3f9f5;

  --color-lime: #4c4;
  --color-lime-64: #77da77;
  --color-lime-40: #a9e8a9;
  --color-lime-11: #ecf9ec;
  --color-lime-6: #f5fcf5;

  /* colors below are deprecated */
  --color-primary: var(--color-accent);
  --color-primary-hover: #f66;
  --color-primary-shadow: #c33;

  --color-secondary: #567;
  --color-secondary-hover: #9ab;

  --color-special-divider: #bcd;

  --color-text-main: #124;
  --color-text-hover: #556;
  --color-text-shadow: #113;
  --color-text-invert: var(--color-white);

  --color-utility-failure-light: #fdd;
  --color-utility-help: var(--color-special-divider);
  --color-utility-help-light: #f0f4f7;
  --color-utility-warning: var(--color-yellow);
  --color-utility-warning-light: #fec;
  --color-utility-success: var(--color-lime);
  --color-utility-success-light: #dfd;

  --color-default-page-bg: #f8f8f8;
  --color-light-bg: var(--color-white);
  --color-translucent-bg: rgba(var(--color-text-main), .6);
}