diff --git a/src/styles/global.css b/src/styles/global.css
index f2d047b..f93035a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -34,7 +34,7 @@
     --color-neutral: hsl(var(--neutral));
     --color-neutral-foreground: hsl(var(--neutral-foreground));
     --color-background: hsl(var(--background));
-        --color-foreground: hsl(var(--foreground));
+    --color-foreground: hsl(var(--foreground));
         --color-card: hsl(var(--card));
         --color-card-foreground: hsl(var(--card-foreground));
         --color-popover: hsl(var(--popover));
@@ -43,4 +43,14 @@
         --color-muted-foreground: hsl(var(--muted-foreground));
         --color-border: hsl(var(--border));
         --color-input: hsl(var(--input));
+    --color-background-50: var(--background-50);
+        --color-background-100: var(--background-100);
+        --color-background-200: var(--background-200);
+        --color-background-300: var(--background-300);
+        --color-background-400: var(--background-400);
+        --color-background-500: var(--background-500);
+        --color-background-600: var(--background-600);
+        --color-background-700: var(--background-700);
+        --color-background-800: var(--background-800);
+        --color-background-900: var(--background-900);
 }
\ No newline at end of file
diff --git a/src/styles/style.css b/src/styles/style.css
index 2ccdd10..8618bc7 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -21,7 +21,7 @@
     --link: 221 83% 53%;
     --link-visited: 262 83% 58%;
     --background: 0 0% 100%;
-        --foreground: 222 47% 11%;
+    --foreground: 222 47% 11%;
         --card: 0 0% 100%;
         --card-foreground: 222 47% 11%;
         --popover: 0 0% 100%;
@@ -222,6 +222,7 @@
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
 }
+
 [data-color="neutral"] {
     --primary: 215 16% 47%;
     --primary-foreground: 210 40% 98%;
@@ -430,4 +431,31 @@
     --muted-foreground: 215 18% 74%;
     --border: 220 9% 23%;
     --input: 220 9% 23%;
+}
+/* Light: start from current background and mix toward black */
+:root {
+    --background-50: color-mix(in hsl, hsl(var(--background)) 99%, black 1%);
+    --background-100: color-mix(in hsl, hsl(var(--background)) 97%, black 3%);
+    --background-200: color-mix(in hsl, hsl(var(--background)) 94%, black 6%);
+    --background-300: color-mix(in hsl, hsl(var(--background)) 88%, black 12%);
+    --background-400: color-mix(in hsl, hsl(var(--background)) 80%, black 20%);
+    --background-500: color-mix(in hsl, hsl(var(--background)) 72%, black 28%);
+    --background-600: color-mix(in hsl, hsl(var(--background)) 60%, black 40%);
+    --background-700: color-mix(in hsl, hsl(var(--background)) 48%, black 52%);
+    --background-800: color-mix(in hsl, hsl(var(--background)) 36%, black 64%);
+    --background-900: color-mix(in hsl, hsl(var(--background)) 24%, black 76%);
+}
+
+/* Dark: start from current background and mix toward white */
+:root.dark {
+    --background-50: color-mix(in hsl, hsl(var(--background)) 24%, white 76%);
+    --background-100: color-mix(in hsl, hsl(var(--background)) 36%, white 64%);
+    --background-200: color-mix(in hsl, hsl(var(--background)) 48%, white 52%);
+    --background-300: color-mix(in hsl, hsl(var(--background)) 60%, white 40%);
+    --background-400: color-mix(in hsl, hsl(var(--background)) 72%, white 28%);
+    --background-500: color-mix(in hsl, hsl(var(--background)) 80%, white 20%);
+    --background-600: color-mix(in hsl, hsl(var(--background)) 88%, white 12%);
+    --background-700: color-mix(in hsl, hsl(var(--background)) 94%, white 6%);
+    --background-800: color-mix(in hsl, hsl(var(--background)) 97%, white 3%);
+    --background-900: color-mix(in hsl, hsl(var(--background)) 99%, white 1%);
 }
\ No newline at end of file