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/leaderboard-card.blade.php

@@ -9,7 +9,7 @@
 ])
 
 <div class="flex flex-col gap-y-3">
-    <div class="flex gap-2 rounded-md py-2 px-4 bg-[#21242e]/90 text-gray-100 font-bold">
+    <div class="flex gap-2 rounded-md py-2 px-4 bg-[#21242e]/90 font-bold" style="color: var(--color-text);">
         <div class="flex items-center">
             <img src="{{ asset('/assets/images/icons/' . $icon) }}" alt="" class="w-4" style="image-rendering: pixelated;">
         </div>
@@ -27,10 +27,10 @@
               </div>
 
                <div class="flex flex-col">
-                   <p class="font-bold text-gray-100">
-                       {{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
-                   </p>
-                   <p class="text-gray-200 text-sm">
+                   <p class="font-bold">
+                        {{ $relationship ? $entry->{$relationship}?->username : $entry->username }}
+                    </p>
+                    <p class="text-muted text-sm">
                        {{ $formatValue ? $formatValue($entry->{$valueKey}) : $entry->{$valueKey} }} {{ $valueType }}
                    </p>
                </div>