docs: blinda arquitetura de estilos e define protocolo de testes

frontend/DESIGN_SYSTEM.md

@@ -1,28 +1,23 @@
-# SaveInMed - Design System
+# SaveInMed - Design System & Component Library
 
-Diretrizes visuais para o frontend do SaveInMed.
+## 🎨 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`).
 
-## 🎨 Paleta de Cores
-- **Primária**: `blue-600` (#2563EB) - Botões principais, links ativos.
-- **Sucesso**: `green-600` (#16A34A) - Confirmações, status "Entregue".
-- **Aviso**: `yellow-500` (#EAB308) - Alertas, status "Pendente".
-- **Erro**: `red-600` (#DC2626) - Botões de deletar, mensagens de erro.
-- **Fundo**: `gray-50` (#F9FAFB) - Background das páginas.
+## 🧱 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).
 
-## 🔡 Tipografia
-- **Títulos**: Inter ou Sans-serif, font-bold, text-gray-900.
-- **Corpo**: Inter, text-gray-600.
+## 📱 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).
 
-## 🧩 Componentes Padrão
-- **Botões**:
-  - `bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2 transition-colors`
-- **Inputs**:
-  - `border border-gray-300 focus:ring-2 focus:ring-blue-500 rounded-lg`
-- **Cards**:
-  - `bg-white shadow-sm border border-gray-100 rounded-xl p-6`
-
-## 📦 Ícones
-- **Biblioteca**: `Heroicons 24/outline`
-- **Home**: `HomeIcon`
-- **Carrinho**: `ShoppingCartIcon`
-- **Usuário**: `UserIcon`
+## 🚀 Micro-interações
+- Use `framer-motion` para transições de página (`opacity` e `y` offset).
+- Skeleton screens durante o fetch de produtos.