/* ============================================================ BRAND — IDENTIDADE VISUAL DA INFORPOP ============================================================ VERMELHO é a cor da marca, decisão de 28/08/2026. É o mesmo vermelho do ícone do Programa Farmácia Popular, medido no canal RGB do selo oficial: #ff0000, 185.739 pixels, a cor dominante do arquivo. Por que o vermelho puro não pinta área de texto: #ff0000 com texto branco dá 4,00 de contraste, abaixo do mínimo 4,50 do WCAG AA. O puro fica no ACENTO (pastilha, ponto, selo, realce) e a área usa a rampa profunda, que é o mesmo vermelho um passo mais escuro e continua lendo como vermelho do Programa. O azul deixa de ser a cor da marca e passa a ser APOIO: ele ainda existe no letreiro oficial em PNG e no selo do Ministério. Este é o ÚNICO arquivo da landing page que declara cor literal. Todo o resto (site.css) só consome `var(--…)`. ============================================================ */ :root { /* --- 1. INFORPOP · VERMELHO — a cor da marca --- */ --brand-red: #f00; /* o vermelho do ícone. ACENTO, nunca área de texto */ --brand-red-soft: #ff3b30; --brand-red-deep: #c00; /* área com texto branco: 5,89 de contraste */ --brand-red-darkest: #a30000; --brand-red-night: #6b0000; /* base das faixas escuras */ --on-brand-red: #fff; --brand-red-on-dark: #ff8078; /* O vermelho já AJUSTADO ao tema — o equivalente de `palettes[tema].primary` no app. Use SEMPRE este sobre superfície; a rampa crua fica para as faixas da marca, que são escuras nos dois temas. */ --primary: #d90000; --primary-pressed: var(--brand-red-darkest); /* --- 2. INFORPOP · AZUL — apoio, não mais a cor da marca --- */ --brand-blue-soft: #2f55d4; --brand-blue: #1337aa; --brand-blue-deep: #0d2878; /* O azul de apoio é escuro demais para rótulo sobre a dobra TINTA: #2f55d4 sobre #211213 dá 3,0 e reprova em AA. Este é o mesmo azul clareado, do jeito que `--brand-red-on-dark` faz com o vermelho. */ --brand-blue-on-dark: #8fa8ff; --on-brand-blue: #fff; /* --- 3. INFORPOP · VERDE — confirmação, progresso --- */ --brand-green-soft: #9bcf45; --brand-green: #88c032; --brand-green-deep: #5f9020; --on-brand-green: #0f2000; /* --- 4. INFORPOP · AMARELO — acento pontual e botão de ação --- */ --brand-yellow: #ffe608; --brand-yellow-deep: #d4be00; --on-brand-yellow: #262000; /* --- 5. Estados --- */ --success: #41660f; --success-soft: #edf6e0; --warning: #8a5200; --warning-soft: #fdf0dc; --on-warning: #fff; /* no escuro o âmbar clareia e a tinta inverte */ --danger: #a3161b; --danger-soft: #fbe5e6; --primary-soft: #fdeaea; /* Os mesmos estados, na versão que sobrevive sobre fundo escuro. O tema escuro já clareia `--danger` e `--success` dentro do @media; a faixa TINTA é escura NOS DOIS temas e não pode depender disso. */ --danger-on-dark: #ff8a8a; --danger-soft-on-dark: #33191b; --success-on-dark: var(--brand-green-soft); --success-soft-on-dark: #1b2a18; /* --- 6. Programa Farmácia Popular (Ministério da Saúde). Cor de DOMÍNIO. Desde 28/08/2026 ela COINCIDE com a cor da marca, por decisão comercial. Segue declarada em separado: se a marca mudar de novo, o selo do Ministério não muda. --- */ --fp-red: #f00; --fp-red-text: #d90000; /* --- 7. Neutros · tema claro (avermelhados: herdam a marca) --- */ --bg: #faf4f3; --surface: #fff; --surface-alt: #fdf7f6; --border: #f0dedc; --text: #1f1312; --text-muted: #6a534f; --text-faint: #7d6764; --skeleton: #f6e9e7; /* Texto sobre as superfícies da marca (faixas vermelhas), escuras nos dois temas — por isso não vivem na paleta por tema. */ --on-dark: #fff; --on-dark-body: #ffe0dc; --on-dark-muted: rgb(255, 255, 255, 0.78); --on-dark-surface: rgb(255, 255, 255, 0.14); --on-dark-hover: rgb(255, 255, 255, 0.22); --on-dark-line: rgb(255, 255, 255, 0.18); --on-dark-edge: rgb(255, 255, 255, 0.24); --on-dark-edge-strong: rgb(255, 255, 255, 0.3); --on-dark-inset: rgb(255, 255, 255, 0.1); --on-dark-glow: rgb(255, 255, 255, 0.18); /* Os brilhos das faixas vermelhas: o verde e o amarelo do selo entram como LUZ, nunca como área. É o que a hierarquia da paleta permite. */ --glow-green: rgb(136, 192, 50, 0.24); --glow-yellow: rgb(255, 230, 8, 0.18); --glow-blue: rgb(47, 85, 212, 0.4); --pulse-ring: rgb(255, 230, 8, 0.7); --pulse-ring-fade: rgb(255, 230, 8, 0); /* A chapa branca que segura o logotipo no tema escuro. */ --plate: #fff; /* --- Neutros FIXOS, que não seguem o tema de quem lê --- A landing page inverte com o sistema; um slide não. Um fundo de papel projetado numa parede é papel às três da tarde e à meia noite. Estes três existem para o material impresso e projetado (`docs/apresentacoes/`) e são exatamente os neutros do tema claro, congelados. Não use em `site.css`: lá quem manda é `--bg`. */ /* As três luzes da família Aurora do material de apresentação: a nuvem clara, a nuvem funda e a base atrás das duas. */ --aurora-fundo: #2a0403; --aurora-luz: rgb(255, 60, 40, 0.55); --aurora-brasa: rgb(180, 0, 0, 0.75); --papel-fixo: #faf4f3; --papel-fixo-alto: #fdf7f6; --tinta-fixa: #1f1312; /* O corpo do aparelho no mockup — objeto, não superfície do tema. */ --device-shell-top: #2b1a1a; --device-shell-bottom: #0a0505; --shadow-device: 0 40px 90px rgb(20, 5, 5, 0.45); --shadow-float: 0 18px 44px rgb(20, 5, 5, 0.26); --shadow-toast: 0 20px 60px rgb(20, 5, 5, 0.4); /* --- 7b. Superfície TINTA — as dobras de destaque da landing. Escura NOS DOIS TEMAS, como as faixas da marca: a dobra do mapa e a dos degraus da auditoria não trocam de lado quando o sistema troca de tema. Por isso moram aqui, e não na paleta por tema. O tema escuro só aprofunda a escala (abaixo), para a dobra continuar se destacando de um fundo que já é escuro. --- */ --ink: #140a0b; --ink-surface: #211213; --ink-surface-alt: #2b191b; --ink-ghost: #3a2325; /* o numeral fantasma do cartão de risco */ /* A LUZ do CTA. O amarelo do selo entra como brilho, nunca como área nova: quem pinta o botão continua sendo `--brand-yellow`. */ --glow-cta: 0 0 0 1px rgb(255, 230, 8, 0.34), 0 0 26px rgb(255, 230, 8, 0.28), 0 0 56px rgb(255, 230, 8, 0.12); --glow-cta-forte: 0 0 0 1px rgb(255, 230, 8, 0.5), 0 0 34px rgb(255, 230, 8, 0.42), 0 0 74px rgb(255, 230, 8, 0.2); /* --- 7c. Efeitos de tela --- O cursor desenhado é branco e inverte contra o fundo por `mix-blend-mode`, então serve tanto sobre a faixa vermelha quanto sobre o cartão branco: uma cor só resolve as duas. */ --cursor-tinta: #fff; /* As gotas que se fundem: o filtro do CSS exige tinta CHAPADA, senão o contraste alto que funde as bolhas devolve borda serrilhada. */ --gota-tinta: #fff; --gota-fundo: rgb(0, 0, 0, 0.3); /* As duas pontas do fundo em shader do hero. O programa da placa de vídeo interpola entre elas, então elas precisam ser cor CHAPADA: `var()` encadeado não chega até o canvas. A ponta CLARA é o teto de brilho do hero inteiro, e por isso ela é `#c00`, o mesmo vermelho profundo da faixa: com branco por cima dá 5,89 de contraste. Um vermelho mais vivo (`#ff2a1a`) sobe o brilho para 3,84 e reprova a manchete em AA no pico da onda. */ --shader-fundo: #4a0000; --shader-luz: #c00; /* A chapa flutuante da barra do topo: sombra macia, nunca pesada. */ --shadow-pill: 0 4px 14px rgb(20, 5, 5, 0.16), 0 18px 46px rgb(20, 5, 5, 0.1); /* --- 8. Tipografia da marca: VERDANA (AD-11) --- Decisão de 28/08/2026: a letra do projeto é Verdana, em todo texto e em toda variação. Ela é a única declaração de `font-family` do repositório; `site.css` e qualquer arquivo novo consomem `var(--font)` e nunca nomeiam uma letra. Verdana não é baixada, é do sistema: ela vem no Windows e no macOS, e AD-4 segue de pé, zero byte de fonte e zero origem externa. A cauda existe para quem não a tem: Geneva no Mac antigo, DejaVu Sans no Linux (o parente livre mais próximo, mesma altura de x generosa) e Tahoma como último parente. Consequência de desenho, registrada para não virar surpresa: Verdana é LARGA. Ao mesmo corpo em pixel ela ocupa cerca de 10% mais linha que a letra do sistema, e a altura de x é bem maior. Rótulo em caixa apertada e faixa com muitos itens precisam ser conferidos à mão depois de qualquer mexida. */ --font: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; /* Verdana tem DUAS espessuras: 400 e 700. Não existe 600 nem 800 nesta letra. Declarar peso que a família não tem funciona por acaso (o navegador arredonda para 700) e deixa de funcionar no instante em que o aparelho cai num substituto que TENHA 600 e 800: aí a página muda de peso sozinha, e ninguém sabe por quê. Só existem estes dois tokens, e é de propósito. */ --peso-texto: 400; --peso-forte: 700; /* A ÚNICA exceção declarada a AD-11, e ela não é do site: é da família "Dossiê" do material de apresentação, que existe para vestir texto normativo, e é a serifa que faz esse trabalho. Mora aqui, e não em `docs/apresentacoes/slides.css`, para que continue existindo UM lugar no repositório que nomeia letra. Georgia também é do sistema: nenhum byte sai da rede. */ --font-serifa: Georgia, "Times New Roman", "DejaVu Serif", serif; /* --- 9. Grade de 4px e raios (tokens.ts · spacing/radius) --- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* --- 10. Elevação: a sombra é VERMELHA, não cinza. --- */ --e-sm: 0 2px 16px rgb(140, 20, 20, 0.07); --e-md: 0 4px 32px rgb(140, 20, 20, 0.12); --e-lg: 0 16px 96px rgb(140, 20, 20, 0.2); /* --- 11. Movimento --- INTERAÇÃO responde em até 200ms (EXPERIENCE.md): é resposta a toque, e atraso ali vira lentidão. ENTRADA é outra coisa: ela acontece uma vez, enquanto a pessoa rola, e precisa de curva longa para a rolagem parecer contínua em vez de picotada. */ --t-state: 160ms; --t-panel: 200ms; --t-entrada: 820ms; --t-entrada-curta: 620ms; /* A mesma curva do brief: sai rápido e assenta devagar. */ --ease-saida: cubic-bezier(0.22, 1, 0.36, 1); } /* Tema escuro: preto no fundo, vinho nas superfícies. */ :root:not([data-theme="light"]) { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0d0708; --surface: #1a0f10; --surface-alt: #241618; --border: #3b2426; --text: #f8eeed; --text-muted: #c4a9a6; --text-faint: #a68d8a; --skeleton: #2a1a1b; /* A dobra TINTA precisa continuar mais funda que a página. */ --ink: #080405; --ink-surface: #170c0d; --ink-surface-alt: #1f1112; --ink-ghost: #331e20; --primary: var(--brand-red-on-dark); --primary-pressed: #ff9a92; /* No escuro o primário é claro, então a tinta do botão inverte. */ --on-brand-red: #2b0000; --success: #9bcf45; --success-soft: #1b2a18; --warning: #f5a623; --warning-soft: #2e2312; --on-warning: #2b0000; --danger: #ff8a8a; --danger-soft: #33191b; --primary-soft: #3a1416; --fp-red-text: #ff8078; /* No escuro a sombra some (tokens.ts devolve {} no tema escuro): o que separa as camadas ali é a cor da superfície, não o borrão. */ --e-sm: none; --e-md: none; --e-lg: none; } }