From 635bb69cb9b61d5e8c30f37164a2bdd1e15354d4 Mon Sep 17 00:00:00 2001
From: Josephat-S <sangwajozaphat@gmail.com>
Date: Tue, 26 May 2026 10:53:28 +0200
Subject: [PATCH] Implement Remaining 5 Design Themes

---
 src/dependencies.js                           |  2 +
 .../blog/nextjs-monolith/app/globals.css      | 75 +++++++++++++++++++
 .../ecommerce/nextjs-monolith/app/globals.css | 75 +++++++++++++++++++
 templates/ecommerce/vite-react/src/index.css  | 75 +++++++++++++++++++
 .../portfolio/nextjs-monolith/app/globals.css | 75 +++++++++++++++++++
 templates/portfolio/vite-react/src/index.css  | 75 +++++++++++++++++++
 .../saas/nextjs-monolith/app/globals.css      | 75 +++++++++++++++++++
 templates/saas/vite-react/src/index.css       | 75 +++++++++++++++++++
 .../school/nextjs-monolith/app/globals.css    | 75 +++++++++++++++++++
 9 files changed, 602 insertions(+)

diff --git a/src/dependencies.js b/src/dependencies.js
index 0c10091..0a25075 100644
--- a/src/dependencies.js
+++ b/src/dependencies.js
@@ -27,6 +27,8 @@ export function resolveDependencies(projectPath, config) {
     pkg.dependencies['tailwind-merge'] = '^2.3.0';
   } else if (config.design === 'Dark Terminal') {
     pkg.dependencies['lucide-react'] = '^0.378.0'; // For terminal icons
+  } else if (config.design === 'Neon Cyberpunk') {
+    pkg.dependencies['framer-motion'] = '^11.2.0'; // For glow/hover animations
   }
 
   // 3. Inject routing tools based on Sidebar choice
diff --git a/templates/blog/nextjs-monolith/app/globals.css b/templates/blog/nextjs-monolith/app/globals.css
index 96b135b..3fab5bd 100644
--- a/templates/blog/nextjs-monolith/app/globals.css
+++ b/templates/blog/nextjs-monolith/app/globals.css
@@ -51,6 +51,81 @@
   --radius: 0.25rem;
 }
 
+
+/* ===== Brutalist Theme ===== */
+[data-theme="Brutalist"] {
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --text-color: #000000;
+  --text-secondary: #333333;
+  --primary: #dc2626;
+  --primary-hover: #b91c1c;
+  --border-color: #000000;
+  --card-bg: #ffffff;
+  --font-family: 'Courier New', ui-monospace, monospace;
+  --radius: 0;
+}
+
+/* ===== Soft Pastel Theme ===== */
+[data-theme="Soft Pastel"] {
+  --bg-color: #fdf4ff;
+  --bg-secondary: #f5f0ff;
+  --text-color: #3b1f5e;
+  --text-secondary: #7c5a9e;
+  --primary: #a855f7;
+  --primary-hover: #9333ea;
+  --border-color: #e9d5ff;
+  --card-bg: #ffffff;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 1.5rem;
+}
+
+/* ===== Corporate Blue Theme ===== */
+[data-theme="Corporate Blue"] {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-color: #0f172a;
+  --text-secondary: #475569;
+  --primary: #1e40af;
+  --primary-hover: #1e3a8a;
+  --border-color: #cbd5e1;
+  --card-bg: #ffffff;
+  --font-family: 'Georgia', 'Times New Roman', serif;
+  --radius: 0.25rem;
+}
+
+/* ===== Neon Cyberpunk Theme ===== */
+[data-theme="Neon Cyberpunk"] {
+  --bg-color: #0a0015;
+  --bg-secondary: #1a0030;
+  --text-color: #e0f2fe;
+  --text-secondary: #7dd3fc;
+  --primary: #f472b6;
+  --primary-hover: #ec4899;
+  --border-color: #581c87;
+  --card-bg: rgba(88, 28, 135, 0.2);
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
+[data-theme="Neon Cyberpunk"] .neon-glow {
+  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2);
+}
+
+/* ===== Earth Tones Theme ===== */
+[data-theme="Earth Tones"] {
+  --bg-color: #faf7f2;
+  --bg-secondary: #f5efe6;
+  --text-color: #3d2c1e;
+  --text-secondary: #78614e;
+  --primary: #b45309;
+  --primary-hover: #92400e;
+  --border-color: #d6c4a8;
+  --card-bg: #fffdf8;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
 /* ===== Apply variables globally ===== */
 body {
   background-color: var(--bg-color);
diff --git a/templates/ecommerce/nextjs-monolith/app/globals.css b/templates/ecommerce/nextjs-monolith/app/globals.css
index 283fef5..1afd4c4 100644
--- a/templates/ecommerce/nextjs-monolith/app/globals.css
+++ b/templates/ecommerce/nextjs-monolith/app/globals.css
@@ -51,6 +51,81 @@
   --radius: 0.25rem;
 }
 
+
+/* ===== Brutalist Theme ===== */
+[data-theme="Brutalist"] {
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --text-color: #000000;
+  --text-secondary: #333333;
+  --primary: #dc2626;
+  --primary-hover: #b91c1c;
+  --border-color: #000000;
+  --card-bg: #ffffff;
+  --font-family: 'Courier New', ui-monospace, monospace;
+  --radius: 0;
+}
+
+/* ===== Soft Pastel Theme ===== */
+[data-theme="Soft Pastel"] {
+  --bg-color: #fdf4ff;
+  --bg-secondary: #f5f0ff;
+  --text-color: #3b1f5e;
+  --text-secondary: #7c5a9e;
+  --primary: #a855f7;
+  --primary-hover: #9333ea;
+  --border-color: #e9d5ff;
+  --card-bg: #ffffff;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 1.5rem;
+}
+
+/* ===== Corporate Blue Theme ===== */
+[data-theme="Corporate Blue"] {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-color: #0f172a;
+  --text-secondary: #475569;
+  --primary: #1e40af;
+  --primary-hover: #1e3a8a;
+  --border-color: #cbd5e1;
+  --card-bg: #ffffff;
+  --font-family: 'Georgia', 'Times New Roman', serif;
+  --radius: 0.25rem;
+}
+
+/* ===== Neon Cyberpunk Theme ===== */
+[data-theme="Neon Cyberpunk"] {
+  --bg-color: #0a0015;
+  --bg-secondary: #1a0030;
+  --text-color: #e0f2fe;
+  --text-secondary: #7dd3fc;
+  --primary: #f472b6;
+  --primary-hover: #ec4899;
+  --border-color: #581c87;
+  --card-bg: rgba(88, 28, 135, 0.2);
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
+[data-theme="Neon Cyberpunk"] .neon-glow {
+  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2);
+}
+
+/* ===== Earth Tones Theme ===== */
+[data-theme="Earth Tones"] {
+  --bg-color: #faf7f2;
+  --bg-secondary: #f5efe6;
+  --text-color: #3d2c1e;
+  --text-secondary: #78614e;
+  --primary: #b45309;
+  --primary-hover: #92400e;
+  --border-color: #d6c4a8;
+  --card-bg: #fffdf8;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
 /* ===== Apply variables globally ===== */
 body {
   background-color: var(--bg-color);
diff --git a/templates/ecommerce/vite-react/src/index.css b/templates/ecommerce/vite-react/src/index.css
index 7a2f894..21f9efc 100644
--- a/templates/ecommerce/vite-react/src/index.css
+++ b/templates/ecommerce/vite-react/src/index.css
@@ -41,6 +41,81 @@
   --radius: 0.25rem;
 }
 
+
+/* ===== Brutalist Theme ===== */
+[data-theme="Brutalist"] {
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --text-color: #000000;
+  --text-secondary: #333333;
+  --primary: #dc2626;
+  --primary-hover: #b91c1c;
+  --border-color: #000000;
+  --card-bg: #ffffff;
+  --font-family: 'Courier New', ui-monospace, monospace;
+  --radius: 0;
+}
+
+/* ===== Soft Pastel Theme ===== */
+[data-theme="Soft Pastel"] {
+  --bg-color: #fdf4ff;
+  --bg-secondary: #f5f0ff;
+  --text-color: #3b1f5e;
+  --text-secondary: #7c5a9e;
+  --primary: #a855f7;
+  --primary-hover: #9333ea;
+  --border-color: #e9d5ff;
+  --card-bg: #ffffff;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 1.5rem;
+}
+
+/* ===== Corporate Blue Theme ===== */
+[data-theme="Corporate Blue"] {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-color: #0f172a;
+  --text-secondary: #475569;
+  --primary: #1e40af;
+  --primary-hover: #1e3a8a;
+  --border-color: #cbd5e1;
+  --card-bg: #ffffff;
+  --font-family: 'Georgia', 'Times New Roman', serif;
+  --radius: 0.25rem;
+}
+
+/* ===== Neon Cyberpunk Theme ===== */
+[data-theme="Neon Cyberpunk"] {
+  --bg-color: #0a0015;
+  --bg-secondary: #1a0030;
+  --text-color: #e0f2fe;
+  --text-secondary: #7dd3fc;
+  --primary: #f472b6;
+  --primary-hover: #ec4899;
+  --border-color: #581c87;
+  --card-bg: rgba(88, 28, 135, 0.2);
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
+[data-theme="Neon Cyberpunk"] .neon-glow {
+  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2);
+}
+
+/* ===== Earth Tones Theme ===== */
+[data-theme="Earth Tones"] {
+  --bg-color: #faf7f2;
+  --bg-secondary: #f5efe6;
+  --text-color: #3d2c1e;
+  --text-secondary: #78614e;
+  --primary: #b45309;
+  --primary-hover: #92400e;
+  --border-color: #d6c4a8;
+  --card-bg: #fffdf8;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
 body {
   background-color: var(--bg-color);
   color: var(--text-color);
diff --git a/templates/portfolio/nextjs-monolith/app/globals.css b/templates/portfolio/nextjs-monolith/app/globals.css
index 283fef5..1afd4c4 100644
--- a/templates/portfolio/nextjs-monolith/app/globals.css
+++ b/templates/portfolio/nextjs-monolith/app/globals.css
@@ -51,6 +51,81 @@
   --radius: 0.25rem;
 }
 
+
+/* ===== Brutalist Theme ===== */
+[data-theme="Brutalist"] {
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --text-color: #000000;
+  --text-secondary: #333333;
+  --primary: #dc2626;
+  --primary-hover: #b91c1c;
+  --border-color: #000000;
+  --card-bg: #ffffff;
+  --font-family: 'Courier New', ui-monospace, monospace;
+  --radius: 0;
+}
+
+/* ===== Soft Pastel Theme ===== */
+[data-theme="Soft Pastel"] {
+  --bg-color: #fdf4ff;
+  --bg-secondary: #f5f0ff;
+  --text-color: #3b1f5e;
+  --text-secondary: #7c5a9e;
+  --primary: #a855f7;
+  --primary-hover: #9333ea;
+  --border-color: #e9d5ff;
+  --card-bg: #ffffff;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 1.5rem;
+}
+
+/* ===== Corporate Blue Theme ===== */
+[data-theme="Corporate Blue"] {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-color: #0f172a;
+  --text-secondary: #475569;
+  --primary: #1e40af;
+  --primary-hover: #1e3a8a;
+  --border-color: #cbd5e1;
+  --card-bg: #ffffff;
+  --font-family: 'Georgia', 'Times New Roman', serif;
+  --radius: 0.25rem;
+}
+
+/* ===== Neon Cyberpunk Theme ===== */
+[data-theme="Neon Cyberpunk"] {
+  --bg-color: #0a0015;
+  --bg-secondary: #1a0030;
+  --text-color: #e0f2fe;
+  --text-secondary: #7dd3fc;
+  --primary: #f472b6;
+  --primary-hover: #ec4899;
+  --border-color: #581c87;
+  --card-bg: rgba(88, 28, 135, 0.2);
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
+[data-theme="Neon Cyberpunk"] .neon-glow {
+  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2);
+}
+
+/* ===== Earth Tones Theme ===== */
+[data-theme="Earth Tones"] {
+  --bg-color: #faf7f2;
+  --bg-secondary: #f5efe6;
+  --text-color: #3d2c1e;
+  --text-secondary: #78614e;
+  --primary: #b45309;
+  --primary-hover: #92400e;
+  --border-color: #d6c4a8;
+  --card-bg: #fffdf8;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
 /* ===== Apply variables globally ===== */
 body {
   background-color: var(--bg-color);
diff --git a/templates/portfolio/vite-react/src/index.css b/templates/portfolio/vite-react/src/index.css
index 7a2f894..21f9efc 100644
--- a/templates/portfolio/vite-react/src/index.css
+++ b/templates/portfolio/vite-react/src/index.css
@@ -41,6 +41,81 @@
   --radius: 0.25rem;
 }
 
+
+/* ===== Brutalist Theme ===== */
+[data-theme="Brutalist"] {
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --text-color: #000000;
+  --text-secondary: #333333;
+  --primary: #dc2626;
+  --primary-hover: #b91c1c;
+  --border-color: #000000;
+  --card-bg: #ffffff;
+  --font-family: 'Courier New', ui-monospace, monospace;
+  --radius: 0;
+}
+
+/* ===== Soft Pastel Theme ===== */
+[data-theme="Soft Pastel"] {
+  --bg-color: #fdf4ff;
+  --bg-secondary: #f5f0ff;
+  --text-color: #3b1f5e;
+  --text-secondary: #7c5a9e;
+  --primary: #a855f7;
+  --primary-hover: #9333ea;
+  --border-color: #e9d5ff;
+  --card-bg: #ffffff;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 1.5rem;
+}
+
+/* ===== Corporate Blue Theme ===== */
+[data-theme="Corporate Blue"] {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-color: #0f172a;
+  --text-secondary: #475569;
+  --primary: #1e40af;
+  --primary-hover: #1e3a8a;
+  --border-color: #cbd5e1;
+  --card-bg: #ffffff;
+  --font-family: 'Georgia', 'Times New Roman', serif;
+  --radius: 0.25rem;
+}
+
+/* ===== Neon Cyberpunk Theme ===== */
+[data-theme="Neon Cyberpunk"] {
+  --bg-color: #0a0015;
+  --bg-secondary: #1a0030;
+  --text-color: #e0f2fe;
+  --text-secondary: #7dd3fc;
+  --primary: #f472b6;
+  --primary-hover: #ec4899;
+  --border-color: #581c87;
+  --card-bg: rgba(88, 28, 135, 0.2);
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
+[data-theme="Neon Cyberpunk"] .neon-glow {
+  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2);
+}
+
+/* ===== Earth Tones Theme ===== */
+[data-theme="Earth Tones"] {
+  --bg-color: #faf7f2;
+  --bg-secondary: #f5efe6;
+  --text-color: #3d2c1e;
+  --text-secondary: #78614e;
+  --primary: #b45309;
+  --primary-hover: #92400e;
+  --border-color: #d6c4a8;
+  --card-bg: #fffdf8;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
 body {
   background-color: var(--bg-color);
   color: var(--text-color);
diff --git a/templates/saas/nextjs-monolith/app/globals.css b/templates/saas/nextjs-monolith/app/globals.css
index 283fef5..1afd4c4 100644
--- a/templates/saas/nextjs-monolith/app/globals.css
+++ b/templates/saas/nextjs-monolith/app/globals.css
@@ -51,6 +51,81 @@
   --radius: 0.25rem;
 }
 
+
+/* ===== Brutalist Theme ===== */
+[data-theme="Brutalist"] {
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --text-color: #000000;
+  --text-secondary: #333333;
+  --primary: #dc2626;
+  --primary-hover: #b91c1c;
+  --border-color: #000000;
+  --card-bg: #ffffff;
+  --font-family: 'Courier New', ui-monospace, monospace;
+  --radius: 0;
+}
+
+/* ===== Soft Pastel Theme ===== */
+[data-theme="Soft Pastel"] {
+  --bg-color: #fdf4ff;
+  --bg-secondary: #f5f0ff;
+  --text-color: #3b1f5e;
+  --text-secondary: #7c5a9e;
+  --primary: #a855f7;
+  --primary-hover: #9333ea;
+  --border-color: #e9d5ff;
+  --card-bg: #ffffff;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 1.5rem;
+}
+
+/* ===== Corporate Blue Theme ===== */
+[data-theme="Corporate Blue"] {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-color: #0f172a;
+  --text-secondary: #475569;
+  --primary: #1e40af;
+  --primary-hover: #1e3a8a;
+  --border-color: #cbd5e1;
+  --card-bg: #ffffff;
+  --font-family: 'Georgia', 'Times New Roman', serif;
+  --radius: 0.25rem;
+}
+
+/* ===== Neon Cyberpunk Theme ===== */
+[data-theme="Neon Cyberpunk"] {
+  --bg-color: #0a0015;
+  --bg-secondary: #1a0030;
+  --text-color: #e0f2fe;
+  --text-secondary: #7dd3fc;
+  --primary: #f472b6;
+  --primary-hover: #ec4899;
+  --border-color: #581c87;
+  --card-bg: rgba(88, 28, 135, 0.2);
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
+[data-theme="Neon Cyberpunk"] .neon-glow {
+  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2);
+}
+
+/* ===== Earth Tones Theme ===== */
+[data-theme="Earth Tones"] {
+  --bg-color: #faf7f2;
+  --bg-secondary: #f5efe6;
+  --text-color: #3d2c1e;
+  --text-secondary: #78614e;
+  --primary: #b45309;
+  --primary-hover: #92400e;
+  --border-color: #d6c4a8;
+  --card-bg: #fffdf8;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
 /* ===== Apply variables globally ===== */
 body {
   background-color: var(--bg-color);
diff --git a/templates/saas/vite-react/src/index.css b/templates/saas/vite-react/src/index.css
index 7a2f894..21f9efc 100644
--- a/templates/saas/vite-react/src/index.css
+++ b/templates/saas/vite-react/src/index.css
@@ -41,6 +41,81 @@
   --radius: 0.25rem;
 }
 
+
+/* ===== Brutalist Theme ===== */
+[data-theme="Brutalist"] {
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --text-color: #000000;
+  --text-secondary: #333333;
+  --primary: #dc2626;
+  --primary-hover: #b91c1c;
+  --border-color: #000000;
+  --card-bg: #ffffff;
+  --font-family: 'Courier New', ui-monospace, monospace;
+  --radius: 0;
+}
+
+/* ===== Soft Pastel Theme ===== */
+[data-theme="Soft Pastel"] {
+  --bg-color: #fdf4ff;
+  --bg-secondary: #f5f0ff;
+  --text-color: #3b1f5e;
+  --text-secondary: #7c5a9e;
+  --primary: #a855f7;
+  --primary-hover: #9333ea;
+  --border-color: #e9d5ff;
+  --card-bg: #ffffff;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 1.5rem;
+}
+
+/* ===== Corporate Blue Theme ===== */
+[data-theme="Corporate Blue"] {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-color: #0f172a;
+  --text-secondary: #475569;
+  --primary: #1e40af;
+  --primary-hover: #1e3a8a;
+  --border-color: #cbd5e1;
+  --card-bg: #ffffff;
+  --font-family: 'Georgia', 'Times New Roman', serif;
+  --radius: 0.25rem;
+}
+
+/* ===== Neon Cyberpunk Theme ===== */
+[data-theme="Neon Cyberpunk"] {
+  --bg-color: #0a0015;
+  --bg-secondary: #1a0030;
+  --text-color: #e0f2fe;
+  --text-secondary: #7dd3fc;
+  --primary: #f472b6;
+  --primary-hover: #ec4899;
+  --border-color: #581c87;
+  --card-bg: rgba(88, 28, 135, 0.2);
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
+[data-theme="Neon Cyberpunk"] .neon-glow {
+  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2);
+}
+
+/* ===== Earth Tones Theme ===== */
+[data-theme="Earth Tones"] {
+  --bg-color: #faf7f2;
+  --bg-secondary: #f5efe6;
+  --text-color: #3d2c1e;
+  --text-secondary: #78614e;
+  --primary: #b45309;
+  --primary-hover: #92400e;
+  --border-color: #d6c4a8;
+  --card-bg: #fffdf8;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
 body {
   background-color: var(--bg-color);
   color: var(--text-color);
diff --git a/templates/school/nextjs-monolith/app/globals.css b/templates/school/nextjs-monolith/app/globals.css
index 283fef5..1afd4c4 100644
--- a/templates/school/nextjs-monolith/app/globals.css
+++ b/templates/school/nextjs-monolith/app/globals.css
@@ -51,6 +51,81 @@
   --radius: 0.25rem;
 }
 
+
+/* ===== Brutalist Theme ===== */
+[data-theme="Brutalist"] {
+  --bg-color: #ffffff;
+  --bg-secondary: #f0f0f0;
+  --text-color: #000000;
+  --text-secondary: #333333;
+  --primary: #dc2626;
+  --primary-hover: #b91c1c;
+  --border-color: #000000;
+  --card-bg: #ffffff;
+  --font-family: 'Courier New', ui-monospace, monospace;
+  --radius: 0;
+}
+
+/* ===== Soft Pastel Theme ===== */
+[data-theme="Soft Pastel"] {
+  --bg-color: #fdf4ff;
+  --bg-secondary: #f5f0ff;
+  --text-color: #3b1f5e;
+  --text-secondary: #7c5a9e;
+  --primary: #a855f7;
+  --primary-hover: #9333ea;
+  --border-color: #e9d5ff;
+  --card-bg: #ffffff;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 1.5rem;
+}
+
+/* ===== Corporate Blue Theme ===== */
+[data-theme="Corporate Blue"] {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-color: #0f172a;
+  --text-secondary: #475569;
+  --primary: #1e40af;
+  --primary-hover: #1e3a8a;
+  --border-color: #cbd5e1;
+  --card-bg: #ffffff;
+  --font-family: 'Georgia', 'Times New Roman', serif;
+  --radius: 0.25rem;
+}
+
+/* ===== Neon Cyberpunk Theme ===== */
+[data-theme="Neon Cyberpunk"] {
+  --bg-color: #0a0015;
+  --bg-secondary: #1a0030;
+  --text-color: #e0f2fe;
+  --text-secondary: #7dd3fc;
+  --primary: #f472b6;
+  --primary-hover: #ec4899;
+  --border-color: #581c87;
+  --card-bg: rgba(88, 28, 135, 0.2);
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
+[data-theme="Neon Cyberpunk"] .neon-glow {
+  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2);
+}
+
+/* ===== Earth Tones Theme ===== */
+[data-theme="Earth Tones"] {
+  --bg-color: #faf7f2;
+  --bg-secondary: #f5efe6;
+  --text-color: #3d2c1e;
+  --text-secondary: #78614e;
+  --primary: #b45309;
+  --primary-hover: #92400e;
+  --border-color: #d6c4a8;
+  --card-bg: #fffdf8;
+  --font-family: 'Inter', system-ui, sans-serif;
+  --radius: 0.75rem;
+}
+
 /* ===== Apply variables globally ===== */
 body {
   background-color: var(--bg-color);