tokens

1/* ---------------------------------------------------------------
2 * Patch UI design tokens.
3 *
4 * Source of truth: packages/react/DESIGN.md.
5 *
6 * Token names remain stable so existing component callsites
7 * (bg-layer-1, border-hairline, text-ink-muted) keep working while
8 * the surface hierarchy moves to a quieter job-board vocabulary.
9 *
10 * The system is a simple, approachable product language:
11 *   - `--base` is the application canvas, `--layer-1` is the primary
12 *     content surface, and `--layer-2` is grouped or selected content.
13 *   - `--fill-*` is neutral control and metadata chrome. `--fill-1`
14 *     intentionally shares a rung with `--layer-2`.
15 *   - Alpha borders (Radix grayA 6/7/8) so hairlines stay uniform
16 *     in perceived weight when nested on multiple surface rungs.
17 *   - A monochrome primary (consumers override --primary to inject brand).
18 *   - Semantic status roles at fixed hex, theme-invariant.
19 *   - Two type families: Inter Variable (all weights) and JetBrains Mono
20 *     for code. Size and weight are separate axes: eight size tokens
21 *     (micro/mini/small/regular/large/title3/title2/title1) composed at
22 *     the call site with five weight tokens (light/normal/medium/
23 *     semibold/bold). Line-height comes from element defaults.
24 *   - Motion is fast: 75ms state, 150ms overlay, one easing curve.
25 *
26 * Layers:
27 *   1. Raw runtime custom properties on :root / .dark.
28 *   2. @theme inline bridge into Tailwind v4 utilities.
29 *   3. @layer base global element typography defaults.
30 *   4. @layer base thin-scrollbar defaults.
31 * --------------------------------------------------------------- */
32 
33/* ---------------------------------------------------------------
34 * Layer 1: Runtime theme values (light mode reference).
35 * --------------------------------------------------------------- */
36:root {
37  /* Quiet canvas, clear content surface, and one grouped-content rung. */
38  --base:      #f5f5f5;
39  --layer-1:   #ffffff;
40  --layer-2:   #f0f0f0;
41 
42  /* Neutral controls and metadata step once on interaction. */
43  --fill-1:    #f0f0f0;
44  --fill-2:    #e8e8e8;
45 
46  /* Adaptive interaction-state overlay. rgba so it darkens any
47     surface underneath uniformly. Radix grayA 3. */
48  --layer-hover: rgba(0, 0, 0, 0.059);
49 
50  /* Hairlines are now alpha, not solid. A border on a nested card
51     reads the same perceived weight as one on the base; solid borders
52     compound when they land on darker surfaces. Radix grayA 3 / 6 / 7 / 8.
53// … truncated