Revision #305

## CSS Custom Properties Reference

If your plan includes the Custom CSS editor (**Admin → Branding → Appearance → Custom CSS**), use these semantic tokens to keep customizations theme-safe. Each token re-resolves per theme, so the same rule looks right on every theme.

### Themes

Mobieus ships **6 selectable themes**. Your custom CSS should read tokens, never hardcoded hex, so it works across all of them:

| Theme label | Slug (`data-theme`) |
|---|---|
| Dark (default) | `stylish-black` |
| Green | `crt-green` |
| Amber | `crt-amber` |
| Blue | `c64` |
| Light | `light` |
| High Contrast | `vt100` |

### Color tokens

| Token | Purpose |
|---|---|
| `--color-primary` | Main accent (buttons, links) |
| `--color-primary-hover` | Accent hover state |
| `--color-accent` | Secondary accent |
| `--color-text-primary` | Main body text |
| `--color-text-secondary` | Secondary text |
| `--color-text-muted` | Muted / caption text |
| `--color-text-inverse` | Text on a colored fill |
| `--color-bg-body` | Page background |
| `--color-bg-card` | Card backgrounds |
| `--color-bg-elevated` | Raised surfaces (menus, popovers) |
| `--color-bg-input` | Form field backgrounds |
| `--color-bg-hover` | Row / item hover background |
| `--color-border` | Borders and dividers |
| `--color-border-focus` | Focused field border |
| `--color-success` | Success states |
| `--color-warning` | Warning states |
| `--color-danger` | Error / danger states |
| `--color-info` | Informational states |

### Best practice

Always use semantic tokens instead of hardcoded hex values. Tokens automatically adapt across all 6 themes, so a single rule keeps its contrast on dark, light, and the retro terminal palettes alike. If you hardcode a color, it will look wrong on at least one theme.