/* ============================================================================= Tema TINTA — o canvas ESCURO do kit (#151511) nome-exibido: Tinta ----------------------------------------------------------------------------- ESTE ARQUIVO É MANTIDO À MÃO. O gera-temas.mjs conhece o tema (ele deriva e REPORTA os números dele), mas não o reescreve: a entrada dele na PALETA leva `manual:true`. Ver por quê logo abaixo. ----------------------------------------------------------------------------- A PREMISSA QUE MUDOU EM RELAÇÃO AO PROJETO DO LÉO ----------------------------------------------------------------------------- No projeto de origem (leonicolazzitreinador) um theme-*.css tinha vinte linhas e trocava UMA coisa: a cor do botão. O fundo era preto em todos, por decisão de marca — "o link.me/hillerfit crava --customBackgroundColor:#000000" —, e o comentário no topo de cada arquivo gerado dizia isso com todas as letras: "O FUNDO NÃO MUDA". Aqui o fundo MUDA, e é ele que faz o tema. O kit do Alexandre traz os dois canvas — o claro e o `.canvas.escuro` (docs/MARCA.md §2) — e a cor da marca, o bronze #3E6E5E, é a MESMA nos dois. Ou seja: a diferença entre "mármore" e "tinta" não está no botão, está na superfície. Se este arquivo trocasse só o --gold, ele não trocaria nada: os dois temas têm o mesmo --gold. Consequência prática, e é ela que importa para quem for mexer aqui: · este arquivo sobrescreve SUPERFÍCIE (--page-rgb/--bg-rgb), RAMPA DE TEXTO (--text .. --muted-2), VIDRO, ARESTA, SOMBRA e a direção do --accent — não só o bloco do botão; · toda regra do site.css que precise saber "claro ou escuro" tem de ler um destes tokens. Uma cor cravada numa regra de layout passa despercebida no tema em que ela por acaso funciona e reprova no outro. Foi assim que o aro do chip do TikTok, o ícone do sino e o anel de foco do formulário apareceram na revisão; · e é por isso que ele não é gerado: o gerador sabe derivar uma cor de botão a partir de um hex, não uma rampa de texto medida contra o vidro de uma superfície nova. Enquanto ele não souber, gerar este arquivo significaria apagar medições e substituí-las por palpite. ----------------------------------------------------------------------------- Medido contra o CARTÃO #1C1C18 e contra o vidro #2A2A26 (o --glass-bg composto sobre o cartão — o vidro é o pior fundo da página): texto #E9E6DF 13,7:1 cartão · 12,4:1 vidro bronze #3E6E5E 2,9:1 do cartão — ABAIXO do piso: leva contorno branco sobre bronze 5,8:1 — o rótulo do botão --accent #5C9F88 5,5:1 cartão · 4,6:1 vidro ⚠ A PRIMEIRA VERSÃO MEDIU CONTRA A SUPERFÍCIE ERRADA, e as duas correções acima vêm daí. A conta foi feita contra #151511, que é a PÁGINA; o que fica atrás do texto e do botão é o CARTÃO, um passo acima, em #1C1C18. A diferença é de dois pontos de luz e parece desprezível — não é, porque os dois valores caíam em cima de um limiar: --accent #569882 4,61:1 contra #151511 -> 4,26:1 contra #1C1C18 (piso 4,5) bronze #3E6E5E 3,14:1 contra #151511 -> 2,93:1 contra #1C1C18 (piso 3,0) Um passava e o outro tinha forma; medidos no fundo certo, os dois reprovam. O `node contrast-check.mjs` pegou o primeiro (ele mede o pixel, não o token) e foi o que levou a rever o segundo à mão — o piso de 3:1 da barra não está na suíte porque não é contraste de TEXTO. A lição fica registrada porque ela se repete: neste projeto a página e o cartão têm cores diferentes, e a régua é sempre a superfície MAIS PRÓXIMA do elemento — para texto em caixa de vidro, o vidro; para o resto, o cartão. ============================================================================= */ :root[data-theme="tinta"]{ /* ---- Superfícies --------------------------------------------------------- A página é a tinta pura e o cartão é um passo ACIMA dela (#1C1C18), que é o inverso exato do mármore: lá a página é o tom de apoio, mais escuro que o cartão. Nos dois casos o cartão é a superfície mais próxima do olho, e nos dois a diferença é pequena de propósito — 1,2:1 — porque quem faz a moldura no desktop é a foto desfocada, não uma segunda cor. */ --page-rgb:21,21,17; /* tinta #151511 */ --bg-rgb:28,28,24; /* tinta+1 #1C1C18 */ /* Sombra volta a ser PRETO PURO: sobre a tinta, uma sombra na cor da tinta não existe — ela precisa ser mais escura que a superfície para desenhar. Todas as sombras do site.css leem este token, então esta linha basta. */ --sombra-rgb:0,0,0; /* A PLACA DE PEDRA em metade da opacidade do tema claro, e o motivo é físico, não estético: o `soft-light` é ~2× mais sensível sobre fundo escuro (a distância entre a claridade do fundo e a raiz dela é maior lá embaixo). Medido na página renderizada: .30 aqui entrega a mesma amplitude de veio que .55 no mármore. O ~18% que o docs/MARCA.md §4 cita é para a placa CRUA; o site.css a passa por um `contrast(16)` antes de mesclar, e por isso o número daqui é maior que o de lá. */ --grain:.30; /* O RELEVO VOLTA A SER LUZ. É a regra invertida, e é o teste de que o token está fazendo o trabalho dele: sobre fundo escuro, sombra escura não desenha — o que levanta o cartão é uma linha CLARA no topo, que o olho lê como luz vindo de cima. O nome do token (--aresta-luz) descreve este caso; no mármore ele carrega uma sombra, e o comentário lá explica a inversão. */ --aresta-luz:rgba(233,230,223,.10); /* ---- Vidro: MÁRMORE a baixa opacidade sobre a tinta --------------------- Mesmas opacidades do tema claro (.07 / .12 / .20) — o que troca é a tinta que entra. Compostas sobre o cartão elas dão #282824 / #313129 / #42423C; sobre a PÁGINA, #24241F / #2E2E2A / #3F3F3A. O número que vale para medir contraste é o da página, que é o mais escuro dos dois. */ --glass-bg:rgba(233,230,223,.07); --glass-bg-2:rgba(233,230,223,.12); --glass-border:rgba(233,230,223,.20); --glass-shadow:0 10px 24px -16px rgba(0,0,0,1); --surface:rgba(233,230,223,.07); --surface-2:rgba(233,230,223,.12); --hairline:rgba(233,230,223,.20); --shadow-card:0 30px 70px -30px rgba(0,0,0,1); /* ---- Texto (sobre a TINTA) ---------------------------------------------- A rampa desce do mármore até a pedra, passando pelos tons intermediários da mesma família — nenhum cinza neutro entra, senão a página escura ficaria azulada ao lado da clara. Cada valor cruza 4,5:1 contra o VIDRO, não só contra o cartão. */ --text:#E9E6DF; /* 14,7:1 cartão · 12,5:1 vidro */ --text-2:#C9C5B9; /* 10,6:1 cartão · 9,0:1 vidro */ --muted:#A8A395; /* 7,3:1 cartão · 6,2:1 vidro */ --muted-2:#8F8A7C; /* 5,3:1 cartão · 4,5:1 vidro */ /* O nome no pé do hero volta ao claro, e o halo de segurança do text-shadow volta a ser escuro — os dois saem de --bg-rgb no site.css, então bastou a superfície mudar. Só o --on-hero e o --on-hero-2 precisam ser ditos aqui, porque são COR e não composição. */ --on-hero:#E9E6DF; --on-hero-2:rgba(233,230,223,.75); /* O aro dos chips de rede PRETA (TikTok, X). Aqui ele é indispensável: sem ele, um disco preto sobre a tinta vira um buraco no meio da fileira. */ --aro-preto:rgba(233,230,223,.28); /* ---- Botão: o MESMO bronze do tema claro -------------------------------- Não há um "bronze escuro". A cor da marca é uma só, e é ela que amarra os dois canvas do kit. O que muda é o que se pode fazer com ela: sobre a tinta o bronze separa 3,14:1 (acima do piso de 3, então a barra tem forma) contra 4,68:1 sobre o mármore. */ --gold:#3E6E5E; /* Bronze — texto branco: 5,8:1 */ --gold-light:#56947F; --gold-dark:#2E5548; --gold-grad:linear-gradient(135deg,#2E5548 0%,#3E6E5E 45%,#56947F 100%); --gold-ring:rgba(62,110,94,.55); --gold-glow:rgba(62,110,94,.5); --on-gold:#FFFFFF; /* A barra separa do CARTÃO (#1C1C18) por 2,93:1 — ABAIXO do piso de 3:1 que este projeto exige. A cor está certa e a FORMA do botão é que some: sobre a tinta, um retângulo de bronze escuro encosta no fundo e o olho perde a aresta. É exatamente o caso que o site.css descreve no cabeçalho e para o qual o token existe. O fio é o bronze CLAREADO, não uma cor nova: é o princípio do botão outline — devolve a aresta sem mexer no preenchimento escolhido. No tema mármore este token continua `transparent`, porque lá a barra separa 4,7:1 e se desenha sozinha. */ --gold-border:#5C9F88; --shine:#8AB0A4; /* Cor de TEXTO — a MESMA regra do tema claro com o sinal trocado: o bronze CLAREADO até cruzar 4,5:1 no pior fundo, que aqui é o vidro #24241F. O docs/MARCA.md §2 traz #4F8976 para este papel e ele NÃO passa — o kit mediu contra o fundo, e a régua deste projeto é o vidro. #5C9F88 fecha os dois: 5,5:1 no cartão, 4,6:1 no vidro. */ --accent:#5C9F88; /* 4,6:1 no vidro · 5,5:1 no cartão */ --accent-hover:#64AD94; /* 5,4:1 no vidro */ /* Verde e vermelho de estado voltam aos tons PASTEL. Eles foram escurecidos no tema claro para caber no mármore; sobre a tinta, os escuros dariam 2,3:1 e a mensagem de erro sumiria — o mesmo defeito, do outro lado. */ --ok:#5FD08A; /* 9,5:1 cartão · 8,1:1 vidro */ --err:#F08A82; /* 7,6:1 cartão · 6,4:1 vidro */ /* Os --seal-* NÃO entram aqui. O selo de verificado é o azul chapado do Instagram (#0095F6), definido uma vez no :root do site.css. Selo é sinal reconhecível, não enfeite: recolorido a cada tema, deixaria de dizer o que diz. É o único elemento colorido que não segue o tema. */ /* A foto desfocada do desktop volta a CLAREAR. No mármore ela precisa ficar mais escura que o cartão (brightness 2, medido); aqui, mais clara que ele — é a mesma regra "a moldura tem de diferir do cartão", com o sinal trocado. 1,28 é o valor medido no projeto de origem sobre fundo preto, e a foto da estátua é escura o bastante para ele continuar valendo. */ --blur-filter:blur(60px) saturate(.7) brightness(1.28); /* A barra de rolagem, o popup do