/*
  Longevity Suite — Unified Button Component
  Based on the "Open App" button from Longevity Hub.
  All variants share the same base interaction pattern.
*/

/* ─── Base ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: transparent;
  color: var(--purple);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    border-color .22s ease,
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    transform .1s ease;
}
.btn:hover {
  border-color: var(--purple);
  background: rgba(168, 85, 247, 0.1);
  color: #fff;
  box-shadow: 0 0 24px -6px var(--glow-purple);
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[disabled] {
  opacity: .35;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* ─── Sizes ─────────────────────────────────────────────── */
.btn-sm {
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  gap: 6px;
}
.btn-lg {
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 12px;
  gap: 10px;
}
/* Icon-only: square, centered */
.btn-icon {
  padding: 9px;
  border-radius: 9px;
  aspect-ratio: 1;
  gap: 0;
}
.btn-icon.btn-sm { padding: 6px; border-radius: 7px; }
.btn-icon.btn-lg { padding: 12px; border-radius: 11px; }

/* Full-width */
.btn-full { width: 100%; }

/* ─── Variants ──────────────────────────────────────────── */

/* Solid — filled purple gradient */
.btn-solid {
  background: linear-gradient(135deg, var(--purple), var(--purple-d));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 20px -8px var(--glow-purple);
}
.btn-solid:hover {
  background: linear-gradient(135deg, #bf7bff, var(--purple));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 34px -6px var(--glow-purple);
}

/* Subtle — very faint, low-key secondary */
.btn-subtle {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-soft);
}
.btn-subtle:hover {
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.07);
  color: var(--ink);
  box-shadow: none;
}

/* Danger — rose/red */
.btn-danger {
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--rose);
}
.btn-danger:hover {
  border-color: var(--rose);
  background: rgba(248, 113, 113, 0.1);
  color: #fff;
  box-shadow: 0 0 24px -6px rgba(248, 113, 113, 0.4);
}

/* Success / done state */
.btn-done {
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--teal);
}
.btn-done:hover {
  border-color: var(--teal);
  background: rgba(52, 211, 153, 0.1);
  color: #fff;
  box-shadow: 0 0 24px -6px var(--glow-teal);
}

/* Amber — warm accent */
.btn-amber {
  border-color: rgba(251, 191, 36, 0.4);
  color: var(--amber);
}
.btn-amber:hover {
  border-color: var(--amber);
  background: rgba(251, 191, 36, 0.1);
  color: #fff;
  box-shadow: 0 0 24px -6px var(--glow-amber);
}

/* ─── Arrow decoration ──────────────────────────────────── */
.btn-arrow {
  display: inline-block;
  transition: transform .22s ease;
}
.btn:hover .btn-arrow { transform: translateX(4px); }