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/staff-content-section.blade.php

@@ -1,6 +1,6 @@
  @props(['badge' => '', 'color' => '#327fa8'])
 
- <div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm text-gray-100">
+ <div class="w-full flex flex-col gap-y-4 rounded-lg overflow-hidden bg-[#2b303c] pb-4 shadow-sm" style="color: var(--color-text);">
      <div class="flex gap-x-2 bg-[#21242e] p-3">
          <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"
              style="background-color: {{ $color }}">
@@ -8,10 +8,10 @@
          </div>
 
          <div class="flex flex-col justify-center text-sm">
-             <p class="font-semibold text-gray-300">{{ $title }}</p>
+             <p class="font-semibold text-nav">{{ $title }}</p>
 
              @if(isset($underTitle))
-                 <p class="text-gray-500">{{ $underTitle }}</p>
+                 <p class="text-muted">{{ $underTitle }}</p>
              @endif
          </div>
      </div>