Update content and styling

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>

src/index.css

@@ -6,50 +6,50 @@
 
 @layer base {
   :root {
-    /* Core brand colors (HSL) */
+    /* Core brand colors (HSL values only) */
-    --bg: 210 24% 7%; /* #0B0F13 near-black */
+    --bg: 210 24% 8%;
-    --bg-elevated: 215 20% 12%; /* #121826 */
+    --bg-elevated: 215 20% 12%;
-    --ink: 210 17% 97%; /* #F7FAFC off-white */
+    --ink: 210 17% 97%;
-    --muted: 213 15% 70%; /* #A7B1C2 */
+    --muted: 213 15% 65%;
-    --accent: 355 75% 47%; /* #C1272D brand red */
+    --accent: 355 75% 47%;
-    --link: 213 94% 68%; /* #60A5FA */
+    --link: 213 94% 68%;
     
-    /* Semantic mappings */
+    /* Semantic color mappings (use HSL values directly) */
-    --background: var(--bg);
+    --background: 210 24% 8%;
-    --foreground: var(--ink);
+    --foreground: 210 17% 97%;
     
-    --card: var(--bg-elevated);
+    --card: 215 20% 12%;
-    --card-foreground: var(--ink);
+    --card-foreground: 210 17% 97%;
     
-    --popover: var(--bg-elevated);
+    --popover: 215 20% 12%;
-    --popover-foreground: var(--ink);
+    --popover-foreground: 210 17% 97%;
     
-    --primary: var(--accent);
+    --primary: 355 75% 47%;
-    --primary-foreground: var(--ink);
+    --primary-foreground: 210 17% 97%;
     
-    --secondary: var(--bg-elevated);
+    --secondary: 215 20% 16%;
-    --secondary-foreground: var(--ink);
+    --secondary-foreground: 210 17% 97%;
     
-    --muted: var(--bg-elevated);
+    --muted: 215 20% 16%;
-    --muted-foreground: var(--muted);
+    --muted-foreground: 213 15% 65%;
     
-    --accent-color: var(--accent);
+    --accent: 355 75% 47%;
-    --accent-foreground: var(--ink);
+    --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-hero: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 100%);
-    --gradient-card: linear-gradient(145deg, hsl(var(--bg-elevated)) 0%, hsl(215 18% 14%) 100%);
+    --gradient-card: linear-gradient(145deg, hsl(215 20% 12%) 0%, hsl(215 18% 14%) 100%);
-    --shadow-elevated: 0 10px 40px -10px hsl(var(--bg) / 0.8);
+    --shadow-elevated: 0 10px 40px -10px hsl(210 24% 8% / 0.8);
-    --shadow-subtle: 0 4px 16px -4px hsl(var(--bg) / 0.4);
+    --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) */

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))",
+          DEFAULT: "hsl(var(--background))",
-          foreground: "hsl(var(--sidebar-foreground))",
+          foreground: "hsl(var(--foreground))",
-          primary: "hsl(var(--sidebar-primary))",
+          primary: "hsl(var(--accent))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          "primary-foreground": "hsl(var(--accent-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
+          accent: "hsl(var(--secondary))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          "accent-foreground": "hsl(var(--secondary-foreground))",
-          border: "hsl(var(--sidebar-border))",
+          border: "hsl(var(--border))",
-          ring: "hsl(var(--sidebar-ring))",
+          ring: "hsl(var(--ring))",
         },
       },
       borderRadius: {