// Text Colors
.color-primary {
  color: $accent-1 !important;
}

.color-sec {
  color: $accent-2 !important;
}

.color-ter {
  color: $accent-3 !important;
}

.color-quad {
  color: $accent-4 !important;
}

.black {
  color: $black !important;
}

.medium-black {
  color: $medium-black !important;
}

.light-black {
  color: $light-black !important;
}

.dark-gray {
  color: $dark-gray !important;
}

.light-gray {
  color: $light-gray !important;
}

.lightest-gray {
  color: $lightest-gray !important;
}

.white {
  color: $white !important;
}

// Background Colors
.bg-primary {
  background: $accent-1 !important;
}

.bg-sec {
  background: $accent-2 !important;
}

.bg-ter {
  background: $accent-3 !important;
}

.bg-quad {
  background: $accent-4 !important;
}

.bg-black {
  background: $black !important;
}

.bg-medium-black {
  background: $medium-black !important;
}

.bg-light-black {
  background: $light-black !important;
}

.bg-dark-gray {
  background: $dark-gray !important;
}

.bg-light-gray {
  background: $light-gray !important;
}

.bg-lightest-gray {
  background: $lightest-gray !important;
}

.bg-white {
  background: $white !important;
}

// ------------- Font Weight -------------- //

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.font-primary {
  font-family: $font-primary;
}

.font-sec {
  font-family: $font-sec;
}

// ------------- Border Radius -------------- //

.br-4 {
  border-radius: $br-4;
}

.br-8 {
  border-radius: $br-8;
}

.br-10 {
  border-radius: $br-10;
}

.br-12 {
  border-radius: $br-12;
}

.br-14 {
  border-radius: $br-14;
}

.br-16 {
  border-radius: $br-16;
}

.br-18 {
  border-radius: $br-18;
}

.br-20 {
  border-radius: $br-20;
}

.br-24 {
  border-radius: $br-24;
}

.br-32 {
  border-radius: $br-32;
}

.br-48 {
  border-radius: $br-48;
}

// ------------- Gap -------------- //

.gap-4 {
  gap: $gap-4 !important;
}

.gap-6 {
  gap: $gap-6
}

.gap-8 {
  gap: $gap-8;
}

.gap-10 {
  gap: $gap-10;
}

.gap-12 {
  gap: $gap-12;
}

.gap-14 {
  gap: $gap-14;
}

.gap-16 {
  gap: $gap-16;
}

.gap-18 {
  gap: $gap-18;
}

.gap-20 {
  gap: $gap-20;
}

.gap-24 {
  gap: $gap-24;
}

.gap-32 {
  gap: $gap-32;
}

.gap-38 {
  gap: $gap-38;
}

.gap-48 {
  gap: $gap-48;
}

.gap-64 {
  gap: $gap-64;
}