diff --git a/__tests__/components/GetStartedButton.test.tsx b/__tests__/components/GetStartedButton.test.tsx
index bd39910..f6d7dd2 100644
--- a/__tests__/components/GetStartedButton.test.tsx
+++ b/__tests__/components/GetStartedButton.test.tsx
@@ -44,7 +44,7 @@ describe('GetStartedButton Component', () => {
     render(<GetStartedButton variant="frosted" />)
 
     const button = screen.getByRole('link', { name: /get started/i })
-    expect(button).toHaveClass('bg-white/80', 'dark:bg-gray-900/80')
+    expect(button).toHaveClass('bg-theme-primary-opacity-80')
     expect(button).toHaveClass('backdrop-blur-xl', 'backdrop-saturate-150')
     expect(button).toHaveClass('font-semibold')
   })
diff --git a/src/app/docs/cli/getting-started/page.tsx b/src/app/docs/cli/getting-started/page.tsx
index d340365..ba279a1 100644
--- a/src/app/docs/cli/getting-started/page.tsx
+++ b/src/app/docs/cli/getting-started/page.tsx
@@ -47,7 +47,7 @@ export default function QuickStartPage() {
         {/* Prerequisites */}
         <AnimatedSection direction="up" delay={100}>
           <div className="mb-12">
-            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6 bg-white dark:bg-gray-900">
+            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6 bg-theme-primary">
               <div className="flex items-baseline gap-3 mb-4">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0">
                   <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/cli/migration-0-3-2/page.tsx b/src/app/docs/cli/migration-0-3-2/page.tsx
index 1f53ce4..7ac729e 100644
--- a/src/app/docs/cli/migration-0-3-2/page.tsx
+++ b/src/app/docs/cli/migration-0-3-2/page.tsx
@@ -77,7 +77,7 @@ export default async function MigrationPage() {
         <AnimatedSection direction="up" delay={50}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -105,7 +105,7 @@ export default async function MigrationPage() {
         <AnimatedSection direction="up" delay={200}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-violet-600 via-purple-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <div className="flex items-baseline gap-3 mb-6 sm:mb-8">
                   <div className="p-3 bg-gradient-to-br from-violet-100 to-purple-100 dark:from-violet-900/30 dark:to-purple-900/30 rounded-xl flex-shrink-0 -mt-0.5">
                     <svg className="w-6 h-6 sm:w-7 sm:h-7 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/cli/page.tsx b/src/app/docs/cli/page.tsx
index e6c1892..20c6e1c 100644
--- a/src/app/docs/cli/page.tsx
+++ b/src/app/docs/cli/page.tsx
@@ -30,7 +30,7 @@ export default function LogicStampContextDocsPage() {
         <AnimatedSection direction="up" delay={100}>
           <div className="relative mb-8 sm:mb-12">
             <div className="absolute -inset-1 bg-gradient-to-r from-green-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/frameworks/page.tsx b/src/app/docs/frameworks/page.tsx
index 690f20b..da08beb 100644
--- a/src/app/docs/frameworks/page.tsx
+++ b/src/app/docs/frameworks/page.tsx
@@ -54,7 +54,7 @@ export default function FrameworksIndexPage() {
         <AnimatedSection direction="up" delay={100}>
           <div className="relative mb-8 sm:mb-12">
             <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/getting-started/page.tsx b/src/app/docs/getting-started/page.tsx
index 5073bd6..53a182a 100644
--- a/src/app/docs/getting-started/page.tsx
+++ b/src/app/docs/getting-started/page.tsx
@@ -32,7 +32,7 @@ export default function GettingStartedPage() {
         {/* Prerequisites */}
         <AnimatedSection direction="up" delay={100}>
           <div className="mb-12">
-            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6 bg-white dark:bg-gray-900">
+            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6 bg-theme-primary">
               <div className="flex items-baseline gap-3 mb-4">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0">
                   <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -70,7 +70,7 @@ export default function GettingStartedPage() {
               <p className={`text-sm ${docsBodyTextClass} mb-3`}>Try it now (no install required):</p>
               <div className="relative">
                 <CopyButton text="npx logicstamp-context context" className="absolute top-2 right-2" />
-                <code className="block text-gray-900 dark:text-gray-100 font-mono text-sm p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg">
+                <code className="block text-gray-900 dark:text-gray-100 font-mono text-sm p-4 bg-theme-primary border border-gray-200 dark:border-gray-700 rounded-lg">
                   npx logicstamp-context context
                 </code>
               </div>
diff --git a/src/app/docs/guides/best-practices/page.tsx b/src/app/docs/guides/best-practices/page.tsx
index 251e0eb..9213a93 100644
--- a/src/app/docs/guides/best-practices/page.tsx
+++ b/src/app/docs/guides/best-practices/page.tsx
@@ -32,7 +32,7 @@ export default function BestPracticesPage() {
           <AnimatedSection direction="up" delay={100}>
             <div className="relative">
               <div className="absolute -inset-1 bg-gradient-to-r from-amber-500 to-pink-500 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-amber-200 dark:border-amber-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-amber-200 dark:border-amber-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3 sm:mb-4">
                   Use the Right Context Files in Prompts
                 </h2>
@@ -84,7 +84,7 @@ export default function BestPracticesPage() {
           <AnimatedSection direction="up" delay={200}>
             <div className="relative">
               <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-blue-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3 sm:mb-4">
                   Keep Context Fresh After Refactors
                 </h2>
@@ -140,7 +140,7 @@ export default function BestPracticesPage() {
           <AnimatedSection direction="up" delay={300}>
             <div className="relative">
               <div className="absolute -inset-1 bg-gradient-to-r from-emerald-600 to-teal-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3 sm:mb-4">
                   Choose the Right Code Inclusion Mode
                 </h2>
@@ -251,7 +251,7 @@ export default function BestPracticesPage() {
           <AnimatedSection direction="up" delay={325}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3 sm:mb-4">
                   Use Compare Modes Before Generating Context
                 </h2>
@@ -315,7 +315,7 @@ export default function BestPracticesPage() {
           <AnimatedSection direction="up" delay={400}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-red-600 to-orange-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                   <div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                     <svg className="w-5 h-5 sm:w-6 sm:h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -407,7 +407,7 @@ export default function BestPracticesPage() {
           <AnimatedSection direction="up" delay={500}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3 sm:mb-4">
                   Integrate LogicStamp Into Your Workflow
                 </h2>
diff --git a/src/app/docs/guides/llm-context/page.tsx b/src/app/docs/guides/llm-context/page.tsx
index ecaaeef..373b3a3 100644
--- a/src/app/docs/guides/llm-context/page.tsx
+++ b/src/app/docs/guides/llm-context/page.tsx
@@ -60,7 +60,7 @@ export default function LlmContextPage() {
             <AnimatedSection direction="up" delay={100}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -116,7 +116,7 @@ export default function LlmContextPage() {
             <AnimatedSection direction="up" delay={200}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -157,7 +157,7 @@ export default function LlmContextPage() {
             <AnimatedSection direction="up" delay={250}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-green-600 to-emerald-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -213,7 +213,7 @@ export default function LlmContextPage() {
             <AnimatedSection direction="up" delay={300}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-blue-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -260,7 +260,7 @@ export default function LlmContextPage() {
             <AnimatedSection direction="up" delay={350}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-amber-600 to-orange-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -301,7 +301,7 @@ export default function LlmContextPage() {
             <AnimatedSection direction="up" delay={400}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-teal-600 to-cyan-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/guides/page.tsx b/src/app/docs/guides/page.tsx
index a7573ea..0f352c6 100644
--- a/src/app/docs/guides/page.tsx
+++ b/src/app/docs/guides/page.tsx
@@ -64,7 +64,7 @@ export default function GuidesHomePage() {
         <AnimatedSection direction="up" delay={100}>
           <div className="relative mb-8 sm:mb-12">
             <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/guides/usage/page.tsx b/src/app/docs/guides/usage/page.tsx
index b76d702..adc44f1 100644
--- a/src/app/docs/guides/usage/page.tsx
+++ b/src/app/docs/guides/usage/page.tsx
@@ -61,7 +61,7 @@ export default function UsagePage() {
         <AnimatedSection direction="up" delay={100}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -144,7 +144,7 @@ stamp context
         <AnimatedSection direction="up" delay={200}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -203,7 +203,7 @@ stamp security --hard-reset [options]  # Reset security configuration`
         <AnimatedSection direction="up" delay={250}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-blue-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -226,7 +226,7 @@ stamp security --hard-reset [options]  # Reset security configuration`
                       <th className="px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Description</th>
                     </tr>
                   </thead>
-                  <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+                  <tbody className="bg-theme-primary divide-y divide-gray-200 dark:divide-gray-700">
                     <tr className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                       <td className="px-2 sm:px-6 py-4 whitespace-nowrap">
                         <code className="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded text-xs sm:text-sm font-mono">--version</code>
@@ -274,7 +274,7 @@ stamp -h           # Same as --help`
         <AnimatedSection direction="up" delay={275}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-teal-600 to-cyan-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -305,7 +305,7 @@ stamp -h           # Same as --help`
                         <th className="px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Description</th>
                       </tr>
                     </thead>
-                    <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+                    <tbody className="bg-theme-primary divide-y divide-gray-200 dark:divide-gray-700">
                       <tr className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                         <td className="px-2 sm:px-6 py-4 whitespace-nowrap">
                           <code className="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded text-xs sm:text-sm font-mono">--quiet</code>
@@ -387,7 +387,7 @@ stamp ignore src/secrets.ts --quiet`
         <AnimatedSection direction="up" delay={300}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-green-600 to-emerald-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -441,7 +441,7 @@ stamp ignore src/secrets.ts --quiet`
         <AnimatedSection direction="up" delay={450}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-orange-600 to-red-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -480,7 +480,7 @@ stamp ignore src/secrets.ts --quiet`
         <AnimatedSection direction="up" delay={550}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-pink-600 to-purple-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-pink-100 dark:bg-pink-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -590,7 +590,7 @@ stamp context style --include-code header`
         <AnimatedSection direction="up" delay={600}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-cyan-600 to-sky-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-cyan-100 dark:bg-cyan-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -675,7 +675,7 @@ stamp context style --strict-watch`,
         <AnimatedSection direction="up" delay={650}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -725,7 +725,7 @@ stamp context --compare-modes
         <AnimatedSection direction="up" delay={750}>
           <div className="relative mb-8 sm:mb-12 lg:mb-16">
             <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/mcp/getting-started/page.tsx b/src/app/docs/mcp/getting-started/page.tsx
index 61036d6..b0ef35d 100644
--- a/src/app/docs/mcp/getting-started/page.tsx
+++ b/src/app/docs/mcp/getting-started/page.tsx
@@ -31,7 +31,7 @@ export default function MCPInstallationPage() {
         {/* Prerequisites */}
         <AnimatedSection direction="up" delay={100}>
           <div className="mb-12">
-            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6 bg-white dark:bg-gray-900">
+            <div className="border border-gray-200 dark:border-gray-800 rounded-xl p-6 bg-theme-primary">
               <div className="flex items-baseline gap-3 mb-4">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex-shrink-0">
                   <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/mcp/page.tsx b/src/app/docs/mcp/page.tsx
index e402c34..6ff2283 100644
--- a/src/app/docs/mcp/page.tsx
+++ b/src/app/docs/mcp/page.tsx
@@ -71,7 +71,7 @@ export default function MCPPage() {
           <AnimatedSection direction="up" delay={100}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                   <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                     <svg className="w-5 h-5 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/mcp/profiles/page.tsx b/src/app/docs/mcp/profiles/page.tsx
index 805ad0a..d0b0800 100644
--- a/src/app/docs/mcp/profiles/page.tsx
+++ b/src/app/docs/mcp/profiles/page.tsx
@@ -47,7 +47,7 @@ export default function MCPProfilesPage() {
           <AnimatedSection direction="up" delay={100}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
                   What are Profiles?
                 </h2>
@@ -256,7 +256,7 @@ export default function MCPProfilesPage() {
           <AnimatedSection direction="up" delay={600}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
                   Choosing a Profile
                 </h2>
diff --git a/src/app/docs/mcp/reference/page.tsx b/src/app/docs/mcp/reference/page.tsx
index 7b1cd90..69800c0 100644
--- a/src/app/docs/mcp/reference/page.tsx
+++ b/src/app/docs/mcp/reference/page.tsx
@@ -47,7 +47,7 @@ export default function MCPReferencePage() {
           <AnimatedSection direction="up" delay={100}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
                   Overview
                 </h2>
@@ -510,7 +510,7 @@ export default function MCPReferencePage() {
           <AnimatedSection direction="up" delay={600}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4 sm:mb-6">
                   Parameters Reference
                 </h2>
diff --git a/src/app/docs/mcp/style-metadata/page.tsx b/src/app/docs/mcp/style-metadata/page.tsx
index cb49c17..434c6a1 100644
--- a/src/app/docs/mcp/style-metadata/page.tsx
+++ b/src/app/docs/mcp/style-metadata/page.tsx
@@ -46,7 +46,7 @@ export default function MCPStyleMetadataPage() {
           <AnimatedSection direction="up" delay={100}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
                   What is Style Metadata?
                 </h2>
diff --git a/src/app/docs/mcp/usage/page.tsx b/src/app/docs/mcp/usage/page.tsx
index 4fda1c4..bd1b049 100644
--- a/src/app/docs/mcp/usage/page.tsx
+++ b/src/app/docs/mcp/usage/page.tsx
@@ -362,7 +362,7 @@ export default function MCPUsagePage() {
           <AnimatedSection direction="up" delay={500}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4">
                   Key Principles
                 </h2>
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx
index c3aae9b..59fab9e 100644
--- a/src/app/docs/page.tsx
+++ b/src/app/docs/page.tsx
@@ -262,7 +262,7 @@ export default function DocsHomePage() {
           <div className="relative mb-8 sm:mb-12">
             <div className="absolute inset-0 bg-gradient-to-br from-green-100 via-emerald-50 to-teal-50 dark:from-green-950/20 dark:via-emerald-950/10 dark:to-teal-950/5 rounded-3xl blur-2xl opacity-50" />
             
-            <div className="relative bg-white dark:bg-gray-900 border-2 border-green-200 dark:border-green-800 rounded-3xl p-6 sm:p-8 lg:p-10 shadow-2xl">
+            <div className="relative bg-theme-primary border-2 border-green-200 dark:border-green-800 rounded-3xl p-6 sm:p-8 lg:p-10 shadow-2xl">
               <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 sm:mb-6">
                 Open Source & Community
               </h2>
diff --git a/src/app/docs/reference/page.tsx b/src/app/docs/reference/page.tsx
index 0949a26..f02bb21 100644
--- a/src/app/docs/reference/page.tsx
+++ b/src/app/docs/reference/page.tsx
@@ -31,7 +31,7 @@ export default function ReferencePage() {
           <AnimatedSection direction="up" delay={50}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-violet-600 to-blue-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                   <div className="p-2 bg-violet-100 dark:bg-violet-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                     <svg className="w-5 h-5 sm:w-6 sm:h-6 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -70,7 +70,7 @@ export default function ReferencePage() {
           <AnimatedSection direction="up" delay={100}>
             <div className="relative mb-8 sm:mb-12 lg:mb-16">
               <div className="absolute -inset-1 bg-gradient-to-r from-amber-600 to-orange-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-              <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+              <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
                 <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                   <div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                     <svg className="w-5 h-5 sm:w-6 sm:h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/docs/ui-frameworks/page.tsx b/src/app/docs/ui-frameworks/page.tsx
index a4df275..7d21de6 100644
--- a/src/app/docs/ui-frameworks/page.tsx
+++ b/src/app/docs/ui-frameworks/page.tsx
@@ -57,7 +57,7 @@ export default function UIFrameworksIndexPage() {
         <AnimatedSection direction="up" delay={100}>
           <div className="relative mb-8 sm:mb-12">
             <div className="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-            <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+            <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
               <div className="flex items-baseline gap-3 mb-4 sm:mb-6">
                 <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex-shrink-0 -mt-0.5">
                   <svg className="w-5 h-5 sm:w-6 sm:h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/app/roadmap/page.tsx b/src/app/roadmap/page.tsx
index 4161fe7..2db06b0 100644
--- a/src/app/roadmap/page.tsx
+++ b/src/app/roadmap/page.tsx
@@ -41,7 +41,7 @@ export default async function BetaPage() {
               </div>
 
               {/* Badge */}
-              <div className="inline-flex items-center gap-2 px-5 py-2.5 bg-white/90 dark:bg-gray-900/90 text-gray-700 dark:text-gray-300 text-sm font-bold rounded-full mb-8 sm:mb-10 border border-gray-200/70 dark:border-gray-700/70 shadow-lg">
+              <div className="inline-flex items-center gap-2 px-5 py-2.5 bg-theme-primary-opacity-90 text-gray-700 dark:text-gray-300 text-sm font-bold rounded-full mb-8 sm:mb-10 border border-gray-200/70 dark:border-gray-700/70 shadow-lg">
                 <svg className="h-7 w-7 sm:h-8 sm:w-8" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
                 </svg>
diff --git a/src/components/common/GitHubStats.tsx b/src/components/common/GitHubStats.tsx
index 69f9230..320ece0 100644
--- a/src/components/common/GitHubStats.tsx
+++ b/src/components/common/GitHubStats.tsx
@@ -162,7 +162,7 @@ export default function GitHubStats() {
           {statItems.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col items-center p-4 rounded-xl bg-white/80 dark:bg-gray-900/80 border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.08)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]"
+              className="flex flex-col items-center p-4 rounded-xl bg-theme-primary-opacity-80 border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.08)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]"
             >
               <div className={`p-2.5 rounded-lg ${item.bgColor} ${item.color} mb-3`}>
                 {item.icon}
diff --git a/src/components/docs/DocsHeader.tsx b/src/components/docs/DocsHeader.tsx
index 1562090..e5f196c 100644
--- a/src/components/docs/DocsHeader.tsx
+++ b/src/components/docs/DocsHeader.tsx
@@ -185,7 +185,7 @@ export default function DocsHeader({
         }`}
       >
         <div className="mx-auto max-w-[1440px] px-4 lg:px-6">
-          <div className="relative overflow-hidden bg-white/60 dark:bg-gray-900/60 rounded-2xl border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
+          <div className="relative overflow-hidden bg-theme-primary-opacity-60 rounded-2xl border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
             {/* Subtle gradient overlay */}
             <div className="absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent dark:from-white/5 dark:via-transparent dark:to-transparent pointer-events-none" />
             <div className="relative flex items-center gap-2 py-1 px-4">
@@ -265,7 +265,7 @@ export default function DocsHeader({
           }}
         >
           <div className="mx-auto max-w-[1440px] px-4 lg:px-6">
-            <div className="relative overflow-hidden bg-white/80 dark:bg-gray-900/80 rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 max-h-[50vh] overflow-y-auto">
+            <div className="relative overflow-hidden bg-theme-primary-opacity-80 rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 max-h-[50vh] overflow-y-auto">
               {/* Subtle gradient overlay */}
               <div className="absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent dark:from-white/5 dark:via-transparent dark:to-transparent pointer-events-none" />
               <nav className="relative px-4 py-3 space-y-1">
diff --git a/src/components/docs/DocsSidebar.tsx b/src/components/docs/DocsSidebar.tsx
index 6cf880f..021754a 100644
--- a/src/components/docs/DocsSidebar.tsx
+++ b/src/components/docs/DocsSidebar.tsx
@@ -543,7 +543,7 @@ export default function DocsSidebar({ onOpenSearch }: DocsSidebarProps = {}) {
           >
             <Search className="w-4 h-4 shrink-0 opacity-70" aria-hidden />
             <span className="flex-1 truncate">Search docs…</span>
-            <kbd className="hidden sm:inline text-[10px] font-sans text-gray-400 dark:text-gray-500 px-1 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900">
+            <kbd className="hidden sm:inline text-[10px] font-sans text-gray-400 dark:text-gray-500 px-1 rounded border border-gray-200 dark:border-gray-600 bg-theme-primary">
               ⌘K
             </kbd>
           </button>
diff --git a/src/components/docs/ExpandableSection.tsx b/src/components/docs/ExpandableSection.tsx
index 4be2040..cb25e9a 100644
--- a/src/components/docs/ExpandableSection.tsx
+++ b/src/components/docs/ExpandableSection.tsx
@@ -20,7 +20,7 @@ export default function ExpandableSection({
   return (
     <div className="relative mb-8 sm:mb-12 lg:mb-16">
       <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl blur opacity-20 dark:opacity-10" />
-      <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
+      <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl">
         <button
           onClick={() => setIsOpen(!isOpen)}
           className="w-full flex items-center justify-between gap-3 mb-4 sm:mb-6 focus:outline-none group"
diff --git a/src/components/docs/ReadyToGetStartedCard.tsx b/src/components/docs/ReadyToGetStartedCard.tsx
index 59b075d..d4aae23 100644
--- a/src/components/docs/ReadyToGetStartedCard.tsx
+++ b/src/components/docs/ReadyToGetStartedCard.tsx
@@ -60,7 +60,7 @@ export default function ReadyToGetStartedCard({
   return (
     <AnimatedSection direction="up" delay={delay}>
       <div className="relative mt-8 sm:mt-10 lg:mt-12 mb-6 sm:mb-8 lg:mb-10">
-        <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-lg">
+        <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-lg">
           <div className="flex flex-col lg:flex-row items-start lg:items-center gap-4 sm:gap-6">
             <div className="flex-shrink-0">
               <div className={`w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-gradient-to-br ${styles.iconBg} flex items-center justify-center shadow-md`}>
diff --git a/src/components/docs/TabbedInstallation.tsx b/src/components/docs/TabbedInstallation.tsx
index fb8803f..6dd5247 100644
--- a/src/components/docs/TabbedInstallation.tsx
+++ b/src/components/docs/TabbedInstallation.tsx
@@ -12,7 +12,7 @@ export default function TabbedInstallation() {
   return (
     <div className="flex flex-col items-start">
       {/* Tabs */}
-      <div className="mb-4 flex items-center gap-2 bg-white/50 dark:bg-gray-900/50 rounded-lg p-1 ring-1 ring-gray-300/50 dark:ring-gray-700/50">
+      <div className="mb-4 flex items-center gap-2 bg-theme-primary-opacity-50 rounded-lg p-1 ring-1 ring-gray-300/50 dark:ring-gray-700/50">
         <button
           onClick={() => setActiveTab('cli')}
           className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
@@ -38,7 +38,7 @@ export default function TabbedInstallation() {
       {/* Install command */}
       <div className="relative group w-full">
         <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-300"></div>
-        <div className="relative inline-flex items-center gap-3 rounded-xl bg-white dark:bg-gray-900 px-6 sm:px-8 py-4 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50 w-full">
+        <div className="relative inline-flex items-center gap-3 rounded-xl bg-theme-primary px-6 sm:px-8 py-4 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50 w-full">
           <span className="text-base font-bold text-purple-600 dark:text-purple-400" aria-label="Command prompt">
             $
           </span>
diff --git a/src/components/features/Demo.tsx b/src/components/features/Demo.tsx
index e7e4379..218a770 100644
--- a/src/components/features/Demo.tsx
+++ b/src/components/features/Demo.tsx
@@ -100,7 +100,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ userId, onUpdate }) =>
   }, [userId, isAuthenticated]);
   
   return (
-    <div className="flex flex-col gap-4 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-md">
+    <div className="flex flex-col gap-4 p-6 bg-theme-primary rounded-lg shadow-md">
       {user && (
         <div className="flex items-center gap-3">
           <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
@@ -1110,7 +1110,7 @@ export default function Demo() {
               </div>
             )}
 
-            <div className="min-w-0 bg-white dark:bg-gray-900 rounded-2xl shadow-2xl ring-1 ring-gray-200/50 dark:ring-gray-800/50 overflow-hidden">
+            <div className="min-w-0 bg-theme-primary rounded-2xl shadow-2xl ring-1 ring-gray-200/50 dark:ring-gray-800/50 overflow-hidden">
               <div className="bg-gray-50 dark:bg-gray-800 px-6 py-3 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
                 <div className="flex items-center gap-3">
                   <Code2 className="w-4 h-4 text-green-400 flex-shrink-0" />
@@ -1336,17 +1336,17 @@ export default function Demo() {
               <div
                 className="grid grid-cols-3 gap-1.5 sm:gap-4 w-full max-w-full transition-all duration-500"
               >
-                <div className="bg-white dark:bg-gray-900 rounded-xl p-2 sm:p-4 text-center shadow-lg min-w-0 overflow-hidden">
+                <div className="bg-theme-primary rounded-xl p-2 sm:p-4 text-center shadow-lg min-w-0 overflow-hidden">
                   <Zap className="w-5 h-5 sm:w-8 sm:h-8 text-yellow-500 mx-auto mb-1 sm:mb-2" />
                   <div className="text-lg sm:text-2xl font-bold text-gray-900 dark:text-white truncate">78%</div>
                   <div className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 truncate">Size Reduction</div>
                 </div>
-                <div className="bg-white dark:bg-gray-900 rounded-xl p-2 sm:p-4 text-center shadow-lg min-w-0 overflow-hidden">
+                <div className="bg-theme-primary rounded-xl p-2 sm:p-4 text-center shadow-lg min-w-0 overflow-hidden">
                   <Package className="w-5 h-5 sm:w-8 sm:h-8 text-blue-500 mx-auto mb-1 sm:mb-2" />
                   <div className="text-lg sm:text-2xl font-bold text-gray-900 dark:text-white truncate">2.4KB</div>
                   <div className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 truncate">Bundle Size</div>
                 </div>
-                <div className="bg-white dark:bg-gray-900 rounded-xl p-2 sm:p-4 text-center shadow-lg min-w-0 overflow-hidden">
+                <div className="bg-theme-primary rounded-xl p-2 sm:p-4 text-center shadow-lg min-w-0 overflow-hidden">
                   <FileCode2 className="w-5 h-5 sm:w-8 sm:h-8 text-purple-500 mx-auto mb-1 sm:mb-2" />
                   <div className="text-lg sm:text-2xl font-bold text-gray-900 dark:text-white truncate">1,200</div>
                   <div className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 truncate">Tokens Saved</div>
@@ -1466,7 +1466,7 @@ export default function Demo() {
             </div>
 
             {/* Workflow Info */}
-            <div className="mt-6 bg-white dark:bg-gray-900 rounded-xl p-6 shadow-lg">
+            <div className="mt-6 bg-theme-primary rounded-xl p-6 shadow-lg">
               <div className="flex items-start gap-4">
                 <div className="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
                   <GitBranch className="w-6 h-6 text-white" />
@@ -1513,7 +1513,7 @@ export default function Demo() {
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
               <div className="relative">
-                <div className="relative inline-flex items-center gap-3 rounded-xl bg-white dark:bg-gray-900 px-6 sm:px-8 lg:px-10 py-4 sm:py-5 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
+                <div className="relative inline-flex items-center gap-3 rounded-xl bg-theme-primary px-6 sm:px-8 lg:px-10 py-4 sm:py-5 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
                   <span className="hidden sm:inline text-sm sm:text-base font-bold text-emerald-600 dark:text-emerald-400" aria-label="Command prompt">
                     $
                   </span>
@@ -1551,7 +1551,7 @@ export default function Demo() {
             <div className="flex flex-col items-center justify-center gap-4 mb-6">
               {/* CLI Installation */}
               <div className="relative">
-                <div className="relative inline-flex items-center gap-3 rounded-xl bg-white dark:bg-gray-900 px-6 sm:px-8 lg:px-10 py-4 sm:py-5 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
+                <div className="relative inline-flex items-center gap-3 rounded-xl bg-theme-primary px-6 sm:px-8 lg:px-10 py-4 sm:py-5 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
                   <span className="hidden sm:inline text-sm sm:text-base font-bold text-emerald-600 dark:text-emerald-400" aria-label="Command prompt">
                     $
                   </span>
@@ -1563,7 +1563,7 @@ export default function Demo() {
               </div>
               {/* MCP Installation */}
               <div className="relative">
-                <div className="relative inline-flex items-center gap-3 rounded-xl bg-white dark:bg-gray-900 px-6 sm:px-8 lg:px-10 py-4 sm:py-5 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
+                <div className="relative inline-flex items-center gap-3 rounded-xl bg-theme-primary px-6 sm:px-8 lg:px-10 py-4 sm:py-5 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
                   <span className="hidden sm:inline text-sm sm:text-base font-bold text-emerald-600 dark:text-emerald-400" aria-label="Command prompt">
                     $
                   </span>
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index e883447..8038591 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -229,7 +229,7 @@ export default function Footer() {
                     placeholder="your@email.com"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 transition-colors"
+                    className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-theme-primary text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-600 focus:border-gray-400 dark:focus:border-gray-600 transition-colors"
                     required
                     disabled={isSubmitting}
                   />
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 172ee69..8853318 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -84,7 +84,7 @@ export default function Header() {
     {/* Premium header container */}
     <header className="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
       <div className="mx-auto max-w-[1440px] px-4 lg:px-6 py-4 transition-all duration-300">
-        <div className="relative overflow-hidden rounded-2xl bg-white/60 dark:bg-gray-900/60 border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.3)] transition-all duration-300">
+        <div className="relative overflow-hidden rounded-2xl bg-theme-primary-opacity-60 border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.3)] transition-all duration-300">
           {/* Subtle gradient overlay */}
           <div className="absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent dark:from-white/5 dark:via-transparent dark:to-transparent pointer-events-none" />
 
@@ -195,7 +195,7 @@ export default function Header() {
       willChange: mounted ? 'transform' : 'auto'
     }}>
       <div className="mx-auto max-w-[1440px]">
-        <div className="relative overflow-hidden bg-white/80 dark:bg-gray-900/80 rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150">
+        <div className="relative overflow-hidden bg-theme-primary-opacity-80 rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150">
           {/* Subtle gradient overlay */}
           <div className="absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent dark:from-white/5 dark:via-transparent dark:to-transparent pointer-events-none" />
         <div className="relative px-6 py-6">
diff --git a/src/components/sections/CommunityCTA.tsx b/src/components/sections/CommunityCTA.tsx
index 98fe40c..961827b 100644
--- a/src/components/sections/CommunityCTA.tsx
+++ b/src/components/sections/CommunityCTA.tsx
@@ -2,7 +2,7 @@ import { ctaInvertedPrimaryClasses } from '../ui/ctaInvertedPrimaryClasses'
 
 /** Matches ReadTheDocsButton `variant="secondary"` (frosted panel + ring). */
 const secondaryCtaClassName =
-  'inline-flex items-center gap-2 px-4 sm:px-6 py-2.5 sm:py-3 rounded-lg text-sm sm:text-base font-semibold bg-white/80 dark:bg-gray-900/80 text-gray-900 dark:text-white shadow-lg hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 backdrop-blur-xl backdrop-saturate-150 transition-all duration-200 whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600'
+  'inline-flex items-center gap-2 px-4 sm:px-6 py-2.5 sm:py-3 rounded-lg text-sm sm:text-base font-semibold bg-theme-primary-opacity-80 text-gray-900 dark:text-white shadow-lg hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 backdrop-blur-xl backdrop-saturate-150 transition-all duration-200 whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600'
 
 export default function CommunityCTA() {
   return (
diff --git a/src/components/sections/Features.tsx b/src/components/sections/Features.tsx
index 2b74cf6..4e460bb 100644
--- a/src/components/sections/Features.tsx
+++ b/src/components/sections/Features.tsx
@@ -697,7 +697,7 @@ $ stamp context clean
               className={`px-4 py-2 text-xs sm:text-sm lg:text-base rounded-full transition-all duration-300 whitespace-nowrap flex-shrink-0 font-medium ${
                 currentDemo === index
                 ? `${ctaInvertedPrimaryClasses} scale-105`
-                  : 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm text-gray-700 dark:text-gray-300 border border-gray-200/50 dark:border-gray-700/50'
+                  : 'bg-theme-primary-opacity-80 backdrop-blur-sm text-gray-700 dark:text-gray-300 border border-gray-200/50 dark:border-gray-700/50'
               }`}
             >
               {demo.title}
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index 51eb507..f296b5c 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -121,7 +121,7 @@ export default function Hero() {
             >
               <div className="flex flex-col items-start">
                 {/* Tabs */}
-                <div className="mb-4 flex items-center gap-2 bg-white/50 dark:bg-gray-900/50 rounded-lg p-1 ring-1 ring-gray-300/50 dark:ring-gray-700/50">
+                <div className="mb-4 flex items-center gap-2 bg-theme-primary-opacity-50 rounded-lg p-1 ring-1 ring-gray-300/50 dark:ring-gray-700/50">
                   <button
                     onClick={() => setActiveTab('cli')}
                     className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
@@ -146,7 +146,7 @@ export default function Hero() {
                 
                 {/* Install command */}
                 <div className="relative">
-                  <div className="relative inline-flex items-center gap-3 rounded-xl bg-white dark:bg-gray-900 px-8 py-4 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
+                  <div className="relative inline-flex items-center gap-3 rounded-xl bg-theme-primary px-8 py-4 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
                     <span className="text-base font-bold text-emerald-600 dark:text-emerald-400" aria-label="Command prompt">
                       $
                     </span>
@@ -191,7 +191,7 @@ export default function Hero() {
                 >
                   <a
                     href="/docs/mcp"
-                  className="inline-flex items-center gap-2 lg:gap-2.5 rounded-full bg-white/80 dark:bg-gray-900/80 px-5 py-2 lg:px-7 lg:py-3 text-base lg:text-lg font-semibold text-gray-900 dark:text-white shadow-lg lg:hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 lg:hover:ring-gray-400 dark:lg:hover:ring-gray-500 backdrop-blur-xl backdrop-saturate-150 transition-all duration-200 lg:hover:-translate-y-0.5"
+                  className="inline-flex items-center gap-2 lg:gap-2.5 rounded-full bg-theme-primary-opacity-80 px-5 py-2 lg:px-7 lg:py-3 text-base lg:text-lg font-semibold text-gray-900 dark:text-white shadow-lg lg:hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 lg:hover:ring-gray-400 dark:lg:hover:ring-gray-500 backdrop-blur-xl backdrop-saturate-150 transition-all duration-200 lg:hover:-translate-y-0.5"
                   >
                     <svg className={`h-5 w-5 lg:h-6 lg:w-6 text-gray-700 dark:text-gray-300 transition-transform duration-200 ${mcpHovered ? 'lg:rotate-[15deg]' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
@@ -207,8 +207,8 @@ export default function Hero() {
                   >
                     <div className="relative">
                       {/* Arrow - pointing left */}
-                      <div className="absolute -top-2 left-8 w-4 h-4 bg-white dark:bg-gray-900 border-t border-l rotate-45 border-gray-200 dark:border-gray-700 rotate-45"></div>
-                      <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl p-4 backdrop-blur-xl">
+                      <div className="absolute -top-2 left-8 w-4 h-4 bg-theme-primary border-t border-l rotate-45 border-gray-200 dark:border-gray-700 rotate-45"></div>
+                      <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl p-4 backdrop-blur-xl">
                         <div className="flex items-start gap-3">
                           <div className="flex-shrink-0 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
                             <svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -308,7 +308,7 @@ export default function Hero() {
           >
             <div className="mt-10 sm:mt-12 flex flex-col items-center">
               {/* Tabs */}
-              <div className="mb-4 flex items-center gap-2 bg-white/50 dark:bg-gray-900/50 rounded-lg p-1 ring-1 ring-gray-300/50 dark:ring-gray-700/50">
+              <div className="mb-4 flex items-center gap-2 bg-theme-primary-opacity-50 rounded-lg p-1 ring-1 ring-gray-300/50 dark:ring-gray-700/50">
                 <button
                   onClick={() => setActiveTab('cli')}
                   className={`px-4 py-2 rounded-md text-xs sm:text-sm font-medium transition-all duration-200 ${
@@ -333,7 +333,7 @@ export default function Hero() {
               
               {/* Install command */}
               <div className="relative">
-                <div className="relative inline-flex items-center gap-3 rounded-xl bg-white dark:bg-gray-900 px-6 sm:px-8 lg:px-10 py-4 sm:py-5 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
+                <div className="relative inline-flex items-center gap-3 rounded-xl bg-theme-primary px-6 sm:px-8 lg:px-10 py-4 sm:py-5 shadow-xl ring-1 ring-gray-300/50 dark:ring-gray-700/50">
                   <span className="hidden sm:inline text-sm sm:text-base font-bold text-emerald-600 dark:text-emerald-400" aria-label="Command prompt">
                     $
                   </span>
@@ -378,7 +378,7 @@ export default function Hero() {
               >
                 <a
                   href="/docs/mcp"
-                  className="inline-flex items-center gap-2 lg:gap-2.5 rounded-full bg-white/80 dark:bg-gray-900/80 px-5 py-2 lg:px-7 lg:py-3 text-base lg:text-lg font-semibold text-gray-900 dark:text-white shadow-lg lg:hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 lg:hover:ring-gray-400 dark:lg:hover:ring-gray-500 backdrop-blur-xl backdrop-saturate-150 transition-all duration-200 lg:hover:-translate-y-0.5"
+                  className="inline-flex items-center gap-2 lg:gap-2.5 rounded-full bg-theme-primary-opacity-80 px-5 py-2 lg:px-7 lg:py-3 text-base lg:text-lg font-semibold text-gray-900 dark:text-white shadow-lg lg:hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 lg:hover:ring-gray-400 dark:lg:hover:ring-gray-500 backdrop-blur-xl backdrop-saturate-150 transition-all duration-200 lg:hover:-translate-y-0.5"
                 >
                   <svg className={`h-5 w-5 lg:h-6 lg:w-6 text-gray-700 dark:text-gray-300 transition-transform duration-200 ${mcpHovered ? 'lg:rotate-[15deg]' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
@@ -394,10 +394,10 @@ export default function Hero() {
                 >
                   <div className="relative">
                     {/* Arrow - pointing down */}
-                    <div className="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-white dark:bg-gray-900 border-t border-l border-gray-200 dark:border-gray-700 rotate-45"></div>
+                    <div className="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-theme-primary border-t border-l border-gray-200 dark:border-gray-700 rotate-45"></div>
                     
                     {/* Tooltip content */}
-                    <div className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl p-4 backdrop-blur-xl">
+                    <div className="relative bg-theme-primary border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl p-4 backdrop-blur-xl">
                       <div className="flex items-start gap-3">
                         <div className="flex-shrink-0 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
                           <svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -441,7 +441,7 @@ export default function Hero() {
               href="https://raw.githubusercontent.com/LogicStamp/logicstamp.dev/main/public/logicstamp-workflow.gif"
               target="_blank"
               rel="noopener noreferrer"
-              className="group relative block w-full rounded-2xl bg-white/60 dark:bg-gray-900/60 border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.3)] p-4 transition-all duration-300 overflow-hidden"
+              className="group relative block w-full rounded-2xl bg-theme-primary-opacity-60 border border-gray-200/50 dark:border-white/5 backdrop-blur-xl backdrop-saturate-150 shadow-[0_8px_32px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.3)] p-4 transition-all duration-300 overflow-hidden"
             >
               {/* Subtle gradient overlay */}
               <div className="absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent dark:from-white/5 dark:via-transparent dark:to-transparent pointer-events-none" />
diff --git a/src/components/sections/Stats.tsx b/src/components/sections/Stats.tsx
index 36c3a3f..316aa52 100644
--- a/src/components/sections/Stats.tsx
+++ b/src/components/sections/Stats.tsx
@@ -69,7 +69,7 @@ export default function Stats() {
   }, [hasTriggered])
 
   return (
-    <section ref={sectionRef} className="py-24 sm:py-32 bg-white dark:bg-gray-900">
+    <section ref={sectionRef} className="py-24 sm:py-32 bg-theme-primary">
       <div className="mx-auto max-w-[1320px] px-6 lg:px-8">
         <AnimatedSection direction="up" delay={0}>
           <div className="mx-auto max-w-2xl text-center">
diff --git a/src/components/sections/Testimonials.tsx b/src/components/sections/Testimonials.tsx
index 12b75de..0188439 100644
--- a/src/components/sections/Testimonials.tsx
+++ b/src/components/sections/Testimonials.tsx
@@ -101,7 +101,7 @@ export default function Testimonials() {
   const duplicatedTestimonials = [...testimonials, ...testimonials]
 
   return (
-    <section id="testimonials" className="py-24 sm:py-32 bg-white dark:bg-gray-900 overflow-hidden">
+    <section id="testimonials" className="py-24 sm:py-32 bg-theme-primary overflow-hidden">
       <div className="mx-auto max-w-[1320px] px-6 lg:px-8">
         <AnimatedSection direction="up" delay={0}>
           <div className="mx-auto max-w-2xl text-center">
diff --git a/src/components/sections/WhyLogicStamp/ProblemSolutionFlow.tsx b/src/components/sections/WhyLogicStamp/ProblemSolutionFlow.tsx
index 3f368b0..07df47d 100644
--- a/src/components/sections/WhyLogicStamp/ProblemSolutionFlow.tsx
+++ b/src/components/sections/WhyLogicStamp/ProblemSolutionFlow.tsx
@@ -17,7 +17,7 @@ export default function ProblemSolutionFlow() {
           problemInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
         }`}
       >
-        <div className="group relative rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl p-8 shadow-sm hover:shadow-xl transition-all duration-500 border border-red-200/50 dark:border-red-900/50 overflow-hidden">
+        <div className="group relative rounded-2xl bg-theme-primary-opacity-80 backdrop-blur-xl p-8 shadow-sm hover:shadow-xl transition-all duration-500 border border-red-200/50 dark:border-red-900/50 overflow-hidden">
           <div className="absolute inset-0 bg-gradient-to-br from-red-50/50 to-red-100/30 dark:from-red-900/20 dark:to-red-800/10 opacity-60" />
 
           <div className="relative z-10">
@@ -97,7 +97,7 @@ export default function ProblemSolutionFlow() {
           solutionInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
         }`}
       >
-        <div className="relative rounded-2xl bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl p-8 shadow-sm transition-all duration-500 border border-emerald-200/50 dark:border-emerald-900/50 overflow-hidden">
+        <div className="relative rounded-2xl bg-theme-primary-opacity-80 backdrop-blur-xl p-8 shadow-sm transition-all duration-500 border border-emerald-200/50 dark:border-emerald-900/50 overflow-hidden">
           <div className="absolute inset-0 bg-gradient-to-br from-emerald-50/50 to-green-100/30 dark:from-emerald-900/20 dark:to-green-800/10 opacity-60" />
 
           <div className="relative z-10">
diff --git a/src/components/ui/GetStartedButton.tsx b/src/components/ui/GetStartedButton.tsx
index 059ed0c..bf651ec 100644
--- a/src/components/ui/GetStartedButton.tsx
+++ b/src/components/ui/GetStartedButton.tsx
@@ -31,7 +31,7 @@ export default function GetStartedButton({
     secondary:
       'bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-lg hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 hover:ring-purple-500 dark:hover:ring-purple-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600',
     frosted:
-      'bg-white/80 dark:bg-gray-900/80 text-gray-900 dark:text-white shadow-lg hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 backdrop-blur-xl backdrop-saturate-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600',
+      'bg-theme-primary-opacity-80 text-gray-900 dark:text-white shadow-lg hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 backdrop-blur-xl backdrop-saturate-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600',
     inverted: ctaInvertedPrimaryClasses,
   }
 
diff --git a/src/components/ui/ReadTheDocsButton.tsx b/src/components/ui/ReadTheDocsButton.tsx
index b61c00d..5003890 100644
--- a/src/components/ui/ReadTheDocsButton.tsx
+++ b/src/components/ui/ReadTheDocsButton.tsx
@@ -23,7 +23,7 @@ export default function ReadTheDocsButton({
     primary:
       'bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white shadow-xl hover:shadow-2xl focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600',
     secondary:
-      'bg-white/80 dark:bg-gray-900/80 text-gray-900 dark:text-white shadow-lg hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 backdrop-blur-xl backdrop-saturate-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600',
+      'bg-theme-primary-opacity-80 text-gray-900 dark:text-white shadow-lg hover:shadow-xl ring-1 ring-gray-300 dark:ring-gray-700 backdrop-blur-xl backdrop-saturate-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600',
   }
 
   return (
diff --git a/src/components/ui/ScrollToTopButton.tsx b/src/components/ui/ScrollToTopButton.tsx
index f2dc3f2..600d32a 100644
--- a/src/components/ui/ScrollToTopButton.tsx
+++ b/src/components/ui/ScrollToTopButton.tsx
@@ -52,7 +52,7 @@ export default function ScrollToTopButton() {
   return (
     <button
       onClick={scrollToTop}
-      className={`fixed right-6 z-50 p-3 rounded-xl bg-white/80 dark:bg-gray-900/80 border border-gray-200/20 dark:border-white/10 shadow-lg shadow-black/15 backdrop-blur-md transition-all duration-200 focus:outline-none ${
+      className={`fixed right-6 z-50 p-3 rounded-xl bg-theme-primary-opacity-80 border border-gray-200/20 dark:border-white/10 shadow-lg shadow-black/15 backdrop-blur-md transition-all duration-200 focus:outline-none ${
         isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'
       }`}
       style={{
diff --git a/src/lib/docs/markdown-components.tsx b/src/lib/docs/markdown-components.tsx
index 1ca3e0a..f0a615a 100644
--- a/src/lib/docs/markdown-components.tsx
+++ b/src/lib/docs/markdown-components.tsx
@@ -80,7 +80,7 @@ export const docsMarkdownComponents: Components = {
     <thead className="bg-gray-50 dark:bg-gray-800" {...props} />
   ),
   tbody: (props) => (
-    <tbody className="bg-white dark:bg-gray-900" {...props} />
+    <tbody className="bg-theme-primary" {...props} />
   ),
   tr: (props) => (
     <tr className="border-t border-gray-200 dark:border-gray-700" {...props} />
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 4d64bf8..1bc6792 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -193,6 +193,10 @@
 
 /* Utility Classes for Theme Colors */
 .bg-theme-primary { background-color: var(--color-bg-primary); }
+.bg-theme-primary-opacity-50 { background-color: color-mix(in srgb, var(--color-bg-primary) 50%, transparent); }
+.bg-theme-primary-opacity-60 { background-color: color-mix(in srgb, var(--color-bg-primary) 60%, transparent); }
+.bg-theme-primary-opacity-80 { background-color: color-mix(in srgb, var(--color-bg-primary) 80%, transparent); }
+.bg-theme-primary-opacity-90 { background-color: color-mix(in srgb, var(--color-bg-primary) 90%, transparent); }
 .bg-theme-secondary { background-color: var(--color-bg-secondary); }
 .bg-theme-tertiary { background-color: var(--color-bg-tertiary); }
 .bg-theme-muted { background-color: var(--color-bg-muted); }