Metodologia

Primitive (hex bruto) → Semantic (aliases de significado) → Component (baseado em papéis). Os componentes consomem apenas tokens semantic / component, nunca primitives. Uma troca de tinta muda uma linha de token, não N componentes.

O totem em produção é a fonte de verdade. O site do DS renderiza previews dentro de containers `[data-preview-stage]` que resetam as variáveis CSS de volta aos valores primitives do kiosk, mesmo quando o tema dos docs desloca cores para atender AA. O que você vê no preview é exatamente o que vai para produção.

O verde da marca #2ECE78 mede 2.05:1 sobre fundos claros, abaixo do WCAG AA (4.5:1). Usado apenas em affordances não-textuais (preenchimentos de CTA, glyphs de success) onde o contraste é carregado pela cor de fill + stroke + label. A exceção é explícita, não silenciosa.

Light (a maioria das telas) e dark (ScreenSaver / ExitRemoveCard / lado direito do split-panel) são cidadãos de primeira classe. Todo componente renderiza 1:1 nas duas. O padrão dark-overlay (rgba navy 98%) é sólido, não mix-blend, então os stacking contexts do framer-motion não o quebram.

Os tokens são declarados uma única vez no `tokens.css` do DS e copiados para o app via `npm run sync-tokens`. O bloco `@theme inline` do app referencia as mesmas vars. Sem drift, sem duas fontes de verdade.