/* ============================================================
   组件库 — 按钮 (Button)
   变体：primary / secondary / ghost / danger / link
   尺寸：md / sm / lg
   状态：default / hover / active / focus-visible / disabled / loading
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-5);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  user-select: none; white-space: nowrap;
  font-family: var(--font-body);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* 尺寸 */
.btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: 52px; padding: 0 var(--space-7); font-size: var(--text-lg); }
.btn--block { width: 100%; }

/* 主按钮 */
.btn--primary { background: var(--brand-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0) scale(0.97); }

/* 次按钮 — 柔和描边 */
.btn--secondary { background: var(--color-surface); color: var(--color-text-strong); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50); }

/* 幽灵按钮 */
.btn--ghost { background: transparent; color: var(--color-text-strong); }
.btn--ghost:hover { background: var(--color-surface-dim); }

/* 危险动作用于交易取消等 */
.btn--danger { background: var(--error-500); color: #fff; }
.btn--danger:hover { background: #dc2626; }

/* 链接按钮 */
.btn--link { background: transparent; color: var(--accent-500); min-height: auto; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.btn--link:hover { text-decoration: underline; }

/* 图标按钮 — 圆形，用于导航/收藏等 */
.btn--icon {
  width: var(--touch-min); height: var(--touch-min); min-height: var(--touch-min);
  padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-text-strong);
}
.btn--icon:hover { background: var(--color-surface-dim); color: var(--brand-600); }

/* 加载中状态 */
.btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }