# Clay implementation guide

Read `DESIGN.md` before implementing this theme. Use `demo/index.html` as the runnable visual reference.

- Palette: biscuit, vanilla, apricot and terracotta. Use the documented warm espresso dark mode. Do not reuse the former blue/sage palette.
- Preserve Fraunces Soft headings, one Yellowtail hero accent and Manrope body text. The demo embeds its fonts and performs no external requests.
- Reuse the shared material recipes. One top-left light source, material-coloured shadows, a shaded bevel and clear contact shadows establish volume.
- Buttons must visibly sink when pressed and retain keyboard focus outlines. Cards use quieter depth than controls.
- Keep the upright breathing sculpture in the hero, without decorative stars. Place the rest chart below the ritual cards; use the rounded-solid canvas shading from the demo, with contact and cast shadows. Most remaining surfaces are cream; avoid turning every section into a coloured card.
- Demo interactions are local: breathing pause/resume, chart day selection, mood selection, water count, switches and material selection. No fabricated signup, payment, testimonials or tracking.
- Support parent `cyn-theme` messages, light/dark controls and reduced motion. Prevent default anchor navigation inside the sandboxed iframe.
- Verify desktop and 360 px layouts without horizontal overflow.
- In a shadcn app, put the style into shared components. In this repository, preserve the standalone HTML preview architecture.

- Mood choices use Low / Okay / Good text labels on three soft rectangular cushions within an inset track. Do not restore the isolated mouth symbols.

## shadcn coverage

Use the full integration matrix and copyable stylesheet in DESIGN.md (also available as shadcn.css). Apply it to shared components and set data-design="clay" on html so portals inherit it. Keep provider behaviour intact, forward data-slot/data-variant, handle Sonner and DayPicker via their class-name APIs, and test all interactive states. Do not claim complete React integration from the HTML preview alone.