diff --git a/css/variables.css b/css/variables.css
index 3970f41..04f6ff6 100644
--- a/css/variables.css
+++ b/css/variables.css
@@ -1,37 +1,37 @@
 :root {
     /* 
-     * Lavender Light + Deep Purple Dark
-     * WCAG AAA konform (Kontrast > 7:1)
+     * Warm Gray Theme - dgray.io
+     * WCAG AA konform (Kontrast > 4.5:1)
      */
     
     /* Colors - Light Mode */
-    --color-primary: #6B5B95;
-    --color-primary-hover: #574A7A;
-    --color-primary-light: #E8E4F0;
+    --color-primary: #6B7B8C;
+    --color-primary-hover: #56656F;
+    --color-primary-light: #E5E8EB;
     
-    --color-secondary: #9B8AA6;
-    --color-secondary-hover: #7D6E8A;
+    --color-secondary: #8A9299;
+    --color-secondary-hover: #6E777D;
     
-    --color-accent: #A67B9E;
-    --color-accent-hover: #8A6283;
+    --color-accent: #A67C52;
+    --color-accent-hover: #8B6543;
     
     --color-success: #5A8F6B;
     --color-warning: #C49A3C;
     --color-error: #B54747;
     
-    --color-bg: #FAF8FC;
-    --color-bg-secondary: #F3F0F7;
-    --color-bg-tertiary: #EBE6F2;
+    --color-bg: #F8F7F5;
+    --color-bg-secondary: #F0EFEC;
+    --color-bg-tertiary: #E5E3DF;
     
-    --color-text: #2A2633;
-    --color-text-secondary: #524A5E;
-    --color-text-muted: #8A8295;
+    --color-text: #2D2D2A;
+    --color-text-secondary: #525250;
+    --color-text-muted: #8A8985;
     
-    --color-border: #DDD8E6;
-    --color-border-focus: #6B5B95;
+    --color-border: #D5D3CE;
+    --color-border-focus: #6B7B8C;
     
-    --color-shadow: rgba(42, 38, 51, 0.1);
-    --color-overlay: rgba(42, 38, 51, 0.5);
+    --color-shadow: rgba(45, 45, 42, 0.1);
+    --color-overlay: rgba(45, 45, 42, 0.5);
     
     /* Spacing */
     --space-xs: 0.25rem;
@@ -96,30 +96,30 @@
 /* Dark Mode - System Preference */
 @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {
-        --color-primary: #B8A5D6;
-        --color-primary-hover: #C9BAE3;
-        --color-primary-light: #2D2440;
+        --color-primary: #9AABBB;
+        --color-primary-hover: #B0BEC9;
+        --color-primary-light: #2A2D30;
         
-        --color-secondary: #A699B8;
-        --color-secondary-hover: #BAAFCA;
+        --color-secondary: #A0A8AE;
+        --color-secondary-hover: #B5BCC1;
         
-        --color-accent: #C9A5C4;
-        --color-accent-hover: #D9BAD5;
+        --color-accent: #C9A378;
+        --color-accent-hover: #D9B88E;
         
         --color-success: #7CB88A;
         --color-warning: #D4B05C;
         --color-error: #D47070;
         
-        --color-bg: #1A1424;
-        --color-bg-secondary: #252033;
-        --color-bg-tertiary: #312A42;
+        --color-bg: #1E1D1B;
+        --color-bg-secondary: #28272A;
+        --color-bg-tertiary: #343230;
         
-        --color-text: #F5F2FA;
-        --color-text-secondary: #D4CCDF;
-        --color-text-muted: #9A90A8;
+        --color-text: #F5F4F2;
+        --color-text-secondary: #D0CFCC;
+        --color-text-muted: #9A9895;
         
-        --color-border: #3D3550;
-        --color-border-focus: #B8A5D6;
+        --color-border: #454340;
+        --color-border-focus: #9AABBB;
         
         --color-shadow: rgba(0, 0, 0, 0.4);
         --color-overlay: rgba(0, 0, 0, 0.6);
@@ -128,30 +128,30 @@
 
 /* Dark Mode - Manual Override */
 [data-theme="dark"] {
-    --color-primary: #B8A5D6;
-    --color-primary-hover: #C9BAE3;
-    --color-primary-light: #2D2440;
+    --color-primary: #9AABBB;
+    --color-primary-hover: #B0BEC9;
+    --color-primary-light: #2A2D30;
     
-    --color-secondary: #A699B8;
-    --color-secondary-hover: #BAAFCA;
+    --color-secondary: #A0A8AE;
+    --color-secondary-hover: #B5BCC1;
     
-    --color-accent: #C9A5C4;
-    --color-accent-hover: #D9BAD5;
+    --color-accent: #C9A378;
+    --color-accent-hover: #D9B88E;
     
     --color-success: #7CB88A;
     --color-warning: #D4B05C;
     --color-error: #D47070;
     
-    --color-bg: #1A1424;
-    --color-bg-secondary: #252033;
-    --color-bg-tertiary: #312A42;
+    --color-bg: #1E1D1B;
+    --color-bg-secondary: #28272A;
+    --color-bg-tertiary: #343230;
     
-    --color-text: #F5F2FA;
-    --color-text-secondary: #D4CCDF;
-    --color-text-muted: #9A90A8;
+    --color-text: #F5F4F2;
+    --color-text-secondary: #D0CFCC;
+    --color-text-muted: #9A9895;
     
-    --color-border: #3D3550;
-    --color-border-focus: #B8A5D6;
+    --color-border: #454340;
+    --color-border-focus: #9AABBB;
     
     --color-shadow: rgba(0, 0, 0, 0.4);
     --color-overlay: rgba(0, 0, 0, 0.6);
@@ -159,31 +159,31 @@
 
 /* Light Mode - Manual Override */
 [data-theme="light"] {
-    --color-primary: #6B5B95;
-    --color-primary-hover: #574A7A;
-    --color-primary-light: #E8E4F0;
+    --color-primary: #6B7B8C;
+    --color-primary-hover: #56656F;
+    --color-primary-light: #E5E8EB;
     
-    --color-secondary: #9B8AA6;
-    --color-secondary-hover: #7D6E8A;
+    --color-secondary: #8A9299;
+    --color-secondary-hover: #6E777D;
     
-    --color-accent: #A67B9E;
-    --color-accent-hover: #8A6283;
+    --color-accent: #A67C52;
+    --color-accent-hover: #8B6543;
     
     --color-success: #5A8F6B;
     --color-warning: #C49A3C;
     --color-error: #B54747;
     
-    --color-bg: #FAF8FC;
-    --color-bg-secondary: #F3F0F7;
-    --color-bg-tertiary: #EBE6F2;
+    --color-bg: #F8F7F5;
+    --color-bg-secondary: #F0EFEC;
+    --color-bg-tertiary: #E5E3DF;
     
-    --color-text: #2A2633;
-    --color-text-secondary: #524A5E;
-    --color-text-muted: #8A8295;
+    --color-text: #2D2D2A;
+    --color-text-secondary: #525250;
+    --color-text-muted: #8A8985;
     
-    --color-border: #DDD8E6;
-    --color-border-focus: #6B5B95;
+    --color-border: #D5D3CE;
+    --color-border-focus: #6B7B8C;
     
-    --color-shadow: rgba(42, 38, 51, 0.1);
-    --color-overlay: rgba(42, 38, 51, 0.5);
+    --color-shadow: rgba(45, 45, 42, 0.1);
+    --color-overlay: rgba(45, 45, 42, 0.5);
 }