/* public/css/fm/badge.css
 *
 * fm-badge (DS #2) — rótulo/status pequeno e estático (distinto do chip).
 * Autocontido (skin coexiste): box-sizing, fonte, cor. Consome tokens fm.
 * Tons da paleta da marca × variantes soft (tint + texto da cor) e solid
 * (fundo da cor + texto branco). Mais compacto que o chip.
 */
.fm-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--fm-radius-pill);
  font-family: var(--fm-font-body);
  font-size: var(--fm-text-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* —— neutro —— */
.fm-badge--neutro.fm-badge--soft {
  background: var(--fm-gray-100);
  color: var(--fm-gray-700);
}
.fm-badge--neutro.fm-badge--solid {
  background: var(--fm-gray-700);
  color: var(--fm-white);
}

/* —— teal —— */
.fm-badge--teal.fm-badge--soft {
  background: rgba(23, 131, 152, 0.12);
  color: var(--fm-teal);
}
.fm-badge--teal.fm-badge--solid {
  background: var(--fm-teal);
  color: var(--fm-white);
}

/* —— navy —— */
.fm-badge--navy.fm-badge--soft {
  background: rgba(1, 18, 34, 0.1);
  color: var(--fm-navy);
}
.fm-badge--navy.fm-badge--solid {
  background: var(--fm-navy);
  color: var(--fm-white);
}

/* —— alerta —— */
.fm-badge--alerta.fm-badge--soft {
  background: rgba(221, 26, 110, 0.12);
  color: var(--fm-red);
}
.fm-badge--alerta.fm-badge--solid {
  background: var(--fm-red);
  color: var(--fm-white);
}