# 📝 Guia de Tipografia - IDT App

## 🎯 Visão Geral

Este sistema de tipografia foi criado para garantir consistência visual e uma experiência de usuário coesa em todo o projeto IDT App. Utilizamos a fonte **Inter** como principal e um sistema de design tokens baseado em CSS Custom Properties.

## 🔤 Fontes

### Fonte Principal
- **Inter**: Fonte principal moderna e legível
- **Roboto**: Fonte secundária (fallback)
- **SF Mono**: Fonte monoespaçada para código

### Integração
```scss
font-family: var(--font-primary);   // Inter + fallbacks
font-family: var(--font-secondary); // Roboto + fallbacks  
font-family: var(--font-mono);      // SF Mono + fallbacks
```

## 📏 Escala Tipográfica

### Tamanhos de Fonte (Sistema Modular - 1.125)
```scss
--font-size-xs: 0.75rem;      // 12px
--font-size-sm: 0.875rem;     // 14px  
--font-size-base: 1rem;       // 16px (base)
--font-size-lg: 1.125rem;     // 18px
--font-size-xl: 1.25rem;      // 20px
--font-size-2xl: 1.5rem;      // 24px
--font-size-3xl: 1.875rem;    // 30px
--font-size-4xl: 2.25rem;     // 36px
--font-size-5xl: 3rem;        // 48px
```

### Pesos de Fonte
```scss
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
```

## 🎨 Classes de Tipografia

### Títulos e Display
```html
<h1 class="text-display-1">Display Extra Large</h1>
<h2 class="text-display-2">Display Large</h2>
<h1 class="text-h1">Heading 1</h1>
<h2 class="text-h2">Heading 2</h2>
<h3 class="text-h3">Heading 3</h3>
<h4 class="text-h4">Heading 4</h4>
```

### Texto do Corpo
```html
<p class="text-body-1">Texto principal do corpo</p>
<p class="text-body-2">Texto secundário menor</p>
<small class="text-caption">Texto de legenda</small>
```

### Labels e UI
```html
<label class="text-label-large">Label Grande</label>
<label class="text-label-medium">Label Médio</label>
<label class="text-label-small">Label Pequeno</label>
```

## 🎨 Cores de Texto

### Classes de Cor
```html
<p class="text-primary">Texto principal</p>
<p class="text-secondary">Texto secundário</p>
<p class="text-tertiary">Texto terciário</p>
<p class="text-disabled">Texto desabilitado</p>
<a class="text-link">Link</a>
<p class="text-error">Texto de erro</p>
<p class="text-success">Texto de sucesso</p>
<p class="text-warning">Texto de aviso</p>
```

### Modo Escuro
O sistema automaticamente adapta as cores para o tema escuro quando a classe `.dark-theme` está aplicada.

## ⚖️ Utilitários de Peso

```html
<p class="font-light">Texto leve</p>
<p class="font-normal">Texto normal</p>
<p class="font-medium">Texto médio</p>
<p class="font-semibold">Texto semi-negrito</p>
<p class="font-bold">Texto negrito</p>
```

## 📱 Responsividade

O sistema é completamente responsivo:

- **Mobile (≤480px)**: Tamanhos reduzidos
- **Tablet (≤768px)**: Tamanhos intermediários  
- **Desktop (>768px)**: Tamanhos completos

## 🔧 Utilitários Avançados

### Alinhamento
```html
<p class="text-left">Esquerda</p>
<p class="text-center">Centro</p>
<p class="text-right">Direita</p>
<p class="text-justify">Justificado</p>
```

### Transformação
```html
<p class="text-uppercase">MAIÚSCULA</p>
<p class="text-lowercase">minúscula</p>
<p class="text-capitalize">Primeira Maiúscula</p>
```

### Line Height
```html
<p class="leading-tight">Altura de linha compacta</p>
<p class="leading-normal">Altura de linha normal</p>
<p class="leading-relaxed">Altura de linha relaxada</p>
```

### Letter Spacing
```html
<p class="tracking-tight">Espaçamento compacto</p>
<p class="tracking-normal">Espaçamento normal</p>
<p class="tracking-wide">Espaçamento amplo</p>
```

## 💡 Exemplos Práticos

### Card de Produto
```html
<div class="card">
  <h3 class="text-h3 text-primary">Nome do Produto</h3>
  <p class="text-body-2 text-secondary">Descrição breve</p>
  <span class="text-label-large text-success">R$ 199,90</span>
</div>
```

### Formulário
```html
<form>
  <label class="text-label-large text-secondary">Nome Completo</label>
  <input type="text" placeholder="Digite seu nome">
  <small class="text-caption text-tertiary">Campo obrigatório</small>
</form>
```

### Navegação
```html
<nav>
  <a href="#" class="text-body-1 font-medium">Dashboard</a>
  <a href="#" class="text-body-1 text-secondary">Relatórios</a>
</nav>
```

## ⚠️ Boas Práticas

### ✅ Faça
- Use as classes de tipografia ao invés de estilos inline
- Mantenha a hierarquia visual com os tamanhos corretos
- Use `text-primary` para texto principal
- Teste em modo claro e escuro

### ❌ Evite
- Definir `font-size` diretamente nos componentes
- Usar cores hardcoded para texto
- Misturar diferentes escalas tipográficas
- Ignorar a responsividade

## 🔄 Migração

Para migrar código existente:

1. **Substitua font-size hardcoded:**
   ```scss
   // ❌ Antes
   font-size: 14px;
   
   // ✅ Depois  
   font-size: var(--font-size-sm);
   ```

2. **Use classes de utilidade:**
   ```html
   <!-- ❌ Antes -->
   <h1 style="color: #333;">Título</h1>
   
   <!-- ✅ Depois -->
   <h1 class="text-h1 text-primary">Título</h1>
   ```

3. **Atualize cores de texto:**
   ```scss
   // ❌ Antes
   color: rgba(0, 0, 0, 0.6);
   
   // ✅ Depois
   color: var(--text-secondary);
   ```

## 🎯 Tokens Disponíveis

### Tamanhos
- `var(--font-size-xs)` até `var(--font-size-5xl)`

### Pesos  
- `var(--font-weight-light)` até `var(--font-weight-bold)`

### Cores
- `var(--text-primary)` até `var(--text-warning)`

### Famílias
- `var(--font-primary)`, `var(--font-secondary)`, `var(--font-mono)`

---

Para dúvidas ou sugestões, consulte a equipe de design system! 🎨 