/* ==========================================================================
   buttons.css — GLOBAL button system. Loaded from base.html on EVERY page.
   The gold CTA "light you can press" — ported from the preview's .btn.
   Do NOT redefine .btn anywhere else (no button styles in section CSS).
   ========================================================================== */

/* Base .btn IS the gold/primary treatment (matches preview). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6ch;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(150deg, var(--grace-hi), var(--grace) 55%, var(--grace-lo));
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(232, 178, 89, 0);
  transition:
    transform 0.3s var(--ease-rise),
    box-shadow 0.3s ease,
    filter 0.3s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px -8px rgba(232, 178, 89, 0.5),
    0 0 40px -6px rgba(246, 215, 154, 0.45);
  filter: brightness(1.04);
}
.btn:active {
  transform: translateY(0);
}

/* explicit gold alias (templates may use .btn--gold; identical to base) */
.btn--gold {
  /* inherits the base gold treatment */
}

/* ---- ghost / secondary (preview .btn.ghost) ------------------------- */
.btn--ghost {
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--veil);
  box-shadow: none;
}
.btn--ghost:hover {
  border-color: var(--grace);
  color: var(--grace);
  box-shadow: none;
  filter: none;
}

/* ---- small variant (nav, cards) ------------------------------------- */
.btn--sm {
  min-height: 44px;     /* ≥44px tap target */
  padding: 0.6rem 1.15rem;
}

/* full-width on the smallest screens for stacked hero CTAs */
@media (max-width: 30rem) {
  .btn--block-mobile {
    width: 100%;
  }
}