refactor: migrate to Tailwind CSS 4 native configuration

Convert from Tailwind CSS 3 style to Tailwind CSS 4 native approach:
- Install @tailwindcss/postcss plugin
- Create postcss.config.mjs with Tailwind PostCSS plugin
- Migrate all custom theme colors to globals.css using @theme directive
- Remove tailwind.config.ts (no longer needed in Tailwind CSS 4)
- Update globals.css from @import style to native CSS with custom properties

Custom theme includes:
- 23 category-specific colors as CSS custom properties
- --color-category-* naming convention for all unit types
- Follows Tailwind CSS 4 best practices with @theme block

Benefits:
- Native CSS features, no JS config needed
- Better performance with PostCSS plugin
- Cleaner separation of concerns
- Follows Tailwind CSS 4 migration guide

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "convert-units": "^2.3.4",
     "next": "^16.0.0",
-    "convert-units": "^2.3.4"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4.1.17",
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "tailwindcss": "^4.0.0",
     "eslint": "^9",
-    "eslint-config-next": "^16.0.0"
+    "eslint-config-next": "^16.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5"
   }
 }