.jl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.jl-badge--pill { border-radius: var(--radius-pill); padding: 0 var(--space-3); }
.jl-badge svg { width: 1.05em; height: 1.05em; }
.jl-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.jl-badge--neutral { background: var(--surface-muted); color: var(--text-secondary); }
.jl-badge--brand   { background: var(--accent-subtle); color: var(--text-brand); }
.jl-badge--success { background: var(--success-subtle); color: var(--success-text); }
.jl-badge--warning { background: var(--warning-subtle); color: var(--warning-text); }
.jl-badge--danger  { background: var(--danger-subtle); color: var(--danger-text); }
.jl-badge--info    { background: var(--info-subtle); color: var(--info-text); }

.jl-badge--solid.jl-badge--neutral { background: var(--neutral-700); color: #fff; }
.jl-badge--solid.jl-badge--brand   { background: var(--accent); color: #fff; }
.jl-badge--solid.jl-badge--success { background: var(--success); color: #fff; }
.jl-badge--solid.jl-badge--warning { background: var(--warning); color: #fff; }
.jl-badge--solid.jl-badge--danger  { background: var(--danger); color: #fff; }
.jl-badge--solid.jl-badge--info    { background: var(--info); color: #fff; }