Blame for css/theme.css

/* 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 !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   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);
}