# S1-06 — macOS Skin

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

## User Story
As a user, I want a macOS-style desktop UI with dock, menu bar, and windows.

## Acceptance Criteria
- [ ] Light surface with warm gray tones, SF-like font stack (`-apple-system, BlinkMacSystemFont`)
- [ ] Menu bar at top: Apple icon, app name, system icons (wifi, battery, clock)
- [ ] Dock at bottom: row of app icons with magnification on hover (`data-scale`)
- [ ] Window: traffic light buttons (red/yellow/green circles `.rounded-full`), toolbar, content area
- [ ] Finder-style sidebar: favorites list with icons, tags with colored dots
- [ ] Subtle shadows: `data-elevation="sm"` on windows, `data-elevation="lg"` on dock
- [ ] Large rounded corners: `--radius-md` → 12px, `--radius-lg` → 16px
- [ ] Large rounded corners: `--radius-md` → 12px, `--radius-lg` → 16px
- [ ] 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: `macos-light.png` + `macos-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.55 0.24 265); /* macOS blue */
--color-surface: oklch(0.96 0.005 250);
--color-surface-alt: oklch(0.93 0.005 250);
--radius-md: 12px;
--radius-lg: 16px;
```