Add light/dark mode support with CSS variables

app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-stone-800 flex relative">
+  <div class="min-h-screen bg-ghost-900 flex relative">
     <!-- Background image at top - full page width -->
     <div
       class="absolute inset-x-0 pointer-events-none z-0"
@@ -21,15 +21,48 @@
       "
     />
 
+    <!-- Mobile Header -->
+    <div
+      class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-ghost-900/95 backdrop-blur-md border-b border-ghost-700"
+    >
+      <div class="flex items-center justify-between p-4">
+        <NuxtLink
+          to="/"
+          class="text-lg font-bold text-white ethereal-text tracking-wider"
+        >
+          Ghost Guild
+        </NuxtLink>
+        <UButton
+          icon="i-lucide-menu"
+          color="neutral"
+          variant="ghost"
+          size="lg"
+          @click="isMobileMenuOpen = true"
+          aria-label="Open menu"
+        />
+      </div>
+    </div>
+
     <!-- Main Content Column - Left -->
     <div class="flex-1 overflow-y-auto relative z-[5]">
-      <div class="p-8 md:p-12 lg:p-16 max-w-4xl relative">
+      <div class="p-4 pt-20 md:p-8 md:pt-8 lg:p-16 max-w-4xl relative">
         <slot />
       </div>
       <AppFooter />
     </div>
 
-    <!-- Navigation Column - Right -->
-    <AppNavigation class="relative z-20" />
+    <!-- Desktop Navigation Column - Right -->
+    <AppNavigation class="hidden lg:block relative z-20" />
+
+    <!-- Mobile Navigation Drawer -->
+    <USlideover v-model:open="isMobileMenuOpen" side="right">
+      <template #body>
+        <AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
+      </template>
+    </USlideover>
   </div>
 </template>
+
+<script setup>
+const isMobileMenuOpen = ref(false);
+</script>