# 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