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

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

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

.color-quant {
  color: $accent-4;
}

.color-quin {
  color: $accent-5;
}

.color-sen {
  color: $accent-6;
}

.color-sept {
  color: $accent-7;
}

.color-octo {
  color: $accent-8;
}

.dark-black {
  color: $black;
}

.black {
  color: $black;
}

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

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

.white {
  color: $white !important;
}

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

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

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

.black-hover{
  color: $black;
  transition: $transition;
  &:hover{
    color: $accent-1;
    transition: $transition;
  }
}
// Background Colors
.bg-primary {
  background: $accent-1;
}

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

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

.bg-quant {
  background: $accent-4;
}

.bg-quin {
  background: $accent-5;
}

.bg-sen {
  background: $accent-6;
}

.bg-sept {
  background: $accent-7;
}

.bg-octo {
  background: $accent-8;
}

.bg-dark-black {
  background: $black;
}

.bg-black {
  background: $black;
}

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

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

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

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

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

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

.box-shadow-1 {
  box-shadow: $box-shadow-1;
}

// ------------- Font Weight -------------- //
.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;
}

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

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

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

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

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

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

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

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


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

.gap-4p{
  $gap-4: clamp(2px, 0.208vw, 8px);
}
.gap-8{
  $gap-8: clamp(4px, 0.417vw, 16px);
}
.gap-10{
  $gap-10: clamp(5px, 0.521vw, 20px);
}
.gap-12{
  $gap-12: clamp(8px, 0.625vw, 24px);
}
.gap-14{
  $gap-14: clamp(10px, 0.729vw, 28px);
}
.gap-16{
  $gap-16: clamp(12px, 0.833vw, 32px);
}
.gap-18{
  $gap-18: clamp(14px, 0.938vw, 36px);
}
.gap-20{
  $gap-20: clamp(16px, 1.042vw, 40px);
}
.gap-24{
  $gap-24: clamp(18px, 1.25vw, 48px);
}
.gap-32{
  $gap-32: clamp(24px, 1.667vw, 64px);
}
.gap-38{
  $gap-38: clamp(28px, 1.979vw, 76px);
}
.gap-48{
  $gap-48: clamp(10px, 2.5vw, 28px);
}
.gap-64{
  $gap-64: clamp(48px, 3.333vw, 128px);
}

.cursor-pointer {
  cursor: pointer;
}