refactor(docs): standardize background styles with theme-primary (#227)

- replace bg-white and dark:bg-gray-900 with bg-theme-primary
- improve visual consistency across documentation components
- unify background system for better theming and maintainability

Author: AmiteK23

__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')
   })

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">

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">

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">

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">

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>

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>

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">

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">