/* Badge Component Styles */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--border-radius-md);
}

/* Variants */
.badge[data-variant="primary"] {
  background-color: var(--color-primary);
  color: var(--text-primary);
}

.badge[data-variant="secondary"] {
  background-color: var(--color-neutral-500);
  color: var(--text-inverse);
}

.badge[data-variant="success"] {
  background-color: var(--color-success);
  color: white;
}

.badge[data-variant="danger"] {
  background-color: var(--color-danger);
  color: white;
}

.badge[data-variant="warning"] {
  background-color: var(--color-warning);
  color: var(--text-primary);
}

.badge[data-variant="info"] {
  background-color: var(--color-info);
  color: white;
}

/* Sizes */
.badge[data-size="sm"] {
  padding: 0.2rem 0.5rem;
  font-size: var(--font-size-xs);
}

.badge[data-size="md"] {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.badge[data-size="lg"] {
  padding: 0.35rem 1rem;
  font-size: var(--font-size-base);
}