/* =========================================================== tokens.css — 全局 CSS 变量（颜色 / 字体 / 圆角 / 阴影 / 间距 / 动效） 液态玻璃浅色版 · Apple Vision Pro 美学 =========================================================== */ :root { /* ---------- 中性系统色（浅色玻璃基底） ---------- */ --bg-base: #EEF1F6; --bg-elev-1: #F4F6FA; --bg-elev-2: rgba(255, 255, 255, 0.55); --bg-elev-3: rgba(255, 255, 255, 0.72); --bg-elev-4: rgba(255, 255, 255, 0.85); --text-primary: #0E1320; --text-secondary: #5A6478; --text-tertiary: #8C95A8; --text-quaternary: #B3BAC8; --border-glass: rgba(255, 255, 255, 0.85); --border-shadow: rgba(13, 24, 48, 0.08); --border-soft: rgba(13, 24, 48, 0.06); --divider: rgba(13, 24, 48, 0.06); /* ---------- 玻璃构造中间变量（主题切换的核心） ---------- - --glass-tint-N：玻璃白底/玻璃球的阶梯透明度（浅色=白色，深色=深蓝灰） - --ink-soft / --ink-softer：玻璃暗边/内阴影基色（浅色=深蓝，深色=黑） - --glass-highlight / --glass-highlight-fade：顶部 ::before 高光 - --glass-inner-line：玻璃 inset 1px 亮线 - --shadow-rgb：阴影颜色 RGB 通道（用于 rgba(var(--shadow-rgb), alpha)） - --orb-tint：玻璃球顶部反光色 */ --glass-tint-1: rgba(255, 255, 255, 0.95); --glass-tint-2: rgba(255, 255, 255, 0.65); --glass-tint-3: rgba(255, 255, 255, 0.40); --glass-tint-4: rgba(255, 255, 255, 0.15); --ink-soft: rgba(13, 24, 48, 0.06); --ink-softer: rgba(13, 24, 48, 0.02); --glass-highlight: rgba(255, 255, 255, 0.6); --glass-highlight-fade: rgba(255, 255, 255, 0.0); --glass-inner-line: rgba(255, 255, 255, 0.4); --shadow-rgb: 13, 24, 48; --shadow-soft-alpha: 0.08; --shadow-mid-alpha: 0.12; --shadow-strong-alpha: 0.20; --orb-tint: rgba(255, 255, 255, 0.95); --orb-tint-soft: rgba(255, 255, 255, 0.4); /* ---------- 状态色 ---------- */ --accent: #5B6CFF; --accent-soft: rgba(91, 108, 255, 0.12); --accent-strong: #4858E0; --positive: #16A34A; --neutral: #9AA3B2; --warning: #F59E0B; --danger: #E5484D; --positive-soft: rgba(22, 163, 74, 0.14); --neutral-soft: rgba(154, 163, 178, 0.16); --warning-soft: rgba(245, 158, 11, 0.16); /* ---------- 10 层主题色（主色 + 渐变） ---------- */ --l1: #00B8A9; /* 能源 - 青 */ --l2: #1E88E5; /* 设备 - 蓝绿 */ --l3: #6C5CE7; /* 芯片 - 紫 */ --l4: #E84393; /* 互联 - 粉 */ --l5: #0984E3; /* 云 - 天蓝 */ --l6: #FF7A45; /* 模型 - 橙 */ --l7: #00B894; /* 安全 - 翠绿 */ --l8: #26C6DA; /* 端侧 - 薄荷 */ --l9: #A55EEA; /* 应用 - 紫粉 */ --l10: #F7B500; /* 具身 - 金 */ /* 每层渐变 token：用于光斑、玻璃边框、图标主色 */ --l1-grad: linear-gradient(135deg, #00B8A9 0%, #00D4C2 100%); --l2-grad: linear-gradient(135deg, #1E88E5 0%, #4FB0F0 100%); --l3-grad: linear-gradient(135deg, #6C5CE7 0%, #9A8CFF 100%); --l4-grad: linear-gradient(135deg, #E84393 0%, #FF7AB8 100%); --l5-grad: linear-gradient(135deg, #0984E3 0%, #4FB0F0 100%); --l6-grad: linear-gradient(135deg, #FF7A45 0%, #FFA470 100%); --l7-grad: linear-gradient(135deg, #00B894 0%, #2EE4BC 100%); --l8-grad: linear-gradient(135deg, #26C6DA 0%, #5DE2F0 100%); --l9-grad: linear-gradient(135deg, #A55EEA 0%, #C988FF 100%); --l10-grad: linear-gradient(135deg, #F7B500 0%, #FFD55A 100%); /* 层色透明叠层（用于光斑 / 微背景） */ --l1-glow: rgba(0, 184, 169, 0.18); --l2-glow: rgba(30, 136, 229, 0.16); --l3-glow: rgba(108, 92, 231, 0.18); --l4-glow: rgba(232, 67, 147, 0.14); --l5-glow: rgba(9, 132, 227, 0.16); --l6-glow: rgba(255, 122, 69, 0.14); --l7-glow: rgba(0, 184, 148, 0.16); --l8-glow: rgba(38, 198, 218, 0.16); --l9-glow: rgba(165, 94, 234, 0.16); --l10-glow: rgba(247, 181, 0, 0.14); /* ---------- 背景光斑（径向渐变层） ---------- */ --glow-1: radial-gradient(60% 50% at 15% 10%, rgba(108, 92, 231, 0.18) 0%, transparent 70%); --glow-2: radial-gradient(50% 45% at 85% 25%, rgba(232, 67, 147, 0.14) 0%, transparent 70%); --glow-3: radial-gradient(55% 50% at 50% 90%, rgba(0, 184, 148, 0.16) 0%, transparent 70%); --glow-4: radial-gradient(45% 40% at 75% 80%, rgba(247, 181, 0, 0.12) 0%, transparent 70%); /* ---------- 字体系统 ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, "Menlo", monospace; --font-display: "SF Pro Display", "PingFang SC", -apple-system, sans-serif; /* ---------- 字号 ---------- */ --fs-h1: 44px; --fs-h2: 28px; --fs-h3: 20px; --fs-body-lg: 16px; --fs-body: 14px; --fs-caption: 12px; --fs-ticker: 13px; --fs-metric: 32px; --fs-layer-num: 60px; /* ---------- 字重 ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- 行高 ---------- */ --lh-tight: 1.1; --lh-heading: 1.2; --lh-sub: 1.3; --lh-body: 1.5; --lh-caption: 1.4; /* ---------- 字间距 ---------- */ --ls-tight: -0.01em; --ls-normal: 0; --ls-ticker: 0.04em; /* ---------- 圆角 ---------- */ --r-layer: 28px; --r-card: 18px; --r-card-lg: 20px; --r-button: 12px; --r-pill: 999px; --r-modal: 24px; --r-search: 14px; /* ---------- 间距系统（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; /* ---------- 玻璃阴影 ---------- */ --shadow-glass-sm: 0 2px 8px -2px rgba(var(--shadow-rgb), var(--shadow-soft-alpha)), 0 1px 2px -1px rgba(var(--shadow-rgb), 0.04), inset 0 1px 0 0 var(--glass-inner-line); --shadow-glass-md: 0 10px 30px -12px rgba(var(--shadow-rgb), var(--shadow-mid-alpha)), 0 2px 6px -2px rgba(var(--shadow-rgb), 0.06), inset 0 1px 0 0 var(--glass-inner-line); --shadow-glass-lg: 0 30px 80px -20px rgba(var(--shadow-rgb), var(--shadow-strong-alpha)), 0 10px 30px -8px rgba(var(--shadow-rgb), 0.10), inset 0 1px 0 0 var(--glass-inner-line); --shadow-pop: 0 14px 40px -10px rgba(var(--shadow-rgb), 0.18), 0 4px 12px -4px rgba(var(--shadow-rgb), 0.10); --shadow-chip-hover: 0 6px 16px -4px rgba(var(--shadow-rgb), 0.14), 0 2px 4px -1px rgba(var(--shadow-rgb), var(--shadow-soft-alpha)); /* ---------- 玻璃模糊参数 ---------- */ --blur-md: blur(20px) saturate(160%); --blur-lg: blur(40px) saturate(180%); --blur-xl: blur(50px) saturate(200%); /* ---------- 动效曲线与时长 ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 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: 180ms; --dur-base: 240ms; --dur-slow: 280ms; /* ---------- 层级 z-index ---------- */ --z-bg: 0; --z-content: 10; --z-footer: 20; --z-sub-header: 90; --z-header: 100; --z-back-top: 80; --z-drawer: 200; --z-modal: 300; --z-dropdown: 150; /* ---------- 容器宽度 ---------- */ --container-max: 1320px; --container-pad: 32px; /* ---------- Header 尺寸 ---------- */ --header-h: 64px; --sub-header-h: 56px; } /* 为每层注入层色变量到对应 DOM 节点（JS 通过 data-layer 属性选择） */ [data-layer="1"] { --layer-color: var(--l1); --layer-grad: var(--l1-grad); --layer-glow: var(--l1-glow); } [data-layer="2"] { --layer-color: var(--l2); --layer-grad: var(--l2-grad); --layer-glow: var(--l2-glow); } [data-layer="3"] { --layer-color: var(--l3); --layer-grad: var(--l3-grad); --layer-glow: var(--l3-glow); } [data-layer="4"] { --layer-color: var(--l4); --layer-grad: var(--l4-grad); --layer-glow: var(--l4-glow); } [data-layer="5"] { --layer-color: var(--l5); --layer-grad: var(--l5-grad); --layer-glow: var(--l5-glow); } [data-layer="6"] { --layer-color: var(--l6); --layer-grad: var(--l6-grad); --layer-glow: var(--l6-glow); } [data-layer="7"] { --layer-color: var(--l7); --layer-grad: var(--l7-grad); --layer-glow: var(--l7-glow); } [data-layer="8"] { --layer-color: var(--l8); --layer-grad: var(--l8-grad); --layer-glow: var(--l8-glow); } [data-layer="9"] { --layer-color: var(--l9); --layer-grad: var(--l9-grad); --layer-glow: var(--l9-glow); } [data-layer="10"] { --layer-color: var(--l10); --layer-grad: var(--l10-grad); --layer-glow: var(--l10-glow); } /* =========================================================== 深色主题覆盖 — 液态玻璃夜空版 - 基底改为深邃夜蓝 #0A0E1A - 玻璃底色：半透明深蓝灰，保留玻璃通透感 - 文字：浅色阶梯 - 阴影：改为黑色 + 更高 alpha（深色背景上需要更强阴影才显形） - 高光：克制到 0.06-0.10（避免深色玻璃上白光过曝） - 彩色光斑：alpha 翻倍（深色背景上需要更饱和才显色） =========================================================== */ :root[data-theme="dark"] { /* ---------- 中性系统色 ---------- */ --bg-base: #0A0E1A; --bg-elev-1: #131826; --bg-elev-2: rgba(28, 36, 56, 0.55); --bg-elev-3: rgba(32, 42, 64, 0.72); --bg-elev-4: rgba(38, 48, 72, 0.85); --text-primary: #F2F4FA; --text-secondary: #B0B8CC; --text-tertiary: #7C8499; --text-quaternary: #586074; --border-glass: rgba(255, 255, 255, 0.10); --border-shadow: rgba(0, 0, 0, 0.30); --border-soft: rgba(255, 255, 255, 0.06); --divider: rgba(255, 255, 255, 0.06); /* ---------- 玻璃构造中间变量 ---------- */ /* 玻璃底色：深蓝灰阶梯 */ --glass-tint-1: rgba(40, 50, 72, 0.85); --glass-tint-2: rgba(40, 50, 72, 0.55); --glass-tint-3: rgba(60, 70, 92, 0.30); --glass-tint-4: rgba(60, 70, 92, 0.10); /* 暗边/内阴影基色：纯黑（深色玻璃上用黑色作暗边） */ --ink-soft: rgba(0, 0, 0, 0.20); --ink-softer: rgba(0, 0, 0, 0.08); /* 顶部高光：克制的白色，避免深色玻璃上过曝 */ --glass-highlight: rgba(255, 255, 255, 0.08); --glass-highlight-fade: rgba(255, 255, 255, 0.0); --glass-inner-line: rgba(255, 255, 255, 0.10); /* 阴影基色：纯黑 + 更高 alpha */ --shadow-rgb: 0, 0, 0; --shadow-soft-alpha: 0.30; --shadow-mid-alpha: 0.45; --shadow-strong-alpha: 0.60; /* 玻璃球顶部反光：浅色，但比浅色模式更弱 */ --orb-tint: rgba(255, 255, 255, 0.20); --orb-tint-soft: rgba(255, 255, 255, 0.06); /* ---------- 状态色（深色模式略提亮以保持对比度） ---------- */ --accent: #7C92FF; --accent-soft: rgba(124, 146, 255, 0.20); --accent-strong: #A8B8FF; --positive: #4ADE80; --neutral: #9AA3B2; --warning: #FBBF24; --danger: #F87171; --positive-soft: rgba(74, 222, 128, 0.18); --neutral-soft: rgba(154, 163, 178, 0.20); --warning-soft: rgba(251, 191, 36, 0.20); /* ---------- 层色透明叠层（深色背景上 alpha 加倍） ---------- */ --l1-glow: rgba(0, 184, 169, 0.30); --l2-glow: rgba(30, 136, 229, 0.28); --l3-glow: rgba(108, 92, 231, 0.32); --l4-glow: rgba(232, 67, 147, 0.26); --l5-glow: rgba(9, 132, 227, 0.28); --l6-glow: rgba(255, 122, 69, 0.26); --l7-glow: rgba(0, 184, 148, 0.28); --l8-glow: rgba(38, 198, 218, 0.28); --l9-glow: rgba(165, 94, 234, 0.28); --l10-glow: rgba(247, 181, 0, 0.26); /* ---------- 背景光斑（深色背景上 alpha 翻倍，颜色更饱和） ---------- */ --glow-1: radial-gradient(60% 50% at 15% 10%, rgba(108, 92, 231, 0.32) 0%, transparent 70%); --glow-2: radial-gradient(50% 45% at 85% 25%, rgba(232, 67, 147, 0.22) 0%, transparent 70%); --glow-3: radial-gradient(55% 50% at 50% 90%, rgba(0, 184, 148, 0.22) 0%, transparent 70%); --glow-4: radial-gradient(45% 40% at 75% 80%, rgba(247, 181, 0, 0.18) 0%, transparent 70%); } /* 系统偏好由内联脚本（index.html 头部）在首屏前根据 prefers-color-scheme 写入 ，因此这里不需要 @media 规则 */