/* =========================================================================== Trilho — folha de tokens 18/09/2026 — O VISUAL DO GOLDKO HUB, EM ROXO E AMARELO. Gregory: "quero fazer um layout igual ao que temos no hub, mas no lugar do azul usamos o roxo e no lugar do laranja usamos o amarelo — isso vale para todos os modulos, para a fonte das letras, tipo da letra etc". Especificacao: GoldKo/TRILHO-VISUAL-HUB-ESPEC.md (a traducao cor por cor). Isto SUBSTITUI o visual "guidebook" (papel creme, grafite, pilula ametista como botao) em toda tela servida por esta casca. O que muda nesta folha: * nasce a paleta do Hub traduzida: --trilho-roxo-950..100 (o navy do Hub), --trilho-lilas* (o azure), --trilho-amarelo* (o laranja da acao) e --trilho-nevoa, que passa a ser o FUNDO da pagina (o cream do Hub); * --trilho-nevoa MUDOU DE SENTIDO: era o cinza de rotulo (#8B8880), agora e o fundo. O cinza de rotulo virou --trilho-rotulo (roxo-800 apagado, 5,43:1 sobre a nevoa). Toda tela que lia --trilho-nevoa como cor de TEXTO foi reapontada no mesmo commit; * os tokens antigos continuam existindo e passam a APONTAR para os novos (papel -> nevoa, grafite -> roxo-900, carvao -> roxo-800, linha -> roxo-100, base -> lilas-dark, apoio -> amarelo). Nenhum componente precisa trocar de nome; * A REGRA R02 DO GUIDEBOOK CAI ("a cor de apoio nunca em botao, texto ou fundo de bloco"). No Hub o laranja e a cor do botao de acao; aqui o amarelo e. Unico desvio consciente em relacao ao Hub: o botao amarelo leva texto roxo-950 (#1F1A4F, ~11:1), nunca branco (~1,5:1, ilegivel). Amarelo como COR DE TEXTO so sobre fundo escuro (roxo-950/900); sobre fundo claro, --trilho-amarelo-dark; * o teto de peso 600 da interface tambem cai: o Hub usa 700/800 em titulo e numero. As paletas white label (folha/barro/framboesa) ficam como estavam: a ametista, que e a da GoldKo, e a que vira "Hub roxo/amarelo". A regra de ouro do guidebook continua valendo: "se um componente precisar de uma cor que nao esta nesta lista, o problema e do componente, nao da lista." =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&display=swap'); /* --- 18/09/2026: a paleta do GoldKo Hub, traduzida ------------------------- Cada linha tem a MESMA luminosidade do equivalente do Hub (tailwind.config.ts do Hub). Hub -> Trilho: navy-950 #082F49 -> roxo-950 navy-900 #0C4A6E -> roxo-900 navy-800 #155E86 -> roxo-800 navy-700 #1B6FA0 -> roxo-700 navy-100 #D8E9F4 -> roxo-100 cream #F4F7FB -> nevoa azure #38BDF8 -> lilas azure-dark #0284C7 -> lilas-dark brand #F97316 -> amarelo brand-dark #C2590B -> amarelo-dark */ :root { --trilho-roxo-950: #1F1A4F; /* barra lateral, cabecalho, cartao-heroi */ --trilho-roxo-900: #2E2877; /* titulos e texto principal (o ink do Hub) */ --trilho-roxo-800: #3D358F; /* texto de apoio */ --trilho-roxo-700: #4E45AB; --trilho-roxo-100: #E2E0F5; /* borda em fundo claro */ --trilho-nevoa: #F6F5FB; /* FUNDO da pagina (o cream do Hub) */ --trilho-branco: #FFFFFF; /* cartao, campo */ --trilho-lilas: #7F77DD; /* acento claro: grafico, destaque (a ametista) */ --trilho-lilas-light: #ABA5EC; --trilho-lilas-dark: #5A51C9; /* acento legivel sobre claro: link, selecao */ --trilho-lilas-soft: #EDEBFB; /* fundo fraco do acento */ --trilho-amarelo: #FACC15; /* ACAO: botao, item ativo, foco */ --trilho-amarelo-light: #FDE047; /* hover da acao */ --trilho-amarelo-soft: #FEF9C3; /* fundo fraco da acao */ --trilho-amarelo-dark: #A16207; /* texto "da acao" sobre fundo claro */ /* Os papeis da acao, com nome, para ninguem escrever branco sobre amarelo por reflexo do Hub. */ --trilho-acao: var(--trilho-amarelo); --trilho-acao-hover: var(--trilho-amarelo-light); --trilho-acao-texto: var(--trilho-roxo-950); /* Rotulo, legenda, dica: o navy-800/70% do Hub, chapado para poder ser medido. 5,43:1 sobre a nevoa, 5,01:1 sobre o lilas-soft. Mesmo valor da folha do motor fiscal (goldko-sistema-fiscal), para as duas nao rachar. */ --trilho-rotulo: #625D9C; /* Sombra do cartao — a `shadow-card` do Hub, com o roxo-950 no lugar do navy. */ --trilho-sombra-cartao: 0 1px 3px rgba(31,26,79,0.08), 0 4px 14px rgba(31,26,79,0.06); /* Sobre o fundo escuro (barra lateral, cabecalho, heroi): a nevoa em transparencias, os mesmos degraus do Hub (cream/35, /55, /65, /85) e as superficies translucidas (white/5, white/10, white/15). */ --trilho-escuro-texto: rgba(246,245,251,.65); --trilho-escuro-texto-forte: rgba(246,245,251,.85); --trilho-escuro-texto-fraco: rgba(246,245,251,.55); --trilho-escuro-grupo: rgba(246,245,251,.40); --trilho-escuro-superficie: rgba(255,255,255,.05); --trilho-escuro-ativo: rgba(255,255,255,.10); --trilho-escuro-borda: rgba(255,255,255,.15); /* O veu atras da gaveta e do dialogo: roxo-950 a 60%, como o navy-950/60. */ --trilho-veu: rgba(31,26,79,.60); /* A sombra grande do cabecalho e do dialogo (shadow-lg do Tailwind). */ --trilho-sombra-grande: 0 10px 15px -3px rgba(31,26,79,.18), 0 4px 6px -4px rgba(31,26,79,.12); /* O anel de foco do campo: amarelo a 25%, o ring-brand/25 do Hub. */ --trilho-anel-foco: 0 0 0 2px rgba(250,204,21,.25); } :root { /* --- neutros: apontam para a paleta do Hub ------------------------------ */ --trilho-grafite: var(--trilho-roxo-900); /* texto principal */ --trilho-carvao: var(--trilho-roxo-800); /* texto de apoio */ --trilho-areia: var(--trilho-lilas-soft); /* blocos e superficies secundarias */ --trilho-papel: var(--trilho-nevoa); /* fundo */ --trilho-tinta: var(--trilho-branco); /* superficie do cartao; texto sobre roxo */ /* --- estados: os do Hub (Tailwind), identicos nas quatro paletas -------- O Hub usa emerald/amber/red. Aqui entra o degrau 700 e nao o 600 da especificacao: o 600 mede ~3,4:1 (verde), ~2,9:1 (ambar) e ~4,0:1 (vermelho) sobre o proprio fundo fraco — abaixo do minimo de 4,5:1 para texto, e a pastilha de estado E texto. O 700 mede 4,8 / 4,5 / 5,3. Info e o lilas-dark, como na especificacao (5,2:1 sobre o lilas-soft). */ --trilho-sucesso: #047857; --trilho-atencao: #B45309; --trilho-erro: #B91C1C; --trilho-info: var(--trilho-lilas-dark); /* --- geometria do logotipo ------------------------------------------- Toda medida deriva de H, a altura da pilula da frente. Nunca medir em pixel absoluto: escale H e o resto acompanha. */ --trilho-desloc: 0.16; /* deslocamento da camada, fracao de H */ --trilho-raio: 50%; /* pilula COMPLETA — nunca um raio menor */ --trilho-corpo: 0.58; /* corpo do texto, fracao de H */ --trilho-folga: 0.46; /* folga lateral, fracao de H */ --trilho-respiro: 0.50; /* area de respiro, a partir da camada de apoio */ --trilho-h-minimo: 24px; /* abaixo disso, usar a versao plana */ /* --- tipografia ------------------------------------------------------- Exatamente a do Hub: o `font-sans` padrao do Tailwind 3.4 (o Hub carrega a Geist e nunca a aplica). Fredoka SO no logotipo "trilho" e na assinatura — a unica excecao de fonte. */ --trilho-fonte-marca: 'Fredoka', sans-serif; --trilho-fonte-titulo: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --trilho-fonte-interface: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Numero: a MESMA sans, em negrito, com tabular-nums em tabela. */ --trilho-fonte-numero: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --trilho-fonte-codigo: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* O teto de 600 do guidebook caiu em 18/09/2026: o Hub usa 700/800. */ --trilho-peso-max-interface: 800; } /* --- a escolha do cliente troca apenas estas duas linhas ------------------ Uma paleta por ambiente. Nunca duas na mesma peca, tela ou documento. AMETISTA E A PALETA PRINCIPAL (Gregory, 21/08/2026) e, desde 18/09/2026, e a "Hub roxo/amarelo": base = lilas-dark (legivel sobre claro), apoio = amarelo (a cor da acao). As outras tres existem para o cliente white label escolher e ficam fora do padrao do Hub. */ [data-paleta="ametista"] { --trilho-base:#5A51C9; --trilho-apoio:#FACC15; } [data-paleta="folha"] { --trilho-base:#1D9E75; --trilho-apoio:#D85A30; } [data-paleta="barro"] { --trilho-base:#D85A30; --trilho-apoio:#7F77DD; } [data-paleta="framboesa"] { --trilho-base:#D4537E; --trilho-apoio:#378ADD; } /* Sem paleta declarada: ametista. Nao e fallback de emergencia — e o padrao da casa. Um ambiente sem cliente definido e um ambiente da Trilho. */ :root:not([data-paleta]) { --trilho-base:#5A51C9; --trilho-apoio:#FACC15; } /* =========================================================================== CAMADA DERIVADA — acrescentada em 22/08/2026, reapontada em 18/09/2026 Linha de tabela e fundo fraco de cada estado: cores que nenhum componente honesto consegue evitar. Nao sao cores novas — sao DERIVADAS da paleta, e moram aqui para que cada tela nao invente a sua. =========================================================================== */ :root { /* Linhas. A forte separa secao (a borda do cartao do Hub, roxo-100); a fraca separa linha de tabela (roxo-100 a 60% sobre branco). */ --trilho-linha: var(--trilho-roxo-100); --trilho-linha-fraca: #EEECF9; /* Fundo fraco de cada estado, para pastilha e bloco de aviso. O texto por cima e' sempre a cor cheia do estado — nunca o inverso. Os do Hub: emerald-100, amber-100, red-100, e o lilas-soft para info. */ --trilho-base-fraco: var(--trilho-lilas-soft); --trilho-base-medio: var(--trilho-roxo-100); --trilho-sucesso-fraco: #D1FAE5; --trilho-atencao-fraco: #FEF3C7; --trilho-erro-fraco: #FEE2E2; --trilho-info-fraco: var(--trilho-lilas-soft); /* O QUINTO estado: neutro — desligado, arquivado, encerrado. Um PAPEL com nome, apontando para neutro que ja existe. roxo-800 sobre roxo-100: 7,7:1. */ --trilho-neutro: var(--trilho-roxo-800); --trilho-neutro-fraco: var(--trilho-roxo-100); /* Sombra unica: a do cartao do Hub. */ --trilho-sombra: var(--trilho-sombra-cartao); } /* O fraco da BASE muda com a paleta; os dos estados, nao — ninguem reaprende interface a cada cliente. */ [data-paleta="folha"] { --trilho-base-fraco:#E8F5F0; --trilho-base-medio:#CFEAE0; } [data-paleta="barro"] { --trilho-base-fraco:#FBEDE8; --trilho-base-medio:#F6D8CD; } [data-paleta="framboesa"] { --trilho-base-fraco:#FBEBF1; --trilho-base-medio:#F5D4E0; } /* =========================================================================== A COR DE APOIO DEPOIS DE 18/09/2026 Na ametista ela e o AMARELO da acao: botao de acao, item ativo da barra, foco, destaque no cartao-heroi — e a camada deslocada do logotipo. Duas regras sobrevivem, porque sao de legibilidade e nao de gosto: * sobre o amarelo, o texto e --trilho-acao-texto (roxo-950), nunca branco; * amarelo como COR DE TEXTO so sobre fundo escuro; sobre claro, --trilho-amarelo-dark. O texto dentro da pilula do logotipo continua branco puro (R03), e a assinatura "simples assim." continua na cor base (R04). =========================================================================== */