Token and spacing effects appear here.
.badge {
display: inline-flex; align-items: center; gap: 0.375rem;
padding: 0.25rem 0.625rem; border-radius: 9999px;
font-size: 0.6875rem; font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-default { background: var(--border); color: var(--muted); }
.badge-accent { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(196,100,10,.25); }
.badge-success { background: rgba(34,197,94,.1); color: #16A34A; }
.badge-warning { background: rgba(245,158,11,.1); color: #D97706; }
.badge-error { background: rgba(239,68,68,.1); color: #DC2626; }
.badge-dot::before {
content: ''; display: block;
width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}