/* ============================================================ LIGHT MC 服务器 · 全站设计令牌（Design Tokens） ------------------------------------------------------------ 本文件为全站唯一色板 / 字体 / 间距来源（Single Source of Truth）。 前缀统一 --lmc-（LIGHT MC）。 值取自 PRD 第 4 章设计规范，原值照抄，不删改。 使用约定： - 跨子系统共享资源一律使用根路径 /css/tokens.css 引用； - 组件样式必须通过变量取值，禁止再散落硬编码色值； - 业务旧变量（如 --mc-green）仅可映射为 var(--lmc-*)，不得作为主强调色来源。 ============================================================ */ :root { color-scheme: light; /* 亮色：原生滚动条/表单控件走亮色 */ /* -------------------------------------------------------- 1. 色板（PRD 4.1） -------------------------------------------------------- */ --lmc-color-primary: #69c2c8; /* 主色/强调色（按钮、链接高亮、激活态） */ --lmc-color-primary-hover: #56bac1; /* 主色 hover */ --lmc-color-primary-dark: #3da1a7; /* 主色激活/深色描边 */ --lmc-color-primary-soft: rgba(105, 194, 200, 0.12); /* 主色浅底（导航 hover 底、标签底） */ /* 语义浅底：徽章/提示块底色。此前仅在暗色块定义，导致亮色下 var() 解析失败（底色透明）→ 亮色同步补齐，取值沿用各页原有行内 rgba 的 alpha。 */ --lmc-color-info-soft: rgba(23, 132, 251, 0.12); /* 信息浅底（对齐 --lmc-color-info） */ --lmc-color-success-soft: rgba(75, 176, 106, 0.10); /* 成功浅底（对齐 --lmc-color-success） */ --lmc-color-warning-soft: rgba(224, 164, 75, 0.12); /* 警告浅底（对齐 --lmc-color-warning） */ --lmc-color-danger-soft: rgba(224, 75, 75, 0.10); /* 危险浅底（对齐 --lmc-color-danger） */ --lmc-color-bg: #FFFFFF; /* 页面背景 */ --lmc-color-surface: #E8ECF1; /* 区块/卡片底、表头底、行分隔 */ --lmc-color-text: #333333; /* 主要文字/标题 */ --lmc-color-text-muted: #6b7280; /* 正文/次要文字（原 #949494 仅 3.03:1 → 4.83:1，达 AA） */ --lmc-color-nav-link: #4b5563; /* 导航链接默认色（原 #CCCCCC 白底仅 1.61:1 → 7.56:1，达 AA） */ --lmc-color-nav-link-active: #000000; /* 导航激活色 */ --lmc-color-border: #E8ECF1; /* 边框/分隔线 */ --lmc-color-danger: #e04b4b; /* 语义色：禁止/封禁/删除 */ --lmc-color-warning: #e0a44b; /* 语义色：待处理/提醒 */ --lmc-color-success: #4bb06a; /* 语义色：成功/通过 */ --lmc-color-on-primary: #ffffff; /* 主色实心底上的文字色（亮色用白） */ --lmc-color-info: #1784fb; /* 语义色：信息（Bootstrap info 蓝，纳入令牌统一管理） */ --lmc-color-on-image: #ffffff; /* 图片/深色遮罩之上的文字色（两主题恒为白，不随主题反转） */ --lmc-color-on-warning: #3a2a00; /* 语义色(警告/待处理)实心底上的文字色（两主题恒为深，均可读） */ --lmc-color-image-placeholder: #2a2e33; /* 图片加载前衬底（两主题恒定，不随主题反转） */ /* -------------------------------------------------------- 1b. 整页背景图（前台展示页可选启用，见 theme.css §28） -------------------------------------------------------- 启用方式：页面 上加 data-lmc-bg="image"。 仅前台页标记；后台管理页与门户 iframe 内嵌页不标记 → 保持朴素。 */ --lmc-bg-image: url("/home/images/hero_bg.jpg"); /* 全站背景大图（与首页/页头同源，单一真源） */ --lmc-bg-image-overlay: rgba(0, 0, 0, 0.55); /* 图上遮罩：压低图片亮度，保证其上白字达 AA */ --lmc-color-glass: rgba(255, 255, 255, 0.56); /* 图上的内容玻璃板底（半透明，图可透出；值越小越透）★AA 下限：0.56 时最暗图区 4.72:1，勿再下调 */ --lmc-glass-blur: 7px; /* 玻璃板模糊半径（与主题无关，仅此一处定义）；调小＝背景纹理更清楚、更"透" */ /* -------------------------------------------------------- 2. 字体与字号阶梯（PRD 4.2） -------------------------------------------------------- */ --lmc-font-family: "Open Sans", Arial, sans-serif; /* 全站主字体 */ --lmc-font-size-body: 18px; /* 正文 */ --lmc-font-size-sm: 14px; /* 辅助文字、表头、导航 */ --lmc-font-size-h1: 36px; /* 页面主标题 */ --lmc-font-size-h2: 28px; /* 区块标题 */ --lmc-font-size-h3: 20px; /* 卡片/小标题 */ --lmc-line-height: 1.7; /* 正文行高 */ --lmc-font-weight-normal: 400; /* 正文 */ --lmc-font-weight-bold: 700; /* 标题/强调 */ /* -------------------------------------------------------- 3. 间距 / 圆角 / 阴影（PRD 4.3） -------------------------------------------------------- */ --lmc-space-xs: 4px; /* 紧凑间距 */ --lmc-space-sm: 8px; /* 元素内间距 */ --lmc-space-md: 16px; /* 常规间距 */ --lmc-space-lg: 24px; /* 区块间距 */ --lmc-space-xl: 40px; /* 大区块间距 */ --lmc-radius-card: 5px; /* 卡片圆角 */ --lmc-radius-btn: 100px; /* 按钮胶囊圆角 */ --lmc-radius-input: 5px; /* 输入框圆角 */ --lmc-shadow-card: 0 0 7px rgba(0, 0, 0, 0.09); /* 卡片阴影 */ --lmc-shadow-nav: 0 0 7px rgba(0, 0, 0, 0.09); /* 导航底部阴影 */ --lmc-container-max: 1200px; /* 内容最大宽度 */ --lmc-container-narrow: 420px; /* 窄容器（登录/单表单页） */ } /* ============================================================ 暗色主题令牌（PRD 3.1） ------------------------------------------------------------ 挂载点：；由各页 head 内联脚本在渲染前写入。 本块为唯一暗色变量来源，新增暗色组件样式请在此取变量，勿硬编码。 注意：暗色规则只写在此选择器下，禁止用 @media (prefers-color-scheme) 重复定义（系统偏好由内联脚本转成 data-theme 属性）。 ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* 原生滚动条/表单控件转深 */ /* 色板（16 项全量覆盖） */ --lmc-color-primary: #7fd4d9; /* 保留青绿并提亮，暗底更“跳” */ --lmc-color-primary-hover: #93dee2; /* 暗色下 hover 语义＝更亮 */ --lmc-color-primary-dark: #57bcc3; /* 描边/激活/soft 底文字 */ --lmc-color-primary-soft: rgba(127, 212, 217, 0.16); /* 提高不透明度，深底上才可见 */ --lmc-color-bg: #1a1d21; /* 深灰软黑底 */ --lmc-color-surface: #24282d; /* 卡片/表头，比底亮一档 */ --lmc-color-text: #e8eaed; /* 反转为近白（14.0:1） */ --lmc-color-text-muted: #9ca3af; /* 次要文字（6.7:1 / 卡片 5.8:1） */ --lmc-color-nav-link: #c7ccd1; /* 导航默认（10.5:1） */ --lmc-color-nav-link-active: #ffffff; /* 关键反转：#000 在暗底不可见 */ --lmc-color-border: #363b41; /* 比 surface 再亮一档方可见 */ --lmc-color-danger: #f06e6c; --lmc-color-warning: #e8b563; --lmc-color-success: #5cc97d; --lmc-color-info: #4d9dff; /* 语义色：信息，暗底提亮以保证可读 */ /* 语义底色（暗色提高不透明度，深底上才可见） */ --lmc-color-info-soft: rgba(77, 157, 255, 0.18); --lmc-color-success-soft: rgba(92, 201, 125, 0.18); --lmc-color-warning-soft: rgba(232, 181, 99, 0.20); --lmc-color-danger-soft: rgba(240, 110, 108, 0.20); /* 图片衬底（两主题恒定，不随主题反转） */ --lmc-color-image-placeholder: #2a2e33; /* 整页背景图（暗色：遮罩加深、玻璃板转深，保持对比度） */ --lmc-bg-image-overlay: rgba(0, 0, 0, 0.68); --lmc-color-glass: rgba(26, 29, 33, 0.58); /* 同上再透一档；暗底余量大，最坏仍 >10:1 */ /* 主色作背景时的文字色（暗色改用底色，对比 9.9:1） */ --lmc-color-on-primary: #1a1d21; /* 阴影：亮色靠阴影分层，暗色阴影几乎不可见 → 加深 alpha + 补 1px 微亮描边 */ --lmc-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.50); --lmc-shadow-nav: 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 8px rgba(0, 0, 0, 0.50); }