# `premium-theme` (theme, stable)

> The selected theme for LOMA-PORTAL. Refined, calm, executive-presentation grade.

## Design intent

- **Hierarchy through space and weight**, not color.
- **One accent**, used sparingly to mark primary actions.
- **Glass surfaces** for elevated panels — subtle blur, restrained borders.
- **Generous spacing scale** — built around an 8-px grid with extra steps at 12, 20, 28.
- **WCAG 2.2 AA** for every text-on-background pair in both light and dark.

## Token catalog

| File                      | What it sets                                                                                                                               |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `tokens/colors.json`      | Primary / secondary / accent / neutral + semantic (success/warning/danger/info) palettes, plus surface/border/text. Light + dark variants. |
| `tokens/spacing.json`     | 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128 (px).                                                                           |
| `tokens/typography.json`  | Type ramp: display, h1–h6, body, caption, code. Font stacks for sans, serif (optional), mono.                                              |
| `tokens/radius.json`      | 0, 2, 4, 6, 8, 12, 16, 20, 9999.                                                                                                           |
| `tokens/shadows.json`     | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, plus an inset glass shadow.                                                                           |
| `tokens/motion.json`      | Durations + easings (entrance, exit, micro).                                                                                               |
| `tokens/z-index.json`     | Named layers: base, sticky, dropdown, modal, popover, toast, tooltip.                                                                      |
| `tokens/breakpoints.json` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`.                                                                                                       |

## Materialization

Tokens land at `packages/design-tokens/tokens/themes/premium/` (Phase 3 wires up the build). `packages/design-tokens/` builds them into:

- `dist/css/premium.light.css`, `premium.dark.css` — CSS variables
- `dist/tailwind/premium.preset.js` — Tailwind preset (colors, spacing, etc.)
- `dist/ts/premium.ts` — typed exports for runtime use

## Switching to another theme

Set `ui.style` in `project.config.json`, list the matching theme preset in `extends`, re-run `_init.ps1`. No component edits required.
