# Tokens

Referência completa dos tokens semânticos que componentes consomem via utilitários Tailwind. Para paletas primitivas, veja /estilos/cores.

Arquitetura

## Duas camadas

Camada 1

### Primitivas

Paleta crua do Figma com escala numérica 50-950 e valores para claro e escuro. Não usar diretamente em componentes. Documentadas em [/estilos/cores](/estilos/cores).

```css
--itps-primary-900: #EB5E57
```

Camada 2

### Semânticos e compatibilidade shadcn

Intenção de interface. Mapeia primitivas a papéis do sistema como `brand`, `background`, `foreground`, `primary` e `card`. **É o contrato dos componentes** via utilitários Tailwind.

```css
--brand: var(--itps-primary-900)
--primary: var(--itps-secondary-900)
```

Vocabulário ≠ intenção

`#EB5E57` é cor. `--brand` é intenção visual de marca. Trocar a primitiva sem tocar no componente concentra a mudança em uma linha.

Modo escuro = primitivas por estado

A classe `.dark` troca os valores de `--itps-*`; semânticos só sobrescrevem pares de contraste.

Sem camada extra de estado

Estados como hover, foco e ativo usam modificadores de opacidade (`bg-primary/90`) ou regra local documentada.

## Superfícies

Fundos da aplicação. Pares \`-foreground\` definem o texto que vai sobre cada superfície e preservam contraste WCAG AA contra o fundo correspondente.

`--background` → --itps-base-0

Claro #FFFFFF

Escuro #030F1C

Canvas raiz da aplicação (body e layout)

`--foreground` → --itps-base-950

Claro #030F1C

Escuro #FFFFFF

Texto principal sobre background

`--card` → --itps-base-50

Claro #F9FAFB

Escuro #0C1E31

Canvas elevado para cards e painéis

`--card-foreground` → --itps-base-950

Claro #030F1C

Escuro #FFFFFF

Texto sobre card

`--popover` → --itps-base-0

Claro #FFFFFF

Escuro #030F1C

Fundo de popover, dropdown e tooltip

`--popover-foreground` → --itps-base-950

Claro #030F1C

Escuro #FFFFFF

Texto sobre popover

`--muted` → --itps-base-100

Claro #EDF0F2

Escuro #243242

Contêiner sutil para chip, tag e estado hover

`--muted-foreground` → --itps-base-800

Claro #243242

Escuro #EDF0F2

Texto secundário: label, ajuda e metadado

## Marca

\`brand\` é o coral de identidade visual Sinapse. \`primary\` permanece azul para compatibilidade shadcn em ações principais de bibliotecas externas.

`--brand` → --itps-primary-900

Claro #EB5E57

Escuro #FF4C43

Borda, ícone e fundo de marca; para texto use brand-text

`--brand-foreground` → --itps-base-0

Claro #FFFFFF

Escuro #030F1C

Texto sobre brand

`--brand-text` → --itps-primary-950 / --itps-primary-900

Claro #D3242D

Escuro #FF4C43

Texto coral sobre superfície clara: links editoriais, títulos e rótulos (AA)

`--brand-hover` → --itps-primary-950

Claro #D3242D

Escuro #D3242D

Fundo do botão primary/outline no hover e no active

`--brand-hover-foreground` → --itps-base-0 / --itps-base-950

Claro #FFFFFF

Escuro #FFFFFF

Texto e ícone sobre brand-hover

`--primary` → --itps-secondary-900

Claro #1961AC

Escuro #4797EB

Ações principais em shadcn/ui, shadcn-vue e ports compatíveis

`--primary-foreground` → --itps-base-0

Claro #FFFFFF

Escuro #030F1C

Texto sobre primary azul

`--secondary` → --itps-secondary-50 / --itps-secondary-25

Claro #F8FAFC

Escuro #021427

Superfície azul institucional sutil

`--secondary-foreground` → --itps-secondary-900

Claro #1961AC

Escuro #4797EB

Texto sobre secondary

`--accent` → --itps-terciary-100

Claro #DFE7E7

Escuro #18242F

Superfície neutra esverdeada para destaques sutis

`--accent-foreground` → --itps-base-950

Claro #030F1C

Escuro #FFFFFF

Texto sobre accent

`--destructive` → --itps-primary-900

Claro #EB5E57

Escuro #FF4C43

Botões e áreas de ação destrutiva

`--destructive-foreground` → --itps-base-950 / --itps-base-0

Claro #030F1C

Escuro #030F1C

Texto sobre destructive

`--destructive-text` → --itps-primary-950 / --itps-primary-900

Claro #D3242D

Escuro #FF4C43

Mensagem de erro e texto destrutivo sobre superfície (AA)

## Feedback

Cores semânticas de status. Em modo escuro, foregrounds críticos usam base-0 para preservar contraste. Warning usa base-0 sobre amarelo em modo escuro.

`--danger` → --itps-primary-900

Claro #EB5E57

Escuro #FF4C43

Alias de destructive para feedback negativo crítico

`--danger-foreground` → --itps-base-950 / --itps-base-0

Claro #030F1C

Escuro #030F1C

Texto sobre danger

`--danger-text` → --itps-primary-950 / --itps-primary-900

Claro #D3242D

Escuro #FF4C43

Texto de feedback negativo sobre superfície (AA)

`--success` → --itps-success-900

Claro #00804D

Escuro #089B61

Estado de sucesso (verde)

`--success-foreground` → --itps-base-0

Claro #FFFFFF

Escuro #030F1C

Texto sobre success

`--success-text` → --itps-success-950

Claro #007848

Escuro #09AA69

Texto de sucesso sobre superfície ou tinta success/15 (AA)

`--warning` → --itps-alert-900

Claro #F0C653

Escuro #F0C653

Atenção não crítica (amarelo)

`--warning-foreground` → --itps-base-950 / --itps-base-0

Claro #030F1C

Escuro #030F1C

Texto sobre warning (11.85:1 AAA no modo claro)

`--info` → --itps-secondary-900

Claro #1961AC

Escuro #4797EB

Mensagens informativas (azul)

`--info-foreground` → --itps-base-0

Claro #FFFFFF

Escuro #030F1C

Texto sobre info

## Bordas e campos

Tokens estruturais para separação visual e estados de foco. \`ring\` é o anel de foco acessível e usa o azul institucional.

`--border` → --itps-base-100

Claro #EDF0F2

Escuro #243242

Bordas padrão: cards, divisores e separadores

`--input` → --itps-base-200

Claro #C4CCD4

Escuro #394C60

Borda de campos e controles de formulário

`--ring` → --itps-secondary-900

Claro #1961AC

Escuro #4797EB

Anel de foco acessível em azul institucional

## Barra lateral

Aliases do shadcn para a navegação lateral de aplicações (componente Sidebar do shadcn e menus laterais próprios). Apontam para os tokens de superfície, marca e borda, então acompanham o tema claro e o escuro sem ajuste.

`--sidebar` → --background

Claro #FFFFFF

Escuro #030F1C

Fundo da barra lateral

`--sidebar-foreground` → --foreground

Claro #030F1C

Escuro #FFFFFF

Texto e ícones da barra lateral

`--sidebar-primary` → --primary

Claro #1961AC

Escuro #4797EB

Destaque de ação principal dentro da barra

`--sidebar-primary-foreground` → --primary-foreground

Claro #FFFFFF

Escuro #030F1C

Texto sobre sidebar-primary

`--sidebar-accent` → --accent

Claro #DFE7E7

Escuro #18242F

Item ativo e hover da navegação

`--sidebar-accent-foreground` → --accent-foreground

Claro #030F1C

Escuro #FFFFFF

Texto do item ativo

`--sidebar-border` → --border

Claro #EDF0F2

Escuro #243242

Divisória entre a barra e o conteúdo

`--sidebar-ring` → --ring

Claro #1961AC

Escuro #4797EB

Anel de foco dentro da barra

## Gráficos

Cinco slots categóricos para dashboards epidemiológicos: vírus, regiões e períodos. Mapeados a primitivas e refináveis quando os dashboards forem implementados.

`--chart-1` → --itps-secondary-900

Claro #1961AC

Escuro #4797EB

Série 1 — azul institucional

`--chart-2` → --itps-success-800

Claro #09AA69

Escuro #61AB92

Série 2 — verde

`--chart-3` → --itps-alert-900

Claro #F0C653

Escuro #F0C653

Série 3 — amarelo

`--chart-4` → --itps-primary-900

Claro #EB5E57

Escuro #FF4C43

Série 4 — coral

`--chart-5` → --itps-secondary-500

Claro #6C9FD5

Escuro #406996

Série 5 — azul claro

## Radius

Curvaturas semânticas por uso. \`radius\` é o alias shadcn de 8px. Tokens \`rounded-\*\` são por contexto: card 12px, form pílula e circle pílula.

`--radius`

0.5rem

Alias shadcn — 8px (padrão genérico)

`--rounded-card`

0.75rem

Cards, painéis e contêineres — 12px

`--rounded-form`

9999px

Botões e controles em formato pílula

`--rounded-circle`

9999px

Avatares, badges circulares e pontos de status

## Efeitos

Sombras tintadas por \`secondary/opacity/950-10%\` em claro e escuro. Composição em duas camadas: próxima nítida e distante suave.

`--shadow-medium`

claro

escuro

Cards e dropdowns pequenos

`--shadow-large`

claro

escuro

Overlays, painéis laterais e modais

`--shadow-extra-large`

claro

escuro

Pop-ups e elementos flutuantes críticos

`--blur-small`

blur(4px)

Desfoque de fundo em overlays e drawers