diff --git a/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx b/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx
index 1345fc3e93..b5e1bdcf8f 100644
--- a/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx
+++ b/www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx
@@ -39,7 +39,7 @@ const SecurityDescription = ({
         {getSecuritySchemaTypeName(securitySchema)}
       </p>
       {(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
-        <p className={clsx("bg-docs-bg-surface", "p-1")}>
+        <p className={clsx("bg-medusa-bg-subtle", "p-1")}>
           <strong>
             {securitySchema.type === "http"
               ? "HTTP Authorization Scheme"
diff --git a/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx b/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx
index 56db8bfeab..ba79ebf6f9 100644
--- a/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx
+++ b/www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx
@@ -12,7 +12,7 @@ const TagsOperationParametersNested = ({
       {...props}
       className={clsx(
         props.className,
-        "bg-docs-bg-surface px-1 pt-1",
+        "bg-medusa-bg-subtle px-1 pt-1",
         "border-medusa-border-base my-1 rounded-sm border"
       )}
     >
diff --git a/www/apps/ui/src/components/component-example.tsx b/www/apps/ui/src/components/component-example.tsx
index f06e4f135e..6b1aa1082d 100644
--- a/www/apps/ui/src/components/component-example.tsx
+++ b/www/apps/ui/src/components/component-example.tsx
@@ -44,7 +44,7 @@ export function ComponentExample({
           >
             <div
               className={clx(
-                "bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
+                "bg-medusa-bg-base border-medusa-border-base flex max-h-[400px] min-h-[400px]",
                 "w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
               )}
             >
diff --git a/www/packages/docs-ui/src/components/Bordered/index.tsx b/www/packages/docs-ui/src/components/Bordered/index.tsx
index ebe6723d0d..f598f8f96a 100644
--- a/www/packages/docs-ui/src/components/Bordered/index.tsx
+++ b/www/packages/docs-ui/src/components/Bordered/index.tsx
@@ -9,8 +9,8 @@ export const Bordered = ({ wrapperClassName, children }: BorderedProps) => {
   return (
     <span
       className={clsx(
-        "border-medusa-border-strong bg-docs-bg",
-        "dark:bg-docs-bg-dark mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
+        "border-medusa-border-strong bg-medusa-bg-base",
+        "mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
         "no-zoom-img",
         wrapperClassName
       )}
diff --git a/www/packages/docs-ui/src/components/LearningPath/index.tsx b/www/packages/docs-ui/src/components/LearningPath/index.tsx
index e9d87564e3..ae3d2cf1e8 100644
--- a/www/packages/docs-ui/src/components/LearningPath/index.tsx
+++ b/www/packages/docs-ui/src/components/LearningPath/index.tsx
@@ -35,7 +35,7 @@ export const LearningPath = ({
   return (
     <div
       className={clsx(
-        "rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark bg-docs-bg-surface mt-docs_1.5 mb-docs_4",
+        "rounded shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark bg-medusa-bg-subtle mt-docs_1.5 mb-docs_4",
         className
       )}
     >
diff --git a/www/packages/tailwind/base.tailwind.config.js b/www/packages/tailwind/base.tailwind.config.js
index 36d42dbcd4..ec37502293 100644
--- a/www/packages/tailwind/base.tailwind.config.js
+++ b/www/packages/tailwind/base.tailwind.config.js
@@ -186,43 +186,36 @@ module.exports = {
             },
           },
         },
-        /* docs defaults */
-        docs: {
-          bg: {
-            DEFAULT: "var(--docs-bg)",
-            surface: "var(--docs-bg-surface)",
-          },
-        },
       },
       boxShadow: {
         "elevation-card-rest":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
         "elevation-card-rest-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
         "elevation-card-hover":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1)",
         "elevation-card-hover-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
         "elevation-tooltip":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
         "elevation-tooltip-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
         "elevation-flyout":
           "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
         "elevation-flyout-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
         "elevation-modal":
           "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
         "elevation-modal-dark":
-          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
+          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
         "button-neutral":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
         "button-neutral-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
         "button-neutral-focused":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
         "button-neutral-focused-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
         "button-danger":
           "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 1)",
         "button-danger-dark":
@@ -241,15 +234,15 @@ module.exports = {
           "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
 
         "elevation-code-block":
-          "0px 0px 0px 1px #18181B inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.20) inset",
+          "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
         "elevation-code-block-dark":
-          "0px 0px 0px 1px #27272A inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.10) inset",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
         active: "0px 0px 0px 3px #E1F0FF",
         "active-dark": "0px 0px 0px 3px #2C2250",
         "border-base":
           "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
         "border-base-dark":
-          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px #18181B, 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+          "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
       },
       borderRadius: {
         xxs: "2px",
@@ -323,128 +316,128 @@ module.exports = {
       },
       fontSize: {
         h1: [
-          "32px",
+          "2rem",
           {
-            lineHeight: "44px",
+            lineHeight: "2.75rem",
             fontWeight: "500",
           },
         ],
         h2: [
-          "24px",
+          "1.5rem",
           {
-            lineHeight: "32px",
+            lineHeight: "2rem",
             fontWeight: "500",
           },
         ],
         h3: [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.75rem",
             fontWeight: "500",
           },
         ],
         h4: [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-large-plus": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-large": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-medium-plus": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-medium": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-small-plus": [
-          "13px",
+          "0.8125rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-small": [
-          "13px",
+          "0.8125rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "compact-x-small-plus": [
-          "12px",
+          "0.75rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "500",
           },
         ],
         "compact-x-small": [
-          "13px",
+          "0.75rem",
           {
-            lineHeight: "20px",
+            lineHeight: "1.25rem",
             fontWeight: "400",
           },
         ],
         "x-large-plus": [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "32px",
+            lineHeight: "1.6875rem",
             fontWeight: "500",
           },
         ],
         "x-large": [
-          "18px",
+          "1.125rem",
           {
-            lineHeight: "32px",
+            lineHeight: "1.6875rem",
             fontWeight: "400",
           },
         ],
         "large-plus": [
-          "16px",
+          "1rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.5rem",
             fontWeight: "500",
           },
         ],
         large: [
-          "16px",
+          "1rem",
           {
-            lineHeight: "28px",
+            lineHeight: "1.5rem",
             fontWeight: "400",
           },
         ],
         "medium-plus": [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "24px",
+            lineHeight: "1.3125rem",
             fontWeight: "500",
           },
         ],
         medium: [
-          "14px",
+          "0.875rem",
           {
-            lineHeight: "24px",
+            lineHeight: "1.3125rem",
             fontWeight: "400",
           },
         ],
@@ -458,7 +451,7 @@ module.exports = {
         "code-body": [
           "12px",
           {
-            lineHeight: "22px",
+            lineHeight: "18px",
             fontWeight: "400",
           },
         ],
diff --git a/www/packages/tailwind/theme-presets.js b/www/packages/tailwind/theme-presets.js
index f0cf3b5edf..ed3bf8cac7 100644
--- a/www/packages/tailwind/theme-presets.js
+++ b/www/packages/tailwind/theme-presets.js
@@ -11,7 +11,7 @@ const light = {
   "--docs-bg-switch-off": "rgba(228, 228, 231, 1)",
   "--docs-bg-switch-off-hover": "rgba(212, 212, 216, 1)",
   "--docs-bg-interactive": "rgba(59, 130, 246, 1)",
-  "--docs-bg-overlay": "rgba(9, 9, 11, 0.4)",
+  "--docs-bg-overlay": "rgba(24, 24, 27, 0.4)",
   "--docs-bg-disabled": "rgba(244, 244, 245, 1)",
   "--docs-bg-highlight": "rgba(239, 246, 255, 1)",
   "--docs-bg-highlight-hover": "rgba(219, 234, 254, 1)",
@@ -20,7 +20,7 @@ const light = {
   "--docs-bg-field-component": "rgba(255, 255, 255, 1)",
   "--docs-bg-field-component-hover": "rgba(250, 250, 250, 1)",
 
-  "--docs-fg-base": "rgba(9, 9, 11, 1)",
+  "--docs-fg-base": "rgba(24, 24, 27, 1)",
   "--docs-fg-subtle": "rgba(82, 82, 91, 1)",
   "--docs-fg-muted": "rgba(161, 161, 170, 1)",
   "--docs-fg-disabled": "rgba(212, 212, 216, 1)",
@@ -59,12 +59,12 @@ const light = {
   "--docs-tags-purple-bg": "rgba(237, 233, 254, 1)",
   "--docs-tags-purple-bg-hover": "rgba(221, 214, 254, 1)",
   "--docs-tags-purple-text": "rgba(91, 33, 182, 1)",
-  "--docs-tags-purple-icon": "rgba(139, 92, 246, 1)",
+  "--docs-tags-purple-icon": "rgba(167, 139, 250, 1)",
   "--docs-tags-purple-border": "rgba(221, 214, 254, 1)",
   "--docs-tags-blue-bg": "rgba(219, 234, 254, 1)",
   "--docs-tags-blue-bg-hover": "rgba(191, 219, 254, 1)",
   "--docs-tags-blue-text": "rgba(30, 64, 175, 1)",
-  "--docs-tags-blue-icon": "rgba(59, 130, 246, 1)",
+  "--docs-tags-blue-icon": "rgba(96, 165, 250, 1)",
   "--docs-tags-blue-border": "rgba(191, 219, 254, 1)",
   "--docs-tags-green-bg": "rgba(209, 250, 229, 1)",
   "--docs-tags-green-bg-hover": "rgba(167, 243, 208, 1)",
@@ -72,7 +72,7 @@ const light = {
   "--docs-tags-green-icon": "rgba(16, 185, 129, 1)",
   "--docs-tags-green-border": "rgba(167, 243, 208, 1)",
   "--docs-tags-orange-bg": "rgba(255, 237, 213, 1)",
-  "--docs-tags-orange-bg-hover": "rgba(253, 230, 138, 1)",
+  "--docs-tags-orange-bg-hover": "rgba(254, 215, 170, 1)",
   "--docs-tags-orange-text": "rgba(154, 52, 18, 1)",
   "--docs-tags-orange-icon": "rgba(249, 115, 22, 1)",
   "--docs-tags-orange-border": "rgba(254, 215, 170, 1)",
@@ -88,9 +88,6 @@ const light = {
   "--docs-code-bg-header": "rgba(31, 41, 55, 1)",
   "--docs-code-border": "rgba(55, 65, 81, 1)",
 
-  "--docs-bg": "var(--docs-bg-base)",
-  "--docs-bg-surface": "var(--docs-bg-subtle)",
-
   "--docs-contrast-bg-base": "rgba(24, 24, 27, 1)",
   "--docs-contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
   "--docs-contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
@@ -105,31 +102,33 @@ const light = {
 }
 
 const dark = {
-  "--docs-bg-base": "rgba(24, 24, 27, 1)",
+  "--docs-bg-base": "rgba(33, 33, 36, 1)",
   "--docs-bg-base-hover": "rgba(39, 39, 42, 1)",
   "--docs-bg-base-pressed": "rgba(63, 63, 70, 1)",
-  "--docs-bg-subtle": "rgba(9, 9, 11, 1)",
-  "--docs-bg-subtle-hover": "rgba(24, 24, 27, 1)",
-  "--docs-bg-subtle-pressed": "rgba(63, 63, 70, 1)",
+  "--docs-bg-subtle": "rgba(24, 24, 27, 1)",
+  "--docs-bg-subtle-hover": "rgba(33, 33, 36, 1)",
+  "--docs-bg-subtle-pressed": "rgba(39, 39, 42, 1)",
   "--docs-bg-component": "rgba(39, 39, 42, 1)",
   "--docs-bg-component-pressed": "rgba(255, 255, 255, 0.16)",
   "--docs-bg-component-hover": "rgba(255, 255, 255, 0.1)",
   "--docs-bg-switch-off": "rgba(63, 63, 70, 1)",
   "--docs-bg-switch-off-hover": "rgba(82, 82, 91, 1)",
   "--docs-bg-interactive": "rgba(96, 165, 250, 1)",
-  "--docs-bg-overlay": "rgba(9, 9, 11, 0.72)",
+  "--docs-bg-overlay": "rgba(24, 24, 27, 0.72)",
   "--docs-bg-disabled": "rgba(39, 39, 42, 1)",
   "--docs-bg-highlight": "rgba(23, 37, 84, 1)",
   "--docs-bg-highlight-hover": "rgba(30, 58, 138, 1)",
   "--docs-bg-field": "rgba(255, 255, 255, 0.04)",
   "--docs-bg-field-hover": "rgba(255, 255, 255, 0.08)",
+  "--docs-bg-field-component": "rgba(33, 33, 36, 1)",
+  "--docs-bg-field-component-hover": "rgba(39, 39, 42, 1)",
 
   "--docs-fg-base": "rgba(244, 244, 245, 1)",
   "--docs-fg-subtle": "rgba(161, 161, 170, 1)",
   "--docs-fg-muted": "rgba(113, 113, 122, 1)",
   "--docs-fg-disabled": "rgba(82, 82, 91, 1)",
   "--docs-fg-on-color": "rgba(255, 255, 255, 1)",
-  "--docs-fg-on-inverted": "rgba(9, 9, 11, 1)",
+  "--docs-fg-on-inverted": "rgba(24, 24, 27, 1)",
   "--docs-fg-interactive": "rgba(96, 165, 250, 1)",
   "--docs-fg-interactive-hover": "rgba(147, 197, 253, 1)",
   "--docs-fg-error": "rgba(251, 113, 133, 1)",
@@ -145,28 +144,28 @@ const dark = {
   "--docs-button-inverted": "rgba(82, 82, 91, 1)",
   "--docs-button-inverted-hover": "rgba(113, 113, 122, 1)",
   "--docs-button-inverted-pressed": "rgba(161, 161, 170, 1)",
-  "--docs-button-neutral": "rgba(39, 39, 42, 1)",
-  "--docs-button-neutral-hover": "rgba(63, 63, 70, 1)",
-  "--docs-button-neutral-pressed": "rgba(82, 82, 91, 1)",
+  "--docs-button-neutral": "rgba(255, 255, 255, 0.04)",
+  "--docs-button-neutral-hover": "rgba(255, 255, 255, 0.08)",
+  "--docs-button-neutral-pressed": "rgba(255, 255, 255, 0.12)",
   "--docs-button-danger": "rgba(159, 18, 57, 1)",
   "--docs-button-danger-hover": "rgba(190, 18, 60, 1)",
   "--docs-button-danger-pressed": "rgba(225, 29, 72, 1)",
   "--docs-button-transparent": "rgba(255, 255, 255, 0)",
-  "--docs-button-transparent-hover": "rgba(39, 39, 42, 1)",
-  "--docs-button-transparent-pressed": "rgba(63, 63, 70, 1)",
+  "--docs-button-transparent-hover": "rgba(255, 255, 255, 0.08)",
+  "--docs-button-transparent-pressed": "rgba(255, 255, 255, 0.12)",
 
   "--docs-tags-neutral-bg": "rgba(255, 255, 255, 0.08)",
-  "--docs-tags-neutral-bg-hover": "rgba(63, 63, 70, 1)",
+  "--docs-tags-neutral-bg-hover": "rgba(255, 255, 255, 0.12)",
   "--docs-tags-neutral-text": "rgba(212, 212, 216, 1)",
   "--docs-tags-neutral-icon": "rgba(113, 113, 122, 1)",
-  "--docs-tags-neutral-border": "rgba(63, 63, 70, 1)",
+  "--docs-tags-neutral-border": "rgba(255, 255, 255, 0.06)",
   "--docs-tags-purple-bg": "rgba(46, 16, 101, 1)",
-  "--docs-tags-purple-bg-hover": "rgba(76, 29, 149, 1)",
+  "--docs-tags-purple-bg-hover": "rgba(91, 33, 182, 1)",
   "--docs-tags-purple-text": "rgba(196, 181, 253, 1)",
   "--docs-tags-purple-icon": "rgba(167, 139, 250, 1)",
   "--docs-tags-purple-border": "rgba(91, 33, 182, 1)",
   "--docs-tags-blue-bg": "rgba(23, 37, 84, 1)",
-  "--docs-tags-blue-bg-hover": "rgba(30, 42, 138, 1)",
+  "--docs-tags-blue-bg-hover": "rgba(30, 58, 138, 1)",
   "--docs-tags-blue-text": "rgba(147, 197, 253, 1)",
   "--docs-tags-blue-icon": "rgba(96, 165, 250, 1)",
   "--docs-tags-blue-border": "rgba(30, 58, 138, 1)",
@@ -176,7 +175,7 @@ const dark = {
   "--docs-tags-green-icon": "rgba(16, 185, 129, 1)",
   "--docs-tags-green-border": "rgba(6, 78, 59, 1)",
   "--docs-tags-orange-bg": "rgba(67, 20, 7, 1)",
-  "--docs-tags-orange-bg-hover": "rgba(120, 53, 15, 1)",
+  "--docs-tags-orange-bg-hover": "rgba(124, 45, 18, 1)",
   "--docs-tags-orange-text": "rgba(253, 186, 116, 1)",
   "--docs-tags-orange-icon": "rgba(251, 146, 60, 1)",
   "--docs-tags-orange-border": "rgba(124, 45, 18, 1)",
@@ -192,12 +191,9 @@ const dark = {
   "--docs-code-bg-header": "rgba(24, 24, 26, 1)",
   "--docs-code-border": "rgba(46, 48, 53, 1)",
 
-  "--docs-bg": "var(--docs-bg-subtle)",
-  "--docs-bg-surface": "var(--docs-bg-base)",
-
   "--docs-contrast-bg-base": "rgba(39, 39, 42, 1)",
-  "--docs-contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
-  "--docs-contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
+  "--docs-contrast-bg-base-pressed": "rgba(82, 82, 91, 1)",
+  "--docs-contrast-bg-base-hover": "rgba(63, 63, 70, 1)",
   "--docs-contrast-bg-subtle": "rgba(47, 47, 50, 1)",
   "--docs-contrast-bg-highlight": "rgba(82, 82, 91, 1)",
   "--docs-contrast-bg-alpha": "rgba(63, 63, 70, 0.9)",