/* ── Badge primitive — chrome tokens ─────────────────────────────── */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--chrome-radius-pill);
  font-family: var(--chrome-font-mono);
  font-weight: 600;
  letter-spacing: var(--chrome-label-track);
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
  user-select: none;
  line-height: 1.2;
}

.ui-badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: none;
}

/* sizes */
.ui-badge--size-xs { padding: 0px 6px; font-size: var(--chrome-label-size); }
.ui-badge--size-sm { padding: 1px 7px; font-size: var(--chrome-label-size); }

/* tones — color applied via `color` so dot + border follow. Fill stays near-
   transparent so the badge reads as a chrome chip, not a filled pill. */
.ui-badge--neutral { color: var(--chrome-fg-muted);        border-color: var(--chrome-border-strong);                                      background: transparent; }
.ui-badge--brand   { color: var(--chrome-accent);          border-color: var(--chrome-accent-border);                                      background: var(--chrome-accent-bg); }
.ui-badge--success { color: var(--chrome-severity-ok);     border-color: color-mix(in srgb, var(--chrome-severity-ok) 45%, transparent);   background: color-mix(in srgb, var(--chrome-severity-ok) 10%, transparent); }
.ui-badge--warn    { color: var(--chrome-severity-warn);   border-color: color-mix(in srgb, var(--chrome-severity-warn) 45%, transparent); background: color-mix(in srgb, var(--chrome-severity-warn) 10%, transparent); }
.ui-badge--danger  { color: var(--chrome-severity-err);    border-color: color-mix(in srgb, var(--chrome-severity-err) 45%, transparent);  background: color-mix(in srgb, var(--chrome-severity-err) 10%, transparent); }
.ui-badge--info    { color: #83a598;                       border-color: color-mix(in srgb, #83a598 45%, transparent);                    background: color-mix(in srgb, #83a598 10%, transparent); }
.ui-badge--violet  { color: var(--chrome-fg-muted);        border-color: var(--chrome-border-strong);                                      background: transparent; }

/* pulse modifier — for "loading" / "thinking" states */
.ui-badge--pulse .ui-badge__dot { animation: pulse 1.5s ease-in-out infinite; }