/**
 * 统一按钮系统
 *
 * 将 36 种按钮样式简化为 6 种标准样式
 * 基于 shadcn/ui 设计规范
 */

/* ==================== 基础按钮类 ==================== */
.btn,
.shadcn-button,
.unified-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;

  border-radius: var(--radius-md);
  border: 1px solid transparent;

  transition: all var(--transition-fast);
  cursor: pointer;

  user-select: none;
  -webkit-user-select: none;
}

.btn:disabled,
.shadcn-button:disabled,
.unified-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==================== 尺寸变体 (3种) ==================== */

/* Small */
.btn-sm,
.shadcn-button-sm,
.unified-button-sm {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}

/* Medium (默认) */
.btn-md,
.shadcn-button-md,
.unified-button-md,
.shadcn-button-default-size {
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.875rem;
}

/* Large */
.btn-lg,
.shadcn-button-lg,
.unified-button-lg {
  height: 3rem;
  padding: 0 1.5rem;
  font-size: 1rem;
}

/* ==================== 样式变体 (6种) ==================== */

/* 1. Primary (主要操作) */
.btn-primary,
.shadcn-button-primary,
.unified-button-primary {
  background-color: var(--brand-primary);
  color: var(--text-inverse);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.shadcn-button-primary:hover,
.unified-button-primary:hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.btn-primary:active,
.shadcn-button-primary:active,
.unified-button-primary:active {
  background-color: var(--brand-primary-active);
  border-color: var(--brand-primary-active);
}

/* 2. Secondary (次要操作) */
.btn-secondary,
.shadcn-button-secondary,
.unified-button-secondary {
  background-color: var(--neutral-100);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.btn-secondary:hover,
.shadcn-button-secondary:hover,
.unified-button-secondary:hover {
  background-color: var(--neutral-200);
}

/* 3. Outline (边框按钮) */
.btn-outline,
.shadcn-button-outline,
.unified-button-outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.btn-outline:hover,
.shadcn-button-outline:hover,
.unified-button-outline:hover {
  background-color: var(--bg-hover);
}

/* 4. Ghost (幽灵按钮) */
.btn-ghost,
.shadcn-button-ghost,
.unified-button-ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: transparent;
}

.btn-ghost:hover,
.shadcn-button-ghost:hover,
.unified-button-ghost:hover {
  background-color: var(--bg-hover);
}

/* 5. Danger (危险操作) */
.btn-danger,
.shadcn-button-danger,
.unified-button-danger {
  background-color: var(--danger);
  color: var(--text-inverse);
  border-color: var(--danger);
}

.btn-danger:hover,
.shadcn-button-danger:hover,
.unified-button-danger:hover {
  background-color: #dc2626;
}

/* 6. Link (链接样式) */
.btn-link,
.shadcn-button-link,
.unified-button-link {
  background-color: transparent;
  color: var(--brand-primary);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn-link:hover,
.shadcn-button-link:hover,
.unified-button-link:hover {
  color: var(--brand-primary-hover);
}

/* ==================== 组合类（向后兼容）==================== */

/* 默认按钮（等同于 secondary） */
.shadcn-button-default {
  background-color: var(--neutral-100);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.shadcn-button-default:hover {
  background-color: var(--neutral-200);
}

/* ==================== 图标按钮 ==================== */
.btn-icon,
.icon-button {
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.btn-icon.btn-sm,
.icon-button.btn-sm {
  width: 2rem;
  height: 2rem;
}

.btn-icon.btn-lg,
.icon-button.btn-lg {
  width: 3rem;
  height: 3rem;
}

/* ==================== 暗色模式 ==================== */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .shadcn-button-secondary,
[data-theme="dark"] .shadcn-button-default,
[data-theme="dark"] .unified-button-secondary {
  background-color: var(--neutral-800);
  border-color: var(--neutral-700);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .shadcn-button-secondary:hover,
[data-theme="dark"] .shadcn-button-default:hover,
[data-theme="dark"] .unified-button-secondary:hover {
  background-color: var(--neutral-700);
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .shadcn-button-outline:hover,
[data-theme="dark"] .unified-button-outline:hover {
  background-color: var(--neutral-800);
}

[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .shadcn-button-ghost:hover,
[data-theme="dark"] .unified-button-ghost:hover {
  background-color: var(--neutral-800);
}

/* ==================== 使用指南 ==================== */
/*

推荐用法：

1. 主要操作：
   <button class="btn btn-primary btn-md">保存</button>

2. 次要操作：
   <button class="btn btn-secondary btn-md">取消</button>

3. 边框按钮：
   <button class="btn btn-outline btn-sm">编辑</button>

4. 幽灵按钮（工具栏）：
   <button class="btn btn-ghost btn-sm">
     <svg>...</svg>
   </button>

5. 危险操作：
   <button class="btn btn-danger btn-md">删除</button>

6. 链接样式：
   <button class="btn btn-link btn-sm">查看详情</button>

向后兼容：
- shadcn-button 系列继续有效
- unified-button 系列继续有效
- 旧类名自动映射到新样式

*/