# Paletas de Cores Descomplicar® — Referencia Detalhada

Extensao de `brand-guidelines/SKILL.md`. Paletas completas com variacoes de contexto,
estados de interaccao e combinacoes aprovadas.

---

## Paleta Principal

| Token | Hex | RGB | HSL |
|-------|-----|-----|-----|
| `--color-primary` | `#1a365d` | 26, 54, 93 | 213°, 56%, 23% |
| `--color-secondary` | `#2b6cb0` | 43, 108, 176 | 211°, 61%, 43% |
| `--color-accent` | `#dd6b20` | 221, 107, 32 | 27°, 74%, 50% |
| `--color-white` | `#ffffff` | 255, 255, 255 | — |
| `--color-bg-light` | `#f7fafc` | 247, 250, 252 | 204°, 33%, 98% |
| `--color-text-body` | `#4a5568` | 74, 85, 104 | 220°, 17%, 35% |

---

## Escala Azul Escuro (Primary)

| Variacao | Hex | Uso |
|----------|-----|-----|
| 50 (mais claro) | `#ebf4ff` | Fundos hover muito suaves |
| 100 | `#dbeafe` | Fundos informativos |
| 200 | `#bfdbfe` | Bordas suaves |
| 300 | `#93c5fd` | Icones em fundo claro |
| 400 | `#60a5fa` | Interaccao hover em elementos claros |
| 500 | `#2b6cb0` | Azul medio (secondary) |
| 600 | `#1d4ed8` | Links hover |
| 700 | `#1e40af` | Botoes primarios hover |
| 800 | `#1e3a8a` | Variacao escura |
| **900 (base)** | `#1a365d` | **Cor primaria — uso principal** |

---

## Escala Laranja (Accent)

| Variacao | Hex | Uso |
|----------|-----|-----|
| 50 | `#fff7ed` | Fundo callout de atencao |
| 100 | `#ffedd5` | Destaque suave |
| 200 | `#fed7aa` | Borda callout |
| 300 | `#fdba74` | Icones de alerta em fundo claro |
| 400 | `#fb923c` | Hover em elementos de acento |
| **500 (base)** | `#dd6b20` | **Cor de acento — CTA principal** |
| 600 | `#c05621` | Hover botao CTA |
| 700 | `#9c4221` | Pressed state / active |
| 800 | `#7c2d12` | Texto sobre fundo laranja claro |

---

## Escala de Neutros

| Token | Hex | Uso |
|-------|-----|-----|
| Branco | `#ffffff` | Fundos principais, texto sobre escuro |
| Gray 50 | `#f7fafc` | Fundos secundarios, seccoes alternadas |
| Gray 100 | `#edf2f7` | Hover em items de lista |
| Gray 200 | `#e2e8f0` | Bordas, divisores |
| Gray 300 | `#cbd5e0` | Bordas de formularios desactivados |
| Gray 400 | `#a0aec0` | Placeholder text, icones inactivos |
| Gray 500 | `#718096` | Texto auxiliar, labels |
| **Gray 600** | `#4a5568` | **Texto de corpo principal** |
| Gray 700 | `#2d3748` | Texto secundario escuro |
| Gray 800 | `#1a202c` | Texto titulo alternativo |
| Gray 900 | `#171923` | Fundo ultra-escuro (raro) |

---

## Combinacoes de Cor Aprovadas

### Combinacoes de Alta Prioridade (CTA e Heroi)

| Fundo | Texto / Elemento | Racio | Nota |
|-------|-----------------|-------|------|
| `#1a365d` | `#ffffff` | 12.6:1 | Preferencial — hero, capa, footer |
| `#2b6cb0` | `#ffffff` | 5.1:1 | Botoes, badges, chips |
| `#dd6b20` | `#ffffff` | 3.1:1 | CTA (apenas texto grande >=18px ou bold >=14px) |
| `#ffffff` | `#1a365d` | 12.6:1 | Documentos, corpo pagina |
| `#f7fafc` | `#1a365d` | 11.9:1 | Cards, seccoes alternadas |

### Combinacoes de Texto (Corpo)

| Fundo | Texto | Racio | Nivel WCAG |
|-------|-------|-------|-----------|
| `#ffffff` | `#4a5568` | 7.0:1 | AAA |
| `#f7fafc` | `#4a5568` | 6.6:1 | AAA |
| `#ffffff` | `#2d3748` | 10.7:1 | AAA |
| `#1a365d` | `#f7fafc` | 12.0:1 | AAA |

### Combinacoes Proibidas

| Fundo | Texto | Motivo |
|-------|-------|--------|
| `#dd6b20` | `#ffffff` | Contraste insuficiente para texto pequeno (3.1:1) |
| `#2b6cb0` | `#1a365d` | Contraste insuficiente entre tons de azul (2.2:1) |
| `#4a5568` | `#2b6cb0` | Baixo contraste em textos de corpo (2.8:1) |
| Qualquer cor | `#a0aec0` | Gray 400 nunca como texto (max 2.9:1 sobre branco) |

---

## Paleta por Contexto de Produto

### Dashboard / Aplicacao Web

```
Sidebar: fundo #1a365d, icones #f7fafc (inactivo), #dd6b20 (activo)
Top bar: fundo #ffffff, borda inferior #e2e8f0
Conteudo: fundo #f7fafc
Cards: fundo #ffffff, sombra --shadow-sm
Tabelas: linhas alternas #f7fafc / #ffffff
Botao primario: #dd6b20 (fundo), #ffffff (texto)
Botao secundario: #2b6cb0 (borda e texto), transparente (fundo)
Botao ghost: #4a5568 (texto), hover #f7fafc (fundo)
Links inline: #2b6cb0, hover #1a365d
```

### Apresentacoes (Slides)

```
Slide escuro (capa, divider): fundo #1a365d
  - Titulo: Montserrat 800, #ffffff
  - Subtitulo: Montserrat 600, #f7fafc
  - Acento barra: #dd6b20
  - Logótipo: variante clara

Slide claro (conteudo): fundo #ffffff
  - Titulo: Montserrat 700, #1a365d
  - Corpo: Open Sans 400, #4a5568
  - Highlight box: fundo #f7fafc, borda esquerda #dd6b20 4px
  - Numero/stat: Montserrat 800, #dd6b20 ou #2b6cb0

Slide citacao: fundo #f7fafc
  - Aspas: #dd6b20
  - Texto citacao: Montserrat 600, #1a365d
  - Atribuicao: Open Sans 400, #4a5568
```

### Email Marketing

```
Wrapper: fundo #f7fafc
Container: fundo #ffffff, max-width 600px
Pre-header (top bar): fundo #1a365d, altura 4px ou bloco com logótipo
Header: fundo #1a365d, logótipo clara, padding 32px
  Titulo: Montserrat 700, #ffffff, 28px
Body: fundo #ffffff, padding 32px
  H2: Montserrat 600, #1a365d, 22px
  Paragrafo: Open Sans 400, #4a5568, 16px, line-height 1.6
  Link inline: #2b6cb0
CTA block: centrado, botao #dd6b20, texto #ffffff, border-radius 4px, padding 14px 28px
Divisor: border-top 1px solid #e2e8f0
Footer: fundo #f7fafc, texto #718096, 13px, links #4a5568
```

### Social Media

```
Post Instagram (1080x1080):
  Opcao A (escuro): fundo #1a365d, titulo #ffffff, acento #dd6b20
  Opcao B (claro): fundo #ffffff, titulo #1a365d, detalhe #dd6b20
  Borda/frame: strip #dd6b20 (8-12px) em baixo ou em cima
  Logo: canto inferior direito, variante adequada ao fundo

Story Instagram (1080x1920):
  Gradiente vertical: #1a365d (topo) -> #2b6cb0 (base)
  Texto: #ffffff
  CTA button area: #dd6b20

LinkedIn Banner (1584x396):
  Fundo: #1a365d ou fotografia com overlay #1a365d 60%
  Texto: #ffffff (titulo), #f7fafc (sub)
  Acento: strip ou elemento #dd6b20
```

### Documentos PDF / Propostas

```
Capa: fundo #1a365d
  Logo: variante clara, centrado no topo
  Titulo: Montserrat 800, #ffffff, 36px
  Subtitulo: Montserrat 400, #f7fafc, 18px
  Data/ref: Open Sans 400, #a0aec0, 14px, em baixo

Paginas internas:
  Cabecalho: altura 48px, fundo #1a365d, logótipo pequena (variante clara), numero de pagina
  Titulo capitulo: Montserrat 700, #1a365d, 22px, fundo #f7fafc, padding 12px, borda esquerda #dd6b20 4px
  Corpo: Open Sans 400, #4a5568, 11pt, line-height 1.6
  Callout/destaque: fundo #f7fafc, borda #dd6b20, icone #dd6b20
  Tabelas: header fundo #1a365d texto #ffffff; linhas alternas #f7fafc / #ffffff
  Rodape: borda topo #e2e8f0, texto #718096, 9pt
```

---

## Gradientes Aprovados

| Nome | Valor CSS | Uso |
|------|-----------|-----|
| Hero primario | `linear-gradient(135deg, #1a365d 0%, #2b6cb0 100%)` | Heroi web, fundo apresentacao |
| Acento | `linear-gradient(135deg, #dd6b20 0%, #f6ad55 100%)` | Banners promocionais |
| Escuro suave | `linear-gradient(180deg, #1a365d 0%, #2d3748 100%)` | Sidebars, overlays |
| Claro | `linear-gradient(180deg, #ffffff 0%, #f7fafc 100%)` | Seccoes de transicao |

> Nunca usar gradientes em texto (excecto como elemento decorativo com contraste garantido).
> Maximo 2 gradientes por composicao visual.

---

## Cores de Estado e Feedback

| Estado | Cor | Hex | Uso |
|--------|-----|-----|-----|
| Sucesso | Verde | `#38a169` | Confirmacoes, checkmarks, alertas positivos |
| Aviso | Amarelo | `#d69e2e` | Alertas de atencao, pendentes |
| Erro | Vermelho | `#e53e3e` | Erros, validacoes negativas |
| Informacao | Azul Medio | `#2b6cb0` | Mensagens informativas, tooltips |

> Cores de estado nao fazem parte da identidade visual principal.
> Usar apenas para feedback de interface, nunca como cor de marca.

---

*Referencia de paletas v1.0.0 | 2026-03-10 | Descomplicar®*
*Fonte principal: `brand-guidelines/SKILL.md`*
