/* ============================================================
   BUTTONS
   All button variants used across the app.
   ============================================================ */

/* ---- Base button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: var(--font-family);
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  /* Spring on the transform so hover lifts and presses land with a little
     bounce; shadows just follow softly. */
  transition:
    transform var(--dur-hover) var(--ease-spring),
    box-shadow var(--dur-hover) var(--ease-out-soft),
    background var(--dur-hover) var(--ease-out-soft);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

/* ---- Primary: orange-to-yellow gradient CTA ---- */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-dark);
  box-shadow: var(--shadow-btn-primary);
}
.btn-primary:hover { box-shadow: var(--shadow-btn-primary-hover); }

/* ---- Secondary: white with soft shadow ---- */
.btn-secondary {
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-btn-secondary);
}
.btn-secondary:hover { box-shadow: 0 6px 18px rgba(26,26,46,0.15); }

/* ---- Danger: light red for destructive actions ---- */
.btn-danger {
  background: var(--color-error-bg);
  color: var(--color-error);
  box-shadow: 0 2px 10px rgba(220,38,38,0.1);
}
.btn-danger:hover { box-shadow: 0 6px 18px rgba(220,38,38,0.2); }

/* ---- Ghost: glassmorphic, for use on dark/hero backgrounds ---- */
.btn-ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: var(--glass-bg-hover); }

/* ---- Size modifier ---- */
.btn-xl { padding: 1.1rem 2.6rem; font-size: 1.1rem; }

/* ---- Keep button_to form inline (for danger delete) ---- */
.btn-danger-form { display: inline; }
.btn-danger-form .btn-danger { font-family: var(--font-family); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background var(--dur-hover); }
  .btn:hover, .btn:active { transform: none; }
}