Revise design and UI components for AI video admin interface

Updated DESIGN.md to reflect a new editorial design approach with a navy palette and refined typography. Enhanced global styles in globals.css, including new color tokens and layout adjustments. Refactored components in AppShell, Sidebar, and Topbar for improved consistency and theming. Introduced a ThemeToggle component for user theme preferences and updated various pages to utilize new styles and components, ensuring a cohesive user experience across the application.

src/components/layout/AppShell.tsx

@@ -28,7 +28,7 @@ export function AppShell() {
   const [collapsed, setCollapsed] = useState(false);
 
   return (
-    <div className="flex h-screen overflow-hidden bg-[#080b13] text-[#e9eef7]">
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
       <Sidebar
         active={active}
         collapsed={collapsed}
@@ -39,7 +39,7 @@ export function AppShell() {
       <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
         <Topbar />
 
-        <div className="flex-1 overflow-y-auto px-8 py-7">
+        <div className="flex-1 overflow-y-auto px-8 py-10">
           {active === "home" && <HomePage onNavigate={setActive} />}
 
           {active === "assistant-prompt" && <AssistantPage />}