## Styleguide

**clavitor.css** is the single global stylesheet for all clavitor web surfaces — marketing site (`clavitor-web`) and the app UI (`clavitor`).

- Live: https://clavitor.com/styleguide.html
- Source: `clavitor-web/clavitor.css`

### Rules (no exceptions)
1. **One stylesheet.** `clavitor.css` only. No Tailwind, no inline styles, no `<style>` blocks.
2. **One rule per class.** If you need a variant, add a modifier class (e.g. `.card.gold`), not a new inline style.
3. **One width.** `--width: 1280px` via `.container`. Never hardcode a max-width anywhere else.
4. **One padding.** `--pad: 2rem` via `.container`. Never hardcode horizontal padding.
5. **CSS variables for everything.** Colors, spacing, radius, fonts — all via `var(--*)`.

### To use in clavitor app
Copy or symlink `clavitor.css` into `clavitor/web/` and embed it. The token set (colors, fonts, radius) is shared — app UI should feel identical to the marketing site.