/* ============================================================
 * farpa DS · component · button · v1.0.0
 * ------------------------------------------------------------
 * Variantes:
 *   default       — sólido com cor accent
 *   secondary     — outline
 *   ghost         — sem borda, hover sutil
 * Tamanhos via data-size: sm | md (default) | lg
 * Estados: :hover · :active · :focus-visible · :disabled
 * ============================================================ */

.farpa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
  user-select: none;
  white-space: nowrap;
}

.farpa-btn:hover { background: var(--btn-bg-hover); }
.farpa-btn:active { background: var(--btn-bg-active); transform: translateY(1px); }
.farpa-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.farpa-btn:disabled,
.farpa-btn[aria-disabled="true"] {
  background: var(--btn-bg-disabled);
  color: var(--fg-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Variantes */
.farpa-btn[data-variant="secondary"] {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}
.farpa-btn[data-variant="secondary"]:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--fg);
}

.farpa-btn[data-variant="ghost"] {
  background: transparent;
  color: var(--fg);
  border-color: transparent;
}
.farpa-btn[data-variant="ghost"]:hover {
  background: var(--bg-subtle);
}

/* Tamanhos */
.farpa-btn[data-size="sm"] {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}
.farpa-btn[data-size="lg"] {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-md);
}

/* Mobile · tap target ≥44px (iOS HIG · WCAG 2.5.5)
 * Botão default herda padding tokens; em mobile garantimos altura mínima
 * sem mudar a tipografia (não esticar text-baseline). */
@media (max-width: 720px) {
  .farpa-btn {
    min-height: 2.75rem;
  }
  .farpa-btn[data-size="sm"] {
    min-height: 2.5rem;
  }
}

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .farpa-btn {
    transition: none;
  }
  .farpa-btn:active {
    transform: none;
  }
}