/**
 * 统一按钮样式系统
 *
 * 设计理念：3种按钮设计风格，根据功能场景选择
 * 创建时间：2025-10-30
 *
 * 按钮风格分类：
 * 1. Solid（实心）- 用于主要操作、强调行为
 * 2. Outline（描边）- 用于次要操作、辅助行为
 * 3. Ghost（幽灵）- 用于不太重要的操作、轻量交互
 */

/* ============================================================================
   风格1：Solid 实心按钮
   适用场景：主要操作、提交表单、确认行为、创建新项
   ============================================================================ */

.btn-solid {
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Solid 按钮颜色变体 */
.btn-solid.btn-primary {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.btn-solid.btn-primary:hover {
    background: var(--secondary-color, #2563eb);
}

.btn-solid.btn-success {
    background: #10b981;
    color: white;
}

.btn-solid.btn-success:hover {
    background: #059669;
}

.btn-solid.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-solid.btn-danger:hover {
    background: #dc2626;
}

.btn-solid.btn-warning {
    background: #f59e0b;
    color: white;
}

.btn-solid.btn-warning:hover {
    background: #d97706;
}

/* ============================================================================
   风格2：Outline 描边按钮
   适用场景：次要操作、取消按钮、多选项之一、过滤器
   ============================================================================ */

.btn-outline {
    padding: 0.7rem 1.5rem;
    background: white;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.9rem;
    border: 1.5px solid currentColor;
}

/* Outline 按钮颜色变体 */
.btn-outline.btn-primary {
    color: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
}

.btn-outline.btn-primary:hover {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.btn-outline.btn-secondary {
    color: #6b7280;
    border-color: #e5e7eb;
}

.btn-outline.btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #4b5563;
}

.btn-outline.btn-success {
    color: #10b981;
    border-color: #10b981;
}

.btn-outline.btn-success:hover {
    background: #10b981;
    color: white;
}

.btn-outline.btn-danger {
    color: #ef4444;
    border-color: #ef4444;
}

.btn-outline.btn-danger:hover {
    background: #ef4444;
    color: white;
}

/* ============================================================================
   风格3：Ghost 幽灵按钮
   适用场景：不重要的操作、链接式按钮、菜单项、导航
   ============================================================================ */

.btn-ghost {
    padding: 0.7rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Ghost 按钮颜色变体 */
.btn-ghost.btn-primary {
    color: var(--primary-color, #3b82f6);
}

.btn-ghost.btn-primary:hover {
    background: rgba(59, 130, 246, 0.1);
}

.btn-ghost.btn-secondary {
    color: #6b7280;
}

.btn-ghost.btn-secondary:hover {
    background: #f3f4f6;
    color: #4b5563;
}

.btn-ghost.btn-danger {
    color: #ef4444;
}

.btn-ghost.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ============================================================================
   兼容旧类名（逐步迁移）
   ============================================================================ */

.btn-modern {
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.9rem;
}

/* 旧 btn-primary 映射到 solid */
.btn-modern.btn-primary,
.btn-primary:not(.btn-solid):not(.btn-outline):not(.btn-ghost) {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.btn-modern.btn-primary:hover,
.btn-primary:not(.btn-solid):not(.btn-outline):not(.btn-ghost):hover {
    background: var(--secondary-color, #2563eb);
}

/* 旧 btn-secondary 映射到 outline */
.btn-modern.btn-secondary,
.btn-secondary:not(.btn-solid):not(.btn-outline):not(.btn-ghost) {
    background: white;
    color: var(--primary-color, #3b82f6);
    border: 1.5px solid #e5e7eb;
}

.btn-modern.btn-secondary:hover,
.btn-secondary:not(.btn-solid):not(.btn-outline):not(.btn-ghost):hover {
    background: #f9fafb;
    border-color: var(--primary-color, #3b82f6);
}

/* ============================================================================
   按钮尺寸（适用于所有风格）
   ============================================================================ */

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

.btn-lg {
    padding: 0.9rem 2rem;
    font-size: 1rem;
    border-radius: 10px;
}

/* ============================================================================
   按钮状态（适用于所有风格）
   ============================================================================ */

.btn-solid:disabled,
.btn-outline:disabled,
.btn-ghost:disabled,
.btn-modern:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-solid:active,
.btn-outline:active,
.btn-ghost:active,
.btn-modern:active {
    transform: scale(0.98);
}

/* ============================================================================
   按钮组（适用于所有风格）
   ============================================================================ */

.btn-group {
    display: inline-flex;
    gap: 0.5rem;
}

.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ============================================================================
   使用示例和注释
   ============================================================================ */

/*
使用指南：

1. Solid 实心按钮（强调）：
   <button class="btn-solid btn-primary">提交</button>
   <button class="btn-solid btn-success">确认</button>
   <button class="btn-solid btn-danger">删除</button>

2. Outline 描边按钮（次要）：
   <button class="btn-outline btn-primary">查看详情</button>
   <button class="btn-outline btn-secondary">取消</button>
   <button class="btn-outline btn-danger">拒绝</button>

3. Ghost 幽灵按钮（轻量）：
   <button class="btn-ghost btn-primary">了解更多</button>
   <button class="btn-ghost btn-secondary">跳过</button>

尺寸变体：
   <button class="btn-solid btn-primary btn-sm">小按钮</button>
   <button class="btn-outline btn-secondary btn-lg">大按钮</button>

按钮组：
   <div class="btn-group">
       <button class="btn-solid btn-primary">保存</button>
       <button class="btn-outline btn-secondary">取消</button>
   </div>
*/