/* ========================================================================== Fluxo — tokens de identidade Fonte única de verdade do visual do app. Nenhum arquivo deve escrever um valor de cor, sombra, raio ou tamanho de fonte "na mão": tudo sai daqui. Identidade: "Papel & Tinta" (Etapa 1, decidida em 05/09/2026) As três leis: 1. TRÊS CORES, PAPEL FIXO. Existem exatamente três cores no produto — tinta (marca), dinheiro e alerta — e cada uma tem uma função que nunca muda. Verde é o que entrou. Terracota é o que está em risco. Azul-tinta é a marca e o texto. Todo o resto é papel e neutro. Se um elemento não é marca, dinheiro ou alerta, ele é neutro — sem exceção. 2. SEM CONTORNO. Nenhuma caixa tem linha em volta. O que separa uma superfície da outra é ALTURA: um degrau de luz (papel branco sobre papel bege) mais sombra. Campos de formulário fazem o contrário — afundam no papel com sombra interna. A única exceção permitida é o anel de foco, que existe por acessibilidade (ver --foco). 3. NÚMERO NÃO TEM PERSONALIDADE. A Bricolage vive só na logo e nos títulos. Todo valor em dinheiro é Inter com dígito de largura fixa (tabular), porque 1/7 e 0/O não podem dar dúvida num extrato. ========================================================================== */ /* As fontes NÃO são carregadas aqui. O app embute as duas em `ui/fontes.css` (arquivos locais), porque ele precisa abrir certo sem internet. As páginas de desenho, em `identidade/`, puxam do Google Fonts pelo delas. */ :root { /* --- 1. papel: as superfícies, do fundo para a frente ------------------ */ --papel-fundo: #eeebe3; /* o chão da aplicação */ --papel-lateral: #e6e2d8; /* barra lateral: recuada, fica atrás */ --papel-neutro: #e4e1d8; /* pílula neutra, sulco de campo vazio */ --superficie: #fffdf9; /* base do painel */ --superficie-topo: #ffffff; /* topo do painel (a luz vem de cima) */ --superficie-alta: #ffffff; /* menu, popover, modal */ /* gradiente pronto do painel — use sempre este, não monte na mão */ --painel: linear-gradient(180deg, var(--superficie-topo) 0%, var(--superficie) 100%); /* --- 2. tinta: texto e marca ------------------------------------------ */ --tinta: #17253f; /* texto forte, títulos, logo, botão primário */ --tinta-2: #4d5b70; /* texto de apoio, rótulo de painel */ --tinta-3: #8a92a0; /* texto discreto, legenda de eixo, sub */ --tinta-sobre: #faf9f6; /* texto POR CIMA de tinta (botão primário) */ --tinta-fundo: #dcdfe7; /* item de menu ativo */ /* --- 3. dinheiro: o que entrou. verde e SÓ isso ------------------------ */ --dinheiro: #0f7a52; --dinheiro-forte: #0b5f40; /* hover do que é verde */ --dinheiro-fundo: #dcede5; /* pílula "Pago", fundo de confirmação */ /* --- 4. alerta: atraso e risco ----------------------------------------- */ --alerta: #b4471f; --alerta-forte: #933815; /* hover */ --alerta-fundo: #f6e2d9; /* pílula de atraso, fundo de erro de campo */ /* --- 5. elevação: o que substitui a linha ------------------------------ */ /* três camadas em cada sombra: contato (1px), média e ambiente. é a soma das três que dá peso de objeto — nunca use só uma. */ --elev-1: 0 1px 2px rgba(23,37,63,.08), 0 2px 5px rgba(23,37,63,.06); --elev-2: 0 1px 2px rgba(23,37,63,.07), 0 5px 12px rgba(23,37,63,.07), 0 16px 30px rgba(23,37,63,.06); --elev-3: 0 2px 4px rgba(23,37,63,.10), 0 12px 24px rgba(23,37,63,.10), 0 32px 64px rgba(23,37,63,.10); --elev-lateral: 6px 0 16px rgba(23,37,63,.07); /* barra lateral */ --elev-afundado: inset 0 2px 4px rgba(23,37,63,.10), inset 0 1px 1px rgba(23,37,63,.06); /* campo de form */ --elev-afundado-erro: inset 0 2px 4px rgba(180,71,31,.20), inset 0 1px 1px rgba(180,71,31,.14); /* a ÚNICA linha permitida no produto inteiro: o anel de foco. existe por acessibilidade — teclado precisa enxergar onde está. */ --foco: 0 0 0 3px rgba(23,37,63,.26); --foco-alerta: 0 0 0 3px rgba(180,71,31,.28); /* --- 6. tipografia ----------------------------------------------------- */ --fonte-marca: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --fonte-titulo: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --fonte: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-num: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; /* escala. o segundo valor é a entrelinha, o terceiro o peso. títulos são Bricolage e sempre com tracking negativo — ela abre demais no tamanho grande se deixar solta. */ --t-display: 700 34px/1.12 var(--fonte-titulo); --track-display: -.035em; --t-h1: 700 26px/1.20 var(--fonte-titulo); --track-h1: -.03em; --t-h2: 700 20px/1.25 var(--fonte-titulo); --track-h2: -.03em; --t-h3: 600 16px/1.30 var(--fonte-titulo); --track-h3: -.02em; --t-marca: 700 20px/1.00 var(--fonte-marca); --track-marca: -.03em; --t-corpo: 400 15px/1.55 var(--fonte); --t-corpo-2: 400 13.5px/1.50 var(--fonte); --t-micro: 400 12px/1.45 var(--fonte); --t-forte: 600 13px/1.40 var(--fonte); /* rótulo de KPI: caixa alta, pequeno, espaçado */ --t-rotulo: 500 11.5px/1.30 var(--fonte); --track-rotulo: .07em; /* dinheiro. tabular sempre — ver lei 3. */ --t-num-g: 650 25px/1.20 var(--fonte-num); --track-num: -.02em; --t-num: 550 13px/1.40 var(--fonte-num); /* --- 7. forma ---------------------------------------------------------- */ --raio-1: 8px; /* pílula pequena, item de menu */ --raio-2: 10px; /* botão, campo */ --raio-3: 13px; /* painel, cartão */ --raio-4: 16px; /* janela, modal, a tela inteira */ --raio-max: 999px; /* --- 8. espaço (base 4) ------------------------------------------------ */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; /* --- 9. movimento ------------------------------------------------------ */ /* rápido o bastante pra não atrasar, lento o bastante pra ler o degrau */ --tempo: .16s; --curva: cubic-bezier(.2, .7, .3, 1); --transicao: box-shadow var(--tempo) var(--curva), transform var(--tempo) var(--curva), background-color var(--tempo) var(--curva), color var(--tempo) var(--curva); /* --- 10. camadas ------------------------------------------------------- */ --z-lateral: 10; --z-topo: 20; --z-popover: 100; --z-modal: 1000; } /* -------------------------------------------------------------------------- base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papel-fundo); color: var(--tinta); font: var(--t-corpo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; } h1 { font: var(--t-h1); letter-spacing: var(--track-h1); } h2 { font: var(--t-h2); letter-spacing: var(--track-h2); } h3 { font: var(--t-h3); letter-spacing: var(--track-h3); } /* `hidden` tem que vencer qualquer display: flex/grid de componente, senão o atributo mente e o elemento continua na tela. */ [hidden] { display: none !important; } /* foco só aparece pra quem navega por teclado — mouse não vê anel */ :focus { outline: none; } :focus-visible { box-shadow: var(--foco); border-radius: var(--raio-2); } /* todo dinheiro, em qualquer lugar, tem dígito de largura fixa */ .dinheiro-num, td.valor, .kpi-valor { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }