/* ══════════════════════════════════════════════════════════════ 曜石紫金 · 紫微星河 2.0 — Design Tokens 命理智算系统服务器版 UI V2.0 Generated: 2026-08-11 | Task: UI-001A ══════════════════════════════════════════════════════════════ */ /* ── 内嵌字体（免费可商用 · 规则 12）────────────── */ /* 思源宋体（标题）：内部 family 为 Source Han Serif CN（Adobe 官方中国区变体，GB 标准字形）， 逻辑 family 名统一用 "Source Han Serif SC"；CN 子集 → GB2312+常用字，WOFF2 */ @font-face { font-family: "Source Han Serif SC"; src: url("../fonts/SourceHanSerifSC-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Han Serif SC"; src: url("../fonts/SourceHanSerifSC-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* 霞鹜文楷（眉题/副标题） */ @font-face { font-family: "LXGW WenKai"; src: url("../fonts/LXGWWenKai-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "LXGW WenKai"; src: url("../fonts/LXGWWenKai-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* ── 品牌色 (Brand) ──────────────────────────── */ --color-obsidian: #0E0B14; /* 曜石黑 — 深色首屏/页脚/命盘背景 */ --color-deep-purple: #24143A; /* 深紫 — 品牌背景/导航/渐变层 */ --color-nebula-purple: #6F4CC3; /* 星云紫 — 主按钮/链接/交互高亮 */ --color-golden-purple: #C6A56B; /* 紫金 — 品牌点缀/标题线/重要标识 */ --color-cream-white: #F7F4EE; /* 米白 — 大面积内容背景 */ --color-ink: #1C1822; /* 墨色 — 正文主文字 */ --color-mid-gray: #68636F; /* 中灰 — 辅助说明 */ --color-stellar-silver: #C8C3CF; /* 星河银 — 深色界面正文/细线/星轨 */ /* ── 语义色 (Semantic) ──────────────────────── */ --color-ji: #c0392b; /* 吉/大吉 — 深红（浅底可读，规则7：红=吉） */ --color-ji-light: #ff8fa3; /* 吉浅色（仅作背景/装饰） */ --color-xiong: #1d7a52; /* 凶/大凶/忌 — 深绿（规则7：绿=凶） */ --color-xiong-light: #7ee8b5; /* 凶浅色（仅作背景/装饰） */ --color-ping: #8a6d3b; /* 平 — 深金（中性提示） */ --color-ping-light: #ffce8a; /* 平稳浅色（仅作背景/装饰） */ --color-success: #1d7a52; /* 成功 — 深绿（支付成功/任务完成） */ --color-warning: #8a6d3b; /* 警示 — 深金（低置信度/边界敏感） */ --color-error: #c0392b; /* 错误 — 深红（表单错误/任务失败） */ --color-info: #3b6ea8; /* 信息 — 深蓝 */ /* ── 文字色 (Text) ──────────────────────────── */ --text-primary: #1C1822; /* 主文字（浅色背景） */ --text-secondary: #68636F; /* 辅助文字 */ --text-tertiary: #9B95A3; /* 弱化文字 */ --text-on-dark: #C8C3CF; /* 深色背景上文字 */ --text-on-dark-secondary: #8A84A0; /* 深色背景辅助文字 */ --text-link: #6F4CC3; /* 链接色 */ --text-link-hover: #8568D8; /* 链接悬停 */ --text-inverse: #F7F4EE; /* 反色文字 */ /* ── 背景色 (Background) ────────────────────── */ --bg-page: #F7F4EE; /* 页面背景 */ --bg-surface: #FFFFFF; /* 卡片/面板背景 */ --bg-surface-raised: #FAF8F5; /* 悬停面板 */ --bg-dark: #0E0B14; /* 深色区域背景 */ --bg-dark-surface: #1A1525; /* 深色卡片 */ --bg-overlay: rgba(14, 11, 20, 0.6); /* 遮罩 */ --bg-workspace-nav: #24143A; /* 工作台导航背景 */ --bg-admin-nav: #1C1822; /* 管理后台导航背景 */ /* ── 边框色 (Border) ────────────────────────── */ --border-default: #E0E0E0; /* 默认边框 */ --border-light: #F0EDE8; /* 浅边框 */ --border-accent: #C6A56B; /* 强调边框（紫金线） */ --border-input: #D4D0C8; /* 输入框边框 */ --border-focus: #6F4CC3; /* 聚焦边框 */ --border-error: #ff6b6b; /* 错误边框 */ /* ── 间距 (Spacing: 4px base) ───────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── 字体 (Typography) ──────────────────────── */ --font-family-base: "Noto Sans CJK SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-family-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif; --font-family-accent: "LXGW WenKai", "LXGW WenKai SC", "KaiTi", "STKaiti", serif; --font-family-mono: "Sarasa Mono SC", "Source Code Pro", "Cascadia Code", "Consolas", monospace; --font-family-brand: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif; --font-size-xs: 13px; /* 13.3 辅助文本最低 13px */ --font-size-sm: 14px; --font-size-base: 16px; --font-size-md: 18px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 28px; --font-size-3xl: 36px; --font-size-4xl: 48px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --line-height-tight: 1.3; --line-height-base: 1.6; --line-height-relaxed: 1.85; --line-height-loose: 2.0; /* ── 圆角 (Border Radius) ───────────────────── */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; --radius-card: 16px; --radius-input: 10px; /* ── 阴影 (Shadow) ──────────────────────────── */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(14, 11, 20, 0.06); --shadow-md: 0 4px 12px rgba(14, 11, 20, 0.08); --shadow-lg: 0 8px 24px rgba(14, 11, 20, 0.10); --shadow-xl: 0 16px 48px rgba(14, 11, 20, 0.14); --shadow-card: 0 2px 8px rgba(14, 11, 20, 0.06), 0 0 0 1px rgba(14, 11, 20, 0.04); --shadow-palace: inset 0 0 0 1px rgba(198, 165, 107, 0.3), 0 2px 16px rgba(14, 11, 20, 0.12); --shadow-dark-card: 0 4px 16px rgba(0, 0, 0, 0.3); /* ── 动效 (Motion) ──────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-page: 500ms; /* ── 布局 (Layout) ──────────────────────────── */ --content-max-width: 860px; --content-wide: 1200px; --sidebar-width: 248px; --sidebar-mobile: 208px; --header-height: 56px; --bottom-bar-height: 56px; /* ── 栅格 (Grid) ────────────────────────────── */ --grid-gap: 16px; --grid-columns-mobile: 4; --grid-columns-tablet: 8; --grid-columns-desktop: 12; --grid-columns-wide: 24; /* ── Z-Index ─────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-popover: 500; --z-tooltip: 600; --z-toast: 700; }