/* 品牌色变量系统 */ :root { /* ========== 主品牌色系 ========== */ --primary-color: #4d7dff; /* 主品牌色 - 蓝色 */ --primary-light: #7da3ff; /* 主色-浅 */ --primary-lighter: #b3d1ff; /* 主色-更浅 */ --primary-dark: #2d5bff; /* 主色-深 */ --primary-darker: #1a47ff; /* 主色-更深 */ /* 主色透明度变量 */ --primary-alpha-10: rgba(77, 125, 255, 0.1); /* 主色 10% 透明度 */ --primary-alpha-15: rgba(77, 125, 255, 0.15); /* 主色 15% 透明度 */ --primary-alpha-20: rgba(77, 125, 255, 0.2); /* 主色 20% 透明度 */ --primary-alpha-30: rgba(77, 125, 255, 0.3); /* 主色 30% 透明度 */ /* ========== 辅助品牌色系 ========== */ --secondary-color: #6b73ff; /* 辅助色 - 偏紫蓝 */ --secondary-light: #9da3ff; /* 辅助色-浅 */ --secondary-lighter: #d1d5ff; /* 辅助色-更浅 */ --secondary-dark: #5159ff; /* 辅助色-深 */ --secondary-darker: #3d45ff; /* 辅助色-更深 */ /* ========== 强调色系 ========== */ --accent-color: #ff6b7d; /* 强调色 - 温暖粉红 */ --accent-light: #ff9fb0; /* 强调色-浅 */ --accent-dark: #ff3854; /* 强调色-深 */ /* ========== 中性色系 ========== */ --text-primary: #24292e; /* 主文字色 */ --text-secondary: #586069; /* 次要文字色 */ --text-tertiary: #959da5; /* 三级文字色 */ --text-light: #d1d5da; /* 浅色文字 */ --text-inverse: #ffffff; /* 反色文字 */ --text-disabled: #c6cbd1; /* 禁用状态文字色 */ /* ========== 背景色系 ========== */ --bg-primary: #ffffff; /* 主背景 */ --bg-secondary: #f6f8fa; /* 次要背景 */ --bg-tertiary: #fafbfc; /* 三级背景 */ --bg-dark: #24292e; /* 深色背景 */ --bg-overlay: rgba(36, 41, 46, 0.8); /* 遮罩背景 */ /* 透明度背景变量 */ --bg-primary-alpha-30: rgba(255, 255, 255, 0.3); /* 玻璃效果背景 */ --bg-primary-alpha-60: rgba(255, 255, 255, 0.6); /* 中等透明度背景 */ --bg-primary-alpha-90: rgba(255, 255, 255, 0.95); /* 导航栏滚动后背景 */ --bg-primary-alpha-95: rgba(255, 255, 255, 0.98); /* 更高透明度背景 */ --bg-primary-alpha-98: #ffffff; /* 导航栏滚动后的白色背景 */ /* ========== 边框色系 ========== */ --border-primary: #e1e4e8; /* 主边框 */ --border-secondary: #d1d5da; /* 次要边框 */ --border-light: #f6f8fa; /* 浅色边框 */ --border-dark: #586069; /* 深色边框 */ --border-disabled: #f1f3f4; /* 禁用状态边框 */ /* ========== 功能色系 ========== */ --success-color: #28a745; /* 成功色 */ --success-light: #34d058; /* 成功色-浅 */ --success-dark: #22863a; /* 成功色-深 */ --warning-color: #ffc107; /* 警告色 */ --warning-light: #ffda6a; /* 警告色-浅 */ --warning-dark: #e6a700; /* 警告色-深 */ --error-color: #dc3545; /* 错误色 */ --error-light: #fd7e80; /* 错误色-浅 */ --error-dark: #b02a37; /* 错误色-深 */ --info-color: #17a2b8; /* 信息色 */ --info-light: #54c7d9; /* 信息色-浅 */ --info-dark: #138496; /* 信息色-深 */ /* ========== 阴影色系 ========== */ --shadow-light: rgba(36, 41, 46, 0.04); /* 轻阴影 */ --shadow-medium: rgba(36, 41, 46, 0.12); /* 中阴影 */ --shadow-heavy: rgba(36, 41, 46, 0.16); /* 重阴影 */ --shadow-primary: rgba(77, 125, 255, 0.25); /* 主色阴影 */ /* ========== 透明度变量 ========== */ --opacity-disabled: 0.6; /* 禁用状态透明度 */ --opacity-hover: 0.8; /* 悬停透明度 */ --opacity-overlay: 0.9; /* 遮罩透明度 */ /* ========== 扩展变量 ========== */ --text-inverse-soft: rgba(255, 255, 255, 0.9); /* 柔和的反色文字 */ --text-inverse-secondary: rgba(255, 255, 255, 0.7); /* 次要反色文字 */ --text-accent: #ffffff; /* 强调按钮文字色 */ --bg-accent: #f1f3f4; /* 强调背景色 */ --bg-glass: rgba(255, 255, 255, 0.2); /* 玻璃效果背景 */ --bg-hover-glass: rgba(255, 255, 255, 0.15); /* hover玻璃效果背景 */ --border-accent: #e1e4e8; /* 强调边框色 */ --border-glass: rgba(255, 255, 255, 0.2); /* 玻璃效果边框 */ --border-glass-light: rgba(255, 255, 255, 0.1); /* 浅色玻璃效果边框 */ /* ========== 阴影效果 ========== */ --shadow-small: 0 2px 4px rgba(36, 41, 46, 0.08); --shadow-medium: 0 4px 8px rgba(36, 41, 46, 0.12); --shadow-large: 0 8px 24px rgba(36, 41, 46, 0.16); --shadow-hover: 0 4px 12px rgba(77, 125, 255, 0.2); --shadow-glass: 0 8px 32px rgba(36, 41, 46, 0.1); /* ========== 文本效果 ========== */ --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); --text-glow: 0 0 8px rgba(255, 255, 255, 0.3); /* ========== 功能状态 ========== */ --success-bg: rgba(40, 167, 69, 0.1); --warning-bg: rgba(255, 193, 7, 0.1); --error-bg: rgba(220, 53, 69, 0.1); --info-bg: rgba(23, 162, 184, 0.1); /* ========== 特殊渐变 ========== */ --shine-gradient: linear-gradient(45deg, transparent 30%, rgba(255, 107, 125, 0.1) 40%, rgba(255, 107, 125, 0.3) 50%, rgba(255, 107, 125, 0.1) 60%, transparent 70%); /* 白色偏蓝扫光效果 */ --shine-gradient-white: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.15) 40%, rgba(240, 248, 255, 0.4) 50%, rgba(255, 255, 255, 0.15) 60%, transparent 70%); } /* ========== 快捷样式类 ========== */ .text-primary { color: var(--primary-color); } .text-secondary-brand { color: var(--secondary-color); } .text-accent { color: var(--accent-color); } .text-success { color: var(--success-color); } .text-warning { color: var(--warning-color); } .text-error { color: var(--error-color); } .text-info { color: var(--info-color); } .bg-primary { background-color: var(--primary-color); } .bg-secondary-brand { background-color: var(--secondary-color); } .bg-accent { background-color: var(--accent-color); } .bg-success { background-color: var(--success-color); } .bg-warning { background-color: var(--warning-color); } .bg-error { background-color: var(--error-color); } .bg-info { background-color: var(--info-color); } .border-primary { border-color: var(--primary-color); } .border-secondary-brand { border-color: var(--secondary-color); } /* ========== 渐变色系 ========== */ .gradient-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); } .gradient-secondary { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%); } .gradient-accent { background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); } .gradient-hero { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-color) 50%, var(--accent-color) 100%); }