/* fsq-badges.css - FSQ status badge set, token based (needs fsq-tokens.css). Adapted from the mERP UI library; provenance in the FSQ Brain (brain/ui/fsq_ui_registry.md). */

.fsq-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--fsq-muted-bg);
  color: var(--fsq-muted-fg);
}
.fsq-badge--sm { font-size: .70rem; padding: 2px 8px; }
.fsq-badge--ok     { background: var(--fsq-ok-bg);     color: var(--fsq-ok-fg); }
.fsq-badge--warn   { background: var(--fsq-warn-bg);   color: var(--fsq-warn-fg); }
.fsq-badge--info   { background: var(--fsq-info-bg);   color: var(--fsq-info-fg); }
.fsq-badge--danger { background: var(--fsq-danger-bg); color: var(--fsq-danger-fg); }
.fsq-badge--muted  { background: var(--fsq-muted-bg);  color: var(--fsq-muted-fg); }
.fsq-badge--brand  { background: var(--fsq-brand-bg);  color: var(--fsq-brand-fg); }
.fsq-badge--violet { background: var(--fsq-violet-bg); color: var(--fsq-violet-fg); }
.fsq-badge--pink   { background: var(--fsq-pink-bg);   color: var(--fsq-pink-fg); }

/* Coming-soon / disabled semantics (honest: a dashed outline, never a working look). */
.fsq-badge--soon {
  background: transparent;
  color: var(--fsq-text-muted);
  border: 1px dashed var(--fsq-text-muted);
}

/* Legend row used by the gallery badge page. */
.fsq-badge-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }