acai-ui 1.65.5

package/dist/scss/_scrollbar.scss

@@ -0,0 +1,78 @@
+// Açaí UI — Barra de rolagem
+//
+// O `<acai-ui-drawer>` sempre teve um polegar fino, arredondado e discreto,
+// porque a lista dele roda num `<q-scroll-area>` (barra desenhada pelo Quasar
+// em JS). O resto da aplicação ficava com a barra CRUA do sistema — cinza,
+// quadrada e larga — e a diferença saltava aos olhos ao lado do menu.
+//
+// Isto reproduz aquele mesmo desenho na barra NATIVA, então vale pra qualquer
+// coisa que role: página, tabela, modal, textarea, painel. Sem trocar nada por
+// `<q-scroll-area>` — que é componente, custa JS e quebra rolagem por teclado
+// em alguns casos.
+//
+// O truque do desenho fino: a barra ocupa 10px (alvo confortável pro ponteiro),
+// mas o polegar recebe uma borda TRANSPARENTE de 3px e `background-clip:
+// content-box`. Sobram 4px pintados — a mesma espessura do polegar do drawer —
+// com 3px de respiro dos dois lados.
+//
+// As cores saem de `--acai-scroll-*` (definidas em `_themes.scss`), então
+// acompanham claro/escuro/daltônico/alto contraste sozinhas. Qualquer superfície
+// escura pode retingir localmente:
+//
+//   .minha-area-escura { --acai-scroll-thumb: rgba(255, 255, 255, 0.28); }
+
+// 🔴 SÓ PARA PONTEIRO FINO (mouse, trackpad, caneta). Em tela de toque, NADA
+// daqui vale — e isso não é preferência, é correção de bug.
+//
+// Declarar `::-webkit-scrollbar` com dimensão explícita faz o Chrome e o Safari
+// DESLIGAREM a barra overlay do celular e desenharem a clássica no lugar: sempre
+// visível e ocupando espaço de layout. Medido em 390px, na tabela da própria
+// documentação: `.q-table__middle` ficava com 10px a menos de altura útil
+// (`offsetHeight - clientHeight === 10`) permanentemente, só pra desenhar a
+// barra. Numa tabela que já rola de lado no celular, são 10px roubados de cada
+// linha, em todo app que consome a lib.
+//
+// O desenho abaixo foi pensado para ponteiro e o próprio texto original dizia
+// isso — "alvo confortável pro ponteiro" e "revela no hover". Nenhuma das duas
+// coisas existe em tela de toque: não há alvo a mirar (rola-se com o dedo, no
+// conteúdo) e não há hover. O comportamento nativo do aparelho — overlay que
+// aparece durante a rolagem e some depois — é melhor do que qualquer coisa que
+// se desenhe aqui.
+//
+// ⚠️ O que NÃO se resolve aqui: a rolagem em si. Uma tabela de 598px numa tela
+// de 278px precisa rolar; esconder isso esconderia dados. O que sai é a BARRA
+// ocupando espaço fixo, não a capacidade de rolar.
+@media (pointer: fine) {
+  // Firefox — não tem pseudo-elementos de barra, só estas duas propriedades.
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--acai-scroll-thumb) transparent;
+  }
+
+  // WebKit/Blink (Chrome, Edge, Safari).
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  // Trilho transparente: quem dá o fundo é a superfície que rola. Um trilho
+  // pintado desenharia uma faixa cinza permanente na borda de todo painel.
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--acai-scroll-thumb);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 999px;
+  }
+
+  // Reforça ao passar o ponteiro pela área que rola — mesma ideia do drawer, que
+  // revela o polegar no hover. Aqui ele não some por completo: numa aplicação
+  // inteira, barra invisível esconde que existe mais conteúdo abaixo.
+  *:hover::-webkit-scrollbar-thumb {
+    background-color: var(--acai-scroll-thumb-hover);
+  }
+}

package/dist/scss/_spacing.scss

@@ -0,0 +1,15 @@
+// Açaí UI — Spacing Tokens
+
+$spacing-2xs: 2px;
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-2xl: 40px;
+$spacing-3xl: 48px;
+$spacing-4xl: 56px;
+$spacing-5xl: 64px;
+
+$max-width-container: 1440px;
+$breakpoint-mobile: 599px;

package/dist/scss/_themes.scss

@@ -0,0 +1,493 @@
+// Açaí UI — Camada de tema (runtime)
+//
+// Aqui vive a paleta de SUPERFÍCIE em CSS custom properties (`--acai-*`). Os
+// componentes consomem `var(--acai-x, <fallback claro>)` — no tema CLARO o valor
+// é idêntico ao hex de hoje (nada muda), e sob `.body--dark` os mesmos tokens são
+// redefinidos, retingindo todas as superfícies próprias da lib de uma vez.
+//
+// Dark mode = Quasar `Dark.set()` (via `usePreferencias`) liga `body.body--dark`,
+// que já escurece os componentes NATIVOS do Quasar (q-input, q-select, q-menu,
+// q-table, q-dialog…). Esta camada cuida das superfícies CUSTOMIZADAS da lib
+// (drawer navy, container, cards, tabelas, banner, painel de preferências…).
+//
+// Este arquivo é importado por `tokens.scss`, que o consumidor puxa via
+// `additionalData` → o bloco `:root`/`.body--dark` chega ao app. Os fallbacks
+// mantêm o tema claro correto mesmo sem esta folha carregada.
+//
+// Os 3 eixos das Preferências vivem aqui:
+//   • Tema escuro    → `.body--dark` (Quasar `Dark.set()`)
+//   • Daltônico      → `html[data-acai-daltonismo='<tipo>']` (paleta por tipo de CVD)
+//   • Alto contraste → `html[data-acai-contraste]` (bordas/textos/foco reforçados)
+// Como daltônico/contraste vão em `<html>` e o dark em `<body>`, as combinações
+// (dark+daltônico, dark+contraste) têm blocos próprios pra vencer a proximidade
+// do `.body--dark` (custom property resolve pelo ancestral mais próximo).
+
+// ---- Banner no daltônico ----
+// Gera os 8 tokens --acai-status-* a partir das 4 cores CVD do tipo. Mapa do banner:
+// info→q-info, warning→q-warning, error→q-negative, success→q-positive. Só é usado
+// nos blocos daltônicos (add-only): normal e dark-normal ficam intactos.
+// Claro = pastel (mix c/ branco) + texto escuro (mix c/ preto). Igual ao par 50/900 de origem.
+@mixin banner-cvd-light($info, $warning, $error, $success) {
+  --acai-status-info-bg: #{mix($info, #fff, 12%)};
+  --acai-status-info-fg: #{mix($info, #000, 50%)};
+  --acai-status-warning-bg: #{mix($warning, #fff, 15%)};
+  --acai-status-warning-fg: #{mix($warning, #000, 58%)};
+  --acai-status-error-bg: #{mix($error, #fff, 12%)};
+  --acai-status-error-fg: #{mix($error, #000, 50%)};
+  --acai-status-success-bg: #{mix($success, #fff, 12%)};
+  --acai-status-success-fg: #{mix($success, #000, 50%)};
+}
+// Escuro = fundo translúcido da cor + texto claro (mix c/ branco). Igual ao dark de origem.
+@mixin banner-cvd-dark($info, $warning, $error, $success) {
+  --acai-status-info-bg: #{rgba($info, 0.16)};
+  --acai-status-info-fg: #{mix($info, #fff, 25%)};
+  --acai-status-warning-bg: #{rgba($warning, 0.16)};
+  --acai-status-warning-fg: #{mix($warning, #fff, 25%)};
+  --acai-status-error-bg: #{rgba($error, 0.18)};
+  --acai-status-error-fg: #{mix($error, #fff, 25%)};
+  --acai-status-success-bg: #{rgba($success, 0.16)};
+  --acai-status-success-fg: #{mix($success, #fff, 25%)};
+}
+
+// ---- Paleta CATEGÓRICA de gráfico ----
+// Define os 5 slots de série + "Outros" de uma vez. Usado no bloco normal, no
+// escuro e nos 8 blocos de daltonismo (4 claros + 4 escuros).
+//
+// Por que 5 e não 6: o `accent` é a única cor de marca SEM rampa (só #9c27b0 /
+// #8420a0 / #6c1a83, os três escuros) — no tema escuro não há tom claro pra
+// subir, e pegar emprestado da rampa `primary` colidiria com o slot 3, que já é
+// violeta. 5 séries também é o teto do que se distingue num gráfico. Da 6ª em
+// diante o componente agrupa em "Outros". Precisando de 6, o certo é criar a
+// rampa `$color-purple-*` completa — não um hex avulso.
+//
+// ORDEM IMPORTA: pares ADJACENTES (1-2, 2-3, 3-4, 4-5) são os que precisam se
+// distinguir, porque é assim que barra agrupada e legenda encostam as cores.
+// Espelho em TS: `src/constants/chart-paleta.ts` (usado por teste e por render
+// headless pra PDF). Um spec falha se os dois divergirem.
+@mixin chart-categorica($c1, $c2, $c3, $c4, $c5, $outros) {
+  --acai-chart-1: #{$c1};
+  --acai-chart-2: #{$c2};
+  --acai-chart-3: #{$c3};
+  --acai-chart-4: #{$c4};
+  --acai-chart-5: #{$c5};
+  --acai-chart-other: #{$outros};
+}
+
+:root {
+  // Brand: fixa a paleta de STATUS da lib mesmo em consumidor com quasar.variables
+  // próprio — assim chip/badge/botão `color="…"` E os componentes que consomem
+  // `var(--q-status)` (stepper, dialog, confirm, validation, error-log) ficam todos
+  // na paleta DETRAN. São o ANCORADOURO do modo daltônico: os blocos
+  // `html[data-acai-daltonismo='…']` (seletor mais específico) sobrescrevem estes,
+  // recolorindo tudo de uma vez. No modo normal resolvem pro valor SCSS de origem
+  // (byte-idêntico ao que era cor crua).
+  // NÃO fixamos --q-primary de propósito: primary é o brand do CONSUMIDOR (não é
+  // recolorido pelo daltônico); quem usa `var(--q-primary, #{$primary})` segue a
+  // marca do app e cai na navy da lib só como fallback.
+  --q-positive: #{$positive};
+  --q-negative: #{$negative};
+  --q-info: #{$info};
+  --q-warning: #{$warning};
+  --q-accent: #{$accent};
+
+  // — Marca (primary) — fonte da navy dos usos INTERATIVOS (control-on: stepper-dot,
+  // foco, switch, tab ativa; + tooltip). No daltônico só ESTES recolorem (sobrescreve
+  // --acai-primary). Superfícies ESTRUTURAIS (drawer, títulos, header de tabela,
+  // hover-text) ficam navy fixo de propósito — são marca, não recoloram (decisão
+  // "só interativo", 2026-07). No claro/normal resolve pra navy (byte-idêntico).
+  --acai-primary: #{$primary};
+
+  // — Superfícies —
+  --acai-page-bg: #{$bg-conteudo}; // fundo da área de conteúdo (atrás dos cards)
+  --acai-surface: #{$color-white-100}; // cards, modais, menus, painéis
+  --acai-surface-2: #f6f8fc; // superfície levemente elevada (segmented, hover claro)
+  --acai-surface-hover: #{$color-gray-50}; // hover em superfície clara (#f2f2f2)
+  --acai-elevated: #{$color-white-100}; // chip/segmento ATIVO (mais alto que a superfície)
+  --acai-control-on: var(--acai-primary); // trilho "ligado" de switches
+  --acai-row-odd: #{$color-gray-400}; // zebra da tabela — ímpar (#f9f9f9)
+  --acai-row-even: #{$color-gray-100}; // zebra da tabela — par (#f3f3f3)
+
+  // — Bordas —
+  --acai-border: #{$color-gray-300}; // borda padrão (#e0e0e0)
+  --acai-border-subtle: #e4e8f1; // bordas finas do painel/cards
+
+  // — Texto —
+  --acai-heading: #{$primary}; // títulos navy (estrutural — não recolore no daltônico)
+  --acai-text: #{$color-gray-800}; // texto de corpo (#1f1f1f)
+  --acai-text-muted: #{$color-gray-600}; // texto secundário (#707070)
+
+  // — Barra de rolagem (ver scss/_scrollbar.scss) —
+  // Tinta no lugar de cor sólida: assim o polegar funciona sobre qualquer
+  // superfície, clara ou escura, sem precisar de um token por contexto.
+  --acai-scroll-thumb: rgba(15, 23, 42, 0.22);
+  --acai-scroll-thumb-hover: rgba(15, 23, 42, 0.42);
+
+  // — Perigo/erro como TINTA (texto, ícone, borda, estado de erro de input) —
+  // Deriva de --q-negative pra herdar de graça o recolorir do daltônico. No
+  // ESCURO clareia (bloco .body--dark): #941c2a sobre a superfície navy (#171f2e)
+  // dá ~1.6:1, muito abaixo do 4.5:1 do eMAG 4.1. O FUNDO sólido (botão negative
+  // preenchido, badge) continua em --q-negative — branco sobre #941c2a já passa,
+  // e clarear o fundo exigiria inverter o texto pra escuro.
+  --acai-negative: var(--q-negative, #{$negative});
+
+  // Mesmo raciocínio do negative para os outros status usados como TINTA.
+  // Medido sobre a superfície escura (#171f2e): info #0a76a0 dá 3.4:1 e positive
+  // #38904c dá 4.35:1 — os dois falham o 4.5:1 do eMAG 4.1. O warning âmbar já
+  // passa (7.6:1) e ganha token só para a API ficar completa: quem escreve
+  // `$acai-warning` não precisa saber que este é o caso que não precisava.
+  // No tema CLARO os três são o valor de hoje — nada muda.
+  --acai-positive: var(--q-positive, #{$positive});
+  --acai-info: var(--q-info, #{$info});
+  --acai-warning: var(--q-warning, #{$warning});
+
+  // — Superfícies escuras (mantêm-se escuras nos dois temas, apenas tunadas) —
+  //
+  // 🔴 O DRAWER É NAVY (`$primary`), NÃO ROXO.
+  //
+  // Entre 1.59.0 e 1.59.1 isto apontou pra `$acai-menu` (#2d033b) — a ideia era
+  // resolver "duas famílias no mesmo componente" (fundo navy + hover da rampa
+  // `$color-primary-*`, que é roxa). O efeito colateral foi grande demais: como
+  // é o DEFAULT da lib, todo app consumidor ganhou um menu roxo sem ter pedido,
+  // e a navy é a marca deles.
+  //
+  // O roxo açaí é identidade da DOCUMENTAÇÃO, não da lib. A documentação define
+  // o dela sobrescrevendo esta var no próprio `app.scss` — que é justamente o
+  // mecanismo que estas vars existem pra oferecer.
+  --acai-drawer-bg: #{$primary}; // fundo do drawer (estrutural — não recolore)
+  --acai-table-header-bg: #{$primary}; // header da tabela (estrutural — não recolore)
+  --acai-on-navy: #{$color-gray-100}; // texto sobre superfície escura
+
+  // — Estados de item (drawer / menus) —
+  --acai-item-hover-bg: #{$color-primary-50}; // pílula de hover clara (#f5f4ff)
+  // Texto DENTRO da pílula clara: acompanha o fundo do drawer, senão sobra uma
+  // cor solitária sobre a superfície do menu.
+  --acai-item-hover-text: #{$primary}; // estrutural — não recolore
+  // Cabeçalho do grupo QUE CONTÉM o item ativo. Var (e não hardcode) porque quem
+  // retinge o drawer via `--acai-drawer-bg` precisa retingir este junto — senão o
+  // grupo ativo fica com a cor da lib sobre um menu de outra cor. É exatamente o
+  // que a documentação faz pra vestir o roxo açaí.
+  --acai-drawer-group-active-bg: #{$color-primary-900};
+
+  // — Status do Banner (par fundo-50 / texto-900; via var pra cobrir escuro/daltônico) —
+  --acai-status-info-bg: #{$color-blue-50};
+  --acai-status-info-fg: #{$color-blue-900};
+  --acai-status-warning-bg: #{$color-yellow-50};
+  --acai-status-warning-fg: #{$color-yellow-900};
+  --acai-status-error-bg: #{$color-red-50};
+  --acai-status-error-fg: #{$color-red-900};
+  --acai-status-success-bg: #{$color-green-50};
+  --acai-status-success-fg: #{$color-green-900};
+
+  // — Elevação de container (card/modal/tabela/menu) — sombra ÚNICA por tema.
+  // Claro: sombra navy suave. Escuro: anel de LUZ sutil (a "linha clara" que
+  // separa o container do fundo, mas como sombra, não borda dura) + profundidade
+  // leve. Trocar aqui reflete em todos os containers de uma vez.
+  --acai-elevation: 0 2px 6px rgba(14, 42, 80, 0.07), 0 8px 24px rgba(14, 42, 80, 0.06);
+
+  // — Gráfico: séries categóricas —
+  // Claro: blue-400, yellow-700, primary-700, red-600 (=$negative), green-500.
+  // O vermelho e o verde SÃO os hexes de $negative/$positive: só aparecem a
+  // partir da 4ª série, onde a legenda já é obrigatória (eMAG 4.2), então o
+  // risco de alguém ler "série 4 = ruim" é baixo e reusar a tabela vale mais.
+  @include chart-categorica(#3a80d0, #b37800, #4944b3, #941c2a, #43a858, $color-gray-600);
+
+}
+
+// — Gráfico: chrome (grade, eixo, tinta, trilho) —
+// São ALIAS de tokens que já existem, não hexes próprios — assim acompanham
+// escuro e alto contraste sem precisar de um bloco por modo.
+//
+// 🔴 Por que em `body` e NÃO em `:root`: custom property com `var()` é resolvida
+// no elemento ONDE FOI DECLARADA, e o resto da árvore herda o valor já resolvido.
+// Declarado em `:root` (o <html>), `var(--acai-text)` congelaria no valor CLARO,
+// porque o escuro vive em `.body--dark` — o alias nunca retingiria (era o bug:
+// a docs mostrava "Tinta #1f1f1f" com a página no escuro).
+// Em `body` a resolução acontece no elemento que o `.body--dark` alcança, e o
+// alto contraste (que marca o <html>) continua chegando por herança. Um bloco
+// só cobre os quatro combos: claro, escuro, contraste e contraste+escuro.
+body {
+  --acai-chart-surface: var(--acai-surface);
+  --acai-chart-grid: var(--acai-border-subtle); // linha de grade — a mais fraca
+  --acai-chart-axis: var(--acai-border); // eixo/baseline — mais forte que a grade
+  --acai-chart-ink: var(--acai-text); // rótulo de valor
+  --acai-chart-ink-muted: var(--acai-text-muted); // ticks e rótulo de eixo
+  --acai-chart-track: var(--acai-surface-2); // trilho de fundo de barra
+}
+
+// ============================================================
+// TEMA ESCURO — Quasar liga `body.body--dark`.
+// Família navy-carvão (fica coerente com a marca, não cinza puro).
+// ============================================================
+.body--dark {
+  // Retinge as próprias superfícies dark do Quasar (q-card default, q-menu,
+  // q-table, popups) pra família navy em vez do cinza padrão (#1d1d1d/#121212).
+  --q-dark: #171f2e;
+  --q-dark-page: #0e1420;
+
+  // — Superfícies —
+  --acai-page-bg: #0e1420;
+  --acai-surface: #171f2e;
+  --acai-surface-2: #1f293b;
+  --acai-surface-hover: #243149;
+  --acai-elevated: #2c3a52; // mais claro que a superfície pra "saltar"
+  --acai-control-on: #3a80d0; // azul claro legível sobre superfície escura
+  --acai-row-odd: #1b2333;
+  --acai-row-even: #161d2b;
+
+  // — Bordas —
+  --acai-border: #2a3446;
+  --acai-border-subtle: #232d40;
+
+  // — Elevação — SÓ profundidade escura difusa (blur real), SEM anel de 1px.
+  // O anel `0 0 0 1px` de antes era uma linha branca DURA em volta do container.
+  // O card já se separa do fundo pelo próprio bg (#171f2e) mais claro que a
+  // página (#0e1420); a sombra só dá profundidade.
+  --acai-elevation: 0 4px 14px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.34);
+
+  // — Texto —
+  --acai-heading: #eaeef6;
+  --acai-text: #dde3ee;
+  --acai-text-muted: #a6b1c4;
+
+  // — Perigo/erro (tinta) — vermelho claro da própria rampa: ~5:1 sobre #171f2e.
+  // Unifica os antigos overrides hardcoded de dialog (#e06070) e button (#e0707d).
+  --acai-negative: #{$color-red-300};
+
+  // Os demais status como tinta, cada um no tom 300 da PRÓPRIA rampa — mesma
+  // regra do negative, então a família de cor continua reconhecível.
+  // Sobre #171f2e: positive 8.6:1, info 6.1:1, warning 10:1.
+  --acai-positive: #{$color-green-300};
+  --acai-info: #{$color-blue-300};
+  --acai-warning: #{$color-yellow-300};
+
+  // — Barra de rolagem —
+  --acai-scroll-thumb: rgba(255, 255, 255, 0.2);
+  --acai-scroll-thumb-hover: rgba(255, 255, 255, 0.38);
+
+  // — Superfícies escuras —
+  // Mesma identidade do claro, rebaixada: a navy do tema claro sobre fundo
+  // escuro fica clara demais como superfície de página inteira.
+  //
+  // Quem retinge o drawer (a documentação, com o roxo açaí) sobrescreve esta var
+  // AQUI TAMBÉM — o bloco do tema escuro é outro escopo.
+  --acai-drawer-bg: #0a1120; // um pouco mais fundo que o conteúdo
+  --acai-table-header-bg: #141d33;
+  --acai-on-navy: #dfe5f1;
+
+  // — Estados de item —
+  --acai-item-hover-bg: rgba(255, 255, 255, 0.08); // pílula clara ofuscaria no escuro
+  --acai-item-hover-text: #eaeef6;
+  --acai-drawer-group-active-bg: rgba(255, 255, 255, 0.06);
+
+  // — Status do Banner (fundo translúcido da cor + texto claro da família) —
+  --acai-status-info-bg: rgba(58, 128, 208, 0.16);
+  --acai-status-info-fg: #{$color-blue-100};
+  --acai-status-warning-bg: rgba(225, 156, 45, 0.16);
+  --acai-status-warning-fg: #{$color-yellow-100};
+  --acai-status-error-bg: rgba(212, 57, 74, 0.18);
+  --acai-status-error-fg: #{$color-red-100};
+  --acai-status-success-bg: rgba(67, 168, 88, 0.16);
+  --acai-status-success-fg: #{$color-green-100};
+
+  // — Gráfico: séries no escuro —
+  // Mesma convenção dos status acima: o tom 300 da PRÓPRIA rampa do slot claro,
+  // então a família de cor continua reconhecível ao trocar de tema.
+  // ⚠️ Slot 1 (#6aa0e0 azul claro) e slot 3 (#9f9ce8 violeta claro) são vizinhos
+  // em matiz. Não são ADJACENTES na ordem, então barra/linha ficam bem. Em PIZZA
+  // (onde toda fatia encosta em toda fatia) o componente limita as fatias.
+  @include chart-categorica(
+    $color-blue-300,
+    $color-yellow-300,
+    $color-primary-300,
+    $color-red-300,
+    $color-green-300,
+    $color-gray-200
+  );
+  // O chrome NÃO precisa de bloco aqui: é alias de --acai-border*/--acai-text*,
+  // que este mesmo bloco já redefiniu acima.
+
+  // Fundo geral da aplicação (o app usa o container, mas garante o body).
+  background: var(--acai-page-bg);
+}
+
+// ============================================================
+// MODO DALTÔNICO — paleta por TIPO. Sobrescreve as brand colors do Quasar
+// (--q-*) → recolore chips, badges, botões color="…", indicadores de section e
+// utilitárias .text-*/.bg-*. Como --q-* independem de tema, um bloco só serve
+// claro E escuro. O Banner segue com ícone+texto (eMAG 4.2), não depende só da cor.
+// Marca em <html data-acai-daltonismo="TIPO">. Ordem: positive/warning/negative/info.
+// ============================================================
+
+// Deuteranopia (deficiência no verde) — Okabe-Ito, a mais comum (~6% dos homens).
+html[data-acai-daltonismo='deuteranopia'] {
+  --q-positive: #0072b2; // azul
+  --q-warning: #e69f00; // laranja
+  --q-negative: #d55e00; // vermelho-alaranjado
+  --q-info: #7a52a0; // roxo
+  // TESTE (primary inteiro): a navy vira roxo escuro (segue a lógica do info,
+  // escurecido pra manter texto branco no drawer/tooltip/header).
+  --acai-primary: #3d2a5a;
+  --q-primary: #3d2a5a;
+  --q-accent: #b0559a; // magenta (distinto do roxo info/primary) — best-effort
+  @include banner-cvd-light(#7a52a0, #e69f00, #d55e00, #0072b2);
+  // Séries de gráfico: Okabe-Ito. Duas diferenças em relação ao uso como STATUS
+  // logo acima, as duas medidas em teste (`chart-paleta.spec.ts`):
+  //   • o âmbar é #b37800 ($color-yellow-700), não o #e69f00 canônico — como
+  //     status ele fica sobre fundo próprio, como série ele PREENCHE área sobre
+  //     branco, e o #e69f00 dá só 2,25:1 ali;
+  //   • a ORDEM saiu de busca exaustiva maximizando a distância entre pares
+  //     ADJACENTES sob deuteranopia. Não force azul no slot 1 pra "combinar"
+  //     com o modo normal: isso derruba a separação.
+  @include chart-categorica(#b37800, #0072b2, #d55e00, #7a52a0, #009e73, $color-gray-600);
+}
+
+// Protanopia (deficiência no vermelho) — Okabe-Ito com vermelho mais alaranjado
+// (protanopes enxergam o vermelho puro bem escuro).
+html[data-acai-daltonismo='protanopia'] {
+  --q-positive: #0072b2; // azul
+  --q-warning: #f0b000; // amarelo-âmbar
+  --q-negative: #e8590c; // laranja
+  --q-info: #7a52a0; // roxo
+  --acai-primary: #3d2a5a; // roxo escuro
+  --q-primary: #3d2a5a;
+  --q-accent: #b0559a; // magenta
+  @include banner-cvd-light(#7a52a0, #f0b000, #e8590c, #0072b2);
+  // Mesma lógica do deuteranopia: âmbar escurecido (#f0b000 dá 1,92:1 sobre
+  // branco) e ordem otimizada sob protanopia.
+  @include chart-categorica(#b37800, #0072b2, #e8590c, #7a52a0, #009e73, $color-gray-600);
+}
+
+// Tritanopia (deficiência no azul/amarelo) — preserva o eixo vermelho-verde (Paul Tol).
+html[data-acai-daltonismo='tritanopia'] {
+  --q-positive: #009e73; // verde-azulado
+  --q-warning: #ee7733; // laranja
+  --q-negative: #cc3311; // vermelho
+  --q-info: #0077bb; // azul
+  --acai-primary: #08425c; // azul escuro
+  --q-primary: #08425c;
+  --q-accent: #a83768; // rosa-magenta (mais vermelho — tritanopes leem azul mal)
+  @include banner-cvd-light(#0077bb, #ee7733, #cc3311, #009e73);
+  // Séries: Paul Tol. O laranja vira #cc6600 (o #ee7733 do status dá 2,87:1
+  // sobre branco) e a ordem é a otimizada sob tritanopia.
+  @include chart-categorica(#cc6600, #0077bb, #cc3311, #009e73, #a83768, $color-gray-600);
+}
+
+// Acromatopsia (sem percepção de cor) — distinção por LUMINÂNCIA (+ os ícones que
+// os status já têm). Cinzas escalonados; melhor esforço (condição rara).
+html[data-acai-daltonismo='acromatopsia'] {
+  --q-positive: #808080; // mais claro
+  --q-warning: #6b6b6b;
+  --q-info: #565656;
+  --q-negative: #3d3d3d; // mais escuro
+  --acai-primary: #1f1f1f; // quase preto (mais escuro que os status → distinto por luminância)
+  --q-primary: #1f1f1f;
+  --q-accent: #949494; // cinza claro (distinto por luminância dos status)
+  @include banner-cvd-light(#565656, #6b6b6b, #3d3d3d, #808080);
+  // Séries: escala monotônica de luminância, do mais escuro ao mais claro,
+  // dentro da faixa que ainda passa 3:1 sobre branco (o teto é ~#8c8c8c).
+  // 5 séries NÃO se separam com folga nessa faixa — é por isso que neste modo
+  // o componente liga HACHURA obrigatoriamente: o padrão é que distingue, o
+  // cinza só ordena. "Outros" em #949494 fica em 3.03:1, no piso.
+  @include chart-categorica(#1f1f1f, #3d3d3d, #565656, #6b6b6b, #808080, #949494);
+}
+
+// ============================================================
+// DARK + DALTÔNICO — o `.body--dark` (no <body>) trava `--acai-control-on` em #3a80d0,
+// vencendo o override de `--acai-primary` (no <html>) pela PROXIMIDADE do ancestral.
+// Reafirma o control-on aqui (combo html-attr + body-class → especificidade suficiente)
+// com uma versão BRILHANTE da cor CVD, pra o INTERATIVO (stepper-dot, foco, switch,
+// tab ativa) recolorir também no escuro. Estruturais (drawer/títulos) seguem dark de
+// propósito — decisão "só interativo". Sem estes blocos, dark "trava" o daltônico.
+// ============================================================
+// control-on (interativo) BRILHANTE por tipo + banner CVD no escuro (translúcido da cor).
+// `--acai-negative` cai no mesmo caso: o `.body--dark` o fixa no vermelho claro da
+// rampa e venceria o recolorir CVD do <html>. Reafirma aqui a versão CLARA da cor
+// CVD de cada tipo (a escura da paleta light some sobre a superfície #171f2e).
+// `--acai-positive/info/warning` entram junto pelo MESMO motivo: o `.body--dark`
+// os fixa no tom 300 da rampa normal e venceria o recolorir CVD do <html>. Cada
+// um recebe aqui a versão CLARA da cor CVD do seu tipo, na mesma ordem que o
+// banner usa (info, warning, error, success) — e é por isso que no deuteranopia
+// o "positive" é AZUL e o "info" é ROXO: em Okabe-Ito o verde não se distingue.
+html[data-acai-daltonismo='deuteranopia'] .body--dark {
+  --acai-control-on: #9d6fc9; // roxo brilhante (legível sobre superfície escura)
+  --acai-negative: #f0853f; // laranja-avermelhado claro
+  --acai-positive: #5fb0e8; // azul claro (o "sucesso" CVD é azul)
+  --acai-info: #b18ad4; // roxo claro
+  --acai-warning: #f0b840; // âmbar claro
+  @include banner-cvd-dark(#7a52a0, #e69f00, #d55e00, #0072b2);
+  // Séries: as versões CLARAS das cores CVD (as escuras somem sobre #171f2e).
+  // Sem este include o `.body--dark` fixaria a paleta normal e o daltônico
+  // TRAVARIA no escuro — mesma armadilha dos status, documentada acima.
+  // #4fd1a5 é o verde-água claro que a lib já usa no tritanopia escuro.
+  @include chart-categorica(#4fd1a5, #b18ad4, #f0b840, #5fb0e8, #f0853f, $color-gray-200);
+}
+html[data-acai-daltonismo='protanopia'] .body--dark {
+  --acai-control-on: #9d6fc9;
+  --acai-negative: #f5904a; // laranja claro
+  --acai-positive: #5fb0e8;
+  --acai-info: #b18ad4;
+  --acai-warning: #f5c542;
+  @include banner-cvd-dark(#7a52a0, #f0b000, #e8590c, #0072b2);
+  @include chart-categorica(#4fd1a5, #b18ad4, #f5c542, #5fb0e8, #f5904a, $color-gray-200);
+}
+html[data-acai-daltonismo='tritanopia'] .body--dark {
+  --acai-control-on: #4d9fd0; // azul brilhante
+  --acai-negative: #f4795e; // vermelho claro
+  --acai-positive: #4fd1a5; // verde-água claro
+  --acai-info: #5fb4e8; // azul claro
+  --acai-warning: #f5a05e; // laranja claro
+  @include banner-cvd-dark(#0077bb, #ee7733, #cc3311, #009e73);
+  // #e07aa0 é o ÚNICO tom novo desta leva: o magenta #a83768 não tem versão
+  // clara em lugar nenhum da lib e some sobre #171f2e no valor escuro.
+  @include chart-categorica(#f5a05e, #5fb4e8, #f4795e, #4fd1a5, #e07aa0, $color-gray-200);
+}
+html[data-acai-daltonismo='acromatopsia'] .body--dark {
+  --acai-control-on: #b0b0b0; // cinza claro
+  // No claro o negative é o cinza mais ESCURO (#3d3d3d) — distinção por luminância.
+  // No escuro isso inverte: some no fundo. Vira o cinza mais CLARO, seguindo sendo
+  // o extremo da escala (e portanto o mais distinto dos demais status).
+  --acai-negative: #d6d6d6;
+  // Mesma inversão para os demais: no claro a ordem por luminância é
+  // negative(#3d3d3d) < info(#565656) < warning(#6b6b6b) < positive(#808080).
+  // No escuro ela espelha — negative segue no extremo, agora o MAIS claro — e
+  // todos ficam acima de 4,9:1 sobre #171f2e. Sem cor para distinguir, a
+  // luminância é a única pista que sobra; ela precisa continuar monotônica.
+  --acai-warning: #b8b8b8;
+  --acai-info: #9e9e9e;
+  --acai-positive: #8c8c8c;
+  @include banner-cvd-dark(#565656, #6b6b6b, #3d3d3d, #808080);
+  // Séries: a escala do claro ESPELHADA (mais claro → mais escuro), pelo mesmo
+  // motivo dos status logo acima — no escuro o cinza escuro some no fundo.
+  @include chart-categorica(#f0f0f0, #d6d6d6, #b8b8b8, #9e9e9e, #8c8c8c, #6f6f6f);
+}
+
+// ============================================================
+// ALTO CONTRASTE — reforça bordas, textos e foco. Vale nos dois temas.
+// Marca em `<html data-acai-contraste>` (via usePreferencias).
+// ============================================================
+html[data-acai-contraste] {
+  --acai-border: #6f6f6f;
+  --acai-border-subtle: #808080;
+  --acai-text: #000000;
+  --acai-text-muted: #2e2e2e;
+  --acai-heading: #000000;
+}
+
+// Contraste + escuro (vars no body, ancestral mais próximo).
+html[data-acai-contraste] .body--dark {
+  --acai-border: #9aa7bf;
+  --acai-border-subtle: #808da6;
+  --acai-text: #ffffff;
+  --acai-text-muted: #d8dfec;
+  --acai-heading: #ffffff;
+}
+
+// Foco mais visível (eMAG 4.3) e contorno em superfícies que só tinham sombra.
+html[data-acai-contraste] :focus-visible {
+  outline-width: 3px !important;
+  outline-offset: 2px;
+}
+
+html[data-acai-contraste] .container-card {
+  border: 1px solid var(--acai-border);
+}

package/dist/scss/_typography.scss

@@ -0,0 +1,50 @@
+// Açaí UI — Typography Tokens
+
+// Tamanhos
+$font-size-xs: 0.625rem;  // 10px
+$font-size-sm: 0.75rem;   // 12px
+$font-size-md: 0.875rem;  // 14px
+$font-size-lg: 1rem;      // 16px
+$font-size-xl: 1.25rem;   // 20px
+
+// Pesos
+$font-weight-300: 300;
+$font-weight-500: 500;
+$font-weight-700: 700;
+$font-weight-900: 900;
+
+// Mixin
+@mixin typography($size, $weight) {
+  font-size: $size;
+  font-weight: $weight;
+}
+
+// Classes utilitárias — XS
+.text-xs-300 { @include typography($font-size-xs, $font-weight-300); }
+.text-xs-500 { @include typography($font-size-xs, $font-weight-500); }
+.text-xs-700 { @include typography($font-size-xs, $font-weight-700); }
+.text-xs-900 { @include typography($font-size-xs, $font-weight-900); }
+
+// Classes utilitárias — SM
+.text-sm-300 { @include typography($font-size-sm, $font-weight-300); }
+.text-sm-500 { @include typography($font-size-sm, $font-weight-500); }
+.text-sm-700 { @include typography($font-size-sm, $font-weight-700); }
+.text-sm-900 { @include typography($font-size-sm, $font-weight-900); }
+
+// Classes utilitárias — MD
+.text-md-300 { @include typography($font-size-md, $font-weight-300); }
+.text-md-500 { @include typography($font-size-md, $font-weight-500); }
+.text-md-700 { @include typography($font-size-md, $font-weight-700); }
+.text-md-900 { @include typography($font-size-md, $font-weight-900); }
+
+// Classes utilitárias — LG
+.text-lg-300 { @include typography($font-size-lg, $font-weight-300); }
+.text-lg-500 { @include typography($font-size-lg, $font-weight-500); }
+.text-lg-700 { @include typography($font-size-lg, $font-weight-700); }
+.text-lg-900 { @include typography($font-size-lg, $font-weight-900); }
+
+// Classes utilitárias — XL
+.text-xl-300 { @include typography($font-size-xl, $font-weight-300); }
+.text-xl-500 { @include typography($font-size-xl, $font-weight-500); }
+.text-xl-700 { @include typography($font-size-xl, $font-weight-700); }
+.text-xl-900 { @include typography($font-size-xl, $font-weight-900); }