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/atom/views/components/site-header.blade.php

@@ -52,24 +52,24 @@
  @guest
  <x-modals.modal-wrapper>
  <div class="flex justify-center">
- <div class="font-semibold flex-col md:w-[600px] " style="color: var(--color-text)">
- <p class="hidden text-center text-xl md:block " style="color: var(--color-text)">
- {{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }}
- </p>
+ <div class="font-semibold flex-col md:w-[600px]" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
+  <p class="hidden text-center text-xl md:block" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">
+  {{ __('An online virtual world where you can create your own avatar, make friends, chat, create rooms and much more!') }}
+  </p>
 
- <div class="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
- <button type="button" x-on:click="open = true"
- class="rounded-full border-2 px-8! py-2! uppercase transition! duration-200! ease-in-out!"
- style="border-color: var(--color-primary); background-color: var(--color-primary); color: var(--button-text-color)">
- {{ __('Login') }}
- </button>
+  <div class="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
+  <button type="button" x-on:click="open = true"
+  class="rounded-full border-2 px-8! py-2! uppercase transition! duration-200! ease-in-out!"
+  style="border-color: var(--color-primary); background-color: var(--color-primary); color: var(--button-text-color)">
+  {{ __('Login') }}
+  </button>
 
- <p class="text-sm uppercase " style="color: var(--color-text-muted)">{{ __('Or') }}</p>
+  <p class="text-sm uppercase" style="color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);">{{ __('Or') }}</p>
 
  <a data-turbolinks="false" href="{{ route('register') }}">
  <button
  class="uppercase px-8! py-2.5! rounded-full transition! ease-in-out! duration-200!"
- style="background-color: var(--color-accent); color: #ffffff;">
+ style="background-color: var(--color-accent); color: var(--button-text-color, #ffffff);">
  {{ __('Create an account') }}
  </button>
  </a>