/*
 * cohowork 的设计系统 —— **唯一真源**（INVARIANTS U2，2026-09-09 修订）。
 *
 * 在这之前，同一批事实散在三个文件里：
 *   1. 桌面前端 index.css 内联一套 `--theme-*`
 *   2. `generated/backend-theme.css` 从 vendor 的上游树派生同一套给扩展
 *   3. `themes.css` 另有一整套 `--ar-palette-*` / `--ar-color-*`，扩展的 global.css
 *      正在用它 —— 于是扩展面板里两套调色板并排：外壳一套，@cohowork/ui 组件一套
 *
 * 第 3 条还带着一个静默的矛盾：`--ar-radius-sm` 在 themes.css 里是 3px，
 * 在 ui/styles.css 里是 8px。**同名同义、不同值、两处定义** —— 看你在 DOM 的哪个
 * 位置决定圆角是几像素。这类东西不会报错，只会让人觉得「界面有点不对」。
 *
 * 现在只有这一个文件。分四层，越往下越具体：
 *
 *   Layer 0  调色板与刻度   `--ar-brand-*` `--ar-ink-*` `--ar-space-*` …
 *                            原始值。组件**不直接用**。
 *   Layer 1  cohowork 语义 `--ar-surface` `--ar-accent` …
 *                            新界面只用这一层。
 *   Layer 2  `--theme-*`     继承自 backend 的词汇表，743 个界面文件都在读它。
 *                            **值现在全部来自 Layer 0**，所以改一个品牌色，
 *                            新旧界面一起变。
 *   Layer 3  `--ar-color-*`  兼容层，映射到上面两层。扩展 global.css 用的就是它。
 *                            等那份 CSS 改写完就可以整层删掉。
 *
 * 主题约定：`:root` 是深色，`[data-theme="light"]` 是浅色 —— 与接手过来的
 * backend 一致，四层用同一套约定。宿主总会显式写 data-theme
 * （`hooks/useTheme.js:52`），所以两个块都一定命中。
 *
 * 颜色字面量只许出现在本文件里，由 `scripts/check-design-tokens.py` 守。
 */

/* ═══════════════════════════════════════════════════════════════════
   Layer 0 — 调色板与刻度
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /*
   * 品牌。**正蓝，不是靛蓝**（2026-09-12）。
   *
   * 旧值是从 `references/cohowork-home.png` 取的靛蓝→紫（#6366f1）。
   * `key-design-docs/ui/` 那十张模板从实心按钮上采样出来的是 **#4067FE** ——
   * 明显更蓝、更冷。既然模板要「几乎原封不动」地实现，真源就换成它。
   *
   * 中性列**没动**：参考图的底色是 #F7FAFE，而 `--ar-ink-50` 是 #f8fafc，
   * 两者肉眼无差。所以「背景以灰为主，蓝色背景太抓眼球」那条不受影响 ——
   * 那条否掉的是 #edf2fa 那种明显的蓝，不是这个。
   */
  --ar-brand-50:  #eef3ff;
  --ar-brand-100: #dbe4ff;
  --ar-brand-200: #bacdff;
  --ar-brand-300: #8fabff;
  --ar-brand-400: #6486fe;
  --ar-brand-500: #4067fe;
  --ar-brand-600: #2f52ea;
  --ar-brand-700: #2340c0;
  --ar-violet-500: #8b5cf6;

  /* Other products' marks, where we show "works with" them. Not ours to
     theme, so they are literals — but literals live here and nowhere else. */
  --ar-mark-claude: #d97757;
  --ar-mark-vscode: #2f80ed;

  /* 中性：背景以灰为主，淡蓝底太抓眼球。
     接手过来的 #edf2fa 是淡蓝，这一列是中性的。 */
  --ar-ink-1000: #0b0d12;
  --ar-ink-950: #0e0f14;
  --ar-ink-900: #14161c;
  --ar-ink-850: #1c1f27;
  --ar-ink-800: #262a34;
  --ar-ink-700: #334155;
  --ar-ink-600: #475569;
  --ar-ink-500: #64748b;
  --ar-ink-400: #94a3b8;
  --ar-ink-300: #cbd5e1;
  --ar-ink-200: #e2e8f0;
  --ar-ink-100: #f1f5f9;
  --ar-ink-50:  #f8fafc;
  --ar-white:   #ffffff;
  --ar-black:   #000000;

  /* 状态。三个色相各留深浅两端，深浅主题共用。 */
  --ar-ok-50:  #ecfdf5;
  --ar-ok-300: #6ee7b7;
  --ar-ok-500: #059669;
  --ar-ok-700: #047857;
  --ar-warn-50:  #fffbeb;
  --ar-warn-300: #fcd34d;
  --ar-warn-500: #d97706;
  --ar-warn-700: #b45309;
  --ar-bad-50:  #fef2f2;
  --ar-bad-300: #fca5a5;
  --ar-bad-500: #dc2626;
  --ar-bad-700: #b91c1c;

  /* 分类。是**语义**不是装饰：同一类工序在目录里永远同一个色，
     所以按用途命名，不叫 blue/green。 */
  --ar-cat-research-bg: #eff6ff;
  --ar-cat-research-fg: #2563eb;
  --ar-cat-content-bg:  var(--ar-ink-100);
  --ar-cat-content-fg:  var(--ar-ink-600);
  --ar-cat-sales-bg:    var(--ar-ok-50);
  --ar-cat-sales-fg:    var(--ar-ok-500);
  --ar-cat-ops-bg:      #fff7ed;
  --ar-cat-ops-fg:      #ea580c;

  /* 刻度。非颜色，深浅主题不变，所以只在这里出现一次 ——
     之前 --ar-radius-sm 在两个文件里分别是 3px 和 8px。 */
  --ar-space-1: 4px;
  --ar-space-2: 8px;
  --ar-space-3: 12px;
  --ar-space-4: 16px;
  --ar-space-5: 20px;
  --ar-space-6: 24px;
  --ar-space-8: 32px;

  --ar-radius-sm: 8px;
  --ar-radius-md: 10px;
  --ar-radius: 12px;
  --ar-radius-card: 16px;
  --ar-radius-pill: 999px;

  --ar-font-sans: "plus-jakarta-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  --ar-font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", "Fira Code",
    Menlo, monospace;
  /* Headings and the wordmark. Same as body by default; a theme that wants
     display type (geek's serif) overrides only this, not `--ar-font-sans`. */
  --ar-font-display: var(--ar-font-sans);
  --ar-font-xs: 11px;
  --ar-font-sm: 12px;
  --ar-font-base: 13px;
  /* The touch scale (MT-I41): a phone is read at arm's length and pressed
     with a thumb, so every step is a notch larger. Defined here, not in the
     app, so the phone and the desktop are one type system with two scales. */
  --ar-font-xs-touch: 12px;
  --ar-font-sm-touch: 13px;
  --ar-font-base-touch: 15px;
  --ar-font-lg-touch: 17px;
  --ar-font-title-touch: 22px;
  --ar-font-normal: 400;
  --ar-font-medium: 500;
  --ar-font-semibold: 600;
  --ar-font-bold: 700;
}

/* Native controls — checkbox, radio, range, progress — take the accent.
   Without this they paint the browser's blue in every theme, and geek's
   whole point is one orange. A property, not a token, so it sits outside
   the token blocks; still in this file because it is a theme decision. */
:root { accent-color: var(--ar-accent); }

/* ═══════════════════════════════════════════════════════════════════
   Layer 1 — cohowork 语义（新界面只用这一层）
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /*
   * 三层，不是两层。
   *
   * 模板里页面底是一层淡色、卡片是**比它更亮**的一层、卡片内部再沉一层
   * （`key-design-docs/ui/`）。我们原来只有 surface / surface-sunken 两层，
   * 于是整页和卡片同色，卡片「浮」不起来 —— 这是那十张图和我们第一版之间
   * 最大的一处结构差别，不是配色差别。
   */
  --ar-canvas:         var(--ar-ink-950);
  --ar-surface:        var(--ar-ink-900);
  --ar-surface-sunken: var(--ar-ink-950);
  --ar-rail:           var(--ar-ink-950);
  --ar-rail-active-bg: rgb(99 102 241 / 16%);
  --ar-rail-active-fg: var(--ar-brand-400);
  --ar-hairline:       rgb(255 255 255 / 10%);
  --ar-hover:          rgb(255 255 255 / 6%);
  /* A layer that opens over the page: menus, popovers. Heavier on dark,
     where a border alone does not separate two dark surfaces. */
  --ar-shadow-pop:     0 12px 32px rgb(0 0 0 / 45%);
  /* 卡片浮在页面底上的那一点点。深色下阴影几乎不起作用，靠的是那圈发丝线。 */
  --ar-shadow-card:    0 1px 2px rgb(0 0 0 / 30%), 0 0 0 1px var(--ar-hairline);
  /* A raised card, and the glow under the one filled button (`ui/04`). */
  --ar-shadow-float:   0 12px 32px rgb(0 0 0 / 35%);
  --ar-shadow-accent:  0 6px 16px rgb(64 103 254 / 30%);

  --ar-fg:        var(--ar-ink-50);
  --ar-fg-muted:  var(--ar-ink-400);
  --ar-fg-subtle: var(--ar-ink-500);

  --ar-accent:       var(--ar-brand-500);
  --ar-accent-hover: var(--ar-brand-400);
  --ar-accent-soft:  rgb(99 102 241 / 16%);
  --ar-on-accent:    var(--ar-white);

  /*
   * 三种判定，一套语义对。
   *
   * Caution 不是 error：文档跟着妙方出门是「按之前要注意」，不是「出错了」。
   * 借 `--ar-cat-ops-*` 会把一个警告的颜色绑在一套随时可以重新配色的业务分类上。
   *
   * 同一对也用在运行判定 `needs_human` 上 —— 「跑完了，但没人判得了」正是
   * 一个要注意、而不是出了错的状态（`packages/acceptance`，规格 v2 §3.4）。
   */
  --ar-ok-bg:      rgb(5 150 105 / 16%);
  --ar-ok-fg:      var(--ar-ok-300);
  --ar-caution-bg: rgb(217 119 6 / 16%);
  --ar-caution-fg: var(--ar-warn-300);
  --ar-bad-bg:     rgb(220 38 38 / 16%);
  --ar-bad-fg:     var(--ar-bad-300);

  /* The template's third hue: purple, for "create" and private things
     (`ui/README.md` §0.1 lists the pair; it was colour-without-a-pair before). */
  --ar-violet-bg:  rgb(139 92 246 / 16%);
  --ar-violet-fg:  #c4b5fd;
}

[data-theme="light"] {
  /* 浅色下页面底是模板采样的 #F7FAFE，卡片是纯白 —— 两者差一点点，
     但正是这一点点让卡片有边界而不需要画框。 */
  --ar-canvas:         #f7fafe;
  --ar-surface:        var(--ar-white);
  --ar-surface-sunken: var(--ar-ink-50);
  --ar-rail:           #f6f9fe;
  --ar-rail-active-bg: var(--ar-brand-50);
  --ar-rail-active-fg: var(--ar-brand-600);
  /* 比 ink-200 淡一档：模板的卡片边几乎看不见，靠白底与页面底的差成形。 */
  --ar-hairline:       #e7ecf4;
  --ar-hover:          rgb(16 36 80 / 4%);
  --ar-shadow-pop:     0 12px 32px rgb(16 36 80 / 12%);
  --ar-shadow-card:    0 0 0 1px var(--ar-hairline), 0 1px 3px rgb(16 36 80 / 4%);
  --ar-shadow-float:   0 12px 32px rgb(16 36 80 / 6%);
  --ar-shadow-accent:  0 6px 16px rgb(64 103 254 / 24%);

  --ar-fg:        var(--ar-ink-900);
  --ar-fg-muted:  var(--ar-ink-500);
  --ar-fg-subtle: var(--ar-ink-400);

  /* 参考图里白底上的实心主按钮就是 brand-500 本身，所以浅色主题用 500 而不是 600。 */
  --ar-accent:       var(--ar-brand-500);
  --ar-accent-hover: var(--ar-brand-600);
  --ar-accent-soft:  var(--ar-brand-50);

  /* 浅色的三对从模板采样：通过 #E3F9EE/#005C23，要人看 #FEF2E7/#DE4C00。 */
  --ar-ok-bg:      #e3f9ee;
  --ar-ok-fg:      #005c23;
  --ar-caution-bg: #fef2e7;
  --ar-caution-fg: #de4c00;
  --ar-bad-bg:     var(--ar-bad-50);
  --ar-bad-fg:     var(--ar-bad-700);

  --ar-cat-content-bg: var(--ar-ink-100);
  --ar-cat-content-fg: var(--ar-ink-600);

  --ar-violet-bg:  #f1e8fe;
  --ar-violet-fg:  #6d3fd8;
}

[data-theme="dark"] {
  --ar-cat-research-bg: rgb(37 99 235 / 14%);
  --ar-cat-research-fg: #93c5fd;
  --ar-cat-content-bg:  rgb(148 163 184 / 14%);
  --ar-cat-content-fg:  var(--ar-ink-300);
  --ar-cat-sales-bg:    rgb(5 150 105 / 14%);
  --ar-cat-sales-fg:    var(--ar-ok-300);
  --ar-cat-ops-bg:      rgb(234 88 12 / 14%);
  --ar-cat-ops-fg:      #fdba74;
}

/* ═══════════════════════════════════════════════════════════════════
   geek theme — the Hacker News look
   ═══════════════════════════════════════════════════════════════════

   `key-design-docs/new-ui/` (2026-09-13, the "CohoWork" set) is the visual
   source. Sampled from it: warm off-white ground (#fbfaf6 — the dominant
   pixel), white cards, a single orange-red accent (#de4629 on the solid
   button, #f15332 on the CTA; this file uses the midpoint), navy ink
   (#152036), peach tints for anything the accent touches (#fdf1ea nav
   pill, #fff8f4 status card), and serif display type over sans body.

   The first cut of this theme was cold blue-gray on near-black — a dark
   theme with a different name, and wrong: geek here means Hacker News, not
   another dark mode. So: **geek is a light scheme** (see
   `THEME_SCHEME` in index.ts — `isLight` consumers must treat it as one),
   and what makes it geek is the cream + orange + serif, not contrast.

   Layer 0 palette entries are not added for it: a theme that adds its own
   scale is a second design system. The literals below are Layer 1/2 values
   only, exactly as the light block does it.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="geek"] {
  /* Layer 1 — semantic surfaces. Three layers, same structure as light:
     cream ground, white card, warm sunken. */
  --ar-canvas:         #fbfaf6;
  --ar-surface:        var(--ar-white);
  --ar-surface-sunken: #f6f4ef;
  --ar-rail:           #fbfaf6;
  --ar-rail-active-bg: #fdf1ea;
  --ar-rail-active-fg: #e94b2b;
  --ar-hairline:       #e9e5df;
  --ar-hover:          rgb(21 32 54 / 4%);
  --ar-shadow-pop:     0 12px 32px rgb(60 40 20 / 12%);
  --ar-shadow-card:    0 0 0 1px var(--ar-hairline), 0 1px 3px rgb(60 40 20 / 4%);
  --ar-shadow-float:   0 12px 32px rgb(60 40 20 / 8%);
  --ar-shadow-accent:  0 6px 16px rgb(233 75 43 / 24%);

  --ar-fg:        #152036;
  --ar-fg-muted:  #6f737b;
  --ar-fg-subtle: #9a9ea6;

  /* The one colour. Headline word, active nav, solid button, tab underline
     — the mock spends it on all four and on nothing else. */
  --ar-accent:       #e94b2b;
  --ar-accent-hover: #d33f22;
  --ar-accent-soft:  #fdf1ea;
  --ar-on-accent:    var(--ar-white);

  /* No green, no blue, no purple — neither belongs in this theme, and both
     clash. Hacker News has one orange and greys; so does this.
     Pass is a warm grey — "done", not "hooray"; caution is the orange; fail
     keeps red, because a failed run that does not look failed is the one
     lie this product must not tell. Categories likewise: orange or grey. */
  --ar-ok-bg:      #eeece6;
  --ar-ok-fg:      #4e4a44;
  --ar-caution-bg: #fdf1ea;
  --ar-caution-fg: #c2410c;
  --ar-bad-bg:     var(--ar-bad-50);
  --ar-bad-fg:     var(--ar-bad-700);

  --ar-violet-bg:  #f6f4ef;
  --ar-violet-fg:  #5c5650;

  --ar-cat-research-bg: #fdf1ea;
  --ar-cat-research-fg: #b8371c;
  --ar-cat-content-bg:  #f6f4ef;
  --ar-cat-content-fg:  #6f737b;
  --ar-cat-sales-bg:    #eeece6;
  --ar-cat-sales-fg:    #4e4a44;
  --ar-cat-ops-bg:      #fdf1ea;
  --ar-cat-ops-fg:      #c2410c;

  /* Serif display over sans body — the mock's "CohoWork" wordmark and every
     heading. `--ar-font-display` is sans everywhere else, so only this
     theme changes the headings. */
  --ar-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
}

/* ═══════════════════════════════════════════════════════════════════
   pink theme — the fourth theme (2026-09-16)
   ═══════════════════════════════════════════════════════════════════

   Rose-tinted paper, white cards, one rose accent, warm plum ink. Built the
   way the light block is (three surfaces, one accent) so it is a colourway,
   not a second layout. Light scheme — see THEME_SCHEME in index.ts.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="pink"] {
  --ar-canvas:         #fdf6f8;
  --ar-surface:        var(--ar-white);
  --ar-surface-sunken: #fbeef3;
  --ar-rail:           #fdf3f6;
  --ar-rail-active-bg: #fce4ee;
  --ar-rail-active-fg: #c9427a;
  --ar-hairline:       #f2dde5;
  --ar-hover:          rgb(224 86 140 / 6%);
  --ar-shadow-pop:     0 12px 32px rgb(120 40 80 / 12%);
  --ar-shadow-card:    0 0 0 1px var(--ar-hairline), 0 1px 3px rgb(120 40 80 / 4%);
  --ar-shadow-float:   0 12px 32px rgb(120 40 80 / 8%);
  --ar-shadow-accent:  0 6px 16px rgb(224 86 140 / 26%);

  --ar-fg:        #3b2a33;
  --ar-fg-muted:  #8a6f7c;
  --ar-fg-subtle: #b096a3;

  --ar-accent:       #e0568c;
  --ar-accent-hover: #c9427a;
  --ar-accent-soft:  #fce4ee;
  --ar-on-accent:    var(--ar-white);

  --ar-ok-bg:      #e3f9ee;
  --ar-ok-fg:      #005c23;
  --ar-caution-bg: #fff4e6;
  --ar-caution-fg: #c2410c;
  --ar-bad-bg:     var(--ar-bad-50);
  --ar-bad-fg:     var(--ar-bad-700);

  --ar-violet-bg:  #f1e8fe;
  --ar-violet-fg:  #6d3fd8;
}

/* ═══════════════════════════════════════════════════════════════════
   Layer 2 — `--theme-*`：继承来的词汇表，值改指到 Layer 0
   ═══════════════════════════════════════════════════════════════════

   名字一个没动，所以那 743 个界面文件一行都不用改；值全部换成 cohowork 的
   调色板，所以它们和新界面终于是同一套颜色。原本的青色（#0ba5ec / #36bffa /
   #7cd4fd）与淡蓝底（#edf2fa / #c8efff）是 backend 的身份，不是我们的。
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --theme-loader: var(--ar-white);

  --theme-bg-primary:    var(--ar-ink-900);
  --theme-bg-secondary:  var(--ar-ink-850);
  --theme-bg-sidebar:    var(--ar-ink-950);
  --theme-bg-container:  var(--ar-ink-950);
  --theme-bg-chat:       var(--ar-ink-850);
  --theme-bg-chat-input: var(--ar-ink-800);

  --theme-text-primary:   var(--ar-ink-50);
  --theme-text-secondary: var(--ar-ink-400);
  --theme-placeholder:    var(--ar-ink-500);

  --theme-sidebar-item-default:            rgb(255 255 255 / 6%);
  --theme-sidebar-item-selected:           rgb(255 255 255 / 12%);
  --theme-sidebar-item-hover:              rgb(255 255 255 / 8%);
  --theme-sidebar-item-text-active:        var(--ar-brand-300);
  --theme-sidebar-item-text-inactive:      var(--ar-ink-400);
  --theme-sidebar-item-workspace-active:   var(--ar-ink-50);
  --theme-sidebar-item-workspace-inactive: var(--ar-ink-400);
  --theme-sidebar-subitem-default:  transparent;
  --theme-sidebar-subitem-hover:    rgb(255 255 255 / 6%);
  --theme-sidebar-subitem-selected: rgb(255 255 255 / 8%);
  --theme-sidebar-thread-selected:  rgb(255 255 255 / 8%);
  --theme-sidebar-border:           rgb(255 255 255 / 10%);
  --theme-sidebar-footer-icon:      rgb(255 255 255 / 8%);
  --theme-sidebar-footer-icon-fill: var(--ar-ink-50);
  --theme-sidebar-footer-icon-hover: rgb(255 255 255 / 14%);

  --theme-popup-menu-bg: var(--ar-ink-1000);
  --theme-modal-border:  rgb(255 255 255 / 12%);
  --theme-chat-input-border: rgb(255 255 255 / 14%);

  --theme-action-menu-bg:         var(--ar-ink-800);
  --theme-action-menu-item-hover: rgb(255 255 255 / 8%);

  --theme-settings-input-bg:          var(--ar-ink-950);
  --theme-settings-input-active:      rgb(255 255 255 / 20%);
  --theme-settings-input-placeholder: var(--ar-ink-500);
  --theme-settings-input-text:        var(--ar-ink-50);

  /* CTA。`--primary` 是强调色，`--cta` 比它更浅一档：上一轮修过的语义倒置
     （强调变体反而更淡）就是从这两个名字来的，别再调反。 */
  --theme-button-primary:       var(--ar-brand-500);
  --theme-button-primary-hover: var(--ar-brand-400);
  --theme-button-cta:           var(--ar-brand-400);
  --theme-button-text:          var(--ar-ink-400);
  --theme-button-code-hover-bg:   rgb(99 102 241 / 18%);
  --theme-button-code-hover-text: var(--ar-brand-300);
  --theme-button-delete-hover-bg:   rgb(220 38 38 / 22%);
  --theme-button-delete-hover-text: var(--ar-bad-300);
  --theme-button-disable-hover-bg:   rgb(217 119 6 / 22%);
  --theme-button-disable-hover-text: var(--ar-warn-300);

  --theme-checklist-button-border:       var(--ar-brand-400);
  --theme-checklist-button-text:         var(--ar-brand-300);
  --theme-checklist-button-hover-bg:     rgb(99 102 241 / 20%);
  --theme-checklist-button-hover-border: rgb(99 102 241 / 80%);
  --theme-checklist-checkbox-border:     var(--ar-ink-300);
  --theme-checklist-checkbox-fill:       var(--ar-ok-300);
  --theme-checklist-checkbox-text:       var(--ar-ink-900);
  --theme-checklist-item-bg:             rgb(99 102 241 / 14%);
  --theme-checklist-item-bg-hover:       rgb(99 102 241 / 22%);
  --theme-checklist-item-text:           var(--ar-brand-200);
  --theme-checklist-item-hover:          var(--ar-brand-400);
  --theme-checklist-item-completed-bg:   rgb(5 150 105 / 18%);
  --theme-checklist-item-completed-text: var(--ar-ok-300);

  --theme-file-row-even:          var(--ar-ink-950);
  --theme-file-row-odd:           var(--ar-ink-850);
  --theme-file-row-selected-even: rgb(99 102 241 / 22%);
  --theme-file-row-selected-odd:  rgb(99 102 241 / 14%);
  --theme-file-picker-hover:      rgb(99 102 241 / 18%);

  --theme-attachment-bg:                 var(--ar-ink-850);
  --theme-attachment-success-bg:         var(--ar-ink-850);
  --theme-attachment-error-bg:           rgb(220 38 38 / 34%);
  --theme-attachment-icon:               var(--ar-white);
  --theme-attachment-icon-spinner:       var(--ar-brand-300);
  --theme-attachment-icon-spinner-bg:    var(--ar-ink-800);
  --theme-attachment-text:               var(--ar-ink-50);
  --theme-attachment-text-secondary:     var(--ar-ink-400);

  --theme-home-bg-button:   var(--ar-ink-800);
  --theme-home-bg-card:     var(--ar-ink-850);
  --theme-home-border:      rgb(255 255 255 / 12%);
  --theme-home-text:        var(--ar-ink-50);
  --theme-home-text-secondary: var(--ar-ink-400);
  --theme-home-button-primary:       var(--ar-brand-500);
  --theme-home-button-primary-hover: var(--ar-brand-400);
  --theme-home-button-secondary:              rgb(255 255 255 / 8%);
  --theme-home-button-secondary-hover:        rgb(99 102 241 / 16%);
  --theme-home-button-secondary-text:         var(--ar-ink-50);
  --theme-home-button-secondary-hover-text:   var(--ar-brand-300);
  --theme-home-button-secondary-border:       rgb(255 255 255 / 14%);
  --theme-home-button-secondary-border-hover: var(--ar-brand-500);
  --theme-home-update-card-bg:    var(--ar-ink-850);
  --theme-home-update-card-hover: var(--ar-ink-800);
  --theme-home-update-source:     var(--ar-brand-300);
}

[data-theme="light"] {
  --theme-loader: var(--ar-ink-900);

  --theme-bg-primary:    var(--ar-white);
  --theme-bg-secondary:  var(--ar-white);
  --theme-bg-sidebar:    #f7f8fc;
  --theme-bg-container:  var(--ar-ink-50);
  --theme-bg-chat:       var(--ar-white);
  --theme-bg-chat-input: var(--ar-ink-100);

  --theme-text-primary:   var(--ar-ink-900);
  --theme-text-secondary: var(--ar-ink-500);
  --theme-placeholder:    var(--ar-ink-400);

  --theme-sidebar-item-default:            transparent;
  --theme-sidebar-item-selected:           var(--ar-brand-50);
  --theme-sidebar-item-hover:              rgb(0 0 0 / 4%);
  --theme-sidebar-item-text-active:        var(--ar-brand-600);
  --theme-sidebar-item-text-inactive:      var(--ar-ink-500);
  --theme-sidebar-item-workspace-active:   var(--ar-ink-900);
  --theme-sidebar-item-workspace-inactive: var(--ar-ink-500);
  --theme-sidebar-subitem-default:  transparent;
  --theme-sidebar-subitem-hover:    rgb(0 0 0 / 4%);
  --theme-sidebar-subitem-selected: var(--ar-ink-100);
  --theme-sidebar-thread-selected:  var(--ar-white);
  --theme-sidebar-border:           var(--ar-ink-200);
  --theme-sidebar-footer-icon:      var(--ar-white);
  --theme-sidebar-footer-icon-fill: var(--ar-ink-600);
  --theme-sidebar-footer-icon-hover: var(--ar-ink-200);

  --theme-popup-menu-bg: var(--ar-white);
  --theme-modal-border:  var(--ar-ink-200);
  --theme-chat-input-border: var(--ar-ink-200);

  --theme-action-menu-bg:         var(--ar-white);
  --theme-action-menu-item-hover: rgb(0 0 0 / 6%);

  --theme-settings-input-bg:          var(--ar-ink-50);
  --theme-settings-input-active:      rgb(0 0 0 / 20%);
  --theme-settings-input-placeholder: var(--ar-ink-400);
  --theme-settings-input-text:        var(--ar-ink-900);

  --theme-button-primary:       var(--ar-brand-600);
  --theme-button-primary-hover: var(--ar-brand-700);
  --theme-button-cta:           var(--ar-brand-400);
  --theme-button-text:          var(--ar-ink-500);
  --theme-button-code-hover-bg:   var(--ar-brand-50);
  --theme-button-code-hover-text: var(--ar-brand-600);
  --theme-button-delete-hover-bg:   var(--ar-bad-50);
  --theme-button-delete-hover-text: var(--ar-bad-700);
  --theme-button-disable-hover-bg:   var(--ar-warn-50);
  --theme-button-disable-hover-text: var(--ar-warn-700);

  --theme-checklist-button-border:       var(--ar-brand-600);
  --theme-checklist-button-text:         var(--ar-brand-600);
  --theme-checklist-button-hover-bg:     var(--ar-brand-50);
  --theme-checklist-button-hover-border: var(--ar-brand-500);
  --theme-checklist-checkbox-border:     var(--ar-ink-400);
  --theme-checklist-checkbox-fill:       var(--ar-ok-500);
  --theme-checklist-checkbox-text:       var(--ar-white);
  --theme-checklist-item-bg:             var(--ar-brand-50);
  --theme-checklist-item-bg-hover:       var(--ar-brand-100);
  --theme-checklist-item-text:           var(--ar-brand-700);
  --theme-checklist-item-hover:          var(--ar-brand-600);
  --theme-checklist-item-completed-bg:   var(--ar-ok-50);
  --theme-checklist-item-completed-text: var(--ar-ok-500);

  --theme-file-row-even:          var(--ar-ink-50);
  --theme-file-row-odd:           var(--ar-ink-100);
  --theme-file-row-selected-even: var(--ar-brand-100);
  --theme-file-row-selected-odd:  var(--ar-brand-50);
  --theme-file-picker-hover:      var(--ar-brand-50);

  --theme-attachment-bg:             var(--ar-ink-50);
  --theme-attachment-success-bg:     var(--ar-ink-100);
  --theme-attachment-error-bg:       var(--ar-bad-50);
  --theme-attachment-icon:           var(--ar-white);
  --theme-attachment-icon-spinner:   var(--ar-brand-600);
  --theme-attachment-icon-spinner-bg: var(--ar-white);
  --theme-attachment-text:           var(--ar-ink-900);
  --theme-attachment-text-secondary: var(--ar-ink-600);

  --theme-home-bg-button:   var(--ar-ink-100);
  --theme-home-bg-card:     var(--ar-ink-50);
  --theme-home-border:      var(--ar-ink-200);
  --theme-home-text:        var(--ar-ink-900);
  --theme-home-text-secondary: var(--ar-ink-500);
  --theme-home-button-primary:       var(--ar-brand-600);
  --theme-home-button-primary-hover: var(--ar-brand-700);
  --theme-home-button-secondary:              var(--ar-ink-100);
  --theme-home-button-secondary-hover:        var(--ar-brand-50);
  --theme-home-button-secondary-text:         var(--ar-ink-700);
  --theme-home-button-secondary-hover-text:   var(--ar-brand-700);
  --theme-home-button-secondary-border:       var(--ar-ink-200);
  --theme-home-button-secondary-border-hover: var(--ar-brand-500);
  --theme-home-update-card-bg:    var(--ar-ink-50);
  --theme-home-update-card-hover: var(--ar-ink-100);
  --theme-home-update-source:     var(--ar-brand-600);
}

/* Sits *after* the `:root` and light Layer 2 blocks on purpose. `[data-theme]`
   and `:root` tie on specificity, so source order decides — placed above
   `:root` (as the first cut was) every `--theme-*` here silently lost to the
   dark defaults, and geek's inputs came out near-black on cream. */
/* Layer 2 — inherited backend vocabulary for geek theme: the light block
   with the brand blue swapped for the orange and the greys warmed. */
[data-theme="geek"] {
  --theme-loader: #152036;

  --theme-bg-primary:    var(--ar-white);
  --theme-bg-secondary:  var(--ar-white);
  --theme-bg-sidebar:    #fbfaf6;
  --theme-bg-container:  #f6f4ef;
  --theme-bg-chat:       var(--ar-white);
  --theme-bg-chat-input: #f6f4ef;

  --theme-text-primary:   #152036;
  --theme-text-secondary: #6f737b;
  --theme-placeholder:    #9a9ea6;

  --theme-sidebar-item-default:            transparent;
  --theme-sidebar-item-selected:           #fdf1ea;
  --theme-sidebar-item-hover:              rgb(21 32 54 / 4%);
  --theme-sidebar-item-text-active:        #e94b2b;
  --theme-sidebar-item-text-inactive:      #6f737b;
  --theme-sidebar-item-workspace-active:   #152036;
  --theme-sidebar-item-workspace-inactive: #6f737b;
  --theme-sidebar-subitem-default:  transparent;
  --theme-sidebar-subitem-hover:    rgb(21 32 54 / 4%);
  --theme-sidebar-subitem-selected: #f6f4ef;
  --theme-sidebar-thread-selected:  var(--ar-white);
  --theme-sidebar-border:           #e9e5df;
  --theme-sidebar-footer-icon:      var(--ar-white);
  --theme-sidebar-footer-icon-fill: #6f737b;
  --theme-sidebar-footer-icon-hover: #e9e5df;

  --theme-popup-menu-bg: var(--ar-white);
  --theme-modal-border:  #e9e5df;
  --theme-chat-input-border: #e9e5df;

  --theme-action-menu-bg:         var(--ar-white);
  --theme-action-menu-item-hover: rgb(21 32 54 / 6%);

  --theme-settings-input-bg:          #f6f4ef;
  --theme-settings-input-active:      rgb(21 32 54 / 20%);
  --theme-settings-input-placeholder: #9a9ea6;
  --theme-settings-input-text:        #152036;

  --theme-button-primary:       #e94b2b;
  --theme-button-primary-hover: #d33f22;
  --theme-button-cta:           #f17766;
  --theme-button-text:          #6f737b;
  --theme-button-code-hover-bg:   #fdf1ea;
  --theme-button-code-hover-text: #e94b2b;
  --theme-button-delete-hover-bg:   var(--ar-bad-50);
  --theme-button-delete-hover-text: var(--ar-bad-700);
  --theme-button-disable-hover-bg:   var(--ar-warn-50);
  --theme-button-disable-hover-text: var(--ar-warn-700);

  --theme-checklist-button-border:       #e94b2b;
  --theme-checklist-button-text:         #e94b2b;
  --theme-checklist-button-hover-bg:     #fdf1ea;
  --theme-checklist-button-hover-border: #e94b2b;
  --theme-checklist-checkbox-border:     #9a9ea6;
  --theme-checklist-checkbox-fill:       #e94b2b;
  --theme-checklist-checkbox-text:       var(--ar-white);
  --theme-checklist-item-bg:             #fdf1ea;
  --theme-checklist-item-bg-hover:       #fde4d9;
  --theme-checklist-item-text:           #b8371c;
  --theme-checklist-item-hover:          #e94b2b;
  --theme-checklist-item-completed-bg:   var(--ar-ok-50);
  --theme-checklist-item-completed-text: var(--ar-ok-500);

  --theme-file-row-even:          #fbfaf6;
  --theme-file-row-odd:           #f6f4ef;
  --theme-file-row-selected-even: #fde4d9;
  --theme-file-row-selected-odd:  #fdf1ea;
  --theme-file-picker-hover:      #fdf1ea;

  --theme-attachment-bg:             #fbfaf6;
  --theme-attachment-success-bg:     #f6f4ef;
  --theme-attachment-error-bg:       var(--ar-bad-50);
  --theme-attachment-icon:           var(--ar-white);
  --theme-attachment-icon-spinner:   #e94b2b;
  --theme-attachment-icon-spinner-bg: var(--ar-white);
  --theme-attachment-text:           #152036;
  --theme-attachment-text-secondary: #6f737b;

  --theme-home-bg-button:   #f6f4ef;
  --theme-home-bg-card:     #fbfaf6;
  --theme-home-border:      #e9e5df;
  --theme-home-text:        #152036;
  --theme-home-text-secondary: #6f737b;
  --theme-home-button-primary:       #e94b2b;
  --theme-home-button-primary-hover: #d33f22;
  --theme-home-button-secondary:              #f6f4ef;
  --theme-home-button-secondary-hover:        #fdf1ea;
  --theme-home-button-secondary-text:         #152036;
  --theme-home-button-secondary-hover-text:   #b8371c;
  --theme-home-button-secondary-border:       #e9e5df;
  --theme-home-button-secondary-border-hover: #e94b2b;
  --theme-home-update-card-bg:    #fbfaf6;
  --theme-home-update-card-hover: #f6f4ef;
  --theme-home-update-source:     #e94b2b;
}

/* Layer 2 for pink — same ordering rule as geek's block above. */
[data-theme="pink"] {
  --theme-loader: #3b2a33;

  --theme-bg-primary:    var(--ar-white);
  --theme-bg-secondary:  var(--ar-white);
  --theme-bg-sidebar:    #fdf3f6;
  --theme-bg-container:  #fbeef3;
  --theme-bg-chat:       var(--ar-white);
  --theme-bg-chat-input: #fbeef3;

  --theme-text-primary:   #3b2a33;
  --theme-text-secondary: #8a6f7c;
  --theme-placeholder:    #b096a3;

  --theme-sidebar-item-default:            transparent;
  --theme-sidebar-item-selected:           #fce4ee;
  --theme-sidebar-item-hover:              rgb(224 86 140 / 6%);
  --theme-sidebar-item-text-active:        #c9427a;
  --theme-sidebar-item-text-inactive:      #8a6f7c;
  --theme-sidebar-item-workspace-active:   #3b2a33;
  --theme-sidebar-item-workspace-inactive: #8a6f7c;
  --theme-sidebar-subitem-default:  transparent;
  --theme-sidebar-subitem-hover:    rgb(224 86 140 / 6%);
  --theme-sidebar-subitem-selected: #fbeef3;
  --theme-sidebar-thread-selected:  var(--ar-white);
  --theme-sidebar-border:           #f2dde5;
  --theme-sidebar-footer-icon:      var(--ar-white);
  --theme-sidebar-footer-icon-fill: #8a6f7c;
  --theme-sidebar-footer-icon-hover: #f2dde5;

  --theme-popup-menu-bg: var(--ar-white);
  --theme-modal-border:  #f2dde5;
  --theme-chat-input-border: #f2dde5;

  --theme-action-menu-bg:         var(--ar-white);
  --theme-action-menu-item-hover: rgb(224 86 140 / 8%);

  --theme-settings-input-bg:          #fbeef3;
  --theme-settings-input-active:      rgb(224 86 140 / 30%);
  --theme-settings-input-placeholder: #b096a3;
  --theme-settings-input-text:        #3b2a33;

  --theme-button-primary:       #e0568c;
  --theme-button-primary-hover: #c9427a;
  --theme-button-cta:           #ee8ab0;
  --theme-button-text:          #8a6f7c;
  --theme-button-code-hover-bg:   #fce4ee;
  --theme-button-code-hover-text: #c9427a;
  --theme-button-delete-hover-bg:   var(--ar-bad-50);
  --theme-button-delete-hover-text: var(--ar-bad-700);
  --theme-button-disable-hover-bg:   var(--ar-warn-50);
  --theme-button-disable-hover-text: var(--ar-warn-700);

  --theme-checklist-button-border:       #e0568c;
  --theme-checklist-button-text:         #c9427a;
  --theme-checklist-button-hover-bg:     #fce4ee;
  --theme-checklist-button-hover-border: #e0568c;
  --theme-checklist-checkbox-border:     #b096a3;
  --theme-checklist-checkbox-fill:       #e0568c;
  --theme-checklist-checkbox-text:       var(--ar-white);
  --theme-checklist-item-bg:             #fce4ee;
  --theme-checklist-item-bg-hover:       #f9d3e3;
  --theme-checklist-item-text:           #a8325f;
  --theme-checklist-item-hover:          #c9427a;
  --theme-checklist-item-completed-bg:   var(--ar-ok-50);
  --theme-checklist-item-completed-text: var(--ar-ok-500);

  --theme-file-row-even:          #fdf6f8;
  --theme-file-row-odd:           #fbeef3;
  --theme-file-row-selected-even: #f9d3e3;
  --theme-file-row-selected-odd:  #fce4ee;
  --theme-file-picker-hover:      #fce4ee;

  --theme-attachment-bg:             #fdf6f8;
  --theme-attachment-success-bg:     #fbeef3;
  --theme-attachment-error-bg:       var(--ar-bad-50);
  --theme-attachment-icon:           var(--ar-white);
  --theme-attachment-icon-spinner:   #e0568c;
  --theme-attachment-icon-spinner-bg: var(--ar-white);
  --theme-attachment-text:           #3b2a33;
  --theme-attachment-text-secondary: #8a6f7c;

  --theme-home-bg-button:   #fbeef3;
  --theme-home-bg-card:     #fdf6f8;
  --theme-home-border:      #f2dde5;
  --theme-home-text:        #3b2a33;
  --theme-home-text-secondary: #8a6f7c;
  --theme-home-button-primary:       #e0568c;
  --theme-home-button-primary-hover: #c9427a;
  --theme-home-button-secondary:              #fbeef3;
  --theme-home-button-secondary-hover:        #fce4ee;
  --theme-home-button-secondary-text:         #3b2a33;
  --theme-home-button-secondary-hover-text:   #a8325f;
  --theme-home-button-secondary-border:       #f2dde5;
  --theme-home-button-secondary-border-hover: #e0568c;
  --theme-home-update-card-bg:    #fdf6f8;
  --theme-home-update-card-hover: #fbeef3;
  --theme-home-update-source:     #c9427a;
}

/* ═══════════════════════════════════════════════════════════════════
   Layer 3 — `--ar-color-*` 兼容层
   ═══════════════════════════════════════════════════════════════════

   扩展的 `global.css` 与 `reset.css` 用的是这套名字。它们不再有自己的值 ——
   全部指到上面两层，所以扩展与桌面从此是同一套颜色。
   只定义**确实被引用**的那些（公理 A6：一个字段存在，当且仅当有程序读它）；
   等 global.css 改写成直接用 Layer 1，这一整层就可以删掉。
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ar-color-bg-base:     var(--theme-bg-primary);
  --ar-color-bg-surface:  var(--theme-bg-secondary);
  --ar-color-bg-elevated: var(--theme-bg-chat-input);

  --ar-color-border:        var(--theme-sidebar-border);
  --ar-color-border-subtle: var(--theme-modal-border);

  --ar-color-text-primary:   var(--theme-text-primary);
  --ar-color-text-secondary: var(--theme-text-secondary);
  --ar-color-text-muted:     var(--theme-placeholder);

  --ar-color-brand:  var(--ar-accent);
  --ar-color-accent: var(--ar-accent-hover);
  --ar-color-focus:  var(--ar-accent);
  --ar-color-btn-primary-text: var(--ar-on-accent);

  --ar-color-success:        var(--theme-checklist-item-completed-text);
  --ar-color-success-text:   var(--theme-checklist-item-completed-text);
  --ar-color-success-bg:     var(--theme-checklist-item-completed-bg);
  --ar-color-success-border: var(--theme-checklist-checkbox-fill);

  /* `error` 与 `danger` 是同一件事的两个叫法 —— InspectorPanel 用前者，
     global.css 用后者。两个名字指同一个值，不是两个值。 */
  --ar-color-error:         var(--theme-button-delete-hover-text);
  --ar-color-danger:        var(--theme-button-delete-hover-text);
  --ar-color-danger-text:   var(--theme-button-delete-hover-text);
  --ar-color-danger-bg:     var(--theme-button-delete-hover-bg);
  --ar-color-danger-border: var(--theme-button-delete-hover-text);
  --ar-color-btn-danger-bg:    var(--ar-bad-500);
  --ar-color-btn-danger-hover: var(--ar-bad-700);
  --ar-color-btn-danger-text:  var(--ar-white);

  /* 录制中。红是这里唯一不走品牌色的东西 —— 它要在任何主题下都读作
     「正在记录」，那是跨产品的约定，不是我们的调色板说了算。 */
  --ar-color-recording:       var(--ar-bad-500);
  --ar-color-recording-bg:    rgb(220 38 38 / 8%);
  --ar-color-recording-pulse: rgb(220 38 38 / 40%);
}