Refine root UI around shadcn primitives

components/layout/app-sidebar.tsx

@@ -41,7 +41,7 @@ export function AppSidebar({
         <Link
           href={item.href}
           className={cn(
-            "flex items-center gap-2 rounded-nested px-3 py-2 text-sm transition-colors",
+            "flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors",
             item.active
               ? "bg-sidebar-primary text-sidebar-primary-foreground"
               : "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",

components/layout/floating-preferences.tsx

@@ -20,7 +20,7 @@ export function FloatingPreferences({
   return (
     <div className={cn("fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6", className)}>
       <div className="mx-auto flex w-full max-w-max items-center justify-center gap-2">
-        <ThemeToggle ariaLabel={t("themeToggle")} className="bg-surface-1/90" />
+        <ThemeToggle ariaLabel={t("themeToggle")} className="bg-background/90" />
         <LocaleToggle locale={locale} />
       </div>
     </div>

components/layout/site-footer.tsx

@@ -22,7 +22,7 @@ export function SiteFooter({ isAdmin = false }: SiteFooterProps) {
   const tFooter = useTranslations("footer");
 
   return (
-    <footer className="border-t border-border bg-surface-2">
+    <footer className="border-t border-border bg-background">
       <Container className="flex flex-col gap-4 py-8">
         <nav className="flex flex-wrap gap-x-5 gap-y-3 text-sm">
           {navItems.map((item) => (

components/layout/site-header.tsx

@@ -71,7 +71,7 @@ export function SiteHeader({ isAdmin = false }: SiteHeaderProps) {
           <div className="flex items-center gap-4">
             <Link
               href={getLocalizedPath(locale)}
-              className="inline-flex items-center rounded-nested border border-border bg-surface-1 px-3 py-2 shadow-xs"
+              className="inline-flex items-center rounded-md border border-input bg-background px-3 py-2 shadow-sm"
             >
               <Image
                 src="/logos/light-primary.svg"
@@ -115,7 +115,7 @@ export function SiteHeader({ isAdmin = false }: SiteHeaderProps) {
       </Container>
 
       {isOpen ? (
-        <div className="border-t border-border/80 bg-surface-1 md:hidden">
+        <div className="border-t border-border/80 bg-background md:hidden">
           <Container className="py-4">
             <nav className="flex flex-col gap-3">
               <NavLinks isAdmin={isAdmin} onNavigate={() => setIsOpen(false)} />