/**
 * 金股讯网站主题色调配置
 * 统一管理网站的色彩系统，确保视觉一致性
 * 使用CSS变量（Custom Properties）实现全局颜色管理
 */

:root {
    /* ========== 主题色调 ========== */
    /* 深色 - 用于强调、hover状态等 */
    --theme-color-dark: #CC5B1D;
    
    /* 主色 - 网站主要品牌色，用于按钮、链接、重要元素 */
    --theme-color-primary: #FF7224;
    
    /* 浅色系列 - 用于背景、辅助元素、渐变等 */
    --theme-color-light-1: #FF9C66;  /* 浅色1 - 次要按钮、图标 */
    --theme-color-light-2: #FFB992;  /* 浅色2 - 辅助背景 */
    --theme-color-light-3: #FFD5BD;  /* 浅色3 - 浅背景 */
    --theme-color-light-4: #FFE3D3;  /* 浅色4 - 极浅背景 */
    --theme-color-light-5: #FFF1E9;  /* 浅色5 - 最浅背景、卡片背景 */

    /* ========== 语义化颜色别名 ========== */
    /* 方便在不同场景下使用 */
    --color-brand: var(--theme-color-primary);        /* 品牌色 */
    --color-brand-hover: var(--theme-color-dark);     /* 品牌色悬停 */
    --color-brand-light: var(--theme-color-light-1);  /* 品牌色浅色版 */
    
    /* 按钮相关 */
    --btn-primary-bg: var(--theme-color-primary);
    --btn-primary-hover: var(--theme-color-dark);
    --btn-secondary-bg: var(--theme-color-light-1);
    --btn-secondary-hover: var(--theme-color-primary);
    
    /* 链接相关 */
    --link-color: var(--theme-color-primary);
    --link-hover: var(--theme-color-dark);
    
    /* 背景相关 */
    --bg-primary: var(--theme-color-light-5);        /* 主背景 */
    --bg-secondary: var(--theme-color-light-4);      /* 次要背景 */
    --bg-highlight: var(--theme-color-light-3);      /* 高亮背景 */
    
    /* 边框相关 */
    --border-primary: var(--theme-color-primary);
    --border-light: var(--theme-color-light-2);
}

/* ========== 通用工具类 ========== */
/* 文本颜色 */
.text-primary { color: var(--theme-color-primary) !important; }
.text-dark { color: var(--theme-color-dark) !important; }
.text-light-1 { color: var(--theme-color-light-1) !important; }
.text-light-2 { color: var(--theme-color-light-2) !important; }

/* 背景颜色 */
.bg-primary { background-color: var(--theme-color-primary) !important; }
.bg-dark { background-color: var(--theme-color-dark) !important; }
.bg-light-1 { background-color: var(--theme-color-light-1) !important; }
.bg-light-2 { background-color: var(--theme-color-light-2) !important; }
.bg-light-3 { background-color: var(--theme-color-light-3) !important; }
.bg-light-4 { background-color: var(--theme-color-light-4) !important; }
.bg-light-5 { background-color: var(--theme-color-light-5) !important; }

/* 边框颜色 */
.border-primary { border-color: var(--theme-color-primary) !important; }
.border-dark { border-color: var(--theme-color-dark) !important; }
.border-light-1 { border-color: var(--theme-color-light-1) !important; }
.border-light-2 { border-color: var(--theme-color-light-2) !important; }

/* ========== 按钮样式 ========== */
/* 主要按钮 */
.btn-theme-primary {
    background-color: var(--btn-primary-bg);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-theme-primary:hover {
    background-color: var(--btn-primary-hover);
}

.btn-theme-primary:active {
    opacity: 0.8;
}

/* 次要按钮 */
.btn-theme-secondary {
    background-color: var(--btn-secondary-bg);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-theme-secondary:hover {
    background-color: var(--btn-secondary-hover);
}

/* 轮廓按钮 */
.btn-theme-outline {
    background-color: transparent;
    color: var(--theme-color-primary);
    border: 1px solid var(--theme-color-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-theme-outline:hover {
    background-color: var(--theme-color-primary);
    color: #ffffff;
}

/* ========== 链接样式 ========== */
a.theme-link {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a.theme-link:hover {
    color: var(--link-hover);
}

/* ========== 渐变背景 ========== */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--theme-color-primary), var(--theme-color-light-1));
}

.bg-gradient-light {
    background: linear-gradient(135deg, var(--theme-color-light-4), var(--theme-color-light-5));
}

.bg-gradient-full {
    background: linear-gradient(135deg, 
        var(--theme-color-dark), 
        var(--theme-color-primary), 
        var(--theme-color-light-1)
    );
}

/* ========== 卡片样式 ========== */
.card-theme {
    background-color: var(--bg-primary);
    border: 1px solid var(--theme-color-light-3);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.card-theme:hover {
    box-shadow: 0 4px 12px rgba(255, 114, 36, 0.15);
    border-color: var(--theme-color-light-2);
}

/* ========== 输入框样式 ========== */
.input-theme {
    border-bottom: 1px solid var(--theme-color-light-2);
    transition: border-color 0.3s ease;
}

.input-theme:focus {
    border-bottom-color: var(--theme-color-primary);
    outline: none;
}

/* ========== 标签/徽章样式 ========== */
.badge-theme {
    background-color: var(--theme-color-primary);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.badge-theme-light {
    background-color: var(--theme-color-light-3);
    color: var(--theme-color-dark);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* ========== 分割线样式 ========== */
.divider-theme {
    border-top: 1px solid var(--theme-color-light-3);
    margin: 16px 0;
}

/* ========== 阴影效果 ========== */
.shadow-theme-sm {
    box-shadow: 0 2px 8px rgba(255, 114, 36, 0.1);
}

.shadow-theme-md {
    box-shadow: 0 4px 12px rgba(255, 114, 36, 0.15);
}

.shadow-theme-lg {
    box-shadow: 0 8px 24px rgba(255, 114, 36, 0.2);
}

/* ========== 悬停效果 ========== */
.hover-theme-bg:hover {
    background-color: var(--theme-color-light-5);
    transition: background-color 0.3s ease;
}

.hover-theme-text:hover {
    color: var(--theme-color-primary);
    transition: color 0.3s ease;
}

/* ========== 选中状态 ========== */
.active-theme {
    color: var(--theme-color-primary) !important;
    border-bottom: 2px solid var(--theme-color-primary);
}

/* ========== Layui 弹窗按钮样式覆盖 ========== */
/* 覆盖 layui layer 弹窗按钮颜色，使用网站主色调 */
/* 使用更具体的选择器确保覆盖所有弹窗类型（alert、confirm、prompt等） */
/* 提高优先级，确保覆盖 layui 默认样式和内联样式 */
body .layui-layer-btn .layui-layer-btn0,
body a.layui-layer-btn0,
body .layui-layer-btn0,
.layui-layer-btn .layui-layer-btn0,
a.layui-layer-btn0,
.layui-layer-btn0 {
    background-color: var(--theme-color-primary) !important;
    border-color: var(--theme-color-primary) !important;
    color: #ffffff !important;
}

body .layui-layer-btn .layui-layer-btn0:hover,
body a.layui-layer-btn0:hover,
body .layui-layer-btn0:hover,
.layui-layer-btn .layui-layer-btn0:hover,
a.layui-layer-btn0:hover,
.layui-layer-btn0:hover {
    background-color: var(--theme-color-dark) !important;
    border-color: var(--theme-color-dark) !important;
    color: #ffffff !important;
}

body .layui-layer-btn .layui-layer-btn0:active,
body a.layui-layer-btn0:active,
body .layui-layer-btn0:active,
.layui-layer-btn .layui-layer-btn0:active,
a.layui-layer-btn0:active,
.layui-layer-btn0:active {
    background-color: var(--theme-color-dark) !important;
    border-color: var(--theme-color-dark) !important;
    color: #ffffff !important;
    opacity: 0.9;
}

body .layui-layer-btn .layui-layer-btn0:focus,
body a.layui-layer-btn0:focus,
body .layui-layer-btn0:focus,
.layui-layer-btn .layui-layer-btn0:focus,
a.layui-layer-btn0:focus,
.layui-layer-btn0:focus {
    background-color: var(--theme-color-primary) !important;
    border-color: var(--theme-color-primary) !important;
    color: #ffffff !important;
}

/* 次要按钮（取消按钮）保持原有样式或使用浅色 */
body .layui-layer-btn .layui-layer-btn1,
body a.layui-layer-btn1,
body .layui-layer-btn1,
.layui-layer-btn .layui-layer-btn1,
a.layui-layer-btn1,
.layui-layer-btn1 {
    background-color: #f5f5f5 !important;
    border-color: #d2d2d2 !important;
    color: #333 !important;
}

body .layui-layer-btn .layui-layer-btn1:hover,
body a.layui-layer-btn1:hover,
body .layui-layer-btn1:hover,
.layui-layer-btn .layui-layer-btn1:hover,
a.layui-layer-btn1:hover,
.layui-layer-btn1:hover {
    background-color: #e6e6e6 !important;
    border-color: #c0c0c0 !important;
    color: #333 !important;
}