feat: Rebrand frontend from Patherly to ResolutionFlow

- Add brand assets (favicon, icons, logos) to public/icons and src/assets/brand
- Update index.html with new favicon, title, meta, Google Fonts (Plus Jakarta Sans, Inter, Outfit)
- Add brand colors, font families, and gradient utilities to Tailwind config
- Replace CSS variables with purple-tinted theme for both light and dark modes
- Create reusable BrandLogo and BrandWordmark components
- Update AppLayout header with logo and wordmark
- Update LoginPage and RegisterPage with branded logo, wordmark, and gradient buttons
- Replace all remaining "Patherly" references in SettingsPage

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

frontend/src/components/common/BrandLogo.tsx

@@ -0,0 +1,56 @@
+import { cn } from '@/lib/utils'
+
+interface BrandLogoProps {
+  size?: 'sm' | 'lg'
+  className?: string
+}
+
+/**
+ * ResolutionFlow brand logo icon.
+ * sm (32x32) for header/navbar, lg (80x80) for login/register pages.
+ */
+export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
+  const sizeClasses = size === 'sm' ? 'h-8 w-8' : 'h-20 w-20'
+
+  // The SVG scales via viewBox - same paths work at any size.
+  // Stroke widths are tuned per size for visual clarity.
+  const strokeBase = size === 'sm' ? 1 : 2
+  const strokeThick = size === 'sm' ? 1.25 : 2.5
+  const dashArray = size === 'sm' ? '1 1.5' : '2 3'
+  const nodeR = size === 'sm' ? { outer: 2.5, inner: 2.75 } : { outer: 5, inner: 5.5 }
+  const hubR = size === 'sm' ? { glow: 5, solid: 3.5 } : { glow: 10, solid: 7 }
+
+  // Positions scale with viewBox
+  const vb = size === 'sm' ? '0 0 40 40' : '0 0 80 80'
+  const s = size === 'sm' ? 1 : 2 // scale factor
+
+  return (
+    <svg viewBox={vb} fill="none" className={cn(sizeClasses, className)}>
+      <defs>
+        <linearGradient id="brand-logo-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="#818cf8" />
+          <stop offset="100%" stopColor="#a78bfa" />
+        </linearGradient>
+      </defs>
+
+      {/* Input nodes */}
+      <circle cx={5 * s} cy={7 * s} r={nodeR.outer} fill="url(#brand-logo-grad)" opacity="0.35" />
+      <circle cx={5 * s} cy={15 * s} r={nodeR.inner} fill="url(#brand-logo-grad)" opacity="0.5" />
+      <circle cx={5 * s} cy={25 * s} r={nodeR.inner} fill="url(#brand-logo-grad)" opacity="0.5" />
+      <circle cx={5 * s} cy={33 * s} r={nodeR.outer} fill="url(#brand-logo-grad)" opacity="0.35" />
+
+      {/* Connecting lines */}
+      <path d={`M${7.5 * s} ${7 * s}L${14 * s} ${17 * s}`} stroke="url(#brand-logo-grad)" strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.45" />
+      <path d={`M${7.75 * s} ${15 * s}L${14 * s} ${19 * s}`} stroke="url(#brand-logo-grad)" strokeWidth={strokeBase} strokeLinecap="round" opacity="0.6" />
+      <path d={`M${7.75 * s} ${25 * s}L${14 * s} ${21 * s}`} stroke="url(#brand-logo-grad)" strokeWidth={strokeBase} strokeLinecap="round" opacity="0.6" />
+      <path d={`M${7.5 * s} ${33 * s}L${14 * s} ${23 * s}`} stroke="url(#brand-logo-grad)" strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.45" />
+
+      {/* Central hub */}
+      <circle cx={18 * s} cy={20 * s} r={hubR.glow} fill="url(#brand-logo-grad)" opacity="0.15" />
+      <circle cx={18 * s} cy={20 * s} r={hubR.solid} fill="url(#brand-logo-grad)" />
+
+      {/* Output arrow */}
+      <path d={`M${21.5 * s} ${20 * s}H${35 * s}M${35 * s} ${20 * s}L${30 * s} ${15 * s}M${35 * s} ${20 * s}L${30 * s} ${25 * s}`} stroke="url(#brand-logo-grad)" strokeWidth={strokeThick} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}

frontend/src/components/common/BrandWordmark.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@/lib/utils'
+
+interface BrandWordmarkProps {
+  size?: 'sm' | 'lg'
+  className?: string
+}
+
+/**
+ * ResolutionFlow wordmark with gradient "Flow" text.
+ * sm for header/navbar, lg for login/register pages.
+ */
+export function BrandWordmark({ size = 'sm', className }: BrandWordmarkProps) {
+  return (
+    <span
+      className={cn(
+        'font-heading font-bold',
+        size === 'sm' ? 'text-xl' : 'text-3xl tracking-tight',
+        className
+      )}
+    >
+      <span className="text-foreground">Resolution</span>
+      <span className="text-gradient-brand">Flow</span>
+    </span>
+  )
+}