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/library/TreeListView.tsx

@@ -37,20 +37,20 @@ export function TreeListView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-sm"
+          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-xs"
         >
           {/* Left: Name and Description */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
               <h3 className="font-semibold text-foreground truncate">{tree.name}</h3>
               {tree.status === 'draft' && (
-                <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 flex-shrink-0">
+                <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 shrink-0">
                   <FileText className="h-3 w-3" />
                   Draft
                 </span>
               )}
               {tree.tree_type === 'maintenance' && (
-                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400 flex-shrink-0">
+                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
                   <Wrench className="h-3 w-3" />
                   Maintenance
                 </span>
@@ -62,11 +62,11 @@ export function TreeListView({
               )}
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                  <Globe className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                  <Lock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                 </span>
               )}
             </div>
@@ -90,7 +90,7 @@ export function TreeListView({
           </div>
 
           {/* Right: Metadata and Actions */}
-          <div className="flex items-center gap-3 flex-shrink-0">
+          <div className="flex items-center gap-3 shrink-0">
             <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
               <span>v{tree.version}</span>
               <span>{tree.usage_count} uses</span>