From 11039ac5033fc01a695fc8ca86e56729616e492f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 12 Jul 2025 17:56:57 +0000
Subject: [PATCH 1/2] Initial plan


From 9ccc9c6a0843b605f200a3c476abd4ebc4771af3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 12 Jul 2025 18:11:57 +0000
Subject: [PATCH 2/2] Complete color system overhaul with professional design
 improvements

Co-authored-by: Mbdulrohim <84357102+Mbdulrohim@users.noreply.github.com>
---
 src/components/layout/Footer.tsx            |  24 ++---
 src/components/layout/Header.tsx            |  16 ++--
 src/components/layout/MobileNav.tsx         |  21 ++--
 src/components/sections/AboutSection.tsx    |  16 ++--
 src/components/sections/ContactSection.tsx  |  57 ++++++-----
 src/components/sections/HeroSection.tsx     |  18 ++--
 src/components/sections/ProjectsSection.tsx |  56 ++++++-----
 src/components/sections/ServicesSection.tsx |  14 +--
 src/components/ui/Button.tsx                |   6 +-
 src/styles/globals.css                      |  97 +++++++++++++++++--
 src/styles/styles.css                       |  16 ----
 tailwind.config.ts                          | 100 ++++++++++++++++++--
 12 files changed, 297 insertions(+), 144 deletions(-)
 delete mode 100644 src/styles/styles.css

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 5711d31..a16595f 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -6,7 +6,7 @@ import TechIcons from '@/components/icons/TechIcons'
 export default function Footer() {
 
   return (
-    <footer className="bg-primary text-background py-12 mt-20">
+    <footer className="bg-primary-900 text-white py-12 mt-20">
       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
@@ -22,23 +22,23 @@ export default function Footer() {
             >
               Abdulrohim Mustapha
             </motion.h3>
-            <p className="text-sm text-background/80 leading-relaxed">
+            <p className="text-sm text-surface-300 leading-relaxed">
               Building innovative solutions across Web3, mobile, and cloud platforms
             </p>
             <div className="flex gap-4 mt-4">
               <a
                 href="mailto:your@email.com"
-                className="p-2 hover:bg-accent/10 rounded-lg transition-colors"
+                className="p-2 hover:bg-accent-600/10 rounded-lg transition-colors"
                 aria-label="Send email"
               >
-                <FiMail className="w-5 h-5" />
+                <FiMail className="w-5 h-5 text-accent-400" />
               </a>
               <a
                 href="https://github.com/yourprofile"
-                className="p-2 hover:bg-accent/10 rounded-lg transition-colors"
+                className="p-2 hover:bg-accent-600/10 rounded-lg transition-colors"
                 aria-label="GitHub profile"
               >
-                <FiCode className="w-5 h-5" />
+                <FiCode className="w-5 h-5 text-accent-400" />
               </a>
             </div>
           </div>
@@ -55,9 +55,9 @@ export default function Footer() {
                   >
                     <a 
                       href={`#${link.toLowerCase()}`} 
-                      className="text-background/80 hover:text-accent transition-colors flex items-center gap-2"
+                      className="text-surface-300 hover:text-accent-400 transition-colors flex items-center gap-2"
                     >
-                      <span className="text-accent">▹</span>
+                      <span className="text-accent-400">▹</span>
                       {link}
                     </a>
                   </motion.li>
@@ -88,7 +88,7 @@ export default function Footer() {
                   href={url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-2 text-background/80 hover:text-accent transition-colors"
+                  className="flex items-center gap-2 text-surface-300 hover:text-accent-400 transition-colors"
                   whileHover={{ x: 5 }}
                 >
                   <Icon className="w-5 h-5" />
@@ -100,10 +100,10 @@ export default function Footer() {
         </motion.div>
 
         {/* Copyright */}
-        <div className="border-t border-background/20 pt-8 text-center">
-          <p className="text-sm text-background/80">
+        <div className="border-t border-surface-600 pt-8 text-center">
+          <p className="text-sm text-surface-300">
             © {new Date().getFullYear()} Abdulrohim Mustapha. Crafted with
-            <span className="text-accent mx-1">⚡</span>
+            <span className="text-accent-400 mx-1">⚡</span>
             by a developer for developers
           </p>
         </div>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 6f36a3b..2fd9b9e 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -9,7 +9,7 @@ export default function Header() {
   const { theme, toggleTheme } = useTheme()
 
   return (
-    <header className="bg-surface/95 backdrop-blur-sm text-primary sticky top-0 z-50 shadow-sm dark:shadow-accent/10 border-b border-primary/10">
+    <header className="bg-background-secondary/95 backdrop-blur-sm text-text-primary sticky top-0 z-50 shadow-custom-sm border-b border-color-border">
       <nav className="mx-auto px-4 sm:px-6 lg:px-8 py-3 max-w-7xl">
         <div className="flex justify-between items-center">
           {/* Logo/Name with enhanced interaction */}
@@ -22,10 +22,10 @@ export default function Header() {
               className="flex items-center gap-2 group"
               aria-label="Home"
             >
-              <span className="text-2xl font-bold bg-accent text-surface px-3 py-1 rounded-lg shadow-md transition-all duration-300 group-hover:bg-accent/90">
+              <span className="text-2xl font-bold bg-accent-600 text-white px-3 py-1 rounded-lg shadow-custom-md transition-all duration-300 group-hover:bg-accent-700">
                 AM
               </span>
-              <span className="hidden md:inline-block text-xl font-semibold ml-2 text-primary hover:text-accent transition-colors">
+              <span className="hidden md:inline-block text-xl font-semibold ml-2 text-text-primary hover:text-accent-600 transition-colors">
                 Abdulrohim Mustapha
               </span>
             </Link>
@@ -39,11 +39,11 @@ export default function Header() {
                 <Link
                   key={link}
                   href={`#${link}`}
-                  className="relative px-2 py-1 text-sm font-medium text-primary/90 hover:text-accent transition-colors"
+                  className="relative px-2 py-1 text-sm font-medium text-text-secondary hover:text-accent-600 transition-colors"
                 >
                   {link.charAt(0).toUpperCase() + link.slice(1)}
                   <motion.span
-                    className="absolute left-0 -bottom-0.5 w-full h-px bg-accent origin-left scale-x-0"
+                    className="absolute left-0 -bottom-0.5 w-full h-px bg-accent-600 origin-left scale-x-0"
                     whileHover={{ scaleX: 1 }}
                     transition={{ duration: 0.3 }}
                   />
@@ -56,7 +56,7 @@ export default function Header() {
               onClick={toggleTheme}
               whileHover={{ scale: 1.1 }}
               whileTap={{ scale: 0.9 }}
-              className="p-2 rounded-lg hover:bg-accent/10 transition-colors"
+              className="p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-950 transition-colors"
               aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
             >
               {theme === 'dark' ? (
@@ -65,7 +65,7 @@ export default function Header() {
                   initial={{ rotate: -30, opacity: 0 }}
                   animate={{ rotate: 0, opacity: 1 }}
                 >
-                  <SunIcon className="w-6 h-6 text-accent" />
+                  <SunIcon className="w-6 h-6 text-accent-600" />
                 </motion.div>
               ) : (
                 <motion.div
@@ -73,7 +73,7 @@ export default function Header() {
                   initial={{ rotate: 30, opacity: 0 }}
                   animate={{ rotate: 0, opacity: 1 }}
                 >
-                  <MoonIcon className="w-6 h-6 text-accent" />
+                  <MoonIcon className="w-6 h-6 text-accent-600" />
                 </motion.div>
               )}
             </motion.button>
diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx
index 72c1bad..5da5db9 100644
--- a/src/components/layout/MobileNav.tsx
+++ b/src/components/layout/MobileNav.tsx
@@ -18,7 +18,7 @@ export default function MobileNav() {
     <div className="md:hidden">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="p-2 rounded-lg hover:bg-accent/10 transition-colors text-primary"
+        className="p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900 transition-colors text-text-primary"
         aria-label="Open navigation menu"
       >
         {isOpen ? (
@@ -34,9 +34,9 @@ export default function MobileNav() {
             initial={{ opacity: 0, y: -20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -20 }}
-            className="fixed inset-0 top-16 bg-surface/95 backdrop-blur-lg z-40"
+            className="fixed inset-0 top-16 bg-background-primary/95 backdrop-blur-lg z-40"
           >
-            <nav className="p-4 border-t border-primary/10 bg-primary">
+            <nav className="p-4 border-t border-color-border bg-background-secondary">
               <ul className="space-y-2">
                 {navItems.map((item, index) => (
                   <motion.li
@@ -48,14 +48,14 @@ export default function MobileNav() {
                     <Link
                       href={`#${item.id}`}
                       onClick={() => setIsOpen(false)}
-                      className="flex text-accent items-center gap-4 p-3 rounded-lg hover:bg-accent/10 transition-colors group"
+                      className="flex text-text-primary items-center gap-4 p-3 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900 transition-colors group"
                     >
-                      <item.icon className="w-5 h-5 text-accent shrink-0" />
-                      <span className="text-accent font-medium">
+                      <item.icon className="w-5 h-5 text-accent-600 shrink-0" />
+                      <span className="text-text-primary font-medium">
                         {item.label}
                       </span>
                       <motion.span
-                        className="ml-auto h-px bg-accent/20 flex-1 transition-all group-hover:bg-accent/50"
+                        className="ml-auto h-px bg-accent-600/20 flex-1 transition-all group-hover:bg-accent-600/50"
                         initial={{ width: 0 }}
                         animate={{ width: '100%' }}
                         transition={{ duration: 0.3 }}
@@ -66,17 +66,16 @@ export default function MobileNav() {
               </ul>
 
               {/* Social Links Section */}
-              <div className="mt-8 pt-6 border-t border-primary/10">
+              <div className="mt-8 pt-6 border-t border-color-border">
                 <div className="flex justify-center gap-6">
                   <a
                     href="https://github.com/Mbdulrohim"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="p-2 rounded-lg hover:bg-accent/10 transition-colors"
+                    className="p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900 transition-colors"
                   >
-                    <FiGithub className="w-6 h-6 text-accent hover:text-primary" />
+                    <FiGithub className="w-6 h-6 text-accent-600 hover:text-accent-700" />
                   </a>
-                
                 </div>
               </div>
             </nav>
diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx
index 7cf2c31..641cae9 100644
--- a/src/components/sections/AboutSection.tsx
+++ b/src/components/sections/AboutSection.tsx
@@ -4,7 +4,7 @@ import { skills } from '@/data/skills';
 
 export default function AboutSection() {
   return (
-    <section className="py-20 bg-primary/5">
+    <section className="py-20 bg-background-secondary">
       <div className="container mx-auto px-4">
         <motion.div 
           initial={{ opacity: 0 }}
@@ -14,8 +14,8 @@ export default function AboutSection() {
         >
           {/* Left Column */}
           <div>
-            <h2 className="text-4xl font-bold mb-6">About Me</h2>
-            <p className="text-text/80 mb-8">
+            <h2 className="text-4xl font-bold mb-6 text-text-primary">About Me</h2>
+            <p className="text-text-secondary mb-8 leading-relaxed">
               Full-stack developer with expertise in building cross-platform solutions 
               using modern web and blockchain technologies. Passionate about creating 
               efficient, scalable applications with great user experiences.
@@ -30,15 +30,15 @@ export default function AboutSection() {
                 initial={{ opacity: 0 }}
                 whileInView={{ opacity: 1 }}
                 viewport={{ once: true }}
-                className="p-4 bg-background dark:bg-primary/10 rounded-lg"
+                className="p-4 bg-background-elevated rounded-lg shadow-custom-sm border border-color-border"
               >
                 <div className="flex items-center gap-3 mb-2">
-                  <skill.icon className="w-6 h-6 text-accent" />
-                  <span className="font-medium">{skill.name}</span>
+                  <skill.icon className="w-6 h-6 text-accent-600" />
+                  <span className="font-medium text-text-primary">{skill.name}</span>
                 </div>
-                <div className="h-2 bg-gray-200 rounded-full">
+                <div className="h-2 bg-surface-200 dark:bg-surface-700 rounded-full">
                   <div 
-                    className="h-full bg-accent rounded-full transition-all duration-1000"
+                    className="h-full bg-accent-600 rounded-full transition-all duration-1000"
                     style={{ width: `${skill.level}%` }}
                   />
                 </div>
diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
index 6919cfd..cf50dd9 100644
--- a/src/components/sections/ContactSection.tsx
+++ b/src/components/sections/ContactSection.tsx
@@ -10,7 +10,7 @@ export default function ContactSection() {
             const [loading] = useState(false);
 
   return (
-    <section className="py-20" id='contact'>
+    <section className="py-20 bg-background-primary" id='contact'>
       <div className="container mx-auto px-4">
         <motion.div 
           initial={{ opacity: 0 }}
@@ -18,10 +18,9 @@ export default function ContactSection() {
           viewport={{ once: true }}
           className="max-w-2xl mx-auto text-center"
         >
-          <h2 className="text-4xl font-bold mb-6">Let&apos;s Connect</h2>
+          <h2 className="text-4xl font-bold mb-6 text-text-primary">Let&apos;s Connect</h2>
 
-          <p className="text-text/80 mb-12">
-          
+          <p className="text-text-secondary mb-12">
             Have a project in mind? Let&apos;s discuss how I can help bring it to life.
           </p>
 
@@ -30,46 +29,52 @@ export default function ContactSection() {
               <input
                 type="text"
                 placeholder="Name"
-                className="w-full px-4 py-3 rounded-lg bg-background dark:bg-primary/10 border border-text/20"
+                className="w-full px-4 py-3 rounded-lg bg-background-elevated border border-color-border focus:border-accent-600 focus:outline-none focus:ring-2 focus:ring-accent-600/20 transition-colors text-text-primary placeholder-text-muted"
               />
               <input
                 type="email"
                 placeholder="Email"
-                className="w-full px-4 py-3 rounded-lg bg-background dark:bg-primary/10 border border-text/20"
+                className="w-full px-4 py-3 rounded-lg bg-background-elevated border border-color-border focus:border-accent-600 focus:outline-none focus:ring-2 focus:ring-accent-600/20 transition-colors text-text-primary placeholder-text-muted"
               />
             </div>
             <textarea
               placeholder="Message"
               rows={5}
-              className="w-full px-4 py-3 rounded-lg bg-background dark:bg-primary/10 border border-text/20"
+              className="w-full px-4 py-3 rounded-lg bg-background-elevated border border-color-border focus:border-accent-600 focus:outline-none focus:ring-2 focus:ring-accent-600/20 transition-colors text-text-primary placeholder-text-muted"
             />
             <Button
-        type="submit"
-        className="w-full flex items-center justify-center gap-2 bg-accent hover:bg-accent/80 transition-all py-3 px-6 rounded-lg font-semibold"
-        disabled={loading}
-      >
-        {loading ? (
-          <>
-            <span className="animate-spin border-2 border-white border-t-transparent rounded-full w-5 h-5"></span>
-            Sending...
-          </>
-        ) : (
-          <>
-            <FiSend className="w-5 h-5" />
-            Send Message
-          </>
-        )}
-      </Button>
+              type="submit"
+              className="w-full flex items-center justify-center gap-2 bg-accent-600 hover:bg-accent-700 text-white transition-all py-3 px-6 rounded-lg font-semibold shadow-custom-md hover:shadow-custom-lg"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <span className="animate-spin border-2 border-white border-t-transparent rounded-full w-5 h-5"></span>
+                  Sending...
+                </>
+              ) : (
+                <>
+                  <FiSend className="w-5 h-5" />
+                  Send Message
+                </>
+              )}
+            </Button>
           </form>
 
           <div className="flex justify-center gap-6">
-            <a href="mailto:doyextech@gmail.com" className="text-accent hover:text-accent/80">
+            <a 
+              href="mailto:doyextech@gmail.com" 
+              className="text-accent-600 hover:text-accent-700 transition-colors p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900"
+            >
               <FiMail className="w-8 h-8" />
             </a>
-            <a href="https://github.com/mbdulrohim" className="text-accent hover:text-accent/80">
+            <a 
+              href="https://github.com/mbdulrohim" 
+              className="text-accent-600 hover:text-accent-700 transition-colors p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900"
+            >
               <FiGithub className="w-8 h-8" />
             </a>
-            {/* <a href="#" className="text-accent hover:text-accent/80">
+            {/* <a href="#" className="text-accent-600 hover:text-accent-700 transition-colors">
               <FiLinkedin className="w-8 h-8" />
             </a> */}
           </div>
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
index d61f686..3a5d85e 100644
--- a/src/components/sections/HeroSection.tsx
+++ b/src/components/sections/HeroSection.tsx
@@ -11,7 +11,7 @@ export default function HeroSection() {
   return (
     <section
       id="home"
-      className="min-h-screen flex items-center px-6 md:px-12 lg:px-20 text-center"
+      className="min-h-screen flex items-center px-6 md:px-12 lg:px-20 text-center bg-background-primary"
     >
       <motion.div
         initial={{ opacity: 0, y: 20 }}
@@ -23,7 +23,7 @@ export default function HeroSection() {
         <motion.div
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
-          className="mb-6 inline-block px-4 py-2 rounded-full bg-accent/10 text-accent mt-2"
+          className="mb-6 inline-block px-4 py-2 rounded-full bg-accent-50 text-accent-700 dark:bg-accent-900 dark:text-accent-300 mt-2 shadow-custom-sm"
         >
           <span className="text-sm md:text-base font-semibold">
             Full-Stack Developer
@@ -31,14 +31,14 @@ export default function HeroSection() {
         </motion.div>
 
         {/* Main Heading */}
-        <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 text-text-primary">
           Abdulrohim Mustapha
         </h1>
 
         {/* Tagline */}
-        <p className="text-lg sm:text-xl md:text-2xl mb-8 text-text/80">
-          Building <span className="text-highlight">Web3</span> &{" "}
-          <span className="text-accent">Cross-Platform</span> Solutions
+        <p className="text-lg sm:text-xl md:text-2xl mb-8 text-text-secondary">
+          Building <span className="text-highlight-600 font-medium">Web3</span> &{" "}
+          <span className="text-accent-600 font-medium">Cross-Platform</span> Solutions
         </p>
 
         {/* CTA Buttons */}
@@ -51,7 +51,7 @@ export default function HeroSection() {
                 .getElementById("projects")
                 ?.scrollIntoView({ behavior: "smooth" });
             }}
-            className="bg-accent text-white px-6 py-3 sm:px-8 sm:py-4 rounded-lg font-medium flex items-center gap-2 cursor-pointer"
+            className="bg-accent-600 hover:bg-accent-700 text-white px-6 py-3 sm:px-8 sm:py-4 rounded-lg font-medium flex items-center gap-2 cursor-pointer transition-all duration-200 shadow-custom-md hover:shadow-custom-lg"
           >
             View My Work
             <svg
@@ -77,7 +77,7 @@ export default function HeroSection() {
                 .getElementById("contact")
                 ?.scrollIntoView({ behavior: "smooth" });
             }}
-            className="border-2 border-accent text-accent px-6 py-3 sm:px-8 sm:py-4 rounded-lg font-medium"
+            className="border-2 border-accent-600 text-accent-600 hover:bg-accent-50 dark:hover:bg-accent-900 px-6 py-3 sm:px-8 sm:py-4 rounded-lg font-medium transition-all duration-200"
           >
             Contact Me
           </motion.button>
@@ -89,7 +89,7 @@ export default function HeroSection() {
             <div className="absolute inset-0 flex items-center justify-center">
               <div
                 className={`w-64 h-64 sm:w-72 sm:h-72 blur-[100px] rounded-full ${
-                  theme === "dark" ? "bg-accent/20" : "bg-accent/10"
+                  theme === "dark" ? "bg-accent-600/20" : "bg-accent-400/10"
                 }`}
               />
             </div>
diff --git a/src/components/sections/ProjectsSection.tsx b/src/components/sections/ProjectsSection.tsx
index 20489f1..637802c 100644
--- a/src/components/sections/ProjectsSection.tsx
+++ b/src/components/sections/ProjectsSection.tsx
@@ -9,7 +9,7 @@ export default function ProjectsSection() {
   const [selectedCategory, setSelectedCategory] = useState<'all' | 'web' | 'blockchain' | 'mobile'>('all');
 
   return (
-    <section className="py-20 " id='projects'>
+    <section className="py-20 bg-background-primary" id='projects'>
       <div className="container mx-auto px-4">
         {/* Section Header */}
         <motion.div 
@@ -18,25 +18,24 @@ export default function ProjectsSection() {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-4xl font-bold mb-4">Featured Projects</h2>
-          <p className="text-text/80 max-w-2xl mx-auto">
+          <h2 className="text-4xl font-bold mb-4 text-text-primary">Featured Projects</h2>
+          <p className="text-text-secondary max-w-2xl mx-auto">
             Showcasing my expertise across multiple platforms and technologies
           </p>
         </motion.div>
 
         {/* Filter Buttons */}
         <div className="flex flex-wrap gap-4 justify-center mb-12">
-  {(['all', 'web', 'blockchain', 'mobile'] as ('all' | 'web' | 'blockchain' | 'mobile')[]).map((category) => (
-    <Button
-      key={category}
-      variant={selectedCategory === category ? 'primary' : 'secondary'}
-      onClick={() => setSelectedCategory(category)}
-    >
-      {category}
-    </Button>
-  ))}
-</div>
-
+          {(['all', 'web', 'blockchain', 'mobile'] as ('all' | 'web' | 'blockchain' | 'mobile')[]).map((category) => (
+            <Button
+              key={category}
+              variant={selectedCategory === category ? 'primary' : 'secondary'}
+              onClick={() => setSelectedCategory(category)}
+            >
+              {category}
+            </Button>
+          ))}
+        </div>
 
         {/* Projects Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -58,29 +57,28 @@ const ProjectCard = ({ project }: { project: Project }) => (
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
-    className="bg-background dark:bg-primary/10 p-6 rounded-xl shadow-lg"
+    className="bg-background-elevated p-6 rounded-xl shadow-custom-lg border border-color-border hover:shadow-custom-lg transition-all duration-300"
   >
    {/* Image Section */}
    {project.image && (
-      <div className="aspect-video bg-gray-100 dark:bg-primary/20 rounded-lg mb-4">
+      <div className="aspect-video bg-surface-100 dark:bg-surface-800 rounded-lg mb-4 overflow-hidden">
        <Image
-  src={project.image}   // Image source URL (could be a relative path in public folder or external URL)
-  alt={project.title}   // Alt text for the image
-  layout="responsive"   // Use 'responsive' to make the image responsive
-  width={500}           // Set width for the image
-  height={280}          // Set height for the image
-  className="rounded-lg" // Optional, for styling
-/>
-
+          src={project.image}   
+          alt={project.title}   
+          layout="responsive"   
+          width={500}           
+          height={280}          
+          className="rounded-lg object-cover" 
+        />
       </div>
     )}
-    <h3 className="text-xl font-semibold mb-2">{project.title}</h3>
-    <p className="text-text/80 mb-4">{project.description}</p>
+    <h3 className="text-xl font-semibold mb-2 text-text-primary">{project.title}</h3>
+    <p className="text-text-secondary mb-4">{project.description}</p>
     <div className="flex flex-wrap gap-2 mb-4">
       {project.techStack.map((tech) => (
         <span
           key={tech}
-          className="px-3 py-1 text-sm rounded-full bg-accent/10 text-accent"
+          className="px-3 py-1 text-sm rounded-full bg-accent-50 text-accent-700 dark:bg-accent-900 dark:text-accent-300"
         >
           {tech}
         </span>
@@ -88,12 +86,12 @@ const ProjectCard = ({ project }: { project: Project }) => (
     </div>
     <div className="flex gap-4">
       {project.github && (
-        <a href={project.github} className="text-accent hover:underline">
+        <a href={project.github} className="text-accent-600 hover:text-accent-700 hover:underline transition-colors">
           GitHub
         </a>
       )}
       {project.demo && (
-        <a href={project.demo} className="text-accent hover:underline">
+        <a href={project.demo} className="text-accent-600 hover:text-accent-700 hover:underline transition-colors">
           Live Demo
         </a>
       )}
diff --git a/src/components/sections/ServicesSection.tsx b/src/components/sections/ServicesSection.tsx
index dc432e5..1b654a4 100644
--- a/src/components/sections/ServicesSection.tsx
+++ b/src/components/sections/ServicesSection.tsx
@@ -27,7 +27,7 @@ const services = [
 
 export default function ServicesSection() {
   return (
-    <section className="py-20 bg-primary/5" id='services'>
+    <section className="py-20 bg-background-secondary" id='services'>
       <div className="container mx-auto px-4">
         <motion.div 
           initial={{ opacity: 0 }}
@@ -35,8 +35,8 @@ export default function ServicesSection() {
           viewport={{ once: true }}
           className="text-center mb-16"
         >
-          <h2 className="text-4xl font-bold mb-4">Services</h2>
-          <p className="text-text/80 max-w-2xl mx-auto">
+          <h2 className="text-4xl font-bold mb-4 text-text-primary">Services</h2>
+          <p className="text-text-secondary max-w-2xl mx-auto">
             Comprehensive solutions for modern digital challenges
           </p>
         </motion.div>
@@ -49,11 +49,11 @@ export default function ServicesSection() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ delay: index * 0.1 }}
-              className="p-8 bg-background dark:bg-primary/10 rounded-xl shadow-lg"
+              className="p-8 bg-background-elevated rounded-xl shadow-custom-lg hover:shadow-custom-lg transition-all duration-300 border border-color-border"
             >
-              <service.icon className="w-12 h-12 text-accent mb-6" />
-              <h3 className="text-xl font-semibold mb-4">{service.title}</h3>
-              <p className="text-text/80">{service.description}</p>
+              <service.icon className="w-12 h-12 text-accent-600 mb-6" />
+              <h3 className="text-xl font-semibold mb-4 text-text-primary">{service.title}</h3>
+              <p className="text-text-secondary">{service.description}</p>
             </motion.div>
           ))}
         </div>
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index cc5bc8a..336ee1f 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -11,10 +11,10 @@ export function Button({ children, variant = 'primary', ...props }: ButtonProps)
     <motion.button
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
-      className={`px-6 py-3 rounded-lg font-medium transition-colors ${
+      className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-custom-sm hover:shadow-custom-md ${
         variant === 'primary'
-          ? 'bg-accent text-white'
-          : 'bg-background dark:bg-primary/20 text-text border border-accent'
+          ? 'bg-accent-600 hover:bg-accent-700 text-white'
+          : 'bg-background-elevated text-text-primary border border-accent-600 hover:bg-accent-50 dark:hover:bg-accent-900'
       }`}
       {...props} // Spread the rest of the props
     >
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3fe6ad9..5cc70f4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,13 +3,63 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  /* Light mode colors */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f8fafc;
+  --color-bg-elevated: #f1f5f9;
+  
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #334155;
+  --color-text-muted: #64748b;
+  
+  --color-border: #e2e8f0;
+  --color-border-light: #f1f5f9;
+  
+  /* Brand colors remain consistent */
+  --color-accent: #3b82f6;
+  --color-accent-hover: #2563eb;
+  --color-highlight: #14b8a6;
+  --color-highlight-hover: #0d9488;
+  
+  /* Status colors */
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  
+  /* Shadow colors */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
 html.dark {
-  --background: #0a0a0a;
-  --foreground: #ededed;
+  /* Dark mode colors */
+  --color-bg-primary: #0f172a;
+  --color-bg-secondary: #1e293b;
+  --color-bg-elevated: #334155;
+  
+  --color-text-primary: #f8fafc;
+  --color-text-secondary: #e2e8f0;
+  --color-text-muted: #94a3b8;
+  
+  --color-border: #334155;
+  --color-border-light: #475569;
+  
+  /* Brand colors with better contrast for dark mode */
+  --color-accent: #60a5fa;
+  --color-accent-hover: #3b82f6;
+  --color-highlight: #2dd4bf;
+  --color-highlight-hover: #14b8a6;
+  
+  /* Status colors for dark mode */
+  --color-success: #34d399;
+  --color-warning: #fbbf24;
+  --color-error: #f87171;
+  
+  /* Shadow colors for dark mode */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
 }
 
 html {
@@ -17,9 +67,10 @@ html {
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  color: var(--color-text-primary);
+  background: var(--color-bg-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 /* Prevent body scroll when mobile nav is open */
@@ -39,3 +90,35 @@ body.menu-open {
     padding: 0.75rem 1.5rem;
   }
 }
+
+/* Utility classes for consistent styling */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+  
+  .shadow-custom-sm {
+    box-shadow: var(--shadow-sm);
+  }
+  
+  .shadow-custom-md {
+    box-shadow: var(--shadow-md);
+  }
+  
+  .shadow-custom-lg {
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+/* Focus states for better accessibility */
+@layer base {
+  *:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+  
+  button:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}
diff --git a/src/styles/styles.css b/src/styles/styles.css
deleted file mode 100644
index 83d6084..0000000
--- a/src/styles/styles.css
+++ /dev/null
@@ -1,16 +0,0 @@
-:root {
-    --color-primary: #0F172A; /* Dark Blue – Professional, Futuristic */
-    --color-accent: #38BDF8; /* Cyber Blue – Innovation & Tech */
-    --color-highlight: #14B8A6; /* Turquoise – Modern & Fresh */
-    --color-background: #F1F5F9; /* Soft Gray – Clean & Minimal */
-    --color-text: #1E293B; /* Deep Gray for readability */
-  }
-  
-  .dark {
-    --color-primary: #1E293B; /* Slightly lighter dark blue for dark mode */
-    --color-accent: #0284C7; /* A deeper Cyber Blue for contrast */
-    --color-highlight: #0D9488; /* Darker turquoise for a balanced dark theme */
-    --color-background: #0F172A; /* Fully dark background */
-    --color-text: #E2E8F0; /* Light gray for contrast */
-  }
-  
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 10bb5e4..908423e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,18 +2,104 @@ import type { Config } from "tailwindcss";
 
 export default {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
-        
-        primary: "#0F172A",    // Main Dark Blue
-        accent: "#38BDF8",     // Cyber Blue
-        highlight: "#14B8A6",  // Turquoise
-        background: "#F1F5F9", // Soft Gray
+        // Primary colors
+        primary: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+        },
+        // Accent colors (Blue)
+        accent: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        // Highlight colors (Teal)
+        highlight: {
+          50: '#f0fdfa',
+          100: '#ccfbf1',
+          200: '#99f6e4',
+          300: '#5eead4',
+          400: '#2dd4bf',
+          500: '#14b8a6',
+          600: '#0d9488',
+          700: '#0f766e',
+          800: '#115e59',
+          900: '#134e4a',
+        },
+        // Surface colors
+        surface: {
+          50: '#ffffff',
+          100: '#f8fafc',
+          200: '#f1f5f9',
+          300: '#e2e8f0',
+          400: '#cbd5e1',
+          500: '#94a3b8',
+          600: '#64748b',
+          700: '#475569',
+          800: '#1e293b',
+          900: '#0f172a',
+        },
+        // Text colors
+        text: {
+          primary: 'var(--color-text-primary)',
+          secondary: 'var(--color-text-secondary)',
+          muted: 'var(--color-text-muted)',
+        },
+        // Background colors
+        background: {
+          primary: 'var(--color-bg-primary)',
+          secondary: 'var(--color-bg-secondary)',
+          elevated: 'var(--color-bg-elevated)',
+        },
       },
       animation: {
         'gradient-x': 'gradient-x 8s ease infinite',
-        'float': 'float 6s ease-in-out infinite'
+        'float': 'float 6s ease-in-out infinite',
+        'fade-in': 'fade-in 0.5s ease-in-out',
+        'slide-up': 'slide-up 0.5s ease-out',
+      },
+      keyframes: {
+        'gradient-x': {
+          '0%, 100%': {
+            'background-size': '200% 200%',
+            'background-position': 'left center'
+          },
+          '50%': {
+            'background-size': '200% 200%',
+            'background-position': 'right center'
+          }
+        },
+        'float': {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-20px)' }
+        },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' }
+        },
+        'slide-up': {
+          '0%': { transform: 'translateY(20px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' }
+        }
       },
       fontFamily: {
         inter: ["var(--font-inter)"],
@@ -21,8 +107,6 @@ export default {
         poppins: ["var(--font-poppins)"],
       },
     },
-    darkMode: 'class'
-
   },
   plugins:[]
 } satisfies Config;