# Themes — everyone's personal token sandbox

This is Phase 2: **each person gets their own token set they can freely edit**, preview live, and compare against everyone else's — without touching the canonical ShopConnect brand. The best ideas get promoted into the real tokens via PR. Think of it as the design equivalent of a feature branch.

## Why it's safe

Your theme is a scoped block — `[data-theme="you"]` — that only applies to a surface that opts into it. Overriding `--brand` or `--font-sans` in `themes/noah.css` changes *nothing* on the ShopConnect brand or anyone else's theme. You can't break the house brand from your sandbox.

You can override **any** token from `tokens.css` in your block — brand color, fonts, radius, spacing, neutrals, motion, the editorial highlighter — not just the accent.

## Make your own (2 minutes, all in the GitHub web UI)

1. Copy `_template.css` → `themes/<your-name>.css`.
2. Rename the selector to `[data-theme="<your-name>"]`.
3. Change tokens until it feels like yours.
4. Add one line to `theme-index.css`: `@import "./<your-name>.css";`
5. Add yourself to the `THEMES` array in `index.html` (one line: `{id:'you', label:'You'}`).
6. Open a PR. After merge, your theme shows up in the brand book's **theme switcher** — flip to it to see the whole page re-skin live.

(Noah, Kyle, and Joshua already have starter files — just edit yours.)

## Compare & cherry-pick

Open `index.html` (or the published brand-book URL) and use the theme switcher at the top to flip between ShopConnect and everyone's themes side by side. When the team agrees a move is right, a brand owner promotes it into `tokens.css` — that's how the ShopConnect brand accretes taste from the whole team instead of one person.

## Theme vs brand — what's the difference?

- **`data-brand`** (in `tokens.css`) = a committed, shipped brand (ShopConnect, or Mitch's products). Stable.
- **`data-theme`** (here) = a personal, in-progress exploration. Playground. Promoted moves graduate into a brand.