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

@@ -2,7 +2,7 @@
     @push('title', __('Welcome to the best hotel on the web!'))
 
 
-    <div class="col-span-12 md:col-span-6 min-h-[250px] bg-gray-900/50 rounded-xl flex flex-col py-6 px-8 text-white">
+    <div class="col-span-12 md:col-span-6 min-h-[250px] rounded-xl flex flex-col py-6 px-8" style="color: var(--color-text); background-color: var(--color-surface);">
         <h2 class="text-2xl">{{ __('Login') }}</h2>
 
         <form action="{{ route('login') }}" method="POST">
@@ -19,10 +19,10 @@
             <x-site-captchas />
 
             <div class="mt-4 flex gap-4">
-                <button type="submit" class="py-2 px-4 text-white bg-yellow-500 border-2 border-yellow-300 w-full rounded-md transition duration-300 ease-in-out hover:scale-[102%]">{{ __('Login') }}</button>
+                <button type="submit" class="py-2 px-4 w-full rounded-md transition duration-300 ease-in-out hover:scale-[102%]" style="background-color: var(--color-primary); color: var(--button-text-color); border: 2px solid var(--color-primary);">{{ __('Login') }}</button>
 
                 <a href="{{ route('register') }}" class="w-full">
-                    <button type="button" class="py-2 px-4 text-white bg-gray-700 border-2 border-gray-600 w-full rounded-md transition duration-300 ease-in-out hover:scale-[102%]">{{ __('Register') }}</button>
+                    <button type="button" class="py-2 px-4 w-full rounded-md transition duration-300 ease-in-out hover:scale-[102%]" style="background-color: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-text-muted);">{{ __('Register') }}</button>
                 </a>
             </div>
         </form>
@@ -56,7 +56,7 @@
                 <div class="photo-overlay"></div>
                 <img class="h-[250px] w-full object-cover object-center rounded-md custom-shadow" src="{{ $photo->url }}" alt="">
 
-                <div class="absolute right-2 bottom-2 bg-black/70 p-2 rounded-md text-white flex gap-x-2 z-[5]">
+                <div class="absolute right-2 bottom-2 p-2 rounded-md flex gap-x-2 z-[5] text-shadow-sm" style="background-color: var(--color-surface); color: var(--color-text);">
                     <img class="self-center" src="{{ asset('/assets/images/dusk/author_camera_icon.png') }}" alt="">
                     <small>
                         {{ $photo->user->username }}