diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3ab6024..68c2cd0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,20 +21,20 @@ const config: Config = {
           800: '#075985',
           900: '#0c4a6e',
         },
-        'bg-primary': '#1a1b26',
-        'bg-secondary': '#16161e', 
-        'text-primary': '#a9b1d6',
-        'text-secondary': '#565f89',
-        'accent': '#7aa2f7',
-        'border': '#414868',
+        'bg-primary': 'var(--bg-primary)',
+        'bg-secondary': 'var(--bg-secondary)',
+        'text-primary': 'var(--text-primary)',
+        'text-secondary': 'var(--text-secondary)',
+        'accent': 'var(--accent)',
+        'border': 'var(--border)',
       },
       typography: ({ theme }) => ({
         invert: {
           css: {
-            '--tw-prose-pre-bg': theme('colors.background.secondary'),
+            '--tw-prose-pre-bg': 'var(--bg-secondary)',
             code: {
-              backgroundColor: theme('colors.background.primary'),
-              color: theme('colors.text.primary'),
+              backgroundColor: 'var(--bg-primary)',
+              color: 'var(--text-primary)',
               fontWeight: '400',
             },
             'code::before': {
@@ -48,8 +48,8 @@ const config: Config = {
               color: 'inherit',
             },
             pre: {
-              backgroundColor: theme('colors.background.secondary'),
-              color: theme('colors.text.primary'),
+              backgroundColor: 'var(--bg-secondary)',
+              color: 'var(--text-primary)',
             },
           },
         },
diff --git a/web/static/input.css b/web/static/input.css
index 2a9c10d..eaaac13 100644
--- a/web/static/input.css
+++ b/web/static/input.css
@@ -17,7 +17,7 @@
     --bg-primary: #1a1b26;
     --bg-secondary: #16161e;
     --text-primary: #a9b1d6;
-    --text-secondary: #565f89;
+    --text-secondary: #9aa5ce;
     --accent: #7aa2f7;
     --border: #414868;
   }