fix: Dark mode headings, settings redirect, upload nonce, mobile theme toggle

## 1. Fix Dark Mode Headings ✅

**Issue:** h1-h6 headings not changing color in dark mode

**Fix:**
```css
h1, h2, h3, h4, h5, h6 { @apply text-foreground; }
```

**Result:** All headings now use foreground color (adapts to theme)

---

## 2. Fix Settings Default Route ✅

**Issue:** Main Settings menu goes to /settings with placeholder page

**Fix:**
- Changed /settings to redirect to /settings/store
- Store Details is now the default settings page
- No more placeholder "Settings interface coming soon"

**Code:**
```tsx
useEffect(() => {
  navigate('/settings/store', { replace: true });
}, [navigate]);
```

---

## 3. Fix "Cookie check failed" Upload Error ✅

**Issue:** Image upload failing with "Cookie check failed"

**Root Cause:** WordPress REST API nonce not available

**Fix:**
- Added `wpApiSettings` to both dev and prod modes
- Provides `root` and `nonce` for WordPress REST API
- Image upload component already checks multiple nonce sources

**Backend Changes:**
```php
// Dev mode
wp_localize_script($handle, 'wpApiSettings', [
    'root'  => esc_url_raw(rest_url()),
    'nonce' => wp_create_nonce('wp_rest'),
]);

// Prod mode (same)
```

**Result:** Image upload now works with proper authentication

---

## 4. Add Theme Toggle to Mobile ✅

**Recommendation:** Yes, mobile should have theme toggle

**Implementation:** Added to More page (mobile hub)

**UI:**
- 3-column grid with theme cards
- ☀️ Light | 🌙 Dark | 🖥️ System
- Active theme highlighted with primary border
- Placed under "Appearance" section

**Location:**
```
More Page
├── Coupons
├── Settings
├── Appearance (NEW)
│   ├── ☀️ Light
│   ├── 🌙 Dark
│   └── 🖥️ System
└── Exit Fullscreen / Logout
```

**Why More page?**
- Mobile users go there for additional options
- Natural place for appearance settings
- Doesn't clutter main navigation
- Desktop has header toggle, mobile has More page

---

## Summary

✅ **Dark mode headings** - Fixed with text-foreground
✅ **Settings redirect** - /settings → /settings/store
✅ **Upload nonce** - wpApiSettings added (dev + prod)
✅ **Mobile theme toggle** - Added to More page with 3-card grid

**All issues resolved!** 🎉

**Note:** CSS lint warnings (@tailwind, @apply) are false positives - Tailwind directives are valid.

admin-spa/src/index.css

@@ -65,6 +65,7 @@
 @layer base {
   * { @apply border-border; }
   body { @apply bg-background text-foreground; }
+  h1, h2, h3, h4, h5, h6 { @apply text-foreground; }
 }
 
 /* Command palette input: remove native borders/shadows to match shadcn */

admin-spa/src/routes/More/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import { Tag, Settings as SettingsIcon, ChevronRight, Minimize2, LogOut } from 'lucide-react';
+import { Tag, Settings as SettingsIcon, ChevronRight, Minimize2, LogOut, Sun, Moon, Monitor } from 'lucide-react';
 import { __ } from '@/lib/i18n';
 import { usePageHeader } from '@/contexts/PageHeaderContext';
 import { useApp } from '@/contexts/AppContext';
 import { Button } from '@/components/ui/button';
+import { useTheme } from '@/components/ThemeProvider';
 
 interface MenuItem {
   icon: React.ReactNode;
@@ -32,6 +33,7 @@ export default function MorePage() {
   const navigate = useNavigate();
   const { setPageHeader, clearPageHeader } = usePageHeader();
   const { isStandalone, exitFullscreen } = useApp();
+  const { theme, setTheme } = useTheme();
   
   useEffect(() => {
     setPageHeader(__('More'));
@@ -49,6 +51,12 @@ export default function MorePage() {
     window.location.href = window.WNW_CONFIG?.wpAdminUrl || '/wp-admin';
   };
   
+  const themeOptions = [
+    { value: 'light', icon: <Sun className="w-5 h-5" />, label: __('Light') },
+    { value: 'dark', icon: <Moon className="w-5 h-5" />, label: __('Dark') },
+    { value: 'system', icon: <Monitor className="w-5 h-5" />, label: __('System') },
+  ];
+
   return (
     <div className="bg-background pb-20">
       {/* Remove inline header - use PageHeader component instead */}
@@ -80,6 +88,27 @@ export default function MorePage() {
         ))}
       </div>
 
+      {/* Theme Selector */}
+      <div className="px-4 py-6">
+        <h3 className="text-sm font-medium mb-3">{__('Appearance')}</h3>
+        <div className="grid grid-cols-3 gap-2">
+          {themeOptions.map((option) => (
+            <button
+              key={option.value}
+              onClick={() => setTheme(option.value as 'light' | 'dark' | 'system')}
+              className={`flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-colors ${
+                theme === option.value
+                  ? 'border-primary bg-primary/10'
+                  : 'border-border hover:border-primary/50'
+              }`}
+            >
+              {option.icon}
+              <span className="text-xs font-medium">{option.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
       {/* Exit Fullscreen / Logout */}
       <div className="px-4 py-6">
         {isStandalone ? (

admin-spa/src/routes/Settings/index.tsx

@@ -1,32 +1,13 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { __ } from '@/lib/i18n';
+import { useNavigate } from 'react-router-dom';
 
 export default function SettingsIndex() {
-  return (
+  const navigate = useNavigate();
-    <div>
-      <h1 className="text-2xl font-semibold mb-6">{__('WooNooW Settings')}</h1>
-      <p className="text-muted-foreground mb-6">
-        {__('Configure WooNooW plugin settings and preferences.')}
-      </p>
   
-      <div className="space-y-6">
+  useEffect(() => {
-        <div className="bg-card border rounded-lg p-6">
+    // Redirect to Store Details as the default settings page
-          <h2 className="text-lg font-semibold mb-3">{__('Plugin Configuration')}</h2>
+    navigate('/settings/store', { replace: true });
-          <p className="text-sm text-muted-foreground mb-4">
+  }, [navigate]);
-            {__('Settings interface coming soon.')}
-          </p>
-        </div>
   
-        <div className="bg-card border rounded-lg p-6">
+  return null;
-          <h2 className="text-lg font-semibold mb-3">{__('Quick Links')}</h2>
-          <div className="space-y-2">
-            <p className="text-sm">
-              <span className="font-medium">{__('WooCommerce Settings:')}</span>{' '}
-              {__('Use the navigation menu to access General, Payments, Shipping, and other WooCommerce settings.')}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
 }

includes/Admin/Assets.php

@@ -48,6 +48,13 @@ class Assets {
         ]);
         wp_add_inline_script($handle, 'window.WNW_API = window.WNW_API || WNW_API;', 'after');
         
+        // WordPress REST API settings (for media upload compatibility)
+        wp_localize_script($handle, 'wpApiSettings', [
+            'root'  => esc_url_raw(rest_url()),
+            'nonce' => wp_create_nonce('wp_rest'),
+        ]);
+        wp_add_inline_script($handle, 'window.wpApiSettings = window.wpApiSettings || wpApiSettings;', 'after');
+
         // Also expose compact global for convenience
         wp_localize_script($handle, 'wnw', [
             'isDev'     => true,
@@ -134,6 +141,13 @@ class Assets {
             'adminScreen' => 'woonoow',
             'adminUrl'    => admin_url('admin.php'),
         ]);
+        
+        // WordPress REST API settings (for media upload compatibility)
+        wp_localize_script($handle, 'wpApiSettings', [
+            'root'  => esc_url_raw(rest_url()),
+            'nonce' => wp_create_nonce('wp_rest'),
+        ]);
+        
         wp_localize_script($handle, 'WNW_STORE', self::store_runtime());
         wp_add_inline_script($handle, 'window.WNW_STORE = window.WNW_STORE || WNW_STORE;', 'after');