/* ============================================================================
   3SIXTY — Buttons
   Pill-shaped, generous padding, gold-forward. Works on light & dark surfaces.
   Markup:  <button class="btn btn--primary btn--lg">Book now</button>
   ============================================================================ */

.btn {
  --_btn-bg: transparent;
  --_btn-fg: var(--text-primary);
  --_btn-border: transparent;
  --_btn-shadow: none;

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

  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;

  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--_btn-border);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  box-shadow: var(--_btn-shadow);

  transition:
    transform        var(--duration-fast) var(--ease-emphasis),
    box-shadow       var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color     var(--duration-base) var(--ease-standard),
    color            var(--duration-base) var(--ease-standard);
}

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

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Variants -------------------------------------------------------------- */

/* Primary — solid gold, ink text. The booking / conversion CTA. */
.btn--primary {
  --_btn-bg: var(--gold-400);
  --_btn-fg: var(--text-on-brand);
  --_btn-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  --_btn-bg: var(--gold-500);
  --_btn-shadow: var(--shadow-gold);
}

/* Secondary — ink outline, fills on hover. Quiet companion to primary. */
.btn--secondary {
  --_btn-bg: transparent;
  --_btn-fg: var(--text-primary);
  --_btn-border: var(--ink-300);
}
.btn--secondary:hover {
  --_btn-bg: var(--ink-900);
  --_btn-fg: var(--text-on-inverse);
  --_btn-border: var(--ink-900);
}

/* Ghost — minimal, for tertiary actions */
.btn--ghost {
  --_btn-bg: transparent;
  --_btn-fg: var(--text-brand);
}
.btn--ghost:hover {
  --_btn-bg: var(--gold-100);
  --_btn-fg: var(--gold-700);
}

/* Accent — citron base tone, for playful / promotional moments */
.btn--accent {
  --_btn-bg: var(--citron-500);
  --_btn-fg: var(--ink-900);
}
.btn--accent:hover { --_btn-bg: var(--citron-600); }

/* On dark surfaces (hero, footer) ----------------------------------------- */
.btn--on-inverse.btn--secondary {
  --_btn-fg: var(--text-on-inverse);
  --_btn-border: var(--border-on-inverse);
}
.btn--on-inverse.btn--secondary:hover {
  --_btn-bg: var(--gold-400);
  --_btn-fg: var(--ink-900);
  --_btn-border: var(--gold-400);
}
.btn--on-inverse.btn--ghost {
  --_btn-fg: var(--gold-300);
}
.btn--on-inverse.btn--ghost:hover {
  --_btn-bg: rgba(219, 187, 95, 0.12);
  --_btn-fg: var(--gold-200);
}

/* --- Sizes ----------------------------------------------------------------- */
.btn--sm {
  font-size: var(--fs-caption);
  padding: var(--space-2) var(--space-4);
}
.btn--lg {
  font-size: var(--fs-body);
  padding: var(--space-4) var(--space-8);
}

/* Icon-only (square-ish, pill) */
.btn--icon {
  padding: var(--space-3);
  aspect-ratio: 1;
}

/* Full width on mobile contexts */
.btn--block { width: 100%; }