De-template the frontend and apply the design system

- FastAPI branding replaced throughout: title, favicon, logo (now the org/
  brand SVGs), footer links, route titles; workspace package renamed
- shadcn primitives restyled to the component radius/shadow map: pill
  controls, rounded-lg surfaces, shadow-e1/e2/e3
- floating frosted AppSidebar over a bg-card content region
- theme storage key aligned with the pre-paint script, MotionConfig added
- scripts/capture-screenshots.mjs backs the root 'make verify'

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/components/Common/Logo.tsx

@@ -2,10 +2,8 @@ import { Link } from "@tanstack/react-router"
 
 import { useTheme } from "@/components/theme-provider"
 import { cn } from "@/lib/utils"
-import icon from "/assets/images/fastapi-icon.svg"
-import iconLight from "/assets/images/fastapi-icon-light.svg"
-import logo from "/assets/images/fastapi-logo.svg"
-import logoLight from "/assets/images/fastapi-logo-light.svg"
+import logoDark from "/assets/images/fluksio-dark.svg"
+import logo from "/assets/images/fluksio-light.svg"
 
 interface LogoProps {
   variant?: "full" | "icon" | "responsive"
@@ -19,36 +17,38 @@ export function Logo({
   asLink = true,
 }: LogoProps) {
   const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === "dark"
-
-  const fullLogo = isDark ? logoLight : logo
-  const iconLogo = isDark ? iconLight : icon
+  const src = resolvedTheme === "dark" ? logoDark : logo
 
+  // The mark and the wordmark live in the same SVG, so the collapsed sidebar
+  // shows the same asset cropped to a square rather than a separate icon file.
   const content =
     variant === "responsive" ? (
       <>
         <img
-          src={fullLogo}
-          alt="FastAPI"
+          src={src}
+          alt="Fluksio"
           className={cn(
             "h-6 w-auto group-data-[collapsible=icon]:hidden",
             className,
           )}
         />
         <img
-          src={iconLogo}
-          alt="FastAPI"
+          src={src}
+          alt="Fluksio"
           className={cn(
-            "size-5 hidden group-data-[collapsible=icon]:block",
+            "size-5 object-contain hidden group-data-[collapsible=icon]:block",
             className,
           )}
         />
       </>
     ) : (
       <img
-        src={variant === "full" ? fullLogo : iconLogo}
-        alt="FastAPI"
-        className={cn(variant === "full" ? "h-6 w-auto" : "size-5", className)}
+        src={src}
+        alt="Fluksio"
+        className={cn(
+          variant === "full" ? "h-6 w-auto" : "size-5 object-contain",
+          className,
+        )}
       />
     )