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>

components/match-card.tsx

@@ -32,19 +32,19 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
   if (compact) {
     return (
       <Link href={`/tournaments/${match.year}#match-${match.id}`} className="block">
-        <div className="glass-card rounded-xl p-3.5 hover:border-[rgba(34,197,94,0.22)] transition-colors">
-          <div className="text-[9px] text-[#2a5c35] tracking-[0.1em] uppercase mb-2.5">
+        <div className="glass-card rounded-xl p-3.5 hover:border-green/[22%] transition-colors">
+          <div className="text-[9px] text-green-muted tracking-[0.1em] uppercase mb-2.5">
             {match.round}{match.group ? ` · ${match.group}` : ''} · {match.date ? formatDate(match.date) : ''}
           </div>
           <div className="flex items-center gap-2">
             <div className="flex-1 flex items-center gap-2 overflow-hidden">
               <TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="sm" />
-              <span className={`text-sm font-medium truncate ${winner === 'home' ? 'text-[#dff5e8]' : 'text-[#4a7a55]'}`}>
+              <span className={`text-sm font-medium truncate ${winner === 'home' ? 'text-text' : 'text-green-mid'}`}>
                 {match.team1.name}
               </span>
             </div>
             <div className="flex-shrink-0 min-w-[52px] text-center">
-              <div className="font-['Bebas_Neue'] text-xl text-[#22c55e]">
+              <div className="font-['Bebas_Neue'] text-xl text-green">
                 {hasScore
                   ? match.scoreP
                     ? `${match.scoreP[0]} – ${match.scoreP[1]}`
@@ -54,23 +54,23 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
                   : match.isLive ? <LiveBadge label="•" /> : '–'}
               </div>
               {match.scoreP && (
-                <div className="text-[8px] text-[#2a5c35] leading-none">
+                <div className="text-[8px] text-green-muted leading-none">
                   {ft![0]}–{ft![1]} a.e.t.
                 </div>
               )}
               {match.scoreEt && !match.scoreP && (
-                <div className="text-[8px] text-[#2a5c35] leading-none">a.e.t.</div>
+                <div className="text-[8px] text-green-muted leading-none">a.e.t.</div>
               )}
             </div>
             <div className="flex-1 flex items-center justify-end gap-2 overflow-hidden">
-              <span className={`text-sm font-medium truncate ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#4a7a55]'}`}>
+              <span className={`text-sm font-medium truncate ${winner === 'away' ? 'text-text' : 'text-green-mid'}`}>
                 {match.team2.name}
               </span>
               <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="sm" />
             </div>
           </div>
           {match.scoreEt && !match.scoreP && (
-            <div className="text-[9px] text-[#2a5c35] mt-1 text-center">a.e.t.</div>
+            <div className="text-[9px] text-green-muted mt-1 text-center">a.e.t.</div>
           )}
         </div>
       </Link>
@@ -80,18 +80,18 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
   const matchHref = `/tournaments/${match.year}#match-${match.id}`
 
   return (
-    <div className="glass-card-hero rounded-2xl px-5 py-6 sm:px-9 sm:py-9 hover:border-[rgba(34,197,94,0.45)] transition-colors">
+    <div className="glass-card-hero rounded-2xl px-5 py-6 sm:px-9 sm:py-9 hover:border-green/45 transition-colors">
       {match.isLive && <div className="mb-4"><LiveBadge label="Live Now" /></div>}
       <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 sm:gap-8">
         <Link href={match.team1.slug ? `/teams/${match.team1.slug}` : matchHref}
-          className={`text-center block transition-colors hover:text-[#22c55e] ${winner === 'home' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
+          className={`text-center block transition-colors hover:text-green ${winner === 'home' ? 'text-text' : 'text-green-sec'}`}>
           <TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="xl" className="mb-2" />
           <div className="font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate">
             {match.team1.name}
           </div>
         </Link>
         <Link href={matchHref} className="text-center flex-shrink-0 block">
-          <div className="font-['Bebas_Neue'] text-[48px] sm:text-[76px] text-[#22c55e] leading-none hover:opacity-80 transition-opacity">
+          <div className="font-['Bebas_Neue'] text-[48px] sm:text-[76px] text-green leading-none hover:opacity-80 transition-opacity">
             {hasScore
               ? match.scoreP
                 ? `${match.scoreP[0]}–${match.scoreP[1]}`
@@ -101,16 +101,16 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
               : '?–?'}
           </div>
           {match.scoreP && (
-            <div className="text-[10px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
+            <div className="text-[10px] text-green-muted mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
           )}
           {match.scoreEt && !match.scoreP && (
-            <div className="text-[10px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} (a.e.t.)</div>
+            <div className="text-[10px] text-green-muted mt-0.5">{ft![0]}–{ft![1]} (a.e.t.)</div>
           )}
-          <div className="text-[9px] text-[#2a5c35] tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
-          <div className="text-[10px] text-[#1a3a22] mt-0.5">{match.date ? formatDate(match.date) : ''}</div>
+          <div className="text-[9px] text-green-muted tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
+          <div className="text-[10px] text-green-dark mt-0.5">{match.date ? formatDate(match.date) : ''}</div>
         </Link>
         <Link href={match.team2.slug ? `/teams/${match.team2.slug}` : matchHref}
-          className={`text-center block transition-colors hover:text-[#22c55e] ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
+          className={`text-center block transition-colors hover:text-green ${winner === 'away' ? 'text-text' : 'text-green-sec'}`}>
           <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2" />
           <div className="font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate">
             {match.team2.name}