/* ============================================================ AnyMade Design Tokens — 单一信源 ------------------------------------------------------------ 权威文档：docs/upgrade-2026/10-design-system.md 来源：从 final-home-photo.html 内联 :root 抽取（2026-07-03）， 补齐字体排版刻度 / 间距 / z-index / 深色主题。 使用方：所有 docs/upgrade-2026/prototypes/*.html 原型统一 本文件； 进 redesign/p1 开发后，本文件是 Tailwind4 @theme 映射的输入基准 （颜色语义命名对齐 shadcn 现有 --background/--primary 等变量， 但增加更细颗粒度的 bg/bg-deep/surface 三层，见 10 §3）。 主题切换：默认跟随系统 prefers-color-scheme；手动切换用 （与现有 tailwind.config.js `darkMode:["class"]` 策略一致，next-themes 标准做法）。两套规则同时存在，`.dark` 优先级高于 media query。 ============================================================ */ /* ============ 浅色主题（默认） ============ */ :root { /* ---- 颜色 · 背景/表面三层（2026-07-03 定稿：平面化色调分层， 静态 UI 零阴影，靠 bg(页面)/surface(白卡)/bg-deep(色块带) 三层色差； 阴影只留交互时刻：hover 抬升/toast/弹层） ---- */ --bg: #F6F4EF; --bg-deep: #ECE9E1; --surface: #FFFFFF; --surface-2: #FAF9F6; /* 新增：介于 surface 与 bg 之间的第四层，用于 surface 内再分组（如卡片内的子区块），避免和 bg-deep 混淆 */ /* ---- 颜色 · 文字三层 ---- */ --ink: #191621; /* 微带紫调的近黑 */ --ink-2: #6B6675; --ink-3: #9B96A4; /* ---- 颜色 · 分隔（⚠️ 硬规则 2026-07-03：禁用描边/hairline 做布局分隔， 一律色块色调对比 Apple 式；--line 仅留给极特殊场景，如输入框内部分隔线） ---- */ --line: #E8E5DE; /* ---- 颜色 · 魔法系（电紫，只做点缀与生成时刻） ---- */ --violet: #6C4CF1; --violet-soft: #EFEBFF; --cyan: #23C8C3; /* ---- 颜色 · 温度系（珊瑚，用于价格/愉悦点/CTA 强调） ---- */ --coral: #F0634C; --coral-soft: #FFEFEA; --amber: #F7B267; /* ---- 颜色 · 语义状态（新增，2026-07-04：表单校验/toast 语义色， 浅色版直接复用魔法系/温度系色相，避免再引入新色相破坏调色板） ---- */ --success: #1FA97A; --success-soft: #E5F7EF; --warning: var(--amber); --warning-soft: #FFF4E4; --danger: var(--coral); --danger-soft: var(--coral-soft); --info: var(--violet); --info-soft: var(--violet-soft); /* ---- 颜色 · 内容点缀色（品类卡实拍图底色，2026-07-04 从内联硬编码抽取， 严格意义上是「摄影美术色」不是「UI 语义色」，独立分组便于替换实拍图时整体调 ---- */ --tint-sticker: linear-gradient(150deg, #FFF7EC, #FFEDD9); --tint-magnet: linear-gradient(150deg, #F0F4F8, #E2E9F1); --tint-charm: linear-gradient(150deg, #F2EFFF, #E7E1FE); --tint-figure: linear-gradient(150deg, #FFF0EC, #FFE3DC); /* ---- 字体族（2026-07-03：去衬线，价格/Logo/数字统一现代无衬线） ---- */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Segoe UI", sans-serif; --font-display-cn: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif; /* ---- 字体排版刻度（新增，2026-07-04：从原型内散落的 11-18px 硬编码收敛为 6 级标题 + 4 级正文 + 2 级微文案，见 10 §4 使用规则） ---- */ --text-display: clamp(36px, 8vw, 58px); --lh-display: 1.08; --fw-display: 650; --text-h1: clamp(28px, 5vw, 40px); --lh-h1: 1.15; --fw-h1: 600; --text-h2: clamp(24px, 4.6vw, 32px); --lh-h2: 1.25; --fw-h2: 600; --text-h3: 20px; --lh-h3: 1.3; --fw-h3: 600; --text-h4: 17px; --lh-h4: 1.35; --fw-h4: 600; --text-h5: 15px; --lh-h5: 1.4; --fw-h5: 600; --text-p1: clamp(16px, 2vw, 18px); --lh-p1: 1.6; --fw-p1: 400; /* 引导段/Hero 副文案 */ --text-p2: 16px; --lh-p2: 1.6; --fw-p2: 400; /* 默认正文 */ --text-p3: 14px; --lh-p3: 1.5; --fw-p3: 400; /* 次级文本/表单说明/卡片描述 */ --text-p4: 13px; --lh-p4: 1.45; --fw-p4: 400; /* 密集 UI 文本/meta 信息 */ --text-caption: 12px; --lh-caption: 1.4; --fw-caption: 500; /* 徽标/标签/时间戳 */ --text-label: 11px; --lh-label: 1.3; --fw-label: 600; /* 微标签/eyebrow，常配 letter-spacing .04em + 大写 */ /* ---- 间距（沿用 Tailwind 默认 4px 基准刻度，不重复定义 raw 间距 token； 仅为「跨组件复用的布局级间距」定名，见 10 §5） ---- */ --space-section-y: clamp(64px, 10vw, 120px); /* 首页大区块之间的纵向间距 */ --space-container-x: 24px; /* 移动端容器左右留白 */ --space-container-x-desktop: 64px; /* 桌面端容器左右留白（1440 基准） */ /* ---- 圆角（商品卡更圆润；控件适中） ---- */ --r-lg: 24px; --r-md: 16px; --r-sm: 10px; --r-pill: 999px; /* ---- 阴影（浅色：真实投影；深色见下方 .dark 覆盖——纯黑投影在深色背景不可见， 深色改用「表面层级色差 + 极轻投影」组合） ---- */ --shadow-sm: 0 1px 2px rgba(25,22,33,.05), 0 2px 8px rgba(25,22,33,.04); --shadow-md: 0 2px 6px rgba(25,22,33,.05), 0 12px 32px rgba(25,22,33,.08); --shadow-lift: 0 4px 12px rgba(25,22,33,.06), 0 20px 48px rgba(25,22,33,.12); /* ---- 动效 token（08 §2，两处文档保持同一份值，改动需同步） ---- */ --dur-press: 140ms; --dur-fast: 180ms; --dur-base: 240ms; --dur-drawer: 400ms; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* ---- z-index 分层（新增，2026-07-04：弹层/toast/header 叠放次序未系统化过， 组件各自乱写 z-index 是常见 bug 来源，统一在此定死） ---- */ --z-header: 40; --z-dropdown: 50; --z-drawer: 60; --z-modal-backdrop: 70; --z-modal: 71; --z-toast: 80; /* ---- 断点参考值（写进 CSS 变量仅供 JS 读取用，媒体查询本身仍手写 px， CSS 不支持变量断点） ---- */ --bp-mobile: 390px; --bp-tablet: 768px; --bp-desktop: 1440px; } /* ============ 深色主题（.dark 类，与 tailwind.config.js darkMode:["class"] 对齐） ============ */ .dark { /* 背景/表面：不是浅色反相，而是重新设计——保留「紫调近黑」的品牌基因 （--ink 的色相延续到深色的 --bg，形成品牌识别的连续性） */ --bg: #15131B; --bg-deep: #0D0C11; --surface: #1E1B26; --surface-2: #262230; --ink: #F3F1F7; --ink-2: #ABA5B8; --ink-3: #726C82; --line: rgba(255,255,255,.08); /* 魔法系/温度系：适度提亮+提高饱和度，补偿深色背景下的对比度衰减 （同一 hue，非同一色值——直接照搬浅色值在深底上发灰，不达 AA） */ --violet: #8B72FF; --violet-soft: rgba(139,114,255,.16); --cyan: #3DE0DB; --coral: #FF7A61; --coral-soft: rgba(255,122,97,.16); --amber: #FFC685; --success: #2ECC91; --success-soft: rgba(46,204,145,.16); --warning: var(--amber); --warning-soft: rgba(255,198,133,.14); --danger: var(--coral); --danger-soft: var(--coral-soft); --info: var(--violet); --info-soft: var(--violet-soft); /* 品类卡实拍图底色：深色模式下调暗调灰，避免高亮浅色色块在深色页面里 像「开天窗」一样跳出（04 §? 视觉一致性原则） */ --tint-sticker: linear-gradient(150deg, #2B2620, #211D18); --tint-magnet: linear-gradient(150deg, #1E2226, #181B1E); --tint-charm: linear-gradient(150deg, #241F2E, #1B1824); --tint-figure: linear-gradient(150deg, #2B211E, #201917); /* 阴影：深色背景上黑色投影几乎不可见，靠更高不透明度 + 更集中的扩散半径， 配合 surface 比 bg 亮一档的层级差做主要的「浮起」感知 */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35); --shadow-lift: 0 4px 14px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.4); } /* ============ 系统跟随（未显式设置 .dark/.light 时的默认行为） ============ 与 next-themes 的 attribute="class" + defaultTheme="system" 配套： JS 在首屏前读取 prefers-color-scheme 写入 ，避免闪烁； 本 media query 仅作为 JS 未执行前 / 禁用 JS 场景的降级兜底。 */ @media (prefers-color-scheme: dark) { :root:not(.light) { --bg: #15131B; --bg-deep: #0D0C11; --surface: #1E1B26; --surface-2: #262230; --ink: #F3F1F7; --ink-2: #ABA5B8; --ink-3: #726C82; --line: rgba(255,255,255,.08); --violet: #8B72FF; --violet-soft: rgba(139,114,255,.16); --cyan: #3DE0DB; --coral: #FF7A61; --coral-soft: rgba(255,122,97,.16); --amber: #FFC685; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35); --shadow-lift: 0 4px 14px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.4); } }