/* ========================================================================== 秋泽吉数 · 网页前端 · 共享设计令牌 -------------------------------------------------------------------------- 与 shared/design-tokens.css 逐字节一致（原样复制）。 令牌层不含类名，无需作用域化；由 styles/themes.css 映射到前端语义变量。 ========================================================================== */ /* ========================================================================== 秋泽吉数 · 全局设计系统（Single Source of Truth） -------------------------------------------------------------------------- 网页前端 / 后台管理端 / 代理端 / App 端 —— 四端共用这一份令牌。 任何颜色、间距、圆角、阴影、字号都必须来自这里，业务代码不得硬编码色值。 设计方向：宣纸浅色 · 靛蓝强调（单一主题，不提供换肤） -------------------------------------------------------------------------- 视觉手法参考（均为 MIT / 开源，只借鉴手法，不引入外部 CSS）： · Galaxy (uiverse-io, MIT) 柔光多层投影 / 渐变描边 / 悬浮抬升 · careercompass (arsh342, MIT) 语义化令牌 / 单一 radius 基准 / 分栏登录 · FolkPatch (LyraVoid) Material 3 表达性：大圆角 / 明确层级 / 克制配色 七项设计原则（每一条都在本文件中以令牌或组件层落实）： 1. 准确的嵌套圆角半径 → --r-* 阶梯 + --r-inset-* 内嵌递减规则（见 components.css） 2. 主次操作区分明确 → 操作层级三档：--act-primary / --act-secondary / --act-tertiary 3. 权重区分拉开对比 → --fw-* 与 --fs-* 组合成 6 级文本权重（--text-* 语义类） 4. 清晰文本对齐方式 → --align-* 与 --measure-* 版心宽度控制 5. 突出内容展示 → --surface-* 四级表面 + --elev-* 阴影层级 6. 柔和阴影的透气性 → --shadow-* 全部为「低透明度 + 大扩散 + 双层」 7. 统一的间距分割 → --sp-* 严格 4px 阶梯，禁止任意值 ========================================================================== */ :root { /* ====================================================================== 1. 品牌色阶 · 靛蓝 靛蓝取自 careercompass 的 primary(231 48% 48%)，压到宣纸底色上做对比度校正 ====================================================================== */ --brand: #3d4db7; /* 主色 · 靛蓝（白底对比度 8.0:1，AAA） */ --brand-hover: #33419c; /* 悬停加深 */ --brand-active: #2a3682; /* 按下更深 */ --brand-ink: #232c66; /* 主色系最深的文字用色 */ --brand-soft: #eef0fb; /* 浅靛蓝底 · 选中行 / 标签 */ --brand-softer: #f6f7fd; /* 更浅 · 大面积铺底 */ --brand-line: #c7cdf0; /* 靛蓝分割线 */ --brand-ring: rgba(61,77,183,.26); --brand-glow: rgba(61,77,183,.18); /* 辅助色 · 青竹（用于次级强调、图表第二序列） */ --accent: #0f8b8d; --accent-soft: #e6f4f4; --accent-ink: #0a6365; /* ====================================================================== 2. 表面与文字 · 宣纸中性层 表面分四级：页面底 → 次级底 → 卡片 → 抬升面。层级靠明度差 + 阴影表达 ====================================================================== */ --bg: #f7f7f9; /* 页面底 · 极浅灰（不是纯白，让卡片浮起来） */ --bg-2: #f2f2f6; /* 次级底 · 分区 */ --bg-sunk: #ebebf1; /* 凹陷区 · 输入框底 / 代码块 */ --card: #ffffff; /* 卡片面 */ --card-raised: #ffffff; /* 抬升面（配更强阴影） */ --card-sunken: #f7f7f9; /* 卡片内的凹陷块 */ --overlay: rgba(28,28,42,.44); /* 遮罩层 */ --ink: #2c2c3d; /* 正文（白底 13.2:1，AAA） */ --ink-strong: #16161f; /* 标题 / 强调正文（白底 17.6:1） */ --ink-invert: #ffffff; /* 反白文字 */ --dim: #5c5c70; /* 次要文字（白底 6.9:1，AA+） */ --dim-2: #8a8a9e; /* 占位 / 辅助说明（白底 3.9:1，仅用于非关键文本） */ --line: #e3e3ea; /* 常规分割线 */ --line-soft: #eeeef3; /* 弱分割线 · 卡片内 */ --line-strong: #d0d0da; /* 强分割线 · 输入框边框 */ /* ====================================================================== 3. 语义色（每色三档：主 / 浅底 / 深字，深字均满足白底 AA） ====================================================================== */ --green: #12894a; --green-soft: #e6f5ec; --green-ink: #0c6335; --red: #c5304a; --red-soft: #fdecef; --red-ink: #97223a; --orange: #b55a00; --orange-soft: #fdf0e3; --orange-ink: #8a4400; --blue: #1a63b8; --blue-soft: #e8f1fb; --blue-ink: #124a8a; --purple: #6b3fb8; --purple-soft: #f1ebfc; --purple-ink: #502d8a; --gold: #9a7200; --gold-soft: #fbf4e0; --gold-ink: #75570a; /* ====================================================================== 4. 渐变（克制使用，仅用于主操作与装饰性光晕） ====================================================================== */ --grad-brand: linear-gradient(135deg, #4a5ac4, #3d4db7); --grad-brand-r: linear-gradient(135deg, #3d4db7, #4a5ac4); --grad-soft: linear-gradient(135deg, #f6f7fd, #eef0fb); --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0)); --grad-aurora: linear-gradient(135deg, rgba(61,77,183,.10), rgba(15,139,141,.08)); /* ====================================================================== 5. 间距阶梯 · 严格 4px 倍数 原则 7「统一的间距分割」：所有 margin/padding/gap 只能取这些值 ====================================================================== */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* 版面节奏：区块之间的标准间距 */ --gap-inline: var(--sp-2); /* 行内元素 */ --gap-stack: var(--sp-3); /* 表单字段之间 */ --gap-block: var(--sp-5); /* 卡片内区块 */ --gap-section: var(--sp-8); /* 页面分区 */ /* ====================================================================== 6. 圆角 · 准确嵌套（原则 1） 嵌套规则：子元素圆角 = 父元素圆角 − 父元素内边距 例：父 18px、内边距 8px → 子 10px 下列 --r-inset-* 就是按常用组合预先算好的，组件层直接用，不再手算。 ====================================================================== */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-3xl: 32px; --r-full: 999px; /* 嵌套圆角：外层圆角 − 内边距 = 内层圆角 */ --r-inset-sm: var(--r-sm); /* 外层 --r-md(10) − 4 */ --r-inset-md: var(--r-md); /* 外层 --r-lg(14) − 4 */ --r-inset-lg: var(--r-lg); /* 外层 --r-xl(18) − 4 */ --r-inset-xl: var(--r-xl); /* 外层 --r-2xl(24) − 6 */ --r-inset-2xl: var(--r-2xl); /* 外层 --r-3xl(32) − 8 */ /* ====================================================================== 7. 阴影 · 柔和透气（原则 6） 配方：低透明度（≤.10）+ 大模糊半径 + 双层（贴地细影 + 扩散柔影） 禁止使用纯黑；统一用靛蓝偏冷的投影色，避免"脏灰" ====================================================================== */ --shadow-xs: 0 1px 2px rgba(28,28,42,.04); --shadow-sm: 0 1px 2px rgba(28,28,42,.04), 0 2px 6px rgba(28,28,42,.05); --shadow: 0 1px 3px rgba(28,28,42,.05), 0 6px 16px rgba(28,28,42,.06); --shadow-md: 0 2px 4px rgba(28,28,42,.05), 0 10px 24px rgba(28,28,42,.07); --shadow-lg: 0 4px 8px rgba(28,28,42,.06), 0 18px 40px rgba(28,28,42,.09); --shadow-xl: 0 8px 16px rgba(28,28,42,.07), 0 28px 64px rgba(28,28,42,.12); --shadow-pop: 0 24px 72px rgba(28,28,42,.22), 0 4px 12px rgba(28,28,42,.08); /* 主色投影：用于主操作按钮的"发光"抬升 */ --shadow-brand: 0 2px 6px var(--brand-glow), 0 10px 24px var(--brand-glow); /* 内阴影：凹陷输入 / 分段控件槽 */ --shadow-inset: inset 0 1px 2px rgba(28,28,42,.05); --shadow-sunk: inset 0 1px 3px rgba(28,28,42,.06); /* 焦点环（无障碍，全端统一） */ --focus-ring: 0 0 0 3px var(--brand-ring); --focus-ring-inset: inset 0 0 0 2px var(--brand); --focus-ring-danger: 0 0 0 3px rgba(197,48,74,.24); /* ====================================================================== 8. 字号与行高 ====================================================================== */ --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 30px; --fs-5xl: 38px; --lh-tight: 1.25; --lh-snug: 1.4; --lh: 1.6; --lh-loose: 1.75; --ls-tight: -.01em; --ls-normal: 0; --ls-wide: .02em; --ls-wider: .06em; --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; --fw-heavy: 700; /* ====================================================================== 9. 文本权重体系（原则 3「权重区分拉开对比」） 六级语义文本：字重 + 字号 + 颜色 三者同时变化，形成清晰层级。 用法：

或 直接引用 var(--text-*) 组合 ====================================================================== */ --text-display-size: var(--fs-4xl); --text-display-weight: var(--fw-heavy); --text-display-lh: var(--lh-tight); --text-title-size: var(--fs-2xl); --text-title-weight: var(--fw-heavy); --text-title-lh: var(--lh-tight); --text-heading-size: var(--fs-xl); --text-heading-weight: var(--fw-bold); --text-heading-lh: var(--lh-snug); --text-body-size: var(--fs-base); --text-body-weight: var(--fw-normal); --text-body-lh: var(--lh); --text-label-size: var(--fs-md); --text-label-weight: var(--fw-medium); --text-label-lh: var(--lh-snug); --text-caption-size: var(--fs-sm); --text-caption-weight: var(--fw-normal); --text-caption-lh: var(--lh-snug); /* ====================================================================== 10. 文本对齐与版心（原则 4「清晰文本对齐方式」） ====================================================================== */ --align-start: left; --align-center: center; --align-end: right; --align-number: right; /* 数字列右对齐，便于位值比对 */ --align-justify: justify; --measure-narrow: 46ch; /* 说明文字 / 帮助文本 */ --measure-base: 68ch; /* 正文舒适阅读宽度 */ --measure-wide: 96ch; /* 表格 / 数据区 */ --measure-full: 100%; --text-indent: 0; /* 中文正文首行不缩进（界面语境） */ /* ====================================================================== 11. 操作层级（原则 2「主次操作区分明确」） 三档视觉权重，同一屏内主操作只应有一个 ====================================================================== */ --act-primary-bg: var(--brand); --act-primary-bg-h: var(--brand-hover); --act-primary-fg: #fff; --act-primary-shadow: var(--shadow-brand); --act-secondary-bg: var(--card); --act-secondary-bg-h: var(--brand-softer); --act-secondary-fg: var(--brand); --act-secondary-border: var(--brand-line); --act-secondary-shadow: var(--shadow-xs); --act-tertiary-fg: var(--dim); --act-tertiary-fg-h: var(--ink); --act-tertiary-bg-h: var(--bg-2); --act-danger-bg: var(--red); --act-danger-bg-h: var(--red-ink); --act-danger-fg: #fff; --act-danger-shadow: 0 2px 6px rgba(197,48,74,.18), 0 10px 24px rgba(197,48,74,.18); /* ====================================================================== 12. 层级 z-index ====================================================================== */ --z-base: 1; --z-sticky: 10; --z-side: 20; --z-head: 30; --z-fab: 60; --z-mask: 100; --z-modal: 110; --z-toast: 200; --z-tip: 300; /* ====================================================================== 13. 动效（参考 FolkPatch 的 Material 3 表达性曲线） ====================================================================== */ --ease-standard: cubic-bezier(.2,0,0,1); /* M3 standard */ --ease-decelerate:cubic-bezier(.05,.7,.1,1); /* M3 decelerate · 入场 */ --ease-accelerate:cubic-bezier(.3,0,.8,.15); /* M3 accelerate · 出场 */ --ease-emphasized:cubic-bezier(.2,0,0,1); /* M3 emphasized */ --ease-spring: cubic-bezier(.34,1.4,.64,1); /* 轻微回弹 */ --ease: var(--ease-standard); --ease-out: var(--ease-decelerate); --dur-instant: .08s; --dur-fast: .16s; --dur: .24s; --dur-slow: .38s; --dur-slower: .56s; /* ====================================================================== 14. 控件尺寸 ====================================================================== */ --h-input: 40px; --h-btn: 38px; --h-btn-sm: 30px; --h-btn-lg: 46px; --h-btn-xl: 52px; --w-sidebar: 244px; --w-topbar: 56px; --w-tabbar: 60px; --w-rail: 72px; /* 图标侧栏 */ --touch-min: 44px; /* 触屏最小可点区 */ /* 触控/桌面密度基准 */ --radius-base: var(--r-lg); /* 单一圆角基准（对齐 shadcn 的 --radius 思路） */ /* ====================================================================== 15. 侧边栏（后台 / 代理端共用）· 浅色宣纸上的深色锚点 ====================================================================== */ --side: #232c66; /* 侧栏底 · 深靛蓝 */ --side-2: #2d3780; /* 悬停 */ --side-3: #38449b; /* 选中 */ --side-ink: #dfe3f5; /* 侧栏文字 */ --side-dim: #9aa3cf; /* 侧栏次要文字 */ --side-line: rgba(255,255,255,.08); /* ====================================================================== 16. 图表配色（ECharts 序列，色相均匀分布且互不混淆） ====================================================================== */ --chart-1: #3d4db7; --chart-2: #0f8b8d; --chart-3: #b55a00; --chart-4: #6b3fb8; --chart-5: #c5304a; --chart-6: #12894a; --chart-7: #1a63b8; --chart-8: #8a8a9e; } /* ========================================================================== 密度模式（触屏端 App 用 roomy，后台表格用 compact） ========================================================================== */ :root[data-density="compact"] { --sp-4: 12px; --sp-5: 14px; --sp-6: 18px; --sp-8: 24px; --fs-base: 13px; --h-btn: 32px; --h-input: 34px; --h-btn-lg: 38px; } :root[data-density="roomy"] { --sp-4: 18px; --sp-5: 22px; --sp-6: 26px; --sp-8: 36px; --fs-base: 15px; --h-btn: 44px; --h-input: 46px; --h-btn-lg: 52px; } /* ========================================================================== 高对比模式（无障碍增强，不改变色相） ========================================================================== */ :root[data-contrast="high"] { --ink: #16161f; --dim: #43435a; --dim-2: #5c5c70; --line: #c8c8d4; --line-soft: #dcdce4; --line-strong:#a8a8b8; } /* ========================================================================== 降低动效（系统偏好） ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0s; --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; --dur-slower: 0s; } }