refactor: replace hardcoded hex colors with theme tokens, move data/ to root

- Add --color-green-mid token (#4a7a55) to @theme for dimmer stat values
- Replace all text-[#hex]/bg-[#hex] arbitrary values with named tokens:
  text-green, text-green-light, text-green-sec, text-green-muted,
  text-green-dark, text-green-mid, text-text, bg-card, bg-bg, border-border
- Replace rgba(34,197,94,X) inline styles with bg-green/X opacity modifiers
- Convert single-prop style={{ borderColor/background }} to className
- Fix SVG stroke="#dff5e8" → stroke="currentColor"
- Use CSS variables in globals.css base styles (background-color, color)
- Move app/data/wikipedia/ → data/ (project root, not inside Next.js app dir)
- Update Dockerfile, seed.ts, scrape-wikipedia.ts paths accordingly
- Remove unused app/data/world_cup.csv

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

app/groups/page.tsx

@@ -36,14 +36,14 @@ export default function GroupsPage() {
   return (
     <div className="max-w-[1200px] mx-auto px-7 py-10 pb-16">
       <div className="mb-9">
-        <h1 className="font-['Bebas_Neue'] text-[52px] tracking-[0.04em] text-[#22c55e] leading-none">2026 Groups</h1>
-        <p className="text-[#2a5c35] text-sm mt-1.5">48 teams · 12 groups · Top 2 + 8 best 3rd-place advance</p>
+        <h1 className="font-['Bebas_Neue'] text-[52px] tracking-[0.04em] text-green leading-none">2026 Groups</h1>
+        <p className="text-green-muted text-sm mt-1.5">48 teams · 12 groups · Top 2 + 8 best 3rd-place advance</p>
       </div>
 
       {loading && !data && (
         <div className="grid grid-cols-[repeat(auto-fill,minmax(268px,1fr))] gap-3.5">
           {Array.from({ length: 12 }).map((_, i) => (
-            <div key={i} className="h-56 rounded-2xl animate-pulse" style={{ background: '#0a1810' }} />
+            <div key={i} className="h-56 rounded-2xl animate-pulse bg-card" />
           ))}
         </div>
       )}
@@ -58,13 +58,11 @@ export default function GroupsPage() {
           const letter = groupName.replace('Group ', '')
           return (
             <div key={groupName} className="glass-card">
-              <div className="px-4 py-3 border-b" style={{
-                background: 'linear-gradient(90deg,rgba(34,197,94,0.12) 0%,rgba(34,197,94,0.04) 100%)',
-                borderColor: 'rgba(34,197,94,0.1)',
-              }}>
-                <span className="font-['Bebas_Neue'] text-[28px] text-[#22c55e] tracking-[0.05em]">GROUP {letter}</span>
+              <div className="px-4 py-3 border-b border-green/10"
+                style={{ background: 'linear-gradient(90deg,color-mix(in srgb,var(--color-green) 12%,transparent) 0%,color-mix(in srgb,var(--color-green) 4%,transparent) 100%)' }}>
+                <span className="font-['Bebas_Neue'] text-[28px] text-green tracking-[0.05em]">GROUP {letter}</span>
               </div>
-              <div className="grid px-4 py-2 text-[9px] text-[#2a5c35] tracking-[0.1em] uppercase"
+              <div className="grid px-4 py-2 text-[9px] text-green-muted tracking-[0.1em] uppercase"
                 style={{ gridTemplateColumns: '1fr 22px 22px 22px 22px 22px 30px', gap: '3px' }}>
                 <span>Team</span>
                 <span className="text-center">P</span><span className="text-center">W</span>
@@ -73,24 +71,19 @@ export default function GroupsPage() {
               </div>
               {sorted.map((t, idx) => (
                 <Link key={t.team.id} href={`/teams/${t.team.slug}`}>
-                  <div className="grid px-4 py-2.5 items-center border-t hover:bg-[rgba(34,197,94,0.03)] transition-colors cursor-pointer"
-                    style={{
-                      gridTemplateColumns: '1fr 22px 22px 22px 22px 22px 30px',
-                      gap: '3px',
-                      borderColor: 'rgba(34,197,94,0.06)',
-                      background: idx < 2 ? 'rgba(34,197,94,0.025)' : undefined,
-                    }}>
+                  <div className={`grid px-4 py-2.5 items-center border-t border-green/[6%] hover:bg-green/[3%] transition-colors cursor-pointer ${idx < 2 ? 'bg-green/[2.5%]' : ''}`}
+                    style={{ gridTemplateColumns: '1fr 22px 22px 22px 22px 22px 30px', gap: '3px' }}>
                     <div className="flex items-center gap-2 overflow-hidden">
                       <TeamFlag name={t.team.name} iso2={t.team.iso2} size="sm" />
-                      <span className={`text-sm truncate font-medium ${idx < 2 ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>{t.team.name}</span>
+                      <span className={`text-sm truncate font-medium ${idx < 2 ? 'text-text' : 'text-green-sec'}`}>{t.team.name}</span>
                     </div>
                     {[t.played, t.won, t.drawn, t.lost].map((v, i) => (
-                      <span key={i} className="text-center text-[13px] text-[#4a7a55]">{v}</span>
+                      <span key={i} className="text-center text-[13px] text-green-mid">{v}</span>
                     ))}
-                    <span className="text-center text-[13px] text-[#4a7a55]">
+                    <span className="text-center text-[13px] text-green-mid">
                       {t.goalDiff > 0 ? `+${t.goalDiff}` : t.goalDiff}
                     </span>
-                    <span className="text-center text-[13px] font-bold text-[#22c55e]">{t.pts}</span>
+                    <span className="text-center text-[13px] font-bold text-green">{t.pts}</span>
                   </div>
                 </Link>
               ))}