style: unify workbench typography and prepare isolated visual review

frontend/src/widgets/FallbackWidget.tsx

@@ -5,7 +5,7 @@ export function FallbackWidget({ descriptor, onRespond }: WidgetProps) {
   const [text, setText] = useState("");
   return (
     <div className="rounded-xl border border-border/70 bg-card p-3 shadow-sm space-y-2">
-      <p className="text-sm text-amber-600">Unsupported widget (kind: {descriptor.widget}) — respond manually</p>
+      <p className="text-sm text-warning">Unsupported widget (kind: {descriptor.widget}) — respond manually</p>
       <pre className="text-xs font-mono overflow-auto max-h-48 rounded-lg bg-muted p-2">{JSON.stringify(descriptor, null, 2)}</pre>
       <textarea className="w-full rounded-lg border border-input bg-card p-2 text-sm shadow-xs outline-none transition-[border-color,box-shadow] focus:border-primary/50 focus:ring-2 focus:ring-ring/20" value={text} onChange={(e) => setText(e.target.value)} />
       <button className="rounded-md border border-border/70 px-2 py-1 text-sm shadow-xs transition-colors hover:bg-accent" onClick={() => onRespond({ id: descriptor.id, control: "freetext", text })}>Send</button>

frontend/src/widgets/FreetextWidget.tsx

@@ -9,7 +9,7 @@ export function FreetextWidget({ descriptor, onRespond }: WidgetProps) {
   return (
     <div className="space-y-3 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
       {descriptor.title && (
-        <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+        <p className="text-base font-semibold leading-snug text-foreground">
           {descriptor.title}
         </p>
       )}

frontend/src/widgets/InfoWidget.tsx

@@ -1,5 +1,5 @@
 import type { WidgetProps } from "./types";
 export function InfoWidget({ descriptor }: WidgetProps) {
-  const color = descriptor.level === "error" ? "text-red-600" : descriptor.level === "warning" ? "text-amber-600" : "text-foreground";
+  const color = descriptor.level === "error" ? "text-red-600" : descriptor.level === "warning" ? "text-warning" : "text-foreground";
   return <p className={`text-sm leading-relaxed ${color}`}>{descriptor.text ?? descriptor.title}</p>;
 }

frontend/src/widgets/JoinReviewWidget.tsx

@@ -9,7 +9,7 @@ export function JoinReviewWidget({ descriptor, onRespond }: WidgetProps) {
     <div className="space-y-4 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
       <div className="space-y-1.5">
         {descriptor.title && (
-          <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+          <p className="text-base font-semibold leading-snug text-foreground">
             {descriptor.title}
           </p>
         )}
@@ -45,7 +45,7 @@ export function JoinReviewWidget({ descriptor, onRespond }: WidgetProps) {
                 )}
                 {option.rationale && (
                   <div className="grid gap-1 sm:grid-cols-[5rem_minmax(0,1fr)] sm:gap-3">
-                    <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    <span className="text-xs font-medium text-muted-foreground">
                       Rationale
                     </span>
                     <p className="text-sm leading-relaxed text-muted-foreground">

frontend/src/widgets/MultiselectWidget.tsx

@@ -25,7 +25,7 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
   return (
     <div className="space-y-4 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
       {descriptor.title && (
-        <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+        <p className="text-base font-semibold leading-snug text-foreground">
           {descriptor.title}
         </p>
       )}
@@ -66,8 +66,8 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
                   </div>
                 )}
                 {o.rationale && (
-                  <div className="mt-3 border-l-2 border-border/70 pl-3 text-xs text-foreground/80">
-                    <div className="mb-1 font-semibold uppercase tracking-wide text-muted-foreground">
+                  <div className="mt-3 border-l border-border/70 pl-3 text-xs text-foreground/80">
+                    <div className="mb-1 font-semibold text-muted-foreground">
                       Reason
                     </div>
                     <div className="thot-prose leading-relaxed [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
@@ -76,8 +76,8 @@ export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
                   </div>
                 )}
                 {typeof o.meta?.question_context === "string" && o.meta.question_context && (
-                  <div className="mt-3 border-l-2 border-border/50 pl-3 text-xs text-muted-foreground">
-                    <div className="mb-1 font-semibold uppercase tracking-wide">
+                  <div className="mt-3 border-l border-border/50 pl-3 text-xs text-muted-foreground">
+                    <div className="mb-1 font-semibold">
                       Context question
                     </div>
                     <div className="thot-prose leading-relaxed [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">

frontend/src/widgets/SchemaLinkingGateWidget.tsx

@@ -58,7 +58,7 @@ export function SchemaLinkingGateWidget({ descriptor, onRespond }: WidgetProps)
   return (
     <div className="space-y-4 rounded-xl border border-border/70 bg-card p-4 shadow-sm">
       {descriptor.title && (
-        <p className="text-[0.95rem] font-semibold leading-snug text-foreground">{descriptor.title}</p>
+        <p className="text-base font-semibold leading-snug text-foreground">{descriptor.title}</p>
       )}
 
       <div className="flex flex-col gap-2">

frontend/src/widgets/SelectWidget.tsx

@@ -8,7 +8,7 @@ export function SelectWidget({ descriptor, onRespond }: WidgetProps) {
       {(descriptor.title || descriptor.intro) && (
         <div className="space-y-1.5">
           {descriptor.title && (
-            <p className="text-[0.95rem] font-semibold leading-snug text-foreground">
+            <p className="text-base font-semibold leading-snug text-foreground">
               {descriptor.title}
             </p>
           )}
@@ -24,7 +24,7 @@ export function SelectWidget({ descriptor, onRespond }: WidgetProps) {
           >
             <span>{o.label}</span>
             {o.recommended && (
-              <span className="shrink-0 rounded-md bg-[oklch(var(--success)/0.16)] px-2 py-0.5 text-[0.65rem] font-medium text-[oklch(0.5_0.13_165)]">
+              <span className="shrink-0 rounded-md bg-[oklch(var(--success)/0.16)] px-2 py-0.5 text-xs font-medium text-success">
                 Recommended
               </span>
             )}