# Hospitality Design Guidelines

## Color & theme

Use CSS variables from `globals.css`:

```css
--hospitality-accent: #ea580c;       /* light */
--hospitality-accent-soft: rgba(234, 88, 12, 0.12);
--hospitality-warm: #f97316;
```

Dark mode equivalents use `#fb923c` accent.

**Do not** hardcode hex in components — reference `var(--hospitality-accent)`.

## Typography

- Headings: inherit global `text-secondary`, semibold
- Muted text: `text-[var(--muted)]`
- Monospace for codes/tokens: `font-mono text-sm`

## Spacing

- Page padding: `p-4 lg:p-6`
- Card gaps: `gap-4`
- Form fields: `space-y-3`
- Nav items: `py-2.5 px-3`, rounded-xl

## Components

| Pattern | Guideline |
|---------|-----------|
| Primary action | `Button` default variant, hospitality accent via active nav |
| Destructive | `ConfirmDialog` with `danger` |
| Status | `HospitalityStatusChip` or `Badge` tones |
| Tables | Always wrap with search in `HospitalityTablePage` |
| Empty states | Action button when create is available |

## Navigation

- Groups collapse on mobile drawer
- Hide nav items when capability flag is `false`
- Hub link at sidebar footer

## Forms

- react-hook-form + zod validation
- Required fields marked in schema messages (Persian)
- Select for enums; Input for text/number

## Icons

Lucide icons in nav config (`constants/portals.ts`).

## Motion

- Sidebar chevron: `transition-transform`
- Nav hover: `transition-colors duration-200`
- Avoid heavy animations on data tables

## RTL

- Search icon: `right-3`, input `pr-10`
- Sidebar border: `border-l` (RTL shell)
- Breadcrumb chevron rotated for RTL flow