From 9a87e9dde39d8af2460b7b55eee13bc5ad644966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 14 Jun 2026 16:37:59 +0200
Subject: [PATCH] fix: proper Tailwind v4 CSS structure in globals.css
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- @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 | 88 +++++++++++++++++++++----------------------------
 1 file changed, 38 insertions(+), 50 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index b6eb2d6..aaec121 100644
--- a/app/globals.css
+++ b/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,41 +17,43 @@
   --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 {
-  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; }
-
-@keyframes livePulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.2; transform: scale(0.6); }
-}
-
-@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; }
-
-.pitch-grid {
-  background-image: repeating-linear-gradient(
-    0deg,
-    transparent,
-    transparent 44px,
-    rgba(34,197,94,0.018) 44px,
-    rgba(34,197,94,0.018) 88px
-  );
+  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; }
+
+  @keyframes livePulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.2; transform: scale(0.6); }
+  }
+
+  @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; }
+
+  .pitch-grid {
+    background-image: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 44px,
+      rgba(34,197,94,0.018) 44px,
+      rgba(34,197,94,0.018) 88px
+    );
+  }
 }