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/shell/sidebar.tsx

@@ -41,10 +41,10 @@ function readStored(): boolean {
 function navLinkClass(collapsed: boolean) {
   return ({ isActive }: { isActive: boolean }) =>
     cn(
-      "flex items-center gap-2 rounded px-2 py-1 outline-none",
+      "flex items-center gap-2 rounded-md px-2 py-1 outline-none",
       "focus-visible:ring-3 focus-visible:ring-ring/50",
       collapsed && "justify-center",
-      isActive && "bg-neutral-200 font-medium",
+      isActive && "bg-accent font-medium",
     );
 }
 
@@ -68,7 +68,7 @@ export function Sidebar() {
   return (
     <aside
       className={cn(
-        "flex shrink-0 flex-col border-r bg-neutral-50 p-3 transition-[width]",
+        "flex shrink-0 flex-col border-r bg-muted p-3 transition-[width]",
         collapsed ? "w-14" : "w-44",
       )}
     >
@@ -82,8 +82,8 @@ export function Sidebar() {
           aria-label={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
           title={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
           className={cn(
-            "flex items-center justify-center rounded p-1 outline-none",
-            "hover:bg-neutral-200 focus-visible:ring-3 focus-visible:ring-ring/50",
+            "flex items-center justify-center rounded-md p-1 outline-none",
+            "hover:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >