# frontend-ui Specification

## Purpose
Shared Tailwind v4 design system for the three Nuxt apps: one token stylesheet (`@vmall/shared/theme.css`, default brand `#ca151e`), the `@vmall/ui` Vue primitive kit, and persisted accent presets (`red | blue | teal | violet`) for the shop-admin and platform-admin consoles. The public mall stays locked to the red accent.
## Requirements
### Requirement: Shared Tailwind design system
The three Nuxt apps SHALL load one token stylesheet from `@vmall/shared` (`theme.css`) and SHALL compose repeating chrome from `@vmall/ui` primitives (`VBtn`, `VBadge`, `VField`/`VInput`, `VCard`/`VPanel`, `VTable`, `VPage`). They MUST NOT depend on Element Plus, MUST NOT keep `packages/shared/src/ui.css` or `apps/mall/assets/mall.css`, and MUST NOT use Vue `<style scoped>` for app chrome after the migration. Default brand/primary color SHALL be `#ca151e`.

#### Scenario: apps share tokens
- **WHEN** a developer opens mall, shop-admin, and platform admin with the default accent
- **THEN** primary buttons, links, and active nav use `#ca151e` from the shared theme rather than per-app palettes

#### Scenario: no legacy stylesheets
- **WHEN** the migration is complete
- **THEN** `@vmall/shared` exports `theme.css` (not `ui.css`) and the three apps have no remaining `<style scoped>` blocks for layout or chrome

### Requirement: Console accent presets
Shop-admin and platform admin SHALL let the signed-in operator pick an accent preset of `red`, `blue`, `teal`, or `violet`. The choice SHALL apply immediately to primary actions, links, and active navigation, SHALL persist in `localStorage` for that app origin, and SHALL restore on reload. An invalid stored value MUST fall back to `red`. The public mall MUST NOT expose this control and MUST remain on the red accent.

#### Scenario: operator switches accent
- **WHEN** a platform admin or shop user selects the blue preset in the console header
- **THEN** primary buttons and active nav in that app render with the blue preset without a full page reload

#### Scenario: accent survives reload
- **WHEN** the operator reloads shop-admin or platform admin after choosing teal
- **THEN** the console still uses the teal preset

#### Scenario: mall stays red
- **WHEN** a shopper uses the mall after an operator has changed a console accent
- **THEN** the mall still uses `#ca151e` and shows no accent switcher