diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..db0613a
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,115 @@
+# Portfolio Codebase Instructions
+
+## Architecture Overview
+
+This is a **React + TypeScript portfolio website** with a unique modular SCSS theme system and full-stack contact functionality. The project follows a strict separation between presentation (React components), styling (SCSS modules), configuration (TypeScript configs), and data models.
+
+### Key Architectural Patterns
+
+- **Theme-driven SCSS**: All styling uses CSS custom properties via `@include t.theme-vars()` in `src/scss/themes/`. Never hardcode colors - use theme variables.
+- **Configuration-driven content**: Personal info, texts, and data models live in `src/config/` and `src/data/` - modify these instead of components for content changes.
+- **Hash-based navigation**: Uses React Router with hash fragments (`#about`, `#projects`) for smooth scrolling between sections on the homepage.
+- **Centralized personal data**: All contact info, social links, and professional details in `src/config/personal.ts`.
+
+## Critical Development Workflows
+
+### Development Setup
+
+```bash
+npm run dev          # Start Vite dev server
+npm run build        # TypeScript compile + Vite build
+npm run deploy       # Build + custom SFTP deployment via deploy.js
+```
+
+### Theme System Workflow
+
+1. Define theme variables in `src/scss/themes/_base.scss` (light) and corresponding dark theme
+2. Import themes via `src/scss/themes/_index.scss`
+3. Apply themes with `@include t.theme-vars(t.$light-theme)` in components
+4. Theme switching handled by `AppRouter.tsx` via `data-theme` attribute
+
+### Backend Integration
+
+- Contact form uses Node.js/Express backend in `backend/` directory
+- GDPR-compliant with rate limiting, validation, and email obfuscation
+- Email service via Nodemailer with Gmail SMTP (configured via `.env`)
+
+## Project-Specific Conventions
+
+### File Organization
+
+- **Components**: `src/components/sections/` for page sections, `src/components/layout/` for navigation/footer
+- **Styling**: Mirror component structure in `src/scss/sections/` and `src/scss/layout/`
+- **Data Models**: TypeScript interfaces in `src/data/` (Project.ts, Skill.ts, etc.)
+- **Configuration**: All content configuration in `src/config/` (personal.ts, texts.ts, api.ts)
+
+### SCSS Architecture
+
+```scss
+// Always use theme variables - example from any component:
+@use '../../scss/themes/index' as t;
+
+.component {
+  background: var(--background);
+  color: var(--text);
+  box-shadow: var(--shadow-card);
+}
+```
+
+### Data Model Pattern
+
+- All content interfaces defined in `src/data/`
+- Use `src/config/texts.ts` for all displayable text (i18n preparation)
+- Personal/contact data centralized in `src/config/personal.ts` with helper functions
+
+### Component Props Pattern
+
+```tsx
+// All sections follow this pattern for text overrides:
+interface SectionProps {
+  title?: string; // Allow text overrides
+  subtitle?: string; // for customization
+}
+
+export default function Section(props: SectionProps = {}) {
+  const texts = getTexts().sectionName;
+  const { title = texts.title, subtitle = texts.subtitle } = props;
+}
+```
+
+## Integration Points
+
+### Theme System Integration
+
+- `AppRouter.tsx` manages global theme state and localStorage persistence
+- Theme switching via CSS custom properties, not CSS-in-JS
+- All components must use theme variables, never hardcoded colors
+
+### Contact Form Flow
+
+1. Frontend form in `ContactSection.tsx`
+2. Validates and posts to `/api/contact` endpoint
+3. Backend in `backend/routes/contact.js` handles GDPR compliance, rate limiting, validation
+4. Email sent via `backend/services/emailService.js` using Nodemailer
+
+### Deployment Process
+
+- Custom SFTP deployment via `deploy.js` script
+- Prompts for credentials, uploads `dist/` contents
+- Vercel config available as alternative in `vercel.json`
+
+## Common Pitfalls
+
+- **Never bypass theme variables** - always use CSS custom properties from theme system
+- **Don't edit component text directly** - update `src/config/texts.ts` instead
+- **Personal data changes** - modify `src/config/personal.ts`, not component files
+- **SCSS imports** - use `@use` not `@import` for better performance and scoping
+- **Hash navigation** - remember hash-based routing for section navigation on homepage
+
+## Key Files for AI Context
+
+- `src/app/AppRouter.tsx` - Theme management and routing logic
+- `src/config/personal.ts` - All personal/professional data
+- `src/scss/themes/_base.scss` - Theme variable definitions
+- `backend/routes/contact.js` - Contact form API with GDPR compliance
+- `deploy.js` - Custom deployment automation
diff --git a/index.html b/index.html
index f1606d6..29b5442 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sascha Bach Portfolio</title>
   </head>
diff --git a/package-lock.json b/package-lock.json
index 8f3cf61..e5e477d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,9 +20,10 @@
         "@types/react": "^19.1.9",
         "@types/react-dom": "^19.1.7",
         "@vitejs/plugin-react": "^4.7.0",
+        "babel-plugin-react-compiler": "1.0.0",
         "dotenv": "^17.2.2",
         "eslint": "^9.32.0",
-        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-hooks": "^7.0.0",
         "eslint-plugin-react-refresh": "^0.4.20",
         "globals": "^16.3.0",
         "sass": "^1.90.0",
@@ -2134,6 +2135,16 @@
         "safer-buffer": "~2.1.0"
       }
     },
+    "node_modules/babel-plugin-react-compiler": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz",
+      "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2570,13 +2581,20 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
-      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.0.tgz",
+      "integrity": "sha512-fNXaOwvKwq2+pXiRpXc825Vd63+KM4DLL40Rtlycb8m7fYpp6efrTp1sa6ZbP/Ap58K2bEKFXRmhURE+CJAQWw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.22.4 || ^4.0.0",
+        "zod-validation-error": "^3.0.3 || ^4.0.0"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "peerDependencies": {
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
@@ -2879,6 +2897,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4075,6 +4110,29 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
+      "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index ec7eb4a..637d166 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,10 @@
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^4.7.0",
+    "babel-plugin-react-compiler": "1.0.0",
     "dotenv": "^17.2.2",
     "eslint": "^9.32.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
     "sass": "^1.90.0",
diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx
index 2faca93..e2933ee 100644
--- a/src/components/sections/AboutSection.tsx
+++ b/src/components/sections/AboutSection.tsx
@@ -10,7 +10,6 @@ interface AboutSectionProps {
   subtitle?: string;
   bio?: string[];
   profileImage?: string;
-  skillBadges?: SkillBadge[];
   featureCards?: Service[];
 }
 
@@ -24,12 +23,6 @@ export default function AboutSection(props: AboutSectionProps = {}) {
     subtitle = texts.subtitle,
     bio = texts.bio,
     profileImage = saschaImage,
-    skillBadges = [
-      { text: "Angular & React Developer", colorClass: "primary" },
-      { text: "Responsive Design Expert", colorClass: "secondary" },
-      { text: "Cross-Browser Compatible", colorClass: "tertiary" },
-      { text: "Continuous Learner", colorClass: "quaternary" }
-    ],
     featureCards = [
       {
         icon: Code,
@@ -78,7 +71,7 @@ export default function AboutSection(props: AboutSectionProps = {}) {
               alt={`${name} - Web Developer`}
               className="about-section__image"
             />
-            <div className="about-section__image-overlay"></div>
+            <div className="about-section__image-overlay" aria-label={`${name}`}></div>
           </div>
 
           <div className="about-section__bio-section">
@@ -92,17 +85,6 @@ export default function AboutSection(props: AboutSectionProps = {}) {
                 ))}
               </div>
             </div>
-
-            <div className="about-section__skill-badges">
-              {skillBadges.map((badge, index) => (
-                <span
-                  key={index}
-                  className={`about-section__skill-badge about-section__skill-badge--${badge.colorClass}`}
-                >
-                  {badge.text}
-                </span>
-              ))}
-            </div>
           </div>
         </div>
 
diff --git a/src/components/sections/ProjectsSection.tsx b/src/components/sections/ProjectsSection.tsx
index e17fe7f..37b00d4 100644
--- a/src/components/sections/ProjectsSection.tsx
+++ b/src/components/sections/ProjectsSection.tsx
@@ -27,8 +27,8 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
         description: "A personal portfolio website to showcase my skills, projects, and experience.",
         image: portfolioImage,
         technologies: ["React", "TypeScript", "SCSS", "Vercel", "Github Copilot"],
-        github: personalConfig.projects.portfolio,
-        live: ""
+        github: personalConfig.gitProjects.portfolio,
+        live: personalConfig.projectsUrls.portfolio
       },
       {
         id: 2,
@@ -36,7 +36,7 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
         description: "A virtual reality application for analysis of motion sickness in VR environments from 2015.",
         image: ergoVRImage,
         technologies: ["Unity3D", "C#", "Oculus SDK"],
-        github: personalConfig.projects.ergoVR
+        github: personalConfig.gitProjects.ergoVR
       },
       {
         id: 3,
@@ -44,7 +44,7 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
         description: "Participated in the development of a web-platform for a fitness racing game for Icaros GmbH until 2018.",
         image: icaraceImage,
         technologies: ["Angular 4", "Typescript", "HTML", "CSS"],
-        github: personalConfig.projects.ergoVR
+        github: personalConfig.gitProjects.ergoVR
       }
     ]
   } = props;
diff --git a/src/components/sections/SkillsSection.tsx b/src/components/sections/SkillsSection.tsx
index 10a533c..d454789 100644
--- a/src/components/sections/SkillsSection.tsx
+++ b/src/components/sections/SkillsSection.tsx
@@ -46,9 +46,9 @@ export default function SkillsSection(props: SkillsSectionProps = {}) {
       {
         title: "Styling & Design",
         skills: [
+          { skill: "Accessibility (a11y) Standards", value: 90 },
           { skill: "SCSS/Sass", value: 95 },
           { skill: "CSS3", value: 90 },
-          { skill: "Accessibility (a11y) Standards", value: 45 },
           { skill: "Bootstrap", value: 65 }
         ]
       },
@@ -124,7 +124,7 @@ export default function SkillsSection(props: SkillsSectionProps = {}) {
                           <span className="skills-section__skill-level">
                             {displayLevel}
                           </span>
-                          <span className="skills-section__skill-percentage">
+                          <span className="skills-section__skill-percentage" aria-hidden="true">
                             {skillItem.value}%
                           </span>
                         </div>
diff --git a/src/config/personal.ts b/src/config/personal.ts
index 07a9181..7b0d473 100644
--- a/src/config/personal.ts
+++ b/src/config/personal.ts
@@ -22,8 +22,12 @@ export const personalConfig = {
     },
   },
 
+  projectsUrls: {
+    portfolio: 'https://www.sascha-bach.de',
+  },
+
   // Project Repository
-  projects: {
+  gitProjects: {
     portfolio: 'https://github.com/LuciusShadow/portfolio-page',
     ergoVR: 'https://github.com/LuciusShadow/ErgoVR',
   },
diff --git a/src/config/texts.ts b/src/config/texts.ts
index d460877..5cef05f 100644
--- a/src/config/texts.ts
+++ b/src/config/texts.ts
@@ -256,7 +256,7 @@ export const defaultTexts: TextConfig = {
 
   projects: {
     title: 'Featured Projects',
-    subtitle: 'A showcase of my recent work and personal projects',
+    subtitle: 'A showcase of my work and personal projects',
     codeButtonText: 'Code',
     liveButtonText: 'Live',
   },
diff --git a/src/scss/sections/skills-section.scss b/src/scss/sections/skills-section.scss
index daf0c3c..2de813f 100644
--- a/src/scss/sections/skills-section.scss
+++ b/src/scss/sections/skills-section.scss
@@ -6,6 +6,11 @@
   background: var(--skills-background);
   position: relative;
 
+  // Mobile responsiveness
+  @include globals.mobile-only {
+    padding: 3rem 0;
+  }
+
   // Add decorative background elements
   &::before {
     content: '';
@@ -394,10 +399,3 @@
     opacity: 0;
   }
 }
-
-// Mobile responsiveness
-@include globals.mobile-only {
-  .skills-section {
-    padding: 3rem 0;
-  }
-}
diff --git a/src/scss/themes/_about.scss b/src/scss/themes/_about.scss
index 0fc982e..59a314e 100644
--- a/src/scss/themes/_about.scss
+++ b/src/scss/themes/_about.scss
@@ -1,72 +1,182 @@
+// Base color variables
+$blue-primary: #2563eb;
+$blue-secondary: #1d4ed8;
+$blue-tertiary: #18338c;
+$blue-light: #3b82f6;
+$blue-lighter: #93c5fd;
+$blue-lightest: #dbeafe;
+$blue-ultralight: #bfdbfe;
+$blue-dark: #1e3a8a;
+$blue-darker: #1e40af;
+
+$green-primary: #059669;
+$green-secondary: #047857;
+$green-tertiary: #13582e;
+$green-light: #10b981;
+$green-lighter: #34d399;
+$green-lightest: #86efac;
+$green-ultralight: #dcfce7;
+$green-dark: #14532d;
+$green-darker: #166534;
+
+$teal-primary: #0d9488;
+$teal-secondary: #14b8a6;
+$teal-tertiary: #073c39;
+$teal-light: #5eead4;
+$teal-lighter: #99f6e4;
+$teal-lightest: #ccfbf1;
+$teal-dark: #115e59;
+$teal-darker: #134e4a;
+
+$purple-primary: #9333ea;
+$purple-secondary: #551fad;
+$purple-tertiary: #3c0d9c;
+$purple-light: #a855f7;
+$purple-lighter: #c4b5fd;
+$purple-lightest: #e9d5ff;
+$purple-ultralight: #ddd6fe;
+$purple-dark: #581c87;
+$purple-darker: #6b21a8;
+
+$orange-primary: #ea580c;
+$orange-secondary: #9a3412;
+$orange-tertiary: #7c2d12;
+$orange-light: #fdba74;
+$orange-lighter: #fed7aa;
+$orange-dark: #9a3412;
+$orange-darker: #7c2d12;
+
+$slate-primary: #1e293b;
+$slate-secondary: #334155;
+
+// Background colors
+$about-bg-light-start: #e0e7ef;
+$about-bg-light-end: #bae6fd;
+$about-bg-dark-start: #13582e;
+$about-bg-dark-end: #1e293b;
+
+// Alpha values
+$alpha-overlay: 0.2;
+$alpha-bg-low: 0.3;
+
+// WCAG AAA compliant text colors
+$text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds
+$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
+
 $about-light-theme: (
   // About section colors
-  about-background: linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%),
-  // soft green to blue dbeafe
-  gradient-about-title: linear-gradient(90deg, #059669, #0d9488),
-  about-greeting-color: #047857,
+  about-background:
+    linear-gradient(135deg, $about-bg-light-start 0%, $about-bg-light-end 100%),
+  gradient-about-title: linear-gradient(90deg, $green-primary, $teal-primary),
+  about-greeting-color: $green-secondary,
   gradient-image-overlay:
-    linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
-  // Skill badge colors using visual hierarchy
-  skill-badge-primary-bg: #dbeafe,
-  skill-badge-primary-text: #1e40af,
-  skill-badge-secondary-bg: #dcfce7,
-  skill-badge-secondary-text: #166534,
-  skill-badge-tertiary-bg: #e9d5ff,
-  skill-badge-tertiary-text: #7c2d12,
-  skill-badge-quaternary-bg: #fed7aa,
-  skill-badge-quaternary-text: #9a3412,
+    linear-gradient(
+      45deg,
+      rgba($blue-primary, $alpha-overlay),
+      rgba($purple-primary, $alpha-overlay)
+    ),
+  // Skill badge colors - FIXED for AAA contrast
+  skill-badge-primary-bg: $blue-lightest,
+  skill-badge-primary-text: $text-aaa-light,
+  // Changed from $blue-tertiary for AAA contrast
+  skill-badge-secondary-bg: $green-ultralight,
+  skill-badge-secondary-text: $text-aaa-light,
+  // Changed from $green-tertiary for AAA contrast
+  skill-badge-tertiary-bg: $purple-lightest,
+  skill-badge-tertiary-text: $text-aaa-light,
+  // Changed from $orange-tertiary for AAA contrast
+  skill-badge-quaternary-bg: $orange-lighter,
+  skill-badge-quaternary-text: $text-aaa-light,
 
-  // Feature card colors using visual hierarchy
-  feature-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
-  feature-card-secondary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
-  feature-card-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4),
-  feature-icon-primary: #2563eb,
-  feature-icon-secondary: #9333ea,
-  feature-icon-tertiary: #0d9488,
+  // Changed from $orange-secondary for AAA contrast
+  // Feature card colors - FIXED for AAA contrast
+  feature-card-primary-bg:
+    linear-gradient(135deg, $blue-lightest, $blue-ultralight),
+  feature-card-secondary-bg:
+    linear-gradient(135deg, $purple-lightest, $purple-ultralight),
+  feature-card-tertiary-bg:
+    linear-gradient(135deg, $teal-lightest, $teal-lighter),
+  feature-icon-primary: $blue-primary,
+  feature-icon-secondary: $purple-primary,
+  feature-icon-tertiary: $teal-primary,
 
-  feature-title-primary: #1e40af,
-  feature-title-secondary: #7c3aed,
-  feature-title-tertiary: #0f766e,
+  // Text colors - FIXED for AAA contrast
+  feature-title-primary: $text-aaa-light,
+  // Changed from $blue-tertiary for AAA contrast
+  feature-title-secondary: $text-aaa-light,
+  // Changed from $purple-tertiary for AAA contrast
+  feature-title-tertiary: $text-aaa-light,
 
-  feature-description-primary: #1d4ed8,
-  feature-description-secondary: #6d28d9,
-  feature-description-tertiary: #115e59
+  // Changed from $teal-tertiary for AAA contrast
+  feature-description-primary: $text-aaa-light,
+  // Changed from $blue-secondary for AAA contrast
+  feature-description-secondary: $text-aaa-light,
+  // Changed from $purple-secondary for AAA contrast
+  feature-description-tertiary: $text-aaa-light
+    // Changed from $teal-dark for AAA contrast
 );
 
 $about-dark-theme: (
   // About section colors
-  about-background: linear-gradient(135deg, #166534 0%, #1e293b 100%),
-  // deep green to blue
-  gradient-about-title: linear-gradient(90deg, #10b981, #14b8a6),
-  about-greeting-color: #34d399,
+  about-background:
+    linear-gradient(135deg, $about-bg-dark-start 0%, $about-bg-dark-end 100%),
+  gradient-about-title: linear-gradient(90deg, $green-light, $teal-secondary),
+  about-greeting-color: $green-lighter,
   gradient-image-overlay:
-    linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
-  // Skill badge colors using visual hierarchy
-  skill-badge-primary-bg: rgba(30, 58, 138, 0.3),
-  skill-badge-primary-text: #93c5fd,
-  skill-badge-secondary-bg: rgba(20, 83, 45, 0.3),
-  skill-badge-secondary-text: #86efac,
-  skill-badge-tertiary-bg: rgba(88, 28, 135, 0.3),
-  skill-badge-tertiary-text: #c4b5fd,
-  skill-badge-quaternary-bg: rgba(154, 52, 18, 0.3),
-  skill-badge-quaternary-text: #fdba74,
+    linear-gradient(
+      45deg,
+      rgba($blue-primary, $alpha-overlay),
+      rgba($purple-primary, $alpha-overlay)
+    ),
+  // Skill badge colors - FIXED for AAA contrast
+  skill-badge-primary-bg: rgba($blue-dark, $alpha-bg-low),
+  skill-badge-primary-text: $text-aaa-dark,
+  // Changed from $blue-lighter for AAA contrast
+  skill-badge-secondary-bg: rgba($green-dark, $alpha-bg-low),
+  skill-badge-secondary-text: $text-aaa-dark,
+  // Changed from $green-lightest for AAA contrast
+  skill-badge-tertiary-bg: rgba($purple-dark, $alpha-bg-low),
+  skill-badge-tertiary-text: $text-aaa-dark,
+  // Changed from $purple-lighter for AAA contrast
+  skill-badge-quaternary-bg: rgba($orange-darker, $alpha-bg-low),
+  skill-badge-quaternary-text: $text-aaa-dark,
 
-  // Feature card colors using visual hierarchy
+  // Changed from $orange-light for AAA contrast
+  // Feature card colors - Enhanced for better contrast
   feature-card-primary-bg:
-    linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
+    linear-gradient(
+      135deg,
+      rgba($blue-dark, $alpha-bg-low),
+      rgba($blue-darker, $alpha-bg-low)
+    ),
   feature-card-secondary-bg:
-    linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
+    linear-gradient(
+      135deg,
+      rgba($purple-dark, $alpha-bg-low),
+      rgba($purple-darker, $alpha-bg-low)
+    ),
   feature-card-tertiary-bg:
-    linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
-  feature-icon-primary: #3b82f6,
-  feature-icon-secondary: #a855f7,
-  feature-icon-tertiary: #14b8a6,
+    linear-gradient(
+      135deg,
+      rgba($teal-dark, $alpha-bg-low),
+      rgba($teal-darker, $alpha-bg-low)
+    ),
+  feature-icon-primary: $blue-light,
+  feature-icon-secondary: $purple-light,
+  feature-icon-tertiary: $teal-secondary,
 
-  feature-title-primary: #93c5fd,
-  feature-title-secondary: #c4b5fd,
-  feature-title-tertiary: #5eead4,
+  // Text colors - FIXED for AAA contrast
+  feature-title-primary: $text-aaa-dark,
+  // Changed from $blue-lighter for AAA contrast
+  feature-title-secondary: $text-aaa-dark,
+  // Changed from $purple-lighter for AAA contrast
+  feature-title-tertiary: $text-aaa-dark,
 
-  feature-description-primary: #dbeafe,
-  feature-description-secondary: #e9d5ff,
-  feature-description-tertiary: #ccfbf1
+  // Changed from $teal-light for AAA contrast
+  feature-description-primary: $text-aaa-dark,
+  // Changed from $blue-lightest for AAA contrast
+  feature-description-secondary: $text-aaa-dark,
+  // Changed from $purple-lightest for AAA contrast
+  feature-description-tertiary: $text-aaa-dark
+    // Changed from $teal-lightest for AAA contrast
 );
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index 18fdbb3..97923a2 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -3,12 +3,12 @@
 
 // Base colors and variables that are used across sections
 $base-light-theme: (
-  primary: #000000,
+  primary: red,
   background: #ffffff,
   text: #000000,
-  text-muted: #6b7280,
-  active-box-shadow: rgba(0, 0, 0, 0.1),
-  hover-box-shadow: rgba(0, 0, 0, 0.15),
+  text-muted: #2b2b2b,
+  active-box-shadow: rgba(0, 0, 0, 0.6),
+  hover-box-shadow: rgba(0, 0, 0, 0.9),
   gradient-primary: $gradient-primary,
   gradient-text: $gradient-text,
 
@@ -38,7 +38,7 @@ $base-light-theme: (
   form-background: #ffffff,
   form-border: #e5e7eb,
   text-primary: #111827,
-  text-secondary: #6b7280,
+  text-secondary: #484c56,
   primary-color: #9333ea,
 
   // Contact status colors (light theme)
diff --git a/src/scss/themes/_certifications.scss b/src/scss/themes/_certifications.scss
index d09ce54..24cacf4 100644
--- a/src/scss/themes/_certifications.scss
+++ b/src/scss/themes/_certifications.scss
@@ -1,68 +1,123 @@
-// Certifications section theme definitions
+// Base color variables
+$purple-primary: #9333ea;
+$purple-secondary: #7e22ce;
+$purple-light: #a855f7;
+$purple-lighter: #d8b4fe;
+$purple-lightest: #f3e8ff;
+$purple-dark: #581c87;
+$purple-darker: #4c1d95;
+
+$pink-primary: #ec4899;
+$pink-secondary: #db2777;
+$pink-light: #f472b6;
+$pink-lighter: #fbcfe8;
+$pink-lightest: #fce7f3;
+$pink-dark: #9d174d;
+$pink-darker: #831843;
+
+$gray-50: #fafafa;
+$gray-100: #f5f5f5;
+$gray-800: #1f2937;
+$gray-900: #111827;
+
+$white: #ffffff;
+$black: #000000;
+
+// Background colors
+$cert-bg-light-start: #e0e7ef;
+$cert-bg-light-end: #91c5e0;
+$cert-bg-dark-start: #a78bfa;
+$cert-bg-dark-end: #dc2626;
+
+// Alpha values
+$alpha-overlay-light: 0.02;
+$alpha-overlay-dark: 0.05;
+$alpha-border-light: 0.2;
+$alpha-border-dark: 0.3;
+
+// Shadow values
+$shadow-card-light: 0 10px 15px -3px rgba($black, 0.1);
+$shadow-card-light-hover: 0 20px 25px -5px rgba($black, 0.1);
+$shadow-card-dark: 0 10px 15px -3px rgba($black, 0.3);
+$shadow-card-dark-hover: 0 20px 25px -5px rgba($black, 0.4);
+
+// WCAG AAA compliant text colors
+$text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds
+$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
 
 $certifications-light-theme: (
   // Certifications section background
-  'certifications-background': linear-gradient(
-      135deg,
-      #e0e7ef 0%,
-      #91c5e0 100%
-    ),
-  'gradient-certifications-title': linear-gradient(to right, #9333ea, #ec4899),
-  'color-certifications-primary': #9333ea,
+  'certifications-background':
+    linear-gradient(135deg, $cert-bg-light-start 0%, $cert-bg-light-end 100%),
+  'gradient-certifications-title':
+    linear-gradient(to right, $purple-primary, $pink-primary),
+  'color-certifications-primary': $purple-primary,
 
   // Card styling
   'certifications-card-background':
-    linear-gradient(135deg, #ffffff 0%, #fafafa 100%),
-  'certifications-card-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-  'certifications-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    linear-gradient(135deg, $white 0%, $gray-50 100%),
+  'certifications-card-shadow': $shadow-card-light,
+  'certifications-card-shadow-hover': $shadow-card-light-hover,
   'certifications-card-overlay':
     linear-gradient(
       135deg,
-      rgba(147, 51, 234, 0.02) 0%,
-      rgba(236, 72, 153, 0.02) 100%
+      rgba($purple-primary, $alpha-overlay-light) 0%,
+      rgba($pink-primary, $alpha-overlay-light) 100%
     ),
-  // Badge styling (purple/pink theme)
-  'certifications-badge-background': linear-gradient(
-      to right,
-      #f3e8ff,
-      #fce7f3
-    ),
-  'certifications-badge-border': rgba(147, 51, 234, 0.2),
-  'color-certifications-badge-text': #7e22ce
+  // Badge styling - FIXED for AAA contrast
+  'certifications-badge-background':
+    linear-gradient(to right, $purple-lightest, $pink-lightest),
+  'certifications-badge-border': rgba($purple-primary, $alpha-border-light),
+  'color-certifications-badge-text': $text-aaa-light,
+
+  // Changed from $purple-secondary for AAA contrast
+  // Text styling for AAA compliance
+  'certifications-card-title': $text-aaa-light,
+  'certifications-card-description': $text-aaa-light,
+  'certifications-card-date': $text-aaa-light,
+  // Medium gray for secondary text
 );
 
 $certifications-dark-theme: (
   // Certifications section background (dark purple/pink gradient)
-  'certifications-background': linear-gradient(
-      135deg,
-      #a78bfa 0%,
-      #dc2626 100%
-    ),
+  'certifications-background':
+    linear-gradient(135deg, $cert-bg-dark-start 0%, $cert-bg-dark-end 100%),
   // Certifications title gradient (brighter purple to pink for dark mode)
-  'gradient-certifications-title': linear-gradient(to right, #a855f7, #f472b6),
+  'gradient-certifications-title':
+    linear-gradient(to right, $purple-light, $pink-light),
   // Primary color for icons (lighter purple)
-  'color-certifications-primary': #a855f7,
+  'color-certifications-primary': $purple-light,
 
   // Card styling (dark theme)
   'certifications-card-background':
-    linear-gradient(135deg, #111827 0%, #1f2937 100%),
-  'certifications-card-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.3),
-  'certifications-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.4),
+    linear-gradient(135deg, $gray-900 0%, $gray-800 100%),
+  'certifications-card-shadow': $shadow-card-dark,
+  'certifications-card-shadow-hover': $shadow-card-dark-hover,
   'certifications-card-overlay':
     linear-gradient(
       135deg,
-      rgba(168, 85, 247, 0.05) 0%,
-      rgba(244, 114, 182, 0.05) 100%
+      rgba($purple-light, $alpha-overlay-dark) 0%,
+      rgba($pink-light, $alpha-overlay-dark) 100%
     ),
-  // Badge styling (dark theme with purple/pink)
+  // Badge styling (dark theme) - FIXED for AAA contrast
   'certifications-badge-background':
-    linear-gradient(to right, rgba(88, 28, 135, 0.3), rgba(157, 23, 77, 0.3)),
-  'certifications-badge-border': rgba(168, 85, 247, 0.3),
-  'color-certifications-badge-text': #d8b4fe
+    linear-gradient(
+      to right,
+      rgba($purple-dark, $alpha-border-dark),
+      rgba($pink-dark, $alpha-border-dark)
+    ),
+  'certifications-badge-border': rgba($purple-light, $alpha-border-dark),
+  'color-certifications-badge-text': $text-aaa-dark,
+
+  // Changed from $purple-lighter for AAA contrast
+  // Text styling for AAA compliance
+  'certifications-card-title': $text-aaa-dark,
+  'certifications-card-description': $text-aaa-dark,
+  'certifications-card-date': #d1d5db,
+  // Light gray for secondary text in dark mode
 );
 
-// Add to your certifications section SCSS file
-
+// Card layout styling
 .certifications-section__card {
   display: flex;
   flex-direction: column;
diff --git a/src/scss/themes/_contact.scss b/src/scss/themes/_contact.scss
index 84587c7..4c61353 100644
--- a/src/scss/themes/_contact.scss
+++ b/src/scss/themes/_contact.scss
@@ -1,38 +1,116 @@
-// Contact section theme definitions
+// Base color variables
+$indigo-primary: #4f46e5;
+$indigo-secondary: #3c0d9c;
+$indigo-light: #6366f1;
+$indigo-lighter: #a5b4fc;
+
+$purple-primary: #a855f7;
+$purple-secondary: #7c3aed;
+
+$blue-primary: #2563eb;
+$blue-secondary: #3730a3;
+$blue-light: #3b82f6;
+$blue-lighter: #60a5fa;
+$blue-dark: #1d4ed8;
+$blue-darker: #312e81;
+
+$orange-primary: #f59e0b;
+$orange-secondary: #d97706;
+$orange-light: #fbbf24;
+$orange-lighter: #fed7aa;
+$orange-lightest: #fef7ed;
+$orange-dark: #92400e;
+$orange-darker: #78350f;
+$orange-darkest: #451a03;
+
+$amber-primary: #fef3c7;
+$amber-secondary: #a16207;
+$amber-light: #ca8a04;
+
+$green-primary: #059669;
+$green-secondary: #047857;
+$green-light: #10b981;
+$green-lighter: #6ee7b7;
+$green-lightest: #d1fae5;
+
+$red-primary: #dc2626;
+$red-secondary: #b91c1c;
+$red-light: #f87171;
+$red-lighter: #fca5a5;
+$red-lightest: #fee2e2;
+
+$white: #ffffff;
+$black: #000000;
+
+// Background colors
+$contact-bg-light-start: #e0e7ef;
+$contact-bg-light-end: #91c5e0;
+
+// Alpha values
+$alpha-low: 0.15;
+$alpha-border-light: 0.2;
+$alpha-border-medium: 0.3;
+$alpha-border-heavy: 0.4;
+
+// Shadow values
+$shadow-light: 0 10px 15px -3px rgba($black, 0.1);
+$shadow-dark: 0 10px 15px -3px rgba($black, 0.3);
+
+// WCAG AAA compliant text colors
+$text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds
+$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
 
 $contact-light-theme: (
   // Contact section background (light indigo/purple tones)
-  'contact-background': linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%),
+  'contact-background':
+    linear-gradient(
+      135deg,
+      $contact-bg-light-start 0%,
+      $contact-bg-light-end 100%
+    ),
   // Contact title gradient (indigo to purple)
-  'gradient-contact-title': linear-gradient(to right, #4f46e5, #7c3aed),
+  'gradient-contact-title':
+    linear-gradient(to right, $indigo-primary, $indigo-secondary),
   // Primary color for icons (indigo)
-  'color-contact-primary': #4f46e5,
+  'color-contact-primary': $indigo-primary,
 
   // Form styling - warm cream/peach to complement cool blue background
-  'contact-form-bg': linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%),
-  'contact-form-border': rgba(251, 146, 60, 0.2),
-  'contact-form-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+  'contact-form-bg':
+    linear-gradient(135deg, $orange-lightest 0%, $orange-lighter 100%),
+  'contact-form-border': rgba($orange-primary, $alpha-border-light),
+  'contact-form-shadow': $shadow-light,
+
   // Input styling - warm background to complement form
-  'contact-input-bg': #fef3c7,
-  'contact-input-border': rgba(251, 146, 60, 0.3),
-  'contact-input-focus-ring': rgba(251, 146, 60, 0.2),
+  'contact-input-bg': $amber-primary,
+  'contact-input-border': rgba($orange-primary, $alpha-border-medium),
+  'contact-input-focus-ring': rgba($orange-primary, $alpha-border-light),
+  'contact-input-text': $text-aaa-light,
+  // Added for AAA compliance
+  'contact-input-placeholder': #484c56,
+
+  // Added for form accessibility
   // Button styling - improved contrast and readability
-  'contact-button-bg': linear-gradient(135deg, #2563eb 0%, #3730a3 100%),
-  'contact-button-text': #ffffff,
-  'contact-button-hover-bg': linear-gradient(135deg, #1d4ed8 0%, #312e81 100%),
-  // Social button styling - warm peach background to complement section
-  'contact-social-bg': #fed7aa,
-  'contact-social-text': #92400e,
-  'contact-social-border': #f59e0b,
-  'contact-social-hover-bg': #fbbf24,
-  'contact-social-hover-border': #d97706,
+  'contact-button-bg':
+    linear-gradient(135deg, $blue-primary 0%, $blue-secondary 100%),
+  'contact-button-text': $text-aaa-dark,
+  // Changed to ensure AAA contrast
+  'contact-button-hover-bg':
+    linear-gradient(135deg, $blue-dark 0%, $blue-darker 100%),
+  // Social button styling - FIXED for AAA contrast
+  'contact-social-bg': $orange-lighter,
+  'contact-social-text': $text-aaa-light,
+  // Changed from $orange-dark for AAA contrast
+  'contact-social-border': $orange-primary,
+  'contact-social-hover-bg': $orange-light,
+  'contact-social-hover-border': $orange-secondary,
+
   // Status message styling (light theme) - improved readability
-  'contact-status-success-bg': #d1fae5,
-  'contact-status-success-border': #059669,
-  'contact-status-success-text': #047857,
-  'contact-status-error-bg': #fee2e2,
-  'contact-status-error-border': #dc2626,
-  'contact-status-error-text': #b91c1c
+  'contact-status-success-bg': $green-lightest,
+  'contact-status-success-border': $green-primary,
+  'contact-status-success-text': $green-secondary,
+  'contact-status-error-bg': $red-lightest,
+  'contact-status-error-border': $red-primary,
+  'contact-status-error-text': $red-secondary
 );
 
 $contact-dark-theme: (
@@ -40,37 +118,52 @@ $contact-dark-theme: (
   'contact-background':
     linear-gradient(
       135deg,
-      rgba(67, 56, 202, 0.2) 0%,
-      rgba(109, 40, 217, 0.2) 100%
+      rgba($indigo-light, $alpha-border-light) 0%,
+      rgba($purple-primary, $alpha-border-light) 100%
     ),
   // Contact title gradient (brighter indigo to purple for dark mode)
-  'gradient-contact-title': linear-gradient(to right, #6366f1, #a855f7),
+  'gradient-contact-title':
+    linear-gradient(to right, $indigo-light, $purple-primary),
   // Primary color for icons (lighter indigo)
-  'color-contact-primary': #6366f1,
+  'color-contact-primary': $indigo-light,
 
   // Form styling (dark theme) - warm dark tones to complement cool purple/indigo
-  'contact-form-bg': linear-gradient(135deg, #451a03 0%, #78350f 100%),
-  'contact-form-border': rgba(251, 146, 60, 0.3),
-  'contact-form-shadow': 0 10px 15px -3px rgba(0, 0, 0, 0.3),
-  // Input styling (dark theme) - warm dark background
-  'contact-input-bg': #92400e,
-  'contact-input-border': rgba(251, 146, 60, 0.4),
-  'contact-input-focus-ring': rgba(251, 146, 60, 0.3),
+  'contact-form-bg':
+    linear-gradient(135deg, $orange-darkest 0%, $orange-darker 100%),
+  'contact-form-border': rgba($orange-primary, $alpha-border-medium),
+  'contact-form-shadow': $shadow-dark,
+
+  // Input styling (dark theme) - FIXED for AAA contrast
+  'contact-input-bg': #374151,
+  // Changed to neutral dark gray
+  'contact-input-border': rgba($orange-primary, $alpha-border-heavy),
+  'contact-input-focus-ring': rgba($orange-primary, $alpha-border-medium),
+  'contact-input-text': $text-aaa-dark,
+  // White text for AAA contrast
+  'contact-input-placeholder': #9ca3af,
+
+  // Light gray for placeholder
   // Button styling (dark theme) - improved contrast
-  'contact-button-bg': linear-gradient(135deg, #3b82f6 0%, #2563eb 100%),
-  'contact-button-text': #ffffff,
-  'contact-button-hover-bg': linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%),
-  // Social button styling (dark theme) - warm brown/orange tones
-  'contact-social-bg': #a16207,
-  'contact-social-text': #fef3c7,
-  'contact-social-border': #d97706,
-  'contact-social-hover-bg': #ca8a04,
-  'contact-social-hover-border': #f59e0b,
+  'contact-button-bg':
+    linear-gradient(135deg, $blue-light 0%, $blue-primary 100%),
+  'contact-button-text': $text-aaa-dark,
+  'contact-button-hover-bg':
+    linear-gradient(135deg, $blue-lighter 0%, $blue-light 100%),
+  // Social button styling (dark theme) - FIXED for AAA contrast
+  'contact-social-bg': #1f2937,
+  // Changed to neutral dark background
+  'contact-social-text': $text-aaa-dark,
+  // White text for AAA contrast
+  'contact-social-border': $orange-secondary,
+  'contact-social-hover-bg': #374151,
+  // Slightly lighter on hover
+  'contact-social-hover-border': $orange-primary,
+
   // Status message styling (dark theme) - improved readability
-  'contact-status-success-bg': rgba(5, 150, 105, 0.15),
-  'contact-status-success-border': #10b981,
-  'contact-status-success-text': #6ee7b7,
-  'contact-status-error-bg': rgba(239, 68, 68, 0.15),
-  'contact-status-error-border': #f87171,
-  'contact-status-error-text': #fca5a5
+  'contact-status-success-bg': rgba($green-primary, $alpha-low),
+  'contact-status-success-border': $green-light,
+  'contact-status-success-text': $green-lighter,
+  'contact-status-error-bg': rgba($red-light, $alpha-low),
+  'contact-status-error-border': $red-light,
+  'contact-status-error-text': $red-lighter
 );
diff --git a/src/scss/themes/_hero.scss b/src/scss/themes/_hero.scss
index c413c6d..f4bad6d 100644
--- a/src/scss/themes/_hero.scss
+++ b/src/scss/themes/_hero.scss
@@ -1,51 +1,132 @@
 @use '../variables' as *;
 
+// Base color variables
+$blue-primary: #2563eb;
+$blue-secondary: #1d4ed8;
+$blue-light: #93c5fd;
+$blue-lighter: #dbeafe;
+$blue-lightest: #bfdbfe;
+$blue-dark: #1e3a8a;
+$blue-darker: #1e40af;
+
+$green-primary: #16a34a;
+$green-secondary: #15803d;
+$green-light: #86efac;
+$green-lighter: #dcfce7;
+$green-lightest: #bbf7d0;
+$green-dark: #14532d;
+$green-darker: #166534;
+
+$teal-primary: #0d9488;
+$teal-secondary: #073c39;
+$teal-light: #5eead4;
+$teal-lighter: #ccfbf1;
+$teal-lightest: #99f6e4;
+$teal-dark: #134e4a;
+$teal-darker: #115e59;
+
+$purple-primary: #9333ea;
+$purple-secondary: #3c0d9c;
+$purple-light: #c4b5fd;
+$purple-lighter: #e9d5ff;
+$purple-lightest: #ddd6fe;
+$purple-dark: #581c87;
+$purple-darker: #6b21a8;
+
+// Background colors
+$hero-bg-light-start: #e0e7ef;
+$hero-bg-light-end: #91c5e0;
+
+// Alpha values
+$alpha-bg-low: 0.3;
+
+// WCAG AAA compliant text colors
+$text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds
+$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
+
 $hero-light-theme: (
-  hero-background: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%),
-  // Stat colors using visual hierarchy
-  stat-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
-  stat-primary-value: #2563eb,
-  stat-primary-label: #1d4ed8,
+  hero-background:
+    linear-gradient(135deg, $hero-bg-light-start 0%, $hero-bg-light-end 100%),
+  // Stat colors - FIXED for AAA contrast
+  stat-primary-bg: linear-gradient(135deg, $blue-lighter, $blue-lightest),
+  stat-primary-value: $text-aaa-light,
+  // Changed from $blue-primary for AAA contrast
+  stat-primary-label: $text-aaa-light,
 
-  stat-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0),
-  stat-secondary-value: #16a34a,
-  stat-secondary-label: #15803d,
+  // Changed from $blue-secondary for AAA contrast
+  stat-secondary-bg: linear-gradient(135deg, $green-lighter, $green-lightest),
+  stat-secondary-value: $text-aaa-light,
+  // Changed from $green-primary for AAA contrast
+  stat-secondary-label: $text-aaa-light,
 
-  stat-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4),
-  stat-tertiary-value: #0d9488,
-  stat-tertiary-label: #0f766e,
+  // Changed from $green-secondary for AAA contrast
+  stat-tertiary-bg: linear-gradient(135deg, $teal-lighter, $teal-lightest),
+  stat-tertiary-value: $text-aaa-light,
+  // Changed from $teal-primary for AAA contrast
+  stat-tertiary-label: $text-aaa-light,
 
-  stat-quaternary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
-  stat-quaternary-value: #9333ea,
-  stat-quaternary-label: #7c3aed,
+  // Changed from $teal-secondary for AAA contrast
+  stat-quaternary-bg: linear-gradient(
+      135deg,
+      $purple-lighter,
+      $purple-lightest
+    ),
+  stat-quaternary-value: $text-aaa-light,
+  // Changed from $purple-primary for AAA contrast
+  stat-quaternary-label: $text-aaa-light,
+  // Changed from $purple-secondary for AAA contrast
 );
 
 $hero-dark-theme: (
   hero-background:
     linear-gradient(
       135deg,
-      rgba(30, 58, 138, 0.3) 0%,
-      rgba(55, 48, 163, 0.3) 50%,
-      rgba(88, 28, 135, 0.3) 100%
+      rgba($blue-dark, $alpha-bg-low) 0%,
+      rgba($purple-dark, $alpha-bg-low) 50%,
+      rgba($purple-darker, $alpha-bg-low) 100%
     ),
-  // Stat colors using visual hierarchy
+  // Stat colors - Enhanced contrast for AAA compliance
   stat-primary-bg:
-    linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
-  stat-primary-value: #2563eb,
-  stat-primary-label: #93c5fd,
+    linear-gradient(
+      135deg,
+      rgba($blue-dark, $alpha-bg-low),
+      rgba($blue-darker, $alpha-bg-low)
+    ),
+  stat-primary-value: $text-aaa-dark,
+  // Changed from $blue-primary to white for AAA contrast
+  stat-primary-label: $text-aaa-dark,
 
+  // Changed from $blue-light to white for better contrast
   stat-secondary-bg:
-    linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)),
-  stat-secondary-value: #16a34a,
-  stat-secondary-label: #86efac,
+    linear-gradient(
+      135deg,
+      rgba($green-dark, $alpha-bg-low),
+      rgba($green-darker, $alpha-bg-low)
+    ),
+  stat-secondary-value: $text-aaa-dark,
+  // Changed from $green-primary to white for AAA contrast
+  stat-secondary-label: $text-aaa-dark,
 
+  // Changed from $green-light to white for better contrast
   stat-tertiary-bg:
-    linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
-  stat-tertiary-value: #0d9488,
-  stat-tertiary-label: #5eead4,
+    linear-gradient(
+      135deg,
+      rgba($teal-dark, $alpha-bg-low),
+      rgba($teal-darker, $alpha-bg-low)
+    ),
+  stat-tertiary-value: $text-aaa-dark,
+  // Changed from $teal-primary to white for AAA contrast
+  stat-tertiary-label: $text-aaa-dark,
 
+  // Changed from $teal-light to white for better contrast
   stat-quaternary-bg:
-    linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
-  stat-quaternary-value: #9333ea,
-  stat-quaternary-label: #c4b5fd,
+    linear-gradient(
+      135deg,
+      rgba($purple-dark, $alpha-bg-low),
+      rgba($purple-darker, $alpha-bg-low)
+    ),
+  stat-quaternary-value: $text-aaa-dark,
+  // Changed from $purple-primary to white for AAA contrast
+  stat-quaternary-label: $text-aaa-dark,
+  // Changed from $purple-light to white for better contrast
 );
diff --git a/src/scss/themes/_index.scss b/src/scss/themes/_index.scss
index 2982436..7e86de5 100644
--- a/src/scss/themes/_index.scss
+++ b/src/scss/themes/_index.scss
@@ -351,7 +351,6 @@ $dark-theme: map.merge(
   --contact-status-error-text: #{map.get($theme, contact-status-error-text)};
 
   // Additional variables
-  --box-shadow-hover: #{map.get($theme, box-shadow-hover)};
   --bg-primary: #{map.get($theme, bg-primary)};
   --bg-secondary: #{map.get($theme, bg-secondary)};
   --border-color: #{map.get($theme, border-color)};
diff --git a/src/scss/themes/_projects.scss b/src/scss/themes/_projects.scss
index 1cf7c87..85b53da 100644
--- a/src/scss/themes/_projects.scss
+++ b/src/scss/themes/_projects.scss
@@ -1,71 +1,132 @@
-// Projects section theme definitions
+// Base color variables
+$orange-primary: #ea580c;
+$orange-secondary: #fb923c;
+$orange-light: #fed7aa;
+$orange-dark: #6f2406;
+$orange-darker: #431407; // Darker than $orange-dark for better contrast
+
+$red-primary: #dc2626;
+$red-secondary: #b91c1c;
+$red-light: #f87171;
+$red-lighter: #fecaca;
+$red-darker: #7f1d1d; // Darker red variant
+
+$gray-50: #f9fafb;
+$gray-100: #f3f4f6;
+$gray-200: #e5e7eb;
+$gray-300: #d1d5db;
+$gray-400: #9ca3af;
+$gray-500: #6b7280;
+$gray-600: #4b5563;
+$gray-700: #374151;
+$gray-800: #1f2937;
+$gray-900: #111827;
+
+$white: #ffffff;
+$black: #000000;
+
+// Background colors
+$bg-light-start: #e0e7ef;
+$bg-light-end: #bae6fd;
+$card-light-start: #ffffff;
+$card-light-end: #fefefe;
+
+// Dark theme specific colors - extracted from hardcoded values
+$brown-primary: #7c2d12; // rgba(124, 45, 18, 1) converted to hex
+$brown-secondary: #991b1b; // rgba(127, 29, 29, 1) converted to hex
+
+// Alpha values
+$alpha-overlay-light: 0.6;
+$alpha-overlay-dark: 0.7;
+$alpha-border-light: 0.1;
+$alpha-border-medium: 0.2;
+$alpha-border-heavy: 0.3;
+$alpha-bg-light: 0.9;
+$alpha-bg-medium: 0.3;
+$alpha-bg-high: 0.8; // Added for tech badges
+
+// Shadow values
+$shadow-light: 0 4px 6px -1px rgba($black, 0.1);
+$shadow-light-hover: 0 20px 25px -5px rgba($black, 0.1);
+$shadow-dark: 0 4px 6px -1px rgba($black, 0.3);
+$shadow-dark-hover: 0 20px 25px -5px rgba($black, 0.4);
+
+// WCAG AAA compliant text colors
+$text-aaa-light: $gray-900; // #111827 - ensures AAA contrast on light backgrounds
+$text-aaa-dark: $white; // #ffffff - ensures AAA contrast on dark backgrounds
 
 $projects-light-theme: (
-  // Projects section background (light orange/red tones)
-  'projects-background': linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%),
-  // Projects title gradient (orange to red)
-  'gradient-projects-title': linear-gradient(to right, #ea580c, #dc2626),
+  // Projects section background
+  'projects-background':
+    linear-gradient(135deg, $bg-light-start 0%, $bg-light-end 100%),
+  // Projects title gradient
+  'gradient-projects-title':
+    linear-gradient(to right, $orange-primary, $red-primary),
   // Card styling
-  'projects-card-background': linear-gradient(135deg, #ffffff 0%, #fefefe 100%),
-  'projects-card-border': rgba(234, 88, 12, 0.1),
-  'projects-card-shadow': 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-  'projects-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+  'projects-card-background':
+    linear-gradient(135deg, $card-light-start 0%, $card-light-end 100%),
+  'projects-card-border': rgba($orange-primary, $alpha-border-light),
+  'projects-card-shadow': $shadow-light,
+  'projects-card-shadow-hover': $shadow-light-hover,
   // Overlay styling
-  'projects-overlay-background': rgba(0, 0, 0, 0.6),
+  'projects-overlay-background': rgba($black, $alpha-overlay-light),
   // Button styling
   'projects-button-primary-bg':
-    linear-gradient(135deg, #ea580c 0%, #dc2626 100%),
-  'projects-button-primary-text': #ffffff,
-  'projects-button-primary-border': rgba(234, 88, 12, 0.3),
+    linear-gradient(135deg, $orange-primary 0%, $red-primary 100%),
+  'projects-button-primary-text': $text-aaa-dark,
+  // Changed to ensure AAA contrast
+  'projects-button-primary-border': rgba($orange-primary, $alpha-border-heavy),
   'projects-button-primary-hover-bg':
-    linear-gradient(135deg, #dc2626 0%, #b91c1c 100%),
-  'projects-button-secondary-bg': rgba(255, 255, 255, 0.9),
-  'projects-button-secondary-text': #374151,
-  'projects-button-secondary-border': rgba(255, 255, 255, 0.2),
-  'projects-button-secondary-hover-bg': #ffffff,
-
-  // Tech badge styling
-  'projects-tech-badge-bg': linear-gradient(135deg, #fed7aa 0%, #fecaca 100%),
-  'projects-tech-badge-text': #c2410c,
-  'projects-tech-badge-border': rgba(234, 88, 12, 0.2)
+    linear-gradient(135deg, $red-primary 0%, $red-secondary 100%),
+  'projects-button-secondary-bg': $white,
+  'projects-button-secondary-text': $text-aaa-light,
+  // Changed from $gray-800 for AAA compliance
+  'projects-button-secondary-border': rgba($gray-300, $alpha-border-medium),
+  'projects-button-secondary-hover-bg': $gray-50,
+  // Changed from $white for subtle hover effect
+  // Tech badge styling - FIXED for AAA contrast
+  'projects-tech-badge-bg': $gray-100,
+  // Changed to solid light gray instead of gradient
+  'projects-tech-badge-text': $text-aaa-light,
+  // Changed to dark text for AAA contrast
+  'projects-tech-badge-border': rgba($orange-primary, $alpha-border-medium)
 );
 
 $projects-dark-theme: (
-  // Projects section background (dark orange/red tones)
+  // Projects section background - using variables instead of hardcoded rgba
   'projects-background':
     linear-gradient(
       135deg,
-      rgba(124, 45, 18, 0.2) 0%,
-      rgba(127, 29, 29, 0.2) 100%
+      rgba($brown-primary, $alpha-border-medium) 0%,
+      rgba($brown-secondary, $alpha-border-medium) 100%
     ),
-  // Projects title gradient (brighter orange to red for dark mode)
-  'gradient-projects-title': linear-gradient(to right, #fb923c, #f87171),
-  // Card styling (dark theme)
-  'projects-card-background': linear-gradient(135deg, #111827 0%, #1f2937 100%),
-  'projects-card-border': rgba(251, 146, 60, 0.2),
-  'projects-card-shadow': 0 4px 6px -1px rgba(0, 0, 0, 0.3),
-  'projects-card-shadow-hover': 0 20px 25px -5px rgba(0, 0, 0, 0.4),
+  // Projects title gradient
+  'gradient-projects-title':
+    linear-gradient(to right, $orange-secondary, $red-light),
+  // Card styling
+  'projects-card-background':
+    linear-gradient(135deg, $gray-900 0%, $gray-800 100%),
+  'projects-card-border': rgba($orange-secondary, $alpha-border-medium),
+  'projects-card-shadow': $shadow-dark,
+  'projects-card-shadow-hover': $shadow-dark-hover,
   // Overlay styling
-  'projects-overlay-background': rgba(0, 0, 0, 0.7),
-  // Button styling (dark theme)
+  'projects-overlay-background': rgba($black, $alpha-overlay-dark),
+  // Button styling
   'projects-button-primary-bg':
-    linear-gradient(135deg, #ea580c 0%, #dc2626 100%),
-  'projects-button-primary-text': #ffffff,
-  'projects-button-primary-border': rgba(234, 88, 12, 0.3),
+    linear-gradient(135deg, $orange-primary 0%, $red-primary 100%),
+  'projects-button-primary-text': $text-aaa-dark,
+  'projects-button-primary-border': rgba($orange-primary, $alpha-border-heavy),
   'projects-button-primary-hover-bg':
-    linear-gradient(135deg, #fb923c 0%, #f87171 100%),
-  'projects-button-secondary-bg': rgba(31, 41, 55, 0.9),
-  'projects-button-secondary-text': #e5e7eb,
-  'projects-button-secondary-border': rgba(75, 85, 99, 0.3),
-  'projects-button-secondary-hover-bg': #374151,
-
-  // Tech badge styling (dark theme)
-  'projects-tech-badge-bg':
-    linear-gradient(
-      135deg,
-      rgba(124, 45, 18, 0.3) 0%,
-      rgba(127, 29, 29, 0.3) 100%
-    ),
-  'projects-tech-badge-text': #fed7aa,
-  'projects-tech-badge-border': rgba(251, 146, 60, 0.3)
+    linear-gradient(135deg, $orange-secondary 0%, $red-light 100%),
+  'projects-button-secondary-bg': rgba($gray-800, $alpha-bg-light),
+  'projects-button-secondary-text': $text-aaa-dark,
+  // Changed from $gray-200 for AAA compliance
+  'projects-button-secondary-border': rgba($gray-600, $alpha-border-heavy),
+  'projects-button-secondary-hover-bg': $gray-700,
+  // Tech badge styling - FIXED for AAA contrast
+  'projects-tech-badge-bg': $gray-800,
+  // Changed to solid dark background
+  'projects-tech-badge-text': $text-aaa-dark,
+  // White text for AAA contrast
+  'projects-tech-badge-border': rgba($orange-secondary, $alpha-border-heavy)
 );
diff --git a/src/scss/themes/_services.scss b/src/scss/themes/_services.scss
index 547446a..87a0ebe 100644
--- a/src/scss/themes/_services.scss
+++ b/src/scss/themes/_services.scss
@@ -1,119 +1,163 @@
+// ================================
+// Color Variables - Change once, use everywhere
+// ================================
+
+// Light theme colors
+$light-primary-color: #0f172a; // Much darker blue (was #18338c)
+$light-secondary-color: #0f2419; // Much darker green (was #13582e)
+$light-tertiary-color: #2d1b69; // Much darker purple (was #551fad)
+$light-quaternary-color: #042f2e; // Much darker teal (was #073c39)
+$light-quinary-color: #451a01; // Much darker orange (was #6f2406)
+$light-senary-color: #7f1d1d; // Much darker red (was #b91c1c)
+
+// Alternative: Use neutral dark colors for guaranteed AAA compliance
+$light-text-primary: #111827; // Near black
+$light-text-secondary: #1f2937; // Dark gray
+$light-text-tertiary: #374151; // Medium dark gray
+
+// Dark theme colors
+$dark-primary-icon: #dbeafe;
+$dark-secondary-icon: #dcfce7;
+$dark-tertiary-icon: #e9d5ff;
+$dark-quaternary-icon: #ccfbf1;
+$dark-quinary-icon: #fed7aa;
+$dark-senary-icon: #fecaca;
+
+$dark-primary-title: #93c5fd;
+$dark-secondary-title: #86efac;
+$dark-tertiary-title: #c4b5fd;
+$dark-quaternary-title: #5eead4;
+$dark-quinary-title: #fdba74;
+$dark-senary-title: #fca5a5;
+
+$dark-description-color: #ffffff; // Pure white instead of #f1f5f9 // Universal description color for dark theme
+
+// Background gradients
+$light-services-bg: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%);
+$dark-services-bg: linear-gradient(135deg, #78350f 0%, #a78bfa 100%);
+
+$light-title-gradient: linear-gradient(90deg, #0f172a, #1e293b, #334155);
+$dark-title-gradient: linear-gradient(90deg, #f1f5f9, #e2e8f0, #cbd5e1);
+
+// Card background gradients
+$light-card-primary-bg: linear-gradient(
+  135deg,
+  #f8fafc,
+  #f1f5f9
+); // Lighter backgrounds
+$light-card-secondary-bg: linear-gradient(135deg, #f9fafb, #f3f4f6);
+$light-card-tertiary-bg: linear-gradient(135deg, #faf9ff, #f5f3ff);
+$light-card-quaternary-bg: linear-gradient(135deg, #f0fdfa, #ecfdf5);
+$light-card-quinary-bg: linear-gradient(135deg, #fffbeb, #fef3c7);
+$light-card-senary-bg: linear-gradient(135deg, #fef2f2, #fee2e2);
+
+$dark-card-primary-bg: linear-gradient(
+  135deg,
+  rgba(30, 58, 138, 0.6),
+  rgba(37, 99, 235, 0.5)
+);
+$dark-card-secondary-bg: linear-gradient(
+  135deg,
+  rgba(22, 101, 52, 0.6),
+  rgba(34, 197, 94, 0.5)
+);
+$dark-card-tertiary-bg: linear-gradient(
+  135deg,
+  rgba(91, 33, 182, 0.6),
+  rgba(124, 58, 237, 0.5)
+);
+$dark-card-quaternary-bg: linear-gradient(
+  135deg,
+  rgba(17, 94, 89, 0.6),
+  rgba(20, 184, 166, 0.5)
+);
+$dark-card-quinary-bg: linear-gradient(
+  135deg,
+  rgba(154, 52, 18, 0.6),
+  rgba(249, 115, 22, 0.5)
+);
+$dark-card-senary-bg: linear-gradient(
+  135deg,
+  rgba(153, 27, 27, 0.6),
+  rgba(239, 68, 68, 0.5)
+);
+
+// ================================
+// Theme Maps - Using variables above
+// ================================
+
 $services-light-theme: (
-  // Services section colors - Tailwind inspired
-  services-background: linear-gradient(135deg, #e0e7ef 0%, #91c5e0 100%),
-  gradient-services-title: linear-gradient(90deg, #0f172a, #1e293b, #334155),
-  // Service card colors using Tailwind color palette
-  service-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
-  // blue-100 to blue-200
-  service-card-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0),
-  // green-100 to green-200
-  service-card-tertiary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
-  // violet-100 to violet-200
-  service-card-quaternary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4),
-  // teal-100 to teal-200
-  service-card-quinary-bg: linear-gradient(135deg, #fed7aa, #fdba74),
-  // orange-200 to orange-300
-  service-card-senary-bg: linear-gradient(135deg, #fecaca, #fca5a5),
-  // red-200 to red-300
-  service-icon-primary: #2563eb,
-  // blue-600
-  service-icon-secondary: #16a34a,
-  // green-600
-  service-icon-tertiary: #7c3aed,
-  // violet-600
-  service-icon-quaternary: #0d9488,
-  // teal-600
-  service-icon-quinary: #ea580c,
-  // orange-600
-  service-icon-senary: #dc2626,
+  // Section backgrounds
+  services-background: $light-services-bg,
+  gradient-services-title: $light-title-gradient,
 
-  // red-600
-  service-title-primary: #1e40af,
-  // blue-700
-  service-title-secondary: #166534,
-  // green-700
-  service-title-tertiary: #6d28d9,
-  // violet-700
-  service-title-quaternary: #0f766e,
-  // teal-700
-  service-title-quinary: #c2410c,
-  // orange-700
-  service-title-senary: #b91c1c,
+  // Card backgrounds
+  service-card-primary-bg: $light-card-primary-bg,
+  service-card-secondary-bg: $light-card-secondary-bg,
+  service-card-tertiary-bg: $light-card-tertiary-bg,
+  service-card-quaternary-bg: $light-card-quaternary-bg,
+  service-card-quinary-bg: $light-card-quinary-bg,
+  service-card-senary-bg: $light-card-senary-bg,
 
-  // red-700
-  service-description-primary: #1d4ed8,
-  // blue-700
-  service-description-secondary: #15803d,
-  // green-700
-  service-description-tertiary: #5b21b6,
-  // violet-800
-  service-description-quaternary: #115e59,
-  // teal-800
-  service-description-quinary: #9a3412,
-  // orange-800
-  service-description-senary: #991b1b,
-  // red-800
+  // Icons - using same color for consistency
+  service-icon-primary: $light-primary-color,
+  service-icon-secondary: $light-secondary-color,
+  service-icon-tertiary: $light-tertiary-color,
+  service-icon-quaternary: $light-quaternary-color,
+  service-icon-quinary: $light-quinary-color,
+  service-icon-senary: $light-senary-color,
+
+  // Titles - using same color as icons
+  service-title-primary: $light-primary-color,
+  service-title-secondary: $light-secondary-color,
+  service-title-tertiary: $light-tertiary-color,
+  service-title-quaternary: $light-quaternary-color,
+  service-title-quinary: $light-quinary-color,
+  service-title-senary: $light-senary-color,
+
+  // Descriptions - using same color as icons and titles
+  service-description-primary: $light-primary-color,
+  service-description-secondary: $light-secondary-color,
+  service-description-tertiary: $light-tertiary-color,
+  service-description-quaternary: $light-quaternary-color,
+  service-description-quinary: $light-quinary-color,
+  service-description-senary: $light-senary-color
 );
 
 $services-dark-theme: (
-  // Services section colors - Dark mode with Tailwind palette
-  services-background: linear-gradient(135deg, #78350f 0%, #a78bfa 100%),
-  gradient-services-title: linear-gradient(90deg, #f1f5f9, #e2e8f0, #cbd5e1),
-  // Service card colors for dark theme - using Tailwind dark colors
-  service-card-primary-bg:
-    linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(37, 99, 235, 0.2)),
-  // blue-800/30 to blue-600/20
-  service-card-secondary-bg:
-    linear-gradient(135deg, rgba(22, 101, 52, 0.3), rgba(34, 197, 94, 0.2)),
-  // green-800/30 to green-500/20
-  service-card-tertiary-bg:
-    linear-gradient(135deg, rgba(91, 33, 182, 0.3), rgba(124, 58, 237, 0.2)),
-  // violet-800/30 to violet-600/20
-  service-card-quaternary-bg:
-    linear-gradient(135deg, rgba(17, 94, 89, 0.3), rgba(20, 184, 166, 0.2)),
-  // teal-800/30 to teal-500/20
-  service-card-quinary-bg:
-    linear-gradient(135deg, rgba(154, 52, 18, 0.3), rgba(249, 115, 22, 0.2)),
-  // orange-800/30 to orange-500/20
-  service-card-senary-bg:
-    linear-gradient(135deg, rgba(153, 27, 27, 0.3), rgba(239, 68, 68, 0.2)),
-  // red-800/30 to red-500/20
-  service-icon-primary: #60a5fa,
-  // blue-400
-  service-icon-secondary: #4ade80,
-  // green-400
-  service-icon-tertiary: #a78bfa,
-  // violet-400
-  service-icon-quaternary: #2dd4bf,
-  // teal-400
-  service-icon-quinary: #fb923c,
-  // orange-400
-  service-icon-senary: #f87171,
+  // Section backgrounds
+  services-background: $dark-services-bg,
+  gradient-services-title: $dark-title-gradient,
 
-  // red-400
-  service-title-primary: #93c5fd,
-  // blue-300
-  service-title-secondary: #86efac,
-  // green-300
-  service-title-tertiary: #c4b5fd,
-  // violet-300
-  service-title-quaternary: #5eead4,
-  // teal-300
-  service-title-quinary: #fdba74,
-  // orange-300
-  service-title-senary: #fca5a5,
+  // Card backgrounds
+  service-card-primary-bg: $dark-card-primary-bg,
+  service-card-secondary-bg: $dark-card-secondary-bg,
+  service-card-tertiary-bg: $dark-card-tertiary-bg,
+  service-card-quaternary-bg: $dark-card-quaternary-bg,
+  service-card-quinary-bg: $dark-card-quinary-bg,
+  service-card-senary-bg: $dark-card-senary-bg,
 
-  // red-300
-  service-description-primary: #bfdbfe,
-  // blue-200
-  service-description-secondary: #bbf7d0,
-  // green-200
-  service-description-tertiary: #ddd6fe,
-  // violet-200
-  service-description-quaternary: #99f6e4,
-  // teal-200
-  service-description-quinary: #fed7aa,
-  // orange-200
-  service-description-senary: #fecaca,
-  // red-200
+  // Icons - using distinct colors for better contrast
+  service-icon-primary: $dark-primary-icon,
+  service-icon-secondary: $dark-secondary-icon,
+  service-icon-tertiary: $dark-tertiary-icon,
+  service-icon-quaternary: $dark-quaternary-icon,
+  service-icon-quinary: $dark-quinary-icon,
+  service-icon-senary: $dark-senary-icon,
+
+  // Titles - using medium contrast colors
+  service-title-primary: $dark-primary-title,
+  service-title-secondary: $dark-secondary-title,
+  service-title-tertiary: $dark-tertiary-title,
+  service-title-quaternary: $dark-quaternary-title,
+  service-title-quinary: $dark-quinary-title,
+  service-title-senary: $dark-senary-title,
+
+  // Descriptions - all using the same high-contrast color
+  service-description-primary: $dark-description-color,
+  service-description-secondary: $dark-description-color,
+  service-description-tertiary: $dark-description-color,
+  service-description-quaternary: $dark-description-color,
+  service-description-quinary: $dark-description-color,
+  service-description-senary: $dark-description-color
 );
diff --git a/src/scss/themes/_skills.scss b/src/scss/themes/_skills.scss
index d2b23c5..03687ff 100644
--- a/src/scss/themes/_skills.scss
+++ b/src/scss/themes/_skills.scss
@@ -1,158 +1,296 @@
+// Base color variables
+$blue-primary: #3b82f6;
+$blue-secondary: #1d4ed8;
+$blue-tertiary: #18338c;
+$blue-light: #60a5fa;
+
+$green-primary: #10b981;
+$green-secondary: #047857;
+$green-tertiary: #065f46;
+$green-light: #34d399;
+
+$purple-primary: #8b5cf6;
+$purple-secondary: #7c3aed;
+$purple-tertiary: #3c0d9c;
+$purple-light: #a78bfa;
+
+$teal-primary: #06b6d4;
+$teal-secondary: #0891b2;
+$teal-tertiary: #0e7490;
+$teal-light: #22d3ee;
+
+$orange-primary: #f59e0b;
+$orange-secondary: #d97706;
+$orange-tertiary: #b45309;
+$orange-light: #fbbf24;
+
+$indigo-primary: #6366f1;
+$indigo-secondary: #4f46e5;
+$indigo-tertiary: #4338ca;
+$indigo-light: #818cf8;
+
+// Neutral colors
+$slate-50: #f8fafc;
+$slate-100: #f1f5f9;
+$slate-200: #e2e8f0;
+$slate-300: #cbd5e1;
+$slate-400: #94a3b8;
+$slate-500: #64748b;
+$slate-600: #475569;
+$slate-700: #334155;
+$slate-800: #1e293b;
+$slate-900: #0f172a;
+
+// Alpha values
+$alpha-light: 0.1;
+$alpha-medium: 0.2;
+$alpha-heavy: 0.3;
+$alpha-bg: 0.7;
+$alpha-bg-card: 0.8;
+$alpha-bg-card-alt: 0.9;
+$alpha-bg-card-strong: 0.95;
+
 $skills-light-theme: (
   // Skills section colors
   skills-background: linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%),
   skills-background-pattern:
-    radial-gradient(circle at 25% 25%, #3b82f6, transparent 50%),
-  gradient-skills-title: linear-gradient(90deg, #1e40af, #3b82f6, #10b981),
-  skills-category-bg: rgba(255, 255, 255, 0.7),
-  skills-category-border: rgba(148, 163, 184, 0.2),
-  skills-category-title-color: #1e293b,
-  skills-skill-name-color: #334155,
-  skills-skill-level-color: #64748b,
-  skills-skill-percentage-color: #475569,
-  skills-progress-bg: rgba(226, 232, 240, 0.8),
-  // Card 1 - Web Frameworks (Blue theme - matching hero)
+    radial-gradient(circle at 25% 25%, $blue-primary, transparent 50%),
+  gradient-skills-title:
+    linear-gradient(90deg, $blue-tertiary, $blue-primary, $green-primary),
+  skills-category-bg: rgba($slate-50, $alpha-bg),
+  skills-category-border: rgba($slate-400, $alpha-medium),
+  skills-category-title-color: $slate-800,
+  skills-skill-name-color: $slate-700,
+  skills-skill-level-color: $slate-900,
+  skills-skill-percentage-color: $slate-600,
+  skills-progress-bg: rgba($slate-200, $alpha-bg-card),
+  // Card 1 - Web Frameworks (Blue theme)
   skills-category-bg-primary:
     linear-gradient(
       135deg,
-      rgba(239, 246, 255, 0.9),
-      rgba(219, 234, 254, 0.95)
+      rgba(239, 246, 255, $alpha-bg-card-alt),
+      rgba(219, 234, 254, $alpha-bg-card-strong)
     ),
-  skills-category-border-primary: rgba(59, 130, 246, 0.2),
+  skills-category-border-primary: rgba($blue-primary, $alpha-medium),
   skills-gradient-primary:
-    linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05)),
-  skills-accent-primary: #3b82f6,
+    linear-gradient(
+      135deg,
+      rgba($blue-primary, $alpha-light),
+      rgba($blue-secondary, 0.05)
+    ),
+  skills-accent-primary: $blue-primary,
 
-  // Card 2 - Styling & Design (Green theme - matching about)
+  // Card 2 - Styling & Design (Green theme)
   skills-category-bg-secondary:
     linear-gradient(
       135deg,
-      rgba(236, 253, 245, 0.9),
-      rgba(209, 250, 229, 0.95)
+      rgba(236, 253, 245, $alpha-bg-card-alt),
+      rgba(209, 250, 229, $alpha-bg-card-strong)
     ),
-  skills-category-border-secondary: rgba(16, 185, 129, 0.2),
+  skills-category-border-secondary: rgba($green-primary, $alpha-medium),
   skills-gradient-secondary:
-    linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05)),
-  skills-accent-secondary: #10b981,
+    linear-gradient(
+      135deg,
+      rgba($green-primary, $alpha-light),
+      rgba($green-secondary, 0.05)
+    ),
+  skills-accent-secondary: $green-primary,
 
   // Card 3 - Backend Development (Purple theme)
   skills-category-bg-tertiary:
     linear-gradient(
       135deg,
-      rgba(245, 243, 255, 0.9),
-      rgba(237, 233, 254, 0.95)
+      rgba(245, 243, 255, $alpha-bg-card-alt),
+      rgba(237, 233, 254, $alpha-bg-card-strong)
     ),
-  skills-category-border-tertiary: rgba(139, 92, 246, 0.2),
+  skills-category-border-tertiary: rgba($purple-primary, $alpha-medium),
   skills-gradient-tertiary:
-    linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.05)),
-  skills-accent-tertiary: #8b5cf6,
+    linear-gradient(
+      135deg,
+      rgba($purple-primary, $alpha-light),
+      rgba($purple-secondary, 0.05)
+    ),
+  skills-accent-tertiary: $purple-primary,
 
   // Card 4 - Development Tools (Teal theme)
   skills-category-bg-quaternary:
     linear-gradient(
       135deg,
-      rgba(240, 253, 250, 0.9),
-      rgba(204, 251, 241, 0.95)
+      rgba(240, 253, 250, $alpha-bg-card-alt),
+      rgba(204, 251, 241, $alpha-bg-card-strong)
     ),
-  skills-category-border-quaternary: rgba(6, 182, 212, 0.2),
+  skills-category-border-quaternary: rgba($teal-primary, $alpha-medium),
   skills-gradient-quaternary:
-    linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.05)),
-  skills-accent-quaternary: #06b6d4,
+    linear-gradient(
+      135deg,
+      rgba($teal-primary, $alpha-light),
+      rgba($teal-secondary, 0.05)
+    ),
+  skills-accent-quaternary: $teal-primary,
 
   // Card 5 - Testing & Quality (Orange theme)
   skills-category-bg-quinary:
     linear-gradient(
       135deg,
-      rgba(255, 251, 235, 0.9),
-      rgba(254, 243, 199, 0.95)
+      rgba(255, 251, 235, $alpha-bg-card-alt),
+      rgba(254, 243, 199, $alpha-bg-card-strong)
     ),
-  skills-category-border-quinary: rgba(245, 158, 11, 0.2),
+  skills-category-border-quinary: rgba($orange-primary, $alpha-medium),
   skills-gradient-quinary:
-    linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05)),
-  skills-accent-quinary: #f59e0b,
+    linear-gradient(
+      135deg,
+      rgba($orange-primary, $alpha-light),
+      rgba($orange-secondary, 0.05)
+    ),
+  skills-accent-quinary: $orange-primary,
 
   // Card 6 - AI-Tools (Indigo theme)
   skills-category-bg-senary:
     linear-gradient(
       135deg,
-      rgba(238, 242, 255, 0.9),
-      rgba(224, 231, 255, 0.95)
+      rgba(238, 242, 255, $alpha-bg-card-alt),
+      rgba(224, 231, 255, $alpha-bg-card-strong)
     ),
-  skills-category-border-senary: rgba(99, 102, 241, 0.2),
+  skills-category-border-senary: rgba($indigo-primary, $alpha-medium),
   skills-gradient-senary:
-    linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.05)),
-  skills-accent-senary: #6366f1,
+    linear-gradient(
+      135deg,
+      rgba($indigo-primary, $alpha-light),
+      rgba($indigo-secondary, 0.05)
+    ),
+  skills-accent-senary: $indigo-primary,
 
-  // Enhanced progress bar colors
-  skills-progress-primary: linear-gradient(90deg, #3b82f6, #1d4ed8, #1e40af),
-  skills-progress-secondary: linear-gradient(90deg, #10b981, #047857, #065f46),
-  skills-progress-tertiary: linear-gradient(90deg, #8b5cf6, #7c3aed, #6d28d9),
-  skills-progress-quaternary: linear-gradient(90deg, #06b6d4, #0891b2, #0e7490),
-  skills-progress-quinary: linear-gradient(90deg, #f59e0b, #d97706, #b45309),
-  skills-progress-senary: linear-gradient(90deg, #6366f1, #4f46e5, #4338ca)
+  // Progress bar gradients
+  skills-progress-primary:
+    linear-gradient(90deg, $blue-primary, $blue-secondary, $blue-tertiary),
+  skills-progress-secondary:
+    linear-gradient(90deg, $green-primary, $green-secondary, $green-tertiary),
+  skills-progress-tertiary:
+    linear-gradient(90deg, $purple-primary, $purple-tertiary, $purple-secondary),
+  skills-progress-quaternary:
+    linear-gradient(90deg, $teal-primary, $teal-secondary, $teal-tertiary),
+  skills-progress-quinary:
+    linear-gradient(90deg, $orange-primary, $orange-secondary, $orange-tertiary),
+  skills-progress-senary:
+    linear-gradient(90deg, $indigo-primary, $indigo-secondary, $indigo-tertiary)
 );
 
 $skills-dark-theme: (
   // Skills section colors
-  skills-background: linear-gradient(135deg, #1e293b 0%, #0ea5e9 100%),
+  skills-background: linear-gradient(135deg, $slate-800 0%, #0ea5e9 100%),
   skills-background-pattern:
-    radial-gradient(circle at 25% 25%, #1e40af, transparent 50%),
-  gradient-skills-title: linear-gradient(90deg, #60a5fa, #34d399, #a78bfa),
-  skills-category-bg: rgba(30, 41, 55, 0.8),
-  skills-category-border: rgba(71, 85, 105, 0.3),
-  skills-category-title-color: #f1f5f9,
-  skills-skill-name-color: #cbd5e1,
-  skills-skill-level-color: #94a3b8,
-  skills-skill-percentage-color: #e2e8f0,
-  skills-progress-bg: rgba(51, 65, 85, 0.8),
+    radial-gradient(circle at 25% 25%, $blue-tertiary, transparent 50%),
+  gradient-skills-title:
+    linear-gradient(90deg, $blue-light, $green-light, $purple-light),
+  skills-category-bg: rgba($slate-800, $alpha-bg-card),
+  skills-category-border: rgba($slate-600, $alpha-heavy),
+  skills-category-title-color: $slate-100,
+  skills-skill-name-color: $slate-300,
+  skills-skill-level-color: $slate-400,
+  skills-skill-percentage-color: $slate-200,
+  skills-progress-bg: rgba($slate-700, $alpha-bg-card),
   // Dark theme card backgrounds
   skills-category-bg-primary:
-    linear-gradient(135deg, rgba(30, 58, 138, 0.4), rgba(29, 78, 216, 0.3)),
-  skills-category-border-primary: rgba(96, 165, 250, 0.3),
+    linear-gradient(
+      135deg,
+      rgba(30, 58, 138, 0.4),
+      rgba(29, 78, 216, $alpha-heavy)
+    ),
+  skills-category-border-primary: rgba($blue-light, $alpha-heavy),
   skills-gradient-primary:
-    linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(59, 130, 246, 0.05)),
-  skills-accent-primary: #60a5fa,
+    linear-gradient(
+      135deg,
+      rgba($blue-light, $alpha-light),
+      rgba($blue-primary, 0.05)
+    ),
+  skills-accent-primary: $blue-light,
 
   skills-category-bg-secondary:
-    linear-gradient(135deg, rgba(6, 95, 70, 0.4), rgba(4, 120, 87, 0.3)),
-  skills-category-border-secondary: rgba(52, 211, 153, 0.3),
+    linear-gradient(
+      135deg,
+      rgba(6, 95, 70, 0.4),
+      rgba(4, 120, 87, $alpha-heavy)
+    ),
+  skills-category-border-secondary: rgba($green-light, $alpha-heavy),
   skills-gradient-secondary:
-    linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(16, 185, 129, 0.05)),
-  skills-accent-secondary: #34d399,
+    linear-gradient(
+      135deg,
+      rgba($green-light, $alpha-light),
+      rgba($green-primary, 0.05)
+    ),
+  skills-accent-secondary: $green-light,
 
   skills-category-bg-tertiary:
-    linear-gradient(135deg, rgba(88, 28, 135, 0.4), rgba(109, 40, 217, 0.3)),
-  skills-category-border-tertiary: rgba(167, 139, 250, 0.3),
+    linear-gradient(
+      135deg,
+      rgba(88, 28, 135, 0.4),
+      rgba(109, 40, 217, $alpha-heavy)
+    ),
+  skills-category-border-tertiary: rgba($purple-light, $alpha-heavy),
   skills-gradient-tertiary:
-    linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(139, 92, 246, 0.05)),
-  skills-accent-tertiary: #a78bfa,
+    linear-gradient(
+      135deg,
+      rgba($purple-light, $alpha-light),
+      rgba($purple-primary, 0.05)
+    ),
+  skills-accent-tertiary: $purple-light,
 
   skills-category-bg-quaternary:
-    linear-gradient(135deg, rgba(15, 118, 110, 0.4), rgba(17, 94, 89, 0.3)),
-  skills-category-border-quaternary: rgba(34, 211, 238, 0.3),
+    linear-gradient(
+      135deg,
+      rgba(15, 118, 110, 0.4),
+      rgba(17, 94, 89, $alpha-heavy)
+    ),
+  skills-category-border-quaternary: rgba($teal-light, $alpha-heavy),
   skills-gradient-quaternary:
-    linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(6, 182, 212, 0.05)),
-  skills-accent-quaternary: #22d3ee,
+    linear-gradient(
+      135deg,
+      rgba($teal-light, $alpha-light),
+      rgba($teal-primary, 0.05)
+    ),
+  skills-accent-quaternary: $teal-light,
 
   skills-category-bg-quinary:
-    linear-gradient(135deg, rgba(180, 83, 9, 0.4), rgba(217, 119, 6, 0.3)),
-  skills-category-border-quinary: rgba(251, 191, 36, 0.3),
+    linear-gradient(
+      135deg,
+      rgba(180, 83, 9, 0.4),
+      rgba(217, 119, 6, $alpha-heavy)
+    ),
+  skills-category-border-quinary: rgba($orange-light, $alpha-heavy),
   skills-gradient-quinary:
-    linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05)),
-  skills-accent-quinary: #fbbf24,
+    linear-gradient(
+      135deg,
+      rgba($orange-light, $alpha-light),
+      rgba($orange-primary, 0.05)
+    ),
+  skills-accent-quinary: $orange-light,
 
   skills-category-bg-senary:
-    linear-gradient(135deg, rgba(67, 56, 202, 0.4), rgba(79, 70, 229, 0.3)),
-  skills-category-border-senary: rgba(129, 140, 248, 0.3),
+    linear-gradient(
+      135deg,
+      rgba(67, 56, 202, 0.4),
+      rgba(79, 70, 229, $alpha-heavy)
+    ),
+  skills-category-border-senary: rgba($indigo-light, $alpha-heavy),
   skills-gradient-senary:
-    linear-gradient(135deg, rgba(129, 140, 248, 0.1), rgba(99, 102, 241, 0.05)),
-  skills-accent-senary: #818cf8,
+    linear-gradient(
+      135deg,
+      rgba($indigo-light, $alpha-light),
+      rgba($indigo-primary, 0.05)
+    ),
+  skills-accent-senary: $indigo-light,
 
-  // Enhanced progress bars for dark theme
-  skills-progress-primary: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb),
-  skills-progress-secondary: linear-gradient(90deg, #34d399, #10b981, #059669),
-  skills-progress-tertiary: linear-gradient(90deg, #a78bfa, #8b5cf6, #7c3aed),
-  skills-progress-quaternary: linear-gradient(90deg, #22d3ee, #06b6d4, #0891b2),
-  skills-progress-quinary: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706),
-  skills-progress-senary: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5)
+  // Progress bars for dark theme
+  skills-progress-primary:
+    linear-gradient(90deg, $blue-light, $blue-primary, $blue-secondary),
+  skills-progress-secondary:
+    linear-gradient(90deg, $green-light, $green-primary, $green-secondary),
+  skills-progress-tertiary:
+    linear-gradient(90deg, $purple-light, $purple-primary, $purple-tertiary),
+  skills-progress-quaternary:
+    linear-gradient(90deg, $teal-light, $teal-primary, $teal-secondary),
+  skills-progress-quinary:
+    linear-gradient(90deg, $orange-light, $orange-primary, $orange-secondary),
+  skills-progress-senary:
+    linear-gradient(90deg, $indigo-light, $indigo-primary, $indigo-secondary)
 );