/* * 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"]. */ /* Rebrand Greyes: tema escuro + acento verde + Inter, ver PROJECT.md. Troca o @import IBM Plex por Inter -- único typeface do novo sistema (--font-mono continua Plex Mono, papel puramente funcional pra dados tabulares/IP/timestamp, não é decisão de marca). */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { color-scheme: dark; /* -- cor: fundo e superfícies (Greyes) -- */ --void: #1A2225; /* fundo da página */ --surface: #232C30; /* painéis */ --raised: #2B353B; /* cartões e elementos elevados / hover */ --line: #333B40; /* bordas estruturais */ --line-soft: #2B353B; /* divisórias sutis */ --chrome: #333B40; /* chrome interativo, estado selecionado */ --accent: #35D07E; /* verde da marca -- ações, destaques, ativo */ --accent-strong: #2BB86C; /* hover/pressionado */ --accent-text: #12181B; /* texto/ícone SOBRE o verde -- sempre escuro */ --text: #FFFFFF; /* títulos */ --text-dim: #E6E9EB; /* corpo */ --text-mute: #9BA1A7; /* secundário / legendas */ /* * Cores semânticas — RESERVADAS, nunca decorativas. O acento da * interface é sempre o verde --accent acima, nunca uma destas quatro. */ --critical: #F26D6D; --warning: #F5C453; --ok: #35D07E; --offline: #6E7479; /* * Tipografia — Inter carrega o peso da marca (títulos 700-800, corpo * 400-500). --font-mono segue à parte pra dado tabular (IP, horário, * contador) -- ver nota acima. */ --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; --font-cond: 'Inter', -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 Greyes. */ --radius: 12px; } /* * A aplicação em produção usa .legacy-shell (ver nota histórica acima) -- * é aqui que o rebrand Greyes realmente aparece pra quem usa o sistema * hoje (login, dashboard, todas as abas). Ver também style.css :root. */ .legacy-shell { --accent: #35D07E; --accent-text: #12181B; --text: #E6E9EB; --radius: 12px; } /* * Reset — deliberadamente conservador. Este projeto tem

,