Complete Tailwind CSS v4 migration with @theme

- Remove tailwind.config.js (no longer needed in v4)
- Migrate all theme config to CSS @theme directive
- Define colors, fonts, animations in CSS
- Add zinc color palette for direct use
- Fix styling to match original design

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

src/app/globals.css

@@ -1,33 +1,90 @@
 @import "tailwindcss";
-@config "../../tailwind.config.js";
 
+/* Tailwind CSS v4 Theme Configuration */
+@theme {
+  /* Font Family */
+  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Colors - Zinc-based dark theme */
+  --color-background: #18181b;
+  --color-foreground: #fafafa;
+  --color-card: #27272a;
+  --color-card-foreground: #fafafa;
+  --color-primary: #3b82f6;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #3f3f46;
+  --color-secondary-foreground: #fafafa;
+  --color-muted: #3f3f46;
+  --color-muted-foreground: #a1a1aa;
+  --color-accent: #3f3f46;
+  --color-accent-foreground: #fafafa;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #fafafa;
+  --color-border: #3f3f46;
+  --color-input: #3f3f46;
+  --color-ring: #3b82f6;
+
+  /* Zinc palette for direct use */
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+
+  /* Border Radius */
+  --radius-lg: 0.5rem;
+  --radius-md: calc(0.5rem - 2px);
+  --radius-sm: calc(0.5rem - 4px);
+
+  /* Animations */
+  --animate-slide-up: slideUp 0.5s ease-out forwards;
+  --animate-fade-in: fadeIn 0.3s ease-out forwards;
+  --animate-spin: spin 1s linear infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+}
+
+/* Keyframes for animations */
+@keyframes slideUp {
+  0% { transform: translateY(10px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+/* CSS Variables for legacy support */
 :root {
-  --font-inter: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-inter: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
   /* Animation Design Tokens */
   --transition-fast: 150ms;
   --transition-base: 200ms;
   --transition-slow: 300ms;
   --transition-slower: 500ms;
-
-  /* Colors */
-  --background: 24 24 27;
-  --foreground: 250 250 250;
-  --card: 39 39 42;
-  --card-foreground: 250 250 250;
-  --primary: 59 130 246;
-  --primary-foreground: 255 255 255;
-  --secondary: 63 63 70;
-  --secondary-foreground: 250 250 250;
-  --muted: 63 63 70;
-  --muted-foreground: 161 161 170;
-  --accent: 63 63 70;
-  --accent-foreground: 250 250 250;
-  --destructive: 239 68 68;
-  --destructive-foreground: 250 250 250;
-  --border: 63 63 70;
-  --input: 63 63 70;
-  --ring: 59 130 246;
 }
 
 /* Prefers-Reduced-Motion Support */
@@ -52,8 +109,8 @@ html {
 
 body {
   font-family: var(--font-inter);
-  background-color: rgb(var(--background));
+  background-color: var(--color-background);
-  color: rgb(var(--foreground));
+  color: var(--color-foreground);
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -65,26 +122,26 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgb(var(--background));
+  background: var(--color-background);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgb(var(--secondary));
+  background: var(--color-secondary);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgb(var(--muted-foreground));
+  background: var(--color-muted-foreground);
 }
 
 /* Selection */
 ::selection {
-  background-color: rgb(var(--primary) / 0.3);
+  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 
 /* Focus styles */
 :focus-visible {
-  outline: 2px solid rgb(var(--ring));
+  outline: 2px solid var(--color-ring);
   outline-offset: 2px;
 }
 
@@ -96,16 +153,16 @@ button {
 
 /* Utility classes */
 .text-gradient {
-  background: linear-gradient(135deg, rgb(var(--primary)) 0%, #8b5cf6 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .glass {
-  background: rgb(var(--card) / 0.8);
+  background: color-mix(in srgb, var(--color-card) 80%, transparent);
   backdrop-filter: blur(12px);
-  border: 1px solid rgb(var(--border) / 0.5);
+  border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
 }
 
 /* Safe Area Insets for notches */

tailwind.config.js

@@ -1,76 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-      },
-      animation: {
-        'slide-up': 'slideUp 0.5s ease-out forwards',
-        'fade-in': 'fadeIn 0.3s ease-out forwards',
-      },
-      keyframes: {
-        slideUp: {
-          '0%': { transform: 'translateY(10px)' },
-          '100%': { transform: 'translateY(0)' },
-        },
-        fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-      },
-      colors: {
-        border: "rgb(var(--border))",
-        input: "rgb(var(--input))",
-        ring: "rgb(var(--ring))",
-        background: "rgb(var(--background))",
-        foreground: "rgb(var(--foreground))",
-        primary: {
-          DEFAULT: "rgb(var(--color-primary))",
-          dark: "rgb(var(--color-primary-dark))",
-        },
-        secondary: {
-          DEFAULT: "rgb(var(--color-secondary))",
-          gray: "rgb(var(--color-secondary-gray))",
-          fuzzy: "rgb(var(--color-secondary-fuzzy))",
-        },
-        text: {
-          DEFAULT: "rgb(var(--color-text))",
-          light: "rgb(var(--color-text-light))",
-        },
-        destructive: {
-          DEFAULT: "rgb(var(--destructive))",
-          foreground: "rgb(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "rgb(var(--muted))",
-          foreground: "rgb(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "rgb(var(--accent))",
-          foreground: "rgb(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "rgb(var(--popover))",
-          foreground: "rgb(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "rgb(var(--card))",
-          foreground: "rgb(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
-  },
-  plugins: [],
-}