diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index d6890c7..8b691ee 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -15,7 +15,7 @@ const attributes = Astro.props;
     </head>
     <body
         class={cn(
-            "wr:bg-white wr:dark:bg-background wr:text-black wr:dark:text-white",
+            "wr:bg-white wr:dark:bg-background-800 wr:text-black wr:dark:text-white",
             attributes.class,
         )}
         {...attributes}
diff --git a/src/styles/global.css b/src/styles/global.css
index 2061481..58a5cde 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -36,22 +36,22 @@
     --color-foreground: hsl(var(--foreground));
     --color-card: hsl(var(--card));
     --color-card-foreground: hsl(var(--card-foreground));
-        --color-popover: hsl(var(--popover));
+    --color-popover: hsl(var(--popover));
         --color-popover-foreground: hsl(var(--popover-foreground));
         --color-muted: hsl(var(--muted));
         --color-muted-foreground: hsl(var(--muted-foreground));
         --color-border: hsl(var(--border));
         --color-input: hsl(var(--input));
-    --color-background: var(--background);
-    --color-background-0: var(--background-default);
+    --color-background: hsl(var(--background));
     --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-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);
+    --color-background-950: var(--background-950);
 }
\ No newline at end of file
diff --git a/src/styles/style.css b/src/styles/style.css
index 26f84f6..cea2ca1 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -27,10 +27,21 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222 47% 11%;
     --muted: 220 14% 96%;
-        --muted-foreground: 215 16% 46%;
+    --muted-foreground: 215 16% 46%;
         --border: 214 31% 91%;
         --input: 214 31% 91%;
         --ring: 221 83% 53%;
+    --background-50: hsl(230.8 86.7% 97.1%);
+        --background-100: hsl(231.7 87.9% 93.5%);
+        --background-200: hsl(230 90.9% 87.1%);
+        --background-300: hsl(230 90% 80.4%);
+        --background-400: hsl(228.3 89.8% 73.1%);
+        --background-500: hsl(225.5 89.9% 64.9%);
+        --background-600: hsl(221 83.3% 53.1%);
+        --background-700: hsl(221.2 75.7% 40.4%);
+        --background-800: hsl(221.1 79.9% 27.3%);
+        --background-900: hsl(221.1 88% 16.3%);
+        --background-950: hsl(223.2 89.3% 11%);
 }
 
 /* ---------- Brand palettes (swap only role colors) ---------- */
@@ -53,6 +64,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(212.5 100% 95.3%);
+        --background-100: hsl(210.7 100% 91.2%);
+        --background-200: hsl(208.4 97.9% 81%);
+        --background-300: hsl(203.5 98.9% 65.1%);
+        --background-400: hsl(199 89.3% 47.8%);
+        --background-500: hsl(199.2 91.1% 39.6%);
+        --background-600: hsl(199.2 93.6% 30.8%);
+        --background-700: hsl(199.5 95% 23.5%);
+        --background-800: hsl(200.3 97.6% 16.1%);
+        --background-900: hsl(202 96.1% 10%);
+        --background-950: hsl(203.2 100% 6.1%);
 }
 
 /* forest */
@@ -74,6 +96,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(132.3 95.7% 91%);
+        --background-100: hsl(135.4 98.4% 75.9%);
+        --background-200: hsl(141.7 81% 54.5%);
+        --background-300: hsl(141.7 68% 47.8%);
+        --background-400: hsl(141.8 69.5% 41.2%);
+        --background-500: hsl(141.7 70.9% 35.1%);
+        --background-600: hsl(141.8 73.9% 27.1%);
+        --background-700: hsl(142 78.2% 19.8%);
+        --background-800: hsl(141.1 85.1% 13.1%);
+        --background-900: hsl(136.4 89.2% 7.3%);
+        --background-950: hsl(133 92% 4.9%);
 }
 
 /* sunset */
@@ -95,6 +128,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(6.7 81.8% 95.7%);
+        --background-100: hsl(6.5 86% 91.6%);
+        --background-200: hsl(7.1 86.4% 82.7%);
+        --background-300: hsl(8.9 88.9% 71.8%);
+        --background-400: hsl(14 90% 57.1%);
+        --background-500: hsl(13.9 68.9% 46.7%);
+        --background-600: hsl(14 71.1% 36.7%);
+        --background-700: hsl(14 73.8% 28.4%);
+        --background-800: hsl(14.4 79.8% 19.4%);
+        --background-900: hsl(12 86.2% 11.4%);
+        --background-950: hsl(8.6 89.7% 7.6%);
 }
 
 /* grape */
@@ -116,6 +160,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(254.3 84% 95.1%);
+        --background-100: hsl(253.2 83.7% 90.4%);
+        --background-200: hsl(255 85.7% 80.8%);
+        --background-300: hsl(257.1 84% 70.6%);
+        --background-400: hsl(261.9 83.2% 58%);
+        --background-500: hsl(263.9 71% 48.6%);
+        --background-600: hsl(264.1 73.1% 39.4%);
+        --background-700: hsl(263.9 74.7% 31%);
+        --background-800: hsl(264.1 79.3% 22.7%);
+        --background-900: hsl(263.2 86.1% 14.1%);
+        --background-950: hsl(261.7 88.7% 10.4%);
 }
 
 /* slate (low-chroma) */
@@ -137,6 +192,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 216 10% 40%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(220 29% 93.9%);
+        --background-100: hsl(219 32.3% 87.8%);
+        --background-200: hsl(218 33.3% 75.9%);
+        --background-300: hsl(215.2 33% 62.5%);
+        --background-400: hsl(215.3 20% 50%);
+        --background-500: hsl(214.9 20.2% 41.8%);
+        --background-600: hsl(215 21.4% 32.9%);
+        --background-700: hsl(216.4 21.5% 25.5%);
+        --background-800: hsl(217.1 23.6% 17.5%);
+        --background-900: hsl(216 27.3% 10.8%);
+        --background-950: hsl(218.2 35.5% 6.1%);
 }
 
 /* mint */
@@ -158,6 +224,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(149.4 95.9% 90.4%);
+        --background-100: hsl(152.1 98.2% 77.6%);
+        --background-200: hsl(158 83.6% 57.1%);
+        --background-300: hsl(157.7 65.6% 51%);
+        --background-400: hsl(158 64.2% 44.9%);
+        --background-500: hsl(158 65.8% 36.7%);
+        --background-600: hsl(158 68.1% 28.2%);
+        --background-700: hsl(157.9 71.7% 20.8%);
+        --background-800: hsl(158.6 80% 13.7%);
+        --background-900: hsl(156.4 89.2% 7.3%);
+        --background-950: hsl(152.7 91.7% 4.7%);
 }
 
 /* amber */
@@ -179,6 +256,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(26.7 100% 96.5%);
+        --background-100: hsl(25.7 94.6% 92.7%);
+        --background-200: hsl(28.1 97.5% 84.5%);
+        --background-300: hsl(32.1 98.6% 72.2%);
+        --background-400: hsl(38.1 93.9% 54.9%);
+        --background-500: hsl(38.1 79% 44.9%);
+        --background-600: hsl(37.9 80.9% 34.9%);
+        --background-700: hsl(38 84.8% 25.9%);
+        --background-800: hsl(37.2 90.8% 17.1%);
+        --background-900: hsl(35.7 92.2% 10%);
+        --background-950: hsl(33.1 93.5% 6.1%);
 }
 
 /* crimson */
@@ -200,6 +288,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(357 83.3% 95.3%);
+        --background-100: hsl(355.5 83.3% 90.6%);
+        --background-200: hsl(355.7 85.6% 81%);
+        --background-300: hsl(354.6 88.1% 70.4%);
+        --background-400: hsl(350.2 85.2% 55.1%);
+        --background-500: hsl(349.9 70.9% 45.9%);
+        --background-600: hsl(350.2 72.2% 36.7%);
+        --background-700: hsl(350.4 75.7% 27.5%);
+        --background-800: hsl(350 81.3% 18.8%);
+        --background-900: hsl(352.2 87.1% 12.2%);
+        --background-950: hsl(354.9 89.7% 7.6%);
 }
 
 /* indigo */
@@ -221,6 +320,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+    --background-50: hsl(234.5 91.7% 95.3%);
+        --background-100: hsl(235.9 91.7% 90.6%);
+        --background-200: hsl(235.7 89.2% 81.8%);
+        --background-300: hsl(234.4 90.2% 72%);
+        --background-400: hsl(231.1 89.2% 60%);
+        --background-500: hsl(228.2 78.6% 50.6%);
+        --background-600: hsl(228.1 78.6% 40.4%);
+        --background-700: hsl(228.2 81.5% 31.8%);
+        --background-800: hsl(228.5 86.1% 22.5%);
+        --background-900: hsl(229.7 89.7% 15.3%);
+        --background-950: hsl(231.6 92.6% 10.6%);
 }
 
 [data-color="neutral"] {
@@ -241,6 +351,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 215 16% 47%;
     --neutral-foreground: 210 40% 98%;
+--background-50: hsl(217.5 25% 93.7%);
+    --background-100: hsl(218.8 24.6% 86.5%);
+    --background-200: hsl(215.7 27% 73.1%);
+    --background-300: hsl(215 24% 60.8%);
+    --background-400: hsl(214.7 15.8% 47.1%);
+    --background-500: hsl(214.5 16.4% 39.4%);
+    --background-600: hsl(214.6 16.7% 30.6%);
+    --background-700: hsl(214.3 17.6% 23.3%);
+    --background-800: hsl(216 18.1% 16.3%);
+    --background-900: hsl(212.7 22.4% 9.6%);
+    --background-950: hsl(217.5 26.7% 5.9%);
 }
 
 [data-color="gray"] {
@@ -261,6 +382,17 @@
     --danger-foreground: 0 0% 100%;
     --neutral: 220 10% 40%;
     --neutral-foreground: 210 40% 98%;
+--color-background-50: hsl(225 10.5% 92.5%);
+    --color-background-100: hsl(220 12.7% 86.1%);
+    --color-background-200: hsl(220 12.9% 72.5%);
+    --color-background-300: hsl(219.2 12.6% 59.6%);
+    --color-background-400: hsl(220 8.9% 46.1%);
+    --color-background-500: hsl(218.8 8.7% 38.2%);
+    --color-background-600: hsl(222.9 9% 30.6%);
+    --color-background-700: hsl(220 10.2% 23.1%);
+    --color-background-800: hsl(220 10.8% 16.3%);
+    --color-background-900: hsl(220 12% 9.8%);
+    --color-background-950: hsl(225 13.3% 5.9%);
 }
 
 /* =======================
@@ -431,39 +563,4 @@
     --muted-foreground: 215 18% 74%;
     --border: 220 9% 23%;
     --input: 220 9% 23%;
-}
-
-/* Light: base from primary, then darken toward black */
-[data-color]:not(.dark [data-color]) {
-    --bg-tint: 4%;
-    --background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), white);
-    --background: var(--background-default);
---background-50: color-mix(in hsl, var(--background-default) 99%, black 1%);
-    --background-100: color-mix(in hsl, var(--background-default) 97%, black 3%);
-    --background-200: color-mix(in hsl, var(--background-default) 94%, black 6%);
-    --background-300: color-mix(in hsl, var(--background-default) 88%, black 12%);
-    --background-400: color-mix(in hsl, var(--background-default) 80%, black 20%);
-    --background-500: color-mix(in hsl, var(--background-default) 72%, black 28%);
-    --background-600: color-mix(in hsl, var(--background-default) 60%, black 40%);
-    --background-700: color-mix(in hsl, var(--background-default) 48%, black 52%);
-    --background-800: color-mix(in hsl, var(--background-default) 36%, black 64%);
-    --background-900: color-mix(in hsl, var(--background-default) 24%, black 76%);
-}
-
-/* Dark: base from primary as well (tint toward black), then lighten toward white */
-.dark [data-color],
-:root.dark [data-color] {
-    --background-default: color-mix(in hsl, hsl(var(--primary)) var(--bg-tint), black);
-    --background: var(--background-default);
-    
-        --background-50: color-mix(in hsl, var(--background-default) 24%, white 76%);
-        --background-100: color-mix(in hsl, var(--background-default) 36%, white 64%);
-        --background-200: color-mix(in hsl, var(--background-default) 48%, white 52%);
-        --background-300: color-mix(in hsl, var(--background-default) 60%, white 40%);
-        --background-400: color-mix(in hsl, var(--background-default) 72%, white 28%);
-        --background-500: color-mix(in hsl, var(--background-default) 80%, white 20%);
-        --background-600: color-mix(in hsl, var(--background-default) 88%, white 12%);
-        --background-700: color-mix(in hsl, var(--background-default) 94%, white 6%);
-        --background-800: color-mix(in hsl, var(--background-default) 97%, white 3%);
-        --background-900: color-mix(in hsl, var(--background-default) 99%, white 1%);
 }
\ No newline at end of file
