# Paleta de cores

Fonte: `Manual de marca.pdf` p. 10 e `references/paleta-de-cores.png` (arquivo oficial).
Contrastes **calculados** (WCAG 2.1), não estimados. Tokens prontos em `assets/tokens/`.

## 1. Cores institucionais

As três cores-mãe. Toda peça é ancorada em uma delas (ou em branco/neutro).

| Nome | HEX | RGB | CMYK | Pantone | Uso |
|---|---|---|---|---|---|
| **Verde Escuro** | `#0B3D2E` | 11·61·46 | 82·0·25·76 | 560 C/U | Cor primária. Fundo institucional, headers, seções de CTA. |
| **Azul Petróleo** | `#003C63` | 0·60·99 | 100·39·0·61 | 302 C/U | Secundária. Divisórias, seções alternadas, links, gráficos. |
| **Navy** | `#02172E` | 2·23·46 | 100·84·0·82 | 5395 C/U | Fundo escuro profundo, texto principal, véu sobre foto. |

## 2. Escalas de apoio

| Token | HEX | Uso |
|---|---|---|
| `verde-100` | `#85B199` | Fundo suave, badge, ilustração; texto secundário sobre verde-900 |
| `verde-500` | `#1E6E43` | **Botão/CTA (cor do manual)**, hover, overline sobre claro, verde do logo |
| `verde-900` | `#0B3D2E` | = institucional |
| `azul-100` | `#D5E5EC` | Fundo de seção clara, card informativo |
| `azul-400` | `#7596AB` | Bordas, ícone secundário (nunca texto pequeno sobre branco) |
| `azul-800` | `#003C63` | = institucional |
| `neutro-0` | `#FFFFFF` | Fundo padrão, texto sobre escuro |
| `neutro-100` | `#EBECEE` | Fundo alternativo, divisor, zebra de tabela |
| `neutro-300` | `#A4ABB4` | Borda, placeholder, desabilitado (nunca texto essencial sobre branco) |
| `neutro-600` | `#495869` | Texto secundário, legenda, rótulo de gráfico |
| `navy-900` | `#02172E` | = institucional / texto padrão |

## 3. Acentos — uso pontual

**Um acento por peça, em um elemento.** Nunca fundo de seção inteira, nunca texto
corrido, **nunca texto sobre fundo claro** (contraste reprovado).

| Token | HEX | Onde brilha |
|---|---|---|
| `lime` | `#90D62E` | Overline/palavra-chave sobre fundo escuro, número em destaque, barra de progresso, ícone |
| `sky` | `#59C3FF` | Link sobre fundo escuro, dado informativo, linha do círculo decorativo, foco de teclado |

## 4. Cores internas do logo (não são cores de UI)

Medidas nos arquivos; existem para você reconhecê-las, não para usar em componentes:

| | HEX | Onde aparece |
|---|---|---|
| Navy do logo | `#17293F` | Arte dos `*_Claro` coloridos |
| Branco do logo | `#FDFEFF` | Arte dos `*_Escuro` |
| Verde do logo | `#1E6E43` | Tagline/STANDARD sobre claro (coincide com `verde-500`) |
| Verde claro do logo | `#7EB572` | Tagline sobre escuro |

## 5. Semânticos (refletidos em `assets/tokens/`)

| Semântico | Valor | | Semântico | Valor |
|---|---|---|---|---|
| `bg/default` | `#FFFFFF` | | `text/default` | `#02172E` |
| `bg/subtle` | `#EBECEE` | | `text/secondary` | `#495869` |
| `bg/soft-blue` | `#D5E5EC` | | `text/muted`* | `#A4ABB4` |
| `bg/brand` | `#0B3D2E` | | `text/on-brand` | `#FFFFFF` |
| `bg/brand-alt` | `#003C63` | | `text/link` | `#003C63` |
| `bg/inverse` | `#02172E` | | `text/link-inverse` | `#59C3FF` |
| `border/default` | `#A4ABB4` | | `action/primary` | `#0B3D2E` |
| `border/subtle` | `#EBECEE` | | `action/cta` | `#1E6E43` |
| `focus/ring` | `#59C3FF` | | `accent/primary` | `#90D62E` |

\* `text/muted` só para placeholder/desabilitado — reprova AA como texto informativo.

**Estados de feedback** — a paleta oficial não define aviso/erro; esta skill adota
(contraste AA validado). Sucesso usa o verde da casa:

| Estado | Texto/ícone | Fundo |
|---|---|---|
| Sucesso | `#1E6E43` | `#E8F1EC` (ou `#85B199` a 25%) |
| Informação | `#003C63` | `#D5E5EC` |
| Aviso | `#8A6A00` | `#FFF4D6` |
| Erro | `#9B1C1C` | `#FDE8E8` |

## 5b. Modo escuro (tokens prontos)

O tema escuro deriva do **Navy** e mantém a paleta — nada de cinzas novos:

| Papel | Light | Dark |
|---|---|---|
| Fundo | `#FFFFFF` | `#02172E` (Navy) |
| Fundo sutil / zebra | `#EBECEE` | `#0C2238`* |
| Superfície (card/input) | `#FFFFFF` | `#0F2540`* |
| Título / valor forte | `#0B3D2E` | `#F2F5F3` |
| Texto | `#02172E` | `#E8ECEF` |
| Texto secundário | `#495869` | `#AAB6C0` |
| Link / info | `#003C63` | `#59C3FF` (sky) |
| Verde como texto | `#1E6E43` | `#85B199` (verde-100) |
| Destaque de número | `#1E6E43` | `#90D62E` (lime) |
| Bordas / ticks | navy translúcido | branco translúcido |
| Feedback | tintas claras | tintas translúcidas + fg clareado (`#DDBA5C` aviso, `#F0A6A6` erro)* |

\* Derivados oficiais do Navy/estados para hierarquia no escuro — use os tokens
(`--lc-surface`, `--lc-bg-subtle`, `--lc-warning`…), nunca os hex direto.
Ativação: automática por `prefers-color-scheme`; force com `<html data-theme="dark">`
ou trave claro com `data-theme="light"` (peças de marketing travam claro).
**No escuro, verde-500 e azul-800 não funcionam como texto** — os tokens já trocam.

## 6. Gradiente institucional (uso restrito)

`linear-gradient(135deg, #02172E 0%, #003C63 45%, #1E6E43 100%)`

Visto no manual (p. 11) como momento expressivo. Permitido **apenas** em capa,
divisória de deck ou hero institucional. Proibido em botões, cards, ícones, texto
e sobre o logotipo. No dia a dia, a identidade é de **blocos sólidos**.

## 7. Contraste — combinações validadas (WCAG 2.1, calculado)

`Corpo` = ≥ 4.5:1 · `Título` = ≥ 3:1 (texto ≥ 24px, ou ≥ 19px bold).

### Sobre fundos escuros
| Fundo | Texto | Razão | Corpo | Título |
|---|---|---|---|---|
| `#0B3D2E` | `#FFFFFF` | 12.20 | ✅ | ✅ |
| `#0B3D2E` | `#EBECEE` | 10.32 | ✅ | ✅ |
| `#0B3D2E` | `#D5E5EC` | 9.44 | ✅ | ✅ |
| `#0B3D2E` | `#90D62E` | 6.88 | ✅ | ✅ |
| `#0B3D2E` | `#59C3FF` | 6.20 | ✅ | ✅ |
| `#0B3D2E` | `#85B199` | 5.08 | ✅ | ✅ |
| `#003C63` | `#FFFFFF` | 11.50 | ✅ | ✅ |
| `#003C63` | `#EBECEE` | 9.73 | ✅ | ✅ |
| `#003C63` | `#90D62E` | 6.48 | ✅ | ✅ |
| `#003C63` | `#59C3FF` | 5.84 | ✅ | ✅ |
| `#02172E` | `#FFFFFF` | 18.03 | ✅ | ✅ |
| `#02172E` | `#EBECEE` | 15.25 | ✅ | ✅ |
| `#02172E` | `#90D62E` | 10.17 | ✅ | ✅ |
| `#02172E` | `#59C3FF` | 9.17 | ✅ | ✅ |
| `#02172E` | `#7EB572` | 7.50 | ✅ | ✅ |
| `#1E6E43` | `#FFFFFF` | 6.24 | ✅ | ✅ |
| `#495869` | `#FFFFFF` | 7.28 | ✅ | ✅ |

### Sobre fundos claros
| Fundo | Texto | Razão | Corpo | Título |
|---|---|---|---|---|
| `#FFFFFF` | `#02172E` | 18.03 | ✅ | ✅ |
| `#FFFFFF` | `#0B3D2E` | 12.20 | ✅ | ✅ |
| `#FFFFFF` | `#003C63` | 11.50 | ✅ | ✅ |
| `#FFFFFF` | `#495869` | 7.28 | ✅ | ✅ |
| `#FFFFFF` | `#1E6E43` | 6.24 | ✅ | ✅ |
| `#EBECEE` | `#02172E` | 15.25 | ✅ | ✅ |
| `#EBECEE` | `#0B3D2E` | 10.32 | ✅ | ✅ |
| `#EBECEE` | `#495869` | 6.16 | ✅ | ✅ |
| `#D5E5EC` | `#0B3D2E` | 9.44 | ✅ | ✅ |
| `#D5E5EC` | `#003C63` | 8.90 | ✅ | ✅ |
| `#90D62E` | `#02172E` | 10.17 | ✅ | ✅ |
| `#90D62E` | `#0B3D2E` | 6.88 | ✅ | ✅ |
| `#59C3FF` | `#02172E` | 9.17 | ✅ | ✅ |

### Reprovadas — não usar assim
| Fundo | Texto | Razão | Veredito |
|---|---|---|---|
| `#FFFFFF` | `#90D62E` | 1.77 | **nunca** (lime não é texto sobre claro) |
| `#FFFFFF` | `#59C3FF` | 1.97 | **nunca** |
| `#FFFFFF` | `#A4ABB4` | 2.32 | nunca para texto informativo |
| `#FFFFFF` | `#85B199` | 2.40 | nunca para texto |
| `#FFFFFF` | `#7596AB` | 3.13 | só título grande |
| `#1E6E43` | `#90D62E` | 3.52 | só título grande |
| `#1E6E43` | `#59C3FF` | 3.17 | só título grande |
| `#495869` | `#90D62E` | 4.11 | só título grande |
| `#495869` | `#59C3FF` | 3.70 | só título grande |

> Lime e Sky sobre fundo claro: use apenas como **preenchimento de forma** (barra,
> ícone, bullet, tag com texto navy por cima) — nunca como cor de texto.

## 8. Proporção e ritmo

- Dominante: um institucional **ou** branco/neutro-100 (~60% da peça).
- Secundária: até ~30%. Acento: até ~10%, em um único elemento.
- Não coloque Verde Escuro e Azul Petróleo em blocos de área igual — eleja um dominante.
- Ritmo de seções web: `#FFFFFF → #EBECEE → #FFFFFF → escuro (#0B3D2E ou #02172E) → #FFFFFF`.
  Nunca duas seções escuras seguidas.
- Sobre foto: véu `#02172E` a 40–60% antes de qualquer texto.
