Spaces:
Running
Running
| /* Perch · Warm Paper 主题（Claude 式设计语言，详见 docs/design-system.md） */ | |
| :root { | |
| --bg: #faf9f5; | |
| --bg-elevated: #f0eee6; | |
| --bg-sunken: #e8e5db; | |
| --border: #e3dfd3; | |
| --text: #1f1e1b; | |
| --text-secondary: #6b6862; | |
| --text-tertiary: #9c988d; | |
| --accent: #d97757; | |
| --accent-soft: #f4e3dc; | |
| --success: #7a9b76; | |
| --warning: #c9a227; | |
| --danger: #c05b4d; | |
| --font-serif: "Source Serif 4", "Songti SC", Georgia, serif; | |
| --font-sans: "Inter", "PingFang SC", system-ui, -apple-system, sans-serif; | |
| --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; | |
| --radius-control: 10px; | |
| --radius-card: 14px; | |
| --radius-float: 16px; | |
| --radius-chip: 8px; /* 小按钮/内嵌标签的次级圆角（控件 10px 之下的一档） */ | |
| --ease: cubic-bezier(0.2, 0, 0, 1); | |
| --dur: 150ms; | |
| --shadow-float: 0 4px 24px rgba(31, 30, 27, 0.08); | |
| /* 模态遮罩（抽屉/浮层后面的那层暗纱），深浅色各自取值 */ | |
| --scrim: rgba(31, 30, 27, 0.28); | |
| /* 浮窗毛玻璃（design-system §7：85% 暖纸底 + 20px 背景模糊） */ | |
| --glass: rgba(250, 249, 245, 0.85); | |
| --glass-blur: blur(20px); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #262521; | |
| --bg-elevated: #2f2e29; | |
| --bg-sunken: #1e1d1a; | |
| --border: #3b3a34; | |
| --text: #edeae0; | |
| --text-secondary: #a8a49a; | |
| --text-tertiary: #79766d; | |
| --accent: #e08a6e; | |
| --accent-soft: #45342d; | |
| --shadow-float: 0 4px 24px rgba(0, 0, 0, 0.35); | |
| --glass: rgba(38, 37, 33, 0.85); | |
| --scrim: rgba(0, 0, 0, 0.4); | |
| } | |
| } | |
| /* 契约 10A 外观：`data-theme` 显式覆盖段（设置里选「浅色/深色」时由 App 挂到 | |
| <html> 上）。`system` 不设属性 → 上面的 matchMedia 继续生效；这里的显式段 | |
| 写在 matchMedia 之后，同特异性下后写者赢，因此能盖过系统偏好。 */ | |
| [data-theme="light"] { | |
| --bg: #faf9f5; | |
| --bg-elevated: #f0eee6; | |
| --bg-sunken: #e8e5db; | |
| --border: #e3dfd3; | |
| --text: #1f1e1b; | |
| --text-secondary: #6b6862; | |
| --text-tertiary: #9c988d; | |
| --accent: #d97757; | |
| --accent-soft: #f4e3dc; | |
| --shadow-float: 0 4px 24px rgba(31, 30, 27, 0.08); | |
| --glass: rgba(250, 249, 245, 0.85); | |
| --scrim: rgba(31, 30, 27, 0.28); | |
| } | |
| [data-theme="dark"] { | |
| --bg: #262521; | |
| --bg-elevated: #2f2e29; | |
| --bg-sunken: #1e1d1a; | |
| --border: #3b3a34; | |
| --text: #edeae0; | |
| --text-secondary: #a8a49a; | |
| --text-tertiary: #79766d; | |
| --accent: #e08a6e; | |
| --accent-soft: #45342d; | |
| --shadow-float: 0 4px 24px rgba(0, 0, 0, 0.35); | |
| --glass: rgba(38, 37, 33, 0.85); | |
| --scrim: rgba(0, 0, 0, 0.4); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body, | |
| #root { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font-sans); | |
| font-size: 14.5px; | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| user-select: none; | |
| cursor: default; | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: var(--font-serif); | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| line-height: 1.3; | |
| margin: 0; | |
| } | |
| ::selection { | |
| background: var(--accent-soft); | |
| } | |
| :focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| /* 滚动条：细、暖、低调 */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-tertiary); | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| * { | |
| transition: none ; | |
| animation: none ; | |
| } | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| Gemini 外观（dev-duotheme · 双皮肤）——`[data-style="gemini"]` 覆盖段。 | |
| 与 `data-theme` 两轴正交（照 dev-tidy 的显式覆盖模式，追加在末尾）： | |
| 本段每条选择器都要求 data-style="gemini"，Warm Paper（无该属性 / | |
| ="warm"）零影响。段内顺序即层叠顺序： | |
| 1) Gemini 浅色默认（data-theme 缺省且系统浅色，或 data-theme="light"） | |
| 2) 系统深色（media 内 :not([data-theme="light"])，特异性 0,2,0 盖过 1） | |
| 3) 显式 data-theme="dark"（与 2 同特异性、写在其后 → 后写者赢； | |
| 系统浅色时 2 不命中，由它兜底） | |
| 配色取自 Google/Material（见回复《Gemini 风格规范》）：白底 + | |
| #dadce0 发丝线 + Google Blue 单主色 + 蓝→紫→粉签名渐变三令牌。 | |
| ═══════════════════════════════════════════════════════════════ */ | |
| /* 1) Gemini 浅色（纯白底 · Material 中性灰阶 · Google Blue） */ | |
| [data-style="gemini"] { | |
| --bg: #ffffff; | |
| --bg-elevated: #f8f9fa; | |
| --bg-sunken: #f1f3f4; | |
| --border: #dadce0; | |
| --text: #1f1f1f; | |
| --text-secondary: #5f6368; | |
| --text-tertiary: #80868b; | |
| --accent: #1a73e8; | |
| --accent-hover: #1967d2; /* 按钮 hover：Google Blue 700 */ | |
| --accent-soft: #e8f0fe; /* 蓝 50：激活态浅蓝底/选区 */ | |
| --success: #188038; | |
| --warning: #e37400; | |
| --danger: #d93025; | |
| /* Gemini 全 sans（「极简」的关键一刀）：所有衬线位换 Google Sans 展示栈， | |
| 正文同栈换 Text 字身；macOS 无 Google Sans → SF Pro Display/Text 接住。 */ | |
| --font-serif: "Google Sans Display", "Google Sans", "SF Pro Display", | |
| -apple-system, BlinkMacSystemFont, "PingFang SC", system-ui, sans-serif; | |
| --font-sans: "Google Sans Text", "Google Sans", "SF Pro Text", -apple-system, | |
| BlinkMacSystemFont, "PingFang SC", system-ui, sans-serif; | |
| /* --font-mono 不动：代码永远等宽 */ | |
| /* 签名渐变三令牌（蓝 → 紫 → 珊瑚粉）。使用纪律：只允许 | |
| 品牌标 / 欢迎页大标题高光 / Ultra 档强调 三处，其余黑白灰 + 单主色。 */ | |
| --grad-start: #4285f4; | |
| --grad-mid: #9b72cb; | |
| --grad-end: #d96570; | |
| --radius-card: 16px; /* Material 大圆角档（8/12/16/28）；控件/浮层令牌不动 */ | |
| --shadow-float: 0 1px 2px rgba(60, 64, 67, 0.1), 0 1px 3px rgba(60, 64, 67, 0.14); | |
| --glass: rgba(255, 255, 255, 0.85); | |
| --scrim: rgba(32, 33, 36, 0.32); | |
| } | |
| /* 2) Gemini 深色（跟随系统：Google dark gray #1e1f20 系） */ | |
| @media (prefers-color-scheme: dark) { | |
| [data-style="gemini"]:not([data-theme="light"]) { | |
| --bg: #1e1f20; | |
| --bg-elevated: #282a2c; | |
| --bg-sunken: #131314; | |
| --border: #3c4043; | |
| --text: #e3e3e3; | |
| --text-secondary: #9aa0a6; | |
| --text-tertiary: #80868b; | |
| --accent: #8ab4f8; | |
| --accent-hover: #a8c7fa; /* 深色 hover 走「浅变体」（Google 深色态加亮） */ | |
| --accent-soft: #1e3a5f; | |
| --success: #81c995; | |
| --warning: #fdd663; | |
| --danger: #f28b82; | |
| --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.55); | |
| --glass: rgba(30, 31, 32, 0.85); | |
| --scrim: rgba(0, 0, 0, 0.5); | |
| } | |
| } | |
| /* 3) Gemini 显式深色（设置里选「深色」→ data-theme="dark"；与 2 同款取值） */ | |
| [data-style="gemini"][data-theme="dark"] { | |
| --bg: #1e1f20; | |
| --bg-elevated: #282a2c; | |
| --bg-sunken: #131314; | |
| --border: #3c4043; | |
| --text: #e3e3e3; | |
| --text-secondary: #9aa0a6; | |
| --text-tertiary: #80868b; | |
| --accent: #8ab4f8; | |
| --accent-hover: #a8c7fa; | |
| --accent-soft: #1e3a5f; | |
| --success: #81c995; | |
| --warning: #fdd663; | |
| --danger: #f28b82; | |
| --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.55); | |
| --glass: rgba(30, 31, 32, 0.85); | |
| --scrim: rgba(0, 0, 0, 0.5); | |
| } | |