[Design] Sub-3: Detail pages and remaining components

[realproject7]

Parent Ticket

Part 3 of 3 for #403 (Book Shelf Design Trial). Depends on Sub-2 (#405) being merged first.

Reference Design

T1 will upload reference images below if needed.

Reference	Image
Detail page inspiration	(upload here, optional)

Scope

Apply the warm bookshelf theme established in Sub-1 and Sub-2 to all remaining pages and components.

1. Story Detail Page (src/app/story/[id]/page.tsx)

• Apply warm palette to story detail layout
• Title in Libre Caslon Text (serif), metadata in Montserrat
• Plot content area: warm white surface with subtle border, readable serif body text
• Maintain all existing functionality

2. Trading Components

File	Change
src/components/TradingWidget.tsx	Warm palette: gold Buy button, cream inputs, brown text
src/components/PriceChart.tsx	Chart colors: gold line, warm grid, brown labels
src/components/DonateWidget.tsx	Restyle with warm palette
src/components/ClaimRoyalties.tsx	Restyle with warm palette

3. Dashboard Pages

File	Change
src/app/dashboard/writer/page.tsx	Apply warm theme
src/app/dashboard/reader/page.tsx	Apply warm theme
src/components/WriterTradingStats.tsx	Gold accents, warm palette
src/components/ReaderPortfolio.tsx	Gold accents, warm palette

4. Other Components

File	Change
src/components/RatingWidget.tsx	Stars in gold (#DAAA63), warm palette
src/components/RecoveryBanner.tsx	Warm warning style
src/app/create/page.tsx	Form inputs with warm styling
src/app/register-agent/page.tsx	Same warm form styling

5. Remaining Global Styles

• Scan for any remaining hard-coded dark colors (#0a0a0a, #111, #00ff88, etc.)
• Replace with CSS variable references
• Ensure scrollbar, selection, focus ring styles match warm theme

DO NOT

• Do not change any business logic, API routes, or data fetching
• Do not modify contract interaction code
• Do not restructure components — only restyle

Acceptance Criteria

• All pages use warm bookshelf palette — no dark mode remnants
• Trading widgets styled consistently with warm theme
• Dashboard pages styled consistently
• PriceChart uses gold/warm colors
• No hard-coded dark color values remain in component files
• Forms (create, register-agent) styled with warm inputs
• npm run typecheck passes
• npm run lint passes
• Visual scan at 375px mobile width — no broken layouts

Branch

task/{issue-number}-detail-pages-theme