feat: apply senior-friendly portal theme and document UX guidelines

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

docs/plan.md

@@ -1,29 +1,30 @@
-# Implementation Plan: full-lint-remediation
+# Implementation Plan: portal-senior-color-redesign
 
-**Branch**: `[chore/full-lint-remediation]` | **Date**: 2026-02-05 | **Spec**: `N/A`
-**Input**: Full repo lint remediation covering backend and frontend lint/build steps.
+**Branch**: `[feat/portal-senior-color-redesign]` | **Date**: 2026-02-06 | **Spec**: `N/A`
+**Input**: User request to redesign Portal color system for minimal, senior-friendly UX and provide a branch for visual validation.
 
 ## Summary
 
-Remediate all existing lint failures across the backend and frontend by systematically addressing security warnings, de-duplication, complexity, formatting, naming/style violations, and frontend lint/build issues, while preserving behavior and following project constraints.
+Implement a senior-friendly, minimal color system for `frontend/portal` by introducing semantic design tokens (default + high-contrast), applying them to shared shells/components (layouts, navbar, footer), and adding PrimeVue-friendly global styling so visual changes are broad, consistent, and easy to validate by product stakeholders.
 
 ## Technical Context
 
-**Language/Version**: Go 1.x  
-**Primary Dependencies**: Fiber, GORM-Gen, River, golangci-lint  
-**Storage**: PostgreSQL  
-**Testing**: `make lint` in `backend/`, `go test ./...`, `npm -C frontend/superadmin run lint`, `npm -C frontend/superadmin run build`, `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`  
-**Target Platform**: Linux server  
-**Project Type**: Web application (backend + frontend)  
-**Performance Goals**: N/A  
-**Constraints**: Follow `backend/llm.txt`; do not edit generated files; avoid behavior changes while refactoring  
-**Scale/Scope**: Backend lint errors plus frontend lint/build issues in portal/superadmin
+**Language/Version**: Vue 3 (ESM), JavaScript, CSS (Tailwind v4)  
+**Primary Dependencies**: Vite, TailwindCSS v4, PrimeVue 4 (`@primevue/themes/aura`), PrimeIcons  
+**Storage**: N/A  
+**Testing**: `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`  
+**Target Platform**: Web browser (Portal tenant-facing frontend)  
+**Project Type**: Web frontend module (`frontend/portal`)  
+**Performance Goals**: No regressions in initial render and interactivity; preserve current bundle behavior  
+**Constraints**: Keep changes focused on styling/theme surfaces; no route/business-logic changes; avoid generated files; maintain readability and accessibility contrast goals  
+**Scale/Scope**: Global portal style tokens + shared layout/component surfaces for meaningful visual review
 
 ## Constitution Check
 
-- Follow `backend/llm.txt` (controller thin, services handle DB, Chinese comments for business logic).
-- Do not edit generated files (`*.gen.go`, `backend/docs/docs.go`).
-- Fix lint issues without behavior changes or API surface drift.
+- Conforms to repository planning rule: complete plan defined before non-trivial implementation.
+- Scope limited to `frontend/portal` styling/theme layers and shared UI shell.
+- No generated files are modified.
+- Verification includes frontend lint/build checks before handoff.
 
 ## Project Structure
 
@@ -37,74 +38,67 @@ docs/
 ### Source Code (repository root)
 
 ```text
-backend/
-├── app/services/super.go
-├── app/services/creator_report.go
-├── app/services/content.go
-├── app/services/creator.go
-├── app/services/coupon.go
-├── app/services/common.go
-├── app/commands/seed/seed.go
-├── app/commands/storage_migrate/migrate.go
-├── app/jobs/media_process_job.go
-├── providers/http/swagger/config.go
-├── providers/http/swagger/template.go
-├── providers/http/engine.go
-├── providers/jwt/jwt.go
-├── providers/postgres/config.go
-└── providers/postgres/postgres.go
-
-frontend/
-├── superadmin/
-│   ├── src/
-│   └── package.json
-└── portal/
-    ├── src/
-    └── package.json
+frontend/portal/
+├── src/assets/main.css
+├── src/main.js
+├── src/layout/LayoutMain.vue
+├── src/layout/LayoutUser.vue
+├── src/layout/LayoutCreator.vue
+├── src/layout/LayoutAuth.vue
+├── src/components/TopNavbar.vue
+└── src/components/AppFooter.vue
 ```
 
-**Structure Decision**: Web application; full repo lint remediation (backend + frontend).
-
+**Structure Decision**: Apply color redesign through centralized tokens and shared shell/components to maximize consistency and minimize page-level edits.
 
 ## Plan Phases
 
-1. **Security & correctness**: Address gosec issues (weak crypto, weak random, unsafe conversions) and errcheck/errorlint/wrapcheck failures.
-2. **De-duplication & complexity**: Reduce dupl/gocognit/gocyclo/funlen by extracting helpers and simplifying large service methods (especially `services/super.go`).
-3. **Style & formatting**: Resolve revive naming issues, line-length (lll), prealloc, nilerr, and other style violations.
-4. **Frontend lint/build**: Resolve frontend lint/build issues for portal/superadmin.
-5. **Verification**: Run backend and frontend lint/build/test commands until clean.
+1. **Token Foundation**
+   - Define semantic color tokens for senior-light and high-contrast modes.
+   - Map tokens for Tailwind and global CSS usage.
+2. **Shared Surface Application**
+   - Update shared layouts/navbar/footer from hardcoded slate/dark palette to semantic tokens.
+   - Remove distracting decorative backgrounds and improve contrast/focus cues.
+3. **PrimeVue Alignment + Verification**
+   - Add global PrimeVue color overrides for button/input/panel/readability consistency.
+   - Run lint/build verification and prepare branch handoff for visual QA.
 
 ## Tasks
 
-1. Capture baseline lint outputs (save `cd backend && make lint` output; run `npm -C frontend/superadmin run lint` / `npm -C frontend/portal run lint`) and group errors by category/file; establish remediation order (security → complexity → style).
-2. Fix gosec issues: choose between (a) keep MD5 for non-security hashing with explicit `//nolint:gosec` justification, or (b) migrate to SHA-256 with any required backfill; switch weak random to crypto/rand where required; guard integer conversions.
-3. Fix errcheck/errorlint/wrapcheck issues in providers and error handling.
-4. Remove duplicated blocks (dupl) by extracting shared helper functions in `services/super.go` and `services/creator_report.go`.
-5. Reduce high cognitive/cyclomatic complexity by helper extraction only; keep inputs/outputs and query semantics unchanged.
-6. Address revive naming and lll formatting (split long lines, rename variables/types as needed).
-7. Run backend verification (`cd backend && make lint`, `go test ./...`).
-8. Run frontend lint/build (`npm -C frontend/superadmin run lint`, `npm -C frontend/superadmin run build`, `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`). Review ESLint `--fix` diffs carefully.
-9. Re-run all lint/build/test commands until clean.
+1. Create and verify a dedicated feature branch for this redesign.
+2. Rebuild `src/assets/main.css` with:
+   - semantic palette tokens,
+   - default + high-contrast variable sets,
+   - global base styles (body/link/focus),
+   - PrimeVue global color overrides.
+3. Ensure `src/main.js` imports and theme setup remain compatible after token changes.
+4. Refactor shared shells to semantic colors and reduced visual noise:
+   - `LayoutMain.vue`, `LayoutUser.vue`, `LayoutCreator.vue`, `LayoutAuth.vue`.
+5. Refactor shared navigation/footer surfaces to semantic tokens:
+   - `TopNavbar.vue`, `AppFooter.vue`.
+6. Run portal checks (`lint`, `build`) and resolve any regressions caused by this change set.
+7. Provide branch name and reviewer instructions for visual validation.
 
 ## Dependencies
 
-- Security fixes precede refactors to ensure safe baselines.
-- De-duplication/complexity refactors should precede style fixes to avoid rework.
-- Backend verification depends on remediation tasks; frontend verification depends on frontend lint/build tasks.
+- Phase 2 depends on semantic token completion from Phase 1.
+- Phase 3 depends on Phase 2 to verify final visual consistency and avoid rework.
+- Reviewer validation depends on successful lint/build completion.
 
 ## Acceptance Criteria
 
-- Backend lint passes with no errors (`cd backend && make lint`).
-- Frontend lint/build passes (`npm -C frontend/superadmin run lint`, `npm -C frontend/superadmin run build`, `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`).
-- `go test ./...` passes (or failures are documented as pre-existing and approved).
-- No generated files modified manually.
-- No functional/API behavior changes observed during lint fixes.
+- A new branch exists containing only portal color-system redesign changes.
+- Portal shared shells/components use semantic color tokens instead of ad-hoc hardcoded palette where modified.
+- High-contrast mode token set is available for accessibility-forward validation.
+- `npm -C frontend/portal run lint` passes.
+- `npm -C frontend/portal run build` passes.
+- User can run portal and visually compare revised palette/readability across login, home shell, user shell, and creator shell.
 
 ## Risks
 
-- Large refactors in `services/super.go` may inadvertently change behavior; must keep refactors minimal and covered by tests.
-- Security fixes may require signature changes (e.g., hash algorithm changes); need careful review for backward compatibility.
-- Volume of lint violations may require staged remediation; ensure each stage keeps lint green where possible.
+- Broad visual changes may impact component contrast unexpectedly in edge views not directly edited.
+- PrimeVue internal styles can override utility classes; requires targeted global overrides.
+- Overly aggressive recolor could reduce brand recognition; keep primary brand hue stable while improving accessibility.
 
 ## Complexity Tracking