/* -------------------------------------------------------------------
 * 1. 配置层 (Configuration)
 * 定义颜色变量和通用参数。
 * ------------------------------------------------------------------- */
:root {
    /* 主题色板: Primary (P) */
    --theme-primary: var(--c1);
    --theme-primary-dark: var(--c2);
    --theme-text-light: #ffffff;
    
    /* 主题色板: Secondary (S) */
    --theme-secondary: #6c757d;
    --theme-secondary-dark: #5a6268;
    
    /* 主题色板: Danger (D) */
    --theme-danger: #dc3545;
    --theme-danger-dark: #c82333;
    
    /* 通用参数 */
    --btn-transition: 0.3s;
    --btn-radius: 5px;
    --btn-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}


/* -------------------------------------------------------------------
 * 2. 基础层 (Base) - .btn
 * 定义所有按钮共享的结构和样式。
 * ------------------------------------------------------------------- */
.btn {
    /* 结构与布局 */
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    gap: 4px; /* 图标与文本间距 */
    vertical-align: middle;
    
    /* 样式与尺寸 */
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    
    /* 颜色占位符 */
    background-color: var(--btn-bg); 
    color: var(--btn-text);

    /* 修复 a 标签颜色继承 */
    color: var(--btn-text);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    
    /* 动画过渡属性：颜色、阴影和 Padding */
    -webkit-transition-duration: var(--btn-transition);
    transition-duration: var(--btn-transition);
    -webkit-transition-property: background-color, box-shadow, padding;
    transition-property: background-color, box-shadow, padding; 
}

/* 修复 a 标签伪类颜色 */
.btn:link,
.btn:visited {
    color: var(--btn-text);
}

/* 图标兼容性 (SVG & Font Icons) */
.btn svg,
.btn .iconpark-icon,
.btn i {
    width: 1.2em; 
    height: 1.2em;
    fill: currentColor;
    flex-shrink: 0;
}


/* -------------------------------------------------------------------
 * 3. 组件层 (Components) - 主题类
 * 定义不同主题的颜色映射和 Hover 效果。
 * ------------------------------------------------------------------- */

/* --- Primary 主题 (.btn-p) */
.btn-p {
    --btn-bg: var(--theme-primary);
    --btn-text: var(--theme-text-light);
    --btn-hover-bg: var(--theme-primary-dark);
}
.btn-p:active, .btn-p:focus, .btn-p:hover {
    background-color: var(--btn-hover-bg);
    box-shadow: var(--btn-shadow);
    padding-left:40px; /* 触发 padding 动画 */
    padding-right:40px; /* 触发 padding 动画 */
}


/* --- Secondary 主题 (.btn-s) */
.btn-s {
    --btn-bg: var(--theme-secondary);
    --btn-text: var(--theme-text-light);
    --btn-hover-bg: var(--theme-secondary-dark);
}
.btn-s:active, .btn-s:focus, .btn-s:hover {
    background-color: var(--btn-hover-bg);
    box-shadow: var(--btn-shadow);
    padding-left:40px; /* 触发 padding 动画 */
    padding-right:40px; /* 触发 padding 动画 */
}


/* --- Danger 主题 (.btn-d) */
.btn-d {
    --btn-bg: var(--theme-danger);
    --btn-text: var(--theme-text-light);
    --btn-hover-bg: var(--theme-danger-dark);
}
.btn-d:active, .btn-d:focus, .btn-d:hover {
    background-color: var(--btn-hover-bg);
    box-shadow: var(--btn-shadow);
}


/* --- 边界按钮 (.btn-o) */
.btn-o {
    --btn-bg: transparent;
    --btn-text: var(--theme-primary);
    border-color: var(--theme-primary);
    --btn-hover-bg: var(--theme-primary);
}
.btn-o:active, .btn-o:focus, .btn-o:hover {
    color: var(--theme-text-light); 
    background-color: var(--btn-hover-bg);
    box-shadow: var(--btn-shadow);
    padding-left:40px; /* 触发 padding 动画 */
    padding-right:40px; /* 触发 padding 动画 */
}


/* --- 纯文字链接按钮 (.btn-t) */
.btn-t {
    padding:0;
    --btn-bg: transparent;
    --btn-text: var(--theme-primary);
    --btn-hover-bg: transparent;
    border-color: transparent;

    /* 仅过渡颜色 */
    -webkit-transition-property: color; 
    transition-property: color; 
}
.btn-t:active, .btn-t:focus, .btn-t:hover {
    color: var(--theme-primary-dark); 
    box-shadow: none;
}


/* -------------------------------------------------------------------
 * 4. 辅助修饰类 (Modifiers)
 * ------------------------------------------------------------------- */

/* --- 大圆角修饰符 (.round) */
.round {
    border-radius: 50px !important;
}


/* -------------------------------------------------------------------
 * 5. 辅助层 (Trumps) - 媒体查询优化
 * ------------------------------------------------------------------- */

/* 媒体查询 : 极小屏幕/手机 (增大点击区域) */
@media (max-width: 576px) { 
    .btn {
        padding: 8px 24px; 
        font-size: 15px;
    }
    .btn-t{
        padding:0;
    }
}