refactor(canvas): 硬编码字号/圆角清理 → 语义 token（审计 D1/P1-3） (#131)

清理画布组件散落的硬编码字号与圆角，统一走 token 体系：

字号：
- 新增 --fs-nano(7px) 覆盖原 text-[6px]/text-[7px] 子微型标注
  （角标计数、节点预览、% 后缀）
- text-[19px] → --fs-heading-lg(18px)

圆角（就近映射，±1~2px）：
- rounded-[3px] → --r-xs | rounded-[5px] → --r-sm
- rounded-[6px] → --r-sm | rounded-[7px] → --r-md
- rounded-[18px] → --r-2xl

涉及 11 个组件文件。rounded-[1px]（minimap 视口指示框，刻意尖角）保留。
颜色项（bg-white/border-stone）经核实均带 dark: 变体，属标准 Tailwind
双主题模式非误用，不在本轮处理。

Co-authored-by: sikongyue <3155157671@qq.com>

web/src/components/canvas/canvas-emotion-workspace.tsx

@@ -255,7 +255,7 @@ function FaceSelectionOverlay({ node, viewport, containerRef, imageWidth, imageH
                         key={face.id}
                         type="button"
                         aria-label={selected ? `选择${selected.name}` : "选择此人脸"}
-                        className={`absolute rounded-[7px] border-2 ${interactive ? "pointer-events-auto" : "pointer-events-none"}`}
+                        className={`absolute rounded-[var(--r-md)] border-2 ${interactive ? "pointer-events-auto" : "pointer-events-none"}`}
                         style={{ left: `${(face.x / imageWidth) * 100}%`, top: `${(face.y / imageHeight) * 100}%`, width: `${(face.width / imageWidth) * 100}%`, height: `${(face.height / imageHeight) * 100}%`, borderColor: active ? theme.accent.primary : "rgba(255,255,255,.94)", boxShadow: active ? `0 0 0 3px ${theme.accent.primarySoft}, 0 8px 24px rgba(0,0,0,.24)` : "0 8px 20px rgba(0,0,0,.18)" }}
                         whileHover={{ scale: 1.025 }}
                         whileTap={{ scale: 0.985 }}
@@ -267,7 +267,7 @@ function FaceSelectionOverlay({ node, viewport, containerRef, imageWidth, imageH
                     </motion.button>
                 );
             })}
-            {manualDraft ? <div className="pointer-events-none absolute rounded-[7px] border-2 border-dashed border-white" style={{ left: `${(manualDraft.x / imageWidth) * 100}%`, top: `${(manualDraft.y / imageHeight) * 100}%`, width: `${(manualDraft.width / imageWidth) * 100}%`, height: `${(manualDraft.height / imageHeight) * 100}%`, boxShadow: "0 0 0 3px rgba(255,255,255,.16)" }} /> : null}
+            {manualDraft ? <div className="pointer-events-none absolute rounded-[var(--r-md)] border-2 border-dashed border-white" style={{ left: `${(manualDraft.x / imageWidth) * 100}%`, top: `${(manualDraft.y / imageHeight) * 100}%`, width: `${(manualDraft.width / imageWidth) * 100}%`, height: `${(manualDraft.height / imageHeight) * 100}%`, boxShadow: "0 0 0 3px rgba(255,255,255,.16)" }} /> : null}
         </div>
     );
 }