/* Tokens do Projeto X — ponte para o AI Chat Clean Design System. ===================================================================== Decisao do usuario (2026-07-28): adotar o DS POR INTEIRO, pele inclusive. Este arquivo NAO define token nenhum. Ele importa os 10 arquivos do DS como eles sao — `assets/ds/` e' copia literal de `tokens/` do pacote, sem uma linha editada, exceto `fonts.css`, que o proprio DS manda trocar por @font-face local quando o produto hospedar os .woff2. Copiar em vez de reescrever e' o ponto: o DS trava 193 tokens no `_adherence.oxlintrc.json`, e um tokens.css escrito a mao inevitavelmente carrega so' o subconjunto que quem escreveu lembrou — as familias --action-*, --link-*, --sentiment-*, --chart-grid, --dur-*, --size-icon-* somem sem que ninguem perceba, e a proxima tela reinventa cada uma delas com hex cru. Quando o DS for atualizado, recopie `assets/ds/` e pronto. A UNICA camada propria e' a de ALIASES no fim: os nomes antigos (--bg, --panel, --ink, --hair…) que as ~20 telas ja' escritas usam, apontando para os tokens do DS. Sem ela, trocar a pele exigiria reescrever ~340 usos num commit so', e qualquer um que escapasse ficaria com a cor velha no meio da tela nova. Tela NOVA escreve com os nomes do DS; os aliases vao sendo trocados conforme cada tela for tocada. */ @import url("ds/fonts.css"); @import url("ds/colors.css"); @import url("ds/typography.css"); @import url("ds/spacing.css"); @import url("ds/radius.css"); @import url("ds/shadow.css"); @import url("ds/charts.css"); @import url("ds/motion.css"); @import url("ds/layout.css"); /* ====================================================================== ALIASES LEGADOS — os nomes que as telas ja' escritas usam. Nenhum valor novo: cada um aponta para um token do DS. ====================================================================== */ :root { --bg:var(--color-text-inverse); /* usado como `color` sobre --ink */ --panel:var(--surface-canvas); /* fundo da pagina */ --card:var(--surface-raised); --sidebar:var(--surface-raised); --ink:var(--fg-primary); --muted:var(--fg-secondary); --faint:var(--fg-tertiary); --border:var(--stroke-subtle); --card-border:var(--stroke-subtle); --hair:var(--stroke-subtle); --field:var(--stroke-strong); --btn:var(--surface-muted); --btn-ink:var(--fg-secondary); --nav-ink:var(--fg-secondary); --chip:var(--surface-muted); --chart-prev:var(--stroke-strong); --pos:var(--color-success-default); --pos-bg:var(--status-success-bg); --neg:var(--color-danger-default); --neg-bg:var(--status-danger-bg); --warn:var(--color-warning-default); --warn-bg:var(--status-warning-bg); --info:var(--color-info-default); --info-bg:var(--status-info-bg); --focus:var(--color-accent-default); --font:var(--font-sans); --r:var(--radius-lg); --r-sm:var(--radius-md); --r-lg:var(--radius-xl); --shadow:var(--shadow-md); --card-shadow:var(--shadow-md); /* pontilhado dos banners — sem equivalente no DS */ --dot-dim:209,209,204; --dot-lit:107,107,112; /* Cor de marca que some num dos temas vira token. Grok (#111827) e Apple (#444b54) dao 1,02:1 e 2,05:1 sobre o card escuro — a linha do grafico simplesmente desaparecia. As outras engines passam nos dois e ficam fixas. */ --brand-grok:#111827; --brand-apple:#444b54; } /* O DS troca de tema SO' por atributo — nao tem media query de prefers-color-scheme. Nao e' limitacao: js/theme.js resolve a preferencia do SO (e a escolha em Configuracoes · Aparencia) para light|dark e estampa o atributo antes da primeira pintura. A media query aqui seria codigo morto, porque o ja' nasce com data-theme e o script sempre o sobrescreve. */ [data-theme="dark"] { --dot-dim:50,50,56; --dot-lit:161,161,166; --brand-grok:#E8E8EA; --brand-apple:#A6ADB6; }