/* ═══════════════════════════════════════════════════════════════════════ 桌悦书游 · 设计 token 单一真相源 (Pulp Schoolhouse) —— 所有 app 页(app/books/review/archives)的设计变量唯一来源。 规范文档见 skills/pulp-design/references/design-tokens.md。 引入顺序约定:每页 先 link 本文件,再 link style.css —— 组件样式 依赖这里的变量。index.html 为「即时渲染的入口闪屏」,刻意自带内联副本 (不外链,容错优先),是唯一的有意例外;若改这里的品牌色,记得同步 index。 ⚠ 品牌主色为锁定值(见 docs/brand-guidelines.md §2.1),不得改值,只可单源化。 ═══════════════════════════════════════════════════════════════════════ */ :root { /* ─── Brand 主色(锁定,与 welcome 一致)──────────────── */ --pulp-blue: #1e38cc; --pulp-yellow: #f5c210; --pulp-tangerine: #f07a18; --brick-red: #c14a3a; --schoolhouse-mint: #7ab69a; /* ─── 中性纸感(语义 alias)──────────────────────────── */ --bg: #f3ead5; /* newsprint */ --newsprint: #f3ead5; /* 同 --bg,语义别名:深底 chip/sticky 头的奶油色文字与底色 */ --surface: #ffffff; /* 工具页主卡用白纸,提高搜索/列表可读性 */ --surface-glass: rgba(255, 255, 255, 0.94); /* topbar/filters 不再做玻璃,改高不透 */ --surface-soft: #e8d9b5; /* manila — 次级卡 / chip 底 / hover */ --surface-hover: #efe1c4; /* 语义别名补全:review/books 大量引用而此前未定义,导致 var() 整条声明失效 (背景变透明/边框消失/文字回退继承色),典型症状:「提交到仓库」主按钮 奶油色文字落在奶油色顶栏上隐身,悬停换红底才现形 */ --ink: var(--text); /* #1a1410 */ --faded-ink: var(--muted); /* #5a4a3c */ --manila: var(--surface-soft); /* #e8d9b5 */ --border-warm: var(--border-strong); /* 暖纸感描边 */ --r-tight: var(--r-sm); --r-card: var(--r-md); --shadow-paper: var(--shadow); --shadow-stamp: 0 2px 0 rgba(26, 20, 16, 0.30); /* 票戳式硬投影 */ --border: rgba(90, 74, 60, 0.20); --border-strong: rgba(90, 74, 60, 0.38); --border-glass: rgba(90, 74, 60, 0.12); /* ─── 文字层级 ─────────────────────────────────────── */ --text: #1a1410; /* ink */ --text-soft: #3d2e22; --muted: #5a4a3c; /* faded-ink */ --muted-light: #8a7965; /* ─── 强调色 alias(全部走 brand)────────────────────── */ --accent: var(--pulp-blue); --accent-hover: #16299c; --accent-soft: rgba(30, 56, 204, 0.10); --accent-ring: rgba(30, 56, 204, 0.18); /* ─── 高亮色 · 黄油体 ───────────────────────────────── */ --hl-bg: #fef0a8; --hl-strong: var(--pulp-yellow); --hl-text: #5e3d05; /* ─── 教学级别 L1-L6:warm fire 渐变 ─────────────────── */ /* flat 用于文字/边框,grad 用于 chip 徽章。L1-L2 浅 → ink 文字,L3-L6 深 → cream 文字 */ /* 暖系 fire ramp,与 logo 三色对齐(L1=pulp yellow, L2=pulp tangerine, L3=brick red), 文字对比度全部 ≥ 4.5:1(L1-L2 ink 字 + 浅底,L3-L6 newsprint 字 + 深底) */ --l1: #f5c210; --l1-grad: linear-gradient(135deg, #fef3c7, #f5c210); --l2: #f07a18; --l2-grad: linear-gradient(135deg, #f5c210, #f07a18); --l3: #c14a3a; --l3-grad: linear-gradient(135deg, #ad4321, #c14a3a); /* 起点收紧到 #ad4321,newsprint 字稳定 ≥ 5:1 */ --l4: #8e2a1f; --l4-grad: linear-gradient(135deg, #c14a3a, #8e2a1f); --l5: #5a1812; --l5-grad: linear-gradient(135deg, #8e2a1f, #5a1812); --l6: #2a0c08; --l6-grad: linear-gradient(135deg, #5a1812, #2a0c08); /* 色盲二重编码:每级独立 pattern(角度/方向不同),与颜色叠加,色盲用户也能区分 */ --l1-pat: repeating-linear-gradient(45deg, transparent 0 4px, rgba(26,20,16,0.07) 4px 5px); /* ↗ forward thin */ --l2-pat: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(26,20,16,0.07) 4px 5px); /* ↖ backward */ --l3-pat: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,0.10) 4px 5px);/* ─ horizontal */ --l4-pat: repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,0.10) 4px 5px);/* │ vertical */ --l5-pat: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,0.10) 4px 5px);/* ↗ on dark */ --l6-pat: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(255,255,255,0.12) 4px 5px);/* ↖ on dark */ /* ─── 词角色 ────────────────────────────────────────── */ --special: var(--brick-red); /* ⭐ 特别词 */ --common: var(--muted); /* 公共词 */ /* ─── 语义状态(对/错/警示)· 复用品牌色, 供教研档案争霸题判定/待审高亮 ─── 文字色取暗化版以保证纸底上 ≥ 4.5:1; 背景取极淡同色块 */ --color-success: #2f7d5b; /* mint 暗化, 答对/合格 */ --color-danger: #b23b2b; /* brick-red 暗化, 答错/不合格 */ --color-warning: #9a6a05; /* 暖黄暗化, 待审/占位 */ --color-background-success: rgba(122, 182, 154, 0.16); /* schoolhouse-mint 淡底 */ --color-background-danger: rgba(193, 74, 58, 0.12); /* brick-red 淡底 */ --color-background-warning: rgba(245, 194, 16, 0.16); /* pulp-yellow 淡底 */ --border-success: rgba(47, 125, 91, 0.40); --border-danger: rgba(178, 59, 43, 0.40); --border-warning: rgba(154, 106, 5, 0.38); /* ─── 阴影 · 纸质感 ─────────────────────────────────── */ --shadow-sm: 0 1px 0 rgba(26,20,16,0.06), 0 1px 2px rgba(26,20,16,0.04); --shadow: 0 1px 0 rgba(26,20,16,0.06), 0 3px 8px rgba(26,20,16,0.08); --shadow-md: 0 1px 0 rgba(26,20,16,0.06), 0 8px 20px rgba(26,20,16,0.12); --shadow-lg: 0 2px 0 rgba(26,20,16,0.10), 0 18px 36px rgba(26,20,16,0.16); --shadow-colored: 0 6px 18px -4px rgba(30, 56, 204, 0.22); /* ─── 圆角(克制,纸券/票感)───────────────────────── */ --r-sm: 4px; --r: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 22px; /* ─── 字体栈 ────────────────────────────────────────── */ --font-display-en: "Alfa Slab One", "Bowlby One", Georgia, serif; --font-display-cn: "ZCOOL QingKe HuangYou", "Source Han Sans SC", "PingFang SC", sans-serif; --font-body-en: "Vollkorn", Georgia, "Times New Roman", serif; --font-body-cn: "Noto Serif SC", "Source Han Serif SC", "KaiTi", "STKaiti", serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; --font-display: var(--font-display-cn), "Alfa Slab One", serif; --font-body: var(--font-body-cn), "Vollkorn", serif; /* ─── 过渡 ──────────────────────────────────────────── */ --t-fast: 180ms ease-out; --t: 320ms cubic-bezier(0.32, 0.72, 0, 1); --t-slow: 500ms cubic-bezier(0.32, 0.72, 0, 1); /* ─── 焦点环(a11y 基线,统一 focus-visible 用)────────── */ --focus-ring: 0 0 0 3px var(--accent-ring); --focus-outline: 2px solid var(--pulp-blue); }