/* A variant sets the three --bk- locals rather than a rule per part; their defaults are in
   01-settings/_semantic.css, so a badge with no variant is the neutral band. */
.c-badge {
  display: inline-flex; align-items: center; gap: 0.7ch;
  padding: 0 var(--space-xs);
  background: var(--bk-fill);
  border: var(--bw) solid var(--bk-line);
  color: var(--bk-ink);
  font-size: var(--text-xs);
}
/* The glyph is the state's non-colour signal and comes from a data-glyph attribute on the
   element, so a badge rendered without one states its case in colour alone. */
.c-badge::before { content: attr(data-glyph); }
.c-badge--good { --bk-ink: var(--good); --bk-line: var(--good); --bk-fill: color-mix(in oklab, var(--good) 12%, var(--surface)); }
.c-badge--bad  { --bk-ink: var(--bad);  --bk-line: var(--bad);  --bk-fill: color-mix(in oklab, var(--bad) 12%, var(--surface)); }
.c-badge--live { --bk-ink: var(--accent); --bk-line: var(--accent); --bk-fill: var(--accent-soft); }
.c-badge--warn { --bk-ink: var(--warn); --bk-line: var(--warn); --bk-fill: color-mix(in oklab, var(--warn) 12%, var(--surface)); }