feat: Implementação de submenus laterais (flyout), correções de UI e proteção de rotas (AuthGuard)

frontend-aggios.app/app/design-system/README.md

@@ -0,0 +1,107 @@
+# Design System - Aggios Platform
+
+Documentação visual completa do Design System da plataforma Aggios.
+
+## Acesso
+
+Acesse em: `/design-system`
+
+## O que está incluído
+
+### 🎨 Cores
+- **Brand Colors**: Paleta completa de azul (50-950)
+- **Gray Scale**: Escala de cinzas (50-950)
+- **Surface Colors**: Cores de superfície (light, dark, muted, card)
+- **Text Colors**: Cores de texto (primary, secondary, inverse)
+
+### 📏 Espaçamentos
+- `xs` - 4px (0.25rem)
+- `sm` - 8px (0.5rem)
+- `md` - 16px (1rem)
+- `lg` - 24px (1.5rem)
+- `xl` - 32px (2rem)
+- `2xl` - 48px (3rem)
+
+### ✍️ Tipografia
+- **Headings**: Arimo (h1-h6)
+- **Body**: Inter (text-xs até text-xl)
+- **Code**: Fira Code (monospace)
+
+### 🔲 Bordas
+- Border Radius: De `rounded-none` até `rounded-full`
+- Border Styles: Solid, dashed, diferentes espessuras
+- Border Colors: Variações de zinc e brand
+
+### 🌈 Gradientes
+- Brand Gradient (`bg-brand`)
+- Primary Gradient (`var(--gradient-primary)`)
+- Accent Gradient (`var(--gradient-accent)`)
+- Gradient Text (`.gradient-text`)
+
+### 🎭 Sombras
+- Sistema de elevação completo
+- Sombras com brand color (`shadow-brand-20`)
+
+### 🎯 Ícones
+- Heroicons (biblioteca completa - outline e solid)
+- Exemplos de uso em diferentes contextos
+- Integração perfeita com Headless UI
+
+### 🔘 Componentes
+
+#### Botões
+- Primary, Secondary, Outline, Ghost
+- Icon Buttons
+- Estados: Normal, Hover, Disabled, Loading
+
+#### Cards
+- Basic, Elevated, Gradient
+- Icon Card, Stat Card, Interactive Card
+
+#### Inputs
+- Text, Email, Textarea
+- Input with Icon
+- Select, Checkbox, Radio
+
+#### Badges
+- Status Badges (success, info, warning, error)
+- Pill Badges
+- Count Badges
+- Dot Indicators
+
+## Variáveis CSS
+
+Todas as variáveis estão definidas em `app/tokens.css`:
+
+```css
+--color-brand-500
+--color-gray-200
+--spacing-md
+--gradient-primary
+--focus-ring
+```
+
+## Classes Utilitárias
+
+```css
+.bg-brand          /* Gradiente de marca */
+.bg-brand-soft     /* Gradiente suave */
+.gradient-text     /* Texto com gradiente */
+.shadow-brand-20   /* Sombra com cor da marca */
+.font-heading      /* Fonte para headings (Open Sans) */
+```
+
+## Dark Mode
+
+Todos os componentes suportam dark mode automático através da classe `.dark` no HTML.
+
+Toggle disponível na página do Design System.
+
+## Uso
+
+Para usar qualquer componente, copie o código HTML/JSX diretamente da página do Design System.
+
+---
+
+**Versão**: 1.0
+**Data**: 2025