html {
  /* base COLORS -------------------------------- */
  /* --------------------------------
  color PRIMARY & VARIANTS -------------------------------- */
  --color-primary: rgba(47, 55, 74, 1);
  --color-primary-light: rgba(67, 78, 105, 1);
  --color-primary-lighter: rgba(248, 249, 250, 1);
  --color-primary-dark: rgba(27, 32, 43, 1);

  /* --------------------------------
  color SECONDARY & VARIANTS -------------------------------- */
  --color-secondary: rgba(249, 199, 44, 1);
  --color-secondary-light: rgba(250, 212, 94, 1);
  --color-secondary-lighter: rgba(255, 252, 242, 1);
  --color-secondary-dark: rgba(235, 180, 7, 1);

  /* --------------------------------
  colors GREY SHADES -------------------------------- */
  --color-white: rgba(255, 255, 255, 1);
  --color-silver: rgba(216, 216, 216, 1);
  --color-silver-light: rgba(247, 247, 247, 1);
  --color-silver-dark: rgba(190, 190, 190, 1);
  --color-granite: rgba(96, 96, 96, 1);
  --color-granite-light: rgba(122, 122, 122, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-black-lighter: rgba(0, 0, 0, 0.1);

  /* --------------------------------
  color SUCCESS & VARIANTS -------------------------------- */
  --color-success: rgba(0, 175, 80, 1);
  --color-success-light: rgba(0, 200, 92, 1);
  --color-success-lighter: rgba(226, 255, 239, 1);
  --color-success-dark: rgba(0, 149, 68, 1);

  /* --------------------------------
  color WARNING & VARIANTS -------------------------------- */
  --color-warning: rgba(255, 145, 0, 1);
  --color-warning-light: rgba(255, 167, 51, 1);
  --color-warning-lighter: rgba(255, 233, 204, 1);
  --color-warning-dark: rgba(204, 116, 0, 1);

  /* --------------------------------
  color HIGH & VARIANTS -------------------------------- */
  --color-high: rgba(255, 61, 30, 1);
  --color-high-light: rgba(255, 104, 81, 1);
  --color-high-lighter: rgba(255, 237, 234, 1);
  --color-high-dark: rgba(234, 31, 0, 1);

  /* --------------------------------
  color NEUTRAL & VARIANTS -------------------------------- */
  --color-neutral: rgba(32, 93, 189, 1);
  --color-neutral-light: rgba(51, 117, 221, 1);
  --color-neutral-lighter: rgba(240, 245, 255, 1);
  --color-neutral-dark: rgba(25, 72, 145, 1);

  /* --------------------------------
  color TEXT -------------------------------- */
  --color-text: rgba(47, 55, 74, 1);

  /* base FONT SIZE -------------------------------- */
  --font-size: 14px;

  /* base BOX-SHADOW -------------------------------- */
  --box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  --box-shadow-dark: 0 2px 10px 0 rgba(0, 0, 0, 0.3);

  /* base BORDER RADIUS -------------------------------- */
  --border-radius-tiny: 3px;

  /* base SPACING UNIT -------------------------------- */
  --spacing-unit: 12px;
  --size-btn-options: 45px;

  /* base FONTS -------------------------------- */
  --primary-font: "roboto", sans-serif;
}