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-editor/StepList.tsx

@@ -145,7 +145,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                       type="text"
                       value={step.title}
                       onChange={(e) => updateStep(step.id, { title: e.target.value })}
-                      className="flex-1 bg-transparent text-sm text-muted-foreground focus:outline-none"
+                      className="flex-1 bg-transparent text-sm text-muted-foreground focus:outline-hidden"
                       placeholder="Procedure Complete"
                     />
                     <span className="text-[10px] text-muted-foreground">END</span>
@@ -239,7 +239,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                       className={cn(
                         'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors',
                         'hover:border-primary/30 hover:bg-accent/50',
-                        isGhost && 'border-l-2 border-dashed !border-l-primary/40 opacity-60'
+                        isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
                       )}
                       onContextMenu={(e) => onStepContextMenu?.(e, step.id)}
                     >