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/themes/dusk/css/app.css

@@ -14,7 +14,12 @@
 
 @layer components {
     .dropdown-item {
-        @apply w-full text-left px-2 py-1 transition duration-200 ease-in-out text-sm hover:bg-[#8770b2];
+        @apply w-full text-left px-2 py-1 transition duration-200 ease-in-out text-sm;
+        color: var(--color-text);
+    }
+    .dropdown-item:hover {
+        background-color: var(--color-primary, #8770b2);
+        color: var(--button-text-color, #ffffff);
     }
 
 }
@@ -25,8 +30,48 @@
 
 body {
     overflow-x: hidden;
+    color: var(--color-text, #ffffff);
 }
 
+/* Base 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-primary { color: var(--color-primary); }
+.text-on-primary { color: var(--button-text-color); }
+
+/* Settings navigation */
+.settings-nav:hover,
+.settings-nav.active {
+    background-color: var(--color-primary) !important;
+    color: var(--button-text-color) !important;
+}
+
+/* Dropdown panel */
+.dropdown-children {
+    background-color: var(--color-dropdown, #ac93da);
+    box-shadow: var(--dropdown-shadow, 0 4px 16px rgba(0,0,0,0.25));
+}
+
+/* Footer hover */
+.site-footer:hover {
+    color: var(--color-text) !important;
+}
+
+/* Navigation link hover states using CSS variables */
+.nav-link {
+    color: var(--color-navbar-text);
+    transition: color 200ms ease-in-out;
+}
+.nav-link:hover {
+    color: var(--color-primary);
+}
+
+/* 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); }
+
 #app {
     min-height: calc(100vh - 3.5rem);
 }
@@ -40,6 +85,12 @@ img {
     pointer-events: none;
 }
 
+input::placeholder,
+textarea::placeholder {
+    color: var(--input-placeholder-color, var(--color-text-muted));
+    opacity: 1;
+}
+
 .site-bg {
     position: absolute;
     width: 100%;
@@ -62,7 +113,7 @@ img {
 }
 
 .nav-header {
-    background-color: #171a23;
+    background-color: var(--color-navbar, #171a23);
     width: 100%;
     display: flex;
     align-items: center;
@@ -112,7 +163,7 @@ img {
 }
 
 .sub-header {
-    color: #FFF;
+    color: var(--color-text, #FFF);
     height: 40px;
     width: 100%;
     display: flex;
@@ -138,8 +189,9 @@ img {
 }
 
 .read-more-link {
-    z-index: 99999; /* Adjust as needed */
+    z-index: 99999;
     position: relative;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
 }
 
 .swiper-button-prev {