/* ========================================================================= JYNX · tokens de design Vale para JYNX Sistemas e JYNX Serviços. Versão 2.0 · 08/10/2026 · substitui a 1.0 O QUE MUDOU DA 1.0 1. Entrou o tema escuro inteiro, com valor próprio para cada token. Ele foi decidido, não invertido: cada cor foi escolhida e medida. 2. Entrou a regra do laranja, que muda de tema para tema. 3. Os contrastes do tema escuro estão no comentário de cada token. COMO USAR 1. Este arquivo é a fonte única da verdade. Importe antes de qualquer outro CSS do site ou da landing page. 2. Nenhum hexadecimal, tamanho de fonte ou espaçamento é escrito fora daqui. Se faltar um token, o token nasce aqui, não na página. 3. O tema claro é o padrão. O escuro entra com data-theme="escuro" no elemento raiz. Nada mais muda: os nomes dos tokens são os mesmos. LEGENDA DOS COMENTÁRIOS [MEDIDO] valor lido ao vivo no site [PROPOSTO] valor novo, criado aqui [DERIVADO] valor calculado a partir de um medido, para atender contraste [DECISÃO] ponto que depende de escolha de marca, não de técnica A REGRA DE CONTRASTE DESTE SISTEMA Todo token de texto passa em 4,5:1 na pior superfície do seu tema. Todo token de componente e o anel de foco passam em 3:1. Os números são calculados, não estimados. Token novo, calcule antes. A REGRA DO LARANJA, QUE É A QUE MAIS ERRA No tema claro, --jx-marca desenha e --jx-marca-forte escreve. No tema escuro isso muda: sobre fundo escuro o laranja ganha contraste, e --jx-marca também escreve, com 5,41. ========================================================================= */ :root, [data-theme="claro"] { /* ------------------------------------------------------------------ 1 · COR DE MARCA ------------------------------------------------------------------ */ /* O laranja da JYNX. Superfície grande, ícone, selo, barra, detalhe e anel de foco. [MEDIDO] 3,32 no fundo base. NÃO use em texto pequeno nem como fundo de texto branco pequeno. */ --jx-marca: #F85406; /* O mesmo laranja escurecido só o necessário para escrever. [DERIVADO] 4,51 na pior superfície clara; texto branco em cima dá 4,99. Use em link, texto pequeno em laranja e preenchimento de botão sempre que o texto do botão for menor que 24px no peso 600. */ --jx-marca-forte: #C64305; /* Pressão e passagem do mouse sobre superfície de marca. [DERIVADO] texto branco em cima dá 6,38. */ --jx-marca-pressa: #A93A04; /* Laranja de fundo, para realce de bloco e chip. [PROPOSTO] só fundo, nunca texto. */ --jx-marca-veu: #FDEDE4; /* ------------------------------------------------------------------ 2 · SUPERFÍCIE Três níveis. O relevo vem da diferença entre eles, não de sombra. Não empilhe os três no mesmo ponto da tela. ------------------------------------------------------------------ */ --jx-sup-alta: #FFFFFF; /* [PROPOSTO] cartão e campo, avança */ --jx-sup-base: #FFFEF9; /* [MEDIDO] fundo da página, o branco quente */ --jx-sup-baixa: #F7F3E9; /* [PROPOSTO] faixa de seção, rodapé, recua */ /* ------------------------------------------------------------------ 3 · TEXTO Os números são o pior caso, sobre --jx-sup-baixa. ------------------------------------------------------------------ */ --jx-texto: #242D37; /* [MEDIDO] corpo e título. 12,59 */ --jx-texto-fraco: #66707C; /* [DERIVADO] apoio, legenda. 4,54 */ --jx-texto-inerte: #8C8676; /* [PROPOSTO] desabilitado. 3,28 */ --jx-texto-claro: #FFFFFF; /* sobre superfície de marca */ /* ------------------------------------------------------------------ 4 · ESTADO Dois tokens cada. O forte é ícone, borda e preenchimento. O texto é a palavra escrita. Nunca escreva com o forte. Cor nunca é o único sinal: borda, ícone e frase andam juntos. ------------------------------------------------------------------ */ --jx-ok: #1F9E57; /* [MEDIDO] 3,11 */ --jx-ok-texto: #197F46; /* [DERIVADO] 4,55 */ --jx-aviso: #DC6803; /* [PROPOSTO] 3,15 */ --jx-aviso-texto: #B35402; /* [DERIVADO] 4,53 */ --jx-erro: #D92D20; /* [PROPOSTO] 4,36 */ --jx-erro-texto: #D52C1F; /* [DERIVADO] 4,50 */ /* ------------------------------------------------------------------ 5 · BORDA E FOCO ------------------------------------------------------------------ */ --jx-borda: #E8E3D6; /* [PROPOSTO] divisória decorativa */ --jx-borda-campo: #8C8676; /* [PROPOSTO] borda de campo. 3,28 */ --jx-foco: var(--jx-marca); /* 3,03, passa em 3:1 */ } /* =========================================================================== TEMA ESCURO Decidido, não invertido. Cada valor foi escolhido e medido. Pior superfície deste tema: --jx-sup-alta #1E232A. =========================================================================== */ [data-theme="escuro"] { /* 1 · MARCA Aqui o laranja clareia, porque fundo escuro pede tinta mais clara. --jx-marca passa a escrever: 5,41 na pior superfície. */ --jx-marca: #FB6A24; /* [DERIVADO] 5,41 · desenha E escreve */ --jx-marca-forte: #FF8A4F; /* [DERIVADO] 6,77 · ênfase e link */ --jx-marca-pressa: #D9540F; /* [DERIVADO] pressão e hover */ --jx-marca-veu: #2A1D15; /* [PROPOSTO] fundo de realce, só fundo */ /* 2 · SUPERFÍCIE Mesma lógica do claro, invertida de sentido: alta avança, baixa recua. */ --jx-sup-alta: #1E232A; /* [PROPOSTO] cartão e campo */ --jx-sup-base: #161A1F; /* [PROPOSTO] fundo da página */ --jx-sup-baixa: #0F1216; /* [PROPOSTO] faixa, rodapé, cabeçalho de tabela */ /* 3 · TEXTO · pior caso sobre --jx-sup-alta */ --jx-texto: #F2EFE8; /* [DERIVADO] 13,76 */ --jx-texto-fraco: #A6AEB8; /* [DERIVADO] 7,05 */ --jx-texto-inerte: #767E88; /* [PROPOSTO] desabilitado */ --jx-texto-claro: #0F1216; /* sobre superfície de marca, aqui é escuro */ /* 4 · ESTADO */ --jx-ok: #35C97A; /* [DERIVADO] */ --jx-ok-texto: #5BD994; /* [DERIVADO] 8,88 */ --jx-aviso: #F59029; /* [DERIVADO] */ --jx-aviso-texto: #FFAE5C; /* [DERIVADO] 8,62 */ --jx-erro: #F2554A; /* [DERIVADO] */ --jx-erro-texto: #FF7A72; /* [DERIVADO] 6,23 */ /* 5 · BORDA E FOCO */ --jx-borda: #2C333B; /* [PROPOSTO] divisória decorativa */ --jx-borda-campo: #767E88; /* [PROPOSTO] borda de campo */ --jx-foco: var(--jx-marca-forte); /* o claro não tem força aqui */ } /* =========================================================================== O QUE NÃO MUDA ENTRE OS TEMAS =========================================================================== */ :root { /* ------------------------------------------------------------------ 6 · TIPOGRAFIA Duas famílias, e só duas. Uma terceira fonte é defeito. [DECISÃO] o título está em Bricolage Grotesque porque é o que o site usa hoje, medido em 08/10/2026. A documentação anterior dizia Archivo e dizia que Bricolage saía. [VERIFICAR com a marca: Bricolage ou Archivo] Se a decisão for Archivo, troque aqui e no site no mesmo dia. ------------------------------------------------------------------ */ --jx-fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif; --jx-fonte-texto: "Hanken Grotesk", system-ui, sans-serif; --jx-fonte-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Cinco degraus de título, um primeiro degrau por página. Um sexto tamanho significa que falta hierarquia, não tamanho. */ --jx-t1: 57px; --jx-t1-peso: 700; --jx-t2: 43px; --jx-t2-peso: 700; --jx-t3: 32px; --jx-t3-peso: 700; --jx-t4: 24px; --jx-t4-peso: 600; --jx-t5: 18px; --jx-t5-peso: 600; /* Quatro degraus de texto. */ --jx-c1: 20px; --jx-c1-peso: 400; --jx-c2: 16px; --jx-c2-peso: 400; --jx-c3: 14px; --jx-c3-peso: 400; --jx-rotulo: 12px; --jx-rotulo-peso: 700; /* ------------------------------------------------------------------ 7 · ESPAÇAMENTO Valor fora desta escala é defeito. ------------------------------------------------------------------ */ --jx-esp-1: 4px; --jx-esp-2: 8px; --jx-esp-3: 12px; --jx-esp-4: 16px; --jx-esp-5: 24px; --jx-esp-6: 32px; --jx-esp-7: 48px; --jx-esp-8: 64px; --jx-esp-9: 96px; /* ------------------------------------------------------------------ 8 · RAIO ------------------------------------------------------------------ */ --jx-raio-selo: 6px; --jx-raio-campo: 10px; --jx-raio-cartao: 16px; --jx-raio-pilula: 999px; /* ------------------------------------------------------------------ 9 · SOMBRA Existe uma só, e é para o que flutua acima da página: menu e modal. Relevo de cartão vem da diferença de superfície, não daqui. ------------------------------------------------------------------ */ --jx-sombra-flutua: 0 8px 24px rgba(36, 45, 55, .12); /* ------------------------------------------------------------------ 10 · LAYOUT E ACESSIBILIDADE ------------------------------------------------------------------ */ --jx-alvo-toque: 40px; /* mínimo de qualquer coisa clicável */ --jx-foco-largura: 3px; --jx-foco-folga: 2px; --jx-quebra-mobile: 640px; --jx-quebra-tablet: 900px; --jx-largura-leitura: 68ch; } /* =========================================================================== DEFEITO ABERTO NO SITE, REGISTRADO AQUI PARA NÃO SE PERDER O botão principal mede 16,96px no peso 600, com texto branco sobre --jx-marca. Isso dá 3,35:1, e o mínimo aplicável é 4,5:1, porque 16,96px no peso 600 não é texto grande pelo critério da WCAG. A correção é preencher com --jx-marca-forte, que dá 4,99:1 e é sutil a olho. [DECISÃO em aberto com a marca] =========================================================================== */