# Navagoo Design System (V.2) — Shop-Portal Rollout

**Branch:** `design` · **Reference:** `Navagoo Design System (V.2).zip` → extracted handoff (tokens, 28 component specs, brand-guidelines PDF).

The portal (Yii2 + AdminLTE/Bootstrap) was re-skinned onto the brand tokens by parallel
agents, then audited by a 6-agent design-fidelity review, then fixed.

## Commits (newest first)
```
7c96b51  fix: dashboard KPI contrast + services RTL border + social thumbnail tint
aecdbca  fix: brand-correct dashboard chart palette + axis colors
ef7e6c7  fix: gate Arabic brand font to RTL on booking + settings forms
e90d425  feat: deep-purple navbar matching the sidebar + white-reverse logo
cc11528  feat: brand navbar resting icons (superseded by e90d425's purple bar)
f28b272  fix: make navbar + sidebar overrides win against global style.css
86b954a  feat: brand the shop-portal chrome (navbar + sidebar)
1c63718  feat: apply Navagoo DS to 6 shop-portal surfaces
6676123  feat: design-system foundation — brand tokens + self-hosted fonts
```

## What's in place
- **Foundation:** `frontend/web/css/navagoo-tokens.css` (byte-perfect copy of the reference
  tokens) + 34 self-hosted fonts; registered portal-wide via `NavagooDesignSystemAsset`.
- **8 surfaces reskinned:** dashboard, bookings, specialists, services, settings, social
  (each `frontend/web/css/navagoo-*.css` + scoped `.ng-*` wrappers) + chrome (navbar + sidebar).
- **Chrome:** deep-purple sidebar + **deep-purple navbar** (brand book's chrome) with the
  white-reverse logo; both out-specify the legacy `style.css` chrome theme.

## Review scorecard (6 agents)
Foundation **Strong** · Dashboard **Good** · Content **Good** · Settings/Social **Strong** ·
Cross-cutting **Good** · Chrome → purple-bar recommendation (applied).

## Fixes applied
- Navbar → deep-purple bar matching the sidebar; sidebar logo → `logo-white.png`.
- Arabic brand font gated to `[dir=rtl]` on the booking + shop-settings forms (was forcing
  Noto Kufi in English).
- Dashboard Chart.js: off-brand Tailwind grays → tokens (fixed a 2.54:1 y-tick); doughnut
  palette re-spread + snapped to semantic tokens; invisible occupancy bar → neutral-200;
  removed the 👋 emoji.
- KPI "completed" gradient start → `--ng-purple` (was 2.67:1 white text).
- Services `.discount-hint` stray `border-left:none` (cancelled the LTR accent) removed.
- Social video-thumbnail overlay indigo → brand purple.

## Remaining backlog (do with live visual verification — see Blockers)
### High
- **Booking status badges still ship legacy hex** from `common/helpers/IdGeneratorHelper.php`
  `getBookingStatusColor()` as an inline style in `frontend/views/booking/index.php`. The
  correct token-mapped classes already exist but are **dead code**
  (`navagoo-booking.css` `.ng-chip--*`). Wire status → chip class; drop the inline hex + the
  stale inline `.status-badge`/`#f8f9fa` block. *(View/PHP change.)*

### Med
- **Primary/save button rest shadow** is `--ng-shadow-xs` (near-flat); reference is `md` at
  rest / `lg` on hover. `navagoo-settings.css` (btn-primary + shop-settings save) +
  `navagoo-social.css` `.smm-btn--brand`.
- **Agent status / show-hide chips** are hard-coded teal regardless of state
  (`navagoo-agents.css` + `frontend/views/agents/index.php`) — make state-aware
  (Active/Show → teal, Inactive/Hidden → neutral/danger). *(View/PHP.)*
- **Touch targets < 44px** on toggles/pills/icon buttons (settings toggle, dashboard range
  pills, agents/social icon buttons) — add `min-height/width: 44px`.
- **Font Awesome glyphs used as icons** (dashboard empty-states + KPI icons) → Lucide SVGs
  (brand: "no Unicode glyph as icon"). *(Markup change.)*

### Low
- `dashboard.css`: `font-weight: 600` (12 sites) → `var(--ng-weight-medium)`; `--font-size-*`
  ramp is one step off the NG scale; heading negative-tracking/tight-leading; eyebrow tracking
  → 0.14em; `#fff` → `--ng-fg-inverse`.
- `prefers-reduced-motion` guard (the infinite wave is already gone with the emoji, but the
  guard is still good practice).
- Strip dead off-brand inline `<style>` blocks (booking/index.php, shop-settings/index.php,
  social create.php) so the scoped sheets are the single source of truth.
- Social warn/danger alert text/border hexes (`#8A6516`/`#F6DFA8`/`#F3C3C3`) — **kept** on
  purpose: the dark-amber text is contrast-correct and there's no `--ng-warning-text` token.

### Architectural
- The chrome override over `style.css` is **sound but fragile** (load-order + selector
  coupled). Long-term: delete the chrome rules from `style.css` so the brand CSS owns the
  chrome and the `!important` arms-race disappears.

## Blockers
- **Docker daemon is down** → no local serving, no `php -l`, no screenshots. CSS verified by
  brace-balance only; PHP edits were value-only string swaps.
- **Visual confirmation pending:** restart Docker (`docker start projects-webserver`), then a
  shop-owner login is needed to screenshot all 8 surfaces + chrome in **en + ar** and confirm
  the cascade (esp. the purple chrome winning over `style.css`).