Redesign: Editorial Fresh design system

Complete visual overhaul with distinctive editorial aesthetic:

Design System:
- New fonts: Fraunces (display) + DM Sans (body)
- Color palette: Cream background, ink text, coral accents
- Custom CSS variables and utility classes
- Sharp edges (no rounded corners) for editorial feel

Components:
- Updated Button with new variants and colors
- Updated Input with editorial styling
- New card-editorial class with accent bar

Pages:
- Homepage: Full redesign with hero, features, CTA
- Auth layout: Split screen with branding side
- Login/Register: Editorial styling with tags
- Dashboard: Cards with accent bars
- Subscription: Clean feature comparison table

Typography:
- Fraunces for all headings (serif, characterful)
- DM Sans for body text (clean, readable)
- Editorial tags (uppercase, accent color)

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

src/components/layout/user-nav.tsx

@@ -22,19 +22,36 @@ export function UserNav({ email, planName }: UserNavProps) {
     router.refresh()
   }
 
+  // Get initials from email
+  const initials = email
+    .split('@')[0]
+    .split(/[._-]/)
+    .slice(0, 2)
+    .map(part => part.charAt(0).toUpperCase())
+    .join('')
+
   return (
     <div className="flex items-center gap-4">
-      <div className="text-sm text-right">
-        <p className="font-medium">{email}</p>
+      {/* Avatar */}
+      <div className="w-9 h-9 bg-ink flex items-center justify-center">
+        <span className="text-cream text-sm font-medium">{initials}</span>
+      </div>
+
+      {/* Info */}
+      <div className="hidden sm:block text-sm text-right">
+        <p className="font-medium text-ink">{email}</p>
         {planName && (
-          <p className="text-gray-500 text-xs capitalize">Piano {planName}</p>
+          <p className="text-ink-muted text-xs">Piano {planName}</p>
         )}
       </div>
+
+      {/* Logout button */}
       <Button
-        variant="outline"
+        variant="ghost"
         size="sm"
         onClick={handleSignOut}
         disabled={loading}
+        className="text-ink-light hover:text-ink"
       >
         {loading ? 'Uscita...' : 'Esci'}
       </Button>