From b759dd51f6e29da02b64b277c24063a0983c1b0c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 15 Sep 2025 07:54:05 +0000
Subject: [PATCH] Update content and styling

---
 src/components/Hero.tsx |  8 +++---
 src/index.css           | 56 ++++++++++++++++++++---------------------
 tailwind.config.ts      | 20 +++++++--------
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 691f8cb..050a055 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -14,7 +14,7 @@ const Hero = () => {
           {/* Content */}
           <div className="space-y-8 animate-fade-in-up">
             <div className="space-y-4">
-              <h1 className="text-display-lg font-bold text-foreground leading-none">
+              <h1 className="text-display-lg font-bold text-ink leading-none">
                 {content.home.heroTitle}
               </h1>
               <p className="text-xl text-muted max-w-lg leading-relaxed">
@@ -43,7 +43,7 @@ const Hero = () => {
                     {index === 2 && <Award className="h-4 w-4 text-accent" />}
                   </div>
                   <div>
-                    <h3 className="font-semibold text-foreground text-sm">{feature.title}</h3>
+                    <h3 className="font-semibold text-ink text-sm">{feature.title}</h3>
                     <p className="text-muted text-xs leading-relaxed mt-1">{feature.description}</p>
                   </div>
                 </div>
@@ -65,14 +65,14 @@ const Hero = () => {
               <div className="absolute -bottom-4 -left-4 bg-card rounded-xl p-4 shadow-subtle border border-border">
                 <div className="flex items-center space-x-2">
                   <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                  <span className="text-xs text-foreground font-medium">Active Projects: 15+</span>
+                  <span className="text-xs text-ink font-medium">Active Projects: 15+</span>
                 </div>
               </div>
               
               <div className="absolute -top-4 -right-4 bg-card rounded-xl p-4 shadow-subtle border border-border">
                 <div className="flex items-center space-x-2">
                   <Award className="h-4 w-4 text-accent" />
-                  <span className="text-xs text-foreground font-medium">20+ Years Experience</span>
+                  <span className="text-xs text-ink font-medium">20+ Years Experience</span>
                 </div>
               </div>
             </div>
diff --git a/src/index.css b/src/index.css
index 7651732..0d7ac09 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,50 +6,50 @@
 
 @layer base {
   :root {
-    /* Core brand colors (HSL) */
-    --bg: 210 24% 7%; /* #0B0F13 near-black */
-    --bg-elevated: 215 20% 12%; /* #121826 */
-    --ink: 210 17% 97%; /* #F7FAFC off-white */
-    --muted: 213 15% 70%; /* #A7B1C2 */
-    --accent: 355 75% 47%; /* #C1272D brand red */
-    --link: 213 94% 68%; /* #60A5FA */
+    /* Core brand colors (HSL values only) */
+    --bg: 210 24% 8%;
+    --bg-elevated: 215 20% 12%;
+    --ink: 210 17% 97%;
+    --muted: 213 15% 65%;
+    --accent: 355 75% 47%;
+    --link: 213 94% 68%;
     
-    /* Semantic mappings */
-    --background: var(--bg);
-    --foreground: var(--ink);
+    /* Semantic color mappings (use HSL values directly) */
+    --background: 210 24% 8%;
+    --foreground: 210 17% 97%;
     
-    --card: var(--bg-elevated);
-    --card-foreground: var(--ink);
+    --card: 215 20% 12%;
+    --card-foreground: 210 17% 97%;
     
-    --popover: var(--bg-elevated);
-    --popover-foreground: var(--ink);
+    --popover: 215 20% 12%;
+    --popover-foreground: 210 17% 97%;
     
-    --primary: var(--accent);
-    --primary-foreground: var(--ink);
+    --primary: 355 75% 47%;
+    --primary-foreground: 210 17% 97%;
     
-    --secondary: var(--bg-elevated);
-    --secondary-foreground: var(--ink);
+    --secondary: 215 20% 16%;
+    --secondary-foreground: 210 17% 97%;
     
-    --muted: var(--bg-elevated);
-    --muted-foreground: var(--muted);
+    --muted: 215 20% 16%;
+    --muted-foreground: 213 15% 65%;
     
-    --accent-color: var(--accent);
-    --accent-foreground: var(--ink);
+    --accent: 355 75% 47%;
+    --accent-foreground: 210 17% 97%;
     
     --destructive: 0 84% 60%;
-    --destructive-foreground: var(--ink);
+    --destructive-foreground: 210 17% 97%;
     
     --border: 215 20% 20%;
     --input: 215 20% 15%;
-    --ring: var(--accent);
+    --ring: 355 75% 47%;
     
     --radius: 0.5rem;
     
     /* Custom design tokens */
-    --gradient-hero: linear-gradient(135deg, hsl(var(--bg)) 0%, hsl(215 25% 10%) 100%);
-    --gradient-card: linear-gradient(145deg, hsl(var(--bg-elevated)) 0%, hsl(215 18% 14%) 100%);
-    --shadow-elevated: 0 10px 40px -10px hsl(var(--bg) / 0.8);
-    --shadow-subtle: 0 4px 16px -4px hsl(var(--bg) / 0.4);
+    --gradient-hero: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 100%);
+    --gradient-card: linear-gradient(145deg, hsl(215 20% 12%) 0%, hsl(215 18% 14%) 100%);
+    --shadow-elevated: 0 10px 40px -10px hsl(210 24% 8% / 0.8);
+    --shadow-subtle: 0 4px 16px -4px hsl(210 24% 8% / 0.4);
     --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
     /* Sidebar tokens (consistent with main theme) */
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f1fb67c..6d2c9bf 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -25,7 +25,7 @@ export default {
         bg: "hsl(var(--bg))",
         "bg-elevated": "hsl(var(--bg-elevated))",
         ink: "hsl(var(--ink))",
-        muted: "hsl(var(--muted))",
+        muted: "hsl(var(--muted-foreground))",
         accent: "hsl(var(--accent))",
         link: "hsl(var(--link))",
         
@@ -52,7 +52,7 @@ export default {
           foreground: "hsl(var(--muted-foreground))",
         },
         "accent-color": {
-          DEFAULT: "hsl(var(--accent-color))",
+          DEFAULT: "hsl(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
         },
         popover: {
@@ -64,14 +64,14 @@ export default {
           foreground: "hsl(var(--card-foreground))",
         },
         sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
+          DEFAULT: "hsl(var(--background))",
+          foreground: "hsl(var(--foreground))",
+          primary: "hsl(var(--accent))",
+          "primary-foreground": "hsl(var(--accent-foreground))",
+          accent: "hsl(var(--secondary))",
+          "accent-foreground": "hsl(var(--secondary-foreground))",
+          border: "hsl(var(--border))",
+          ring: "hsl(var(--ring))",
         },
       },
       borderRadius: {