.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--default {
  background-color: var(--surface-sunken);
  color: var(--text-secondary);
}

.badge--primary {
  background-color: var(--accent-muted);
  color: var(--accent-primary);
}

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

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

.badge--error {
  background-color: var(--status-error-bg);
  color: var(--status-error-text);
}

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

.badge--outline {
  background-color: transparent;
  border: 1px solid currentColor;
  padding: calc(var(--space-0-5) - 1px) calc(var(--space-2) - 1px);
}

.badge--dot::before {
  content: "";
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-dot--success { background-color: var(--status-success); }
.status-dot--warning { background-color: var(--status-warning); }
.status-dot--error   { background-color: var(--status-error); }
.status-dot--neutral { background-color: var(--text-tertiary); }
.status-dot--info    { background-color: var(--status-info); }