.btn {
  --btn-bg: var(--bordo);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font);
  font-weight: 500;
  font-size: .98rem;
  letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .3s, color .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(-1px); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--grad-wine); color: #fff; box-shadow: 0 12px 30px -12px rgba(90,18,36,.6); }
.btn--primary:hover { box-shadow: 0 20px 44px -14px rgba(90,18,36,.7); }

.btn--ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(251,247,243,.35); }
.btn--ghost:hover { background: rgba(251,247,243,.10); box-shadow: inset 0 0 0 1.5px rgba(251,247,243,.6); }

.btn--outline { background: transparent; color: var(--bordo); box-shadow: inset 0 0 0 1.5px rgba(90,18,36,.28); }
.btn--outline:hover { background: rgba(90,18,36,.05); box-shadow: inset 0 0 0 1.5px rgba(90,18,36,.5); }

.btn--blue { background: var(--grad-blue); color: #fff; box-shadow: 0 12px 30px -12px rgba(86,110,136,.6); }

.btn--soft { background: rgba(138,81,78,.12); color: var(--bordo); }
.btn--soft:hover { background: rgba(138,81,78,.2); }