feat(ui): 补齐分层设计 token 并迁移共享变体（对标 Claude DESIGN.md）

- 面色阶 surface-soft/card/strong + 文字 5 级 body-strong/body/muted-soft
- 边框 line-soft、coral 状态 cinnabar-active/disabled（按压变深 + 奶油化禁用）
- 圆角刻度 xs..xl/full：按钮 rounded-md、卡片 rounded-lg、徽章 pill
- 排版档 display/title/caption/eyebrow/prose（衬线负字距）
- 动效 token duration-fast/base + ease-standard，transitionUi 常量统一过渡
- 焦点环统一 cinnabar/35；双主题成对定义

apps/web/lib/ui/variants.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   badgeClass,
   buttonClass,
+  cardClass,
   cn,
   focusRing,
   inputClass,
@@ -10,6 +11,7 @@ import {
   proseBody,
   segmentedClass,
   statusNoteClass,
+  transitionUi,
 } from "./variants";
 
 describe("ui variants", () => {
@@ -25,6 +27,29 @@ describe("ui variants", () => {
     expect(klass).toContain("focus-visible:ring-2");
   });
 
+  it("uses layered radius tokens (button md / card lg / badge pill)", () => {
+    expect(buttonClass({ variant: "primary" })).toContain("rounded-md");
+    expect(cardClass()).toContain("rounded-lg");
+    expect(badgeClass()).toContain("rounded-full");
+    expect(inputClass()).toContain("rounded-md");
+  });
+
+  it("gives the primary button a press-darken and cream disabled state", () => {
+    const klass = buttonClass({ variant: "primary" });
+
+    expect(klass).toContain("hover:bg-cinnabar-active");
+    expect(klass).toContain("active:bg-cinnabar-active");
+    expect(klass).toContain("disabled:bg-cinnabar-disabled");
+    expect(klass).not.toContain("hover:bg-cinnabar/95");
+  });
+
+  it("shares one interaction-transition token across controls", () => {
+    expect(transitionUi).toContain("duration-fast");
+    expect(transitionUi).toContain("ease-standard");
+    expect(buttonClass({ variant: "primary" })).toContain(transitionUi);
+    expect(inputClass()).toContain(transitionUi);
+  });
+
   it("keeps warning badges readable on the paper background", () => {
     const klass = badgeClass({ variant: "warning" });
 
@@ -59,10 +84,9 @@ describe("ui variants", () => {
     expect(buttonClass({ variant: "primary" })).toContain(focusRing);
   });
 
-  it("renders manuscript body as serif 18px with airy leading", () => {
+  it("renders manuscript body as serif prose scale", () => {
     expect(proseBody).toContain("font-serif");
-    expect(proseBody).toContain("text-[18px]");
-    expect(proseBody).toContain("leading-[1.9]");
+    expect(proseBody).toContain("text-prose");
   });
 
   it("provides a full-screen overlay scrim below dialog chrome", () => {