/* ===================================================================== lt-tokens.css — FONTE ÚNICA do sistema visual da LT Flow ===================================================================== Consolidação de 21/09/2026. Até aqui o produto tinha quatro paletas vivas ao mesmo tempo: esta, a do dashboard-premium.css, a do flow.css e um :root copiado à mão dentro de cada página de marketing. Quatro verdades sobre a mesma cor é o mesmo que nenhuma. A partir de agora: • ESTE arquivo declara as cores, os espaços, as formas, as alturas, a tipografia e o movimento. Nada mais declara. • dashboard-premium.css e flow.css NÃO repetem mais cor literal: o :root deles virou uma folha de apelidos que aponta para os tokens --lt-* daqui. Quem já escrevia var(--accent) ou var(--flow-primary) numa tela continua escrevendo — só que o valor agora vem de um lugar só. • Tela nova consome --lt-* direto. Por que o prefixo --lt- continua: os nomes genéricos (--primary, --border, --accent) seguem existindo como apelidos nas duas folhas de consumo e nas telas. O prefixo é o que permite a ponte ser explícita — e o que impede que uma tela redefina sem querer a base do sistema inteiro. Contraste: os valores foram medidos par a par, não estimados. A razão anotada ao lado de cada cor é contra a superfície em que ela é usada. Quem mexer aqui remede antes de trocar. ===================================================================== */ :root{ /* ── Superfícies ────────────────────────────────────────────────── */ --lt-canvas:#F4F7FA; /* fundo da página */ --lt-surface:#FFFFFF; /* cartão, tabela, rail */ --lt-sunken:#F7F9FC; /* cabeçalho de tabela, campo em repouso */ --lt-veil:rgba(11,27,51,.44); /* véu atrás de modal e drawer */ /* ── Texto ──────────────────────────────────────────────────────── */ --lt-tx-1:#0B1B33; /* 17,2:1 sobre branco — títulos e números */ --lt-tx-2:#33415C; /* 10,2:1 — corpo */ --lt-tx-3:#5A6B85; /* 5,4:1 — rótulo e apoio. Não usar abaixo de 12px */ --lt-tx-inv:#FFFFFF; /* texto sobre preenchimento escuro */ /* ── Marca ──────────────────────────────────────────────────────── */ --lt-navy:#12294A; /* 14,6:1 sobre branco */ --lt-teal:#2DBDA8; /* 2,34:1 sobre branco — DECORATIVO APENAS. Não use para texto, ícone com significado, borda de controle ou qualquer portador de estado: reprova até o mínimo de 3:1 da WCAG 1.4.11. Serve sobre fundo escuro (6,2:1 sobre --lt-navy — medido de novo em 21/09/2026; o comentário antigo dizia 7,4:1 e estava errado, embora ainda passe AA) e como camada decorativa ao lado de --lt-primary. */ /* ── Ação ───────────────────────────────────────────────────────── */ --lt-primary:#0A6E63; /* 6,1:1 sobre branco, 5,7:1 sobre canvas — botão, link, item ativo, foco */ --lt-primary-deep:#0A5F56; /* 7,5:1 — hover */ --lt-primary-tint:#EAF4F1; /* fundo tingido do item ativo (5,5:1 com o primary) */ --lt-primary-wash:rgba(10,110,99,.05); /* hover de linha de tabela */ --lt-primary-ring:rgba(10,110,99,.20); /* halo de foco em campo */ /* ── Semântica. Estado nunca só por cor: acompanhe de glifo e rótulo ── Cada família tem um par: o tom de TEXTO (passa AA sobre branco e sobre o próprio tint) e o tom de MARCA (preenchimento de ponto, barra, borda — onde só valem os 3:1 de componente). Trocar um pelo outro é o erro que derrubava o contraste das telas antigas. */ --lt-risk:#A81D30; /* 7,3:1 — texto de risco; branco sobre ele 7,3:1 */ --lt-risk-mark:#C2263C; /* 5,8:1 — preenchimento de indicador */ --lt-risk-tint:#FBEAEC; /* 6,3:1 com --lt-risk */ --lt-warn:#9A4A08; /* 6,3:1 — texto de atenção; branco sobre ele 6,3:1 */ --lt-warn-mark:#D97706; /* 3,2:1 — só preenchimento. Branco em cima REPROVA */ --lt-warn-tint:#FDF2E3; /* 5,7:1 com --lt-warn */ --lt-ok:#0F7B4F; /* 5,3:1 — sucesso confirmado */ --lt-ok-tint:#E8F3ED; /* 4,7:1 com --lt-ok */ --lt-note:#1B4FA8; /* 7,7:1 — azul informativo PORTADOR DE ESTADO. Entrou em 21/09/2026 no lugar do #3b82f6 do dashboard-premium, que dava 3,68:1 e era usado como texto e como fundo de badge com letra branca — reprovava nas duas pontas. */ --lt-note-tint:#E9EFF9; /* 6,7:1 com --lt-note */ --lt-info:#5A6B85; /* 5,4:1 — neutro informativo, sem alarme */ --lt-info-tint:#EEF1F6; /* ── Linhas ─────────────────────────────────────────────────────── */ --lt-line:#E7EDF4; /* borda de cartão e divisor */ --lt-line-soft:#EDF1F7; /* divisor interno, mais leve */ --lt-line-strong:#D5DEE9; /* divisor que separa seção, não linha */ --lt-line-ctl:#8695AB; /* 3,04:1 sobre branco — borda de campo e de controle. Separado de --lt-line de propósito: divisor pode ser leve, borda que identifica um controle precisa de 3:1. Campo vive sobre --lt-surface; sobre --lt-canvas cai para 2,8:1, então não ponha campo de borda solta no fundo da página. */ /* ── Espaço: escala de 4. Sem 10, 14, 18 ou 30 ──────────────────── */ --lt-s2:2px; --lt-s4:4px; --lt-s6:6px; --lt-s8:8px; --lt-s12:12px; --lt-s16:16px; --lt-s20:20px; --lt-s24:24px; --lt-s32:32px; --lt-s40:40px; --lt-s56:56px; --lt-s72:72px; /* ── Alturas fixas: uniformidade percebida vem daqui ────────────── */ --lt-h-head:56px; /* cabeçalho da página E bloco da marca na rail: iguais para a linha atravessar sem degrau */ --lt-h-ctl:36px; /* botão, campo, seletor */ --lt-h-ctl-sm:30px; --lt-h-row:44px; /* linha de tabela */ --lt-h-nav:34px; /* item de navegação */ --lt-rail-w:252px; /* ── Forma: interno = externo − padding ─────────────────────────── */ --lt-r-ctl-sm:6px; /* chip, badge, canto de cabeçalho de tabela */ --lt-r-ctl:8px; /* botão, campo, seletor */ --lt-r-pop:12px; /* menu, popover, toast */ --lt-r-card:14px; /* cartão */ --lt-r-modal:16px; /* modal */ --lt-r-pill:999px; /* ── Elevação: cartão usa borda, sombra é de quem flutua. Tudo tingido de --lt-tx-1 em vez de preto puro: sombra preta sobre canvas azulado acinzenta a superfície e é o que dava aquele ar de template comprado. ─────────────────────────────────────────── */ --lt-elev-1: 0 1px 2px rgba(11,27,51,.05); --lt-elev-2: 0 1px 2px rgba(11,27,51,.05), 0 6px 16px -8px rgba(11,27,51,.12); --lt-elev-pop: 0 0 0 1px rgba(11,27,51,.055), 0 1px 2px rgba(11,27,51,.06), 0 10px 28px -8px rgba(11,27,51,.14); --lt-elev-modal: 0 0 0 1px rgba(11,27,51,.06), 0 24px 64px -16px rgba(11,27,51,.28); /* ── Tipografia ───────────────────────────────────────────────────── UMA família para o produto inteiro. Plus Jakarta Sans é a que já vestia as ~40 telas do app; a dupla Playfair Display + DM Sans vivia só no marketing e criava duas marcas para o mesmo produto. A pilha de reserva é real, não decorativa: enquanto a webfont não chega — ou quando ela não chega —, a página cai em Segoe UI no Windows (onde este produto é lido), San Francisco no Mac e Roboto no Android, todas humanistas de altura-x parecida com a Jakarta. Trocar entre elas desloca o texto pouco. */ --lt-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif; --lt-mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,monospace; /* Tracking negativo progressivo: a Jakarta abre em tamanho grande e começa a parecer página de vendas dentro de um app. */ --lt-track-16:-.006em; --lt-track-20:-.014em; --lt-track-24:-.018em; --lt-track-28:-.022em; --lt-track-40:-.03em; /* ── Movimento ──────────────────────────────────────────────────── */ --lt-t-fast:120ms; --lt-t-base:180ms; --lt-ease:cubic-bezier(.2,.8,.25,1); } /* ===================================================================== Primitivas. Todas com prefixo lt- para não colidir com Bootstrap nem com as classes das telas atuais. ===================================================================== */ /* Numerais que empilham, somam ou mudam precisam alinhar em coluna. */ .lt-num{ font-variant-numeric: tabular-nums lining-nums; } /* Número CNJ: 20 dígitos em 5 grupos. Em fonte proporcional dois números diferentes têm larguras diferentes e não alinham empilhados, e o olho perde a capacidade de comparar. A monoespaçada do sistema tem altura-x maior que a Jakarta; 0.94em e o tracking igualam os dois na mesma linha. */ .lt-cnj{ font-family: var(--lt-mono); font-size: .94em; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } /* Rótulo de seção. Caixa alta só até 11px, peso 600, no máximo 3 palavras. */ .lt-eyebrow{ font: 600 10.5px/16px var(--lt-font); letter-spacing: .09em; text-transform: uppercase; color: var(--lt-tx-3); } /* Seleção de texto na cor de ação, não no azul do sistema operacional — é o único lugar em que o produto aparece com a cor do Windows. */ ::selection{ background: var(--lt-primary-tint); color: var(--lt-tx-1); } /* Foco único para todo o sistema. :focus-visible e não :focus — senão o clique de mouse acende o anel e o usuário lê como defeito. SAIU do .lt-scope em 30/08/2026. Escopada, esta regra valia para UMA tela: nas outras 40 ficava o padrão do Bootstrap, e o campo da topbar ainda fazia outline:none. Quem navega por teclado — e quem usa leitor de tela sempre navega por teclado — não enxergava onde estava. Acessibilidade escopada não é acessibilidade. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline: 2px solid var(--lt-primary); outline-offset: 2px; border-radius: inherit; } /* Sobre a rail navy o anel verde quase some (#0A6E63 contra #12294A é 1,9:1). Ali a lógica inverte: quem sobrevive é o anel claro. Acrescentado em 21/09/2026 — a rail é justamente por onde se navega de teclado. */ :where(.sidebar) :where(a,button,input,select,summary,[tabindex]):focus-visible{ outline-color: var(--lt-surface); outline-offset: 2px; } /* Respeitar quem pediu menos movimento. Vale para a árvore inteira — e "inteira" quer dizer o documento, não um contêiner: as transições e o translateY(-1px) de todo botão e todo cartão vivem em dashboard-premium.css, fora do .lt-scope, e eram exatamente o movimento que a pessoa pediu para não ver. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }