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

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

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

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

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

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

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

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

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

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

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

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

.bg-primary-ghost {
  background-color: var(--color-primary-ghost);
}

.bg-secondary-ghost {
  background-color: var(--color-secondary-ghost);
}

.bg-tertiary-ghost {
  background-color: var(--color-tertiary-ghost);
}

.bg-success-ghost {
  background-color: var(--color-success-ghost);
}

.bg-info-ghost {
  background-color: var(--color-info-ghost);
}

.bg-warning-ghost {
  background-color: var(--color-warning-ghost);
}

.bg-danger-ghost {
  background-color: var(--color-danger-ghost);
}

.bg-neutral-ghost {
  background-color: var(--color-neutral-ghost);
}

.bg-light-ghost {
  background-color: var(--color-light-ghost);
}

.bg-dark-ghost {
  background-color: var(--color-dark-ghost);
}

.bg-white-ghost {
  background-color: var(--color-white-ghost);
}

.bg-black-ghost {
  background-color: var(--color-black-ghost);
}

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