.bg--cream-50 {
  --text-accent-color: var(--color-orange-550);

  background: var(--color-cream-50);
}

.bg--cream-100 {
  --text-accent-color: var(--color-orange-550);

  background: var(--color-cream-100);
}

.bg--orange-500 {
  --text-accent-color: var(--color-white);

  background: var(--color-orange-500);
  color: var(--color-white);
}

.bg--orange-700 {
  --text-accent-color: var(--color-white);

  background: var(--color-orange-700);
  color: var(--color-white);
}

.bg--purple-100 {
  background: var(--color-purple-100);
}

.bg--purple-650 {
  --text-accent-color: var(--color-white);

  background: var(--color-purple-650);
  color: var(--color-white);
}

.bg--purple-700 {
  --text-accent-color: var(--color-white);

  background: var(--color-purple-700);
  color: var(--color-white);
}

.bg-gray-500 {
  --text-accent-color: var(--color-white);

  background: var(--color-gray-500);
  color: var(--color-white);
}

.bg--gradient {
  background: linear-gradient(180deg, var(--top) 0%, var(--bottom) 100%);
}

.bg--cream-150-to-purple-100 {
  --top: var(--color-cream-150);
  --bottom: var(--color-purple-100);
  --text-accent-color: var(--color-orange-550);
}

.bg--purple-50-to-cream-150 {
  --top: var(--color-purple-50);
  --bottom: var(--color-cream-150);
  --text-accent-color: var(--color-orange-550);
}

.bg--purple-50-to-cream-50 {
  --top: var(--color-purple-50);
  --bottom: var(--color-cream-50);
  --text-accent-color: var(--color-orange-550);
}