/* Badge component styles */
.badge {
  display: inline-block;
  padding: var(--s-4) var(--s-1);
  font-size: var(--step--2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--s-4);
  border: var(--border-thin) solid currentColor;
}

.badge-success {
  color: var(--color-success);
  background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: var(--color-success);
}

.badge-warning {
  color: var(--color-warning);
  background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-color: var(--color-warning);
}

.badge-error {
  color: var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
  border-color: var(--color-error);
}

.badge-info {
  color: var(--color-info);
  background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
  border-color: var(--color-info);
}