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/components/ui/SegmentedControl.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import { cn, segmentedClass } from "@/lib/ui/variants";
+import { cn, focusRing, segmentedClass, transitionUi } from "@/lib/ui/variants";
 
 export interface SegmentOption<T extends string> {
   value: T;
@@ -33,7 +33,9 @@ export function SegmentedControl<T extends string>({
             aria-pressed={selected}
             onClick={() => onChange(option.value)}
             className={cn(
-              "rounded px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cinnabar/35",
+              "rounded-md px-3 py-1.5 text-sm",
+              transitionUi,
+              focusRing,
               selected
                 ? "bg-panel text-cinnabar shadow-paper"
                 : "text-ink-soft hover:text-cinnabar",