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/procedural/IntakeFormModal.tsx

@@ -71,7 +71,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
     const error = errors[field.variable_name]
 
     const baseInputClass = cn(
-      'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1',
+      'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-1',
       error
         ? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
         : 'border-border focus:border-primary focus:ring-primary/20'
@@ -211,7 +211,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
       <div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-[#0a0a0a] shadow-xl">
         {/* Header */}
         <div className="border-b border-border px-6 py-4">

frontend/src/components/procedural/StepDetail.tsx

@@ -154,7 +154,7 @@ export function StepDetail({
 
       {/* Expected outcome */}
       {'expected_outcome' in step && step.expected_outcome && (
-        <div className="rounded-lg border border-border bg-white/[0.02] p-3">
+        <div className="rounded-lg border border-border bg-white/2 p-3">
           <h4 className="mb-1 text-xs font-medium text-muted-foreground">Expected Outcome</h4>
           <p className="text-sm text-muted-foreground">{resolve(step.expected_outcome)}</p>
         </div>
@@ -162,7 +162,7 @@ export function StepDetail({
 
       {/* Verification */}
       {verificationPrompt && (
-        <div className="rounded-lg border border-border bg-white/[0.02] p-3">
+        <div className="rounded-lg border border-border bg-white/2 p-3">
           <h4 className="mb-2 text-xs font-medium text-muted-foreground">Verification</h4>
           {verificationType === 'checkbox' ? (
             <label className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -184,7 +184,7 @@ export function StepDetail({
                 onChange={(e) => onVerificationChange(e.target.value)}
                 disabled={isCompleted}
                 placeholder="Enter observed value..."
-                className="w-full rounded border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
+                className="w-full rounded border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
               />
             </div>
           )}
@@ -200,7 +200,7 @@ export function StepDetail({
             onChange={(e) => onNotesChange(e.target.value)}
             placeholder="Add notes for this step..."
             rows={2}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm 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-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       )}