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/admin/AdminLayout.tsx

@@ -36,7 +36,7 @@ export function AdminLayout() {
   return (
     <div className="flex h-full">
       {/* Desktop sidebar */}
-      <div className="hidden w-60 flex-shrink-0 border-r border-border bg-card md:block">
+      <div className="hidden w-60 shrink-0 border-r border-border bg-card md:block">
         <AdminSidebar />
       </div>
 
@@ -44,7 +44,7 @@ export function AdminLayout() {
       {mobileOpen && (
         <div className="fixed inset-0 z-40 md:hidden">
           <div
-            className="absolute inset-0 bg-card/80 backdrop-blur-sm"
+            className="absolute inset-0 bg-card/80 backdrop-blur-xs"
             onClick={() => setMobileOpen(false)}
           />
           <div className="absolute inset-y-0 left-0 w-60 border-r border-border bg-card shadow-xl">
@@ -63,7 +63,7 @@ export function AdminLayout() {
 
       {/* Content */}
       <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-screen-2xl p-6">
+        <div className="mx-auto max-w-(--breakpoint-2xl) p-6">
           {/* Mobile menu button */}
           <button
             onClick={() => setMobileOpen(true)}

frontend/src/components/admin/CreateCategoryModal.tsx

@@ -58,7 +58,7 @@ export function CreateCategoryModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
       <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
@@ -98,7 +98,7 @@ export function CreateCategoryModal({
               className={cn(
                 'w-full rounded-md 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',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -122,7 +122,7 @@ export function CreateCategoryModal({
               className={cn(
                 'w-full rounded-md 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',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />

frontend/src/components/admin/EditCategoryModal.tsx

@@ -67,7 +67,7 @@ export function EditCategoryModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
       <div className="w-full max-w-md bg-card border border-border rounded-xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
@@ -107,7 +107,7 @@ export function EditCategoryModal({
               className={cn(
                 'w-full rounded-md 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',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -131,7 +131,7 @@ export function EditCategoryModal({
               className={cn(
                 'w-full rounded-md 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',
+                'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />

frontend/src/components/admin/SearchInput.tsx

@@ -48,7 +48,7 @@ export function SearchInput({ value = '', onSearch, placeholder = 'Search...', c
         placeholder={placeholder}
         className={cn(
           'h-9 w-full rounded-md border border-border bg-card pl-9 pr-8 text-sm text-foreground',
-          'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20'
+          'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
         )}
       />
       {localValue && (