fix: proper Tailwind v4 CSS structure in globals.css

- @theme inline → @theme so tokens generate utility classes (bg-bg,
  text-text, font-display etc.) rather than being inlined as vars only
- Wrap base resets, keyframes and custom classes in @layer base for
  correct Tailwind cascade ordering
- Remove broken @source directives (Tailwind v4 auto-detects sources
  from the project root when using @tailwindcss/postcss with Next.js)

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

app/globals.css

@@ -1,21 +1,7 @@
 @import "tailwindcss";
 @import "flag-icons/css/flag-icons.min.css";
 
-@source "*.{ts,tsx}";
-@source "../app/groups/*.{ts,tsx}";
-@source "../app/history/*.{ts,tsx}";
-@source "../app/players/[name]/*.{ts,tsx}";
-@source "../app/search/*.{ts,tsx}";
-@source "../app/stats/*.{ts,tsx}";
-@source "../app/teams/[slug]/*.{ts,tsx}";
-@source "../app/tournaments/[year]/*.{ts,tsx}";
-@source "../components/*.{ts,tsx}";
-@source "../lib/*.{ts,tsx}";
-@source "../lib/db/*.{ts,tsx}";
-@source "../lib/graphql/*.{ts,tsx}";
-@source "../lib/graphql/resolvers/*.{ts,tsx}";
-
-@theme inline {
+@theme {
   --color-bg: #040d08;
   --color-card: #0a1810;
   --color-hero: #0d2416;
@@ -31,36 +17,37 @@
   --font-body: "Space Grotesk", system-ui, sans-serif;
 }
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
+@layer base {
+  * { box-sizing: border-box; margin: 0; padding: 0; }
 
-html { scroll-behavior: smooth; }
+  html { scroll-behavior: smooth; }
 
-body {
+  body {
     background: #040d08;
     color: #dff5e8;
     font-family: "Space Grotesk", system-ui, sans-serif;
     min-height: 100vh;
     overflow-x: hidden;
-}
+  }
 
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: #020a04; }
-::-webkit-scrollbar-thumb { background: rgba(34,197,94,0.25); border-radius: 4px; }
+  ::-webkit-scrollbar { width: 5px; }
+  ::-webkit-scrollbar-track { background: #020a04; }
+  ::-webkit-scrollbar-thumb { background: rgba(34,197,94,0.25); border-radius: 4px; }
 
-@keyframes livePulse {
+  @keyframes livePulse {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.2; transform: scale(0.6); }
-}
+  }
 
-@keyframes fadeIn {
+  @keyframes fadeIn {
     from { opacity: 0; transform: translateY(8px); }
     to { opacity: 1; transform: translateY(0); }
-}
+  }
 
-.animate-live { animation: livePulse 2s ease-in-out infinite; }
-.animate-fade-in { animation: fadeIn 0.3s ease-out; }
+  .animate-live { animation: livePulse 2s ease-in-out infinite; }
+  .animate-fade-in { animation: fadeIn 0.3s ease-out; }
 
-.pitch-grid {
+  .pitch-grid {
     background-image: repeating-linear-gradient(
       0deg,
       transparent,
@@ -68,4 +55,5 @@ body {
       rgba(34,197,94,0.018) 44px,
       rgba(34,197,94,0.018) 88px
     );
+  }
 }