feat: comprehensive UI/a11y/i18n fixes and pre-push quality test

- Fix ClientWrappers missing 'about' namespace (MISSING_MESSAGE error)
- Add system/light/dark theme toggle with prefers-color-scheme detection
- Rewrite 404 page with i18n, accessibility, and proper navigation
- Rewrite books page with Header/Footer, i18n, and semantic HTML
- Add i18n keys to About, Footer, and both locale files
- Fix dark mode contrast: text-stone-300/600 -> text-stone-400
- Replace raw hex bg-[#fdfcf8] with bg-stone-50 across all components
- Guard console.error in ChatWidget and manage/page behind NODE_ENV
- Add aria-label to admin login form
- Remove emoji from manage page password toggle
- Update stale dates in privacy-policy and legal-notice
- Fix ScrollFadeIn index->delay prop type error in books page
- Fix privacy-policy and legal-notice landmark structure
- Add pre-push-check.test.ts: 13-category static analysis
  (i18n parity, namespace coverage, key resolution, accessibility,
   email validation, hex colors, emojis, console guards, env docs, types)
- Add explicit i18n check step to CI workflow

app/components/ThemeToggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Moon, Sun } from "lucide-react";
+import { Monitor, Moon, Sun } from "lucide-react";
 import { useTheme } from "./ThemeProvider";
 
 export function ThemeToggle() {
@@ -16,17 +16,25 @@ export function ThemeToggle() {
     return <div className="w-9 h-9" />;
   }
 
+  const cycle = () => {
+    const next = theme === "system" ? "light" : theme === "light" ? "dark" : "system";
+    setTheme(next);
+  };
+
   return (
     <button
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      className="p-2 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors border border-stone-200 dark:border-stone-700 shadow-sm hover:scale-105 active:scale-95 transition-transform"
-      aria-label="Toggle theme"
+      onClick={cycle}
+      className="p-2 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 hover:bg-stone-200 dark:hover:bg-stone-700 border border-stone-200 dark:border-stone-700 shadow-sm hover:scale-105 active:scale-95 transition-all"
+      aria-label={`Current theme: ${theme}. Click to switch.`}
+      title={theme === "system" ? "System" : theme === "dark" ? "Dark" : "Light"}
     >
-      {theme === "dark" ? (
+      {theme === "system" ? (
+        <Monitor size={18} className="text-stone-500 dark:text-stone-300" />
+      ) : theme === "dark" ? (
         <Sun size={18} className="text-amber-400" />
       ) : (
         <Moon size={18} className="text-stone-600" />
       )}
     </button>
   );
-}
+}