/* buttons.css — Botões (§3.2): dois níveis padrão + exceção destrutiva. Sem outras variantes. */

/* CTA = botão primário do sistema. Micro-interações modernas (v0.3 item 4.1):
   hover sobe 1px com sombra, active volta, e estado de loading com spinner.
   Acionar via JS: btn.dataset.loading = "true" durante o fetch; delete depois. */
.btn-cta {
  background: var(--accent); color: #fff; padding: 10px 18px; border: none;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--ff-body);
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn-cta:hover { background: var(--accent-hv); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-cta:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.btn-cta:disabled { background: var(--line-2); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-cta[data-loading="true"] {
  pointer-events: none; opacity: .7; position: relative; padding-right: 36px;
}
.btn-cta[data-loading="true"]::after {
  content: ""; position: absolute; right: var(--space-3); top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-cta:hover { transform: none; }
  .btn-cta[data-loading="true"]::after { animation-duration: 1.4s; }
}

.btn-link {
  color: var(--fg-dim); font-size: 13px; padding: 8px 4px; background: none;
  border: none; cursor: pointer; font-family: var(--ff-body); transition: color .15s;
}
.btn-link:hover { color: var(--fg); }
.btn-link:disabled { color: var(--line-2); cursor: not-allowed; }

.btn-danger {
  background: var(--bg); color: var(--danger); border: 1px solid var(--danger);
  padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: var(--ff-body); transition: all .15s; border-radius: var(--radius);
}
.btn-danger:hover { background: var(--danger); color: #fff; }

/* Botão outlined neutro (cinza) — ações secundárias / fluxos legados rebaixados. */
.btn-outline {
  background: var(--bg); color: var(--fg-dim); border: 1px solid var(--line-2);
  padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: var(--ff-body); transition: all .15s; border-radius: var(--radius);
}
.btn-outline:hover { border-color: var(--fg-dim); color: var(--fg); background: var(--surface); }