/* * Fundação visual — item 24 do plano de execução (+ ajuste no item 25). * * Este arquivo introduz o sistema de tokens (cor, tipografia, raio de * borda) que substitui os estilos atuais de style.css de forma * incremental, item por item (25 — componentes base, 26 — console * principal, 27 — modo claro). * * ATUALIZAÇÃO NO ITEM 25 sobre --accent/--text/--radius/--accent-text: * no item 24 esses 4 nomes ficaram deliberadamente adiados (style.css * ainda os declarava em `:root` com os valores antigos, e por carregar * depois deste arquivo, venciam — ver histórico no git). O item 25 pede * componentes construídos "sobre os tokens", e um componente novo usando * var(--accent) só faz sentido mostrando o violeta novo de verdade. Então * agora: style.css NÃO declara mais --accent/--text/--radius/--accent-text * em `:root` (só os outros tokens antigos que não colidem: --bg, --panel, * --border, --muted, --green, --red, --yellow, --shadow, --accent-dim * seguem lá, intocados). O `:root` deste arquivo é a ÚNICA fonte desses 4 * nomes agora — logo eles valem de verdade em qualquer elemento. * * Pra a aplicação HOJE (login, dashboard, todas as abas) continuar * IDÊNTICA visualmente até o item 26 migrar de verdade os componentes, * o das 3 páginas (index/wall/tutorial) ganhou a classe * `.legacy-shell`, que redeclara esses 4 nomes com os valores antigos * dentro do seu escopo (custom property normal: quem herda de dentro do * `.legacy-shell` vê o valor redeclarado ali, não o de `:root` — não é * uma questão de especificidade de seletor, é a árvore do DOM). A nova * página de catálogo (/dev/componentes) NÃO tem essa classe, então mostra * os componentes com os valores novos de verdade. `--accent-text` também * ganhou um valor novo real (`var(--void)`) pra corrigir o contraste * abaixo do WCAG AA identificado no item 24 (âmbar antigo tinha * --accent-text quase preto calibrado pra ele; o violeta novo precisa de * outro par — void/violeta mede ~5.2:1, passa AA). * * Estrutura pronta pra modo claro (item 27): já * está nas 3 páginas, mas nenhuma regra CSS aqui consome esse atributo * ainda — é só a marcação, pronta pro item 27 escrever * :root[data-theme="light"] e mover este bloco pra * :root[data-theme="dark"]. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap'); :root { color-scheme: dark; /* -- cor: fundo e superfícies -- */ --void: #0B0917; /* fundo da página */ --surface: #141024; /* painéis */ --raised: #1C1734; /* cartões e elementos elevados */ --line: #2C2160; /* bordas estruturais */ --line-soft: #241D45; /* divisórias sutis */ --chrome: #55478F; /* chrome interativo, estado selecionado */ --accent: #8B6FE8; /* foco, links, seleção — o acento da interface */ /* Não faz parte da lista de tokens do item 24 (é uma convenção já existente em style.css, texto sobre fundo --accent) -- recalibrado aqui pro violeta pra manter contraste AA, ver nota acima. */ --accent-text: var(--void); --text: #EAE7F5; --text-dim: #9A93B8; --text-mute: #6E6790; /* * Cores semânticas — RESERVADAS, nunca decorativas. Regra inviolável: * âmbar (--warning) significa atenção e não pode aparecer em botão, * link, cabeçalho ou elemento de marca. O acento da interface é sempre * o violeta --accent acima, nunca uma destas quatro. */ --critical: #FF3B5C; --warning: #F5C400; --ok: #34D399; --offline: #6E6790; /* * Tipografia — família IBM Plex em três papéis. Regra: se um humano * escreveu o texto, é Condensed (--font-cond); se foi a máquina que * produziu (horário, IP, temperatura, contador, identificador), é Mono * (--font-mono). --font-sans é o corpo geral da interface. Cada pilha * termina em fontes de sistema — se a fonte externa (@import acima) * falhar ou for bloqueada, o layout cai pro fallback sem quebrar. */ --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; --font-cond: 'IBM Plex Sans Condensed', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; /* Raio de borda: console de operação, não aplicativo de consumo. */ --radius: 3px; } /* * Compatibilidade com a aplicação hoje em produção — ver nota grande no * topo do arquivo. Redeclara os 4 nomes que colidem com os valores * literais antigos de style.css, escopados ao das páginas atuais * (index/wall/tutorial), pra nada mudar de aparência até o item 26. */ .legacy-shell { --accent: #f2a134; --accent-text: #1a2226; --text: #eef3f3; --radius: 10px; } /* * Reset — deliberadamente conservador. Este projeto tem

,