/*
 * components/button.css — 统一按钮组件
 *
 * 使用：在 HTML 引入 /components/button.css 后，给 <button> 加 class：
 *   <button class="c-btn c-btn-primary">主要按钮</button>
 *   <button class="c-btn c-btn-secondary">次要按钮</button>
 *   <button class="c-btn c-btn-danger">危险操作</button>
 *   <button class="c-btn c-btn-success">成功操作</button>
 *
 * 依赖：/theme.css（必须先引用）
 */

/* ========== 基础按钮 ========== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text-main);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

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

/* ========== 主按钮（品牌色） ========== */

.c-btn-primary {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}

.c-btn-primary:hover:not(:disabled) {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  box-shadow: 0 2px 8px var(--color-brand-glow);
}

.c-btn-primary:active:not(:disabled) {
  background: var(--color-brand-hover);
  transform: translateY(1px);
}

/* ========== 次按钮（中性） ========== */

.c-btn-secondary {
  background: var(--color-bg-card);
  color: var(--color-text-main);
  border-color: var(--color-line-strong);
}

.c-btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-soft);
  border-color: var(--color-text-muted);
}

/* ========== 危险按钮（删除） ========== */

.c-btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.c-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18);
}

/* ========== 成功按钮（确认） ========== */

.c-btn-success {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}

.c-btn-success:hover:not(:disabled) {
  background: #047857;
  border-color: #047857;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.18);
}

/* ========== 幽灵按钮（仅文字） ========== */

.c-btn-ghost {
  background: transparent;
  color: var(--color-text-main);
  border-color: transparent;
}

.c-btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-soft);
}

/* ========== 尺寸变体 ========== */

.c-btn-sm {
  padding: var(--space-1) var(--space-3);
  min-height: 28px;
  font-size: var(--font-size-sm);
}

.c-btn-lg {
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  font-size: var(--font-size-md);
}

/* ========== 块级按钮（占满宽度） ========== */

.c-btn-block {
  display: flex;
  width: 100%;
}

/* ========== 图标按钮（圆形） ========== */

.c-btn-icon {
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.c-btn-icon.c-btn-sm { width: 28px; height: 28px; }
.c-btn-icon.c-btn-lg { width: 44px; height: 44px; }