# SaveInMed - Design System & Component Library

## 🎨 Identidade Visual (Extended)
- **Primary**: `#2563EB` (Blue 600) - Ações de "Comprar".
- **Secondary**: `#059669` (Emerald 600) - Áreas de Inventário e Saúde.
- **Surface**: `#FFFFFF` com bordas `#F1F5F9` (Slate 100).
- **Glassmorphism**: Usado em modais e cards de destaque (`bg-white/80 backdrop-blur-md`).

## 🧱 Componentes de Interface
- **Tabelas**: Devem ser responsivas com `overflow-x-auto`. Use `shadcn/ui` DataTable pattern.
- **Status Badges**:
  - `Pendente`: Yellow (Pill)
  - `Pago`: Green (Pill)
  - `Cancelado`: Red (Pill)
- **Inputs Numéricos**: Sempre tratar centavos no frontend (mask de moeda BRL).

## 📱 Mobile-First Rules
- Botões de ação em listas devem ter área de toque mínima de `44px`.
- Filtros em telas pequenas devem estar dentro de um `Sheet` (Drawer).

## 🚀 Micro-interações
- Use `framer-motion` para transições de página (`opacity` e `y` offset).
- Skeleton screens durante o fetch de produtos.