:root {
  --color-white: #FFF;
  --color-off-white: #F3F6F9;

  --color-black: #000000;
  --color-gray: #4E5A66;
  --color-gray-dark: #06172A;
  --color-gray-light: #8B9AA8;
  --color-gray-lighter: #a7b3bd;
  --color-gray-lightest: #d4d9df;

  --color-blue-light: #54a1f3;
  --color-blue-lighter: #92BCEA;
  --color-blue-lightest: #E4ECF2;

  --color-primary: #0F70D7;
  --color-success: #008081;
  --color-danger: #DF2721;
  --color-warning: purple;

  --color-background: var(--color-gray-dark);

  --color-text: var(--color-gray);
  --color-heading: var(--color-gray-dark);

  --color-link: var(--color-primary);
  --color-link-hover: #2687ef;

  --color-gray-label: var(--color-gray);

  --color-transparent: #ff000000;
}