refactor(web): migrate feature screens to design tokens + radius token (#49)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/fields/field-list.tsx

@@ -30,9 +30,9 @@ export function FieldList({
     );
   }
 
-  if (isError) return <p className="p-4 text-sm text-red-600">{t("fields.loadError")}</p>;
+  if (isError) return <p className="p-4 text-sm text-destructive">{t("fields.loadError")}</p>;
   if (!data || data.length === 0)
-    return <p className="p-4 text-sm text-neutral-500">{t("fields.empty")}</p>;
+    return <p className="p-4 text-sm text-muted-foreground">{t("fields.empty")}</p>;
 
   const groups = new Map<string, FieldDefinitionView[]>();
 
@@ -53,7 +53,7 @@ export function FieldList({
     <ul className="overflow-auto">
       {entries.map(([group, defs]) => (
         <li key={group}>
-          <div className="border-b bg-neutral-50 px-3 py-1 text-xs font-medium uppercase tracking-wide text-neutral-500">
+          <div className="border-b bg-muted px-3 py-1 label-caption">
             {group}
           </div>
           <ul>
@@ -61,7 +61,7 @@ export function FieldList({
               <li
                 key={def.key}
                 className={`flex items-center gap-2 border-b px-3 py-2 text-sm ${
-                  def.key === selectedKey ? "bg-indigo-50" : ""
+                  def.key === selectedKey ? "bg-primary/10" : ""
                 }`}
               >
                 <button
@@ -71,13 +71,13 @@ export function FieldList({
                   onClick={() => onSelect(def)}
                 >
                   <span className="font-medium">{labelText(def.labels, lang)}</span>
-                  <span className="text-xs text-neutral-400">{def.key}</span>
-                  <span className="rounded bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-600">
+                  <span className="text-xs text-muted-foreground">{def.key}</span>
+                  <span className="rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
                     {t(`fields.types.${def.data_type}`)}
                   </span>
                   {def.required && (
                     <span
-                      className="text-xs text-red-600"
+                      className="text-xs text-destructive"
                       title={t("fields.required")}
                       aria-label={t("fields.required")}
                     >