# lib-theme-flint

**Flint — instrument panel.** Braun/Dieter-Rams workshop calm with one signal spark: a warm-stone
gray field, white cards, graphite-umber ink, and a single signal-orange accent — the machine's
indicator lamp — spent only on the primary action, selection, focus, and the live dot. Dark mode is
the panel at night: dark warm graphite (never blue) with the orange glowing luminous under dark ink.
Dense/pro register, machined 0.625rem radius, crisp low shadows, mechanical-quick motion
(120/220/320/450ms, springs aliased — a good tool clicks, it doesn't bounce). Built for
operator/console/admin surfaces.

## Fonts

Themes never `@import` fonts (PostCSS ordering). The **consuming app** loads them at the very top of
its entry CSS (`app/app.css`):

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

| Role | Stack |
|---|---|
| Headings (`--font-heading`) | Archivo → Inter → system sans. Grotesk with DIN-instrument character; headings render at weight 600. |
| Body (`--font-sans`) | Inter → system sans. Body 0.9375rem / 1.5. |
| Code (`--font-mono`) | JetBrains Mono → ui-monospace → SF Mono → Menlo → Consolas. |

Notes: tables (`[data-slot="table"]`) and the `.num` utility class get `font-variant-numeric:
tabular-nums` — instrument readouts demand aligned digits. Keyboard-first focus is a signature:
buttons get an always-visible 2px signal-orange outline (2px offset); inputs a flush 1px ring +
border-color change.

## Validate

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