/** * Layer 1: Primitive Tokens（原始色板/字号/间距/阴影/字体家族） * * 仅被 Layer 2 Semantic 引用，业务代码不直接使用。 * 色板层不区分明暗，主题差异在 Semantic 层体现。 * * 对齐：CICD 项目 src/app/styles/tokens/primitive.css * 关联：project_rules §3.10 设计令牌规范 */ :root { /* ============ 色板（HSL 分量，非完整颜色） ============ */ /* Zinc 中性色板（shadcn 默认） */ --color-zinc-50: 0 0% 99%; --color-zinc-100: 240 4.8% 95.9%; --color-zinc-200: 240 5.9% 90%; --color-zinc-300: 240 4.8% 83.9%; --color-zinc-400: 240 5% 64.9%; --color-zinc-500: 240 3.8% 46.1%; --color-zinc-600: 240 5.2% 33.9%; --color-zinc-700: 240 5.3% 26.1%; --color-zinc-800: 240 5.9% 10%; --color-zinc-900: 240 5.9% 3.9%; --color-zinc-950: 240 10% 3.9%; /* Stone 暖灰（用于纸感业务扩展，如备课编辑器） */ --color-stone-50: 60 4.8% 95.9%; --color-stone-100: 60 5.1% 90%; --color-stone-200: 20 5.9% 90%; --color-stone-300: 24 5.7% 82.9%; --color-stone-400: 24 5.4% 63.9%; --color-stone-500: 25 5.1% 44.7%; --color-stone-600: 33 5% 39.8%; --color-stone-700: 30 5.2% 32.7%; --color-stone-800: 12 6.5% 31.4%; --color-stone-900: 24 10% 10%; --color-stone-950: 20 14.3% 4.1%; /* Indigo 强调色（业务交互强调） */ --color-indigo-500: 238.7 83.5% 66.7%; --color-indigo-600: 238.6 84.5% 59.8%; /* ============ 字号阶梯（10 级，0 最小 9 最大） ============ */ --font-size-0: 9px; /* 角色标签微字号 */ --font-size-1: 12px; /* 元信息/角色标签 */ --font-size-2: 13px; /* inline-node body */ --font-size-3: 13.5px; /* inline-node 主文（纸感） */ --font-size-4: 14px; /* 标题/按钮 */ --font-size-5: 16px; /* 正文（Fraunces 16px） */ --font-size-6: 18px; /* H2 */ --font-size-7: 20px; /* H1 */ --font-size-8: 24px; /* 区块标题 */ --font-size-9: 32px; /* 页面标题 */ /* ============ 间距阶梯 ============ */ --space-0: 0; --space-0_5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1_5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2_5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3_5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-18: 4.5rem; /* 72px */ /* ============ 阴影阶梯 ============ */ --shadow-1: 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-2: 0 1px 3px rgba(15, 15, 15, 0.06), 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-3: 0 4px 6px rgba(15, 15, 15, 0.05), 0 2px 4px rgba(15, 15, 15, 0.04); --shadow-4: 0 1px 2px rgba(15, 15, 15, 0.04), 0 8px 24px rgba(15, 15, 15, 0.04); --shadow-5: 0 1px 2px rgba(15, 15, 15, 0.06), 0 12px 36px rgba(15, 15, 15, 0.08); --shadow-6: 0 10px 15px rgba(15, 15, 15, 0.1), 0 4px 6px rgba(15, 15, 15, 0.05); /* ============ 字体家族 ============ */ /* 引用 next/font 在 上注入的 CSS 变量（fallback 保证 SSR/无字体时降级） */ --font-family-sans: var(--font-inter, 'Inter'), system-ui, sans-serif; --font-family-serif: var(--font-fraunces, 'Fraunces'), Georgia, serif; --font-family-mono: var(--font-jetbrains-mono, 'JetBrains Mono'), ui-monospace, monospace; /* ============ 行高阶梯 ============ */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* ============ 字重阶梯 ============ */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============ 动效 ============ */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ============ z-index ============ */ --z-dropdown: 1000; --z-sticky: 1100; --z-modal: 1300; --z-popover: 1400; --z-toast: 1500; }