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

@@ -579,7 +579,7 @@ export function TreeNavigationPage() {
               className={cn(
                 'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
                 'text-foreground placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -596,7 +596,7 @@ export function TreeNavigationPage() {
               className={cn(
                 'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
                 'text-foreground placeholder:text-muted-foreground',
-                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -761,7 +761,7 @@ export function TreeNavigationPage() {
       </div>
 
       {/* Current Node */}
-      <div className="bg-card border border-border rounded-xl p-6 shadow-sm">
+      <div className="bg-card border border-border rounded-xl p-6 shadow-xs">
         {/* Answer placeholder guard */}
         {currentNode && currentNode.type === 'answer' && (
           <div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-6 text-center">
@@ -829,7 +829,7 @@ export function TreeNavigationPage() {
                         'flex items-center gap-3'
                       )}
                     >
-                      <span className="flex-shrink-0 rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
+                      <span className="shrink-0 rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
                         Custom
                       </span>
                       <span>{cs.step_data.title}</span>
@@ -922,7 +922,7 @@ export function TreeNavigationPage() {
                         className={cn(
                           'block w-full rounded-md border border-border bg-accent px-3 py-2',
                           'font-mono text-sm text-foreground placeholder:text-muted-foreground',
-                          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                          'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                         )}
                       />
                       <p className="mt-1 text-right text-xs text-muted-foreground">
@@ -949,7 +949,7 @@ export function TreeNavigationPage() {
                     )}
                   >
                     <span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
-                    <ArrowRight className="h-4 w-4 flex-shrink-0" />
+                    <ArrowRight className="h-4 w-4 shrink-0" />
                   </button>
                 </div>
               )
@@ -1046,7 +1046,7 @@ export function TreeNavigationPage() {
                         className={cn(
                           'block w-full rounded-md border border-border bg-accent px-3 py-2',
                           'font-mono text-sm text-foreground placeholder:text-muted-foreground',
-                          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+                          'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                         )}
                       />
                       <p className="mt-1 text-right text-xs text-muted-foreground">
@@ -1136,7 +1136,7 @@ export function TreeNavigationPage() {
             className={cn(
               'mt-1 block w-full rounded-md border border-border bg-card px-3 py-2',
               'text-foreground placeholder:text-muted-foreground',
-              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
+              'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>