Implement creative fusion color palette

- Added CSS variables for consistent color management
- Deep purple headers with sage green accents
- Rust/terracotta links with hover effects
- Steel blue secondary elements
- Enhanced navigation with purple background
- Project cards with warm beige and hover states
- Documented palette in theme README

Author: Debdyut

portfolio/static/Screenshot 2025-11-16 at 10.00.23 AM.heic

@@ -0,0 +1,32 @@
+# Basic Theme - Creative Fusion Palette
+
+## Color Palette Documentation
+
+### Fusion Design Philosophy
+A harmonious blend of three creative palettes combining warm earth tones, cool purples, and sophisticated blues to create a unique creative-professional identity.
+
+### Primary Colors
+- **Deep Purple** `#6B4C93` - Headers, main emphasis, navigation
+- **Rust/Terracotta** `#C65D4F` - Call-to-action, links, interactive elements
+- **Steel Blue** `#5A7A8A` - Secondary text, borders, subtle emphasis
+
+### Supporting Colors
+- **Sage Green** `#8FBC8F` - Accent highlights, success states, icons
+- **Warm Peach** `#F4B5A0` - Subtle backgrounds, hover states, cards
+- **Light Lavender** `#E8E0F0` - Section backgrounds, alternating content
+
+### Neutrals
+- **Charcoal** `#2C3E50` - Primary text, high contrast elements
+- **Light Gray** `#F8F9FA` - Main background, clean base
+- **Warm Beige** `#E8DDD4` - Card backgrounds, content sections
+
+### Usage Guidelines
+- **Warm tones** (rust, peach) for approachable creativity
+- **Cool tones** (purple, blue) for technical professionalism  
+- **Earth tones** (sage, beige) for balance and sophistication
+
+### Accessibility
+All color combinations maintain WCAG AA contrast ratios for optimal readability.
+
+---
+*Color palette designed for Technical Product Engineer portfolio - balancing creativity with professional credibility.*

portfolio/static/Screenshot 2025-11-16 at 10.00.23 AM.png

@@ -1,4 +1,21 @@
-/* Minimal Black & White Design */
+/* Creative Fusion Palette Design */
+:root {
+  /* Primary Colors */
+  --deep-purple: #6B4C93;
+  --rust-terracotta: #C65D4F;
+  --steel-blue: #5A7A8A;
+  
+  /* Supporting Colors */
+  --sage-green: #8FBC8F;
+  --warm-peach: #F4B5A0;
+  --light-lavender: #E8E0F0;
+  
+  /* Neutrals */
+  --charcoal: #2C3E50;
+  --light-gray: #F8F9FA;
+  --warm-beige: #E8DDD4;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -8,8 +25,8 @@
 body {
   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   line-height: 1.6;
-  color: #000;
-  background: #fff;
+  color: var(--charcoal);
+  background: var(--light-gray);
   max-width: 800px;
   margin: 0 auto;
   padding: 2rem;
@@ -19,24 +36,27 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   margin: 2rem 0 1rem 0;
-  border-bottom: 1px solid #000;
+  color: var(--deep-purple);
+  border-bottom: 2px solid var(--sage-green);
   padding-bottom: 0.5rem;
 }
 
 h1 {
   font-size: 2rem;
   text-transform: uppercase;
   letter-spacing: 2px;
+  border-bottom: 3px solid var(--rust-terracotta);
 }
 
 h2 {
   font-size: 1.5rem;
   margin-top: 3rem;
+  color: var(--steel-blue);
 }
 
 h3 {
   font-size: 1.2rem;
-  border-bottom: 1px dotted #000;
+  border-bottom: 1px dotted var(--sage-green);
 }
 
 p {
@@ -45,9 +65,17 @@ p {
 
 /* Links */
 a {
-  color: #000;
+  color: var(--rust-terracotta);
   text-decoration: none;
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid var(--rust-terracotta);
+  transition: all 0.3s ease;
+}
+
+a:hover {
+  color: var(--deep-purple);
+  border-bottom-color: var(--deep-purple);
+  background: var(--warm-peach);
+  padding: 2px 4px;
 }
 
 /* Lists */
@@ -63,30 +91,33 @@ li {
 /* Line Art Elements */
 hr {
   border: none;
-  border-top: 1px solid #000;
+  border-top: 2px solid var(--sage-green);
   margin: 2rem 0;
 }
 
 /* Code */
 code {
-  background: none;
-  border: 1px solid #000;
+  background: var(--light-lavender);
+  border: 1px solid var(--steel-blue);
   padding: 2px 4px;
   font-family: inherit;
+  color: var(--deep-purple);
 }
 
 pre {
-  border: 1px solid #000;
+  border: 1px solid var(--steel-blue);
+  background: var(--warm-beige);
   padding: 1rem;
   margin: 1rem 0;
   overflow-x: auto;
 }
 
 /* Navigation */
 nav {
-  border-bottom: 2px solid #000;
+  background: var(--deep-purple);
+  border-radius: 8px;
   margin-bottom: 2rem;
-  padding-bottom: 1rem;
+  padding: 1rem;
 }
 
 nav ul {
@@ -97,77 +128,106 @@ nav ul {
 }
 
 nav a {
+  color: var(--light-gray);
   border: none;
   text-transform: uppercase;
   letter-spacing: 1px;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+nav a:hover {
+  background: var(--sage-green);
+  color: var(--charcoal);
 }
 
 /* Project Cards */
 .project-card {
-  border: 1px solid #000;
+  border: 2px solid var(--steel-blue);
+  background: var(--warm-beige);
   margin: 2rem 0;
   padding: 1.5rem;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.project-card:hover {
+  border-color: var(--rust-terracotta);
+  background: var(--light-lavender);
 }
 
 .project-title {
-  border-bottom: 1px dotted #000;
+  color: var(--deep-purple);
+  border-bottom: 1px dotted var(--sage-green);
   margin-bottom: 1rem;
 }
 
 .tech-stack {
   margin-top: 1rem;
   font-size: 0.9rem;
+  color: var(--steel-blue);
 }
 
 .tech-stack::before {
   content: "→ ";
+  color: var(--rust-terracotta);
 }
 
-/* Minimal Form Elements */
+/* Form Elements */
 input, textarea {
-  border: 1px solid #000;
-  background: #fff;
+  border: 2px solid var(--steel-blue);
+  background: var(--light-gray);
   padding: 0.5rem;
   font-family: inherit;
   width: 100%;
   margin: 0.5rem 0;
+  border-radius: 4px;
+  transition: border-color 0.3s ease;
+}
+
+input:focus, textarea:focus {
+  outline: none;
+  border-color: var(--rust-terracotta);
 }
 
 button {
-  background: #000;
-  color: #fff;
+  background: var(--rust-terracotta);
+  color: var(--light-gray);
   border: none;
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1.5rem;
   cursor: pointer;
   font-family: inherit;
   text-transform: uppercase;
   letter-spacing: 1px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
 }
 
 button:hover {
-  background: #fff;
-  color: #000;
-  border: 1px solid #000;
-}
-
-/* ASCII Art Style Elements */
-.ascii-divider::before {
-  content: "────────────────────────────────────────";
-  display: block;
-  text-align: center;
-  margin: 2rem 0;
+  background: var(--deep-purple);
+  transform: translateY(-2px);
 }
 
-/* Black & White Emoji Styling */
+/* Enhanced Emoji Styling */
 .emoji {
-  filter: grayscale(100%) contrast(200%);
   font-style: normal;
+  filter: none;
 }
 
 .section-icon {
   font-size: 1.2em;
   margin-right: 0.5rem;
-  filter: grayscale(100%) contrast(200%);
+  color: var(--sage-green);
+}
+
+/* Footer */
+footer {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 2px solid var(--sage-green);
+  text-align: center;
+  color: var(--steel-blue);
 }
 
 /* Responsive */
@@ -178,7 +238,7 @@ button:hover {
 
   nav ul {
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
   }
 
   h1 {
@@ -192,6 +252,8 @@ button:hover {
     max-width: none;
     margin: 0;
     padding: 1rem;
+    background: white;
+    color: black;
   }
 
   a {