/* Agência de Negócios — tokens da direção "Conversa Franca" (v1.3) Fonte da verdade: docs/decisoes.md · não inventar valores fora deste arquivo. Origem: design system gerado no Claude Design, projeto 393825f4-503f-496f-a788-1d1fc78a45d9 */ /* As três fontes são do Google Fonts, liberadas para web, vídeo e Canva (tipografia.md), e desde 23/09/2026 são servidas pelo próprio site, a partir de fontes/ (ver fontes/README.md): vindas do Google na hora, travavam a primeira pintura num celular comum. O @import garante a fonte onde só tokens.css é carregado; a página que precisa abrir rápido pede os arquivos no . No pacote do Claude Design, publicar-design-system.py troca esta linha pelo @import do Google. */ @import url('fontes/fontes.css'); :root { color-scheme: light dark; /* ---- Cor · modo claro ------------------------------------------------- Proporção-alvo por peça: 70% neutro, 25% cobalto, 5% coral. */ /* O cobalto tem dois usos e dois tokens. Tinta precisa ser escura o bastante para ser lida SOBRE o fundo; superfície precisa ser escura o bastante para o branco ser lido EM CIMA dela. No claro os valores coincidem; no escuro, não. Nunca troque um pelo outro. */ --cor-cobalto: #2340D6; /* TINTA: texto, link, ícone, borda */ --cor-cobalto-superficie: #2340D6; /* SUPERFÍCIE: faixa, botão, card, balão */ --cor-cobalto-tinta-hover: #1A31A8; /* hover de link e ícone. Nunca preenche */ --cor-cobalto-superficie-hover:#1A31A8; /* hover de botão e card */ --cor-cobalto-veu: #E8ECFD; /* badge, fundo de card informativo */ --cor-coral: #FF6B4A; /* grifo, passo, dado. NUNCA como cor de texto */ --cor-coral-veu: #FFE8E1; /* fundo de bloco "problema" */ --cor-sobre-coral: #2B0C03; /* único texto admitido sobre coral */ --cor-sobre-cobalto: #FFFFFF; /* único texto admitido sobre cobalto */ --cor-sobre-cobalto-fundo:#FFFFFF; /* texto sobre o hover de tinta quando ele vira fundo. No claro o hover é escuro, então branco */ --cor-sobre-semantico: #FFFFFF; /* texto quando resolvido/pendente/travado é preenchimento */ --cor-tinta-forte: #141824; /* títulos, corpo, legenda de vídeo */ --cor-tinta-media: #4B4F5C; /* texto de apoio, descrições */ --cor-tinta-suave: #676B79; /* rótulos, metadados — mínimo 15 px. v1.3: 4,87:1 no papel, 5,31:1 na elevada */ --cor-superficie-papel: #F6F5F2; /* fundo padrão de página e peça */ --cor-superficie-elevada: #FFFFFF; /* card, campo, painel */ --cor-borda-hairline: #E6E3DB; /* divisores e contornos de card */ --cor-resolvido: #147A52; --cor-pendente: #8A5A00; --cor-travado: #C0341D; /* ---- Cor derivada · vem da seção de componentes do design system ------- Não são cores novas: são os pares de fundo e texto que o design system usa nos blocos didáticos e sobre cobalto. */ --cor-problema-fundo: #FFE8E1; /* = coral-véu */ --cor-problema-rotulo: #8A3620; --cor-problema-texto: #5A2312; --cor-caminho-fundo: #E8ECFD; /* = cobalto-véu */ --cor-caminho-rotulo: #1A31A8; --cor-caminho-texto: #1F2433; --cor-resultado-fundo: #E3F3EC; --cor-resultado-rotulo: #0E5C3E; --cor-resultado-texto: #124B35; --cor-sobre-cobalto-apoio: #D9DFFB; /* texto de apoio sobre cobalto */ --cor-sobre-cobalto-tenue: #C3CDFA; /* linha de fonte sobre cobalto */ --cor-borda-vazia: #C9C6BE; /* caixa de checklist não marcada */ /* O rodapé é uma banda sempre escura, nos dois temas. Não usa tinta-forte: esse token inverte no escuro e deixaria texto branco sobre fundo branco. */ --cor-rodape-fundo: #141824; --cor-rodape-creci: #EDEFF5; --cor-rodape-link: #9FB0F7; --cor-rodape-apoio: #A3AAB9; --cor-rodape-divisor: #2A3040; /* Legenda de vídeo, regra do design system: branco sobre tinta-forte a 90% de opacidade, nunca texto colorido. Vive sobre vídeo, então não muda com o tema. */ --cor-legenda-fundo: rgba(20,24,36,.90); --cor-legenda-texto: #FFFFFF; /* ---- Tipografia ------------------------------------------------------- */ --fonte-display: 'Space Grotesk', system-ui, sans-serif; /* @kind font */ /* títulos, números, botões */ --fonte-texto: 'IBM Plex Sans', system-ui, sans-serif; /* @kind font */ /* tudo que explica */ --fonte-mono: 'JetBrains Mono', ui-monospace, monospace; /* @kind font */ /* rótulo técnico, registro */ --texto-display: 700 clamp(2.75rem, 5vw, 3.5rem)/1.02 var(--fonte-display); /* 44–56 */ --texto-titulo-1: 700 2.125rem/1.08 var(--fonte-display); /* 34 */ --texto-titulo-2: 700 1.5rem/1.2 var(--fonte-display); /* 24 */ --texto-destaque: 400 1.25rem/1.5 var(--fonte-texto); /* 20 */ --texto-corpo: 400 1.0625rem/1.6 var(--fonte-texto); /* 17 */ --texto-apoio: 400 0.9375rem/1.55 var(--fonte-texto); /* 15 */ --texto-rotulo: 600 0.8125rem/1.3 var(--fonte-texto); /* 13 + caps */ --texto-tecnico: 400 0.8125rem/1.4 var(--fonte-mono); /* 13 */ --tracking-titulo: -0.03em; /* obrigatório em título, de 24 px em diante */ --tracking-subtitulo: -0.02em; /* v1.3: título de 18 a 21 px (card, passo, FAQ) */ --tracking-display: -0.04em; /* obrigatório acima de 48 px */ --tracking-rotulo: 0.12em; /* rótulo em caixa-alta */ /* Medida de linha: o texto corrido nunca passa disto. v1.3 */ --medida-corpo: 66ch; /* corpo e apoio */ --medida-destaque: 40ch; /* destaque, título e texto de balão */ /* Descritor "regularização e negócios imobiliários" em post e story: texto no piso de 28 px, fora do logo, nunca dentro dele. v1.3 */ --texto-descritor-peca: 400 28px/1.3 var(--fonte-texto); /* ---- Espaço · base 4 --------------------------------------------------- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px; --e-8: 32px; --e-12: 48px; --e-16: 64px; --e-24: 96px; --e-card: var(--e-6); /* espaço interno de card */ --e-bloco: var(--e-12); /* entre blocos */ --e-secao: var(--e-24); /* entre seções */ /* ---- Grid -------------------------------------------------------------- */ --grid-max: 1100px; --grid-colunas: 12; /* @kind other */ --grid-gap: 24px; /* desktop */ /* ---- Forma ------------------------------------------------------------- */ --raio-xs: 4px; /* tag, grifo, imagem de peça */ --raio-sm: 8px; /* campo, item de lista */ --raio-md: 12px; /* card, painel, modal */ --raio-fala: 16px 16px 16px 4px; /* @kind radius */ /* balão, citação, bloco de fala */ --raio-pilula: 999px; /* Uma luz só, de cima: o deslocamento é sempre vertical e cresce com o nível (1 → 4 → 16). No escuro só o alfa muda, a luz não. */ --sombra-1: 0 1px 2px rgba(20,24,36,.06); /* card em repouso */ --sombra-2: 0 4px 12px rgba(20,24,36,.10); /* hover, dropdown */ --sombra-3: 0 16px 40px rgba(20,24,36,.16); /* modal, peça flutuante */ /* Foco por teclado: um anel só, em tudo que recebe foco. v1.3 */ --anel-foco: 2px solid var(--cor-cobalto); --anel-foco-afastamento: 2px; /* ---- Ícone ------------------------------------------------------------- */ --icone-grade: 24px; --icone-traco: 1.5px; /* ---- Marca inline (a que anima) · v1.3 ------------------------------------ As cores gravadas nos arquivos de logo/, por tema: marca-curta.svg aqui, marca-curta-negativa.svg no escuro (balão só em contorno branco). A marca não segue a tinta do tema, segue o arquivo. Os três últimos são marca-curta-sobre-cobalto.svg, usados por .an-marca--sobre-cobalto. */ --marca-balao: #2340D6; --marca-balao-contorno: none; --marca-monograma: #FFFFFF; --marca-texto: #2340D6; --marca-cobalto-balao: #FFFFFF; --marca-cobalto-monograma: #2340D6; --marca-cobalto-texto: #FFFFFF; } @media (min-width: 768px) and (max-width: 1023px) { :root { --grid-colunas: 8; /* @kind other */ --grid-gap: 20px; } } @media (max-width: 767px) { :root { --grid-colunas: 4; /* @kind other */ --grid-gap: 16px; /* Escala para celular (v1.3). Display de 56 e título de 34 não cabem em 390 px. Os degraus abaixo derivam dos de mesa: display cai um degrau (36 px, e por estar abaixo de 48 usa o tracking de título), título-1 vira 28 e título-2 vira 22. Entrelinha abre um pouco porque a linha é mais curta. Corpo, apoio e rótulo não mudam. */ --texto-display: 700 2.25rem/1.05 var(--fonte-display); /* 36 */ --texto-titulo-1: 700 1.75rem/1.1 var(--fonte-display); /* 28 */ --texto-titulo-2: 700 1.375rem/1.2 var(--fonte-display); /* 22 */ --tracking-display: -0.03em; --e-secao: var(--e-16); /* 64 entre seções no celular */ } } /* ---- Cor · modo escuro --------------------------------------------------- Mesmos nomes de token, valores remapeados. Use em stories, capa de vídeo e no site à noite. Completo desde a v1.1. As duas cópias abaixo, a da media query e a do atributo, precisam bater: brand/verificar-contraste.py reprova se divergirem. O bloco [data-tema="claro"] reafirma o claro para quem força o tema claro num sistema escuro (v1.3: substitui o antigo :root:not([data-tema="claro"]), que o painel não registrava). */ @media (prefers-color-scheme: dark) { :root { --cor-cobalto: #6C86F3; /* TINTA: 5,6:1 no papel, 5,2:1 na elevada (v1.3) */ --cor-cobalto-superficie: #2D4AE0; /* SUPERFÍCIE: branco em cima dá 6,6:1 */ --cor-cobalto-tinta-hover: #7E93F4; --cor-cobalto-superficie-hover:#3A56E8; --cor-cobalto-veu: #1B2440; --cor-coral: #FF8566; /* mesma regra: preenchimento, não texto */ --cor-coral-veu: #38201A; --cor-sobre-cobalto: #FFFFFF; --cor-sobre-cobalto-fundo:#0B0F1A; /* texto sobre o hover clareado */ --cor-superficie-papel: #0E1119; --cor-superficie-elevada: #171B27; --cor-tinta-forte: #EDEFF5; --cor-tinta-media: #A3AAB9; --cor-tinta-suave: #8F96A6; /* 5.3:1 sobre o fundo */ --cor-borda-hairline: #2A3040; --cor-borda-vazia: #3A4152; --cor-resolvido: #4CC38A; --cor-pendente: #E0A93C; --cor-travado: #FF7A63; --cor-sobre-semantico: #0B0F1A; /* texto quando o semântico é preenchimento */ /* derivados: o design system dá o véu semântico e o tom claro do texto */ --cor-problema-fundo: #38201A; --cor-problema-rotulo: #FF7A63; --cor-problema-texto: #FFC3B0; --cor-caminho-fundo: #1B2440; --cor-caminho-rotulo: #7E93F4; --cor-caminho-texto: #EDEFF5; --cor-resultado-fundo: #12301F; --cor-resultado-rotulo: #4CC38A; --cor-resultado-texto: #9FE3C1; --cor-sobre-cobalto-apoio: #D9DFFB; --cor-sobre-cobalto-tenue: #D0D8FB; /* 4,7:1 sobre a superfície cobalto escura (v1.3) */ --cor-rodape-link: #9FB0F7; --cor-rodape-apoio: #A3AAB9; --cor-rodape-divisor: #2A3040; --sombra-1: 0 1px 2px rgba(0,0,0,.40); --sombra-2: 0 4px 12px rgba(0,0,0,.50); --sombra-3: 0 16px 40px rgba(0,0,0,.60); --marca-balao: none; --marca-balao-contorno: #FFFFFF; /* marca-curta-negativa.svg */ --marca-monograma: #FFFFFF; --marca-texto: #FFFFFF; } } /* Tema claro forçado: [data-tema="claro"] no vence o sistema escuro. Reafirma os valores do :root para que prefers-color-scheme não os troque. */ [data-tema="claro"] { --cor-cobalto: #2340D6; --cor-cobalto-superficie: #2340D6; --cor-cobalto-tinta-hover: #1A31A8; --cor-cobalto-superficie-hover: #1A31A8; --cor-cobalto-veu: #E8ECFD; --cor-coral: #FF6B4A; --cor-coral-veu: #FFE8E1; --cor-sobre-cobalto: #FFFFFF; --cor-sobre-cobalto-fundo: #FFFFFF; --cor-superficie-papel: #F6F5F2; --cor-superficie-elevada: #FFFFFF; --cor-tinta-forte: #141824; --cor-tinta-media: #4B4F5C; --cor-tinta-suave: #676B79; --cor-borda-hairline: #E6E3DB; --cor-borda-vazia: #C9C6BE; --cor-resolvido: #147A52; --cor-pendente: #8A5A00; --cor-travado: #C0341D; --cor-sobre-semantico: #FFFFFF; --cor-problema-fundo: #FFE8E1; --cor-problema-rotulo: #8A3620; --cor-problema-texto: #5A2312; --cor-caminho-fundo: #E8ECFD; --cor-caminho-rotulo: #1A31A8; --cor-caminho-texto: #1F2433; --cor-resultado-fundo: #E3F3EC; --cor-resultado-rotulo: #0E5C3E; --cor-resultado-texto: #124B35; --cor-sobre-cobalto-apoio: #D9DFFB; --cor-sobre-cobalto-tenue: #C3CDFA; --cor-rodape-link: #9FB0F7; --cor-rodape-apoio: #A3AAB9; --cor-rodape-divisor: #2A3040; --sombra-1: 0 1px 2px rgba(20,24,36,.06); --sombra-2: 0 4px 12px rgba(20,24,36,.10); --sombra-3: 0 16px 40px rgba(20,24,36,.16); --marca-balao: #2340D6; --marca-balao-contorno: none; --marca-monograma: #FFFFFF; --marca-texto: #2340D6; } [data-tema="escuro"] { --cor-cobalto: #6C86F3; /* TINTA: 5,6:1 no papel, 5,2:1 na elevada (v1.3) */ --cor-cobalto-superficie: #2D4AE0; /* SUPERFÍCIE: branco em cima dá 6,6:1 */ --cor-cobalto-tinta-hover: #7E93F4; --cor-cobalto-superficie-hover:#3A56E8; --cor-cobalto-veu: #1B2440; --cor-coral: #FF8566; /* mesma regra: preenchimento, não texto */ --cor-coral-veu: #38201A; --cor-sobre-cobalto: #FFFFFF; --cor-sobre-cobalto-fundo:#0B0F1A; /* texto sobre o hover clareado */ --cor-superficie-papel: #0E1119; --cor-superficie-elevada: #171B27; --cor-tinta-forte: #EDEFF5; --cor-tinta-media: #A3AAB9; --cor-tinta-suave: #8F96A6; /* 5.3:1 sobre o fundo */ --cor-borda-hairline: #2A3040; --cor-borda-vazia: #3A4152; --cor-resolvido: #4CC38A; --cor-pendente: #E0A93C; --cor-travado: #FF7A63; --cor-sobre-semantico: #0B0F1A; /* texto quando o semântico é preenchimento */ /* derivados: o design system dá o véu semântico e o tom claro do texto */ --cor-problema-fundo: #38201A; --cor-problema-rotulo: #FF7A63; --cor-problema-texto: #FFC3B0; --cor-caminho-fundo: #1B2440; --cor-caminho-rotulo: #7E93F4; --cor-caminho-texto: #EDEFF5; --cor-resultado-fundo: #12301F; --cor-resultado-rotulo: #4CC38A; --cor-resultado-texto: #9FE3C1; --cor-sobre-cobalto-apoio: #D9DFFB; --cor-sobre-cobalto-tenue: #D0D8FB; /* 4,7:1 sobre a superfície cobalto escura (v1.3) */ --cor-rodape-link: #9FB0F7; --cor-rodape-apoio: #A3AAB9; --cor-rodape-divisor: #2A3040; --sombra-1: 0 1px 2px rgba(0,0,0,.40); --sombra-2: 0 4px 12px rgba(0,0,0,.50); --sombra-3: 0 16px 40px rgba(0,0,0,.60); --marca-balao: none; --marca-balao-contorno: #FFFFFF; /* marca-curta-negativa.svg */ --marca-monograma: #FFFFFF; --marca-texto: #FFFFFF; } body { background: var(--cor-superficie-papel); color: var(--cor-tinta-forte); font: var(--texto-corpo); text-wrap: pretty; } /* Tabular em tudo que é número de registro ou dado, para nada dançar quando o valor muda. v1.3 */ .an-tabular { font-variant-numeric: tabular-nums; }