improve logo and icon

assets/icon-dark.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <style>
+    .icon-text {
+      font-family: 'Space Grotesk', system-ui, sans-serif;
+      font-weight: 700;
+      font-size: 28px;
+    }
+  </style>
+  <text x="6" y="26" fill="#10B981" class="icon-text">d</text>
+</svg>

assets/icon-light.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <style>
+    .icon-text {
+      font-family: 'Space Grotesk', system-ui, sans-serif;
+      font-weight: 700;
+      font-size: 28px;
+    }
+  </style>
+  <text x="6" y="26" fill="#059669" class="icon-text">d</text>
+</svg>

assets/logo-dark.svg

@@ -7,6 +7,6 @@
     }
   </style>
   <text x="4" y="24" class="logo-text">
-    <tspan fill="#F0F0F0">d</tspan><tspan fill="#AAAAAA">gray</tspan>
+    <tspan fill="#10B981">d</tspan><tspan fill="#AAAAAA">gray</tspan>
   </text>
 </svg>

assets/logo-light.svg

@@ -7,6 +7,6 @@
     }
   </style>
   <text x="4" y="24" class="logo-text">
-    <tspan fill="#1A1A1A">d</tspan><tspan fill="#555555">gray</tspan>
+    <tspan fill="#059669">d</tspan><tspan fill="#555555">gray</tspan>
   </text>
 </svg>

css/variables.css

@@ -1,7 +1,7 @@
 :root {
     /* 
      * Monochrome Theme - dgray.io
-     * Pure grayscale, no colors
+     * Pure grayscale with neon green accent
      */
     
     /* Colors - Light Mode */
@@ -12,8 +12,8 @@
     --color-secondary: #777777;
     --color-secondary-hover: #5A5A5A;
     
-    --color-accent: #333333;
-    --color-accent-hover: #1A1A1A;
+    --color-accent: #059669;
+    --color-accent-hover: #047857;
     
     --color-success: #666666;
     --color-warning: #888888;
@@ -103,8 +103,8 @@
         --color-secondary: #909090;
         --color-secondary-hover: #A5A5A5;
         
-        --color-accent: #CCCCCC;
-        --color-accent-hover: #E0E0E0;
+        --color-accent: #10B981;
+        --color-accent-hover: #34D399;
         
         --color-success: #999999;
         --color-warning: #AAAAAA;
@@ -135,8 +135,8 @@
     --color-secondary: #909090;
     --color-secondary-hover: #A5A5A5;
     
-    --color-accent: #CCCCCC;
-    --color-accent-hover: #E0E0E0;
+    --color-accent: #10B981;
+    --color-accent-hover: #34D399;
     
     --color-success: #999999;
     --color-warning: #AAAAAA;
@@ -166,8 +166,8 @@
     --color-secondary: #777777;
     --color-secondary-hover: #5A5A5A;
     
-    --color-accent: #333333;
-    --color-accent-hover: #1A1A1A;
+    --color-accent: #059669;
+    --color-accent-hover: #047857;
     
     --color-success: #666666;
     --color-warning: #888888;

index.html

@@ -9,7 +9,8 @@
     <title>dgray.io</title>
     
     <link rel="manifest" href="manifest.json">
-    <link rel="icon" type="image/svg+xml" href="assets/icon.svg">
+    <link rel="icon" type="image/svg+xml" href="assets/icon-light.svg" media="(prefers-color-scheme: light)">
+    <link rel="icon" type="image/svg+xml" href="assets/icon-dark.svg" media="(prefers-color-scheme: dark)">
     <link rel="apple-touch-icon" href="assets/icons/icon-192.png">
     
     <!-- Preload Logo Font -->

js/components/listing-card.js

@@ -213,13 +213,13 @@ style.textContent = /* css */`
     }
     
     listing-card .favorite-btn.active .heart-icon {
-        fill: var(--color-error);
-        stroke: var(--color-error);
-        color: var(--color-error);
+        fill: var(--color-accent);
+        stroke: var(--color-accent);
+        color: var(--color-accent);
     }
     
     listing-card .favorite-btn:hover .heart-icon {
-        color: var(--color-error);
+        color: var(--color-accent);
     }
 `;
 document.head.appendChild(style);