/* ============================================================
   Buttons — primary / ghost / outline
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .02em;
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 4px 14px -4px rgba(217, 119, 23, .5);
}
.btn-primary:hover {
  background: var(--orange-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(217, 119, 23, .6);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .4);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair);
}
.btn-outline:hover {
  border-color: var(--ink-2);
  background: var(--paper-2);
}