Refactor site header, heroes, and design system

components/root/media-field-picker.tsx

@@ -110,7 +110,7 @@ export function MediaFieldPicker({
   }, [serializedValue]);
 
   return (
-    <div className="space-y-3 rounded-lg border bg-card p-4 shadow-sm">
+    <div className="space-y-3 rounded-surface border border-border/80 bg-card p-4 shadow-card">
       <div className="space-y-2">
         <Label className="sr-only">{title}</Label>
         <div className="flex flex-wrap gap-2">
@@ -128,7 +128,7 @@ export function MediaFieldPicker({
                 })
               }
               className={cn(
-                "rounded-md border px-4 py-2 text-sm transition-colors",
+                "rounded-nested border px-4 py-2 text-sm transition-colors",
                 value.mode === mode
                   ? "border-input bg-primary text-primary-foreground"
                   : "border-input bg-background text-foreground/75 hover:bg-accent hover:text-accent-foreground",
@@ -150,7 +150,7 @@ export function MediaFieldPicker({
                   isCleared: true,
                 })
               }
-              className="rounded-md border border-destructive/25 px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/5"
+              className="rounded-nested border border-destructive/25 px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/5"
             >
               {clearLabel}
             </button>
@@ -208,7 +208,7 @@ export function MediaFieldPicker({
       {value.mode === "library" ? (
         <div className="space-y-3">
           <Label className="sr-only">{libraryLabel ?? "Media Library"}</Label>
-          <div className="space-y-2 rounded-md border bg-card p-3">
+          <div className="space-y-2 rounded-nested border border-border/80 bg-card p-3">
             <div className="relative">
               <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input