/* ════════════════════════════════════════════════════════════
   BUTTON — Fonte: Figma "Buttons / Button" (node 246:652) · FONTE ÚNICA
   Consumido por docs/componentes/button.html E por qualquer
   organismo/recurso que use o botão (ex.: toast de novidades no
   shell/changelog.js) — uma só implementação, sem fork.

   Matriz: Size {Small·Medium·Large} × Type {Color·Fill·Bord·Empty}
           × State {Default·Hover·Disabled}.
   Cantos retos (radius-control), label Nunito Sans 700, ícone 24 px.
   ════════════════════════════════════════════════════════════ */

.hm-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  font-family: var(--hm-font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;            /* conteúdo = 24px (label min-h 24 / ícone 24). Altura = isto + padding */
  text-align: center;
  white-space: nowrap;
  background: none;
  color: var(--hm-fg);
  border-radius: var(--hm-radius-control);
  transition: background-color var(--hm-dur-micro) var(--hm-ease), color var(--hm-dur-micro) var(--hm-ease), box-shadow var(--hm-dur-micro) var(--hm-ease);
  -webkit-user-select: none; user-select: none;
}
.hm-btn svg { width: 24px; height: 24px; flex: none; display: block; }

/* ── Foco por teclado: anel ink (mesmo ink/2px do foco do Input) ── */
.hm-btn:focus-visible { outline: 2px solid var(--hm-fg); outline-offset: var(--hm-space-2); }

/* ── Tamanhos — padding ÓPTICO (Figma 246:652) ──
   Lado do texto: 12/16/20 · lado do ícone: -4 (o glifo já tem ar interno) ·
   ícone-só: quadrado 32/40/48. Gap texto↔ícone: 8/8/12. */
.hm-btn--sm  { padding: 4px 12px;  gap: 8px; }
.hm-btn--md  { padding: 8px 16px;  gap: 8px; }
.hm-btn--lg  { padding: 12px 20px; gap: 12px; font-size: 16px; }

/* ícone à esquerda: encolhe o lado do ícone */
.hm-btn--sm:has(> svg:first-child, > .hm-ico:first-child) { padding-left: 8px; }
.hm-btn--md:has(> svg:first-child, > .hm-ico:first-child) { padding-left: 12px; }
.hm-btn--lg:has(> svg:first-child, > .hm-ico:first-child) { padding-left: 16px; }
/* ícone à direita: espelhado */
.hm-btn--sm:has(> svg:last-child, > .hm-ico:last-child)   { padding-right: 8px; }
.hm-btn--md:has(> svg:last-child, > .hm-ico:last-child)   { padding-right: 12px; }
.hm-btn--lg:has(> svg:last-child, > .hm-ico:last-child)   { padding-right: 16px; }
/* ícone-só: quadrado (toggle, busca, sino) */
.hm-btn--sm:has(> svg:only-child, > .hm-ico:only-child)   { padding: 4px; }
.hm-btn--md:has(> svg:only-child, > .hm-ico:only-child)   { padding: 8px; }
.hm-btn--lg:has(> svg:only-child, > .hm-ico:only-child)   { padding: 12px; }

/* ── Tipo Color (mint) — default green-300, hover green-400 ── */
.hm-btn--color { background: var(--hm-accent); color: var(--hm-fg); }
/* Hover honesto (B5): efeito de hover só onde hover existe de verdade —
   no toque, o dedo não deixa o estado aceso depois de sair. */
@media (hover: hover) and (pointer: fine) {
  .hm-btn--color:hover { background: var(--hm-accent-hover); }
}

/* ── Tipo Fill (ink) — default ink, hover concrete-400 ── */
.hm-btn--fill { background: var(--hm-fg); color: var(--hm-fg-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .hm-btn--fill:hover { background: var(--hm-bg-ink-hover); }
}

/* ── Tipo Bord (contorno) — default transparente + borda ink, hover bg-soft ── */
.hm-btn--bord { background: transparent; color: var(--hm-fg); box-shadow: inset 0 0 0 1px var(--hm-fg); }
@media (hover: hover) and (pointer: fine) {
  .hm-btn--bord:hover { background: var(--hm-bg-soft); }
}

/* ── Tipo Empty (fantasma) — default transparente, hover bg-soft ── */
.hm-btn--empty { background: transparent; color: var(--hm-fg); }
@media (hover: hover) and (pointer: fine) {
  .hm-btn--empty:hover { background: var(--hm-bg-soft); }
}

/* ── Tipo Destructive — a ação que desfaz/perde algo (concedido 2026-07-30) ──
   Fonte: Figma Card Property, "✕ Desistir da compra" (10285:26343).
   O desenho usa pink-300, mas 300 + label claro dá 2,6:1 (reprova AA em
   14px) — a célula nasce um degrau acima: danger-mid (pink-400),
   hover danger-strong (pink-500), espelhando o padrão mint→green-400.
   O rótulo é concrete-100 FIXO nos 3 temas (como o Badge White/Warn):
   o fundo vermelho não remapeia por tema, então o texto também não pode
   — fg-on-dark escurece no Dark e daria 3,25:1. Fixo: 4,61 (repouso)
   e 5,59 (hover) em Concrete, Paper e Dark ✓.
   Papel: destrutiva confirmável (desistir, excluir, cancelar contrato).
   NUNCA é a primária da tela; convive com Bord/Empty, longe do mint. */
.hm-btn--destructive { background: var(--hm-danger-mid); color: var(--hm-concrete-100); }
@media (hover: hover) and (pointer: fine) {
  .hm-btn--destructive:hover { background: var(--hm-danger-strong); }
}

/* pressão (A3, lapidada na review 2026-08-07): mint = véu de tinta; ink e
   danger = véu claro sobre a BASE ancorada no próprio :active (AA vale
   também no toque, sem hover: fill 7,18:1 · danger 4,81:1); bord/empty =
   degrau soft→alt. :where() zera o custo dos guards — override contextual
   (ex.: camada ink do calendário) continua vencendo o base. */
.hm-btn--color:active:where(:not(:disabled):not([aria-disabled="true"])) { background-image: linear-gradient(var(--hm-hover), var(--hm-hover)); }
.hm-btn--fill:active:where(:not(:disabled):not([aria-disabled="true"])) { background-color: var(--hm-fg); background-image: linear-gradient(var(--hm-hover-on-ink), var(--hm-hover-on-ink)); }
.hm-btn--destructive:active:where(:not(:disabled):not([aria-disabled="true"])) { background-color: var(--hm-danger-strong); background-image: linear-gradient(var(--hm-hover-on-ink), var(--hm-hover-on-ink)); }
.hm-btn--bord:active:where(:not(:disabled):not([aria-disabled="true"])),
.hm-btn--empty:active:where(:not(:disabled):not([aria-disabled="true"])) { background: var(--hm-bg-alt); }

/* ── Disabled (Color 33%, demais 30%; sem mudança no hover) ── */
.hm-btn:disabled,
.hm-btn[aria-disabled="true"] { opacity: .30; cursor: not-allowed; }
.hm-btn--color:disabled,
.hm-btn--color[aria-disabled="true"] { opacity: .33; }
/* Fill/Bord desabilitados: 30% (Figma "Table in Line" · filtros aguardando dados) */
.hm-btn--fill:disabled, .hm-btn--fill[aria-disabled="true"],
.hm-btn--bord:disabled, .hm-btn--bord[aria-disabled="true"] { opacity: .30; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  /* B17: desabilitado por ATRIBUTO congela o hover igual ao :disabled */
  .hm-btn--color:disabled:hover { background: var(--hm-accent); }
  .hm-btn--color[aria-disabled="true"]:hover { background: var(--hm-accent); }
  .hm-btn--fill:disabled:hover { background: var(--hm-fg); }
  .hm-btn--fill[aria-disabled="true"]:hover { background: var(--hm-fg); }
  .hm-btn--destructive:disabled:hover { background: var(--hm-danger-mid); }
  .hm-btn--destructive[aria-disabled="true"]:hover { background: var(--hm-danger-mid); }
  .hm-btn--bord:disabled:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--hm-fg); }
  .hm-btn--bord[aria-disabled="true"]:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--hm-fg); }
  .hm-btn--empty:disabled:hover { background: transparent; }
  .hm-btn--empty[aria-disabled="true"]:hover { background: transparent; }
}