# Касса food-market — дизайн-система (светлая тема)

Подход: чисто, светло, крупно, ничего лишнего (как Square POS / Loyverse / Poster).
Всё строится на токенах из одного места — `Styles/Tokens.axaml` (ResourceDictionary).
Тёмная тема — те же токены, другой набор значений (опция в настройках, не по умолчанию).

## Палитра (токены)
| Токен | Светлая | Назначение |
|---|---|---|
| `PosBg` | #F4F6F5 | фон приложения |
| `PosCard` | #FFFFFF | карточки, полосы, модальные |
| `PosBorder` | #E3E8E6 | рамки, разделители |
| `PosText` | #0F1F17 | основной текст |
| `PosтатText2` / `PosTextMuted` | #5F6F68 | вторичный текст |
| `PosBrand` | #16A34A | бренд/главное действие (зелёный Food Market) |
| `PosBrandHover` | #15803D | hover |
| `PosBrandPressed` | #166534 | pressed |
| `PosDanger` | #DC2626 | опасное (Очистить/Удалить) — только контур |
| `PosWarn` | #D97706 | предупреждение (смена закрыта, нет связи) — янтарный |
| `PosBrandSoft` | #DCFCE7 | мягкий зелёный фон (чипы, успех) |
| `PosWarnSoft` | #FEF3C7 | мягкий янтарный фон |

Контраст текста к фону ≥ WCAG AA (PosText на PosCard/PosBg — ~14:1; PosTextMuted — ~5:1).

## Типографика (Inter)
- ИТОГО: 44–56 pt, Bold.
- Суммы строк: 18–20 pt, SemiBold, **tabular** (моноширинные цифры — колонки не прыгают).
- Названия товаров: 17–18 pt.
- Служебное/подписи: 13–14 pt, PosTextMuted.
- Моноширинные цифры: `<TextBlock Classes="num">` → FontFeatures "tnum=1" / FontFamily с tabular.

## Форма и ритм
- Скругления: карточки/кнопки 12–14, чипы 999 (капсула).
- Тени: мягкие у карточек (BoxShadow 0 1 3 #00000014, 0 4 12 #00000010).
- Сетка отступов: шаг 8 px (8/12/16/24).
- Кнопки: высота ≥ 48 px (сенсор ≥ 44). Главная — заливка PosBrand; вторичные —
  контур PosBorder на белом; опасная — контур PosDanger (без заливки).

## Компоненты (классы стилей)
- `Button.primary` — зелёная заливка, белый текст, крупная.
- `Button.ghost` — белая, контур PosBorder, текст PosText (вторичные действия).
- `Button.danger` — белая, контур PosDanger, текст PosDanger (Очистить/Удалить).
- `Button.key` — клавиша цифровой клавиатуры/степпера.
- `Border.card` — белая карточка со скруглением и тенью.
- `Border.chip` / `Border.chip.ok` / `.warn` — капсулы статуса.
- `TextBox.search` — поле поиска/скана с иконкой.

## Тёмная тема (опция)
Те же имена токенов, тёмные значения (PosBg #0F1713, PosCard #15201B, PosText #E8EFEA…),
переключается через `RequestedThemeVariant` + подмену словаря. По умолчанию — светлая.

## Эталон-макет (Mac-Claude, 08.10)
Верстать ТОЧНО по макету: `docs/pos-design/pos-mockup.html` (все размеры/цвета/отступы в CSS)
+ отрисовки `mockup-sale-1920x1080.png`, `mockup-payment-1920x1080.png`. Сравнение
«макет | касса» — `docs/pos-design/compare-*.png` (расхождения выравнивания > 4px — править).

Ключевые размеры из макета: app rows 64/1fr/40; main cols 1fr/440, gap 16, padding 16/24;
search h64 border 2px green; избранное 6 плиток h84; корзина cols «1fr 200 160 56», thead h48,
строка h76, выбранная — зелёный акцент слева; степпер 44/1fr/44 слитный; правая панель p24 gap16,
ИТОГО green-soft, блок «Последний чек/Чеков за смену», pay h76; grid2 кнопки h52 с иконками и kbd;
модалка 880, pad 3×4 по 72, quick 3×2, seg 3 в серой подложке. Иконки — векторные (не эмодзи).

### Сверка «макет | касса»
`dotnet run --project src/food-market.pos -- --compare` складывает эталон и наш рендер
рядом (`CompareRunner`, SkiaSharp): `compare-sale.png`, `compare-payment.png`. Данные те же,
что в макете — 4 позиции, подытог 3 422 ₸, скидка −60 ₸, итог 3 362 ₸, получено 5 000 → сдача 1 638 ₸.
Результат сверки на 08.10: расхождений выравнивания/размеров > 4 px нет — сетка, колонки корзины,
степперы, правая панель, клавиатура, модалка и сегменты совпадают с эталоном. Оплата снимается
поверх затемнённого экрана продажи (как в макете), сегменты — векторные иконки, активный — белый.