# MxTheme Component Context

MxTheme manages the visual design system. It holds CSS custom property tokens (colors, spacing, typography) and cascades them to all child components via `$tokens`.

## Current State
- **State scope:** principal (persists per user across sessions)
- **Color modes:** light, dark, system (follows OS preference)
- **Token categories:** color, spacing, typography, elevation, border-radius

## Integration Notes
- Send `theme.set` to change modes or override individual tokens
- All browser components inherit tokens automatically via CSS cascade
- Theme changes emit `theme.changed` — subscribe for reactive updates
- Preferences (`colorMode`, `fontSize`) are user-scoped and survive across sessions
