style: comprehensive Light Mode overrides

Dashboard:
- Hero card: white glass (rgba 255,255,255,0.75) instead of dark glass
- Reduced shadows (no more extreme 40px shadow)
- LED digits: dark gold (#9A6500) with subtle shadow
- Countdown/tip badges: dark gold on light background
- Flag boxes: lighter shadows, no dark glow aura

MatchCards:
- LED time: dark gold for contrast on light bg
- Flag boxes: lighter shadows

BottomNav:
- White background with subtle top border
- Inactive tabs: darker for readability

Global:
- text-muted: 0.45 opacity (was 0.35) — better readability
- text-secondary: 0.65 (was 0.60)
- Gold: #B8740A (darker for light bg contrast)
- shadow-card: much lighter (was too heavy)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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;

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%);
+}

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;
 }

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;