/* ==================== 多主题配色方案系统 V3.0 ==================== */
/* 创建时间: 2025-10-10 */
/* 优化重点:
1. 文字颜色统一，不随主题变化
2. 背景色跟随主题切换，模块间有清晰区分
3. 精简为4个核心主题
*/
/* ==================== 全局默认文字颜色（所有主题通用） ==================== */
:root {
/* 文字颜色 - 固定不变 */
--text-primary: #333333; /* 主标题、重要文字 */
--text-secondary: #666666; /* 副标题、次要文字 */
--text-tertiary: #999999; /* 辅助文字 */
--text-light: #CCCCCC; /* 浅色文字、说明 */
--text-white: #FFFFFF; /* 白色文字 */
--text-dark: #000000; /* 深黑色 */
}
/* ==================== 默认主题（专业蓝灰） ==================== */
:root,
[data-theme="default"] {
/* 主色系 */
--primary-color: #2878FF;
--primary-hover: #1d60d5;
--primary-light: rgba(40, 120, 255, 0.1);
--primary-lighter: rgba(40, 120, 255, 0.05);
--primary-dark: #1950ab;
--primary-darker: #154091;
/* 次要色 */
--secondary-color: #444F74;
--secondary-hover: #3a4463;
--secondary-light: rgba(68, 79, 116, 0.1);
--secondary-lighter: rgba(68, 79, 116, 0.05);
--secondary-dark: #343d5c;
/* 强调色 */
--accent-color: #2878FF;
--accent-hover: #1d60d5;
--accent-light: rgba(40, 120, 255, 0.15);
/* 灰色系 */
--gray-color: #B9BFCB;
--gray-hover: #a5acbb;
--gray-light: #f5f7fa;
--gray-lighter: #fafbfc;
--gray-dark: #8f96a3;
/* 背景色系统 - 5种过渡背景（增强对比度） */
--bg-primary: #FFFFFF; /* 纯白 */
--bg-secondary: #F0F4F8; /* 浅灰蓝 - 增强饱和度 */
--bg-tertiary: #E8EEF4; /* 淡灰蓝 - 增强对比 */
--bg-quaternary: #E0E8F0; /* 中浅灰蓝 - 更明显 */
--bg-light-blue: #E3EEFF; /* 淡蓝色 - 更鲜明 */
--bg-dark: #1a1d2e;
/* 模块专用背景色（用于连续模块交替）- 增强对比度 */
--section-bg-1: #FFFFFF; /* 第1个模块 - 纯白 */
--section-bg-2: #F0F4F8; /* 第2个模块 - 浅灰蓝（更明显） */
--section-bg-3: #E8EEF4; /* 第3个模块 - 淡灰蓝 */
--section-bg-4: #E0E8F0; /* 第4个模块 - 中浅灰蓝 */
--section-bg-5: #E3EEFF; /* 第5个模块 - 淡蓝色 */
/* 功能色 */
--success-color: #10B981;
--success-hover: #0ea872;
--success-light: rgba(16, 185, 129, 0.1);
--warning-color: #F59E0B;
--warning-hover: #e38e09;
--warning-light: rgba(245, 158, 11, 0.1);
--error-color: #EF4444;
--error-hover: #e23535;
--error-light: rgba(239, 68, 68, 0.1);
--info-color: #2878FF;
--info-hover: #1d60d5;
--info-light: rgba(40, 120, 255, 0.1);
/* 边框 */
--border-color: #e5e7eb;
--border-light: #f3f4f6;
--border-dark: #B9BFCB;
--border-darker: #9CA3AF;
/* 阴影 */
--shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.18);
/* 客服相关 */
--chat-primary: #2878FF;
--chat-bg: #FFFFFF;
--chat-user-bg: #2878FF;
--chat-bot-bg: #F5F7FA;
--chat-border: #e5e7eb;
/* 通用颜色 */
--white: #FFFFFF;
--black: #000000;
/* 卡片背景（默认白色） */
--card-bg: #FFFFFF;
}
/* ==================== 主题1：清新浅蓝 ==================== */
[data-theme="theme1"] {
/* 主色系 */
--primary-color: #286FB4;
--primary-hover: #1f5a94;
--primary-light: rgba(40, 111, 180, 0.1);
--primary-lighter: rgba(40, 111, 180, 0.05);
--primary-dark: #1a4d7d;
--primary-darker: #154066;
/* 次要色 */
--secondary-color: #B0DDE4;
--secondary-hover: #95c9d1;
--secondary-light: rgba(176, 221, 228, 0.15);
--secondary-lighter: rgba(176, 221, 228, 0.08);
--secondary-dark: #7ab5be;
/* 强调色 */
--accent-color: #DF4C73;
--accent-hover: #c93d5f;
--accent-light: rgba(223, 76, 115, 0.15);
/* 灰色系 */
--gray-color: #A8CBD1;
--gray-hover: #95c9d1;
--gray-light: #E2F0F9;
--gray-lighter: #F0F8FC;
--gray-dark: #7ab5be;
/* 背景色系统 - 清新蓝色调（增强对比度） */
--bg-primary: #FFFFFF;
--bg-secondary: #E8F4FA; /* 淡青蓝 - 增强饱和度 */
--bg-tertiary: #D9EBF5; /* 浅青蓝 - 更明显 */
--bg-quaternary: #C5E2F0; /* 中青蓝 - 更鲜明 */
--bg-light-blue: #D0E8F5; /* 浅蓝 - 更突出 */
--bg-dark: #286FB4;
/* 模块专用背景色（增强对比度） */
--section-bg-1: #FFFFFF;
--section-bg-2: #E8F4FA; /* 淡青蓝（更明显） */
--section-bg-3: #D9EBF5; /* 浅青蓝 */
--section-bg-4: #D0E8F5; /* 中青蓝 */
--section-bg-5: #C5E2F0; /* 深青蓝 */
/* 功能色 */
--success-color: #7ab5be;
--success-hover: #65a0a8;
--success-light: rgba(122, 181, 190, 0.1);
--warning-color: #DF4C73;
--warning-hover: #c93d5f;
--warning-light: rgba(223, 76, 115, 0.1);
--error-color: #DF4C73;
--error-hover: #c93d5f;
--error-light: rgba(223, 76, 115, 0.1);
--info-color: #286FB4;
--info-hover: #1f5a94;
--info-light: rgba(40, 111, 180, 0.1);
/* 边框 */
--border-color: #D9EBF5;
--border-light: #E8F4FA;
--border-dark: #B0DDE4;
--border-darker: #95c9d1;
/* 阴影 */
--shadow-xs: 0 1px 4px rgba(40, 111, 180, 0.06);
--shadow-sm: 0 2px 8px rgba(40, 111, 180, 0.1);
--shadow-md: 0 4px 16px rgba(40, 111, 180, 0.15);
--shadow-lg: 0 8px 24px rgba(40, 111, 180, 0.2);
--shadow-xl: 0 12px 32px rgba(40, 111, 180, 0.25);
/* 客服相关 */
--chat-primary: #286FB4;
--chat-bg: #FFFFFF;
--chat-user-bg: #286FB4;
--chat-bot-bg: #E8F4FA;
--chat-border: #D9EBF5;
/* 通用颜色 */
--white: #FFFFFF;
--black: #000000;
/* 卡片背景（默认白色） */
--card-bg: #FFFFFF;
}
/* ==================== 主题2：经典蓝调 ==================== */
[data-theme="theme2"] {
/* 主色系 - 加深蓝色 */
--primary-color: #2B5A9E;
--primary-hover: #234a85;
--primary-light: rgba(43, 90, 158, 0.1);
--primary-lighter: rgba(43, 90, 158, 0.05);
--primary-dark: #1d3d6f;
--primary-darker: #16305a;
/* 次要色 - 加深蓝色 */
--secondary-color: #4A8FE8;
--secondary-hover: #3a7acc;
--secondary-light: rgba(74, 143, 232, 0.15);
--secondary-lighter: rgba(74, 143, 232, 0.08);
--secondary-dark: #2d6bb5;
/* 强调色 */
--accent-color: #B9732F;
--accent-hover: #9d6028;
--accent-light: rgba(185, 115, 47, 0.15);
/* 灰色系 - 加深蓝色 */
--gray-color: #6A9DD6;
--gray-hover: #5788c4;
--gray-light: #EDF6FF;
--gray-lighter: #F5FAFF;
--gray-dark: #4876b3;
/* 背景色系统 - 蓝白调（增强对比度） */
--bg-primary: #FFFFFF;
--bg-secondary: #F5F9FF; /* 淡蓝白 - 柔和且有存在感 */
--bg-tertiary: #EDF6FF; /* 淡蓝 - 更明显 */
--bg-quaternary: #DEF0FF; /* 中蓝 - 更鲜明 */
--bg-light-blue: #D0EAFF; /* 鲜蓝 - 更突出 */
--bg-dark: #2B5A9E;
/* 模块专用背景色（增强对比度） */
--section-bg-1: #FFFFFF;
--section-bg-2: #F5F9FF; /* 淡蓝白（柔和且有存在感） */
--section-bg-3: #EDF6FF; /* 淡蓝 */
--section-bg-4: #DEF0FF; /* 中蓝 */
--section-bg-5: #D0EAFF; /* 鲜蓝 */
/* 功能色 - 加深蓝色 */
--success-color: #3a7acc;
--success-hover: #2d6bb5;
--success-light: rgba(58, 122, 204, 0.1);
--warning-color: #B9732F;
--warning-hover: #9d6028;
--warning-light: rgba(185, 115, 47, 0.1);
--error-color: #c95f2b;
--error-hover: #b05325;
--error-light: rgba(201, 95, 43, 0.1);
--info-color: #2B5A9E;
--info-hover: #234a85;
--info-light: rgba(43, 90, 158, 0.1);
/* 边框 - 加深蓝色 */
--border-color: #E5F2FF;
--border-light: #F5FAFF;
--border-dark: #6A9DD6;
--border-darker: #4A8FE8;
/* 阴影 - 加深蓝色 */
--shadow-xs: 0 1px 4px rgba(43, 90, 158, 0.06);
--shadow-sm: 0 2px 8px rgba(43, 90, 158, 0.1);
--shadow-md: 0 4px 16px rgba(43, 90, 158, 0.15);
--shadow-lg: 0 8px 24px rgba(43, 90, 158, 0.2);
--shadow-xl: 0 12px 32px rgba(43, 90, 158, 0.25);
/* 客服相关 - 加深蓝色 */
--chat-primary: #2B5A9E;
--chat-bg: #FFFFFF;
--chat-user-bg: #2B5A9E;
--chat-bot-bg: #EDF6FF;
--chat-border: #E5F2FF;
/* 通用颜色 */
--white: #FFFFFF;
--black: #000000;
/* 卡片背景（默认白色） */
--card-bg: #FFFFFF;
}
/* ==================== 主题3：海军蓝 ==================== */
[data-theme="theme3"] {
/* 主色系 */
--primary-color: #051747;
--primary-hover: #030f32;
--primary-light: rgba(5, 23, 71, 0.1);
--primary-lighter: rgba(5, 23, 71, 0.05);
--primary-dark: #020a24;
--primary-darker: #01051a;
/* 次要色 */
--secondary-color: #535F80;
--secondary-hover: #444e6a;
--secondary-light: rgba(83, 95, 128, 0.15);
--secondary-lighter: rgba(83, 95, 128, 0.08);
--secondary-dark: #3a4357;
/* 强调色 */
--accent-color: #081F62;
--accent-hover: #06184a;
--accent-light: rgba(8, 31, 98, 0.15);
/* 灰色系 */
--gray-color: #7B8AAA;
--gray-hover: #6a7897;
--gray-light: #E7E9F0;
--gray-lighter: #F2F4F8;
--gray-dark: #5a6884;
/* 背景色系统 - 专业稳重（增强对比度） */
--bg-primary: #FFFFFF;
--bg-secondary: #F0F2F7; /* 浅灰白 - 增强饱和度 */
--bg-tertiary: #E5E8F0; /* 淡蓝灰 - 更明显 */
--bg-quaternary: #DDE1EC; /* 中蓝灰 - 更鲜明 */
--bg-light-blue: #D8DDE9; /* 深蓝灰 - 更突出 */
--bg-dark: #051747;
/* 模块专用背景色（增强对比度） */
--section-bg-1: #FFFFFF;
--section-bg-2: #F0F2F7; /* 浅灰白（更明显） */
--section-bg-3: #E5E8F0; /* 淡蓝灰 */
--section-bg-4: #DDE1EC; /* 中蓝灰 */
--section-bg-5: #D8DDE9; /* 深蓝灰 */
/* 功能色 */
--success-color: #435E8C;
--success-hover: #355077;
--success-light: rgba(67, 94, 140, 0.1);
--warning-color: #535F80;
--warning-hover: #444e6a;
--warning-light: rgba(83, 95, 128, 0.1);
--error-color: #081F62;
--error-hover: #06184a;
--error-light: rgba(8, 31, 98, 0.1);
--info-color: #051747;
--info-hover: #030f32;
--info-light: rgba(5, 23, 71, 0.1);
/* 边框 */
--border-color: #E7E9F0;
--border-light: #F2F4F8;
--border-dark: #7B8AAA;
--border-darker: #535F80;
/* 阴影 */
--shadow-xs: 0 1px 4px rgba(5, 23, 71, 0.06);
--shadow-sm: 0 2px 8px rgba(5, 23, 71, 0.1);
--shadow-md: 0 4px 16px rgba(5, 23, 71, 0.15);
--shadow-lg: 0 8px 24px rgba(5, 23, 71, 0.2);
--shadow-xl: 0 12px 32px rgba(5, 23, 71, 0.25);
/* 客服相关 */
--chat-primary: #051747;
--chat-bg: #FFFFFF;
--chat-user-bg: #051747;
--chat-bot-bg: #E7E9F0;
--chat-border: #D8DDED;
/* 通用颜色 */
--white: #FFFFFF;
--black: #000000;
/* 卡片背景（默认白色） */
--card-bg: #FFFFFF;
}
/* ==================== 模块背景色应用示例 ==================== */
/*
为相邻模块设置不同背景色，确保视觉区分清晰
示例用法：
CSS:
.section-alt-1 { background: var(--section-bg-1); }
.section-alt-2 { background: var(--section-bg-2); }
.section-alt-3 { background: var(--section-bg-3); }
*/