:root {
  /* brand colors */
  --brand-primary: #53ba00;
  --brand-primary-rgb: 83, 186, 0;
  --brand-primary-dark: #387d00;
  --brand-primary-opaque: rgba(var(--brand-primary-rgb), 0.5);

  --brand-primary-variation-1: #a6e72a;
  --brand-primary-variation-2: #008d4c;
  --brand-primary-variation-3: #75c043;

  /* indicators */
  --success: #75c043;
  --error: #e73d4a;

  /* named colors */
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --black-op: #000000;
  --darker-grey: #1d1d1d;
  --dark-grey: #333333;
  --blueish-dark-grey: #1e2833;
  --blueish-dark-grey-rgb: 30, 40, 51;
  --blueish-grey: #323c47;
  --blueish-grey-rgb: 50, 60, 71;
  --grey: #797979;
  --grey-rgb: 121, 121, 121;
  --light-grey: #ccc;
  --light-grey-rgb: 204, 204, 204;
  --lighter-grey: #f3f3f3;
  --lighter-grey-rgb: 243, 243, 243;
  --white: #ffffff;
  --white-rgb: 255, 255, 255;
  --red: #ee3311;
  --red-rgb: 238, 51, 17;
  --orangered: #f24a2c;
  --orange: #f39c12;
  --dark-orange: #eb6900;
  --yellow: #eedd33;
  --yellow-rgb: 238, 221, 51;
  --green: #5cd03b;
  --green-rgb: 92, 208, 59;
  --lime: #bff693;
  --greyish-lightgreen: #c8ffc8;
  --lighter-green: #f4f9f6;
  --light-green: #cdf1c2;
  --blueish-white: #ccd6de;
  --grayish-lightblue: #acbad4;
  --grayish-blue: #8d9bb6;
  --greyish-turquoise: #4db3a2;
  --lightblue: #4bbaff;
  --lightblue-variant: #118bd7;
  --blue: #3366cc;
  --blue-rgb: 51, 102, 204;
}