# Design System - aggios.app

## Cores

### Cores Principais
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
```

### Gradientes
```css
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
```

**Uso do gradiente:**
- Botões principais (CTA)
- Texto em destaque (com `-webkit-background-clip: text`)
- Backgrounds de seções especiais
- Cards destacados (plano Pro)

## Ícones

- **Biblioteca**: Remix Icon (https://remixicon.com/)
- **Pacote**: `remixicon`
- **Importação**: `@import "remixicon/fonts/remixicon.css";`
- **Uso**: Classes CSS (`<i className="ri-arrow-right-line"></i>`)
- **Estilo padrão**: Line icons (outline)
- **Tamanhos comuns**: 
  - Ícones em botões: `text-base` (16px)
  - Ícones em cards: `text-2xl` (24px)
  - Ícones em features: `text-2xl` (24px)

## Tipografia

### Fontes
```css
--font-sans: Inter;        /* Corpo, UI, labels */
--font-heading: Open Sans; /* Títulos, headings */
--font-mono: Fira Code;    /* Código, domínios */
```

### System Font Stack
```css
font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, 
             'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
             'Helvetica Neue', Arial, sans-serif;
```

### Hierarquia

| Elemento | Font | Tamanho | Peso | Line Height |
|----------|------|---------|------|-------------|
| H1 (Hero) | Open Sans | 48-72px | 700 | 1.1 |
| H2 (Seções) | Open Sans | 32-48px | 700 | 1.2 |
| H3 (Cards) | Open Sans | 20-24px | 700 | 1.3 |
| Body | Inter | 14-16px | 400 | 1.5 |
| Body Large | Inter | 18-20px | 400 | 1.6 |
| Labels | Inter | 13-14px | 600 | 1.4 |
| Small | Inter | 12-13px | 400 | 1.4 |
| Code/Mono | Fira Code | 12-14px | 400 | 1.5 |

## Componentes

### Botões

#### Botão Primário (Gradient)
```tsx
className="px-6 py-3 bg-gradient-to-r from-primary to-secondary 
           text-white font-semibold rounded-lg 
           hover:opacity-90 transition-opacity shadow-lg"
```
- **Padding**: 24px 12px (px-6 py-3)
- **Background**: Gradiente primary → secondary
- **Border Radius**: 8px (rounded-lg)
- **Font**: Inter 600 / 14-16px
- **Hover**: Opacity 0.9
- **Shadow**: shadow-lg

#### Botão Secundário (Outline)
```tsx
className="px-6 py-3 border-2 border-primary text-primary 
           font-semibold rounded-lg 
           hover:bg-primary hover:text-white transition-colors"
```
- **Padding**: 24px 12px (px-6 py-3)
- **Border**: 2px solid primary
- **Hover**: Background primary + text white

#### Botão Ghost
```tsx
className="px-6 py-3 border-2 border-border text-foreground 
           font-semibold rounded-lg 
           hover:border-primary transition-colors"
```
- **Border**: 2px solid border
- **Hover**: Border muda para primary

#### Botão Header (Compacto)
```tsx
className="px-6 py-2 bg-gradient-to-r from-primary to-secondary 
           text-white font-semibold rounded-lg 
           hover:opacity-90 transition-opacity shadow-lg"
```
- **Padding**: 24px 8px (px-6 py-2)
- **Uso**: Headers, navegação
- **Tamanho**: Menor para espaços reduzidos

### Input
```tsx
className="w-full px-4 py-3 border border-border rounded-lg 
           focus:border-primary focus:outline-none 
           text-sm placeholder:text-text-secondary"
```
- **Padding**: 16px 12px
- **Border**: 1px solid border (#E5E5E5)
- **Border Radius**: 8px (rounded-lg)
- **Font**: Inter 400 / 14px
- **Focus**: Border primary, sem outline
- **Placeholder**: text-secondary (#7D7D7D)

### Cards

#### Card Padrão
```tsx
className="bg-white p-8 rounded-2xl border border-border 
           hover:border-primary transition-colors"
```
- **Background**: white
- **Padding**: 32px
- **Border Radius**: 16px (rounded-2xl)
- **Border**: 1px solid border
- **Hover**: Border muda para primary

#### Card Gradient (Destaque)
```tsx
className="bg-gradient-to-br from-primary to-secondary 
           p-8 rounded-2xl text-white shadow-2xl"
```
- **Background**: Gradiente diagonal
- **Text**: Branco
- **Shadow**: shadow-2xl

### Badge
```tsx
className="inline-flex items-center gap-2 px-4 py-2 
           bg-primary/10 rounded-full text-sm text-primary font-medium"
```
- **Padding**: 8px 16px
- **Border Radius**: 9999px (rounded-full)
- **Background**: primary com 10% opacity
- **Font**: Inter 500 / 12-14px

### Ícones em Cards
```tsx
<div className="w-12 h-12 bg-gradient-to-r from-primary to-secondary 
                rounded-xl flex items-center justify-center">
  <i className="ri-icon-name text-2xl text-white"></i>
</div>
```
- **Tamanho**: 48x48px (w-12 h-12)
- **Background**: Gradiente
- **Border Radius**: 12px (rounded-xl)
- **Ícone**: 24px, branco

## Espaçamento

| Nome | Valor | Uso |
|------|-------|-----|
| xs | 4px | Gaps pequenos, ícones |
| sm | 8px | Gaps entre elementos relacionados |
| md | 16px | Padding padrão, gaps |
| lg | 24px | Espaçamento entre seções |
| xl | 32px | Padding de cards |
| 2xl | 48px | Espaçamento entre seções grandes |
| 3xl | 64px | Hero sections |
| 4xl | 80px | Separação de blocos |

## Layout

### Container
```tsx
className="max-w-7xl mx-auto px-6 lg:px-8"
```
- **Max Width**: 1280px (max-w-7xl)
- **Padding horizontal**: 24px mobile, 32px desktop

### Grid de Features (3 colunas)
```tsx
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
```

### Grid de Pricing (3 planos)
```tsx
className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"
```

### Section Spacing
- **Padding top/bottom**: py-20 (80px)
- **Background alternado**: bg-zinc-50 para seções pares

## Estados Interativos

### Focus
```css
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
```

### Hover States
- **Botões**: `hover:opacity-90` ou `hover:bg-primary`
- **Cards**: `hover:border-primary`
- **Links**: `hover:text-primary`
- **Ícones sociais**: `hover:text-white`

### Transições
```tsx
className="transition-opacity"  /* Para opacity */
className="transition-colors"   /* Para cores/backgrounds */
```
- **Duration**: Default (150ms)
- **Easing**: Default ease

## Gradiente de Texto

```tsx
<span className="gradient-text">texto com gradiente</span>
```

```css
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
```

## Acessibilidade

- **Contraste Mínimo**: WCAG AA (4.5:1 para texto normal, 3:1 para texto grande)
- **Touch Target**: Mínimo 44x44px para mobile
- **Fonte Mínima**: 14px para corpo, 13px para labels
- **Line Height**: 1.5 para melhor legibilidade
- **Focus Visible**: Outline 2px primary com offset
- **Alt Text**: Obrigatório em todas as imagens
- **Smooth Scroll**: `html { scroll-behavior: smooth; }`

## Responsividade

### Breakpoints
```css
sm: 640px   /* Tablets pequenos */
md: 768px   /* Tablets */
lg: 1024px  /* Laptops */
xl: 1280px  /* Desktops */
2xl: 1536px /* Telas grandes */
```

### Mobile First
- Começar com design mobile
- Adicionar complexidade em breakpoints maiores
- Grid: 1 coluna → 2 colunas → 3 colunas
- Font sizes: Menores no mobile, maiores no desktop