/* ========================================================================= Cia de Agentes — Identidade Registro tokens.css · v2.0 · fonte única de tokens visuais ------------------------------------------------------------------------- Uso: Nenhuma página deve declarar :root com hex literal. Se falta um token, ele é adicionado AQUI — não na página. ========================================================================= */ /* ---- 1. Fontes locais (OFL) — sem dependência de Google Fonts ----------- */ @font-face{font-family:"Fraunces";src:url("../fontes/Fraunces-Variavel.ttf")format("truetype-variations");font-weight:400 650;font-style:normal;font-display:swap} @font-face{font-family:"Fraunces";src:url("../fontes/Fraunces-Italico-Variavel.ttf")format("truetype-variations");font-weight:400 650;font-style:italic;font-display:swap} @font-face{font-family:"Public Sans";src:url("../fontes/PublicSans-Variavel.ttf")format("truetype-variations");font-weight:300 700;font-style:normal;font-display:swap} @font-face{font-family:"Public Sans";src:url("../fontes/PublicSans-Italico-Variavel.ttf")format("truetype-variations");font-weight:300 700;font-style:italic;font-display:swap} @font-face{font-family:"Spline Sans Mono";src:url("../fontes/SplineSansMono-Variavel.ttf")format("truetype-variations");font-weight:300 700;font-style:normal;font-display:swap} @font-face{font-family:"Spline Sans Mono";src:url("../fontes/SplineSansMono-Italico-Variavel.ttf")format("truetype-variations");font-weight:300 700;font-style:italic;font-display:swap} :root{ /* ---- 2. Superfícies (papel) ------------------------------------------ */ --paper:#f6f3ec; /* fundo base da página */ --paper-up:#fffdf8; /* superfície elevada: card, painel, folha */ --paper-tile:#efe9db; /* tile, trilho de barra, coluna-rótulo */ --rule:#e2dccd; /* filete 1px, borda de componente */ --rule-strong:#1c1a15; /* filete estrutural (fim de header, footer) */ /* ---- 3. Tinta (texto) ------------------------------------------------ */ --ink:#1c1a15; /* texto forte, títulos, números */ --ink-soft:#57534a; /* corpo secundário, legendas */ --ink-weak:#6b6659; /* rótulos, eixos, metadados — 4,7:1 no tile */ /* #8a8578 era o valor antigo: 3,0:1 sobre --paper-tile, abaixo de AA aos 10–12px onde este token é usado. Só sobrevive sobre fundo escuro, e lá ele volta pelo tema noturno abaixo. Uso decorativo (ponto de status neutro, filete tracejado) pode continuar em #8a8578. */ --ink-faint:#8a8578; /* SÓ decorativo — nunca texto */ /* ---- 4. Verde-selo (marca e DESTAQUE — nunca clique) ----------------- */ /* Número-chave, mote, gancho, marcador, hub do símbolo, aba ativa. Não veste link nem botão: quem clica é laranja-tinta (bloco 4a). */ --selo:#1e5f4e; /* destaque canônico · 6,76:1 no papel */ --selo-hi:#2d7a66; /* realce, anel de foco */ --selo-soft:#4f9a82; /* 3º tom de UI e noturno (fundo escuro) */ --selo-lo:#14453a; /* detalhe escuro, 4º tom de UI */ --on-selo:#f2efe6; /* texto/ícone sobre verde-selo */ /* ---- 4a. Rosa-tinta (CLIQUE) ----------------------------------------- */ /* Matiz 340°, quase oposto ao verde (165°): separa marca de navegação sem sair da temperatura do papel. Veste link, botão, campo em foco, chip e bolha de chat. Deixou de ser acento de dado. */ --link:#5e1730; /* clique em repouso · 11,55:1 no papel */ --link-hover:#8f2547; /* SÓ hover de link em texto · 7,51:1 */ --link-soft:#c9587c; /* 2º tom: superfície, noturno */ --on-link:#fff6f8; /* texto/ícone sobre rosa */ /* ---- 4b. Acento secundário de dado ----------------------------------- */ /* Vazio nesta revisão: o rosa virou a cor de clique (bloco 4a) e o laranja-tinta assumiu o papel de 3ª série de gráfico (bloco 6). */ /* ---- 5. Semântico (não conta como acento) --------------------------- */ --ok:#15803d; --alerta:#c68f10; /* mostarda · 2,58:1 no papel — só superfície: */ /* faixa, chapa, ponto grande. Nunca texto. */ --on-alerta:#1c1a15; /* texto sobre a mostarda · 6,07:1 */ --erro:#c62016; /* vermelho · matiz 3° · 5,24:1 · longe do rosa */ --focus:#8f2547; /* anel de foco de teclado — acompanha o clique */ /* ---- 6. Gráficos de BI — ORDEM FIXA, só em gráficos ----------------- */ /* Três matizes bem separados primeiro (165° · 203° · 26°), depois os tons claros de cada um. Rosa saiu: era acento de dado sem função aqui. */ --g1:#1e5f4e; /* verde-selo · âncora · 6,76:1 */ --g2:#1a5f8a; /* azul-tinta · 6,22:1 */ --g3:#a8500e; /* laranja-tinta · 4,96:1 */ --g4:#4f9a82; /* verde claro · 3,02:1 */ --g5:#3d7fa8; /* azul claro · 3,95:1 */ --g6:#b5763a; /* laranja claro · 3,37:1 */ /* ---- 7. Tipografia -------------------------------------------------- */ --f-display:"Fraunces",Georgia,serif; --f-body:"Public Sans",Calibri,system-ui,sans-serif; --f-mono:"Spline Sans Mono",Consolas,ui-monospace,monospace; /* Escala tipográfica — 9 degraus, sem meio-pixel */ --t-11:11px; /* rótulo mono, eixo */ --t-12:12px; /* metadado, chip */ --t-14:14px; /* corpo pequeno, tabela */ --t-16:16px; /* corpo */ --t-18:18px; /* título de widget */ --t-22:22px; /* h3 */ --t-28:28px; /* h2 / KPI */ --t-38:38px; /* h1 */ --t-52:52px; /* número-herói */ --lh-tight:1.2; --lh-normal:1.5; --lh-text:1.6; /* Tracking canônico do wordmark e dos rótulos */ --track-wordmark:.22em; --track-label:.18em; /* ---- 8. Espaçamento — base 4, só estes degraus ---------------------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; /* ---- 9. Raio — 4 degraus + pill ------------------------------------- */ --r-sm:4px; /* tag, code, micro-barra */ --r-md:8px; /* botão, input, chip reto */ --r-lg:12px; /* card, painel */ --r-xl:16px; /* tela, container maior */ --r-pill:999px; /* ---- 10. Elevação — 3 degraus --------------------------------------- */ --e-1:0 1px 2px rgba(28,26,21,.05); --e-2:0 8px 20px rgba(28,26,21,.08); --e-3:0 14px 34px rgba(28,26,21,.12); /* ---- 11. Layout ----------------------------------------------------- */ --wrap:1040px; --wrap-pad:26px; --hit:44px; /* alvo mínimo de toque */ /* ---- 12. Movimento -------------------------------------------------- */ --dur-fast:120ms; --dur:180ms; --ease:cubic-bezier(.2,0,.2,1); } /* ---- 13. Tema escuro (o logo nasceu para fundo escuro) ----------------- */ :root[data-tema="tinta"]{ --paper:#14120e; --paper-up:#1c1a15; --paper-tile:#26231c; --rule:#38342a; --rule-strong:#ece7db; --ink:#f2efe6; --ink-soft:#c3bcab; --ink-weak:#8a8578; --selo:#4f9a82; --selo-hi:#6fb59c; --selo-soft:#2d7a66; --selo-lo:#1e5f4e; --on-selo:#14120e; --link:#d4718f; /* repouso: tom cheio sobre tinta */ --link-hover:#c9587c; /* hover recua para o rosa profundo */ --link-soft:#8f2547; --on-link:#14120e; --on-rosa:#14120e; --g2:#5b9bc4; --g3:#e08b4a; --g4:#6fb59c; --g5:#8fbfdc; --g6:#efb98a; --focus:#6fb59c; --e-1:0 1px 2px rgba(0,0,0,.4); --e-2:0 8px 20px rgba(0,0,0,.45); --e-3:0 14px 34px rgba(0,0,0,.5); } @media(prefers-color-scheme:dark){ :root:not([data-tema="papel"]){ color-scheme:dark; } } /* ---- 14. Impressão — papel é papel ------------------------------------ */ @media print{ :root{ --paper:#fff; --paper-up:#fff; --paper-tile:#f2efe6; --e-1:none; --e-2:none; --e-3:none; } @page{ size:A4; margin:20mm 25mm; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#57534a } .nao-imprimir{ display:none !important } } /* ---- 15. Movimento reduzido ------------------------------------------- */ @media(prefers-reduced-motion:reduce){ :root{ --dur-fast:0ms; --dur:0ms } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important } }