Improve text visibility in atom and dusk themes

- Add CSS variable support to dusk theme components for dynamic text colors
- Fix low-contrast preset color combinations (cyberpunk, neon, magma, forest, obsidian, space)
- Add text-shadow utility classes and apply to site header and backgrounds
- Style logout buttons as proper buttons matching other button styles
- Fix hardcoded text colors in atom theme components

resources/css/global.css

@@ -19,12 +19,16 @@
 @layer components {
   .nav-item {
     @apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4! md:border-transparent! md:hover:border-b-[#eeb425]!;
-    @apply text-gray-700 dark:text-gray-100;
+    color: var(--color-navbar-text, #1e293b);
   }
 
   .dropdown-item {
     @apply block py-2 px-4 font-semibold transition duration-200;
-    @apply text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700;
+    color: var(--color-text);
+  }
+  .dropdown-item:hover {
+    background-color: var(--color-primary, #eeb425);
+    color: var(--button-text-color, #1a1a2e);
   }
 }
 
@@ -60,6 +64,10 @@ html {
   scroll-behavior: smooth;
 }
 
+body {
+  color: var(--color-text, #0f172a);
+}
+
 .drop-shadow {
   -webkit-filter: drop-shadow(2px 1px 0 #fff) drop-shadow(-2px 1px 0 #fff)
     drop-shadow(0 -2px 0 #fff);
@@ -305,7 +313,7 @@ html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
 }
 
 #article-content a {
-  color: #53b2f8;
+  color: var(--link-color, #53b2f8);
 }
 
 .cursor-grab {
@@ -314,3 +322,13 @@ html.dark .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
 .cursor-grab:active {
   cursor: grabbing !important;
 }
+
+/* Text utility classes using CSS variables */
+.text-body { color: var(--color-text); }
+.text-muted { color: var(--color-text-muted); }
+.text-nav { color: var(--color-navbar-text); }
+
+/* Text shadow for readability on images/dark backgrounds */
+.text-shadow { text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
+.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
+.text-shadow-lg { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }