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/pages/account/ProfileSettingsPage.tsx

@@ -10,7 +10,7 @@ import type { UserUpdate } from '@/types'
 const inputClass = cn(
   'mt-1 block w-full rounded-[10px] border border-border bg-card px-3 py-2',
   'text-foreground placeholder:text-muted-foreground',
-  'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
+  'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
 )
 
 export function ProfileSettingsPage() {
@@ -122,7 +122,7 @@ export function ProfileSettingsPage() {
 
           {error && (
             <div className="flex items-center gap-2 text-sm text-rose-500">
-              <AlertCircle className="h-4 w-4 flex-shrink-0" />
+              <AlertCircle className="h-4 w-4 shrink-0" />
               {error}
             </div>
           )}
@@ -132,7 +132,7 @@ export function ProfileSettingsPage() {
               type="submit"
               disabled={isSaving || !hasChanges}
               className={cn(
-                'inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-[#101114]',
+                'inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-brand-dark',
                 'shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97]',
                 'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
@@ -145,7 +145,7 @@ export function ProfileSettingsPage() {
               to="/change-password"
               className={cn(
                 'inline-flex items-center 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',
                 'hover:border-[rgba(255,255,255,0.12)]'
               )}
             >