feat(frontend): Update brand identity with new logo and color scheme.

- Add new Logo component with gradient design (blue #0b74de to cyan #06b6d4)
- Replace CreditCard icon with custom Logo in sidebar
- Update primary and secondary theme colors to match brand gradient
- Regenerate all PWA icons with new logo design
- Update theme colors in PWA manifest and meta tags
- Fix ESLint config to ignore generated PWA files

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/Sidebar.tsx

@@ -1,6 +1,5 @@
 import { Link, useLocation } from "@tanstack/react-router";
 import {
-  CreditCard,
   Home,
   List,
   BarChart3,
@@ -8,6 +7,7 @@ import {
   TrendingUp,
   X,
 } from "lucide-react";
+import { Logo } from "./ui/logo";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../lib/api";
 import { formatCurrency } from "../lib/utils";
@@ -53,7 +53,7 @@ export default function Sidebar({ sidebarOpen, setSidebarOpen }: SidebarProps) {
           onClick={() => setSidebarOpen(false)}
           className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
         >
-          <CreditCard className="h-8 w-8 text-primary" />
+          <Logo size={32} />
           <h1 className="text-xl font-bold text-card-foreground">Leggen</h1>
         </Link>
         <button

frontend/src/components/ui/logo.tsx

@@ -0,0 +1,44 @@
+interface LogoProps {
+  className?: string;
+  size?: number;
+}
+
+export function Logo({ className = "", size = 32 }: LogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      className={className}
+      role="img"
+      aria-labelledby="logo-title logo-desc"
+    >
+      <title id="logo-title">leggen — stylized italic L</title>
+      <desc id="logo-desc">Square gradient background with italic white L.</desc>
+
+      <defs>
+        <linearGradient id="logo-bg" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="#0b74de" />
+          <stop offset="100%" stopColor="#06b6d4" />
+        </linearGradient>
+      </defs>
+
+      {/* Square background */}
+      <rect width="32" height="32" fill="url(#logo-bg)" rx="4" />
+
+      {/* Italic L */}
+      <text
+        x="11"
+        y="22"
+        fontFamily="Inter, Roboto, Arial, sans-serif"
+        fontWeight="700"
+        fontSize="20"
+        fontStyle="italic"
+        fill="#fff"
+      >
+        L
+      </text>
+    </svg>
+  );
+}

frontend/src/contexts/ThemeContext.tsx

@@ -12,7 +12,7 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 // Theme colors for different modes
 const THEME_COLORS = {
-  light: "#ffffff",
+  light: "#0b74de", // Primary brand color
   dark: "#0f0f23", // Dark background color that matches typical dark themes
 } as const;
 
@@ -49,7 +49,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
       // Update theme-color meta tags for PWA status bar
       const themeColor = THEME_COLORS[resolvedTheme];
-      
+
       // Update theme-color meta tag
       const themeColorMeta = document.getElementById("theme-color-meta") as HTMLMetaElement;
       if (themeColorMeta) {

frontend/src/index.css

@@ -10,10 +10,10 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 219 91% 46%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 189 94% 43%;
+    --secondary-foreground: 210 40% 98%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
     --accent: 210 40% 96.1%;
@@ -37,9 +37,9 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
+    --primary: 219 91% 46%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 189 94% 43%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;