Colors — Semantic
Prefer semantic tokens over raw hex — they hold the brand's intent.
| Token | Swatch | Value | Role |
|---|---|---|---|
| --bg | #ffffff | Default page background | |
| --bg-alt | #efefef | Alternating section wash | |
| --bg-dark | #1f2120 | Nav bar, footer, hero scrim target | |
| --surface | #e5e3e3 | Card / input fill | |
| --fg | #1f2120 | Primary text | |
| --fg-mid | #333333 | Secondary body | |
| --fg-muted | #666666 | Captions, tertiary | |
| --fg-inverse | #e7e5e5 | Text on dark surfaces | |
| --ink | #1f2120 | Semantic primary ink | |
| --accent | #990000 | .red utility class only — rare textual emphasis | |
| --link | #003366 | links, pull quote, .question callout — the load-bearing secondary | |
| --link-hover | #336699 | Anchor hover | |
| --sage | #708776 | Footer pipe separators — exactly one use, nowhere else | |
| --hairline | #cccccc | Dividers and card borders | |
| --scrim | rgba(0,0,0,0.6) | Hero caption background |