# lib-theme-phosphor

**Terminal heritage, dark-first.** Phosphor's dark mode is its native identity: deep charcoal
with a barely-there green undertone (never blue-gray, never pure black), cards stepping
*lighter* off the background, and hairline light-alpha borders doing all the separation work —
the elevation ladder exists but is whisper-quiet. One phosphor-green accent
(`oklch(0.75 0.16 148)` carrying dark ink in dark mode; deepened to `oklch(0.45 0.12 150)`
under white labels in light mode) is spent on the primary action, focus, and selection only.
Light mode is the "paper terminal": warm-white paper, deep green-charcoal ink. Success is teal
(hue 178) so state-green never collides with action-green. Dense/pro register, radius
0.375rem, instant-feeling motion (100/180/280/400ms, springs aliased — no bounce),
keyboard-first focus (2px offset phosphor outline on buttons, flush 1px ring on inputs),
tabular numerals on tables and via the `.num` class.

Built as one of four candidates for the calm-pro / dense-utility family (operator, console,
and admin surfaces; Skyrise successor for developer-product screens).

## Fonts

The signature is **IBM Plex Mono for headings** (weight 500/600, slightly tight tracking) over
**IBM Plex Sans** body, with Plex Mono again for code. Mono headings run wide, so the display
ramp is deliberately modest.

Per the Crema token contract, `theme.css` does **not** `@import` fonts. The consuming app must
load them at the very top of its entry CSS (`app/app.css`):

```css
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
```

Stacks (already wired in `theme.css`):

- `--font-sans` / `--body-family`: `"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
- `--font-heading` / `--heading-family`: `"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace`
- `--font-mono`: same mono stack as headings

## Validate

```bash
node create-crema-app/scripts/validate-theme.mjs lib-theme-phosphor/theme.css
```