feat(ui): admin-only root link and shared header navigation

components/footer.tsx

@@ -7,41 +7,37 @@ const navItems = [
   { key: "products", path: "/products" },
   { key: "about", path: "/about" },
   { key: "contact", path: "/contact" },
-  { key: "root", path: "/root" },
 ];
 
-export function Footer() {
+type FooterProps = {
+  isAdmin?: boolean;
+};
+
+export function Footer({ isAdmin = false }: FooterProps) {
   const locale = useLocale();
   const tNav = useTranslations("navigation");
   const tFooter = useTranslations("footer");
 
   return (
-    <footer className="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950">
+    <footer className="border-t border-default bg-surface-soft">
       <div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-8 sm:px-6 lg:px-8">
         <nav className="flex flex-wrap gap-4 text-sm">
           {navItems.map((item) => (
-            item.key === "root" ? (
-              <a
-                key={item.key}
-                href="/root"
-                className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-              >
-                {tNav(item.key)}
-              </a>
-            ) : (
-              <Link
-                key={item.key}
-                href={`/${locale}${item.path}`}
-                className="text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100"
-              >
-                {tNav(item.key)}
-              </Link>
-            )
+            <Link
+              key={item.key}
+              href={`/${locale}${item.path}`}
+              className="text-muted transition hover:text-fg"
+            >
+              {tNav(item.key)}
+            </Link>
           ))}
+          {isAdmin ? (
+            <a href="/root" className="text-muted transition hover:text-fg">
+              {tNav("root")}
+            </a>
+          ) : null}
         </nav>
-        <p className="text-xs text-zinc-500 dark:text-zinc-400">
-          {tFooter("copyright", { year: new Date().getFullYear() })}
-        </p>
+        <p className="text-xs text-subtle">{tFooter("copyright", { year: new Date().getFullYear() })}</p>
       </div>
     </footer>
   );