# Cores

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Primitives (paletas) → Theme (tokens semânticos por função) → componentes. Componentes só consomem tokens do Theme. Cyan é a cor principal da marca (brand, accent, seleção, foco e link); Sky fica como apoio em gráficos. Componentes nunca usam primitivos diretamente, e nenhuma cor nova é criada fora destas paletas.

## Regras de uso

1. Primitive → Theme → Componente. Componentes só consomem tokens do Theme. Primitivos ficam ocultos e não são usados em componentes.
2. Nenhuma cor nova. Para resolver contraste, troque o passo da paleta existente no token semântico; nunca crie hex novo nem aplique cor solta no componente.
3. Tema é contexto, não variante. Light, Dark e Dark Blue são modes da collection Theme, aplicados no frame. Não existem componentes /Dark.
4. Texto ≥ 4,5:1 e limites de controle/foco ≥ 3:1 em todos os temas. content/disabled é isento, mas disabled nunca é o único sinal.
5. Status têm pares completos: subtle (fundo), border, content (texto), fill (sólido) e on-fill (texto sobre o sólido). Fill não é cor de texto.
6. Seleção usa a família Cyan (selection/*). Foco usa o halo focus/halo (Cyan translúcido) e, em campos, a borda focus/ring (≥ 3:1). Foco tem prioridade sobre hover. Disabled não tem hover.
7. Overlays (dropdown, popover, combobox, date picker, tooltip, menus) usam overlay/surface + overlay/border + elevation/overlay e sempre aparecem um nível acima da superfície em que abriram.
8. Cyan é a cor da marca: brand/* (destaques, ilustrações) e action/accent/* (ações de destaque). Sky é apoio (gráficos). Informação usa status/info (Blue), separado da marca.

## Temas

| Tema | Seletor CSS | Descrição |
| --- | --- | --- |
| Light (Claro) | `:root, [data-theme="light"]` | Padrão. Canvas slate/50, texto neutral/950. |
| Dark (Escuro) | `[data-theme="dark"], .dark` | Canvas neutral/950 (preto neutro), superfícies em neutral/900 e 800. |
| Dark Blue | `[data-theme="dark-blue"]` | Canvas slate/950 (azul-marinho), superfícies em slate/900 e 800. Conteúdo e ações como no Dark. |

Troque o tema com `data-theme="light" | "dark" | "dark-blue"` em qualquer elemento (normalmente `<html>`). O tema é contexto, não variante de componente.

## Receitas: qual token usar

| Elemento | Fundo e bordas | Texto e ícone | Observação |
| --- | --- | --- | --- |
| Página | `surface/canvas` | `content/primary` | Fundo da aplicação e texto principal. |
| Card / painel | `surface/default + border/subtle + elevation/card` | `content/primary` | Container sobre o canvas. Raio radius/role/container. |
| Texto de apoio | - | `content/secondary` | Descrições, metadados, placeholders. Contraste >= 4,5:1. |
| Link | - | `content/link` | Família Cyan. |
| Botão primário | `action/primary/bg (hover, pressed)` | `action/primary/content` | Ação principal neutra: escuro no Light, claro no Dark. |
| Botão de destaque | `action/accent/bg (hover, pressed)` | `action/accent/content` | Ação de destaque em Cyan. |
| Botão secundário | `action/secondary/bg + action/secondary/border + elevation/control` | `action/secondary/content` | Superfície elevada. Nunca #FFF puro. |
| Botão destrutivo | `action/destructive/bg (hover, pressed)` | `action/destructive/content` | Igual nos três temas. |
| Botão ghost / item de lista | `state/hover, state/pressed` | `content/primary` | Hover e pressed neutros globais. |
| Campo (input, select) | `field/bg (hover: field/bg-hover) + border/default` | `content/primary` | Borda de 1px com contraste >= 3:1. Foco: borda focus/ring + halo focus/halo. |
| Item selecionado | `selection/bg + selection/border` | `selection/content` | Chip, opção, linha, menu ativo. Ênfase: selection/fill + selection/on-fill. |
| Overlay (menu, popover, tooltip) | `overlay/surface + overlay/border + elevation/overlay` | `content/primary` | Sempre um nível acima da superfície de origem. Hover: overlay/hover. |
| Alerta / badge subtle | `status/<tipo>/subtle + status/<tipo>/border` | `status/<tipo>/content` | Tipos: success, warning, danger, info. |
| Badge sólido | `status/<tipo>/fill` | `status/<tipo>/on-fill` | Fill não é cor de texto. |
| Desabilitado | `disabled/bg + disabled/border (ou opacity 50%)` | `content/disabled` | Isento de contraste, nunca o único sinal. Sem hover. |
| Progress / Stepper | `progress/track + progress/fill` | `-` | Degradê: progress/gradient-start para progress/gradient-end. |
| Gráficos | - | `chart/1 a chart/5` | 1 Cyan, 2 Sky, 3 Violet, 4 Emerald, 5 Amber. |

## Tokens semânticos (97)

Cada célula traz o alias (primitivo) e o hex resolvido. Valores com transparência mostram o alpha entre parênteses. A coluna Variável CSS é a do `tokens.css`.

### surface

Superfícies da página e dos containers. Camadas, da mais baixa à mais alta.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `surface/canvas` | `--midas-surface-canvas` | `slate/50` `#F8FAFC` | `neutral/950` `#0A0A0A` | `slate/950` `#020617` | Fundo da página/aplicação. Camada mais baixa. |
| `surface/default` | `--midas-surface-default` | `slate/50` `#F8FAFC` | `neutral/900` `#171717` | `slate/900` `#0F172A` | Superfície padrão de containers (cards, painéis) sobre o canvas. |
| `surface/muted` | `--midas-surface-muted` | `neutral/100` `#F5F5F5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Superfície discreta para áreas secundárias, trilhos, fundos de seção e itens desabilitados não interativos. |

### overlay

Tudo que flutua acima da página (dropdown, popover, tooltip, menu). Sempre um nível acima da superfície de origem.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `overlay/border` | `--midas-overlay-border` | `neutral/300` `#D4D4D4` | `neutral/700` `#404040` | `slate/700` `#334155` | Borda de elementos sobrepostos (overlay/surface). |
| `overlay/hover` | `--midas-overlay-hover` | `neutral/100` `#F5F5F5` | `neutral/700` `#404040` | `slate/700` `#334155` | Hover de itens dentro de overlays (ex.: item de menu). |
| `overlay/surface` | `--midas-overlay-surface` | `neutral/50` `#FAFAFA` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Fundo de tudo que flutua acima da página: dropdown, popover, combobox, date picker, tooltip, menus. Sempre um nível acima de surface. |

### content

Texto e ícones: principal, secundário, desabilitado, inverso e link.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `content/disabled` | `--midas-content-disabled` | `neutral/400` `#A1A1A1` | `neutral/600` `#525252` | `slate/600` `#475569` | Texto e ícones de elementos desabilitados (isento de contraste WCAG, nunca como único sinal). |
| `content/inverse` | `--midas-content-inverse` | `neutral/50` `#FAFAFA` | `neutral/900` `#171717` | `neutral/900` `#171717` | Texto sobre superfícies de cor invertida (ex.: sobre action/primary/bg quando não usar action/primary/content). |
| `content/link` | `--midas-content-link` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Links de texto. Família Cyan. |
| `content/primary` | `--midas-content-primary` | `neutral/950` `#0A0A0A` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto e ícones principais. Uso padrão para conteúdo. |
| `content/secondary` | `--midas-content-secondary` | `neutral/600` `#525252` | `neutral/400` `#A1A1A1` | `slate/400` `#94A3B8` | Texto e ícones de apoio: descrições, metadados, placeholders. Contraste ≥ 4,5:1 em todas as superfícies. |

### border

Bordas: limite de controle (default), ênfase (strong) e divisor decorativo (subtle).

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `border/default` | `--midas-border-default` | `neutral/500` `#737373` | `neutral/500` `#737373` | `slate/500` `#64748B` | Limite de controles interativos: inputs, selects, checkbox, radio, switch desligado. Contraste ≥ 3:1 (WCAG 1.4.11). |
| `border/strong` | `--midas-border-strong` | `neutral/600` `#525252` | `neutral/400` `#A1A1A1` | `slate/400` `#94A3B8` | Borda em hover de controles e ênfase. |
| `border/subtle` | `--midas-border-subtle` | `neutral/200` `#E5E5E5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Divisores e contornos decorativos (cards, separadores). Não usar como limite de controle. |

### field

Fundo dos campos de formulário (input, select, textarea, date picker).

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `field/bg` | `--midas-field-bg` | `slate/50` `#F8FAFC` | `neutral/950` `#0A0A0A` | `slate/950` `#020617` | Fundo de campos (input, select, textarea, date picker). |
| `field/bg-hover` | `--midas-field-bg-hover` | `neutral/100` `#F5F5F5` | `neutral/900` `#171717` | `slate/900` `#0F172A` | Fundo de campos em hover. |

### action

Ações: primary (neutra), accent (Cyan), secondary (elevada) e destructive, com hover, pressed e degradês.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `action/accent/bg` | `--midas-action-accent-bg` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Fundo da ação de destaque (Cyan). Contraste com action/accent/content ≥ 5:1. |
| `action/accent/bg-hover` | `--midas-action-accent-bg-hover` | `cyan/800` `#005F78` | `cyan/300` `#53EAFD` | `cyan/300` `#53EAFD` | Hover da ação de destaque. |
| `action/accent/bg-pressed` | `--midas-action-accent-bg-pressed` | `cyan/900` `#104E64` | `cyan/200` `#A2F4FD` | `cyan/200` `#A2F4FD` | Pressed da ação de destaque e fim do degradê accent. |
| `action/accent/content` | `--midas-action-accent-content` | `neutral/50` `#FAFAFA` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre action/accent/bg. |
| `action/accent/gradient-bottom` | `--midas-action-accent-gradient-bottom` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Base do degradê accent. |
| `action/accent/gradient-top` | `--midas-action-accent-gradient-top` | `cyan/700` `#007595` | `cyan/300` `#53EAFD` | `cyan/300` `#53EAFD` | Topo do degradê accent (transição curta, mesma cor). |
| `action/destructive/bg` | `--midas-action-destructive-bg` | `red/600` `#E7000B` | `red/600` `#E7000B` | `red/600` `#E7000B` | Fundo de ações destrutivas (excluir, remover). |
| `action/destructive/bg-hover` | `--midas-action-destructive-bg-hover` | `red/700` `#C10007` | `red/700` `#C10007` | `red/700` `#C10007` | Hover de ação destrutiva. |
| `action/destructive/bg-pressed` | `--midas-action-destructive-bg-pressed` | `red/800` `#9F0712` | `red/800` `#9F0712` | `red/800` `#9F0712` | Pressed de ação destrutiva. |
| `action/destructive/content` | `--midas-action-destructive-content` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto/ícone sobre action/destructive/bg. |
| `action/primary/bg` | `--midas-action-primary-bg` | `neutral/900` `#171717` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Fundo da ação principal (botão primário). |
| `action/primary/bg-hover` | `--midas-action-primary-bg-hover` | `neutral/800` `#262626` | `neutral/200` `#E5E5E5` | `neutral/200` `#E5E5E5` | Hover da ação principal. |
| `action/primary/bg-pressed` | `--midas-action-primary-bg-pressed` | `neutral/700` `#404040` | `neutral/300` `#D4D4D4` | `neutral/300` `#D4D4D4` | Pressed da ação principal. |
| `action/primary/content` | `--midas-action-primary-content` | `neutral/50` `#FAFAFA` | `neutral/900` `#171717` | `neutral/900` `#171717` | Texto/ícone sobre action/primary/bg. |
| `action/primary/gradient-bottom` | `--midas-action-primary-gradient-bottom` | `neutral/900` `#171717` | `neutral/200` `#E5E5E5` | `neutral/200` `#E5E5E5` | Base do degradê neutro. |
| `action/primary/gradient-top` | `--midas-action-primary-gradient-top` | `neutral/700` `#404040` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Topo do degradê neutro (preto suave no claro, branco no escuro). |
| `action/secondary/bg` | `--midas-action-secondary-bg` | `neutral/50` `#FAFAFA` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Fundo da ação secundária: superfície clara e elevada (com action/secondary/border + elevation/control). Nunca #FFF puro. |
| `action/secondary/bg-hover` | `--midas-action-secondary-bg-hover` | `neutral/100` `#F5F5F5` | `neutral/700` `#404040` | `slate/700` `#334155` | Hover da ação secundária. |
| `action/secondary/bg-pressed` | `--midas-action-secondary-bg-pressed` | `neutral/200` `#E5E5E5` | `neutral/600` `#525252` | `slate/600` `#475569` | Pressed da ação secundária. |
| `action/secondary/border` | `--midas-action-secondary-border` | `neutral/200` `#E5E5E5` | `neutral/700` `#404040` | `slate/700` `#334155` | Borda da ação secundária (botão claro/elevado). |
| `action/secondary/content` | `--midas-action-secondary-content` | `neutral/900` `#171717` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto/ícone sobre action/secondary/bg. |

### state

Estados neutros globais de hover e pressed (ghost, itens de lista, tabs, sidebar).

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `state/hover` | `--midas-state-hover` | `neutral/100` `#F5F5F5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Hover neutro global: ghost buttons, itens de lista, tabs, sidebar. |
| `state/pressed` | `--midas-state-pressed` | `neutral/200` `#E5E5E5` | `neutral/700` `#404040` | `slate/700` `#334155` | Pressed/active neutro global. |

### selection

Itens selecionados, na família Cyan.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `selection/bg` | `--midas-selection-bg` | `cyan/50` `#ECFEFF` | `cyan/950` `#053345` | `cyan/950` `#053345` | Fundo de itens selecionados (opções, chips, linhas, menu ativo). Família Cyan. |
| `selection/border` | `--midas-selection-border` | `cyan/600` `#0092B8` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Borda de itens selecionados. Contraste ≥ 3:1. |
| `selection/content` | `--midas-selection-content` | `cyan/700` `#007595` | `cyan/300` `#53EAFD` | `cyan/300` `#53EAFD` | Texto/ícone de itens selecionados sobre selection/bg. |
| `selection/fill` | `--midas-selection-fill` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Preenchimento sólido de seleção (dia selecionado, chip selecionado com ênfase). |
| `selection/on-fill` | `--midas-selection-on-fill` | `neutral/50` `#FAFAFA` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre selection/fill. |

### focus

Foco: anel Cyan e halos translúcidos.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `focus/halo` | `--midas-focus-halo` | `#06B6D447` | `#22D3EE4D` | `#22D3EE4D` | Halo de foco suave (3px, Cyan translúcido) usado pelo effect style focus/ring. |
| `focus/ring` | `--midas-focus-ring` | `cyan/600` `#0092B8` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Cor de foco (Cyan): borda de campos em foco e indicador. Contraste ≥ 3:1 nos 3 temas. |
| `focus/halo-neutral` | `--midas-focus-halo-neutral` | `#0A0A0A17` | `#F8FAFC38` | `#F8FAFC38` | Halo de foco neutro (4px): preto no Light, branco no Dark. Cor medida no effect style focus/ring-neutral. (Valor lido do effect style do Figma, não de uma variável.) |
| `focus/halo-danger` | `--midas-focus-halo-danger` | `#E7000B29` | `#E7000B29` | `#E7000B29` | Halo de foco de erro (4px). Cor medida no effect style focus/ring-danger. (Valor lido do effect style do Figma, não de uma variável.) |

### disabled

Controles desabilitados.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `disabled/bg` | `--midas-disabled-bg` | `neutral/100` `#F5F5F5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Fundo de controles desabilitados. |
| `disabled/border` | `--midas-disabled-border` | `neutral/200` `#E5E5E5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Borda de controles desabilitados. |

### status

Feedback: success, warning, danger e info. Cada status tem subtle, border, content, fill e on-fill.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `status/danger/border` | `--midas-status-danger-border` | `red/200` `#FFC9C9` | `red/800` `#9F0712` | `red/800` `#9F0712` | Borda de containers de erro/perigo. |
| `status/danger/content` | `--midas-status-danger-content` | `red/700` `#C10007` | `red/400` `#FF6467` | `red/400` `#FF6467` | Texto/ícone de erro/perigo sobre surfaces e sobre status/danger/subtle (≥ 4,5:1). |
| `status/danger/fill` | `--midas-status-danger-fill` | `red/600` `#E7000B` | `red/600` `#E7000B` | `red/600` `#E7000B` | Preenchimento sólido de erro/perigo (badge solid, indicador). Não é cor de texto. |
| `status/danger/on-fill` | `--midas-status-danger-on-fill` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto/ícone sobre status/danger/fill. |
| `status/danger/subtle` | `--midas-status-danger-subtle` | `red/50` `#FEF2F2` | `red/950` `#460809` | `red/950` `#460809` | Fundo suave de mensagens de erro/perigo (alerts, badges subtle). |
| `status/info/border` | `--midas-status-info-border` | `blue/200` `#BEDBFF` | `blue/800` `#193CB8` | `blue/800` `#193CB8` | Borda de containers de informação. |
| `status/info/content` | `--midas-status-info-content` | `blue/700` `#1447E6` | `blue/400` `#51A2FF` | `blue/400` `#51A2FF` | Texto/ícone de informação sobre surfaces e sobre status/info/subtle (≥ 4,5:1). |
| `status/info/fill` | `--midas-status-info-fill` | `blue/600` `#155DFC` | `blue/400` `#51A2FF` | `blue/400` `#51A2FF` | Preenchimento sólido de informação (badge solid, indicador). Não é cor de texto. |
| `status/info/on-fill` | `--midas-status-info-on-fill` | `neutral/50` `#FAFAFA` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre status/info/fill. |
| `status/info/subtle` | `--midas-status-info-subtle` | `blue/50` `#EFF6FF` | `blue/950` `#162456` | `blue/950` `#162456` | Fundo suave de mensagens de informação (alerts, badges subtle). |
| `status/success/border` | `--midas-status-success-border` | `green/200` `#B9F8CF` | `green/800` `#016630` | `green/800` `#016630` | Borda de containers de sucesso. |
| `status/success/content` | `--midas-status-success-content` | `green/700` `#008236` | `green/400` `#05DF72` | `green/400` `#05DF72` | Texto/ícone de sucesso sobre surfaces e sobre status/success/subtle (≥ 4,5:1). |
| `status/success/fill` | `--midas-status-success-fill` | `green/700` `#008236` | `green/400` `#05DF72` | `green/400` `#05DF72` | Preenchimento sólido de sucesso (badge solid, indicador). Não é cor de texto. |
| `status/success/on-fill` | `--midas-status-success-on-fill` | `neutral/50` `#FAFAFA` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre status/success/fill. |
| `status/success/subtle` | `--midas-status-success-subtle` | `green/50` `#F0FDF4` | `green/950` `#032E15` | `green/950` `#032E15` | Fundo suave de mensagens de sucesso (alerts, badges subtle). |
| `status/warning/border` | `--midas-status-warning-border` | `amber/200` `#FEE685` | `amber/800` `#973C00` | `amber/800` `#973C00` | Borda de containers de atenção. |
| `status/warning/content` | `--midas-status-warning-content` | `amber/700` `#BB4D00` | `amber/400` `#FFB900` | `amber/400` `#FFB900` | Texto/ícone de atenção sobre surfaces e sobre status/warning/subtle (≥ 4,5:1). |
| `status/warning/fill` | `--midas-status-warning-fill` | `amber/600` `#E17100` | `amber/400` `#FFB900` | `amber/400` `#FFB900` | Preenchimento sólido de atenção (badge solid, indicador). Não é cor de texto. |
| `status/warning/on-fill` | `--midas-status-warning-on-fill` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre status/warning/fill. |
| `status/warning/subtle` | `--midas-status-warning-subtle` | `amber/50` `#FFFBEB` | `amber/950` `#461901` | `amber/950` `#461901` | Fundo suave de mensagens de atenção (alerts, badges subtle). |

### material

Superfícies translúcidas para uso sobre mídia: glass, scrim, tint, on-media, sheen.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `material/glass/bg` | `--midas-material-glass-bg` | `#FAFAFA59` | `#FAFAFA14` | `#F8FAFC14` | Vidro translúcido (neutral/slate 50 com transparência). Usar com material/glass, glass-strong ou liquid. Só sobre imagem, mídia ou gradiente. |
| `material/glass/border` | `--midas-material-glass-border` | `#FAFAFAE5` | `#FAFAFA47` | `#F8FAFC47` | Brilho/borda do vidro (highlight). |
| `material/on-media/bg` | `--midas-material-on-media-bg` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Botão sólido claro sobre mídia (ex.: CTA sobre foto). Fixo nos 3 temas. |
| `material/on-media/bg-content` | `--midas-material-on-media-bg-content` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre material/on-media/bg. |
| `material/on-media/content` | `--midas-material-on-media-content` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Texto/ícone sobre material/scrim e mídia escura. Fixo nos 3 temas. |
| `material/scrim/bg` | `--midas-material-scrim-bg` | `#0A0A0A73` | `#0A0A0A73` | `#02061773` | Superfície escura translúcida sobre mídia (frosted). Igual nos 3 temas porque depende da imagem, não do tema. |
| `material/scrim/border` | `--midas-material-scrim-border` | `#FAFAFA29` | `#FAFAFA29` | `#F8FAFC29` | Borda sutil de superfícies frosted. |
| `material/sheen` | `--midas-material-sheen` | `#FAFAFA2E` | `#FAFAFA59` | `#FAFAFA59` | Brilho de 1px no topo de botões sólidos/degradê (acabamento flat). |
| `material/tint/bg` | `--midas-material-tint-bg` | `#00B8DB47` | `#00D3F238` | `#00D3F238` | Frosted colorido (Cyan translúcido) sobre mídia. Usar com material/frosted. |
| `material/tint/border` | `--midas-material-tint-border` | `#A2F4FD73` | `#53EAFD59` | `#53EAFD59` | Borda/brilho do frosted colorido. |
| `material/glass/surface` | `--midas-material-glass-surface` | `neutral/50` `#FAFAFACC` (80%) | `neutral/950` `#0A0A0AD6` (84%) | `slate/950` `#020617D6` (84%) | Vidro com texto (Card Glass). Contraste de texto ≥ 4,5:1 sobre qualquer imagem. |
| `material/scrim/strong` | `--midas-material-scrim-strong` | `neutral/950` `#0A0A0AB8` (72%) | `neutral/950` `#0A0A0AB8` (72%) | `slate/950` `#020617B8` (72%) | Scrim sob texto em mídia (Card Overlay, tags). |

### brand

Cor de marca (Cyan) para destaques, ilustrações e acentos. Ações usam action/accent.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `brand/content` | `--midas-brand-content` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Texto/ícone na cor de marca (Cyan) sobre superfícies neutras (≥ 4,5:1). |
| `brand/on-primary` | `--midas-brand-on-primary` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | `neutral/950` `#0A0A0A` | Texto/ícone sobre brand/primary. |
| `brand/primary` | `--midas-brand-primary` | `cyan/500` `#00B8DB` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Cor de marca principal (Cyan) para destaques de marca, ilustrações e acentos. Ações usam action/accent. |

### chart

Séries de gráficos (5 cores).

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `chart/1` | `--midas-chart-1` | `cyan/500` `#00B8DB` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Série 1 de gráficos (Cyan, cor de marca). |
| `chart/2` | `--midas-chart-2` | `sky/500` `#00A6F4` | `sky/400` `#00BCFF` | `sky/400` `#00BCFF` | Série 2 de gráficos (Sky, apoio). |
| `chart/3` | `--midas-chart-3` | `violet/500` `#8E51FF` | `violet/400` `#A684FF` | `violet/400` `#A684FF` | Série 3 de gráficos. |
| `chart/4` | `--midas-chart-4` | `emerald/500` `#00BC7D` | `emerald/400` `#00D492` | `emerald/400` `#00D492` | Série 4 de gráficos. |
| `chart/5` | `--midas-chart-5` | `amber/500` `#FE9A00` | `amber/400` `#FFB900` | `amber/400` `#FFB900` | Série 5 de gráficos. |

### progress

Barras de progresso e Stepper.

| Token | Variável CSS | Light | Dark | Dark Blue | Uso |
| --- | --- | --- | --- | --- | --- |
| `progress/track` | `--midas-progress-track` | `neutral/200` `#E5E5E5` | `neutral/800` `#262626` | `slate/800` `#1E293B` | Trilho do Progress e do Stepper. |
| `progress/fill` | `--midas-progress-fill` | `cyan/700` `#007595` | `cyan/400` `#00D3F2` | `cyan/400` `#00D3F2` | Preenchimento do progresso (≥ 3:1 contra o trilho). |
| `progress/gradient-start` | `--midas-progress-gradient-start` | `cyan/400` `#00D3F2` | `cyan/700` `#007595` | `cyan/700` `#007595` | Início do degradê do Progress (Gradient, Glow). (O Figma lista dois valores (Light e Dark); Dark Blue segue o Dark.) |
| `progress/gradient-end` | `--midas-progress-gradient-end` | `cyan/700` `#007595` | `cyan/300` `#53EAFD` | `cyan/300` `#53EAFD` | Fim do degradê do Progress (Gradient, Glow). (O Figma lista dois valores (Light e Dark); Dark Blue segue o Dark.) |
| `progress/glow` | `--midas-progress-glow` | `cyan/500` `#00B8DB73` (45%) | `cyan/400` `#00D3F299` (60%) | `cyan/400` `#00D3F299` (60%) | Brilho do Glow e da etapa atual do Stepper. (O Figma lista dois valores (Light e Dark); Dark Blue segue o Dark.) |
| `progress/shine` | `--midas-progress-shine` | `neutral/50` `#FAFAFA8C` (55%) | `neutral/50` `#FAFAFA99` (60%) | `neutral/50` `#FAFAFA99` (60%) | Faixa do Shimmer. (O Figma indica 55–60%; Light 55%, Dark e Dark Blue 60%.) |
| `progress/tip` | `--midas-progress-tip` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | `neutral/50` `#FAFAFA` | Ponta luminosa do Glow. |

## Primitivos (26 paletas x 11 passos)

Variáveis `--midas-color-<matiz>-<passo>`. Matizes usados nos temas: neutral, slate, cyan, sky, blue, red, amber, green, emerald, violet.

### Neutros

Nove famílias neutras. Neutral e Slate são as usadas nos temas.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `slate` | `#F8FAFC` | `#F1F5F9` | `#E2E8F0` | `#CBD5E1` | `#94A3B8` | `#64748B` | `#475569` | `#334155` | `#1E293B` | `#0F172A` | `#020617` |
| `gray` | `#F9FAFB` | `#F3F4F6` | `#E5E7EB` | `#D1D5DB` | `#9CA3AF` | `#6B7280` | `#4B5563` | `#374151` | `#111827` | `#030712` | `#030712` |
| `zinc` | `#FAFAFA` | `#F4F4F5` | `#E4E4E7` | `#D4D4D8` | `#A1A1AA` | `#71717A` | `#52525B` | `#3F3F46` | `#27272A` | `#18181B` | `#09090B` |
| `neutral` | `#FAFAFA` | `#F5F5F5` | `#E5E5E5` | `#D4D4D4` | `#A1A1A1` | `#737373` | `#525252` | `#404040` | `#262626` | `#171717` | `#0A0A0A` |
| `stone` | `#FAFAF9` | `#F5F5F4` | `#E7E5E4` | `#D6D3D1` | `#A6A09B` | `#79716B` | `#57534D` | `#44403B` | `#292524` | `#1C1917` | `#0C0A09` |
| `taupe` | `#FBFAF9` | `#F3F1F1` | `#E8E4E3` | `#D8D2D0` | `#ABA09C` | `#7C6D67` | `#5B4F4B` | `#473C39` | `#2B2422` | `#1D1816` | `#0C0A09` |
| `mauve` | `#FAFAFA` | `#F3F1F3` | `#E7E4E7` | `#D7D0D7` | `#A89EA9` | `#79697B` | `#594C5B` | `#463947` | `#2A212C` | `#1D161E` | `#0C090C` |
| `mist` | `#F9FBFB` | `#F1F3F3` | `#E3E7E8` | `#D0D6D8` | `#9CA8AB` | `#67787C` | `#4B585B` | `#394447` | `#22292B` | `#161B1D` | `#090B0C` |
| `olive` | `#FBFBF9` | `#F4F4F0` | `#E8E8E3` | `#D8D8D0` | `#ABAB9C` | `#7C7C67` | `#5B5B4B` | `#474739` | `#2B2B22` | `#1D1D16` | `#0C0C09` |

### Frios

Cyan é a marca. Sky apoia os gráficos. Blue é informação.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `cyan` | `#ECFEFF` | `#CEFAFE` | `#A2F4FD` | `#53EAFD` | `#00D3F2` | `#00B8DB` | `#0092B8` | `#007595` | `#005F78` | `#104E64` | `#053345` |
| `sky` | `#F0F9FF` | `#DFF2FE` | `#B8E6FE` | `#74D4FF` | `#00BCFF` | `#00A6F4` | `#0084D1` | `#0069A8` | `#00598A` | `#024A70` | `#052F4A` |
| `blue` | `#EFF6FF` | `#DBEAFE` | `#BEDBFF` | `#8EC5FF` | `#51A2FF` | `#2B7FFF` | `#155DFC` | `#1447E6` | `#193CB8` | `#1C398E` | `#162456` |
| `indigo` | `#EEF2FF` | `#E0E7FF` | `#C6D2FF` | `#A3B3FF` | `#7C86FF` | `#615FFF` | `#4F39F6` | `#432DD7` | `#372AAC` | `#312C85` | `#1E1A4D` |
| `violet` | `#F5F3FF` | `#EDE9FE` | `#DDD6FF` | `#C4B4FF` | `#A684FF` | `#8E51FF` | `#7F22FE` | `#7008E7` | `#5D0EC0` | `#4D179A` | `#2F0D68` |

### Quentes

Red é perigo; Amber é atenção.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `red` | `#FEF2F2` | `#FFE2E2` | `#FFC9C9` | `#FFA2A2` | `#FF6467` | `#FB2C36` | `#E7000B` | `#C10007` | `#9F0712` | `#82181A` | `#460809` |
| `orange` | `#FFF7ED` | `#FFEDD4` | `#FFD6A7` | `#FFB86A` | `#FF8904` | `#FF6900` | `#F54900` | `#CA3500` | `#9F2D00` | `#7E2A0C` | `#441306` |
| `amber` | `#FFFBEB` | `#FEF3C6` | `#FEE685` | `#FFD230` | `#FFB900` | `#FE9A00` | `#E17100` | `#BB4D00` | `#973C00` | `#7B3306` | `#461901` |
| `yellow` | `#FEFCE8` | `#FEF9C2` | `#FFF085` | `#FFDF20` | `#FDC700` | `#F0B100` | `#D08700` | `#A65F00` | `#894B00` | `#733E0A` | `#432004` |

### Verdes

Green é sucesso.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `lime` | `#F7FEE7` | `#ECFCCA` | `#D8F999` | `#BBF451` | `#9AE600` | `#7CCF00` | `#5EA500` | `#497D00` | `#3C6300` | `#35530E` | `#192E03` |
| `green` | `#F0FDF4` | `#DCFCE7` | `#B9F8CF` | `#7BF1A8` | `#05DF72` | `#00C950` | `#00A63E` | `#008236` | `#016630` | `#0D542B` | `#032E15` |
| `emerald` | `#ECFDF5` | `#D0FAE5` | `#A4F4CF` | `#5EE9B5` | `#00D492` | `#00BC7D` | `#009966` | `#007A55` | `#006045` | `#004F3B` | `#002C22` |
| `teal` | `#F0FDFA` | `#CBFBF1` | `#96F7E4` | `#46ECD5` | `#00D5BE` | `#00BBA7` | `#009689` | `#00786F` | `#005F5A` | `#0B4F4A` | `#022F2E` |

### Acentos

Complementam o catálogo de 26 famílias.

| Matiz | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| `purple` | `#FAF5FF` | `#F3E8FF` | `#E9D4FF` | `#DAB2FF` | `#C27AFF` | `#AD46FF` | `#9810FA` | `#8200DB` | `#6E11B0` | `#59168B` | `#3C0366` |
| `fuchsia` | `#FDF4FF` | `#FAE8FF` | `#F6CFFF` | `#F4A8FF` | `#ED6AFF` | `#E12AFB` | `#C800DE` | `#A800B7` | `#8A0194` | `#721378` | `#4B004F` |
| `pink` | `#FDF2F8` | `#FCE7F3` | `#FCCEE8` | `#FDA5D5` | `#FB64B6` | `#F6339A` | `#E60076` | `#C6005C` | `#A3004C` | `#861043` | `#510424` |
| `rose` | `#FFF1F2` | `#FFE4E6` | `#FFCCD3` | `#FFA1AD` | `#FF637E` | `#FF2056` | `#EC003F` | `#C70036` | `#A50036` | `#8B0836` | `#4D0218` |

## Gradientes (26 famílias, 47 estilos)

No Figma, edite o fill e os stops. No código, use background-image com os HEX e posições documentados. Verifique o contraste em toda a transição antes de sobrepor texto; gradientes não substituem os tokens semânticos de cores sólidas. Cada família tem o estilo base (passos 50 a 400) e, em várias, as variantes mid e deep (passos mais escuros). Todos lineares a 90° (horizontal).

| Token Figma | Variável CSS | Stops | CSS |
| --- | --- | --- | --- |
| `gradient/slate/linear` | `--midas-gradient-slate` | slate/50 #F8FAFC → slate/400 #94A3B8 | `linear-gradient(90deg, #F8FAFC 0%, #94A3B8 100%)` |
| `gradient/gray/linear` | `--midas-gradient-gray` | gray/50 #F9FAFB → gray/400 #9CA3AF | `linear-gradient(90deg, #F9FAFB 0%, #9CA3AF 100%)` |
| `gradient/zinc/linear` | `--midas-gradient-zinc` | zinc/50 #FAFAFA → zinc/400 #A1A1AA | `linear-gradient(90deg, #FAFAFA 0%, #A1A1AA 100%)` |
| `gradient/neutral/linear` | `--midas-gradient-neutral` | neutral/50 #FAFAFA → neutral/400 #A1A1A1 | `linear-gradient(90deg, #FAFAFA 0%, #A1A1A1 100%)` |
| `gradient/stone/linear` | `--midas-gradient-stone` | stone/50 #FAFAF9 → stone/400 #A6A09B | `linear-gradient(90deg, #FAFAF9 0%, #A6A09B 100%)` |
| `gradient/taupe/linear` | `--midas-gradient-taupe` | taupe/50 #FBFAF9 → taupe/400 #ABA09C | `linear-gradient(90deg, #FBFAF9 0%, #ABA09C 100%)` |
| `gradient/mauve/linear` | `--midas-gradient-mauve` | mauve/50 #FAFAFA → mauve/400 #A89EA9 | `linear-gradient(90deg, #FAFAFA 0%, #A89EA9 100%)` |
| `gradient/mist/linear` | `--midas-gradient-mist` | mist/50 #F9FBFB → mist/400 #9CA8AB | `linear-gradient(90deg, #F9FBFB 0%, #9CA8AB 100%)` |
| `gradient/olive/linear` | `--midas-gradient-olive` | olive/50 #FBFBF9 → olive/400 #ABAB9C | `linear-gradient(90deg, #FBFBF9 0%, #ABAB9C 100%)` |
| `gradient/slate/linear-mid` | `--midas-gradient-slate-mid` | slate/100 #F1F5F9 → slate/500 #64748B | `linear-gradient(90deg, #F1F5F9 0%, #64748B 100%)` |
| `gradient/slate/linear-deep` | `--midas-gradient-slate-deep` | slate/200 #E2E8F0 → slate/700 #334155 | `linear-gradient(90deg, #E2E8F0 0%, #334155 100%)` |
| `gradient/gray/linear-mid` | `--midas-gradient-gray-mid` | gray/100 #F3F4F6 → gray/500 #6B7280 | `linear-gradient(90deg, #F3F4F6 0%, #6B7280 100%)` |
| `gradient/stone/linear-mid` | `--midas-gradient-stone-mid` | stone/200 #E7E5E4 → stone/600 #57534D | `linear-gradient(90deg, #E7E5E4 0%, #57534D 100%)` |
| `gradient/zinc/linear-deep` | `--midas-gradient-zinc-deep` | zinc/300 #D4D4D8 → zinc/700 #3F3F46 | `linear-gradient(90deg, #D4D4D8 0%, #3F3F46 100%)` |
| `gradient/cyan/linear` | `--midas-gradient-cyan` | cyan/50 #ECFEFF → cyan/400 #00D3F2 | `linear-gradient(90deg, #ECFEFF 0%, #00D3F2 100%)` |
| `gradient/sky/linear` | `--midas-gradient-sky` | sky/50 #F0F9FF → sky/400 #00BCFF | `linear-gradient(90deg, #F0F9FF 0%, #00BCFF 100%)` |
| `gradient/blue/linear` | `--midas-gradient-blue` | blue/50 #EFF6FF → blue/400 #51A2FF | `linear-gradient(90deg, #EFF6FF 0%, #51A2FF 100%)` |
| `gradient/indigo/linear` | `--midas-gradient-indigo` | indigo/50 #EEF2FF → indigo/400 #7C86FF | `linear-gradient(90deg, #EEF2FF 0%, #7C86FF 100%)` |
| `gradient/violet/linear` | `--midas-gradient-violet` | violet/50 #F5F3FF → violet/400 #A684FF | `linear-gradient(90deg, #F5F3FF 0%, #A684FF 100%)` |
| `gradient/cyan/linear-mid` | `--midas-gradient-cyan-mid` | cyan/200 #A2F4FD → cyan/600 #0092B8 | `linear-gradient(90deg, #A2F4FD 0%, #0092B8 100%)` |
| `gradient/sky/linear-mid` | `--midas-gradient-sky-mid` | sky/100 #DFF2FE → sky/500 #00A6F4 | `linear-gradient(90deg, #DFF2FE 0%, #00A6F4 100%)` |
| `gradient/blue/linear-deep` | `--midas-gradient-blue-deep` | blue/200 #BEDBFF → blue/700 #1447E6 | `linear-gradient(90deg, #BEDBFF 0%, #1447E6 100%)` |
| `gradient/indigo/linear-mid` | `--midas-gradient-indigo-mid` | indigo/100 #E0E7FF → indigo/500 #615FFF | `linear-gradient(90deg, #E0E7FF 0%, #615FFF 100%)` |
| `gradient/violet/linear-deep` | `--midas-gradient-violet-deep` | violet/200 #DDD6FF → violet/600 #7F22FE | `linear-gradient(90deg, #DDD6FF 0%, #7F22FE 100%)` |
| `gradient/red/linear` | `--midas-gradient-red` | red/50 #FEF2F2 → red/400 #FF6467 | `linear-gradient(90deg, #FEF2F2 0%, #FF6467 100%)` |
| `gradient/orange/linear` | `--midas-gradient-orange` | orange/50 #FFF7ED → orange/400 #FF8904 | `linear-gradient(90deg, #FFF7ED 0%, #FF8904 100%)` |
| `gradient/amber/linear` | `--midas-gradient-amber` | amber/50 #FFFBEB → amber/400 #FFB900 | `linear-gradient(90deg, #FFFBEB 0%, #FFB900 100%)` |
| `gradient/yellow/linear` | `--midas-gradient-yellow` | yellow/50 #FEFCE8 → yellow/400 #FDC700 | `linear-gradient(90deg, #FEFCE8 0%, #FDC700 100%)` |
| `gradient/lime/linear` | `--midas-gradient-lime` | lime/50 #F7FEE7 → lime/400 #9AE600 | `linear-gradient(90deg, #F7FEE7 0%, #9AE600 100%)` |
| `gradient/green/linear` | `--midas-gradient-green` | green/50 #F0FDF4 → green/400 #05DF72 | `linear-gradient(90deg, #F0FDF4 0%, #05DF72 100%)` |
| `gradient/emerald/linear` | `--midas-gradient-emerald` | emerald/50 #ECFDF5 → emerald/400 #00D492 | `linear-gradient(90deg, #ECFDF5 0%, #00D492 100%)` |
| `gradient/teal/linear` | `--midas-gradient-teal` | teal/50 #F0FDFA → teal/400 #00D5BE | `linear-gradient(90deg, #F0FDFA 0%, #00D5BE 100%)` |
| `gradient/red/linear-mid` | `--midas-gradient-red-mid` | red/100 #FFE2E2 → red/500 #FB2C36 | `linear-gradient(90deg, #FFE2E2 0%, #FB2C36 100%)` |
| `gradient/orange/linear-deep` | `--midas-gradient-orange-deep` | orange/200 #FFD6A7 → orange/600 #F54900 | `linear-gradient(90deg, #FFD6A7 0%, #F54900 100%)` |
| `gradient/amber/linear-mid` | `--midas-gradient-amber-mid` | amber/100 #FEF3C6 → amber/500 #FE9A00 | `linear-gradient(90deg, #FEF3C6 0%, #FE9A00 100%)` |
| `gradient/yellow/linear-deep` | `--midas-gradient-yellow-deep` | yellow/200 #FFF085 → yellow/600 #D08700 | `linear-gradient(90deg, #FFF085 0%, #D08700 100%)` |
| `gradient/green/linear-mid` | `--midas-gradient-green-mid` | green/100 #DCFCE7 → green/500 #00C950 | `linear-gradient(90deg, #DCFCE7 0%, #00C950 100%)` |
| `gradient/emerald/linear-deep` | `--midas-gradient-emerald-deep` | emerald/200 #A4F4CF → emerald/600 #009966 | `linear-gradient(90deg, #A4F4CF 0%, #009966 100%)` |
| `gradient/teal/linear-mid` | `--midas-gradient-teal-mid` | teal/100 #CBFBF1 → teal/500 #00BBA7 | `linear-gradient(90deg, #CBFBF1 0%, #00BBA7 100%)` |
| `gradient/purple/linear` | `--midas-gradient-purple` | purple/50 #FAF5FF → purple/400 #C27AFF | `linear-gradient(90deg, #FAF5FF 0%, #C27AFF 100%)` |
| `gradient/fuchsia/linear` | `--midas-gradient-fuchsia` | fuchsia/50 #FDF4FF → fuchsia/400 #ED6AFF | `linear-gradient(90deg, #FDF4FF 0%, #ED6AFF 100%)` |
| `gradient/pink/linear` | `--midas-gradient-pink` | pink/50 #FDF2F8 → pink/400 #FB64B6 | `linear-gradient(90deg, #FDF2F8 0%, #FB64B6 100%)` |
| `gradient/rose/linear` | `--midas-gradient-rose` | rose/50 #FFF1F2 → rose/400 #FF637E | `linear-gradient(90deg, #FFF1F2 0%, #FF637E 100%)` |
| `gradient/purple/linear-mid` | `--midas-gradient-purple-mid` | purple/100 #F3E8FF → purple/500 #AD46FF | `linear-gradient(90deg, #F3E8FF 0%, #AD46FF 100%)` |
| `gradient/fuchsia/linear-deep` | `--midas-gradient-fuchsia-deep` | fuchsia/200 #F6CFFF → fuchsia/600 #C800DE | `linear-gradient(90deg, #F6CFFF 0%, #C800DE 100%)` |
| `gradient/pink/linear-mid` | `--midas-gradient-pink-mid` | pink/100 #FCE7F3 → pink/500 #F6339A | `linear-gradient(90deg, #FCE7F3 0%, #F6339A 100%)` |
| `gradient/rose/linear-deep` | `--midas-gradient-rose-deep` | rose/200 #FFCCD3 → rose/600 #EC003F | `linear-gradient(90deg, #FFCCD3 0%, #EC003F 100%)` |

### Direções

| Direção | CSS |
| --- | --- |
| Horizontal | `linear-gradient(90deg, #00D3F2 0%, #51A2FF 100%)` |
| Vertical | `linear-gradient(180deg, #F0F9FF 0%, #00BCFF 100%)` |
| Diagonal | `linear-gradient(135deg, #7C86FF 0%, #FF637E 100%)` |
| Radial | `radial-gradient(circle at 50% 50%, #F5F3FF 0%, #A684FF 100%)` |

No CSS, 90° aponta à direita, 180° para baixo e 135° na diagonal.

## Contraste (WCAG 2.2)

Mínimo de 4,5:1 para texto e 3:1 para limites de controle, foco e indicadores. 62 pares x 3 temas. No topo do degradê accent do Light (cyan/600) o texto fica em 3,47:1: por isso o degradê é curto e o texto se apoia na base cyan/700 (5,06:1). Para textos longos use o Accent sólido.

| Primeiro plano | Fundo | Mínimo | Light | Dark | Dark Blue |
| --- | --- | --- | --- | --- | --- |
| `content/primary` | `surface/canvas` | 4.5:1 | ok 18.92 | ok 18.97 | ok 19.33 |
| `content/primary` | `surface/default` | 4.5:1 | ok 18.92 | ok 17.18 | ok 17.10 |
| `content/primary` | `overlay/surface` | 4.5:1 | ok 18.97 | ok 14.50 | ok 14.02 |
| `content/primary` | `surface/muted` | 4.5:1 | ok 18.16 | ok 14.50 | ok 14.02 |
| `content/secondary` | `surface/canvas` | 4.5:1 | ok 7.47 | ok 7.66 | ok 7.87 |
| `content/secondary` | `surface/default` | 4.5:1 | ok 7.47 | ok 6.94 | ok 6.96 |
| `content/secondary` | `surface/muted` | 4.5:1 | ok 7.17 | ok 5.86 | ok 5.71 |
| `content/secondary` | `overlay/surface` | 4.5:1 | ok 7.49 | ok 5.86 | ok 5.71 |
| `content/link` | `surface/canvas` | 4.5:1 | ok 5.04 | ok 10.94 | ok 11.14 |
| `content/link` | `surface/default` | 4.5:1 | ok 5.04 | ok 9.90 | ok 9.86 |
| `border/default` | `surface/canvas` | 3:1 | ok 4.53 | ok 4.18 | ok 4.24 |
| `border/default` | `surface/default` | 3:1 | ok 4.53 | ok 3.78 | ok 3.75 |
| `border/default` | `field/bg-hover` | 3:1 | ok 4.35 | ok 3.78 | ok 3.75 |
| `border/strong` | `field/bg-hover` | 3:1 | ok 7.17 | ok 6.94 | ok 6.96 |
| `focus/ring` | `surface/canvas` | 3:1 | ok 3.46 | ok 10.94 | ok 11.14 |
| `focus/ring` | `surface/default` | 3:1 | ok 3.46 | ok 9.90 | ok 9.86 |
| `focus/ring` | `overlay/surface` | 3:1 | ok 3.47 | ok 8.36 | ok 8.08 |
| `action/primary/content` | `action/primary/bg` | 4.5:1 | ok 17.18 | ok 17.18 | ok 17.18 |
| `action/primary/content` | `action/primary/bg-hover` | 4.5:1 | ok 14.50 | ok 14.23 | ok 14.23 |
| `action/primary/content` | `action/primary/bg-pressed` | 4.5:1 | ok 9.93 | ok 12.09 | ok 12.09 |
| `action/accent/content` | `action/accent/bg` | 4.5:1 | ok 5.06 | ok 10.94 | ok 10.94 |
| `action/accent/content` | `action/accent/bg-hover` | 4.5:1 | ok 6.92 | ok 13.72 | ok 13.72 |
| `action/accent/content` | `action/accent/bg-pressed` | 4.5:1 | ok 8.76 | ok 15.93 | ok 15.93 |
| `action/secondary/content` | `action/secondary/bg` | 4.5:1 | ok 17.18 | ok 14.50 | ok 14.02 |
| `action/secondary/content` | `action/secondary/bg-pressed` | 4.5:1 | ok 14.23 | ok 7.49 | ok 7.26 |
| `action/destructive/content` | `action/destructive/bg` | 4.5:1 | ok 4.57 | ok 4.57 | ok 4.57 |
| `action/destructive/content` | `action/destructive/bg-pressed` | 4.5:1 | ok 8.01 | ok 8.01 | ok 8.01 |
| `content/primary` | `state/hover` | 4.5:1 | ok 18.16 | ok 14.50 | ok 14.02 |
| `content/primary` | `state/pressed` | 4.5:1 | ok 15.72 | ok 9.93 | ok 9.92 |
| `content/primary` | `overlay/hover` | 4.5:1 | ok 18.16 | ok 9.93 | ok 9.92 |
| `selection/content` | `selection/bg` | 4.5:1 | ok 5.07 | ok 9.30 | ok 9.30 |
| `selection/border` | `surface/canvas` | 3:1 | ok 3.46 | ok 10.94 | ok 11.14 |
| `selection/on-fill` | `selection/fill` | 4.5:1 | ok 5.06 | ok 10.94 | ok 10.94 |
| `status/success/content` | `status/success/subtle` | 4.5:1 | ok 4.72 | ok 8.40 | ok 8.40 |
| `status/success/content` | `surface/canvas` | 4.5:1 | ok 4.73 | ok 11.13 | ok 11.34 |
| `status/success/on-fill` | `status/success/fill` | 4.5:1 | ok 4.74 | ok 11.13 | ok 11.13 |
| `status/warning/content` | `status/warning/subtle` | 4.5:1 | ok 4.85 | ok 8.71 | ok 8.71 |
| `status/warning/content` | `surface/canvas` | 4.5:1 | ok 4.81 | ok 11.49 | ok 11.71 |
| `status/warning/on-fill` | `status/warning/fill` | 4.5:1 | ok 6.19 | ok 11.49 | ok 11.49 |
| `status/info/content` | `status/info/subtle` | 4.5:1 | ok 6.28 | ok 5.60 | ok 5.60 |
| `status/info/content` | `surface/canvas` | 4.5:1 | ok 6.53 | ok 7.51 | ok 7.65 |
| `status/info/on-fill` | `status/info/fill` | 4.5:1 | ok 5.03 | ok 7.51 | ok 7.51 |
| `status/danger/content` | `status/danger/subtle` | 4.5:1 | ok 5.87 | ok 5.60 | ok 5.60 |
| `status/danger/content` | `surface/canvas` | 4.5:1 | ok 6.14 | ok 6.85 | ok 6.98 |
| `status/danger/on-fill` | `status/danger/fill` | 4.5:1 | ok 4.57 | ok 4.57 | ok 4.57 |
| `brand/on-primary` | `brand/primary` | 4.5:1 | ok 8.37 | ok 10.94 | ok 10.94 |
| `brand/content` | `surface/canvas` | 4.5:1 | ok 5.04 | ok 10.94 | ok 11.14 |
| `status/success/fill` | `surface/canvas` | 3:1 | ok 4.73 | ok 11.13 | ok 11.34 |
| `status/danger/fill` | `surface/canvas` | 3:1 | ok 4.56 | ok 4.15 | ok 4.23 |
| `status/warning/fill` | `surface/canvas` | 3:1 | ok 3.06 | ok 11.49 | ok 11.71 |
| `status/info/fill` | `surface/canvas` | 3:1 | ok 5.01 | ok 7.51 | ok 7.65 |
| `border/default` | `overlay/surface` | 3:1 | ok 4.54 | ok 3.19 | ok 3.07 |
| `border/default` | `surface/muted` | 3:1 | ok 4.35 | ok 3.19 | ok 3.07 |
| `selection/border` | `surface/default` | 3:1 | ok 3.46 | ok 9.90 | ok 9.86 |
| `selection/border` | `overlay/surface` | 3:1 | ok 3.47 | ok 8.36 | ok 8.08 |
| `content/link` | `overlay/surface` | 4.5:1 | ok 5.06 | ok 8.36 | ok 8.08 |
| `selection/content` | `surface/canvas` | 4.5:1 | ok 5.04 | ok 13.72 | ok 13.98 |
| `status/danger/content` | `overlay/surface` | 4.5:1 | ok 6.15 | ok 5.24 | ok 5.06 |
| `content/secondary` | `state/hover` | 4.5:1 | ok 7.17 | ok 5.86 | ok 5.71 |
| `content/secondary` | `selection/bg` | 4.5:1 | ok 7.51 | ok 5.19 | ok 5.23 |
| `focus/ring` | `surface/muted` | 3:1 | ok 3.32 | ok 8.36 | ok 8.08 |
| `action/accent/content` | `action/accent/gradient-top` | 4.5:1 | ok 5.09 | ok 13.72 | ok 13.72 |