/* Camada de tokens. Tematizar para outro cliente e trocar este arquivo e remedir os contrastes em docs/design-system.md. Nenhuma tela muda. Nenhum valor visual literal vive fora daqui. Mora em Jano.Identidade, servido as tres areas em /identidade/css/. */ :root { /* Camada 1 — paleta. So esta camada nomeia aparencia, e todo valor vem de clientes.md, onde a razao de contraste de cada par esta medida. Nenhuma tela usa estes tokens. */ --paleta-marinho: #000E3B; --paleta-branco: #FFFFFF; --paleta-amarelo: #F7BF00; --paleta-tinta: #231F20; --paleta-azul: #0062EC; --paleta-verde-acao: #00794F; /* O VERDE DA MARCA, e ele GANHOU UM PAPEL em 2026-09-05. Ate aqui ficava registrado e sem papel: a 2,7:1 com branco reprova nos 4,5:1 de texto e tambem nos 3:1 de elemento nao-textual, e a ausencia de papel era a forma de dizer isso onde a proxima pessoa fosse procurar. O que mudou nao foi a cor: foi a pergunta. Ele nao serve como TINTA sobre branco — serve como SUPERFICIE, com o marinho por cima, e ai da 6,9:1. E e exatamente assim que o material da campanha o usa: a faixa sob o heroi e verde, com o texto escuro em cima. Amostrado dos logos vetoriais, onde a marca e um gradiente #00C480 -> #00A473; este e o meio dele, e e o que ja estava medido em clientes.md. */ --paleta-verde-marca: #00B478; /* O AZUL DA MARCA, amostrado do mesmo logo. Fica registrado e SEM papel, pelo motivo que o verde deixou de ter: a 4,2:1 com branco ele passa como elemento nao-textual e reprova como texto, e nao ha hoje um lugar em que so isso baste. Registrado para nao ser reamostrado toda vez que alguem abrir o material, e sem papel para nao virar enfeite. */ --paleta-azul-marca: #0076FF; /* A MENTA: o fundo fraco do site publico, pedido pelo autor em 2026-09-05 ("as cores estao estranhas, seria melhor usar as cores do material e ter um bg fraco"). E a nevoa com a cor da marca dentro: separa-se do branco do cartao exatamente como a neutra (1,08:1 nas duas), e mantem o texto de apoio em 5,6:1. Trocar a neutra pela menta no site nao mexeu em nada do admin, que continua na nevoa. */ --paleta-menta: #EDF9F3; /* Acrescentadas em 2026-09-03, para a casca do admin: superficie, hover, borda e erro. Ate aqui o projeto tinha DUAS superficies — branco e marinho — e nenhuma borda suave, e por isso nao havia como desenhar barra lateral, linha de tabela alternada ou estado de passagem do mouse sem inventar cor na folha. Cada uma foi medida; ver design-system.md. */ --paleta-nevoa: #F4F6FA; --paleta-nevoa-forte: #E7ECF6; --paleta-cinza-borda: #7C87A6; --paleta-vermelho: #A4161A; /* As duas cores de SERIE que faltavam. Verde e azul ja existiam e servem; roxo e laranja entram para o dashboard poder mostrar mais de uma serie no mesmo grafico. O conjunto dos quatro foi validado por script, e nao no olho: faixa de luminosidade, piso de croma, separacao para daltonismo (deutan e tritan), piso de visao normal e contraste com o fundo. O marinho foi TESTADO e REPROVADO como cor de serie — escuro demais e sem croma, ele le como cinza num grafico. Continua sendo texto e topo. */ --paleta-roxo: #6B3FA0; --paleta-laranja: #A85400; /* Texto de apoio, acrescentado em 2026-09-04 para a casca do admin sobre o Tabler: o cinza de borda (3,6:1) serve para separar regiao e REPROVA como texto. Este da 6,1:1 sobre o branco e 5,6:1 sobre a nevoa; ver design-system.md. */ --paleta-cinza-texto: #55618A; /* Camada 2 — papeis. O que as telas usam. */ --cor-fundo: var(--paleta-branco); --cor-texto: var(--paleta-marinho); --cor-borda: var(--paleta-marinho); --cor-acao-fundo: var(--paleta-verde-acao); --cor-acao-texto: var(--paleta-branco); --cor-foco: var(--paleta-azul); --cor-sucesso: var(--paleta-verde-acao); --cor-aviso-fundo: var(--paleta-amarelo); --cor-aviso-texto: var(--paleta-tinta); /* Superficie secundaria: barra lateral, linha alternada, cabecalho de tabela. O texto principal sobre ela da 17,2:1, entao ela nao muda nada do que ja se lia. */ --cor-superficie: var(--paleta-nevoa); /* O FUNDO FRACO do site publico. A pagina abaixo do heroi fica sobre ele, e e ele que leva a cor da campanha ate o fim da pagina sem competir com nada. O admin continua na nevoa neutra (`--cor-superficie`): a menta e do site, onde a marca tem de aparecer. */ --cor-fundo-suave: var(--paleta-menta); /* A COR DE MARCA COMO SUPERFICIE, com o texto que vai por cima dela. Nunca o contrario: o verde e fundo, o marinho e tinta, e a inversao reprova (2,7:1). O par esta medido em design-system.md, e ha teste que remede. */ --cor-marca: var(--paleta-verde-marca); --cor-marca-texto: var(--paleta-marinho); /* O estado de passagem do mouse. Ate 2026-09-03 nao havia UMA regra `:hover` na folha, e linha de tabela clicavel sem retorno de passagem parece morta. */ --cor-superficie-hover: var(--paleta-nevoa-forte); /* Borda que separa sem gritar. A borda existente (`--cor-borda`, marinho) continua sendo a do campo, onde a linha IDENTIFICA o controle e precisa dos 3:1; esta e para separar regiao, e alcanca 3,6:1 assim mesmo. */ --cor-borda-suave: var(--paleta-cinza-borda); /* A cor de erro que `app.css` registrava como ausente. Agora existe e foi medida — mas a regra nao mudou: cor sozinha nunca carrega a informacao, e todo erro continua tendo palavra e icone ao lado. */ --cor-erro: var(--paleta-vermelho); /* O texto que apoia sem competir: subtitulo de indicador, data ao lado do nome, ajuda de campo no admin. Nunca para o que a pessoa precisa ler para agir. */ --cor-texto-apoio: var(--paleta-cinza-texto); /* As series dos graficos, em ordem FIXA. Nunca ciclar: a quinta serie vira "outras", vira grafico separado, ou some. A cor segue a entidade, e nao a posicao dela no ranking. */ --cor-serie-1: var(--paleta-verde-acao); --cor-serie-2: var(--paleta-azul); --cor-serie-3: var(--paleta-roxo); --cor-serie-4: var(--paleta-laranja); /* O topo: a faixa de identidade que abre toda pagina das tres areas. Marinho com texto branco e o MESMO par do texto principal, invertido — 18,7:1. O foco sobre ele e amarelo (10,7:1), porque o azul de foco some no marinho. */ --cor-topo-fundo: var(--paleta-marinho); --cor-topo-texto: var(--paleta-branco); --cor-topo-foco: var(--paleta-amarelo); /* Tipografia. A fonte da identidade entra na fatia 4; ate la vale a pilha do sistema, que nao tem nada a baixar e nao falha na porta. --fonte-titulo existe separada para que essa troca seja uma linha, e nao uma varredura por nove telas. */ --fonte-base: system-ui, "Segoe UI", Roboto, Arial, sans-serif; --fonte-titulo: var(--fonte-base); --texto-tamanho-titulo: 1.75rem; /* O TAMANHO DO DESFECHO (telas-que-crescem, 2026-09-12). E o nome na tela "pode entrar", e ele nao e um titulo: e o unico elemento que a FILA ATRAS precisa enxergar, e que a pessoa confere de pe do outro lado da mesa. No tamanho de titulo (1.75rem) ele perdia essa funcao numa tela de notebook. UM token com `clamp()`, e nao dois valores por largura: `@media` nao aceita `var()` e unidade literal reprova no portao fora deste arquivo, entao o crescimento tem de vir de dentro do proprio token. O `vw` no meio e o que faz o nome subir de 40 px num celular de 390 a 64 px num notebook, sem ponto de quebra nenhum. O teto existe por causa de nome longo: sem ele, uma tela larga com "Maria Aparecida dos Santos Nascimento" quebraria em tres linhas. Com teto, quebra em duas — ver `overflow-wrap` em `.pronto-nome`. */ --texto-tamanho-desfecho: clamp(2.5rem, 5vw, 4rem); --texto-tamanho-destaque: 1.375rem; --texto-tamanho-corpo: 1.125rem; --texto-tamanho-apoio: 1rem; --texto-altura-linha: 1.5; --texto-peso-normal: 400; --texto-peso-forte: 700; /* Espaco, raio, borda, foco e toque. A escala de espaco e ordinal de proposito: adjetivo acaba na quinta tela e vira --espaco-medio-grande. */ --espaco-1: 0.25rem; --espaco-2: 0.5rem; --espaco-3: 1rem; --espaco-4: 1.5rem; --espaco-5: 2rem; --espaco-6: 3rem; /* A LARGURA MAXIMA DO LOGOTIPO DO EVENTO no seletor e na lista do admin (2026-09-14). Nao e um espaco da escala: e o limite de uma imagem de proporcao desconhecida. A altura fica em --espaco-5, e esta largura e o que impede um logotipo deitado de empurrar o nome do evento para fora da linha. */ --marca-largura: 6rem; --raio-1: 0.25rem; --raio-2: 0.75rem; --borda-espessura: 1px; --filete-espessura: 4px; --foco-espessura: 3px; --foco-afastamento: 2px; --acao-borda-espessura: 2px; --toque-minimo: 64px; --icone-tamanho: 1.5rem; --largura-conteudo: 34rem; /* Paginas com tabela (as do admin) precisam de mais largura do que um formulario de celular. E a unica excecao a --largura-conteudo, e so o admin a usa. */ --largura-larga: 64rem; /* Medidas da casca do admin, acrescentadas em 2026-09-03. Elas vivem aqui e nao na folha porque o teste de convencao reprova qualquer medida com unidade fora deste arquivo — e tambem porque uma barra lateral que muda de largura muda em um lugar so. */ --largura-barra-lateral: 15rem; --largura-cartao-minimo: 16rem; --largura-total: 90rem; /* A escala do SITE PUBLICO, acrescentada em 2026-09-05 (site-de-inscricoes-completo). A portaria e dedo em pe, com fila e sol, e fica nos 64 px de --toque-minimo; o site e lido sentado, em casa, e um campo de 64 px numa tela de 1920 parece outro produto. 48 px fica acima do piso de toque das duas plataformas. --largura-site e a faixa de duas colunas: o cartao do formulario e o bloco do evento ao lado. */ --toque-site: 48px; --largura-site: 72rem; /* MOVIMENTO (interface-mais-viva, 2026-09-08). Duas duracoes e uma curva, e nenhuma tela conhece milissegundos — trocar o ritmo do produto inteiro e trocar estas linhas. `--movimento-curto` e para RESPOSTA A UM TOQUE: foco, botao apertado, linha realcada. E curto porque nao e animacao, e confirmacao — acima de ~150 ms deixa de parecer resposta e passa a parecer atraso, e na portaria atraso e segundo por pessoa no pico. `--movimento-medio` e para ENTRADA DE CONTEUDO, e so o site publico o usa. A portaria nao anima entrada nenhuma: la o cartao de resultado precisa estar legivel no primeiro quadro em que existe, e quem le tem fila atras. A curva desacelera no fim (sai rapido, chega devagar): e a que faz o movimento parecer resposta e nao transporte. */ /* A FONTE DO CODIGO CURTO DE ERRO. Largura fixa porque ele existe para ser LIDO EM VOZ ALTA por telefone — a organizadora cruza o codigo com o log —, e `0` contra `O` numa fonte proporcional ja custou ligacao em muito sistema. Pilha do proprio sistema, sem baixar nada. */ --fonte-codigo: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; --movimento-curto: 120ms; --movimento-medio: 320ms; --movimento-curva: cubic-bezier(.2, .7, .3, 1); } /* QUEM PEDE MENOS MOVIMENTO NAO RECEBE MOVIMENTO NENHUM, e o desligamento mora AQUI, num lugar so: as folhas nunca repetem esta media query. Zerar a duracao (e nao remover a transicao) e o que faz isso valer para tudo que ja existe e para tudo que alguem escrever depois sem lembrar desta regra — a propriedade continua declarada, o tempo e que vira zero. Nao e acessibilidade decorativa: para quem tem sensibilidade vestibular, movimento em tela e enjoo de verdade, e aqui isso aconteceria com fila atras. */ @media (prefers-reduced-motion: reduce) { :root { --movimento-curto: 0s; --movimento-medio: 0s; } *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } }