/* ---------------------------------------------------------
   Buttons — shared by public site and admin panel
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-base);
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-accent-500); color: var(--color-charcoal); }
.btn-primary:hover { background: var(--color-accent-600); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn-outline:hover { background: var(--color-white); color: var(--color-primary-900); }
/* Variant for use on light/sand backgrounds instead of dark hero sections */
.btn-outline.btn-on-light { border-color: var(--color-primary-900); color: var(--color-primary-900); }
.btn-outline.btn-on-light:hover { background: var(--color-primary-900); color: var(--color-white); }
.btn-dark { background: var(--color-primary-900); color: var(--color-white); }
.btn-dark:hover { background: var(--color-primary-800); }
.btn-block { width: 100%; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-danger { background: var(--color-error); color: var(--color-white); }

/* Comfortable tap targets on touch screens */
@media (max-width: 560px) {
  .btn-sm { padding: 12px 20px; min-height: 44px; }
}