/* Badge: etiqueta estática, MAIÚSCULAS. Cor pelo significado (teal pessoas, laranja suporte, roxo gestão). */
.badge {
  --_c: var(--wp-ink-muted);
  display: inline-flex; align-items: center; padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--_c) 12%, var(--wp-white));
  color: var(--wp-ink);
  font: var(--fw-semibold) var(--fs-label)/1.2 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
}
.badge--teal   { --_c: var(--wp-teal); color: var(--wp-teal-dark); }
.badge--orange { --_c: var(--wp-orange); color: #8A4A17; }
.badge--purple { --_c: var(--wp-purple); color: var(--wp-purple-dark); }
.badge--solid { background: var(--_c); color: var(--wp-white); }
.badge--teal.badge--solid { background: var(--wp-teal-dark); }
.badge--orange.badge--solid { background: var(--wp-orange-dark); color: var(--wp-ink); }
.badge--purple.badge--solid { background: var(--wp-purple-dark); }
.section--dark .badge { background: rgba(255, 255, 255, 0.12); color: var(--wp-white); }

/* Tag: chip interativo (filtros) */
.tag {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px; padding: 0.4em 1em;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-body);
  font: var(--fw-medium) var(--fs-body-sm)/1.2 var(--font-body); cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.tag:hover { border-color: var(--accent); }
.tag[aria-pressed="true"], .tag.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-card)); color: var(--text-heading); font-weight: var(--fw-semibold); }