Enhance light mode styles for buttons and CTAs

- Added text-shadow to primary buttons for improved visibility in light mode.
- Updated secondary button styles with specific light mode enhancements, including color, border, and background adjustments.
- Introduced light mode fixes for secondary CTAs, ensuring better visibility and user experience.
- Refined styles for CTA buttons to enhance their appearance and interaction in light mode.

src/assets/styles/tailwind.css

@@ -36,6 +36,8 @@
 @layer components {
   .btn {
     @apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer;
+    /* Enhanced visibility for light mode */
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 
   .btn-primary {
@@ -44,6 +46,24 @@
 
   .btn-secondary {
     @apply btn;
+    /* Enhanced visibility for light mode secondary buttons */
+    color: rgb(16 16 16);
+    border-color: rgb(156 163 175);
+  }
+
+  /* Light mode specific enhancements for secondary buttons */
+  html:not(.dark) .btn-secondary {
+    color: rgb(16 16 16) !important;
+    border-color: rgb(156 163 175) !important;
+    background-color: rgba(255, 255, 255, 0.9) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  html:not(.dark) .btn-secondary:hover {
+    background-color: rgb(243 244 246) !important;
+    border-color: rgb(107 114 128) !important;
+    color: rgb(16 16 16) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
   }
 
   .btn-tertiary {

src/components/CustomStyles.astro

@@ -38,6 +38,7 @@ import '@fontsource-variable/inter';
     --aw-color-text-heading: rgb(0 0 0);
     --aw-color-text-default: rgb(16 16 16);
     --aw-color-text-muted: rgb(0, 0, 0);
+    --aw-color-text-page: rgb(16 16 16);
     --aw-color-bg-page: rgb(255 255 255);
 
     --aw-color-bg-page-dark: rgb(3 6 32);
@@ -59,6 +60,7 @@ import '@fontsource-variable/inter';
     --aw-color-text-heading: rgb(247, 248, 248);
     --aw-color-text-default: rgb(229 236 246);
     --aw-color-text-muted: rgb(229 236 246 / 85%);
+    --aw-color-text-page: rgb(229 236 246);
     --aw-color-bg-page: rgb(3 6 32);
 
     ::selection {

src/pages/[lang]/aboutme.astro

@@ -288,6 +288,21 @@ const metadata = {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
+  /* Light mode fixes for secondary CTA button */
+  html:not(.dark) .cta-secondary-enhanced {
+    background: rgba(255, 255, 255, 0.95) !important;
+    color: rgba(15, 23, 42, 1) !important;
+    border-color: rgba(102, 126, 234, 0.6) !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  html:not(.dark) .cta-secondary-enhanced:hover {
+    background: rgba(102, 126, 234, 0.1) !important;
+    color: rgba(15, 23, 42, 1) !important;
+    border-color: rgba(102, 126, 234, 0.8) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2) !important;
+  }
+
   /* Section spacing - key fix for touching sections */
   .content-section {
     margin: 4rem 0;

src/pages/[lang]/index.astro

@@ -302,24 +302,31 @@ const metadata = {
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-left: 2rem;
+    /* Override any conflicting base button styles */
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }
 
   .cta-secondary-explosive:hover {
     background: rgba(6, 255, 165, 0.15);
     transform: translateY(-2px) scale(1.03);
     border-color: rgba(6, 255, 165, 0.6);
+    color: white;
   }
 
-  /* Light mode CTA fixes */
+  /* Light mode CTA fixes - enhanced for better visibility */
   html:not(.dark) .cta-secondary-explosive {
-    background: rgba(255, 255, 255, 0.9) !important;
+    background: rgba(255, 255, 255, 0.95) !important;
-    color: rgba(15, 23, 42, 0.9) !important;
+    color: rgba(15, 23, 42, 1) !important;
-    border-color: rgba(6, 255, 165, 0.6) !important;
+    border-color: rgba(6, 255, 165, 0.7) !important;
+    text-shadow: none !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
   }
 
   html:not(.dark) .cta-secondary-explosive:hover {
-    background: rgba(6, 255, 165, 0.1) !important;
+    background: rgba(6, 255, 165, 0.15) !important;
     color: rgba(15, 23, 42, 1) !important;
+    border-color: rgba(6, 255, 165, 0.8) !important;
+    box-shadow: 0 6px 20px rgba(6, 255, 165, 0.2) !important;
   }
 
   /* Light mode content card fixes */