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/public/icons/app-icon-gradient.svg

@@ -0,0 +1,30 @@
+<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#818cf8"/>
+      <stop offset="100%" stop-color="#a78bfa"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="512" height="512" rx="96" fill="url(#bg-gradient)"/>
+  
+  <!-- Icon scaled and centered (white version) -->
+  <g transform="translate(96, 96) scale(4)">
+    <!-- Input circles -->
+    <circle cx="10" cy="14" r="5" fill="white" opacity="0.4"/>
+    <circle cx="10" cy="30" r="5.5" fill="white" opacity="0.55"/>
+    <circle cx="10" cy="50" r="5.5" fill="white" opacity="0.55"/>
+    <circle cx="10" cy="66" r="5" fill="white" opacity="0.4"/>
+    <!-- Connecting lines -->
+    <path d="M15 14L28 34" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.5"/>
+    <path d="M15.5 30L28 38" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
+    <path d="M15.5 50L28 42" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.65"/>
+    <path d="M15 66L28 46" stroke="white" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.5"/>
+    <!-- Center node with glow -->
+    <circle cx="36" cy="40" r="10" fill="white" opacity="0.2"/>
+    <circle cx="36" cy="40" r="7" fill="white"/>
+    <!-- Arrow -->
+    <path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>

frontend/public/icons/favicon.svg

@@ -0,0 +1,18 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="fav-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#818cf8"/>
+      <stop offset="100%" stop-color="#a78bfa"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Simplified icon for small sizes -->
+  <!-- Input circles -->
+  <circle cx="5" cy="8" r="2.5" fill="url(#fav-gradient)" opacity="0.35"/>
+  <circle cx="5" cy="16" r="3" fill="url(#fav-gradient)" opacity="0.5"/>
+  <circle cx="5" cy="24" r="2.5" fill="url(#fav-gradient)" opacity="0.35"/>
+  <!-- Center node -->
+  <circle cx="14" cy="16" r="4" fill="url(#fav-gradient)"/>
+  <!-- Arrow -->
+  <path d="M18 16H28M28 16L24 12M28 16L24 20" stroke="url(#fav-gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/public/icons/icon.svg

@@ -0,0 +1,23 @@
+<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="resolutionflow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#818cf8"/>
+      <stop offset="100%" stop-color="#a78bfa"/>
+    </linearGradient>
+  </defs>
+  <!-- Input circles (choices) -->
+  <circle cx="10" cy="14" r="5" fill="url(#resolutionflow-gradient)" opacity="0.25"/>
+  <circle cx="10" cy="30" r="5.5" fill="url(#resolutionflow-gradient)" opacity="0.4"/>
+  <circle cx="10" cy="50" r="5.5" fill="url(#resolutionflow-gradient)" opacity="0.4"/>
+  <circle cx="10" cy="66" r="5" fill="url(#resolutionflow-gradient)" opacity="0.25"/>
+  <!-- Connecting lines (outer dotted, inner solid) -->
+  <path d="M15 14L28 34" stroke="url(#resolutionflow-gradient)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
+  <path d="M15.5 30L28 38" stroke="url(#resolutionflow-gradient)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+  <path d="M15.5 50L28 42" stroke="url(#resolutionflow-gradient)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+  <path d="M15 66L28 46" stroke="url(#resolutionflow-gradient)" stroke-width="2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.35"/>
+  <!-- Center node with glow -->
+  <circle cx="36" cy="40" r="10" fill="url(#resolutionflow-gradient)" opacity="0.12"/>
+  <circle cx="36" cy="40" r="7" fill="url(#resolutionflow-gradient)" opacity="0.9"/>
+  <!-- Arrow (documentation output) -->
+  <path d="M43 40H70M70 40L60 30M70 40L60 50" stroke="url(#resolutionflow-gradient)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>