/* ========================================================================== A股棱镜 · 设计令牌 (Design Tokens) -------------------------------------------------------------------------- 视觉概念：深空观测台 (Deep Space Observatory) · 底色是深邃夜空，不是纯黑纯灰 · 品牌蓝紫是极光，只在关键处发光 · 卡片是玻璃仪表盘，有厚度但���张扬 · 数字用等宽对齐 —— 金融数据的灵魂 · 科技感来自「精密」，而非「霓虹」 加载位置：base.html 中位于 responsive.css **之前**。 ⚠️ 本文件只声明变量，不含任何选择器规则，因此**零副作用**： 不会覆盖 27 个模板里的内联样式，只为它们提供一套可复用的词汇表。 ⚠️ 末尾「兼容别名」段把项目历史上散落的旧变量名接到新体系上， 现有引用它们的模板无需改动即可继续工作（值也做了微调，统一到新色板）。 命名规范：语义优先（--text-primary），不用外观命名（--gray-500）。 层级约定：50 最浅 → 900 最深，与 Tailwind 心智一致，降低切换成本。 ========================================================================== */ :root { /* ====================================================================== 1. 色彩 · 背景层（由深到浅：void 页面底 → body → surface 卡片 → elevated 浮层） ====================================================================== */ --bg-void: #070b16; /* 最深：页脚、遮罩底、空状态 */ --bg-body: #0d1424; /* 页面主底（比旧值 #0f172a 更深更蓝，衬托极光） */ --bg-surface: #151e33; /* 卡片默认底 */ --bg-surface-2: #1c2740; /* 卡片内层 / 表头 */ --bg-elevated: #223052; /* 浮层：下拉、气泡、模态 */ --bg-inset: #0a1120; /* 凹陷：代码块、输入框内腔 */ /* ====================================================================== 2. 色彩 · 品牌（电光蓝 → 靛紫，135° 极光渐变的两端） ====================================================================== */ --brand-300: #7dd3fc; /* 浅：hover 态文字、次级强调 */ --brand-400: #38bdf8; /* 主品牌色（原 --text-highlight 同值） */ --brand-500: #0ea5e9; /* 稍深：按下态 */ --brand-600: #0284c7; /* 深：深色底上的高对比按钮底 */ --brand-indigo: #818cf8; /* 渐变另一端 */ --brand-violet: #a78bfa; /* 极光紫：稀有高亮 */ --brand-cyan-rgb: 56, 189, 248; --brand-indigo-rgb: 129, 140, 248; --brand-a: 0.08; /* 品牌色作为「面」时的推荐透明度 */ --brand-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%); --brand-gradient-soft: linear-gradient(135deg, rgba(56,189,248,.16) 0%, rgba(129,140,248,.16) 100%); /* ====================================================================== 3. 色彩 · 市场语义（⚠️⚠️ 中国市场惯例：红涨绿跌，绝不可反） ====================================================================== */ --up: #f87171; /* 上涨 */ --up-strong: #ef4444; /* 强涨 / 涨停 */ --up-rgb: 248, 113, 113; --up-a: 0.12; /* 上涨面（背景） */ --down: #34d399; /* 下跌 */ --down-strong: #10b981; /* 强跌 / 跌停 */ --down-rgb: 52, 211, 153; --down-a: 0.12; /* 下跌面（背景） */ --flat: #94a3b8; /* 平盘 */ --warn: #fbbf24; /* 警示 */ --warn-a: 0.14; --info: #38bdf8; /* 信息 */ /* ====================================================================== 4. 色彩 · 文本（四级：标题 / 正文 / 辅助 / 禁用） ====================================================================== */ --text-primary: #f1f5f9; /* 标题与关键数据 */ --text-body: #e2e8f0; /* 正文（不是纯白，长文更耐读）*/ --text-secondary: #94a3b8; /* 辅助说明、标签 */ --text-tertiary: #64748b; /* 时间戳、来源、弱信息 */ --text-disabled: #475569; /* 禁用 */ --text-on-brand: #04121f; /* 品牌色实底上的文字（深色，保证对比度）*/ /* ====================================================================== 5. 色彩 · 边框与分隔 ====================================================================== */ --border-subtle: rgba(255, 255, 255, 0.06); /* 最轻：卡片内部分隔 */ --border-default: rgba(255, 255, 255, 0.10); /* 常规边框 */ --border-strong: rgba(255, 255, 255, 0.18); /* 强调边框 */ --border-brand: rgba(56, 189, 248, 0.42); /* 品牌描边 */ --divider: rgba(148, 163, 184, 0.14); /* 列表分隔线 */ /* ====================================================================== 6. 间距（8pt 网格；4 起步用于图标与文字微调） ====================================================================== */ --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; /* ====================================================================== 7. 圆角（越大越「软」，金融仪表盘不宜过圆） ====================================================================== */ --radius-xs: 4px; /* 标签、色块 */ --radius-sm: 8px; /* 按钮、输入框 */ --radius-md: 12px; /* 卡片（默认）*/ --radius-lg: 18px; /* 大卡片、模态 */ --radius-xl: 24px; /* Hero 面板 */ --radius-full: 999px; /* 头像、圆点 */ /* ====================================================================== 8. 字体 ⚠️ 中文字体必须走系统栈 —— Orbitron / Plus Jakarta Sans 都没有中文字形， 纯英文 display 字体配中文会掉进系统黑体，同一标题中英风格割裂。 策略：中文字形用系统栈（零加载成本、国内不翻墙）， 英文与数字用品牌字体做装饰，用 .num 类精确指定。 ====================================================================== */ --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", -apple-system, "Plus Jakarta Sans", "Segoe UI", sans-serif; --font-display: "Orbitron", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "PingFang SC", "Microsoft YaHei", monospace; /* 字号阶梯（约 1.22 倍跳跃，标题层用 1.33+ 建立戏剧感）*/ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px; --text-4xl: 44px; /* 行高：长文（研报）用 loose，UI 用 normal */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.75; /* 中文长文默认 */ --leading-loose: 1.9; /* 字间距：标题收紧（-0.02em），小字放开（0.02em）提升可读 */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* 数字：金融数据的灵魂 —— 等宽对齐，否则表格列会抖动 */ --font-numeric: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --font-feature-numeric: "tnum" 1, "lnum" 1, "zero" 1; /* ====================================================================== 9. 阴影与发光（深色下阴影要「有色」而不是纯黑，否则显脏） ====================================================================== */ --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.4); --shadow-md: 0 4px 12px rgba(2, 6, 23, 0.45); --shadow-lg: 0 12px 32px rgba(2, 6, 23, 0.55); --shadow-xl: 0 24px 60px rgba(2, 6, 23, 0.65); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* 玻璃卡顶部内高光 */ --glow-brand: 0 0 20px rgba(56, 189, 248, 0.30); --glow-brand-lg: 0 0 40px rgba(56, 189, 248, 0.22); --glow-up: 0 0 16px rgba(248, 113, 113, 0.30); --glow-down: 0 0 16px rgba(52, 211, 153, 0.30); /* ====================================================================== 10. 动效（统一曲线与时长；无障碍 prefers-reduced-motion 在 vision.css 处理） ====================================================================== */ --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); /* 轻微回弹 */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; /* ====================================================================== 11. 层级 ====================================================================== */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-dropdown: 300; --z-modal: 400; --z-toast: 500; /* ====================================================================== 12. 布局 ====================================================================== */ --container-max: 1280px; --container-narrow: 860px; /* 长文阅读（研报）专用 */ --gutter: var(--space-4); --tap-min: 44px; /* 最小触摸目标（无障碍硬性）*/ /* ====================================================================== 13. 兼容别名：把项目历史变量接到新体系 ⚠️ 值做了统一微调（例如 --text-main 统一为 --text-primary 的 #f1f5f9）， 引用它们的模板无需改动即可受益于新色板。 ====================================================================== */ --bg-card: var(--bg-surface); --text-main: var(--text-primary); --text-sub: var(--text-secondary); --text-highlight: var(--brand-400); --border-light: var(--border-default); --border-hover: var(--border-brand); --brand-glow: var(--glow-brand); } /* 亮色主题预留（当前仅深色，定义出来便于日后扩展时不必推翻令牌体系）*/ :root[data-theme="light"] { --bg-void: #f1f5f9; --bg-body: #f8fafc; --bg-surface: #ffffff; --bg-surface-2: #f8fafc; --bg-elevated: #ffffff; --bg-inset: #f1f5f9; --text-primary: #0f172a; --text-body: #1e293b; --text-secondary: #475569; --text-tertiary: #94a3b8; --border-default: rgba(15, 23, 42, 0.10); --border-subtle: rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --text-on-brand: #ffffff; }