/* ============================================================================ TEMA ESCURO - páginas de leitura (blog, cases) ============================================================================ POR QUE SÓ AQUI, E NÃO NO SITE INTEIRO. A pesquisa de legibilidade é contra fundo escuro em página de venda: no estudo de Piepenbrock (2013) o modo claro venceu em acuidade visual e em revisão de texto, nas duas faixas etárias testadas, e a vantagem do claro CRESCE conforme a fonte diminui - que é exatamente o caso de home, planos e FAQ. A NN/g recomenda escuro justamente onde há leitura longa, e o único case forte publicado (Terra, web.dev: bounce -60%, páginas/sessão +170%) é um portal de notícias. Blog e cases são o nosso equivalente disso. E há a razão de composição: a home usa escuro como RECURSO (hero navy, seção Suporte navy, dois CTAs em azul cheio). O ritmo claro-escuro-claro é o que faz o "Testar Grátis" saltar. Inverter tudo apagaria esse mecanismo. Aqui não: página de artigo é uma coluna de texto contínua, sem esse ritmo. ESCOPO REAL DESTE ARQUIVO. Ele é carregado SÓ pelas 10 páginas de leitura. Não entra no main.css e não toca a home. Isso é de propósito: o custo fica onde o benefício está, e um rebuild do Tailwind não pode apagá-lo (o main.css é gerado, e CSS colado à mão nele já sumiu num rebuild antes). COMO ELE FUNCIONA, E POR QUE NÃO HÁ REGRA DUPLICADA AQUI. O caminho ingênuo é escrever cada regra duas vezes, uma sob `@media(prefers-color-scheme:dark)` e outra sob `[data-tema="escuro"]`. Isso dobra o arquivo e garante que um dia alguém corrija um lado só. Em vez disso, **todo valor de cor vira token**, e os tokens são declarados três vezes: uma com os valores CLAROS de hoje, e duas com os escuros (uma por porta de entrada). As regras aparecem uma vez só e não sabem em que tema estão. No claro elas repõem exatamente a cor que o template já usava, então ligar este arquivo com o tema claro ativo não muda um pixel. Três estados, e a ordem das declarações é o que faz o botão vencer o sistema: sem escolha gravada manda a media query; com escolha manda o atributo em , que vem depois e por isso ganha. CONTRASTE MEDIDO, não estimado (o toggle do Cé nasceu em 1,7:1 porque ninguém tinha medido): título #dde5ee sobre #0f1720 = 14,19:1 corpo #c2ccd8 sobre #0f1720 = 11,10:1 2º nível #93a1b1 sobre #0f1720 = 6,85:1 3º nível #7e8c9c sobre #0f1720 = 5,26:1 link #5cb6ea sobre #0f1720 = 8,03:1 ícone do botão de tema sobre a barra = 8,14:1 Nada aqui usa branco puro sobre preto puro: passa com 21:1 na tabela e causa halation (texto "brilhando") para quem tem astigmatismo. ========================================================================== */ /* --------------------------------------------------------------------------- 1. OS TOKENS NO TEMA CLARO Os valores que o template já usa hoje, escritos à mão a partir do