# lib-theme-harbor

Cool neutral, warm spark. The most neutral of the warm-consumer set: the entire surface is a
calm, faintly-**cool** light grey (morning harbor light on soft slate — a whisper of blue-grey
that reads as clean neutral, never cream, never enterprise blue), and all the warmth is carried
by a single **honey/amber** accent spent surgically on the primary action, selection, and focus.
Grey stone warmed by lamplight. Light + dark. Built for me.sky-ai.com back-of-house.

- **Surface:** faintly-cool light grey `--background` (`oklch(0.975 0.005 248)`); clean white
  cards, hairline-separated. Ink is a deep, very-slightly-cool charcoal.
- **Accent:** one honey/amber primary (`oklch(0.8 0.14 78)`) with **dark ink on top** (the
  bright-swatch / dark-ink pairing) — the sole warmth, ≤10% of the surface.
- **Status:** `warning` is pulled toward amber-**orange** (hue 52) and set darker than the honey
  primary (hue 78) so the two never read as the same swatch.
- **Dark:** harbor at night — deep cool-neutral charcoal (`oklch(0.2 0.008 252)`, not pure black,
  never warm-brown), amber glowing warm against it.
- **Shape:** crisp `--radius: 0.75rem`; low, neutral cool shadows; product-fast motion (base
  280ms), springs aliased to the standard eases.
- **Type:** crisp modern-neutral — Inter Tight (text) + Geist (headings) + Geist Mono (code).

## Fonts

Themes must not `@import` fonts (breaks PostCSS ordering — see the Crema token contract). The
**consuming app** loads them at the top of its entry CSS via this Google Fonts URL:

```
https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600;700&display=swap
```

## Usage

Consumed by the **Studio** lab as a sibling. The consuming app imports `theme.css` (or, in
Studio, `scripts/build-themes.mjs` copies it to `public/themes/harbor.css`). Dark mode is
class-based (`.dark`); the app owns the toggle and should respect `prefers-color-scheme` on first
load.

## Validation

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

Passes the Crema v1 token contract: every Tier-1 token present in both modes, all contrast floors
met, no font `@import`, no root `font-size`.