# S1-03 — Amazon Skin

**Epic:** Demo Pages
**Priority:** P1
**Role:** Developer
**Depends on:** S1-01

## User Story
As a user, I want an Amazon-style e-commerce UI with search bar, product grid, and cart.

## Acceptance Criteria
- [ ] Light background, dark header (`--color-surface` white, header area dark)
- [ ] Amazon palette: `--color-primary` → dark blue (#131921), accent → orange (#FF9900)
- [ ] Top bar: logo, search input (`.flex` full-width), cart icon, account text
- [ ] Category nav bar: horizontal list of links below header
- [ ] Product grid: `.grid` + `data-columns="4"` with cards (image, title, price, stars badge)
- [ ] Sidebar: filter panel with checkboxes (brand, price range)
- [ ] Deal banner: `.alert .alert-warning` styled as "Deal of the Day"
- [ ] All styling via `skin.css` variable overrides only
- [ ] **Light/Dark mode:** skin.css overrides `--default-color-*-light` AND `--default-color-*-dark` variants; demo is coherent and lisible in both modes
- [ ] Theme toggle button visible in demo nav bar

## Validation
- [ ] Playwright screenshots: `amazon-light.png` + `amazon-dark.png`
- [ ] If css-base gap found: update `dist/skill/css-base/SKILL.md` + redeploy via `/skiller`

## Key CSS Variables to Override
```css
--color-primary: oklch(0.2 0.02 250);
--color-warning: oklch(0.75 0.18 70); /* Amazon orange */
--default-font-size: 0.8125rem;
```