1 files changed, 45 insertions, 30 deletions
diff --git a/static/main.css b/static/main.css
index a904518..6a484a6 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,13 +1,26 @@
 :root {
-    --bg-main:#121212;
-    --bg-card:#1e1e1e;
-    --border:#333333;
-    --text-primary:#ffffff;
-    --text-secondary:#a0a0a0;
-    --text-muted:#d1d1d1;
-    --accent:#e2e2e2;
-    --accent-glow:rgba(255,255,255,0.1);
+    --bg-main: #ffffff;
+    --bg-card: #f8f9fa;
+    --border: #e0e0e0;
+    --text-primary: #1a1a1a;
+    --text-secondary: #5f6368;
+    --text-muted: #757575;
+    --accent: #202124;
+    --accent-glow: rgba(0,0,0,0.05);
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-main: #121212;
+        --bg-card: #1e1e1e;
+        --border: #333333;
+        --text-primary: #ffffff;
+        --text-secondary: #a0a0a0;
+        --text-muted: #d1d1d1;
+        --accent: #e2e2e2;
+        --accent-glow: rgba(255,255,255,0.1);
+    }
 }
+
 body {
     background-color:var(--bg-main);
     color:var(--text-primary);
@@ -16,13 +29,14 @@ body {
     padding:0;
 }
 .view-home {
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    min-height:100vh;
-    padding:20px;
-    background:radial-gradient(circle at top right,#0b0c0e 0%,#000000 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 20px;
+    background: radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%);
 }
+
 .view-home .container {
     width:100%;
     max-width:580px;
@@ -95,14 +109,14 @@ h1 span {
     color:var(--accent);
 }
 .search-box {
-    width:100%;
-    padding:12px 24px;
-    border-radius:99px;
-    border:1px solid var(--border);
-    background:var(--bg-card);
-    color:white;
-    outline:none;
-    transition:border-color 0.2s,box-shadow 0.2s;
+    width: 100%;
+    padding: 12px 24px;
+    border-radius: 99px;
+    border: 1px solid var(--border);
+    background: var(--bg-card);
+    color: var(--text-primary);
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
 }
 .search-box:focus {
     border-color:var(--accent);
@@ -173,14 +187,14 @@ h1 span {
     transition:opacity 0.3s;
 }
 .image-overlay {
-    position:absolute;
-    inset:0;
-    background:rgba(15,23,42,0.7);
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    opacity:0;
-    transition:opacity 0.2s;
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s;
 }
 .image-card:hover .image-overlay {
     opacity:1;
@@ -358,3 +372,4 @@ h1 span {
         font-size:3rem;
     }
 
+