refactor: Migrate documentation content, rebuild UI components, and update core architecture.

docs/configuration/appearance.mdx

@@ -0,0 +1,36 @@
+---
+title: Appearance Settings
+description: Colors and Typography.
+---
+
+
+
+Customize your brand without coding.
+
+## Colors
+We use a smart palette system.
+*   **Primary**: Headlines and main buttons.
+*   **Secondary**: Subheadings and UI elements.
+*   **Accent**: Highlights and links.
+
+## Typography
+Choose from GDPR-compliant, locally hosted font pairings like:
+*   **Modern**: Inter
+*   **Editorial**: Playfair Display
+
+## Advanced Appearance Settings
+You can fine tune how WooNooW interacts with your standard WordPress site from the **General** settings panel.
+
+### SPA Mode
+The **Single Page Application Mode** ensures that customers stay inside the fast, React-based WooNooW app during their entire shopping journey.
+*   **Enabled (Default):** All WooNooW page links (like shop, cart, account) will intercept standard WordPress navigation and load instantly without page refreshes.
+*   **Disabled:** The store will behave like a traditional WordPress site, reloading the browser on every page change.
+
+### WordPress Admin Bar Visibility
+For a cleaner frontend experience, you can hide the default black WordPress Admin Bar that normally appears at the top of the screen for logged-in administrators and staff.
+*   Toggle **Hide Admin Bar on Frontend** to remove it from the Customer SPA. This ensures your sticky headers and floating elements display exactly as customers will see them.
+
+### Layout Styles
+Choose how your container behaves on larger desktop monitors:
+*   **Full Width:** Expands your headers, footers, and page sections to cover the entire width of the browser.
+*   **Boxed:** Constrains the main content area to a maximum width (typically 1200px) and centers it on the screen.