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/objects/object-detail.tsx

@@ -19,8 +19,8 @@ function Field({ label, value }: { label: string; value: ReactNode }) {
 
   return (
     <div className="border-b py-2">
-      <div className="text-xs uppercase tracking-wide text-neutral-400">{label}</div>
-      <div className="text-sm text-neutral-900">{empty ? "—" : value}</div>
+      <div className="label-caption">{label}</div>
+      <div className="text-sm text-foreground">{empty ? "—" : value}</div>
     </div>
   );
 }
@@ -39,9 +39,9 @@ export function ObjectDetail() {
     );
   }
 
-  if (isError) return <p className="p-4 text-sm text-red-600">{t("objects.loadError")}</p>;
+  if (isError) return <p className="p-4 text-sm text-destructive">{t("objects.loadError")}</p>;
 
-  if (!object) return <p className="p-4 text-sm text-neutral-500">{t("objects.notFound")}</p>;
+  if (!object) return <p className="p-4 text-sm text-muted-foreground">{t("objects.notFound")}</p>;
 
   // Prefer the active locale's label, then English, then the raw key.
   const lang = i18n.language.startsWith("sv") ? "sv" : "en";
@@ -105,7 +105,7 @@ export function ObjectDetail() {
       />
       {groups.map((g) => (
         <div key={g.group} className="mt-4">
-          <div className="mb-1 text-xs font-medium uppercase text-neutral-500">{g.group}</div>
+          <div className="mb-1 label-caption">{g.group}</div>
           {g.defs.map((d) => (
             <Field
               key={d.key}
@@ -119,7 +119,7 @@ export function ObjectDetail() {
                 key={key}
                 label={key}
                 value={
-                  <span className="text-neutral-400">
+                  <span className="text-muted-foreground">
                     {typeof value === "object" ? JSON.stringify(value) : String(value)}
                   </span>
                 }