.badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 0.1rem solid transparent;
  border-radius: var(--radius-pill);
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge--primary {
  background-color: rgba(107, 42, 16, 0.1);
  border-color: rgba(107, 42, 16, 0.25);
  color: var(--color-primary-hover);
}

.badge--secondary {
  background-color: rgba(239, 146, 52, 0.18);
  border-color: rgba(239, 146, 52, 0.5);
  color: var(--color-primary);
}

.badge--neutral {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--color-text);
}

.badge--solid {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.badge--solid-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-on-secondary);
}