/* Primitive component styles — small, single-purpose, reused everywhere. */

/* Badge */
.badge { font-size: 11px; padding: 2px 9px; border-radius: 6px; font-weight: 500; }
.badge.type { background: rgba(var(--violet-rgb),.16); color: var(--accent-violet); }
.badge.tag { background: rgba(var(--light-rgb),.07); color: var(--sub); }

/* StatusPill — every variant pulses its own ring color via --pulse. */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pillPulse 1.6s ease-in-out infinite; }
.pill.ok      { color: #8ef0a0; background: var(--success-background); --pulse: rgba(143,240,160,.6); }
.pill.healthy { color: var(--success); background: rgba(var(--success-rgb),.14); --pulse: rgba(var(--success-rgb),.6); }
.pill.build   { color: var(--accent-pulse); background: #2a1500; --pulse: rgba(var(--pulse-rgb),.6); }

@keyframes pillPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pulse); }
  70%      { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pill .dot { animation: none; }
}

/* Avatar token */
.avatar-token { border-radius: 50%; background: var(--primary); color: var(--light); display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }