/* Badge — pill pequena para categorias e status. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 2px var(--esp-2);
  border-radius: var(--raio-pill);
  font-size: var(--texto-xs);
  font-weight: 600;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  white-space: nowrap;
}
.badge--primaria { background: var(--cor-primaria-tint); color: var(--cor-primaria-forte); }
.badge--concluido { background: var(--cor-primaria-tint); color: var(--cor-sucesso); }
.badge--acento { background: color-mix(in srgb, var(--cor-acento) 15%, transparent); color: var(--cor-acento); }