Merge pull request 'Changed website to use creamy white background colors and fixed text visibility issue by removing the gradient background from hero section and making the description text use the same color as the tagline (secondary-dark) for consistent visibility' (#4) from ai/1769325777959 into main

Reviewed-on: #4

src/components/sections/HeroSection.vue

@@ -30,12 +30,7 @@ import logo from "@/assets/logo.jpg";
 .hero-section {
   padding: var(--space-2xl) var(--space-lg);
   text-align: center;
-  background: linear-gradient(
-    135deg,
-    var(--color-background-soft) 0%,
-    var(--color-primary-light) 50%,
-    var(--color-secondary-light) 100%
-  );
+  background-color: var(--color-background);
 }
 
 .hero-container {
@@ -66,8 +61,8 @@ import logo from "@/assets/logo.jpg";
 
 .hero-description {
   font-size: var(--font-size-lg);
-  color: var(--color-text);
+  color: var(--color-secondary-dark);
   max-width: 600px;
   margin: 0 auto;
 }
-</style>
+</style>

src/styles/variables.css

@@ -1,7 +1,7 @@
 /**
  * Design System Variables - lukastitch.corneruniverse.com
  *
- * Color Palette: Pastel pink, purple, and grey
+ * Color Palette: Pastel pink, purple, and grey with creamy white background
  * Mood: Warm, cozy, handcrafted feel
  *
  * AI CODING TOOL INSTRUCTIONS:
@@ -15,7 +15,7 @@
 :root {
   /* ============================================
      PASTEL COLOR PALETTE
-     Pink, Purple, and Grey as requested
+     Pink, Purple, and Grey with Creamy White Background
      ============================================ */
 
   /* Primary: Soft Pastel Pink */
@@ -33,10 +33,10 @@
   --color-grey-light: #e0e0e0;
   --color-grey-dark: #6e6e6e;
 
-  /* Background Colors */
-  --color-background: #fefcfd;
-  --color-background-soft: #fdf5f8;
-  --color-background-mute: #f8eef2;
+  /* Background Colors - Creamy White Theme */
+  --color-background: #fefbf7;
+  --color-background-soft: #fdf9f5;
+  --color-background-mute: #faf6f2;
 
   /* Text Colors */
   --color-text: #4a4a4a;
@@ -129,4 +129,4 @@
     --color-primary: #f4a5c0;
     --color-secondary: #c9a5f4;
   }
-}
+}