/* COMPONENTE — botões */

/* ===== BUTTONS (radius-control 12px; sem pílula por padrão) ======== */
.btn {
  appearance:none; font-family:var(--font-display); font-weight:var(--weight-bold);
  font-size:var(--text-base); line-height:1; letter-spacing:-0.005em;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--tap); padding:0 20px; border-radius:var(--radius-control);
  border:1.5px solid var(--border-strong); background:transparent; color:var(--text-strong);
  cursor:pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }

/* Primário = Mel (amarelo), texto navy */
.btn-primary {
  background: var(--accent); color: var(--text-on-accent);
  border:1.5px solid transparent; box-shadow: var(--shadow-sm);
}

/* Deep = Âmbar */
.btn-deep { background: var(--accent-deep); color: var(--text-on-accent); border:1.5px solid transparent; }

/* CTA largo de bloco (home/painel) */
.btn-start {
  width:100%; min-height:54px; padding:0 24px;
  background: var(--accent); color: var(--text-on-accent);
  border:none; border-radius:var(--radius-control);
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-md);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.btn-start:active { transform: scale(0.98); }

/* Hover só onde existe ponteiro fino de verdade — sem isso, o estado de
   hover fica "grudado" depois de um tap em touch (o dedo solta, mas o
   :hover só some no próximo toque em outro lugar). */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.06); }
  .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent); transform: translateY(-1px); }
  .btn-deep:hover { background: var(--accent-deep-hover); box-shadow: var(--shadow-accent); }
  .btn-start:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent); transform: translateY(-1px); }
}

/* :focus-visible vem de uma regra única e genérica em 02-base.css. Os
   componentes não redeclaram foco individualmente — antes essa lista
   seletor-por-seletor cobria só botões e deixava qualquer outro elemento
   focável (link, campo) sem anel visível fora dela. */

/* =========================================================================
   BOTÕES COMPARTILHADOS — tap target e tipografia crescem no desktop.
   Não existe modo telão neste produto: é tudo desktop (monitor comum,
   inclusive ≥1680px). `.btn` (Continuar/Voltar/genérico) cresce um degrau
   pequeno até lg e praticamente não cresce mais depois disso — antes desta
   correção (2026-07-20) ele ia a 60-72px de altura em monitores largos
   comuns, bem maior que o campo de formulário ao lado (~40px), e essa
   descompensação era o que sobrava depois de encolher só o input.
   `.btn-start` (CTA de bloco da home/painel) fica um degrau acima de `.btn`
   por ser a ação única da tela — mas um degrau, não o dobro do tamanho.
   ========================================================================= */

/* md+ — aumentar tap target e font */
@media (min-width: 900px) {
  .btn {
    min-height: 44px;
    padding: 0 22px;
    font-size: var(--text-base);
  }

  .btn-start {
    min-height: 48px;
    padding: 0 24px;
    font-size: var(--text-md);
  }
}

/* lg+ — desktop */
@media (min-width: 1280px) {
  .btn {
    min-height: 44px;
    padding: 0 22px;
    font-size: var(--text-base);
  }

  .btn-start {
    min-height: 50px;
    padding: 0 26px;
    font-size: var(--text-md);
  }
}

/* xl/xxl — monitor de desktop maior, não telão: só um degrau pequeno */
@media (min-width: 1680px) {
  .btn {
    min-height: 46px;
    padding: 0 24px;
    font-size: var(--text-base);
  }

  .btn-start {
    min-height: 52px;
    padding: 0 28px;
    font-size: var(--text-lg);
  }
}
@media (min-width: 2560px) {
  .btn {
    min-height: 48px;
    padding: 0 26px;
    font-size: var(--text-md);
  }

  .btn-start {
    min-height: 54px;
    padding: 0 30px;
    font-size: var(--text-lg);
  }
}