# POS Terminal — System Modal

**1:1 from `system-modal-spec.md`** — composed from design-system components. Font **Inter** · radius **8px** (no 4px).
5 types (delete · lock · fiscal · success · info) × 2 sizes (S 500 / M 600).

## Anatomy
- **Container** — white, `1px solid --grey-300`, r8, shadow `0 4px 16px /.08 + 0 1px 4px /.04`, flex column.
- **Header → NbNavShell** — h44 · `--secondary-300` (#58567A) · pad 0 8 · title (600/18, white) + close (44×44, r8, 18px X @ white .70).
- **Content** — pad `20×12`(S)/`20×16`(M), gap 10(S)/12(M). Icon row (gap 12): icon box + text column (heading 500/16 `--text-500`, body 400/14 `--text-secondary`).
- **Icon box** — 36(S)/40(M), r8(S)/r10(M), bg+border = type tint, glyph 18(S)/22(M).
- **Buttons → Button component** — h48, r8, 500/16, pad 0 12(S)/0 16(M). Row `flex:1` 50/50 gap 8 mt16; **fiscal** stacks vertically.

## Button styles
| Style | bg | color | border |
|---|---|---|---|
| neutral (Cancel/Close) | transparent | `--text-500` | `--grey-300` |
| primary | `--primary-500` | white | `--grey-200` |
| danger (Delete) | `--error` | white | `--grey-200` |
| outline-danger | transparent | `--error` | `--error` |

## 5 types
- **delete** — tint `--error-light`, trash `--error` · Cancel + **Delete** (danger).
- **lock** — tint `--warning-light`, padlock `--warning` · Cancel + **Lock receipt** (primary).
- **fiscal** — tint `--warning-light`, warning `--warning` · **stacked**: Cancel payment… (outline-danger) + Skip fiscal… (primary).
- **success** — tint `--success-light`, check `--success` · single **Close** (neutral).
- **info** — tint `--primary-50`, info `--primary-500` · Cancel + **Go receipt** (primary).

## Tokens
Header `--secondary-300` · heading `--text-500` · body `--text-secondary` · border `--grey-300` · btn-border `--grey-200`.
Semantics: `--primary-500`/`--primary-50` · `--error`/`--error-light` · `--warning`/`--warning-light` · `--success`/`--success-light`.
Glyphs verbatim (spec §6), colours bound to tokens (pixel-identical).