/* ========================================================================== PiLive — Design Tokens 风格：纸感编辑排版 × 精密仪表盘（浅色） 墨紫是唯一信号色；层级靠纸张分层、发丝线与字号跨度建立，不靠颜色堆叠 ========================================================================== */ :root { /* ---- 纸张层 ------------------------------------------------------ */ --paper-0: oklch(100% 0 0); /* 抬升面：卡片、面板 */ --paper-1: oklch(98.6% 0.003 291); /* 画布 */ --paper-2: oklch(97.2% 0.005 291); /* 凹陷面：轨道、输入 */ --paper-3: oklch(95.4% 0.008 291); /* 表头、次级填充 */ --paper-tint: oklch(97.6% 0.013 291); /* 极淡紫染 */ /* ---- 墨 ---------------------------------------------------------- */ --ink-900: oklch(21% 0.021 291); /* 标题 */ --ink-700: oklch(34% 0.017 291); /* 正文 */ --ink-500: oklch(52% 0.013 291); /* 次要 */ --ink-400: oklch(62% 0.011 291); /* 弱 */ --ink-300: oklch(72% 0.009 291); /* 极弱、刻度 */ /* ---- 信号紫（唯一强调色，克制使用） ------------------------------ */ --violet: oklch(45% 0.188 291); --violet-deep: oklch(35% 0.152 291); --violet-lift: oklch(52% 0.202 291); --violet-soft: oklch(72% 0.132 291); --violet-wash: oklch(95.6% 0.028 291); --violet-a08: oklch(45% 0.188 291 / 0.08); --violet-a14: oklch(45% 0.188 291 / 0.14); --violet-a30: oklch(45% 0.188 291 / 0.30); /* ---- 数据序列（紫为主序，钢蓝作对位，其余中性） ------------------ */ --ds-1: oklch(45% 0.188 291); /* 主序列 · 墨紫 */ --ds-2: oklch(66% 0.128 291); /* 主序列淡阶 */ --ds-3: oklch(56% 0.086 232); /* 对位 · 钢蓝（蓝海 / 机会） */ --ds-4: oklch(68% 0.108 68); /* 提示 · 沙金（中优先级） */ --ds-5: oklch(80% 0.007 291); /* 灰 · 其他 */ --ds-pos: oklch(52% 0.112 158); /* 正向 */ --ds-grid: oklch(21% 0.021 291 / 0.07); /* ---- 线 ---------------------------------------------------------- */ --line: oklch(21% 0.021 291 / 0.115); --line-soft: oklch(21% 0.021 291 / 0.065); --line-strong: oklch(21% 0.021 291 / 0.24); --line-violet: oklch(45% 0.188 291 / 0.30); /* ---- 抬升（浅色要靠柔阴影，不靠边框粗细） ------------------------ */ --sheen: inset 0 1px 0 oklch(100% 0 0 / 0.9); --shadow-card: 0 1px 1px oklch(21% 0.021 291 / 0.04), 0 6px 16px -10px oklch(21% 0.021 291 / 0.16); --shadow-lift: 0 1px 2px oklch(21% 0.021 291 / 0.05), 0 20px 44px -22px oklch(21% 0.021 291 / 0.30); --shadow-violet: 0 8px 26px -12px oklch(45% 0.188 291 / 0.55); /* ---- 字体：无衬线做界面，衬线做编辑性时刻（真实配对策略） -------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif; --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", serif; --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace; /* ---- 字号阶 ------------------------------------------------------ 控制台以 14px 为正文基准，九级封闭阶梯，禁止阶外字号。 11px 是中文可读下限；10px 仅允许用于图表轴上的纯数字刻度。 层级：页标题 20 > 区块 16 > 面板/正文 14 > 次要 13 > 说明 12 > 微 11 ------------------------------------------------------------------ */ --t-3xl: 2rem; /* 32px · 特大 KPI、定价数字 */ --t-2xl: 1.625rem; /* 26px · 标准 KPI */ --t-xl: 1.25rem; /* 20px · 页标题、小 KPI */ --t-lg: 1.125rem; /* 18px · 卡片主标题 */ --t-md: 1rem; /* 16px · 区块标题、提词正文 */ --t-base: 0.875rem; /* 14px · 正文、面板标题（默认） */ --t-sm: 0.8125rem; /* 13px · 次要正文、表格、导航 */ --t-xs: 0.75rem; /* 12px · 说明、辅助标签 */ --t-2xs: 0.6875rem; /* 11px · 徽标、时间戳（下限） */ --t-axis: 10px; /* 图表轴刻度，仅限数字 */ /* 品牌站保留大跨度编辑式标题 */ --t-display: clamp(3rem, 1.1rem + 6.6vw, 7.4rem); --t-h1: clamp(2rem, 1.3rem + 2.4vw, 3.15rem); --t-h2: var(--t-lg); --t-h3: var(--t-md); /* ---- 节奏（刻意非均匀） ------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px; --s-section: clamp(64px, 4rem + 5vw, 148px); /* ---- 圆角（分级，不统一） ---------------------------------------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* ---- 动效 -------------------------------------------------------- */ --dur-fast: 130ms; --dur-base: 240ms; --dur-slow: 520ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* ---- 结构尺寸 ---------------------------------------------------- */ --rail-w: 246px; --topbar-h: 60px; --shell-max: 1560px; --prose-max: 68ch; /* 控制台外壳 */ --sidebar-w: 240px; --sidebar-w-min: 64px; --appbar-h: 56px; --view-pad: clamp(20px, 1rem + 1vw, 32px); --z-menu: 300; --z-overlay: 400; --z-toast: 500; /* ---- 纹理：极细纸纹，避免"数字塑料感" ---------------------------- */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }