/* V1 桌面的基础令牌（两款皮肤共用的底）。照定稿原型 tokens.css 搬来，变量名一字不改，界面规范与原型里说的令牌在这里都找得到：
   docs/prototypes/2026-10-14-个人工作台样板间原型-评审改版/tokens.css（另并入 x-detail.css 的详情层令牌）。
   作用范围：只挂在 V1 外壳和连接管理页的根 .wb-root 上，不挂 :root——登录页等根外页面仍用 shadcn 的同名变量（--accent 等），
   挂在 :root 会把它们改掉。皮肤与亮暗由 <html data-skin data-theme> 决定（theme/ThemeProvider.tsx 写），令牌按
   「[data-theme] .wb-root」「[data-skin] .wb-root」声明在 .wb-root 上：衍生变量（如 --decide: var(--wait-ink)）与它引用的变量
   在同一个元素上算，换皮、换亮暗才一起生效（原型 README「亮暗切换」一节说的同一件事）。
   层级：本文件（中性底）→ skins/<皮肤>.css（覆盖任意一项，压在后面加载）。组件样式只读变量，不写死颜色。
   版式（位置、尺寸、间距、字号、字重、行高、图标大小）四套皮肤共用一份，写在这里，取 V1 定稿原型的值（S1E，清单 S-37）：
   《界面规范》第 4 节——两款皮肤只在十项上不同（背景、卡片材质、强调色、状态点位置、标签手法、主按钮、圆角、大数字、遮罩、焦点环），
   皮肤文件只写这十项与颜色，不再覆盖版式令牌（theme/skinTokens.test.ts 核对；浏览器里的实际位置由 testing/e2e/compare/geometry.ts 核对）。 */

.wb-root {
  /* ---------- 字体与字号阶梯 ---------- */
  /* 字体（定稿 app.css:7-9）。数字字体四套都用定稿的 SF 圆体：时钟、计数这些小数字的宽度会推动旁边元素的位置（S-37）。
     只有「大数字」（十项之一，.wb-bign）的字体走 --font-bignum，暗夜在皮肤里换成 SF 细体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --font-bignum: var(--font-num);
  --font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 字号六档 12／14／16／20／28／44（定稿 app.css:10，界面规范 1.3）；旧名字都并到这六档上 */
  --fs-2xs: 12px; --fs-xs: 12px; --fs-caption: 12px; --fs-meta: 12px; --fs-small: 12px;
  --fs-label: 14px; --fs-ui: 14px; --fs-body: 14px;
  --fs-strong: 16px; --fs-title: 16px; --fs-h3: 16px; --fs-lead: 16px;
  --fs-h2: 20px; --fs-page: 28px; --fs-num: 28px; --fs-stat: 28px; --fs-ext: 9px;
  --fs-h2-sm: 20px; --fs-page-sm: 20px; --fs-num-sm: 28px; --fs-stat-sm: 20px;
  --fs-hero: 30px; --fs-hero-sm: 22px;   /* 首屏问候（定稿 .hello 30，手机 22，app.css:94、666） */
  --fw-strong: 650; --fw-heading: 700; --lh-body: 1.6;

  /* ---------- 图标（定稿 .ico 16、描边 1.75，app.css:51；ui/icons/ 是原型那一套手画图标） ---------- */
  --icon: 16px; --icon-sm: 15px; --icon-lg: 20px; --icon-stroke: 1.75; --icon-tile: 22px;

  /* ---------- 中性色板（皮肤覆盖） ---------- */
  --bg: #F4F4F3; --bg-2: #EBEBEA;
  --pocket: rgba(255, 255, 255, .5); --pocket-2: rgba(255, 255, 255, .75);
  --desk-bg: var(--bg);
  --surface: #FFFFFF; --surface-2: #F3F3F2; --surface-3: #E7E7E5; --surface-raised: #FFFFFF;
  --topbar-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --scrim: rgba(20, 20, 20, .28);
  --ink: #1C1C1B; --ink-2: #4A4A47; --ink-3: #6E6E6A;
  --line: rgba(0, 0, 0, .09); --line-strong: rgba(0, 0, 0, .17);
  --accent: #1C1C1B; --accent-hover: #333331; --on-accent: #FFFFFF;
  --accent-soft: rgba(0, 0, 0, .06); --accent-line: rgba(0, 0, 0, .26);
  /* 五个状态：底色／深字／圆点。颜色只表示状态（等你定 > 逾期 > 今天 > 搞定 > 安静），不表示分类 */
  --wait-bg: #F6E3CF; --wait-ink: #6B3B12; --wait-dot: #D9823C;
  --late-bg: #F1EDCB; --late-ink: #554C0E; --late-dot: #BF9A1B;
  --today-bg: #DDE8F3; --today-ink: #1D4568; --today-dot: #3F7FBE;
  --done-bg: #D8EBDD; --done-ink: #1D5034; --done-dot: #3C9A62;
  --quiet-bg: #E9E9E7; --quiet-ink: #3F3F3C; --quiet-dot: #999994;
  --on-dot: #1C1C1B;
  --decide: var(--wait-ink); --decide-soft: var(--wait-bg); --decide-line: color-mix(in srgb, var(--wait-dot) 55%, transparent); --decide-dot: var(--wait-dot);
  --ok: var(--done-ink); --ok-soft: var(--done-bg);
  --warn: var(--late-ink); --warn-soft: var(--late-bg);
  --bad: var(--late-ink); --bad-soft: var(--late-bg);
  --drag-src-line: var(--accent);   /* 编辑桌面拖动时原位的虚线框（features/desk/card.css）；暗夜换琥珀 */
  --info: var(--today-ink); --info-soft: var(--today-bg);
  --mark: rgba(0, 0, 0, .12);
  --changed-ring: rgba(0, 0, 0, .36);
  --toast-bg: #1C1C1B; --toast-fg: #F4F4F3;
  --toast-shadow: var(--shadow-pop); --toast-btn: rgba(255, 255, 255, .14); --toast-d1: #2A2A29; --toast-d2: #353534;
  /* 提示条按钮悬停、「复制／存进云端」那一类的图标块（定稿 notify.css:30、35；浮彩照定稿取值，别的皮肤沿用待定橙） */
  --toast-btn-hover: color-mix(in srgb, var(--toast-btn) 60%, currentColor 8%);
  --toast-file-dot: var(--wait-dot); --toast-file-bg: var(--wait-bg); --toast-file-ink: var(--wait-ink);
  --ext-bg: #8A938E; --ext-fg: #FFFFFF;

  /* ---------- 圆角、阴影 ---------- */
  --radius-card: 18px; --radius-panel: 22px; --radius-ctl: 12px; --radius-sm: 8px; --radius-xs: 6px;
  --radius-btn: var(--radius-ctl); --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--line);
  --shadow-hover: 0 4px 14px -6px rgba(0, 0, 0, .18), 0 0 0 1px var(--line);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, .08), 0 24px 48px -16px rgba(0, 0, 0, .28);
  --shadow-inset: inset 0 0 0 1px var(--line);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-snappy: cubic-bezier(.3, .9, .3, 1);
  --dur-fast: 160ms; --dur-pop: 220ms; --dur: 300ms; --dur-slow: 420ms;
  /* 弹窗与通知的那一条曲线（定稿 app.css:1122 的 --pv-ease、notify.css:11 的 --ntf-ease，S-35） */
  --pv-ease: cubic-bezier(.32, .72, 0, 1); --ntf-ease: cubic-bezier(.32, .72, 0, 1);

  /* ---------- 定稿新增的版式令牌（两款皮肤 × 亮暗一样；S-02；颜色类的四套各写在皮肤里） ---------- */
  /* 弹窗体系（定稿 app.css:1116-1119）：遮罩模糊、圆角大层／中层／对话框／气泡 */
  --pv-blur: 10px; --pv-r-l: 28px; --pv-r-m: 26px; --pv-r-s: 24px; --pv-r-menu: 16px;
  /* 简报提议单（定稿 brief.css:12-14）与简报大数字（app.css:10） */
  --sheet-w: 920px; --sheet-pad: 30px; --fs-display: 44px;

  /* ---------- 组件外观 ---------- */
  /* 顶栏（S-10、S-11；定稿 app.css:64-84）：高 60、手机 56，最宽 1440，元素间距 16、右侧按钮组间距 4；按钮左右 10、字重同正文；时钟左右 10 */
  --top-h: 60px; --top-h-sm: 56px; --top-pad: 0 22px; --top-max: 1440px;
  --top-gap: 16px; --top-r-gap: 4px; --clock-pad: 0 10px; --tbtn-pad: 0 10px; --tbtn-weight: 400; --top-me-gap: 6px; --top-me-pad: 0 10px;
  --top-filter: blur(14px) saturate(1.2); --top-border: 1px solid var(--line);
  --logo-size: 28px; --logo-radius: 9px; --logo-bg: var(--accent); --logo-fg: var(--on-accent);
  --well-bg: var(--surface); --well-shadow: var(--shadow-inset);   /* 顶栏里的「井」：时钟、助手输入框（原型 .clock、.search） */
  /* 桌面与卡片网格（定稿 .desk app.css:93、665；.grid 间距 18、手机 12，app.css:38、1095） */
  --desk-max: 1440px; --desk-pad: 22px 32px 48px; --desk-pad-sm: 14px 12px 40px;
  --grid-cols: 2; --grid-cols-md: 2; --grid-gap: 18px; --grid-gap-sm: 12px; --grid-row-min: 156px; --grid-row-min-sm: 128px;
  --card-bg: var(--surface); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-hover); --card-border: 0 solid transparent;
  /* 卡片内距、卡头（定稿 .card、.ch，app.css:150、266-269） */
  --card-radius: var(--radius-card); --card-pad: 16px 18px 18px; --card-pad-sm: 14px; --card-body-gap: 10px;
  --card-head-gap: 12px; --card-title-size: 14px; --card-title-weight: 650; --card-title-color: var(--ink-2); --card-icon-color: var(--accent);
  --card-backdrop: none;
  --chip-h-sm: 32px;
  /* 弹层与面板 */
  --modal-w: 1060px; --modal-bg: var(--surface-raised); --modal-shadow: var(--shadow-pop); --modal-radius: var(--radius-panel); --modal-scrim: var(--scrim); --modal-scrim-filter: none;
  --sheet-bg: var(--surface-raised); --sheet-shadow: var(--shadow-pop); --sheet-radius: var(--radius-panel); --sheet-filter: none; --mods-w: 1000px;
  /* 浮层（界面规范 docs/specs/2026-10-14-个人工作台界面规范.md 第 3 节）：下拉面板一个外观，气泡菜单一个外观，横幅照原型另有圆角、底与阴影（--banner-*）；都不透明、不模糊 */
  --pop-radius: var(--radius-card); --pop-bg: var(--surface-raised); --pop-shadow: var(--shadow-pop);
  /* 下拉面板最高（定稿 .pd 与 placePop，app.css:375-388、1210）；气泡菜单的底与影默认同下拉面板 */
  --pop-max-h: min(70vh, 560px); --menu-bg: var(--pop-bg); --menu-shadow: var(--pop-shadow);
  /* 横幅的圆角照原型 notify.css（.ntf .banner 20、收成一行 16、手机 18），两款皮肤一样；底与阴影在皮肤里（--banner-bg、--banner-shadow） */
  --banner-radius: 20px; --banner-radius-row: 16px; --banner-radius-phone: 18px;
  /* 横幅图标块的内描边、关闭的悬停底、手机底下那道把手（定稿 notify.css:62、64、71、91；浮彩照定稿取值） */
  --banner-ic-ring: none; --banner-ic-ring-wait: none; --banner-x-hover: var(--surface-3); --banner-grab: var(--line);
  /* 气泡菜单圆角照原型默认版 .pop.menu（app.css --pv-r-menu: 16px），两款皮肤一样，所有 kind="menu" 的 Popover 共用 */
  --menu-radius: var(--pv-r-menu); --menu-pad: 6px; --menu-item-pad: 8px 10px;
  --tile-bg: var(--surface-2); --tile-radius: var(--radius-card); --tile-icon-color: var(--accent);
  --page-max: 1160px;
  /* 按钮、分段、徽章 */
  /* 按钮高 36／32／28、左右 16、14 号 600（定稿 .btn，app.css:121-124） */
  --btn-h: 36px; --btn-h-sm: 32px; --btn-h-xs: 28px; --btn-pad: 0 16px; --btn-size: 14px; --btn-weight: 600;
  --btn-bg: var(--surface); --btn-shadow: var(--shadow-inset), 0 1px 1px rgba(0, 0, 0, .03);
  --btn-pri-bg: var(--accent); --btn-pri-fg: var(--on-accent);
  /* 实心按钮（原型 .btn.solid）：浮彩是墨色，暗夜在皮肤里换成琥珀 */
  --btn-solid-bg: var(--accent); --btn-solid-fg: var(--on-accent); --btn-solid-hover: var(--accent-hover);
  --seg-on-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  /* 标签高 22、左右 9（定稿 .tag，app.css:102）；暗夜的「标签手法」在皮肤里改（十项之一） */
  --badge-h: 22px; --badge-pad: 0 9px; --badge-size: 12px; --badge-weight: 500; --badge-radius: var(--radius-pill);
  /* 背景层（Backdrop 的三层：底、::before、::after） */
  --backdrop: none; --backdrop-1: none; --backdrop-2: none;
  --hero-display: grid;

  /* ---------- 详情层（定稿原型 10-16 弹窗改版 app.css 第十三节的 .layer／.ly-*；浮彩亮色的暖白底、褐色阴影与遮罩在皮肤里） ---------- */
  --detail-scrim: var(--scrim);
  --detail-scrim-filter: none;
  --detail-bg: var(--sheet-bg);
  /* 底部出上影时的实底（--detail-bg 在浮彩是渐变，不能拿来调色） */
  --detail-surface: var(--sheet-bg);
  --detail-filter: blur(30px) saturate(1.1);
  --detail-shadow: var(--sheet-shadow);
  /* 大层宽 1120、中层宽 760；圆角 28／26，手机底部抽屉 24 */
  --detail-w-l: 1120px; --detail-w-m: 760px;
  --detail-radius-l: var(--pv-r-l); --detail-radius-m: var(--pv-r-m); --detail-radius-phone: var(--pv-r-s);
  --detail-pane: var(--pocket);
  --detail-line: var(--line);
  --detail-narrow: 720px;
  --detail-title-size: 21px; --detail-title-size-sm: 18px;
  /* 头部图标块、中层右栏的浅底、圆形关闭、手机把手、滚动边的阴影 */
  --detail-tint: var(--pocket); --detail-tint-ring: var(--shadow-inset);
  --detail-aside: var(--pocket);
  --detail-close-bg: var(--surface-2); --detail-close-hover: var(--surface-3);
  --detail-grab: var(--line-strong);
  --detail-edge-top: 0 10px 18px -16px rgba(0, 0, 0, .3);
  --detail-edge-foot: 0 -12px 20px -18px rgba(0, 0, 0, .35);

  color-scheme: light;
}

[data-theme="dark"] .wb-root {
  --bg: #141414; --bg-2: #1C1C1C;
  --pocket: rgba(255, 255, 255, .06); --pocket-2: rgba(255, 255, 255, .1);
  --surface: #1F1F1F; --surface-2: #262626; --surface-3: #303030; --surface-raised: #222222;
  --scrim: rgba(0, 0, 0, .55);
  --ink: #EDEDEB; --ink-2: #C2C2BE; --ink-3: #9C9C97;
  --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .17);
  --accent: #EDEDEB; --accent-hover: #FFFFFF; --on-accent: #141414;
  --accent-soft: rgba(255, 255, 255, .07); --accent-line: rgba(255, 255, 255, .3);
  --wait-bg: #4B331C; --wait-ink: #F3CCA5; --wait-dot: #E59B57;
  --late-bg: #3E3A18; --late-ink: #E2DB95; --late-dot: #CBA92E;
  --today-bg: #1C3B53; --today-ink: #AECEEC; --today-dot: #5E9BD6;
  --done-bg: #1F3F2E; --done-ink: #A7DABA; --done-dot: #4EAF7A;
  --quiet-bg: #383836; --quiet-ink: #D5D5D0; --quiet-dot: #8E8E89;
  --on-dot: #141414;
  --mark: rgba(255, 255, 255, .15);
  --changed-ring: rgba(255, 255, 255, .4);
  --toast-bg: #EDEDEB; --toast-fg: #141414;
  --toast-shadow: var(--shadow-pop); --toast-btn: rgba(0, 0, 0, .08); --toast-d1: #E2E2E0; --toast-d2: #D7D7D5;
  --shadow-card: 0 0 0 1px var(--line);
  --shadow-hover: 0 0 0 1px var(--line-strong);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, .4), 0 26px 50px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}