feat(ui): adopt Tailwind v4 design system and archive change

- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin
- Add @vmall/shared/theme.css tokens with html[data-accent] presets
- Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage,
  VAccentSwatch, useAccent) as a Nuxt module
- Convert all three apps to kit + utilities; delete ui.css/mall.css and
  every <style scoped>; consoles get accent presets, mall locked to red
- Fix VCard boolean prop default (padding) and PDP/store stale
  useAsyncData keys on param navigation
- Archive adopt-tailwind-design-system; new frontend-ui capability spec

openspec/specs/frontend-mall/spec.md

@@ -2,9 +2,7 @@
 
 ## Purpose
 The buyer-facing storefront: shell, home page, discovery, shopping and transaction flows, and the buyer center.
-
 ## Requirements
-
 ### Requirement: Localized storefront
 The mall SHALL render every UI string and all catalog/store/marketing mock content in en or zh from one switcher, defaulting to en. Switching locale SHALL update the desktop shell and current page without a full reload.
 
@@ -31,7 +29,7 @@ A shopper SHALL be able to browse, view detail, add to cart, checkout with a shi
 - **THEN** they are sent to sign in and, once signed in, returned to that product page
 
 ### Requirement: B2B2C mall-style PC storefront shell
-The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The header SHALL remain fully visible while scrolling; no part of the shell SHALL auto-hide based on scroll position. The category mega-menu SHALL appear as a hover dropdown under the navigation "All Categories" entry on every page except the home page, where it is instead pinned in the hero row. The visual language SHALL use #ca151e for brand/price/active states, #f5f5f5 section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use Nuxt-native semantic components and SHALL NOT depend on Element Plus.
+The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC mall: a 30px utility bar, logo/search/cart header, dark primary navigation with a hover category mega-menu, a 1200px content grid, and a value-proposition footer. The header SHALL remain fully visible while scrolling; no part of the shell SHALL auto-hide based on scroll position. The category mega-menu SHALL appear as a hover dropdown under the navigation "All Categories" entry on every page except the home page, where it is instead pinned in the hero row. The visual language SHALL use `#ca151e` for brand/price/active states, `#f5f5f5` section backgrounds, gray hairline borders, compact controls, and product-card hover lift/shadow. The implementation SHALL use the shared Tailwind theme and `@vmall/ui` primitives plus Nuxt-native semantic components, SHALL NOT depend on Element Plus, and SHALL NOT expose a theme-accent switcher.
 
 #### Scenario: shopper opens any mall page
 - **WHEN** a shopper navigates to a buyer-facing route
@@ -45,6 +43,10 @@ The mall SHALL render a buyer-facing desktop shell modeled on a classic B2B2C PC
 - **WHEN** a shopper hovers "All Categories" in the navigation on a page other than `/`
 - **THEN** the category mega-menu dropdown appears below the navigation and hides again on mouse leave
 
+#### Scenario: mall has no accent switcher
+- **WHEN** a shopper inspects the mall shell
+- **THEN** there is no control to change brand accent and prices/active states remain `#ca151e`
+
 ### Requirement: Mock API adapter
 The mall SHALL select its API adapter per domain, so one domain can be served by the live backend while the others stay on fixed data. The mall SHALL still ship a fixed-data adapter implementing the whole `@vmall/shared` API client surface, and the live/fixed choice SHALL be configurable per domain without changing page call sites. The fixed-data adapter SHALL remain able to serve every domain when the live backend is unavailable.
 
@@ -230,3 +232,11 @@ The mall SHALL use the shared selected API adapter for product and shop favorite
 #### Scenario: fixed adapter remains functional
 - **WHEN** the favorites domain is configured to fixed data
 - **THEN** detail controls and buyer-center favorite flows behave deterministically through the same shared client methods
+
+### Requirement: Shared design system on the storefront
+Mall pages SHALL style layout with Tailwind utilities and shared primitives. Mall-only chrome (mega-menu, carousel crop, 1200px shell, product-card hover lift) MAY live in `apps/mall` components but MUST consume shared tokens, not a private global stylesheet.
+
+#### Scenario: storefront uses shared tokens
+- **WHEN** a shopper views the home page
+- **THEN** brand red, the 1200px grid, and the 450px hero height come from the shared theme keys rather than `mall.css`
+