/* =========================================================================== Estilo comum do PAINEL e das páginas institucionais. =========================================================================== A página de resgate (`/s/`) NÃO usa este arquivo, e isso é decisão, não descuido: ela carrega o CSS inteiro embutido no HTML, porque uma folha externa é mais uma ida à rede antes do primeiro pixel, num caminho que tem de abrir em menos de um segundo com sinal ruim. Aqui a pessoa está sentada, logada, sem pressa: o custo de uma requisição extra vale a manutenção. --------------------------------------------------------------------------- DE ONDE VÊM ESTES NÚMEROS --------------------------------------------------------------------------- Do `cinerea-gestao/styles.css`, que é o painel da casa que já roda. Não é inspiração vaga; é a mesma gramática, e vale dizer qual é ela, porque a primeira versão deste arquivo era outra coisa: 1. PAPEL, NÃO CINZA DE APLICATIVO. A página não é `#FAFAFA` com cartão branco por cima. Fundo e cartão são o mesmo papel, e o que separa um do outro é UM FIO de `--linha`. Cartão branco com sombra sobre cinza é o visual padrão de painel de SaaS: funciona, e é exatamente por ser padrão que não diz nada. 2. O BOTÃO PRIMÁRIO É DA COR DA TINTA, e vira aqua ao toque. Botão grande colorido em cada cartão transforma a tela num varejo. O acento aparece contado: link, foco, número de passo, borda do que está selecionado. 3. TÍTULO EM SERIFA PESO 400. É o que faz a tela parecer documento em vez de formulário, e o que costura o painel à página inicial, que é toda serifa peso 300. 4. RÓTULO EM CAIXA ALTA, 11px, ENTRELETRA LARGA, na cor mais fraca. É a convenção da casa para etiqueta de campo, e é o que permite o rótulo ser pequeno sem ficar ilegível. 5. NÚMERO EM SERIFA (`.serif`). Preço, contagem, valor de multa. Número em sans bold lê como saldo de banco; em serifa, lê como cifra de documento. 6. RAIO DE 7–10px, nunca mais. Canto muito redondo é a estética de aplicativo de celular de 2015, e envelheceu. --------------------------------------------------------------------------- A COR: AQUA, E NÃO O VERMELHO DA PÁGINA DE RESGATE --------------------------------------------------------------------------- Este arquivo nasceu com `--acento:#B91C1C` e um comentário dizendo "aqui é emergência, e a cor tem de dizer aja". Estava errado por dois motivos, e o erro só apareceu ao abrir o painel do lado da página inicial: 1. **O painel não é emergência.** Quem está aqui está sentado, logado, sem pressa, cadastrando o remédio da mãe. Pintar isso de vermelho de socorro é pedir urgência de quem não está com pressa nenhuma. 2. **Gasta o vermelho.** `#B91C1C` é a cor de uma tela só, a de resgate, e ela funciona por ser a única. Um painel vermelho e uma ficha vermelha ensinam o olho que vermelho é a cor do produto, e aí a tela que precisa gritar não grita mais. O CLAUDE.md registra isso como decisão: nenhum dos três vermelhos é cor de marca. A marca é Água. `--acento` é um aqua mais fundo (`#0B7C77`) e não o `#12B0A8` do símbolo, por contraste: texto branco sobre `#12B0A8` dá 2,7:1, reprovado em qualquer critério de leitura. Sobre `#0B7C77` dá 5:1, nos dois temas. Quem muda no escuro é `--realce`, que é aqua usado COMO TEXTO (link, foco, destaque) e precisa de contraste contra o fundo, não contra si mesmo. `--perigo` continua vermelho, e agora quer dizer só uma coisa: perigo. E a serifa vem da PILHA DO SISTEMA, não do Google Fonts: a Cinérea carrega Fraunces e ali está certo, mas aqui a mesma folha serve as páginas institucionais, e a regra de zero requisição externa vale para todas elas. =========================================================================== */ :root{ --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --serif: ui-serif, 'New York', Georgia, 'Times New Roman', serif; /* Papel levemente frio: é água, não cinza de lenha. O mesmo `#F6F5F2` da página inicial, para o painel não parecer outro produto. */ --fundo:#F6F5F2; --painel:#FCFBF9; --areia:#EAE8E3; --texto:#14201F; --fraco:#5F6E6C; --tenue:#8C9694; --linha:#D6D2CB; --tinta:#14201F; /* botão primário: cor de tinta, não acento */ --acento:#0B7C77; --realce:#0B7C77; --perigo:#B91C1C; --bom:#15803D; } @media (prefers-color-scheme: dark){ :root{ --fundo:#151A19; --painel:#1B2221; --areia:#232B2A; --texto:#F1F4F3; --fraco:#A5B0AE; --tenue:#849290; --linha:#2C3937; /* A tinta INVERTE: o botão primário continua sendo "a cor do texto sobre a cor do fundo", e é isso que mantém o contraste alto nos dois temas sem botão nenhum precisar de exceção. */ --tinta:#EDF2F1; /* `--acento` não clareia: ele é fundo de botão com texto branco, e o contraste que importa é contra o branco, que não muda com o tema. `--realce` clareia porque vira texto sobre fundo escuro. */ --acento:#0B7C77; --realce:#2DD4CB; --perigo:#F87171; --bom:#4ADE80; } } *{margin:0;padding:0;box-sizing:border-box} body{ background:var(--fundo); color:var(--texto); font-family:var(--fonte); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; } /* Título em serifa peso 400: a costura com a página inicial. O `` dentro de um parágrafo continua sans: serifa aqui é hierarquia, não ênfase. */ h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.005em} a{color:var(--realce)} label{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue); margin:15px 0 6px; } /* Rótulo que ENVOLVE conteúdo não é rótulo de campo. O estilo acima existe para a etiqueta curta acima de um input; quando o `