/* ============================================================ bloom — tokens da identidade ONDE ESTA FOLHA MORA: bloom-site/tokens-bloom.css. Se você está lendo este arquivo em QUALQUER outro caminho, está lendo um ESPELHO. Edite lá, copie para cá — editar o espelho faz a mudança viver até a próxima cópia passar por cima dela, sem erro e sem aviso. Esta linha viaja junto com o arquivo justamente para chegar a quem abriu a cópia achando que era a fonte (aconteceu em 02/09/2026: o CLAUDE.md de outro produto apontava o próprio espelho como canônico). `bloom-site/conferir-tokens.py` compara todas as cópias conhecidas. A PALETA vale para todas as aplicações (decisão de Marianna, 31/08/2026). Nenhum produto tem paleta própria: a cor do ecossistema é distinção do SITE, onde os quatro aparecem lado a lado. Dentro do produto, quem distingue é o conteúdo. Mas o ALCANCE desta FOLHA não é o mesmo da paleta, e confundir os dois já produziu decisão errada (02/09/2026). Quem consome o quê: Orçamento OBZ tem um ESPELHO desta folha inteira e usa as CLASSES (.casca, .botao, .pilula). É o único consumidor real delas. (Dizia "importa esta folha" até 02/09/2026 — errado, e a sessão do OBZ corrigiu. O erro tinha efeito próprio: o produto que o texto dava como o mais seguro era o único que não estava em lista de conferência nenhuma, porque a garantia escrita aqui era o motivo de ninguém ir procurar.) Manutenção dois arquivos. Frontend/src/estilo-bloom.css é uma CÓPIA só dos tokens, adaptada para Tailwind; docs/design/tokens-bloom.css é ESPELHO desta folha inteira. Os dois recebem valor novo só quando alguém copia de novo. Educacional não usa esta folha nem cópia dela: é Tailwind utilitário, e os valores escuros foram interpolados a partir dos três níveis de tinta. site e app têm folha própria; aqui só o espécime a carrega. ⇒ Mexer numa CLASSE alcança o OBZ e mais ninguém. Mexer num TOKEN alcança o OBZ na hora, a Manutenção na próxima cópia, e o Educacional nunca. Ao mudar valor, avise as três sessões. ============================================================ */ :root{ /* marca */ --primaria:#2E3A6B; --primaria-escura:#1F2850; --primaria-clara:#8E9CD8; --coral:#E8607A; --ambar:#E8A33C; --turquesa:#2E9BA8; --linha:#AEB6D8; --halo:#DDE3F5; /* Borda de CONTROLE, separada de --linha. A linha da marca é enfeite (traço, tracejado, régua lateral) e pode ser discreta; a borda que DESENHA um botão ou um campo é o que diz onde ele começa, e a WCAG 1.4.11 pede 3:1 contra o fundo para isso. Medido: --linha dava 1,92 no claro e 2,43 no escuro -- o botão "Entrar" ficava com a borda quase invisível nos dois temas. Não é para "unificar" com --linha de novo. */ --borda-controle:#7A80A0; /* superfícies e tinta */ --branco:#FFFFFF; --creme:#FCFAF8; --borda:#EAE6DF; --superficie-2:#F7F4EF; /* Texto que fica SOBRE a primária preenchida. Era `#fff` fixo no botão, e no escuro a primária clareia: branco sobre ela dava 2.66:1 no elemento mais clicado da interface. Como token, ele inverte junto. */ --tinta-sobre-primaria:#FFFFFF; --tinta:#1B1F2E; --tinta-2:#4A5066; --tinta-3:#5E6478; /* 5.65:1 sobre --creme */ /* estado (nunca use cor de marca para estado) */ --ok:#1F6B45; --ok-fundo:#E8F3EE; --atencao:#92400E; --atencao-fundo:#FEF3C7; --erro:#DC2626; --erro-texto:#991B1B; --erro-fundo:#FEE2E2; --neutro:#5B5A78; --neutro-fundo:#F0EFF6; /* Rampa sequencial: ÁREA, nunca TIPO. Ela é calibrada para preenchimento de gráfico e mapa de calor, onde 3:1 basta e o tom vira superfície. Como cor de texto reprova nas duas pontas: --rampa-3 sobre cartão claro dá 2.66:1. O nome não avisa, e quem usa como cor de número tropeça. Para numeral em escala, declare tokens próprios e meça nos dois temas. */ --rampa-1:#2E3A6B; --rampa-2:#5A66A0; --rampa-3:#8E9CD8; --rampa-4:#DDE3F5; /* Elevação. Era literal (rgba da tinta clara), e no escuro #1B1F2E a 45% sobre um fundo #16181C some: o diálogo perdia a elevação sem ninguém ver erro. Sombra é tinta, e tinta tem tema. */ --sombra-dialogo:0 24px 60px -24px rgba(27,31,46,.45); /* ---- categoria de quadro (Kanban do Plano de Ação) ---------------- Decisão de Marianna, 02/09/2026, entre três paletas medidas. Não é escala nem estado: são posições de um fluxo, e duas delas JÁ são estado com nome de coluna. Por isso `atrasada` e `concluída` NÃO têm token próprio -- elas usam --erro e --ok, os mesmos das pílulas. A alternativa (paleta própria para as seis) media melhor em cinza, 1.26 contra 1.19, mas punha dois vermelhos a 1.21 um do outro na mesma tela, dizendo coisas diferentes. Isso não lê como distinção. Os dois estados são --ok e --erro-TEXTO, não --erro. A folha tem os dois vermelhos, e o que a pessoa lê como "o vermelho de erro" é o do TEXTO da pílula, não o de fundo. Trocar um pelo outro quebra a escada: --erro no claro dá 4.83 e colide com cancelada (1.11). As quatro abaixo foram RESOLVIDAS nas folgas que os dois estados deixam, não escolhidas: cada uma cai numa faixa de luminância que nenhuma outra ocupa. É o que faz as seis continuarem distintas para quem não separa matiz -- hoje o par mais parecido é 1.00, ou seja, seis cores que viram três faixas. */ --cat-backlog:#8693A8; --cat-nao-iniciada:#2F73E1; --cat-em-andamento:#B6770A; --cat-cancelada:#9B3CCB; --raio:14px; --raio-botao:10px; } /* O tema escuro existe em DOIS blocos com o mesmo conteúdo, e isso é necessário, não descuido: o @media atende quem deixou o sistema decidir (a maioria, que não estampa nada na raiz), e o [data-theme="dark"] atende quem escolheu dentro do aplicativo. Sem o segundo, um seletor de tema não tem como funcionar. Ao mexer em um, mexa no outro. */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){ /* superfícies e tinta */ --branco:#1E2128; --creme:#16181C; --borda:#2C2F36; --superficie-2:#23262E; --tinta:#ECEAE5; --tinta-2:#C8C7BF; --tinta-3:#A3A199; /* 6.87:1 sobre --creme */ /* marca. Coral, âmbar e turquesa NÃO mudam: medidos sobre o fundo escuro dão 5.40, 8.24 e 5.39 e passam como texto. Só a família da primária inverte, porque no escuro "mais forte" quer dizer mais claro. */ --primaria:#8E9CD8; --primaria-escura:#A9B5E4; --primaria-clara:#B4BFE9; --linha:#4A5480; --halo:#2A3355; --borda-controle:#7C87B8; --tinta-sobre-primaria:#16181C; /* 6.68:1 sobre a primária clara */ /* Estado: a cor clareia e o fundo dela escurece, mantendo o par. A alternativa era deixar as pílulas claras como no tema claro, o que as transformaria em blocos berrantes numa página escura. Escolhida a inversão completa: meia inversão é o único caminho indefensável. */ --ok:#6EE7A8; --ok-fundo:#123122; /* 9.18:1 dentro da pílula */ --atencao:#F5C86B; --atencao-fundo:#332512; --erro:#F87171; --erro-texto:#FCA5A5; --erro-fundo:#3A1717; --neutro:#B9B7D6; --neutro-fundo:#26253A; /* Rampa espelhada: no escuro o degrau FORTE é o mais claro, como a primária. Os quatro passos guardam a mesma cadência do tema claro, fator 2.00 de contraste entre vizinhos -- foi assim que foram resolvidos, não escolhidos a olho. Cada tema tem uma ponta que quase se funde com a superfície: no claro é a rampa-4 sobre o branco (1.28), no escuro é a rampa-4 sobre o fundo (1.73). É a ponta "quase nada" de um mapa de calor, e é assim nos dois. */ --rampa-1:#DDE3F5; --rampa-2:#98A1BF; --rampa-3:#626C94; --rampa-4:#323E6E; /* categoria de quadro: as folgas mudam de lugar no escuro, porque os dois estados mudam de contraste. Resolvidas de novo, não invertidas. */ --cat-backlog:#5C6C89; --cat-nao-iniciada:#7EAAF1; --cat-em-andamento:#BD7D0F; --cat-cancelada:#A85ACF; --primaria-10:rgba(142,156,216,.14); --scrim:rgba(0,0,0,.62); --sombra-dialogo:0 24px 60px -24px rgba(0,0,0,.72); } } :root[data-theme="dark"]{ /* superfícies e tinta */ --branco:#1E2128; --creme:#16181C; --borda:#2C2F36; --superficie-2:#23262E; --tinta:#ECEAE5; --tinta-2:#C8C7BF; --tinta-3:#A3A199; /* 6.87:1 sobre --creme */ /* marca. Coral, âmbar e turquesa NÃO mudam: medidos sobre o fundo escuro dão 5.40, 8.24 e 5.39 e passam como texto. Só a família da primária inverte, porque no escuro "mais forte" quer dizer mais claro. */ --primaria:#8E9CD8; --primaria-escura:#A9B5E4; --primaria-clara:#B4BFE9; --linha:#4A5480; --halo:#2A3355; --borda-controle:#7C87B8; --tinta-sobre-primaria:#16181C; /* 6.68:1 sobre a primária clara */ /* Estado: a cor clareia e o fundo dela escurece, mantendo o par. A alternativa era deixar as pílulas claras como no tema claro, o que as transformaria em blocos berrantes numa página escura. Escolhida a inversão completa: meia inversão é o único caminho indefensável. */ --ok:#6EE7A8; --ok-fundo:#123122; /* 9.18:1 dentro da pílula */ --atencao:#F5C86B; --atencao-fundo:#332512; --erro:#F87171; --erro-texto:#FCA5A5; --erro-fundo:#3A1717; --neutro:#B9B7D6; --neutro-fundo:#26253A; /* Rampa espelhada: no escuro o degrau FORTE é o mais claro, como a primária. Os quatro passos guardam a mesma cadência do tema claro, fator 2.00 de contraste entre vizinhos -- foi assim que foram resolvidos, não escolhidos a olho. Cada tema tem uma ponta que quase se funde com a superfície: no claro é a rampa-4 sobre o branco (1.28), no escuro é a rampa-4 sobre o fundo (1.73). É a ponta "quase nada" de um mapa de calor, e é assim nos dois. */ --rampa-1:#DDE3F5; --rampa-2:#98A1BF; --rampa-3:#626C94; --rampa-4:#323E6E; /* categoria de quadro: as folgas mudam de lugar no escuro, porque os dois estados mudam de contraste. Resolvidas de novo, não invertidas. */ --cat-backlog:#5C6C89; --cat-nao-iniciada:#7EAAF1; --cat-em-andamento:#BD7D0F; --cat-cancelada:#A85ACF; --primaria-10:rgba(142,156,216,.14); --scrim:rgba(0,0,0,.62); --sombra-dialogo:0 24px 60px -24px rgba(0,0,0,.72); } /* ============================================================ A MARCA NOS DOIS TEMAS ============================================================ O símbolo não precisa de versão escura: ele já é expressável nos tokens acima, e aí inverte sozinho. linha da rede var(--linha) halo var(--halo) núcleo var(--primaria) letra b var(--tinta-sobre-primaria) seis nós --coral, --ambar, --turquesa e --primaria O nó que usa a primária é o único que muda, e precisa mudar: em #2E3A6B ele dá 1.64:1 sobre o fundo escuro e some. Como token, vira #8E9CD8 e passa com 6.68. As relações internas se mantêm nos dois temas, que é o que faz a marca continuar sendo a mesma marca: halo sobre a página claro 1.28 escuro 1.44 (anel discreto) núcleo sobre o halo claro 8.47 escuro 4.64 b sobre o núcleo claro 10.86 escuro 6.68 (sempre invertido) O que NÃO fazer: pintar o símbolo com hexadecimal fixo. Foi assim que ele nasceu, e é por isso que num fundo escuro o núcleo sumia enquanto o halo virava um disco brilhante. ============================================================ */ /* tipografia: Quicksand (marca e títulos), DM Sans (texto; rótulo em peso 600 e versalete; número em tabular-nums). A mono saiu em 13/09/2026: ficava leve em corpo pequeno, dava cara de produto técnico, e o que distingue rótulo de texto passou a ser peso mais versalete. A ÚNICA exceção, decidida em 14/09/2026: CÓDIGO e COMANDO COPIÁVEL continuam em mono. Não é escolha de marca, é legibilidade -- num comando de terminal a diferença entre l, 1 e I muda o que a pessoa cola. Vale para `code`, `pre` e caixa de prompt, e para mais nada: rótulo, número em coluna e etiqueta usam DM Sans com versalete e tabular-nums, como o resto. O Bloom Vault, que é ferramenta interna cheia de comando copiável, é hoje o único consumidor da exceção. Quem vier propor tirar a mono de lá está olhando para a regra certa e a exceção é esta linha. ⚠️ MEXEU EM `font-family` AQUI? ENTÃO TEM `` DE FONTE PARA TROCAR JUNTO, EM CADA PRODUTO. Esta folha pede a família PELO NOME; quem carrega o arquivo da fonte é o HTML de cada consumidor. Copiar a folha sem trocar o `` do Google Fonts faz a família cair no `sans-serif` genérico do sistema: sem erro, sem aviso no console, e com a folha "em dia" segundo qualquer conferência de TOKEN, porque família tipográfica não é token, é regra de componente. Aconteceu de verdade em 14/09/2026, com o OBZ: o `index.html` dele carregava Quicksand, Source Sans 3 e IBM Plex Mono, nenhum deles DM Sans. A sessão de lá percebeu antes de copiar e migrou o ``, o espécime e dois estilos INLINE num SVG, que varredura de CSS não alcança. Conferir no navegador, não no arquivo: `document.fonts.check('600 11px "DM Sans"')`. Ver `` trocado não prova que a fonte carregou. */ p{margin:0} /* o espaçamento vem do layout, não da margem do parágrafo */ h1,h2,h3,.marca{font-family:"Quicksand","DM Sans",ui-rounded,sans-serif; letter-spacing:-.02em;text-wrap:balance;margin:0} body{font-family:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif; font-size:17px;line-height:1.6;color:var(--tinta);background:var(--branco)} /* Controle de formulário NÃO herda font-family -- é regra do agente de usuário, não descuido de folha. Sem isto, todo