/* ============================================================ tokens.css — fonte única dos tokens de design (v3.1.1, 07/09/2026) Regra (auditoria de consistência de 07/09/2026): todo valor de cor, tamanho de fonte, entrelinha, espaçamento, raio, largura de grade e dimensão de figura usado no site vem DESTE arquivo. Nenhuma página declara :root; nenhuma folha usa px arbitrário. Portões: verificar_estrutura.js (escala e hex) e verificar_consistencia_visual.js (estilo computado em 3 larguras). MARCA (23/09/2026): a paleta abaixo É a da marca pessoal, hex por hex, e as três famílias tipográficas também. Duas regras da marca ficam DELIBERADAMENTE em aberto, por decisão da editoria: (1) o fundo é BRANCO, não escuro nem osso — decisão editorial de 05/09/2026, reafirmada em 23/09/2026; (2) alguns tons derivados fora dos dez hexes nomeados existem por necessidade de contraste AA e de codificação de dado, e estão marcados abaixo. Tema TÉCNICO sobre fundo branco (decisão editorial de 05/09/2026): base branca e osso-claro; tinta Vazio/Abissal; verde Musgo como cor de ação; terracota Argila/Âmbar como calor de dado; Sintético e Mineral como frios de dado; Areia como linha. Sem gradientes, exceto o medidor do MARÉ (E14). Paleta da marca: Vazio #0E0F0D · Abissal #15201A · Musgo #2E3D30 · Argila #7C4A34 · Âmbar #C9814B · Bioluz #A8C99A · Sintético #5E7C93 · Mineral #8FA5A8 · Areia #D6C4AC · Osso #EDE6D8. ============================================================ */ /* ---------- 1. Cor ---------- */ :root{ --bg: #FFFFFF; /* branco técnico */ --surface: #FFFFFF; /* painéis brancos, delimitados por linha */ --surface-2: #F0F4F3; /* mineral-claríssimo: trilhos, zebras, faixas de tabela */ --ink: #0E0F0D; /* VAZIO */ --muted: #55645B; /* musgo-texto (5,6:1 sobre branco) */ --line: #C5CFCE; /* mineral-claro: linhas e bordas técnicas */ --faixa-1: #E8EEED; --faixa-2: #D3DEDC; --faixa-3: #B5C7C4; --faixa-4: #8FA9A5; /* régua de faixas (regua-faixas) */ --green: #2E3D30; /* MUSGO — cor de ação e de "novo" */ --teal: #5E7C93; /* SINTÉTICO — frio de dado */ --violet: #7A6A4F; /* areia-escuro (dados) */ --slate: #8FA5A8; /* MINERAL — frio de dado, recorrente */ --rust: #7C4A34; /* ARGILA — nada localizado, urgente */ --amber: #C9814B; /* ÂMBAR — calor de dado (preenchimentos; texto só ≥18px) */ --link: #4F6B80; /* sintético-escuro (5,4:1 sobre branco) */ --terracota: #C04430; /* o "U" do logotipo — acento único, em dose mínima */ --neutro: #66736F; /* ausência de verificação ≠ ausência de documento (C7); 5,3:1 sobre branco */ --bioluz: #A8C99A; /* BIOLUZ — acento positivo, em dose mínima */ --areia: #D6C4AC; /* AREIA — trilhos das barras de prazo */ /* Tríade de risco (famílias do ciclo) */ --chuva: #5E7C93; --seca: #C9814B; --fogo: #7C4A34; /* 30/09/2026 (F.1): fundo dos gráficos do Pacífico — oceano noturno, da mesma família do fundo do mapa de fogo (--mapa-fogo-fundo), com o azul que a água pede. */ --grafico-oceano: #14202B; /* 07/10/2026 (maquete rev. 2 dos gráficos do Pacífico): a paleta dos DOIS gráficos sobre o oceano noturno. Eles tomavam emprestados os tons do mapa de fogo — brasa é brasa, e um gráfico de temperatura do mar pintado com a rampa do incêndio é duas famílias na mesma cor. Os valores são os aprovados na maquete; hexadecimal só entra aqui e em assets/mapas.js. */ --pacifico-agora: #DC6024; /* o ciclo em curso, nos dois gráficos: laranja avermelhado da família âmbar; 4,5:1 sobre o oceano (terracota é reserva da marca) */ --pacifico-serie-a: #EDE6D8; /* osso: o episódio de referência */ --pacifico-serie-b: #8FA5A8; /* mineral: os demais episódios, por traço e não por cor */ --pacifico-tinta: #C5CFCE; /* rótulo de eixo e anotação sobre o oceano */ --pacifico-tinta-fraca: #8FA5A8; /* rótulo secundário */ --pacifico-grade: #55645B; /* limiar tracejado e marca de eixo */ --pacifico-divisoria: #3A4A41; /* a virada de ano no gráfico 2 */ --pacifico-zero: #8FA5A8; /* a linha do zero */ /* 30/09/2026 (Proteja-se, item 10.4): o calor ganha ficha própria e precisa de cor própria. Ele ficava com o mesmo token da seca, e duas famílias com a mesma cor não são duas famílias. Laranja queimado entre --seca e --fogo, conferido em contraste. */ /* 01/10/2026: o calor era laranja queimado e saía quase igual ao ocre da seca no mapa nacional — duas famílias indistinguíveis lado a lado. Passa a vermelho, que é a cor que o site já associa a calor extremo, e o token é um só para o site inteiro. */ --calor: #A3271F; /* 30/09/2026 (rodada 2, item 8 — aprovado pela editoria): UMA ATMOSFERA POR FAMÍLIA DE RISCO. Todos os mapas eram iguais — mesmo fundo cinza, mesma UF de borda escura —, e mapa de fogo noturno não se lê como mapa de seca em papel ressecado. Cada família ganha fundo, rampa e marca próprios, na mesma ordem e nas mesmas famílias do resto do site. Os valores abaixo são os do handover, literais. Eles vivem aqui porque hexadecimal só entra em tokens.css e mapas.js; o motor único de mapas os lê por nome, e nenhum JS carrega cor solta. */ /* Fogo — noturno. Pontos por célula, mescla screen, núcleo claro onde há muito foco. */ --mapa-fogo-fundo: #15201A; --mapa-fogo-uf: #1E2B24; --mapa-fogo-contorno: #3A4A41; /* 30/09/2026: a brasa mais escura subiu de #8A3B1E para #BC5029. O valor aprovado, como DESENHADO */ /* /* (mescla screen, opacidade .78) sobre o fundo noturno, dava contraste 2,2 — abaixo dos 3:1 de */ /* /* componente gráfico que o próprio item 8 exige das rampas. #BC5029 é o menor passo na mesma */ /* /* matiz que alcança 3:1 no desenho; os degraus seguintes ficam como aprovados. */ --mapa-fogo-brasa-1: #BC5029; --mapa-fogo-brasa-2: #D8621F; --mapa-fogo-brasa-3: #F29A38; --mapa-fogo-nucleo: #FFE3A3; /* Seca — papel ressecado. A UF é pintada pela categoria que cobre metade da área. */ --mapa-seca-fundo: #F7F0E2; --mapa-seca-sem: #EFE6D3; --mapa-seca-s0: #E7C98E; --mapa-seca-s1: #D9A05B; --mapa-seca-s2: #B9702F; --mapa-seca-s3: #86461F; --mapa-seca-s4: #4E2812; /* Chuva e tempestades — ardósia. A UF é pintada pelo maior grau de aviso em vigor. */ --mapa-chuva-fundo: #1B2630; --mapa-chuva-sem: #2B3A46; --mapa-chuva-potencial: #4F7A97; --mapa-chuva-perigo: #7FA6C4; --mapa-chuva-grande: #C6B8E8; /* Calor — branco quente. O ESTADO NUNCA É PINTADO: o dado é da capital. */ --mapa-calor-fundo: #FFFDF9; --mapa-calor-contorno: #E3D7C8; --mapa-calor-1: #F4D9A8; --mapa-calor-2: #EDA35A; --mapa-calor-3: #D8561F; --mapa-calor-4: #9C1F12; /* Fumaça e qualidade do ar — névoa. O ESTADO NUNCA É PINTADO. */ --mapa-ar-fundo: #EEEEF1; --mapa-ar-contorno: #CFCFD8; --mapa-ar-1: #C9D6D1; --mapa-ar-2: #A7A9B8; --mapa-ar-3: #8A76A6; --mapa-ar-4: #5B3F7A; --mapa-ar-5: #2E1B45; /* Paleta nomeada: hex só aqui e em assets/mapas.js; páginas usam var(--…). */ --vazio:#0E0F0D; --abissal:#15201A; --musgo:#2E3D30; --argila:#7C4A34; --ambar:#C9814B; --bioluz:#A8C99A; --sintetico:#5E7C93; --mineral:#8FA5A8; --osso-claro:#F0F4F3; /* IQAr (CONAMA 506/2024; cores do IEMA-ES, relatório do INPE e boletim Vigiar n.º 4 da SES-DF). Espelho: PALETA.iqar em mapas.js. */ --iqar-boa:#4da42d; --iqar-moderada:#f7d400; --iqar-ruim:#ed8925; --iqar-muito-ruim:#cb0912; --iqar-pessima:#950060; --linha:#C5CFCE; --cinza-quente:#66736F; --sem-dado:#DCE3E2; --branco:#FFFFFF; --areia-escura:#7A6A4F; --zebra:#E9EEEC; --preto:#000000; --muted-token:#55645B; --osso:#EDE6D8; /* OSSO — a base clara da marca; até 26/09/2026 só existia como --tooltip-ink */ /* 26/09/2026 (pedido da editoria): o fundo dos campos de formulário era --surface-2, um mineral-claríssimo que sobre branco lê como o cinza padrão de navegador. Passa a osso: tom da paleta, quente, e a única base clara que o sistema de marca autoriza. Não muda zebra de tabela nem trilho de barra — esses continuam em --surface-2, que é o que eles são. */ --campo:#EDE6D8; --campo-borda:#CDBB9F; /* 26/09/2026 (pedido da editoria): o menu principal faz uma gradação da esquerda para a direita, do vermelho ao azul, como a barra do índice. Não é matiz novo: é o próprio --degrade-resposta lido ao contrário (ele já vai de frio a quente), amostrado em dez pontos — argila → âmbar → sintético. Termina no sintético e não no mineral porque o mineral é claro demais: como borda ele mediria 2,6:1 sobre branco, abaixo do mínimo de 3:1 da WCAG 1.4.11. O botão usa a cor cheia na borda e uma tinta dela no fundo, com texto em --ink. Medido: a pior borda fica em 3,16:1 e o pior texto em 11,5:1. Preenchido com texto branco reprovaria em oito dos dez botões, por isso não é preenchido. */ /* 27/09/2026 (pedido da editoria): o menu deixa de ter dez cores chapadas e passa a ser UMA peça — um só degradê atravessando a barra, e cada botão mostra a fatia dele. É a mesma viagem da barra do índice: quente e terroso à esquerda, frio e esverdeado à direita. O arco inteiro desce abaixo de L=0,175 e isso NÃO é gosto, é aritmética: com texto escuro o contraste só atinge 4,5:1 quando o fundo tem L>=0,201; com texto branco, quando tem L<=0,183. Entre 0,183 e 0,201 nenhum dos dois passa, e o arco do índice atravessa essa faixa morta duas vezes, debaixo de botão. Trazido para o registro escuro, o texto branco passa em qualquer posição — inclusive se um rótulo mudar de tamanho e as fatias se deslocarem. Medido: pior contraste 4,69:1 em 1280px, 4,72:1 em 768px, 4,70:1 em 375px. */ --degrade-menu: linear-gradient(90deg, #7C4A34 0.0%, #A56332 22.7%, #60787B 54.5%, #2E3D30 100.0%); --degrade-menu-vertical: linear-gradient(180deg, #7C4A34 0.0%, #A56332 22.7%, #60787B 54.5%, #2E3D30 100.0%); --gauge-trilho:#E7DECD; --gauge-borda:#CDBB9F; --gauge-osso:#F5F1E8; --gauge-cinza:#DDDED9; --ambar-escuro:#A87A50; --sintetico-escuro:#2A4457; --tooltip-bg:#141B16; --tooltip-ink:#EDE6D8; --sombra: 0 1px 3px rgba(21,32,26,.10); /* 15/09/2026: os DOIS únicos degradês do site (arte única de toda barra — medidores, micro-barras dos estados, barras por UF do MARÉ · Saúde). Índices de antecipação (MARÉ, MARÉ · Saúde): Argila → Âmbar → Mineral → Musgo; índice de resposta: Mineral → Sintético → Âmbar → Argila (frio → quente). Nenhuma folha redeclara um degradê. */ --degrade-indice: linear-gradient(90deg, var(--argila) 0%, var(--ambar) 20%, var(--mineral) 48%, var(--musgo) 88%); --degrade-resposta: linear-gradient(90deg, var(--mineral) 0%, var(--sintetico) 30%, var(--ambar) 65%, var(--argila) 100%); } /* ---------- 2. Tipografia ---------- Escala fixa de oito degraus (auditoria de 07/09/2026). Todo font-size do site é um destes tokens; 15 · 17 · 19 · 21 · 23 px etc. não existem. Cada degrau carrega a própria entrelinha. */ :root{ --font-titulo: 'Fraunces', Georgia, 'Times New Roman', serif; --font-corpo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-dado: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif; --fs-display: 48px; --lh-display: 1.1; /* título do site (inicial), número do medidor */ --fs-h1: 36px; --lh-h1: 1.15; /* título da página */ --fs-h2: 28px; --lh-h2: 1.2; /* título de seção */ --fs-h3: 22px; --lh-h3: 1.3; /* título de bloco / valor de indicador / nome do estado */ --fs-h4: 18px; --lh-h4: 1.3; /* título de figura e de cartão */ --fs-body: 16px; --lh-body: 1.6; /* corpo, apoio (.hint) */ --fs-small: 14px; --lh-small: 1.5; /* notas, células de tabela, campos, botões */ --fs-caption: 12px; --lh-caption: 1.4; /* versaletes, legendas, créditos, rótulos, navegação */ /* Marca (23/09/2026): o display é Fraunces LEVE. Nunca bold em título — a ousadia da marca se gasta em um lugar só, e não é no peso da fonte. */ --peso-display: 300; --peso-regular: 400; --peso-medio: 500; --peso-semibold: 600; --peso-bold: 700; --ls-caps: .12em; /* versaletes de dado, rótulos, cabeçalho de tabela (marca: .12em) */ --ls-nav: .02em; /* navegação principal (07/09/2026, PR #104): nove seções + CTA "Envie um plano ou decreto" numa linha só no desktop */ --ls-caps-largo: .14em; /* kicker, selo, mast-sub */ --ls-titulo: -.012em; /* display */ } /* ---------- 3. Espaçamento ---------- Escala fixa: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96. Margens, paddings e gaps só usam estes tokens. */ :root{ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* papéis */ --esp-secao: var(--sp-5); /* entre painéis/seções */ --esp-painel: var(--sp-5); /* padding interno do painel */ --esp-figura: var(--sp-4); /* padding interno da figura e do cartão */ --esp-grade: var(--sp-5); /* gap entre figuras/cartões na grade */ --esp-titulo: var(--sp-2); /* título → subtítulo / parágrafo seguinte */ --esp-figura-legenda: var(--sp-3); /* mídia → legenda; legenda → fonte */ } /* ---------- 4. Grade e pontos de quebra ---------- Conteúdo até 1180 px, 12 colunas, gap 24 px, margens laterais 24 px (16 px no celular). Pontos de quebra canônicos (portão): 1020 px (tablet) e 640 px (celular). */ :root{ --grade-max: 1180px; --grade-colunas: 12; --grade-gap: var(--sp-5); --grade-margem: var(--sp-5); --grade-margem-celular: var(--sp-4); } /* ---------- 5. Formas e figuras ---------- */ :root{ --radius: 6px; /* cantos curtos: registro técnico (painéis, figuras, cartões, campos) */ --radius-pill: 999px; /* pílulas, trilhos de barra */ --mapa-proporcao: 480 / 460; /* viewBox único dos mapas */ --grafico-altura: 260px; /* .figura--grafico padrão */ --grafico-altura-largo: 340px;/* .figura--largo (dispersões e séries em largura total) */ --tabela-altura-max: 480px; /* .tbl-wrap rolável dentro da figura */ --diagrama-altura: 300px; /* diagrama das MPs (rotas por órgão) */ --medida-leitura: 68ch; /* parágrafos corridos */ --alvo-toque: 44px; /* botões e itens de navegação no toque — 03/10/2026: de 40 para 44 px, a régua da direção de arte que o portão de conformidade passou a cobrar. O token é um lugar só, e por isso a correção valeu para todo botão do site de uma vez. */ }