SEMANTIC HUE LOCKS vs NUMBER FORMATTING (keep separate)
- .suc / .inf / .wrn / .dgr are HUE LOCKS. They pin a hue (success/info/warning/danger) against local context so a button, tag, or SVG graph stays that color no matter what --hue surrounds it. They set --hue-lock (+ the commit flag). They are NOT text/number colorers.
- The number family (separate concern, in system.css utility layer):
- .num — a value+delta cluster: white-space: nowrap + tabular figures, auto-spaces a child .delta. Keeps "312 CE ▲ 8%" on one line.
- .delta — small tabular indicator (▲ 8%), never wraps. Layout only.
- .num-good / .num-bad — chromatic green / red ink via --hue-lock: var(--hue-suc|--hue-dgr) + --fg: 0.85. Self-contained number formatters, independent of the .suc/.dgr component locks.
- .num-flat — quiet neutral ink for unchanged values.
- .number — a live readout: mono, tabular, right-aligned, --digits characters wide (default 3). A changing value never moves its neighbours. NOTHING SHIFTS: a count, a clock, a slider value wears it.
- .est — italic + ~ prefix: an estimate/projection.
- .past — quieted ink (--fg: -0.55): a prior period.
- .num-table — table modifier: all cells tabular; .num cells right-align.
The two-axis rule: COLOR encodes valence (favorable/unfavorable — color the valence, NOT the raw sign; a falling cost is favorable → .num-good). TYPOGRAPHY encodes certainty/time (.est, .past). The axes are orthogonal and never collide — a past unfavorable delta is quiet AND red.
The CSS/Go dividing line: if a class changes how a number looks in context (color, weight, alignment, wrapping) it is CSS. If it changes which digits appear (rounding, currency, k/M abbreviation, precision) it is Go — format the string in the template, then let CSS style the finished text.