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

@@ -1,14 +1,14 @@
 @props(['errorBag' => '', 'classes' => '', 'name', 'type' => 'text', 'value' => '', 'placeholder' => '', 'required' => true, 'autofocus' => false, 'readonly' => false])
 
 <input
-    class="{{ $classes }} focus:ring-0 border-2 border-gray-700 rounded bg-[#21242e] focus:border-[#eeb425] w-full text-gray-200 @error($name, $errorBag) border-red-600 ring-red-500 @enderror"
+    class="{{ $classes }} focus:ring-0 border-2 rounded w-full @error($name, $errorBag) !border-red-600 ring-red-500 @enderror" style="border-color: var(--input-border-color, #4b5563); background-color: var(--input-background, #21242e); color: var(--input-text-color, #e2e8f0);"
     id="{{ $name }}" type="{{ $type }}" name="{{ $name }}" value="{{ $value }}"
     autocomplete="{{ $name }}" placeholder="{{ $placeholder }}" @if ($readonly) required @endif
     @if ($autofocus) autofocus="{{ $name }}" @endif
     @if ($readonly) readonly @endif>
 
 @error($name, $errorBag)
-    <p class="mt-1 text-xs italic text-red-500">
+    <p class="mt-1 text-xs italic" style="color: var(--button-danger-color, #ef4444);">
         {{ $message }}
     </p>
 @enderror

resources/themes/dusk/views/components/form/label.blade.php

@@ -1,11 +1,11 @@
 @props(['for', 'info' => ''])
 
 <div class="mb-2">
-    <label class="block font-semibold text-gray-700 dark:text-gray-200" for="{{ $for }}">
+    <label class="block font-semibold" for="{{ $for }}" style="color: var(--color-text);">
         {{ $slot }}
     </label>
 
-    <p class="text-gray-500 dark:text-gray-400 text-[14px]">
+    <p class="text-muted" style="font-size: var(--size-small-text, 14px);">
         {{ $info }}
     </p>
 </div>

resources/themes/dusk/views/components/form/primary-button.blade.php

@@ -1,6 +1,6 @@
 @props(['classes' => '', 'type' => 'submit'])
 
 <button type="{{ $type }}"
-    class="{{ $classes }} w-full rounded bg-[#eeb425] text-white p-2 border-2 border-yellow-400 transition ease-in-out duration-200 hover:bg-[#d49f1c] font-semibold">
+    class="{{ $classes }} w-full rounded p-2 border-2 transition ease-in-out duration-200 font-semibold" style="background-color: var(--button-color); color: var(--button-text-color); border-color: var(--button-color);">
     {{ $slot }}
 </button>