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/views/components/content/content-card.blade.php

@@ -1,17 +1,17 @@
 
 @props(['icon' => '', 'classes' => ''])
 
-<div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm text-gray-100 {{ $classes }}">
+<div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm {{ $classes }}" style="color: var(--color-text);">
     <div class="flex gap-x-2 bg-[#21242e] p-3">
         @if (!empty($icon))
             <div class="max-w-12.5 max-h-12.5 min-w-12.5 min-h-12.5 rounded-full relative flex items-center justify-center {{ $icon }}"></div>
         @endif
 
         <div class="flex flex-col justify-center text-sm">
-            <p class="font-semibold text-gray-100">{{ $title }}</p>
+            <p class="font-semibold">{{ $title }}</p>
 
             @if(isset($underTitle))
-                <p class="text-gray-300">{{ $underTitle }}</p>
+                <p class="text-muted">{{ $underTitle }}</p>
             @endif
         </div>
     </div>