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

.badge--success { background: var(--color-success-dim); color: var(--color-success); }
.badge--warning { background: var(--color-warning-dim); color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-dim);  color: var(--color-danger);  }
.badge--info    { background: var(--color-info-dim);    color: var(--color-info);    }
.badge--neutral { background: var(--color-surface-3);   color: var(--color-text-secondary); }
.badge--accent  { background: var(--color-accent-dim);  color: var(--color-accent);  }

.signal-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.signal-dot--green  { background: var(--color-success); }
.signal-dot--yellow { background: var(--color-warning); }
.signal-dot--orange { background: #F97316; }
.signal-dot--red    { background: var(--color-danger); }
.signal-dot--grey   { background: var(--color-text-muted); }