/* ─────────────────────────────────────────────────────────────
 * 界面语言 · Token
 *
 * 唯一的调色方式：**语义名**。任何地方写死颜色都是违规
 * （判据：换一套色，应该只改这一个文件）。
 *
 * 两套主题共用**同一组语义名** —— 是"同一份 token 的两个值"，
 * 不是两套 token：
 *   theme-console  事务（亮）：管理台 —— 读与决定，长扫表格
 *   theme-canvas   内容（暗）：创作台 —— 看内容，暗底不抢画面
 *
 * 详见《界面语言 v1》。
 * ───────────────────────────────────────────────────────────── */

/* ── 复位：`hidden` 必须真的隐藏 ──────────────────────────────────────────
 *
 * 为什么需要这一条（2026-09-18 实测踩到）：
 *   HTML 的 `hidden` 属性靠**UA 样式表的 `display:none`** 生效，
 *   而元素**自己的 `display` 优先级更高** —— 于是
 *     <div hidden style="display:flex">   ⇒  **仍然显示**
 *   组织管理的两个弹窗（邀请 / API key）都这么写 ⇒ **每次加载都盖在整页上**，
 *   而且内容还是空的（它们的 JS 在 `hidden=false` 时才填）。
 *
 * 这是一条**正确的全局规则**：`hidden` 的意思就是隐藏，任何地方都不该例外。
 * 加在 tokens.css（三个台共享）⇒ 一次修好全部，并防住以后同样的写法。
 */
/* ── 复位：`box-sizing` ────────────────────────────────────────────────────
 *
 * 为什么需要这一条（2026-09-19 实测踩到）：
 *   三个台各自在自己的 `<style>` 里写了 `*{box-sizing:border-box}`（web 9 处、
 *   其余各 1 处），**而 tokens.css 里 0 处** —— 于是凡是"只加载 tokens.css"的
 *   页面就拿不到它。
 *
 *   唯一这样做的页面是 **identity 的 OIDC 登录页**（HTML 内联在
 *   identity/src/routes.rs 的 login_form_html 里，只 `<link>` 了 tokens.css）。
 *   实测：`.ui-input` 写 `style="width:100%"`，容器 360px，
 *     360 + padding 16 + border 2 = **378px** ⇒ 比容器宽 18px
 *     ⇒ 输入框的右边缘比 label 和按钮**多出 18px，三者对不齐**。
 *   而创作台同一个 `.ui-input` 量到 326 = 326，完全对齐 —— 差别只在这一条。
 *
 * 这是**设计系统该有的复位**，不是某一个页面的补丁：
 *   `width:100%` 的含义就应该是"占满容器"，而不是"占满容器再溢出 padding 与边框"。
 * 放在 tokens.css（三个台 + 登录页共享）⇒ 一处修好全部，并防住以后同样的写法。
 */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

:root {
  /* ── 语义色（每义一色，不得混用）───────────────────────── */
  /* ⚠️ **accent 的色相决定产品的气质**（2026-09-19）。
     原来这里是 #7d5f2c（深绿）—— 那是**企业后台**的颜色（银行/记账/管理系统的谱系），
     而同一套里的中性色（bg #f7f6f3 暖白 · ink #22201d 暖黑 · muted #706b62 暖灰）
     **本来就是暖调的**，画布那一套（#c4b08a 暖金 + #0a0a0a 近黑）也是暖调的
     ⇒ **只有 accent 是冷绿，一个外来户**，所以三台与画布像两个产品。

     换成 #7d5f2c：**与画布那支 #c4b08a 同色相**（一个深版一个浅版），
     而对比度 5.92（白底）/ 5.48（暖白底）几乎等于原来的 5.99 / 5.54
     ⇒ **视觉重量不变，只换色相** —— 这是换色时最该守的纪律：
       不要顺带把界面变亮或变暗，那会连带影响所有层级判断。
     依据：创作工具的颜色谱系（DaVinci / Adobe / C4D / Ableton）——
     中性低饱和底 + 一支**暖的**低饱和主色，因为**内容才是唯一的彩色**。 */
  --accent: #7d5f2c;
  --accent-ink: #ffffff;
  --danger: #a3342c;   /* **破坏性**：移除/撤销/停用。不用于"取消" */
  --warn: #8a6a1f;     /* **需要注意**：缺口/未定价/余额将尽 */
  --ok: #7d5f2c;       /* **已完成**：成功态。不用来表示"主要" */

  /* ── 中性（排版与结构）──────────────────────────────── */
  --bg: #f7f6f3;       /* 页面底 */
  --card: #ffffff;     /* 卡片/表面 */
  --ink: #22201d;      /* 正文 */
  --muted: #706b62;    /* 次要：时间、归属、说明。**必须 ≥4.5:1**（12px 正文级） */
  --line: #e6e2da;     /* 分隔线/描边 —— **装饰**：容器与表格的行线。无 3:1 要求 */
  --line-strong: #8f8879; /* **控件边界**：输入框/按钮的边框。必须 ≥3:1（WCAG 1.4.11）*/
  --chip: #efebe3;     /* 状态标签底 */
  --chip-ink: #5c574f;

  /* ── 状态色的**淡底与描边** ─────────────────────────────
   * 状态不能只有前景色：一个"需要补价"的标签要有底、一条"已停用"要有描边。
   * 这些是**同一语义的浅淡变体**，所以成对出现，不许单独使用。 */
  --warn-bg: #fbf3e0;   --warn-line: #e8d9a8;
  --ok-bg: #f5efe2;     --ok-line: #ddceac;
  --danger-bg: #fbeae8; --danger-line: #e8c2bc;
  /* 悬停叠色与主色线：**必须跟着主色一起暖**，否则 hover 时会出现一层冷的绿雾 */
  --accent-bg: #f5efe2; --accent-line: #ddceac;

  /* ── 排版 ──────────────────────────────────────────── */
  /* ⚠️ **中文字形必须显式列全平台**（Lark Design 是唯一把中文当第一公民的那家）。
     此前只有苹方(macOS) + 微软雅黑(Windows) ⇒ **Linux/Android 会落到 system-ui，
     而那里可能没有中文字形** ⇒ 整片界面变成方框。加上 Noto Sans SC（Android/多数
     Linux 发行版的中文默认）作为第三顺位，四个平台才都有中文字。 */
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
          "Source Han Sans SC", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* **字号只有五档**（多一档就多一次犹豫，结果是九个近似值） */
  /* ── 规范字号阶（9 档）────────────────────────────────────────────
     为什么从 5 档扩到 9 档：原阶覆盖不了实际需要，于是各页**自造**——
     创作台自造 9 档（按尺寸命名），其余页写裸字面量，全站共出现 15 种值。
     问题不在页面，在**设计系统欠规格**。这里把实际需要收进真源。

     命名纪律：**按语义命名，不按尺寸命名** —— `--fs-2xl` 回答不了
     "这里该用哪一档"；`--fs-title` 可以。所以没有 xs/sm/lg 这套尺寸名。

     取整纪律：**相邻档至少差 1px**。差 0.5px（12 / 12.5）在 10–16 区间
     人眼无法稳定分辨，只会让作者在两档之间随意挑，最终又长出新值。 */
  --fs-2xs:     10px;  /* 角标：数字徽标、极小标记（**不放正文**） */
  --fs-micro:   11px;  /* 标注：chip·kicker（**不放正文**） */
  --fs-small:   12px;  /* 佐证：时间·归属·说明 */
  --fs-body:    13px;  /* **默认**：正文·表格·表单 */
  --fs-md:      14px;  /* 正文强调：表格小标题·次级标题 */
  --fs-title:   16px;  /* 区块/页面标题 */
  --fs-xl:      19px;  /* 大区块标题 */
  --fs-display: 22px;  /* 一个数：每屏至多一处 */
  --fs-hero:    26px;  /* 主视觉数：余额·封面标题 */
  --lh: 1.6;           /* 正文（中文比英文宽一档） */
  --lh-tight: 1.25;    /* 标题（**单行**）：中文单行用紧的没问题 */
  /* 多行中文的紧凑档（Lark Design 的中文本地化要点：中文行距需求高于拉丁）。
     名字取创作台已有的叫法，避免同一个概念出现两种名字。 */
  --lh-snug: 1.45;
  /* **字重只有三档**，且必须落在系统字体真正有的值上（不许 650/700 —— 会被合成或取整，
     同一份 CSS 在不同机器上字重不同） */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-strong: 600;

  /* ── 间距 / 圆角 / 阴影 ─────────────────────────────── */
  /* **4 的倍数**；奇数一律不许（对齐会变成巧合） */
  --sp-1: 4px;    /* 同组内：文字与图标 */
  --sp-2: 8px;
  --sp-3: 12px;   /* 组与组 */
  --sp-4: 16px;
  --sp-5: 24px;   /* 区块之间 */
  --sp-6: 32px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);

  /* ── 动效 / 层级（elevation）───────────────────────────────────
   * ⚠️ 这五个 token 原先因一处补丁错位落在 `[hidden]` 选择器里（2026-09-20 修正）——
   *    它们于是只对**隐藏元素**存在 ⇒ 凡是用到"悬停升起"的地方全部静默失效：
   *    `--dur / --ease` 拿不到值 ⇒ 过渡变成 `unset`（瞬间跳变，没有动效）；
   *    `--lift-surface / --lift-line` 拿不到值 ⇒ `background` 变透明、描边不出现。
   *    动效与层级和间距/圆角是同一类东西：**全局常量，只能住在 `:root`**。 */
  /* 时长与曲线也是一处定义（Material：动效必须有含义，一条 durations 常量表
     比在每个组件里各写一个 0.15s 更能保证含义一致）。 */
  --dur: 150ms;
  --ease: cubic-bezier(.2, 0, 0, 1);   /* Material 的标准缓出 */

  /* 悬停"升起"用的阴影 —— 比 --shadow 强一档，专门表达 elevation 变化 */
  --shadow-lift: 0 6px 20px rgba(0, 0, 0, .28);
  /* **暗底上与亮底相反**：阴影几乎看不见，分层靠"表面提亮 + 描边提亮"。
     所以悬停态另有一对值（亮底用 --shadow-lift，暗底用这两个）。 */
  --lift-surface: #23232a;
  --lift-line: #565660;
}

/* ── 主题 · 事务（亮）——管理台 ───────────────────────────── */
/* ⚠️ **三个后台与画布共用同一族暗色**（2026-09-19 按所有者要求改）。
   此前后台是暖白底 + 深绿主色 —— 那是"企业后台"的谱系，与画布的
   （#0a0a0a 近黑 + #c4b08a 暖金）像两个产品。现在统一到一个暗色族：
   **一个色系，两个作用域**（工作区 / 一般界面），不再是两套气质。

   值直接取自画布那一套 —— 不是新设计一套暗色，而是**把已有的、自洽的暗色
   扩到整个家族**。对比度已逐项核对（暗底上）：
     ink 16.43 · muted 7.5 · accent 9.36 · ok 11.36 · warn 11.86 · danger 7.16
   （--line 1.39 —— 它是装饰性描边，按本文件既有约定无 3:1 要求） */
.theme-console {
  --accent: #c4b08a;
  --accent-ink: #1a140c;
  --danger: #f87171;
  --warn: #fbbf24;
  --ok: #4ade80;
  --chip: #24242a;
  --chip-ink: #e8eaed;
  --warn-bg: #2a2211;
  --ok-bg: #122417;
  --danger-bg: #2a1516;
  --accent-bg: #241d0c;
  --accent-line: #3a2f14;
  --bg: #0a0a0a;
  --card: #1a1a1e;
  --ink: #e8eaed;
  --muted: #9aa0a6;
  --line: #2a2a30;
  --line-strong: #3a3a42;
}

/* ── 主题 · 内容（暗）——创作台 ───────────────────────────── *
 * 暖调：沿用画布既有的金/沙色作为行动色（它是**创作工具**的既有身份）。 */
.theme-canvas {
  --accent: #c4b08a;
  --accent-ink: #1a140c;
  --danger: #f85149;
  --warn: #e3b341;
  --ok: #56d364;
  --bg: #0a0a0a;
  --card: #1a1a1e;
  --ink: #e8eaed;
  --muted: #9aa0a6;
  --line: #2a2a30;
  --line-strong: #6b6b74;
  --chip: #24242a;
  --chip-ink: #c8c8d0;
  --warn-bg: #241d0c;   --warn-line: #3a2f14;
  --ok-bg: #0e2416;     --ok-line: #1c3a24;
  --danger-bg: #2a1414; --danger-line: #3a1c1c;
  --accent-bg: #241d0c; --accent-line: #3a2f14;

  /* ── **AI 助手的身份色**（2026-09-19 从创作台提升为全局 token）────────────
     此前这套紫只存在于创作台内部的 18 处字面值里（--agent / #8b7bff / #c4b8ff /
     #a99ef0 / #c9c2f5），另外三个台没有这个概念。

     但它不是一个配色选择，是一个**领域事实**：这个产品把「与助手协作」当作
     一等的参与方（《创作语言》里"助手"是一个主体，不是一条功能）。所以
     **AI 需要一个与主行动色不同的身份色** —— 否则"AI 在说话"和"你可以点这里"
     会共用同一种颜色，用户分不出哪句是建议、哪个是按钮。

     为什么保留紫（而不是并入暖金）：
       · 暖金已经是 --accent（主按钮 / 选中态）⇒ 并过去会让两者撞车
       · 原紫 #8b7bff 在暗底上对比度 6.01、暖金 9.36 ⇒ **主行动更亮、AI 次之**，
         这个层次关系是对的，不需要动
       · 所以这一轮是**纯重构：给已有的值起名字**，视觉零变化 */
  --agent: #8b7bff;          /* AI 标识的主色（标签 / 图标 / 「问 AI」） */
  --agent-bright: #c4b8ff;   /* AI 的强调（对象名 / 选中态文字） */
  --agent-soft: #a99ef0;     /* AI 的中间档（按钮文字 / 思考过程） */
  --agent-faint: #c9c2f5;    /* AI 的最浅档（引文边线） */
  --agent-bg: #1c1633;       /* AI 的表面（暗紫底） */
  --agent-line: rgba(109, 90, 230, .4);  /* AI 的描边 */
}

/* ── 密度 ────────────────────────────────────────────────── *
 * 管理台默认「平衡」；表格页可切「紧凑」。 */
.density-compact { --sp-2: 6px; --sp-3: 10px; --sp-4: 14px; --fs-body: 12px; }
.density-cozy    { --sp-2: 12px; --sp-3: 18px; --sp-4: 26px; }

/* ── 基础元素（三个界面共用同一套写法）─────────────────────── */
.ui-body {
  margin: 0;
  font: var(--fs-body) / var(--lh) var(--font);
  background: var(--bg);
  color: var(--ink);
}
.ui-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}
.ui-title { font-size: var(--fs-title); font-weight: 600; margin: 0; }
.ui-display { font-size: var(--fs-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-muted { color: var(--muted); }
/* **数字**：等宽 + 右对齐 + 单位紧跟 —— 见《界面语言 §3.4》 */
.ui-num { font-variant-numeric: tabular-nums; }

.ui-chip {
  background: var(--chip);
  color: var(--chip-ink);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  font-size: var(--fs-small);
}
.ui-btn {
  font: inherit;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
/* **主操作**：每屏至多一个 */
.ui-btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* **破坏性**：动词 + 宾语，不是"确定" */
.ui-btn--danger { color: var(--danger); }
.ui-input {
  font: inherit;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
}
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th, .ui-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
}
.ui-table th { color: var(--muted); font-weight: 500; }
.ui-table tr:last-child td { border-bottom: 0; }
/* 数字列右对齐（§3.4）*/
.ui-table .ui-num { text-align: right; }

/* **空态**：必须回答"为什么空 + 怎么开始"（§4.3）*/
.ui-empty { color: var(--muted); padding: var(--sp-4); text-align: center; }
/* **错误**：必须给出下一步（§4.3）*/
.ui-err { color: var(--danger); font-size: var(--fs-small); min-height: 20px; }
.ui-hint { color: var(--muted); font-size: var(--fs-small); }