/* Base background color classes */
.bg-red {
  background-color: hsl(0, 100%, 50%);
}
.bg-red-light {
  background-color: hsl(0, 100%, 75%);
}
.bg-red-dark {
  background-color: hsl(0, 100%, 25%);
}

.bg-blue {
  background-color: hsl(240, 100%, 50%);
}
.bg-blue-light {
  background-color: hsl(240, 100%, 75%);
}
.bg-blue-dark {
  background-color: hsl(240, 100%, 25%);
}

.bg-green {
  background-color: hsl(120, 100%, 50%);
}
.bg-green-light {
  background-color: hsl(120, 100%, 75%);
}
.bg-green-dark {
  background-color: hsl(120, 100%, 25%);
}

.bg-yellow {
  background-color: hsl(60, 100%, 50%);
}
.bg-yellow-light {
  background-color: hsl(60, 100%, 75%);
}
.bg-yellow-dark {
  background-color: hsl(60, 100%, 25%);
}

.bg-purple {
  background-color: hsl(300, 100%, 50%);
}
.bg-purple-light {
  background-color: hsl(300, 100%, 75%);
}
.bg-purple-dark {
  background-color: hsl(300, 100%, 25%);
}

.bg-orange {
  background-color: hsl(30, 100%, 50%);
}
.bg-orange-light {
  background-color: hsl(30, 100%, 75%);
}
.bg-orange-dark {
  background-color: hsl(30, 100%, 25%);
}

.bg-pink {
  background-color: hsl(330, 100%, 50%);
}
.bg-pink-light {
  background-color: hsl(330, 100%, 75%);
}
.bg-pink-dark {
  background-color: hsl(330, 100%, 25%);
}

.bg-teal {
  background-color: hsl(180, 100%, 50%);
}
.bg-teal-light {
  background-color: hsl(180, 100%, 75%);
}
.bg-teal-dark {
  background-color: hsl(180, 100%, 25%);
}

.bg-gray {
  background-color: hsl(0, 0%, 50%);
}
.bg-gray-light {
  background-color: hsl(0, 0%, 75%);
}
.bg-gray-dark {
  background-color: hsl(0, 0%, 25%);
}

.bg-cyan {
  background-color: hsl(180, 100%, 40%);
}
.bg-cyan-light {
  background-color: hsl(180, 100%, 65%);
}
.bg-cyan-dark {
  background-color: hsl(180, 100%, 20%);
}

.bg-magenta {
  background-color: hsl(300, 100%, 40%);
}
.bg-magenta-light {
  background-color: hsl(300, 100%, 65%);
}
.bg-magenta-dark {
  background-color: hsl(300, 100%, 20%);
}

.bg-lime {
  background-color: hsl(90, 100%, 50%);
}
.bg-lime-light {
  background-color: hsl(90, 100%, 75%);
}
.bg-lime-dark {
  background-color: hsl(90, 100%, 25%);
}

.bg-indigo {
  background-color: hsl(270, 100%, 50%);
}
.bg-indigo-light {
  background-color: hsl(270, 100%, 75%);
}
.bg-indigo-dark {
  background-color: hsl(270, 100%, 25%);
}

.bg-violet {
  background-color: hsl(280, 100%, 50%);
}
.bg-violet-light {
  background-color: hsl(280, 100%, 75%);
}
.bg-violet-dark {
  background-color: hsl(280, 100%, 25%);
}

.bg-amber {
  background-color: hsl(45, 100%, 50%);
}
.bg-amber-light {
  background-color: hsl(45, 100%, 75%);
}
.bg-amber-dark {
  background-color: hsl(45, 100%, 25%);
}

.bg-emerald {
  background-color: hsl(160, 100%, 40%);
}
.bg-emerald-light {
  background-color: hsl(160, 100%, 65%);
}
.bg-emerald-dark {
  background-color: hsl(160, 100%, 20%);
}

.bg-rose {
  background-color: hsl(350, 100%, 50%);
}
.bg-rose-light {
  background-color: hsl(350, 100%, 75%);
}
.bg-rose-dark {
  background-color: hsl(350, 100%, 25%);
}

.bg-coral {
  background-color: hsl(16, 100%, 50%);
}
.bg-coral-light {
  background-color: hsl(16, 100%, 75%);
}
.bg-coral-dark {
  background-color: hsl(16, 100%, 25%);
}

.bg-turquoise {
  background-color: hsl(174, 100%, 40%);
}
.bg-turquoise-light {
  background-color: hsl(174, 100%, 65%);
}
.bg-turquoise-dark {
  background-color: hsl(174, 100%, 20%);
}

.bg-sapphire {
  background-color: hsl(220, 100%, 50%);
}
.bg-sapphire-light {
  background-color: hsl(220, 100%, 75%);
}
.bg-sapphire-dark {
  background-color: hsl(220, 100%, 25%);
}

.bg-crimson {
  background-color: hsl(348, 100%, 45%);
}
.bg-crimson-light {
  background-color: hsl(348, 100%, 70%);
}
.bg-crimson-dark {
  background-color: hsl(348, 100%, 20%);
}

.bg-olive {
  background-color: hsl(90, 50%, 50%);
}
.bg-olive-light {
  background-color: hsl(90, 50%, 75%);
}
.bg-olive-dark {
  background-color: hsl(90, 50%, 25%);
}

.bg-slate {
  background-color: hsl(210, 20%, 50%);
}
.bg-slate-light {
  background-color: hsl(210, 20%, 75%);
}
.bg-slate-dark {
  background-color: hsl(210, 20%, 25%);
}

.bg-gold {
  background-color: hsl(51, 100%, 50%);
}
.bg-gold-light {
  background-color: hsl(51, 100%, 75%);
}
.bg-gold-dark {
  background-color: hsl(51, 100%, 25%);
}

.bg-ruby {
  background-color: hsl(340, 100%, 45%);
}
.bg-ruby-light {
  background-color: hsl(340, 100%, 70%);
}
.bg-ruby-dark {
  background-color: hsl(340, 100%, 20%);
}

.bg-amethyst {
  background-color: hsl(290, 100%, 45%);
}
.bg-amethyst-light {
  background-color: hsl(290, 100%, 70%);
}
.bg-amethyst-dark {
  background-color: hsl(290, 100%, 20%);
}

.bg-aqua {
  background-color: hsl(195, 100%, 45%);
}
.bg-aqua-light {
  background-color: hsl(195, 100%, 70%);
}
.bg-aqua-dark {
  background-color: hsl(195, 100%, 20%);
}

.bg-maroon {
  background-color: hsl(0, 100%, 35%);
}
.bg-maroon-light {
  background-color: hsl(0, 100%, 60%);
}
.bg-maroon-dark {
  background-color: hsl(0, 100%, 15%);
}

.bg-lavender {
  background-color: hsl(270, 60%, 60%);
}
.bg-lavender-light {
  background-color: hsl(270, 60%, 80%);
}
.bg-lavender-dark {
  background-color: hsl(270, 60%, 40%);
}

.bg-mint {
  background-color: hsl(150, 100%, 45%);
}
.bg-mint-light {
  background-color: hsl(150, 100%, 70%);
}
.bg-mint-dark {
  background-color: hsl(150, 100%, 20%);
}

.bg-peach {
  background-color: hsl(20, 100%, 50%);
}
.bg-peach-light {
  background-color: hsl(20, 100%, 75%);
}
.bg-peach-dark {
  background-color: hsl(20, 100%, 25%);
}

.bg-ochre {
  background-color: hsl(40, 100%, 50%);
}
.bg-ochre-light {
  background-color: hsl(40, 100%, 75%);
}
.bg-ochre-dark {
  background-color: hsl(40, 100%, 25%);
}

/* Neutral colors */
.bg-black {
  background-color: hsl(0, 0%, 0%);
}
.bg-white {
  background-color: hsl(0, 0%, 100%);
}