/** * ============================================================================ * Wild Player 前端标准化 - 设计令牌变量集 (Design Tokens) * ============================================================================ * * 文件用途： * - 定义全局 CSS 自定义属性（CSS Variables） * - 作为前端标准化的设计令牌（Design Tokens）单一数据源 * - 所有页面和组件应引用此文件以保持视觉一致性 * - 修改此处变量即可全局更新配色方案 * * 使用方式： * 在页面 中通过 引入此文件 * 或在现有样式表顶部使用 @import 引入 * * 变量命名规范： * --primary: 品牌主色调 * --secondary: 辅助色/强调色 * --{color}: 功能色（语义化命名） * --gray-{n}: 中性灰阶（n越大越浅） * --shadow: 统一阴影效果 * * 创建时间：2026-06-03 * 来源文件：app/index/view/index/index.html (首页) * ============================================================================ */ :root { /* ===== 品牌色系 ===== */ --primary: #D98329; /* 爱马仕橙主色 - 品牌核心色，用于按钮、链接、重要元素 */ --secondary: #F9B878; /* 浅橙辅助色 - 用于次要按钮、标签背景、渐变辅助 */ /* ===== 功能色系 ===== */ --ai-blue: #409EFF; /* AI模块专属蓝 - AI功能模块专用色 */ --success: #67C23A; /* 成功/在线色 - 成功状态、在线指示器 */ --warning: #E6A23C; /* 警告/提醒色 - 警告提示、待处理状态 */ --danger: #F56C6C; /* 危险/紧急色 - 错误提示、删除操作、紧急通知 */ /* ===== 中性色系 ===== */ --white: #FFFFFF; /* 纯白色 - 背景、卡片底色、文字反白 */ --gray-1: #333333; /* 深灰 - 主标题文字、重要内容 */ --gray-2: #666666; /* 中灰 - 正文文字、次要内容 */ --gray-3: #999999; /* 浅灰 - 辅助文字、占位符、禁用状态 */ --gray-4: #F5F5F4; /* 极浅灰 - 页面背景、卡片间隔、边框色 */ /* ===== 效果类 ===== */ --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 标准阴影 - 卡片浮起效果、弹窗阴影 */ }