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/ChatRetentionSettingsPage.tsx

@@ -64,7 +64,7 @@ export default function ChatRetentionSettingsPage() {
 
         <div className="space-y-4">
           <div>
-            <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground block mb-1.5">
+            <label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
               Retention Period (days)
             </label>
             <input
@@ -73,7 +73,7 @@ export default function ChatRetentionSettingsPage() {
               onChange={e => setRetentionDays(e.target.value)}
               min={1}
               max={365}
-              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
               style={{ borderColor: 'var(--glass-border)' }}
             />
             <p className="text-xs text-muted-foreground mt-1">
@@ -82,7 +82,7 @@ export default function ChatRetentionSettingsPage() {
           </div>
 
           <div>
-            <label className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground block mb-1.5">
+            <label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
               Max Conversations
             </label>
             <input
@@ -91,7 +91,7 @@ export default function ChatRetentionSettingsPage() {
               onChange={e => setMaxCount(e.target.value)}
               min={10}
               max={10000}
-              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-[rgba(6,182,212,0.3)]"
               style={{ borderColor: 'var(--glass-border)' }}
             />
             <p className="text-xs text-muted-foreground mt-1">
@@ -104,7 +104,7 @@ export default function ChatRetentionSettingsPage() {
           <button
             onClick={handleSave}
             disabled={saving}
-            className="bg-gradient-brand text-[#101114] font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40 flex items-center gap-2"
+            className="bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40 flex items-center gap-2"
           >
             {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
             Save Settings

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)]'
               )}
             >

frontend/src/pages/account/TargetListsPage.tsx

@@ -205,7 +205,7 @@ export default function TargetListsPage() {
               type="text"
               value={editorName}
               onChange={e => setEditorName(e.target.value)}
-              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder="e.g. RDS Farm A"
             />
           </div>
@@ -217,7 +217,7 @@ export default function TargetListsPage() {
               type="text"
               value={editorDescription}
               onChange={e => setEditorDescription(e.target.value)}
-              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder="e.g. Production RDS servers"
             />
           </div>
@@ -229,7 +229,7 @@ export default function TargetListsPage() {
               value={editorTargets}
               onChange={e => setEditorTargets(e.target.value)}
               rows={6}
-              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
             />
           </div>

frontend/src/pages/account/TeamCategoriesPage.tsx

@@ -78,7 +78,7 @@ export function TeamCategoriesPage() {
     setForm({ name: cat.name, slug: cat.slug, description: cat.description || '' })
   }
 
-  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
+  const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20')
 
   return (
     <div className="space-y-6">