/* ========================================================================== Tokens — sistema "Campo Escuro", revisão 2 TEMA ÚNICO, ESCURO. O conceito é campo escuro: a luz oblíqua que revela o invisível só existe contra o escuro. POR QUE O ACENTO MUDOU. A cliente disse: "curto o azul escuro, curto o dourado/amarelo… o lilás não muito". O acento anterior era #7B8CEC, e a objeção dela é mensurável, não questão de gosto: em OKLCH, que é perceptualmente uniforme, #7B8CEC → matiz 274,3° (10,2° ALÉM do azul puro, rumo ao violeta) #0000FF → matiz 264,1° (o azul sRGB puro) #005EB8 → matiz 254,9° (azul institucional) #57A0FF → matiz 255,9° (o novo acento) O capítulo 8 media em HSL e concluía que 231° estava "fora do aglomerado institucional 207–217°". HSL esconde o desvio azul→violeta: a trava media o espaço errado. Mecanicamente, em #7B8CEC o canal verde supera o vermelho por apenas 17 pontos; no acento novo, por 73. É a distância G−R que decide entre "azul" e "lilás". O campo também mudou. #0B0F1C estava em OKLCH ~272° — ele ERA a fonte de violeta assim que o acento saísse de lá. A lógica original continua ("o fundo é o acento dessaturado"), só que agora aponta para 212°. Alterar valor aqui muda o site inteiro. Não redefinir cor fora daqui. ========================================================================== */ :root { color-scheme: dark; /* --- O campo: TRÊS degraus, não quatro. A escada anterior tinha quatro degraus com ΔL* de 3,4 · 2,6 · 3,4 — abaixo do limiar prático de "eu notei rolando", que fica por volta de 5 para superfície grande. Quatro degraus espremidos numa faixa escura foi o que produziu passos de 2,6. Somando: no nível de página o site usava DOIS fundos numa proporção de 15:1, e a cliente olhou dezessete seções iguais e disse "parece que é tudo meio que a mesma coisa". Era descrição literal do arquivo. Agora ΔL* 6,3 · 7,0 — cada passo é o dobro do anterior. --- */ --ink-950: #081422; /* o campo. L* 6,03 — fundo de tudo */ --ink-900: #0F2136; /* a faixa. L* 12,32 — o respiro entre seções */ --ink-800: #17304C; /* a superfície. L* 19,30 — card, painel, tabela */ --ink-500: #546878; /* linha informativa — 3,20:1 sobre o campo */ --ink-400: #97A6B4; /* texto secundário — 7,44:1 sobre o campo */ --ink-200: #DDE3E8; --ink-000: #FFFFFF; --paper: #F2F5F7; /* texto — 16,92:1 sobre o campo */ /* --- Azul: o da própria cliente. Matiz 214° em HSL, 256° em OKLCH. O -400 é o acento porque o -500 (a cor exata das peças dela) dá 3,82:1 dentro de um card e 3,52:1 como preenchimento sob texto branco — reprova nos dois. A cor dela fica no sistema, fazendo o trabalho que ela aguenta. --- */ --azul-400: #57A0FF; /* acento — 6,95:1 campo · 6,10 faixa · 5,04 superfície */ --azul-300: #8DB1F8; /* hover, estado ativo — 8,89:1 */ --azul-500: #2E86FF; /* grafismo e filete. NUNCA preenchimento sob branco */ --azul-900: #0F2A52; /* preenchimento profundo, borda de painel */ /* --- Ciano: a segunda voz cromática, 185°. Trinta graus de separação do azul, e é o par que a peça dela já usa. Dado e grafismo, nunca acento de interface. --- */ --ciano-300: #3FD3E0; /* 10,24:1 sobre o campo */ /* --- Âmbar: REBAIXADO. Ele entrou no sistema para resolver uma frase do briefing ("não quero algo frio, institucional") — foi inferência nossa a partir de palavras, não observação do trabalho dela. As peças que ela produz e publica são azul, branco e preto. Zero âmbar. Ele era nosso, não dela. Mas fica, e por um motivo que não é gosto: num sistema onde link, botão, filete de trilha, marcador e borda de card são todos azuis, um anel de foco azul é INVISÍVEL. O âmbar a 8,59:1 é a única cor de alto contraste do sistema que não é azul. WCAG 2.4.7 não se resolve sem ele, a menos que se invente uma terceira família. Uso permitido: foco, o do mural, o acento da trilha paciente e o . Nada decorativo. Nada de halo. --- */ --amber-400: #E8A33D; /* foco — 8,59:1 sobre o campo */ --amber-300: #F2BC6B; --amber-900: #3A2708; /* --- Campo claro — A PALETA DA REFERÊNCIA, 01/09/2026. Trocou de papel: era um objeto luminoso sobre o campo escuro ("luz é objeto, nunca é campo"). Agora o claro É o campo do site, e o escuro virou PONTUAÇÃO — abertura, uma faixa no meio, o fecho e o rodapé. O cliente entregou a página de referência e pediu estrutura, tipografia e paleta dela. Os valores vieram medidos de `pagina-formacao-microbiota.html`. Dos 25 pares daquela página, 20 passam AA. Os que reprovavam eram texto cinza sobre quase-branco (2,41:1 na assinatura do depoimento) e não entraram: aqui a assinatura usa --tinta-2, que dá 5,71:1. Medido, e não herdado do comentário anterior: #2B3440 sobre #FFFFFF ....... 12,59:1 corpo #5A6672 sobre #FFFFFF ........ 5,87:1 apoio #1668B8 sobre #FFFFFF ........ 5,67:1 link #FFFFFF sobre #1668B8 ........ 5,67:1 botão cheio #2B3440 sobre #E8F0F8 ....... 10,94:1 corpo na faixa #5A6672 sobre #E8F0F8 ........ 5,10:1 apoio na faixa #1668B8 sobre #E8F0F8 ........ 4,92:1 link na faixa --- */ --claro: #FFFFFF; /* o campo. Branco puro, não mais #F4F7FA */ --claro-000: #E8F0F8; /* a faixa clara e o card. O "azul-claro" da referência */ --tinta: #2B3440; /* 12,59:1 */ --tinta-2: #5A6672; /* 5,87:1 no branco · 5,10:1 na faixa */ --azul-600: #1668B8; /* link, botão e filete no claro — 5,67:1 */ --azul-700: #0F5695; /* hover do botão cheio */ --azul-caixa: #0B5FFF; /* a caixa sólida da peça DELA. Preservada: é gesto de marca, não cor de interface. */ --btn-principal-tinta: var(--ink-950); /* invertido dentro de .campo-claro */ --linha-clara: #D8E2EC; /* decorativa — 1,31:1. Só onde o texto já separa */ --linha-clara-forte: #71818F; /* informativa — 4,01:1 no branco · 3,48:1 na faixa. ERA #7E8C99, e reprovava 1.4.11: dava 3,44:1 no branco mas 2,99:1 na faixa. Ficou pendente ontem porque trocá-la no meio da reconstrução mexia em 11 lugares. A troca de campo obrigou a revisita, então foi corrigida agora. */ --foco-claro: #8A5A12; /* 5,91:1 no branco · 5,14:1 na faixa */ /* --- Navy: o escuro como PONTUAÇÃO, não como campo. Três usos e só três: a abertura, a faixa do meio e o fecho. Mais o rodapé, que usa o mais profundo. --- */ --navy: #0A2540; --navy-deep: #061A2E; --sobre-navy: #EAF1F8; /* corpo — 13,64:1 */ --sobre-navy-2: #B9CFE4; /* apoio — 9,70:1 */ --sobre-navy-3: #9FC0DE; /* rótulo — 8,19:1 */ --sobre-navy-4: #7FA6C9; /* legenda e rodapé — 6,07:1 */ --linha-navy: rgba(255, 255, 255, .14); /* --- Sistema --- */ --success-300: #4FC79B; --danger-300: #FF8A80; /* --- Semânticos --- */ --bg: var(--ink-950); --surface: var(--ink-800); --surface-2: var(--ink-800); --faixa: var(--ink-900); --text: var(--paper); --text-2: var(--ink-400); /* --line é decorativa (1,38:1) e --line-strong é informativa (3,20:1). O divisor de seção usa a FORTE: com a decorativa ele ficava a 1,22:1, e quinze seções consecutivas eram separadas por quinze fios invisíveis. */ --line: var(--ink-800); --line-strong: var(--ink-500); --accent: var(--azul-400); --accent-hover:var(--azul-300); --track: var(--azul-400); --focus: var(--amber-400); /* Texto claro sobre fundo escuro irradia e parece mais pesado. */ --wght-body: 390; --wght-title: 580; /* --- Tipografia. A partir do momento em que o azul virou o azul de todo mundo, a tipografia passou a ser o que diferencia. As peças dela são sem serifa e de peso alto; o site é serifado e de peso baixo. Duas marcas com o mesmo azul e silhuetas opostas se distinguem. --- */ --font-serif: Georgia, "Times New Roman", serif; --font-sans: "Inter", "Inter-fb", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-display: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem); --fs-h1: clamp(2.5rem, 1.5rem + 4.44vw, 5.5rem); --fs-h2: clamp(2rem, 1.36rem + 2.85vw, 4.125rem); --fs-h3: clamp(1.5rem, 1.27rem + 1.02vw, 2.25rem); --fs-lead: clamp(1.375rem, 1.18rem + 0.87vw, 1.9375rem); --fs-corpo: clamp(1.0625rem, 1.021rem + 0.185vw, 1.1875rem); --fs-ui: 1rem; --fs-legenda: 0.875rem; --fs-micro: 0.75rem; /* --- Espaçamento: base 8 --- */ --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 32px; --e-5: 48px; --e-6: 64px; --e-7: 96px; --e-8: 128px; /* --- Forma. Raio de 4px é decisão de posicionamento: cápsula e canto de 24px+ são a assinatura do template de bem-estar. --- */ --raio: 4px; --largura-max: 1200px; --largura-leitura: 68ch; --coluna-artigo: 40rem; --sombra: 0 12px 32px rgba(0, 0, 0, .45); } /* ========================================================================== Trilhas — o mecanismo das duas audiências. O campo é o mesmo para os dois públicos, porque o campo é a marca. O que muda é o acento. Na trilha paciente o âmbar é o único uso não-foco que sobrou, e ele carrega a diferenciação sozinho — por isso o rótulo textual da trilha é obrigatório (WCAG 1.4.1: cor nunca é o único meio). ========================================================================== */ [data-trilha="pro"] { --accent: var(--azul-400); --accent-hover: var(--azul-300); --track: var(--azul-400); } /* A terceira porta. Sem regra própria ela caía no acento padrão e ficava IDÊNTICA à do profissional — três portas de peso igual, duas com a mesma cor, e a instituição sem identidade nenhuma. O ciano já estava declarado como "segunda voz cromática" e não era usado em lugar algum. Separação de matiz em OKLCH: 256° (profissional) · 204° (instituição) · 73° (paciente). Cinquenta graus entre as duas frias é o bastante para distinguir, e as três continuam carregando rótulo textual — cor nunca é o único meio (WCAG 1.4.1). */ [data-trilha="instituicao"] { --accent: var(--ciano-300); /* 10,24:1 sobre o campo */ --accent-hover: var(--azul-300); --track: var(--ciano-300); } [data-trilha="paciente"] { --accent: var(--amber-400); --accent-hover: var(--amber-300); --track: var(--amber-400); }