/* ============================================================
   COMPONENT · BADGE
   Inline status / category marker. Engraved plaque feel.
   ============================================================ */

.c-badge {
  --badge-color: var(--color-text-muted);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-family: var(--font-plaque);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--badge-color);
  background: color-mix(in srgb, var(--badge-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--badge-color) 50%, transparent);
  border-radius: var(--radius-xs);
}

.c-badge--ok      { --badge-color: var(--color-ok); }
.c-badge--info    { --badge-color: var(--color-info); }
.c-badge--caution { --badge-color: var(--color-caution); }
.c-badge--alert   { --badge-color: var(--color-alert); }
.c-badge--danger  { --badge-color: var(--color-danger); }
.c-badge--hazard  { --badge-color: var(--color-hazard); }
.c-badge--primary { --badge-color: var(--color-primary); }

.c-badge--solid {
  background: var(--badge-color);
  color: var(--color-text-inverse);
  border-color: transparent;
}