/* 设计变量 — theme-invariant
   字体 / 字号 / 字重 / letter-spacing / line-height / radius / motion / brain。
   跨设备共享：phone HTML、webapp HTML、Flutter 真实现都对齐这里。
   修改本文件 → 所有 surface 同步生效（不跟主题切换）。
   关联 spec：docs/superpowers/specs/2026-05-11-phone-css-modularization-design.md
   命名 schema 跟 design-system.md token 表对齐（v0.13.0 起 token name 列同步补齐）。
   v0.6.21 — 字体从 Inter/Copernicus/Noto Serif SC 收敛为 Braun 体系的
   Geist / Noto Sans SC / Geist Mono（去掉手机端旧 serif 语气）；字重 semibold
   → 650；radius 收紧到 Braun/TE 硬边工程感；letter-spacing / duration 同步。 */


:root {
  /* ── 字体 family：同步 Webapp Braun，去掉旧手机端的 serif 语气 ── */
  --font-body:  'Geist', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-serif: 'Geist', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-quote: 'Geist', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  /* v0.6.21：mono 改 D-DIN 优先 —— 数字（时间/时长/计数/水印/eyebrow）走
     DIN 1451 工业字体，呼应 Braun。非数字 mono 文本 fallback Geist Mono。 */
  --font-mono:  'D-DIN', 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* v0.6.22：首页 hero 专用字体 token（hero 问句 + 署名）。D-DIN（DIN 1451
     工业标准衍生）命中拉丁/数字 → 跟时间/计数同款工业语气、呼应 Braun；
     中文 D-DIN 无字形，回退 Noto Sans SC（跟正文体系一致）。改 hero 字体
     只动这一行。其余 UI 一律不碰。 */
  --font-hero:  'D-DIN', 'Noto Sans SC', system-ui, -apple-system, sans-serif;

  /* ── 字号 scale（design-system §2，10 档） ── */
  --fs-chip-xs:  10px;  /* 极小 chip / 月历 day 数 */
  --fs-mono-cap: 11px;  /* mono UPPERCASE eyebrow / time-col */
  --fs-meta:     12px;  /* event-time / chip / mono code-meta */
  --fs-snippet:  13px;  /* snippet / meta line / body 小 */
  --fs-body:     14px;  /* body 默认 */
  --fs-body-lg:  15px;  /* 重要 body / sub-title */
  --fs-title:    16px;  /* calendar lv-m title / 中等卡标题 */
  --fs-title-lg: 17px;  /* iOS Headline / event title / navbar 主标题 */
  --fs-h1:       22px;  /* 笔记编辑器顶部 H1 */
  --fs-hero:     30px;  /* hero composer 首页问句 */

  /* ── 字重 scale（design-system §3，3 档） ── */
  --fw-regular:  400;  /* body 默认 */
  --fw-medium:   500;  /* 标题 / 强调（绝大多数） */
  --fw-semibold: 650;  /* Braun 强调字重：标题 / 关键读数 / 稀缺重量信号 */

  /* ── letter-spacing scale（design-system §4） ── */
  --ls-mono:      0.04em;   /* mono default tracking */
  --ls-mono-cap:  0.06em;   /* mono caption（profile email 等） */
  --ls-up-xs:     0.08em;   /* UPPERCASE 微字号 */
  --ls-up-sm:     0.10em;   /* UPPERCASE label */
  --ls-up-md:     0.12em;   /* UPPERCASE small（dow / topic eyebrow） */
  --ls-up-lg:     0.14em;   /* UPPERCASE eyebrow / SECTION 标题（Braun 收一档） */
  --ls-up-xl:     0.16em;   /* 极强 UPPERCASE caption（Braun 收一档） */
  --ls-tight-sm: -0.005em;  /* Copernicus serif 大字微收紧 */
  --ls-tight-md: -0.01em;   /* Copernicus / 大数字 mono 收紧 */
  --ls-tight-lg: -0.015em;  /* hero title Copernicus 30px 收紧 */

  /* ── line-height scale（design-system §5） ── */
  --lh-mono:     1;      /* mono 大数字 / 单行号码 */
  --lh-hero:     1.25;   /* hero title */
  --lh-snippet:  1.45;   /* snippet 文字 */
  --lh-body:     1.5;    /* body 默认 */
  --lh-quote:    1.55;   /* quote / 引文 */
  --lh-quote-lg: 1.65;   /* 长引文 */

  /* ── border-radius scale：同步 Braun / TE 的硬边工程感 ── */
  --r-xs:        4px;    /* 极小 chip / kbd-key */
  --r-sm:        4px;    /* 小 chip / 内层切片 */
  --r-button-sm: 4px;    /* small button / select */
  --r-input:     6px;    /* 输入控件白名单（composer / user-bubble） */
  --r-nav-item:  6px;    /* nav-item / setting row */
  --r-button:    6px;    /* nav-btn 38px / 按键 */
  --r-avatar:    8px;    /* account avatar 42px */
  --r-sheet:     8px;    /* 顶部 sheet 圆角顶（用法：var(--r-sheet) var(--r-sheet) 0 0） */
  --r-pill:    999px;    /* 胶囊 */
  --r-circle:   50%;     /* 圆形 */

  /* ── 动效 timing + easing（design-system §11） ── */
  --duration-quick:  0.12s;                          /* 短 hover / state 切换 */
  --duration-snap:   0.18s;                          /* mechanical switch / icon cross-fade */
  --duration-smooth: 0.26s;                          /* sheet / drawer / pane 切换 */
  --ease-snap:       cubic-bezier(0.2, 0.8, 0.2, 1); /* 通用缓动 */

  /* ── brain 配色（design-system §7.1，跨 theme 一致） ── */
  --brain-personal: var(--accent);  /* 跟 accent 一致，自动跨 theme 提亮 */
  --brain-family:   #7A8B6E;
  --brain-team:     #6A7389;

  /* ── tag 配色系统（design-system §7.5；v0.6.31）──
     全 app 的 chip/tag 只允许走以下 3 个语义 role，禁止再写裸 RGBA。
     值用 rgb-triplet / 主题 token 组合，自动跨 theme（同 --shadow-* 模式）。
     · type  = 人名 / 未映射（默认中性）—— 清晰实色 + hairline 刻边
     · role  = 分类 chip 按 §7.4 角色语义上色（team蓝/family绿/client棕/
               friend紫），色字 + ×0.12 同色淡底（"颜色=分类语义"，有生气）
     · topic = recall 话题（绿系，产品既有语义色）
     · accent= 仅「你/选中/featured」（accent 纪律，严格保留） */
  --tag-type-bg:   rgba(var(--ink-rgb), 0.06);   /* §7.3 在档（0.06）*/
  --tag-type-fg:   var(--ink-soft);              /* 实色，非半透浑浊 */
  --tag-type-bd:   rgba(var(--ink-rgb), 0.12);   /* 0.5px hairline 刻边（§7.3 0.12）*/
  /* 批 285：原 --tag-topic-{bg,fg} 退役 —— 话题 chip 统一走主题色板 --tag-cat-*，
     不再用绿色身份色。--green-rgb / --green 仍保留（状态色 / functional 用途） */
  --tag-accent-bg: rgba(var(--accent-rgb), 0.12);
  --tag-accent-fg: var(--accent);
  /* 关系语义色 chip（Layer 2a · rel）—— 用于人物角色 / 会话类型上下文
     hue 取自 §7.4.2 role tuple；底 ×0.12-0.15 同 topic 力度，字用可读实色；无边。
     批 284：原 --tag-{role}-* 改名 --tag-rel-{role}-*，跟主题色板 --tag-cat-*
     区分语义层（见 specs/2026-05-26-mobile-palette-split-design.md）。
     self→走 --tag-accent、other/未映射→走 --tag-type；这两个跨语义复用不动 */
  --tag-rel-team-bg:    rgba(var(--team-rgb),   0.14);
  --tag-rel-family-bg:  rgba(var(--family-rgb), 0.13);
  --tag-rel-client-bg:  rgba(var(--client-rgb), 0.14);
  --tag-rel-friend-bg:  rgba(var(--friend-rgb), 0.15);

  /* 主题语义色 chip（Layer 2b · cat）—— 用于话题分类 / 主题区分上下文
     批 284：跟关系色板用同 hue 但独立命名，让 cat-* 选择器读到语义对得上的 token
     （之前 cat-thought 借 --tag-friend 紫、cat-personal 借 --tag-client 棕等名实矛盾）*/
  --tag-cat-work-bg:     var(--tag-rel-team-bg);    /* 工作类 → 蓝 */
  --tag-cat-family-bg:   var(--tag-rel-family-bg);  /* 家庭/健康类 → 绿 */
  --tag-cat-personal-bg: var(--tag-rel-client-bg);  /* 个人/阅读类 → 棕 */
  --tag-cat-thought-bg:  var(--tag-rel-friend-bg);  /* 思考/AI 类 → 紫 */

  /* 状态语义色 chip（Layer 3 · status）—— 系统状态指示,跟用户语义无关
     批 322:第 5 语义层。详见 design-system.md §7.5c(待加)
     - live    系统实时进行中(强对比 solid bg + 白字,如 timeline LIVE chip)
     - pending 等用户处理(accent 微底 + accent 字,如待识别声纹)
     - ready   已完成 + 状态保留(green 微底 + green 字,如已识别) */
  --tag-status-live-bg:    var(--green);
  --tag-status-live-fg:    var(--bg);
  --tag-status-pending-bg: rgba(var(--accent-rgb), 0.14);
  --tag-status-pending-fg: var(--accent);
  --tag-status-ready-bg:   rgba(var(--green-rgb), 0.14);
  --tag-status-ready-fg:   var(--green);

  /* 可点元素状态反馈（§11.11，批 322 全 app 单源）——
     所有可点元素(row / card / button / chip / icon button)的反馈走这一组
     token,禁止内联散写 rgba 杂档。
     · press-weak    弱反馈 0.04:列表 row(频繁滚动场景,不抢眼)
     · press-medium  中反馈 0.06:卡 / 主 button / chip("咔哒"感)
     · press-accent  accent 主操作按下:用 accent-pale(微橙底)
     · destructive 那档(.m-listen-stop:active 等):在各自文件用
       rgba(var(--c-danger-rgb), 0.10) 内联,因为 --c-danger-rgb 在
       phone-tabs.css 而非 base.css(短期不挪)
     · disabled-opacity 不能点元素统一(配合 pointer-events:none) */
  --feedback-press-weak:    rgba(var(--ink-rgb), 0.04);
  --feedback-press-medium:  rgba(var(--ink-rgb), 0.06);
  --feedback-press-accent:  rgba(var(--accent-rgb), 0.10);
  --feedback-disabled-opacity: 0.45;
}