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/common/ContextMenu.tsx

@@ -87,7 +87,7 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
               'flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
               item.variant === 'danger'
                 ? 'text-rose-400 hover:bg-rose-500/10'
-                : 'text-foreground hover:bg-[rgba(255,255,255,0.06)]'
+                : 'text-foreground hover:bg-brand-border'
             )}
           >
             {item.icon && (

frontend/src/components/common/CreateFlowDropdown.tsx

@@ -74,7 +74,7 @@ export function CreateFlowDropdown({
       {showMenu && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
-          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-sm">
+          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-xs">
             {/* Troubleshooting */}
             <Link
               to="/trees/new"

frontend/src/components/common/Modal.tsx

@@ -125,7 +125,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
     >
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -139,13 +139,13 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
           isFullScreen
             ? 'fixed inset-4 max-w-none w-auto h-auto rounded-2xl'
             : cn(
-                'max-h-[100vh] rounded-t-2xl sm:max-h-[85vh] sm:rounded-2xl',
+                'max-h-screen rounded-t-2xl sm:max-h-[85vh] sm:rounded-2xl',
                 sizeClasses[size]
               )
         )}
       >
         {/* Header - Fixed at top */}
-        <div className="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
+        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
           <h2 id="modal-title" className="text-lg font-semibold text-foreground">
             {title}
           </h2>
@@ -168,7 +168,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
               className={cn(
                 'rounded-md p-1.5 text-muted-foreground transition-colors sm:p-1',
                 'hover:bg-accent hover:text-foreground',
-                'focus:outline-none focus:ring-2 focus:ring-primary/20'
+                'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
               )}
               aria-label="Close modal"
             >
@@ -184,7 +184,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
 
         {/* Footer - Fixed at bottom */}
         {footer && (
-          <div className="flex-shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
+          <div className="shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
             {footer}
           </div>
         )}

frontend/src/components/common/TagInput.tsx

@@ -186,7 +186,7 @@ export function TagInput({
             className={cn(
               'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-foreground',
               'placeholder:text-muted-foreground',
-              'focus:outline-none focus:ring-0'
+              'focus:outline-hidden focus:ring-0'
             )}
           />
         )}