# Style

Dark only. Surfaces stay quiet so effort reads as heat. Prefer borders over shadows.

## Colors

| Role | Token | Hex | Use |
| --- | --- | --- | --- |
| Page | `--ink-sunken` | `#0c0f14` | App background |
| Surface | `--ink` | `#12161c` | Base surface |
| Surface raised | `--ink-raised` | `#1b222c` | Cards, nav |
| Text | `--paper` | `#f4efe6` | Primary type. Warm, not pure white |
| Text dim | `--paper-dim` | `#d8d0c4` | Secondary body copy |
| Muted | `--mist` | `#8b97a8` | Labels, secondary type |
| Border | `--line` | `#2c3542` | Dividers |
| Border strong | `--line-strong` | `#3d4a5c` | Ghost controls, stronger edges |
| Action | `--ember` | `#e25b3a` | Primary button, active ring, current set |
| Action pressed | `--ember-deep` | `#b84328` | Pressed or hover on ember |
| Action tint | `--ember-soft` | `#f3b6a4` | Active nav text, soft ember highlights |
| Recovery | `--tide` | `#3e8f86` | Rest, completed volume, secondary action |
| Recovery pressed | `--tide-deep` | `#2a6861` | Pressed or hover on tide |
| Recovery tint | `--tide-soft` | `#b7d8d4` | Soft tide highlights |
| Target | `--sand` | `#e7c07a` | Goals, PRs, section kickers. Not a warning |
| Target deep | `--sand-deep` | `#c4964a` | Pressed sand, stronger target marks |
| Heart | `--pulse` | `#d4526e` | Heart rate only |
| Ok | `--ok` | `#6ea36a` | Finished, success. Off the brand hues |
| Warn | `--warn` | `#d4a24a` | Missed target, open set. Not sand |
| Danger | `--danger` | `#c44b4b` | Errors, destructive |

Ember button text is `#1a0d09`, not paper. Tide button text is `#071614`.

## Use

- Ink is the room. Ember is the action. Tide is rest and completion. Sand is the marker being chased.
- Do not use ember, tide, or sand for status. Ok, warn, and danger stay separate so a finished set, a missed target, and a failure do not look like buttons.
- Pulse is heart rate only. Do not use it for actions or errors.
- Paper on ink is about 14:1. Ember on ink-sunken is about 5.4:1: large type and rings only, not small body text.
- Radius `14px` on cards, `999px` on buttons and badges. Shadow, if any, `0 18px 40px rgba(0, 0, 0, 0.28)`.