# Interaction patterns

Shared rules so screens feel like one product across POS, Manager, Waiter, and Kiosk. Do / don't,
not pixel specs — the pixels live in the tokens.

## Layout

- **POS** is a fixed 1024×768 landscape app with a 50px left rail (`--pos-sidebar-w`). Content fills
  the window; nothing scrolls the whole page — inner panels scroll.
- **Manager / Waiter** are 390×844 mobile frames. One primary action per screen, reachable by thumb.
- **Kiosk** is 1080×1920 portrait, touch-first, large tap targets (≥ 64px), no hover-only affordances.

## Buttons

- One **primary** action per view, using `--primary-500`. Secondary actions are outlined or ghost.
- Destructive actions use `--danger`; never make a destructive action the default-focused button.
- Min tap target 44px (desktop) / 64px (kiosk).

## Colour & state

- Money/paid states → `--success`. Pending → `--warning`. Void/error → `--danger`.
- Selected rows use `--primary-100` fill; never rely on colour alone — pair with weight or a marker.

## Forms & modals

- Modals dim the page with an overlay at `--z-overlay`; the modal sits at `--z-modal`.
- Keep a modal to a single decision; a “collapse to header + one button” pattern is preferred for
  confirmations (see the POS stop-list ingredient modal).

## Language

- Azerbaijani-first copy; keep Russian/English only where the surrounding screen already uses it.
- Numbers/currency follow local format used in the existing mockups.

## Accessibility floor

- Text contrast ≥ 4.5:1 against its surface. Don't put `--text-dim` on coloured fills.
- Every interactive element has a visible focus/active state.