$black: #3E3A38;
$gray-1: #595959;
$gray-2: #CECECE;
$gray-3: #F3F3F3;

$primary: #0B8D9C;
$primary-lighter:  lighten($primary, 30%);
$primary-dark: darken($primary, 15%);
$primary-darker: darken($primary, 30%);

$secondary: #C93148; 
$secondary-lighter: darken($secondary, 30%);
$secondary-dark: darken($secondary, 15%);
$secondary-darker: darken($secondary, 30%);

$white: #FFFFFF;

$blue: #01788E;
$light-blue: #FAFCFD;
$dark-blue: #1d2742;

$red: #C93047;
$dark-red: #920020;

$gold: #FFC857;
$light-gold: #FFFAEE;

$purple: #49416D;
$light-purple: #EDECF0;

$teal: #00B0B3;
$lime: #B2D236;

$warning: $gold;
$watch: $gold;
$growth: $gold;
$approval: $purple;
$ideal: $purple;

.color-primary {
  color: $primary;
}

.color-primary-lighter {
  color: $primary-lighter;
}

.color-primary-darker {
  color: $primary-darker;
}
.color-secondary {
  color: $secondary;
}

.color-secondary-lighter {
  color: $secondary-lighter;
}

.color-secondary-darker {
  color: $secondary-darker;
}
.color-red {
  color: $red;
}

.color-black {
  color: $black;
}

.color-white {
  color: $white;
}

.color-blue {
  color: $blue;
}

.color-dark-blue {
  color: $dark-blue;
}

.color-lime {
  color: $lime;
}

.color-teal {
  color: $teal;
}

.color-gray-2 {
  color: $gray-2;
}

.bg-color-primary {
  background-color: $primary;
}

.bg-color-primary-lighter {
  background-color: $primary-lighter;
}

.bg-color-primary-darker {
  background-color: $primary-darker;
}

.bg-color-secondary {
  background-color: $secondary;
}

.bg-color-secondary-lighter {
  background-color: $secondary-lighter;
}

.bg-color-secondary-darker {
  background-color: $secondary-darker;
}

.bg-color-light-blue {
  background-color: $light-blue;
}

.bg-color-blue {
  background-color: $blue;
}

.bg-dark-blue {
background-color: $dark-blue;
}

.bg-color-purple {
  background-color: $purple;
}

.bg-color-light-purple {
  background-color: $light-purple;
}

.bg-color-gold {
  background-color: $gold;
}

.bg-color-light-gold {
  background-color: $light-gold;
}

.bg-color-lime {
  color: $lime;
}

.bg-color-teal {
  color: $teal;
}

.bg-color-white {
  background-color: $white;
}

.bg-color-gray-2 {
  background-color: $gray-2;
}

.bg-color-gray-3 {
  background-color: $gray-3;
}

.fill-black {
  fill: $black;
}

.bg-gray {
  background-color: $gray-3;
}
