diff --git a/frontend/src/components/BottomNav.module.css b/frontend/src/components/BottomNav.module.css
index a150198..ecdb3c2 100644
--- a/frontend/src/components/BottomNav.module.css
+++ b/frontend/src/components/BottomNav.module.css
@@ -35,6 +35,20 @@
   color: var(--text-secondary);
 }
 
+/* Light mode */
+:global([data-theme="light"]) .bottomNav {
+  background: rgba(255, 255, 255, 0.9);
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+:global([data-theme="light"]) .tab {
+  color: rgba(13, 21, 38, 0.4);
+}
+
+:global([data-theme="light"]) .tabActive {
+  color: var(--primary);
+}
+
 @media (min-width: 768px) {
   .bottomNav {
     display: none;
diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index 86141cd..24645ea 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -567,3 +567,20 @@
   50%  { box-shadow: 0 0 16px rgba(254, 174, 50, 0.5); }
   100% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
 }
+
+/* ═══ Light Mode Overrides ═══ */
+:global([data-theme="light"]) .kickoffLED {
+  color: #9A6500;
+  text-shadow:
+    0 0 2px rgba(154, 101, 0, 0.3),
+    0 0 6px rgba(154, 101, 0, 0.1);
+}
+
+:global([data-theme="light"]) .flagBox {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+:global([data-theme="light"]) .flagBox::before {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1a7e64a..953fb9a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -46,20 +46,20 @@
   --bg-mid:         #E8EEF7;
   --surface-low:    #FFFFFF;
   --surface-mid:    #FFFFFF;
-  --surface-high:   #DDE5F0;
-  --border-subtle:  rgba(0,0,0,0.08);
+  --surface-high:   #E4EAF2;
+  --border-subtle:  rgba(0,0,0,0.1);
   --primary:        #1A8FE3;
   --primary-dim:    rgba(26,143,227,0.10);
-  --gold:           #D4880A;
-  --gold-glow:      rgba(212,136,10,0.3);
+  --gold:           #B8740A;
+  --gold-glow:      rgba(184,116,10,0.3);
   --cyan:           #0080C6;
   --text-primary:   #0D1526;
-  --text-secondary: rgba(13,21,38,0.6);
-  --text-muted:     rgba(13,21,38,0.35);
-  --success:        #1AAB72;
-  --error:          #D93025;
-  --shadow-card:    0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
-  --card-shine:     rgba(255,255,255,0.85);
+  --text-secondary: rgba(13,21,38,0.65);
+  --text-muted:     rgba(13,21,38,0.45);
+  --success:        #168A5C;
+  --error:          #C92A1F;
+  --shadow-card:    0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
+  --card-shine:     rgba(255,255,255,0.9);
   --scrollbar-bg:   var(--surface-high);
   --primary-rgb:    26, 143, 227;
 }
diff --git a/frontend/src/pages/DashboardPage.module.css b/frontend/src/pages/DashboardPage.module.css
index 06b1357..8c12281 100644
--- a/frontend/src/pages/DashboardPage.module.css
+++ b/frontend/src/pages/DashboardPage.module.css
@@ -363,6 +363,61 @@
 /* ═══════════════════════════════════════
    STATES
    ═══════════════════════════════════════ */
+/* ═══════════════════════════════════════
+   LIGHT MODE OVERRIDES
+   ═══════════════════════════════════════ */
+:global([data-theme="light"]) .hero {
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+:global([data-theme="light"]) .hero::before {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
+}
+
+:global([data-theme="light"]) .heroGlow {
+  background: radial-gradient(circle at center, rgba(26, 143, 227, 0.08) 0%, transparent 65%);
+}
+
+:global([data-theme="light"]) .heroLED,
+:global([data-theme="light"]) .ledDigit,
+:global([data-theme="light"]) .ledColon {
+  color: #9A6500;
+  text-shadow:
+    0 0 3px rgba(154, 101, 0, 0.4),
+    0 0 8px rgba(154, 101, 0, 0.15);
+}
+
+:global([data-theme="light"]) .heroCrestBox {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+:global([data-theme="light"]) .heroCrestBox::before {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
+}
+
+:global([data-theme="light"]) .heroCrestBox::after {
+  display: none;
+}
+
+:global([data-theme="light"]) .heroTip {
+  background: rgba(184, 116, 10, 0.08);
+  border: 1px solid rgba(184, 116, 10, 0.2);
+  color: #8B5E00;
+}
+
+:global([data-theme="light"]) .heroCountdown {
+  background: rgba(184, 116, 10, 0.08);
+  border-color: rgba(184, 116, 10, 0.2);
+  color: #8B5E00;
+}
+
+:global([data-theme="light"]) .statTile {
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+}
+
 .loading,
 .error {
   text-align: center;