/* =========================================================
   Component — Buttons
   ========================================================= */

.btn {
  --btn-bg:     var(--color-sage);
  --btn-fg:     var(--color-white);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: var(--space-3) var(--space-6);
  min-height: 3rem;

  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--btn-fg);

  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-none);
  appearance: none;                 /* remove o chrome nativo quando usado em <button> */
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-std),
    color var(--dur-base) var(--ease-std),
    transform var(--dur-fast) var(--ease-std);
}

.btn:active { transform: translateY(1px); }

/* Variantes — o hover muda via --btn-bg/--btn-fg (o fundo usa var(--btn-bg)) */
.btn--primary:hover { --btn-bg: var(--color-sage-hover); }

.btn--outline {
  --btn-bg: rgba(0, 0, 0, 0.35);   /* preto 35% no estado normal */
  --btn-fg: var(--color-white);
  --btn-border: var(--color-white);
}
.btn--outline:hover {
  --btn-bg: var(--color-white);   /* preenchimento branco */
  --btn-fg: var(--color-ink);     /* texto preto p/ legibilidade */
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-border: var(--color-line);
}
.btn--ghost:hover {
  --btn-bg: var(--color-surface);
}

.btn--icon {
  width: 3rem; padding: 0;
  aspect-ratio: 1 / 1;
}

.btn .btn-icon {
  width: 1.125rem; height: 1.125rem;
  flex: none;
}