From 51e7e8f32708fb98a9c29f74a197d20fe354431a Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Tue, 14 Apr 2026 10:13:41 -0400
Subject: [PATCH] feat: add light theme with data-theme toggle support

---
 frontend/src/index.css | 58 +++++++++++++++++++++++++++++++-----------
 1 file changed, 43 insertions(+), 15 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index a7fba0e..2230992 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,26 +1,53 @@
 @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;500;600;700;900&family=Barlow:wght@300;400;500&display=swap');
 
-:root {
+/* ── DARK THEME (default) ── */
+:root,
+[data-theme="dark"] {
   --bg-deepest: #080a0e;
-  --bg-dark: #0d1117;
-  --bg-panel: #111620;
-  --bg-card: #141b28;
+  --bg-dark:    #0d1117;
+  --bg-panel:   #111620;
+  --bg-card:    #141b28;
   --bg-card-hover: #1a2235;
-  --border: #1e2d45;
+  --border:        #1e2d45;
   --border-bright: #2a4060;
-  --dragon-blue: #1a3aff;
+  --dragon-blue:     #1a3aff;
   --dragon-blue-dim: #0f2299;
   --accent-amber: #ff9a1a;
-  --rec-red: #ff2020;
+  --rec-red:      #ff2020;
   --rec-red-glow: rgba(255, 32, 32, 0.4);
-  --green-safe: #00e676;
-  --text-primary: #e8eef8;
+  --green-safe:   #00e676;
+  --text-primary:   #e8eef8;
   --text-secondary: #7a8fa8;
-  --text-muted: #3d5270;
-  --text-mono: #a8c4e0;
-  --font-ui: 'Barlow Condensed', sans-serif;
+  --text-muted:     #3d5270;
+  --text-mono:      #a8c4e0;
+  --shadow-card: 0 2px 12px rgba(0,0,0,0.5);
+  --font-ui:   'Barlow Condensed', sans-serif;
   --font-body: 'Barlow', sans-serif;
   --font-mono: 'Share Tech Mono', monospace;
+  --scanline-opacity: 0.025;
+}
+
+/* ── LIGHT THEME ── */
+[data-theme="light"] {
+  --bg-deepest: #eef1f7;
+  --bg-dark:    #dde3ee;
+  --bg-panel:   #f4f6fb;
+  --bg-card:    #ffffff;
+  --bg-card-hover: #f0f4ff;
+  --border:        #c8d4e8;
+  --border-bright: #a0b4d0;
+  --dragon-blue:     #1a3aff;
+  --dragon-blue-dim: #3a5aff;
+  --accent-amber: #d4780a;
+  --rec-red:      #d41010;
+  --rec-red-glow: rgba(212, 16, 16, 0.25);
+  --green-safe:   #00a855;
+  --text-primary:   #0d1520;
+  --text-secondary: #3a5070;
+  --text-muted:     #7a90aa;
+  --text-mono:      #2a4060;
+  --shadow-card: 0 2px 12px rgba(0,0,0,0.1);
+  --scanline-opacity: 0;
 }
 
 *, *::before, *::after {
@@ -38,9 +65,10 @@ body {
   min-height: 100vh;
   overflow-x: hidden;
   position: relative;
+  transition: background 0.2s, color 0.2s;
 }
 
-/* Scanline overlay */
+/* Scanline overlay — visible only in dark mode */
 body::before {
   content: '';
   position: fixed;
@@ -49,8 +77,8 @@ body::before {
     to bottom,
     transparent 0px,
     transparent 2px,
-    rgba(0, 0, 0, 0.025) 2px,
-    rgba(0, 0, 0, 0.025) 4px
+    rgba(0, 0, 0, var(--scanline-opacity)) 2px,
+    rgba(0, 0, 0, var(--scanline-opacity)) 4px
   );
   pointer-events: none;
   z-index: 9999;