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

$white: #FFFFFF;
$blue: #01788E;
$red: #C93047;
$light-blue: #FAFCFD;
$dark-blue: #004D61;

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

$warning: #FF73C0;
$watch: #F096AD;
$growth: #E0BA9A;
$approval: #D0DD86;
$ideal: #C0FF73;

.color-red {
  color: $red;
}

.color-black {
  color: $black;
}

.color-white {
  color: $white;
}

.color-blue {
  color: $blue;
}

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

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

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

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

.fill-black {
  fill: $black;
}

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

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

.bg-watch {
  background-color: $watch;
}
.bg-growth {
  background-color: $growth;
}
.bg-approval {
  background-color: $approval;
}
.bg-ideal {
  background-color: $ideal;
}
.fill-warning {
  fill: $warning;
}

.fill-watch {
  fill: $watch;
}

.fill-growth {
  fill: $growth;
}

.fill-approval {
  fill: $approval;
}

.fill-ideal {
  fill: $ideal;
}

.stroke-black {
  stroke: $black;
}

.stroke-gray-1 {
  stroke: $gray-1;
}

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