chore: Tailwind CSS v3 → v4 migration (#99)

* chore: run Tailwind v4 upgrade tool (Phase 1)

- Upgraded tailwindcss v3 → v4.2.1, postcss plugin to @tailwindcss/postcss
- Deleted tailwind.config.js, migrated theme to CSS @theme block in index.css
- Replaced @tailwind directives with @import 'tailwindcss'
- Added @custom-variant dark, @utility blocks for custom utilities
- Updated class names across 128 files (shadow-sm → shadow-xs, etc.)
- Removed autoprefixer (built into v4)
- Added migration plan doc

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

* chore: switch from @tailwindcss/postcss to @tailwindcss/vite (Phase 2)

- Replaced @tailwindcss/postcss with @tailwindcss/vite plugin
- Deleted postcss.config.js (no longer needed)
- Tailwind now runs as a native Vite plugin for faster HMR

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

* refactor: convert to OKLCH colors, move keyframes into @theme (Phase 3-4)

- Replaced all HSL color indirection with direct OKLCH values in @theme
- Moved all keyframes inside @theme block (v4 pattern)
- Eliminated hsl(var(--x)) double-indirection across 17 component files
- Replaced hsl() inline styles with var(--color-*) theme references
- Cleaned up redundant rdp-* utility blocks
- Fixed @custom-variant dark syntax to use :where()
- Added sidebar/glass/shadow vars as OKLCH in :root

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/account/AccountLayout.tsx

@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom'
 
 export function AccountLayout() {
   return (
-    <div className="container mx-auto max-w-screen-lg px-4 py-6">
+    <div className="container mx-auto max-w-(--breakpoint-lg) px-4 py-6">
       <Outlet />
     </div>
   )

frontend/src/components/account/DeleteAccountModal.tsx

@@ -56,7 +56,7 @@ export function DeleteAccountModal({ onClose }: Props) {
               required
               className={cn(
                 'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
-                'text-foreground focus:border-primary focus:outline-none'
+                'text-foreground focus:border-primary focus:outline-hidden'
               )}
             />
           </div>
@@ -69,7 +69,7 @@ export function DeleteAccountModal({ onClose }: Props) {
               onClick={onClose}
               className={cn(
                 'rounded-[10px] px-4 py-2 text-sm font-medium',
-                'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground'
+                'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
               )}
             >
               Cancel

frontend/src/components/account/LeaveAccountModal.tsx

@@ -45,7 +45,7 @@ export function LeaveAccountModal({ accountName, onClose }: Props) {
             onClick={onClose}
             className={cn(
               'rounded-[10px] px-4 py-2 text-sm font-medium',
-              'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground'
+              'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
             )}
           >
             Cancel

frontend/src/components/account/TransferOwnershipModal.tsx

@@ -60,7 +60,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 onChange={(e) => setTargetUserId(e.target.value)}
                 className={cn(
                   'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
-                  'text-foreground focus:border-primary focus:outline-none'
+                  'text-foreground focus:border-primary focus:outline-hidden'
                 )}
               >
                 {nonOwnerMembers.map((m) => (
@@ -77,7 +77,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 required
                 className={cn(
                   'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
-                  'text-foreground focus:border-primary focus:outline-none'
+                  'text-foreground focus:border-primary focus:outline-hidden'
                 )}
               />
             </div>
@@ -90,7 +90,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 onClick={onClose}
                 className={cn(
                   'rounded-[10px] px-4 py-2 text-sm font-medium',
-                  'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground'
+                  'bg-[rgba(255,255,255,0.04)] border border-brand-border text-foreground'
                 )}
               >
                 Cancel
@@ -100,7 +100,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 disabled={isSubmitting || !password}
                 className={cn(
                   'rounded-[10px] px-4 py-2 text-sm font-semibold',
-                  'bg-amber-500 text-[#101114] hover:bg-amber-400',
+                  'bg-amber-500 text-brand-dark hover:bg-amber-400',
                   'disabled:opacity-50'
                 )}
               >