.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  vertical-align: middle;
}

.c-badge--md { padding: 4px 12px; font-size: var(--text-sm); }

.c-badge__icon {
  display: inline-flex;
  align-items: center;
  width: 12px;
  height: 12px;
}
.c-badge__icon svg { width: 100%; height: 100%; }

/* Variants */
.c-badge--neutral { background: var(--color-bg-overlay); color: var(--color-text); }
.c-badge--success { background: var(--color-success-soft); color: var(--color-success); }
.c-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.c-badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.c-badge--info    { background: var(--color-info-soft);    color: var(--color-info); }
.c-badge--brand   { background: var(--color-brand-2-soft); color: var(--color-brand-2); }

/* Outline modifier */
.c-badge--outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* Count variant — circular chip with a number */
.c-badge--count {
  background: var(--color-danger);
  color: #fff;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  justify-content: center;
}
.c-badge--count.c-badge--md {
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
}

/* Dot variant */
.c-badge--dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-text-subtle);
  display: inline-block;
}