/* ========================================================================== Tokens — Preço em Cadeia Fonte de verdade: design-system/preco-em-cadeia/MASTER.md CONFLITO DE PALETA — RESOLVIDO EM 11/08/2026, A FAVOR DO MASTER.md. A fundação foi construída com azul #1E40AF e Fira Sans/Fira Code, valores que vinham da especificação recebida. O MASTER.md diz, na seção "Por que a recomendação automática foi descartada", que esse azul foi proposto pela skill `ui-ux-pro-max` e **descartado pelo dono do projeto**: a ACTA já tem identidade visual, aplicada na Plataforma RTC, e as duas ferramentas da casa precisam se parecer — o contrato exclui treinamento, então quem já viu a RTC tem de reconhecer esta aqui sem explicação. "Azul genérico de dashboard" está na lista de anti-padrões do MASTER.md. Não havia, portanto, duas decisões concorrentes: havia uma decisão e um resíduo da proposta que ela descartou. Este arquivo passou a carregar a paleta institucional. Os NOMES dos tokens não mudaram — é o contrato de que os módulos de tela dependem, e é exatamente para isso que a camada de token existe. Valores conferidos contra a implementação real da casa, não deduzidos: plataforma-rtc/src/app/globals.css. --------------------------------------------------------------------------- DUAS SEMÂNTICAS DE ÂMBAR QUE NÃO SE MISTURAM A paleta da casa usa dois âmbares diferentes, de propósito: --color-as-is (#B8893A, âmbar quente) SÓ significa "regime atual". Categórico, sem conotação negativa. --color-accent (#C8951F, âmbar dourado) SÓ significa "exige atenção". São o `--asis` e o `--warning` da Plataforma RTC. A distinção é da casa, não uma invenção deste projeto: dar a mesma cor a um eixo categórico e a um alerta é o mesmo colapso que o motor combate ao separar "não incide" de "não sabemos". --color-a-apurar (#6D28D9, violeta) SÓ significa A_APURAR. Violeta e não âmbar precisamente porque âmbar já está falado duas vezes. Além disso "a apurar" não é anomalia: de 2029 em diante é estrutural e legítimo, e pintá-lo de alerta treina o usuário a ignorar metade da tabela. --color-destructive (#DC2626, vermelho) SÓ significa erro DA APLICAÇÃO (digest divergente, contexto ausente). Nunca direção financeira. A casa não usa vermelho para perda — usa âmbar tostado (--color-negativo) — justamente para não ler prejuízo como defeito. Vermelho aqui é falha de software, e só aparece em .pc-erro e .pc-nota-erro. Nenhum módulo define cor nova sem passar por token. Fontes hospedadas localmente. NENHUM @import remoto, NENHUM CDN, em nenhum arquivo — a ferramenta carrega dado comercial sensível da BIC, e uma fonte remota vaza o acesso de cada usuário para terceiro. ========================================================================== */ :root { /* -- cor: institucionais ACTA ------------------------------------------- */ --color-primary: #006E65; /* verde ACTA */ --color-on-primary: #FFFFFF; --color-secondary: #00524B; /* verde institucional escuro */ --color-accent: #C8951F; /* O mesmo âmbar, escurecido para TEXTO. #C8951F dá 2,58 sobre o off-white, bem abaixo do mínimo de 4,5, e é justamente a cor do aviso "Simulação não publicada", que é a frase mais importante daquela tela. Em borda, faixa e barra de gráfico o âmbar claro continua certo: ali ele não é texto e o contraste que importa é outro. #8F6A16 é o mais claro que passa nos fundos claros e no creme (4,74, 4,95, 4,63 e 4,51). */ --color-accent-texto: #8F6A16; /* "Não avaliável" tinha exatamente a cor e o fundo de "a apurar", e a única diferença era a hachura de 45°. Em projeção ou em impressão em preto e branco os dois viram o mesmo chip, e eles dizem coisas diferentes: "a apurar" é lacuna de norma, "não avaliável" é medida que não faz sentido naquele recorte. O MASTER reserva o violeta ao "a apurar"; este é o grafite do TO-BE, que já é vocabulário da casa. */ --color-nao-avaliavel: #3D4548; --surface-nao-avaliavel: #EEF0F1; /* âmbar dourado — "exige atenção", e só isso */ --color-background: #FAFAF7; /* off-white quente, não branco azulado */ --color-foreground: #1B1F1E; /* preto ACTA, grafite levemente esverdeado */ --color-muted: #F1EEE5; /* superfície alternativa / cartão em hover */ --color-border: #DED9CB; /* bege acinzentado */ --color-destructive: #DC2626; /* erro da aplicação — nunca direção financeira */ /* -- "a apurar": token obrigatório do projeto --------------------------- */ --color-a-apurar: #6D28D9; --surface-a-apurar: #F5F3FF; --hachura-a-apurar: repeating-linear-gradient( 45deg, transparent 0 4px, rgba(109, 40, 217, .16) 4px 7px ); /* -- eixos de comparação, já resolvidos pela ACTA ----------------------- A convenção AS-IS × TO-BE é exatamente o eixo deste estudo (2026 contra 2027 e 2033) e já está estabelecida na casa. Declarados aqui para que nenhum módulo de tela precise inventar a cor de uma série. ------------ */ --color-as-is: #B8893A; /* âmbar quente — regime atual */ --superficie-as-is: #F4ECDB; --color-to-be: #3D4548; /* grafite frio — Reforma */ --superficie-to-be: #DDE0E1; --color-ibs: #006E65; /* verde brand */ --color-cbs: #2D5A6E; /* azul-petróleo, distinto do verde */ /* -- direção financeira ------------------------------------------------- Crédito/ganho em verde-musgo, débito/perda em âmbar tostado. NUNCA vermelho para perda: vermelho é defeito de software, não prejuízo. ---- */ --color-positivo: #3F7A5C; --superficie-positivo: #DFEBE3; --color-negativo: #9E6B1F; --superficie-negativo: #F2E4CA; /* -- densidade ---------------------------------------------------------- */ --grid-gap: 8px; --card-padding: 12px; --font-size-small: 12px; --table-row-height: 36px; /* 196px, e nao 240. O item mais largo do menu e "Análise de preço": 111px de texto, mais o ícone, o vão e o recuo, dá 157. Os 83px que sobravam não estavam servindo à navegação — estavam saindo dos três demonstrativos, que disputam cada pixel em quatro colunas de número. Cada painel ganha 15px com a mudança. */ --sidebar-width: 196px; --header-height: 72px; /* -- tipografia --------------------------------------------------------- */ --fonte-texto: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --fonte-numero: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* -- derivados ---------------------------------------------------------- */ /* O nome que quatro regras já pediam e que nunca existiu. Sem ele, a declaração `color: var(--texto-primario)` era inválida no valor computado e a cor vinha por herança: as regras não faziam nada, em silêncio, e o dia em que alguém definisse o token quatro cores mudariam sem ninguém ter pedido. É apelido de `--color-foreground`, que é o preto da casa, para a família `--texto-*` ficar completa. */ --texto-primario: var(--color-foreground); --texto-secundario: #444947; /* Medido no navegador, não escolhido no olho: #757A78 dava 4,17 sobre o off-white, 4,36 sobre o branco e 3,76 sobre o creme do chip, os três abaixo do mínimo de 4,5 que a WCAG pede para texto normal. E ele é justamente a cor dos RÓTULOS, que são pequenos: contraste baixo em texto pequeno é o pior lugar para economizar. #696D6B é o cinza mais claro que passa nos três fundos (5,02, 5,25 e 4,52). Mais claro que isso reprova; mais escuro tiraria a hierarquia entre rótulo e valor, que é o trabalho desta cor. */ --texto-terciario: #696D6B; --superficie: #FFFFFF; --superficie-elevada: #F5F2E8; --sombra-card: 0 1px 2px rgba(27, 31, 30, .04), 0 1px 3px rgba(27, 31, 30, .06); --raio: 8px; --raio-chip: 6px; --duracao: 250ms; --curva: cubic-bezier(.25, .46, .45, .94); /* power1.out */ /* -- superfícies e cores derivadas (aditivas, valores da Plataforma RTC) -- Três degraus de superfície: #FAFAF7 raiz, #FFFFFF cartão, #F5F2E8 elevado. Os dois tons novos vêm da mesma paleta: o verde pálido do badge da casa e o tom de cartão ativo. Nenhum módulo escreve esses hex fora daqui. ------ */ --color-primary-escuro: #005B54; /* segundo degrau do degradê do botão */ --superficie-marca: #DCEBE7; /* verde pálido: item de menu ativo, chip publicado */ --superficie-ativa: #E8E4D6; /* linha de tabela em hover, cartão ativo */ /* -- elevação ------------------------------------------------------------ Sombras escalonadas quase imperceptíveis em repouso; no hover a sombra ganha o tom esverdeado da marca. Essa é a assinatura da casa. ---------- */ --sombra-card-hover: 0 2px 6px rgba(27, 31, 30, .05), 0 8px 24px rgba(0, 110, 101, .08); --sombra-elevada: 0 8px 32px rgba(27, 31, 30, .08); --sombra-modal: 0 16px 48px rgba(27, 31, 30, .12), 0 8px 16px rgba(27, 31, 30, .06); /* -- forma --------------------------------------------------------------- --raio (8px) e --raio-chip (6px) continuam valendo; a escala cresce. --- */ --raio-md: 12px; --raio-lg: 16px; --raio-xl: 20px; --raio-pill: 9999px; /* -- escala de espaço ----------------------------------------------------- */ --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px; --espaco-5: 20px; --espaco-6: 24px; --espaco-7: 32px; --espaco-8: 48px; /* -- pesos ---------------------------------------------------------------- As faces 300 e 500 de Plus Jakarta Sans estão em disco desde a fundação; estes tokens as põem em uso de fato (base.css e componentes.css). ------ */ --peso-leve: 300; --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-forte: 700; /* -- movimento ------------------------------------------------------------ 150ms para resposta direta (hover, foco), 250ms para transição de estado, 400ms para entrada de conteúdo. --curva e --duracao continuam valendo. -- */ --duracao-rapida: 150ms; --duracao-lenta: 400ms; --curva-padrao: cubic-bezier(.4, 0, .2, 1); --curva-entrada: cubic-bezier(.22, 1, .36, 1); /* -- densidade refinada ---------------------------------------------------- Linha de 38px: densa, mas com ar para o número respirar. O token antigo --table-row-height (36px) permanece para quem já o referencia. ---------- */ --altura-linha-tabela: 38px; } /* ========================================================================== Plus Jakarta Sans (300–700) e JetBrains Mono (400–700), hospedadas localmente. Ambas SIL OFL 1.1, que permite a hospedagem própria. Os .woff2 vivem em static/fontes/ — ver static/fontes/LEIA-ME.md. font-display: swap mantém o texto legível enquanto a face carrega, e a pilha de fallback em --fonte-texto/--fonte-numero preserva o layout. ========================================================================== */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fontes/PlusJakartaSans-300.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fontes/PlusJakartaSans-400.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fontes/PlusJakartaSans-500.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fontes/PlusJakartaSans-600.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fontes/PlusJakartaSans-700.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fontes/JetBrainsMono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fontes/JetBrainsMono-500.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fontes/JetBrainsMono-600.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fontes/JetBrainsMono-700.woff2') format('woff2'); } /* Altura do cabeçalho em telas pequenas. */ @media (max-width: 640px) { :root { --header-height: 64px; } }