# lib-theme-acid

**Chartreuse on black.** Festival/Wrapped energy for consumer surfaces that
want an unmistakable identity — the committed color carries 30–60% of the
surface, the opposite of a calm settings app.

## Thesis

Dark mode is the native identity: a near-black green-cast field
(`oklch(0.16 0.01 130)`) with electric acid chartreuse
(`oklch(0.87 0.21 128)`) carrying the type accents, the panels, and the
fills. The signature pair is **black ink on acid** (~13:1) — the primary
button, the user chat bubble, and the sidebar accents all run black-on-acid,
never white-on-green. Cards step a clear ≥0.05 lighter than the field; the
sidebar drops to a pure-black stripe so the acid accents hit hardest there.

`:root` is the brand's **paper mode** — an honest light mode on a committed
chartreuse-washed paper (`oklch(0.96 0.05 120)`, visibly acid, not cream)
with near-black green ink. The primary inverts the signature: a deep
green-black fill (`oklch(0.3 0.09 130)`) carrying acid-bright labels.

Status never borrows the brand's lane: destructive is hot red (hue 25,
light label); warning is amber 85, held clearly apart from the chartreuse in
both hue and chroma; **success is pushed to teal (hue 175, dark ink)** so no
second green ever fights the brand; info is cool blue 240. Charts are
acid-led with a cool spectrum behind (128 / 240 / 330 / 190 / 40).

Radius is a chunky-sharp `0.75rem`. Motion is punchy and fast
(100/200/320/450ms) with **one real snappy spring**
(`--ease-spring-snappy: cubic-bezier(0.2, 1.4, 0.3, 1)` — actual overshoot)
reserved for affordances; gentle/bouncy alias to the standard ease.
Selection is acid at 40% alpha. Elevation in dark mode is pure-black
shadows; no glass (inert stubs).

## Fonts

Load in the **consuming app's** entry CSS, at the very top (never `@import`
inside `theme.css` — it breaks PostCSS ordering):

```css
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
```

- **Archivo Black** — headings. A single-weight display black: it only ships
  weight 400, so the theme's heading rule pins `font-weight: 400` and lets
  the blackness of the cut do the work. Tracking is tight (`-0.02em`).
  Don't ask for bold — faux-bolding this face ruins it.
- **Space Grotesk** (400/500/600/700) — body, labels, buttons. Consumer
  register: body 1rem/1.55, label 0.875rem, caption 0.75rem, title
  1.375rem, subtitle 1.125rem, headline 1.875rem, display 2.75rem,
  hero 3.5rem.
- **JetBrains Mono** (400/500/600) — code. Dark-mode syntax is a rave
  terminal with discipline: acid keyword, cool companions (teal strings,
  magenta numbers, blue functions, orange types).

## Validation

```bash
node create-crema-app/scripts/validate-theme.mjs lib-theme-acid/theme.css
# ✓ PASS — all mandatory tokens present, contrast floors met, no ban violations.
```