feat: redesign UI with pastel theme, dark mode and smooth animations

- Add light/dark/system theme switcher with localStorage persistence
  and automatic prefers-color-scheme detection
- New pastel Instagram-inspired palette: rose accent (#C9445D light,
  #E8687E dark), clean #FAFAFA / #000000 backgrounds
- Replace all hardcoded bg-white / red-* colors with CSS variables
  so every page and modal respects the active theme
- Smooth card hover: translateY elevation + image zoom (no layout shift)
- Micro-animations on action buttons with spring cubic-bezier
- Editorial navbar: 3px accent top bar, uppercase wordmark
- Theme toggle button (sun/moon/monitor) added to navbar

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

client/src/pages/CatPage.tsx

@@ -129,7 +129,7 @@ export default function CatPage() {
               </div>
             </Link>
             {isOwner && (
-              <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
+              <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
                 <Trash2 className="h-4 w-4" strokeWidth={1.5} />
               </button>
             )}
@@ -180,7 +180,7 @@ export default function CatPage() {
                   {(user && (c.user_id === user.id || user.is_admin)) && (
                     <button
                       onClick={() => handleDeleteComment(c.id)}
-                      className="btn-ghost h-6 w-6 text-[var(--fg-tertiary)] hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                      className="btn-ghost h-6 w-6 text-[var(--fg-tertiary)] hover:text-[var(--danger)] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
                     >
                       <X className="h-3 w-3" strokeWidth={2} />
                     </button>
@@ -199,7 +199,7 @@ export default function CatPage() {
                 onChange={e => setCommentText(e.target.value)}
                 placeholder="Написать комментарий..."
                 maxLength={500}
-                className="flex-1 h-9 px-3 text-sm rounded-xl border border-[var(--border)] bg-white placeholder:text-[var(--fg-tertiary)] focus-ring"
+                className="flex-1 h-9 px-3 text-sm rounded-xl border border-[var(--border)] bg-[var(--surface)] placeholder:text-[var(--fg-tertiary)] focus-ring"
               />
               <button
                 type="submit"