/* ============================================================================
 * REFINAMENTO — Feedback & Status (badge, chip, progress bar, toast, alert)
 * ============================================================================
 * Carregado DEPOIS de custom.css e 00-tokens-bridge.css. Usa exclusivamente os
 * seletores já existentes em custom.css (.badge-status, .chip, .toast-*,
 * .alert-banner, etc.) — nenhuma classe nova é criada, nenhum HTML/JS muda.
 *
 * O que este arquivo faz, referência: vsx-design-system/packages/vanilla/css/
 * components/feedback.css (equivalente `.vsx-badge`, `.vsx-alert`, `.vsx-toast`
 * — usado só como fonte de padrão, nunca aplicado literalmente aqui):
 *
 *   1. Troca tints de fundo/borda com rgba() fixo por color-mix(in srgb,
 *      var(--token) X%, transparent) — a cor passa a acompanhar o token
 *      (bridge) em vez de um hex hardcoded sem relação com --green/--red/etc.
 *   2. Onde --accent aparece como TEXTO sobre um fundo tint (não como fundo
 *      sólido de botão), troca para --accent-on-dark. O design system mediu
 *      --accent-default sobre tint em ~2.4:1 (abaixo de 4.5:1 para texto);
 *      --accent-on-dark atinge 5.3:1+ mantendo "azul = destaque/info".
 *      Nenhum token novo é inventado — --accent-on-dark já existe no bridge.
 *
 * Tooltip (.tooltip-wrap/.tooltip-content) não tem regra aqui: já usa apenas
 * cores neutras (--bg-card2, --border, --text-1), sem tint nem texto sobre
 * fundo colorido — nada a refinar sem reescrever layout.
 * ============================================================================ */

/* ── Status Badges ──────────────────────────────────────────────────────── */
/* --text-3 (#4A5580) é o mesmo RGB usado antes em rgba(74,85,128,*) — agora
   derivado do token em vez de hex solto, então acompanha o bridge se o texto
   terciário mudar de tom. */
.badge-pendente {
  background: color-mix(in srgb, var(--text-3) 20%, transparent);
  border-color: color-mix(in srgb, var(--text-3) 30%, transparent);
}

.badge-pago {
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

/* --accent como texto sobre --accent-dim (fundo tint): troca para
   --accent-on-dark por contraste (ver nota no header do arquivo). */
.badge-emitida {
  color: var(--accent-on-dark);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.badge-processando {
  border-color: color-mix(in srgb, var(--yellow) 30%, transparent);
}

.badge-erro {
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}

.badge-cancelada {
  background: color-mix(in srgb, var(--text-3) 15%, transparent);
  border-color: color-mix(in srgb, var(--text-3) 25%, transparent);
}

/* ── Chip ────────────────────────────────────────────────────────────────── */
/* Mesmo padrão do badge-emitida: --accent como texto sobre --accent-dim. */
.chip {
  color: var(--accent-on-dark);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ── Progress Bar ────────────────────────────────────────────────────────── */
/* Barra de progresso é elemento gráfico (não texto), mas ainda precisa de
   3:1 de contraste contra o track (WCAG 1.4.11). --accent sobre --bg-hover
   mede o mesmo ~2.3:1 que o design system documentou para .vsx-progress__fill
   — --accent-on-dark resolve sem mudar altura/raio da barra. */
.progress-bar-fill {
  background: var(--accent-on-dark);
}

/* ── Toast Notifications ─────────────────────────────────────────────────── */
.toast-success {
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.toast-error {
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}
.toast-warning {
  border-color: color-mix(in srgb, var(--yellow) 30%, transparent);
}
.toast-info {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Alert Banner ────────────────────────────────────────────────────────── */
/* .alert-title/.alert-sub não têm cor própria (herdam --text-1) em nenhuma
   variante — sem texto sobre tint aqui, só a borda precisa do color-mix. */
.alert-banner.warning {
  border-color: color-mix(in srgb, var(--yellow) 25%, transparent);
}
.alert-banner.error {
  border-color: color-mix(in srgb, var(--red) 25%, transparent);
}
.alert-banner.success {
  border-color: color-mix(in srgb, var(--green) 25%, transparent);
}