diff --git a/src/css/globals.css b/src/css/globals.css
index 5fa456e..4511cad 100644
--- a/src/css/globals.css
+++ b/src/css/globals.css
@@ -1,81 +1,38 @@
 :root {
-    --color-primary: var(--color-neutral-200);
-    --color-secondary: var(--color-neutral-800);
-    --color-decoration: var(--color-amber-200);
-    --color-subtle: var(--color-neutral-300);
-    --color-disabled: var(--color-neutral-400);
-    --color-accent: var(--color-zinc-600);
+    --color-primary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+    --color-secondary: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+    --color-decoration: light-dark(var(--color-yellow-400), var(--color-amber-200));
+    --color-subtle: light-dark(var(--color-zinc-600), var(--color-neutral-300));
+    --color-disabled: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+    --color-accent: light-dark(var(--color-zinc-400), var(--color-zinc-600));
+
+    --color-callout-bg: light-dark(var(--color-slate-300), var(--color-slate-800));
+    --color-callout-border: light-dark(var(--color-coolGray-400), var(--color-coolGray-600));
+    color-scheme: light dark;
 
-    --color-callout-bg: var(--color-slate-800);
-    --color-callout-border: var(--color-coolGray-600);
 }
 
 .inverse {
-    --color-secondary: var(--color-neutral-100);
-    --color-primary: var(--color-neutral-800);
-    --color-decoration: var(--color-yellow-400);
-    --color-subtle: var(--color-zinc-600);
-    --color-disabled: var(--color-neutral-600);
-    --color-accent: var(--color-zinc-400);
-    --color-callout-bg: var(--color-slate-300);
-    --color-callout-border: var(--color-coolGray-400);
+    color-scheme: light;
 }
 
 @media (prefers-color-scheme: light) {
-    :root {
-        --color-secondary: var(--color-neutral-100);
-        --color-primary: var(--color-neutral-800);
-        --color-decoration: var(--color-yellow-400);
-        --color-subtle: var(--color-zinc-600);
-        --color-disabled: var(--color-neutral-600);
-        --color-accent: var(--color-zinc-400);
-        --color-callout-bg: var(--color-slate-300);
-        --color-callout-border: var(--color-coolGray-400);
-    }
-
+    
     .inverse {
-        --color-primary: var(--color-neutral-200);
-        --color-secondary: var(--color-neutral-800);
-        --color-decoration: var(--color-amber-200);
-        --color-subtle: var(--color-zinc-400);
-        --color-disabled: var(--color-neutral-400);
-        --color-accent: var(--color-zinc-600);
-        --color-callout-bg: var(--color-slate-800);
-        --color-callout-border: var(--color-coolGray-600);
+       color-scheme: dark;
     }
 }
 
 [data-color-scheme="light"] {
-    --color-secondary: var(--color-neutral-100);
-    --color-primary: var(--color-neutral-800);
-    --color-decoration: var(--color-yellow-400);
-    --color-subtle: var(--color-zinc-600);
-    --color-disabled: var(--color-neutral-600);
-    --color-accent: var(--color-zinc-600);
-    --color-callout-bg: var(--color-slate-300);
-    --color-callout-border: var(--color-coolGray-400);
+    color-scheme: light;
 }
 
 [data-color-scheme="light"] .inverse {
-    --color-primary: var(--color-neutral-200);
-    --color-secondary: var(--color-neutral-800);
-    --color-decoration: var(--color-amber-200);
-    --color-subtle: var(--color-neutral-300);
-    --color-disabled: var(--color-neutral-400);
-    --color-accent: var(--color-zinc-400);
-    --color-callout-bg: var(--color-slate-800);
-    --color-callout-border: var(--color-coolGray-600);
+    color-scheme: dark;
 }
 
 [data-color-scheme="dark"] {
-    --color-primary: var(--color-neutral-200);
-    --color-secondary: var(--color-neutral-800);
-    --color-decoration: var(--color-amber-200);
-    --color-subtle: var(--color-neutral-300);
-    --color-disabled: var(--color-neutral-400);
-    --color-accent: var(--color-zinc-600);
-    --color-callout-bg: var(--color-slate-800);
-    --color-callout-border: var(--color-coolGray-600);
+    color-scheme: dark;
 }
 
 body {