/* ===================================================================== qg-tokens-base.css — A CAMADA DE DECISAO do QG Policial. Este arquivo nao desenha nada. Ele so DECIDE: que cinza e' fundo, que cinza e' texto, quanto vale um passo de espacamento, quanto tempo dura uma transicao. Quem desenha e' o qg-ui.css, e ele so tem permissao de usar os nomes daqui. POR QUE DOIS ARQUIVOS: token e componente mudam por motivos diferentes. Trocar o tom do dourado e' decisao de marca e mexe em UM valor aqui. Mudar como um card se comporta no hover e' decisao de interface e mexe no qg-ui.css. Misturar os dois foi exatamente o que produziu os 483 KB de CSS inline copiado 11 vezes: nao havia onde mudar o dourado sem mudar tambem o card. O QUE MUDOU EM RELACAO AO LEGADO (e por que): 1. O DOURADO VIROU ACENTO RESERVADO. No CSS antigo do Admin, o #C9A96A era fundo de aba ativa, cor de numero de KPI, cor de titulo de secao, cor de barra de progresso, cor de borda de foco e cor de link — tudo ao mesmo tempo. Acento que acentua tudo nao acentua nada: era impossivel saber, olhando a tela, o que era clicavel e o que era so enfeite. Aqui o dourado tem tres empregos e mais nenhum: acao primaria, estado ativo de navegacao, e a marca. Numero de KPI passou a ser texto primario; hierarquia quem faz e' tamanho e peso, nao cor. 2. NASCEU UMA ESCALA DE CINZA DE VERDADE. O legado tinha --wh, --gy, --gl e mais nada — tres tons para cobrir texto, label, borda, fundo de card, fundo de hover e fundo de campo. Faltando degraus, cada tela inventava rgba(255,255,255,.08) na hora, e o resultado e' que superficie nenhuma tem relacao com as outras. Agora sao quatro superficies e tres niveis de texto, nomeados pelo PAPEL (surface-2 = elevado) e nao pela aparencia (cinza-claro), porque no tema claro o elevado e' mais claro e no escuro e' mais claro tambem — o nome sobrevive a troca de tema, a aparencia nao. 3. TEMA CLARO DEIXOU DE SER REMENDO. Antes o body.light redefinia seis variaveis e todo o resto continuava com rgba branco cravado no meio das regras, o que dava borda invisivel e texto cinza sobre branco. Aqui os dois temas redefinem o MESMO conjunto completo de tokens. Nenhuma cor pode nascer dentro do qg-ui.css. PONTE DE COMPATIBILIDADE: no fim do arquivo os nomes velhos (--or, --wh, --gy, --bg2, --line...) continuam existindo como apelido dos novos. Isso nao e' divida tecnica esquecida, e' decisao: o JS do Admin escreve `style="color:var(--gr)"` dentro de string, e ha 23 arquivos no projeto na mesma situacao. Enquanto a ponte existe, uma pagina pode adotar o design system novo sem que ninguem precise varrer JS gerado a mao. A ponte sai quando a ultima pagina migrar. DIVISAO EM DOIS ARQUIVOS (12/09/2026, feature saida-e-icones): este e o qg-tokens-BASE.css — so os nomes --qg-*. A ponte de compatibilidade (--or, --wh, --bg...) mora no qg-tokens.css, que importa este. Quem ja tem tema proprio com esses nomes velhos (os tres hubs) carrega SO a base: a ponte, la dentro, sobrescreveria o tema claro do hub. Servir sempre com cache-busting (?v=). ===================================================================== */ :root{ /* ------------------------------------------------------------------- 1. SUPERFICIE — nomeada pela ELEVACAO, nunca pela cor. base = o papel da pagina, o plano de fundo de tudo sunken = recuado: cabecalho de tabela, poco de campo, trilho s1 = o plano padrao de conteudo: card, sidebar, painel s2 = elevado: hover de linha, campo, chip, botao secundario s3 = flutuante: modal, popover, dropdown, toast ------------------------------------------------------------------- */ --qg-bg-base: #0A0C09; --qg-bg-sunken: #070907; --qg-s1: #12150F; /* A sidebar tem token proprio porque a relacao dela com o fundo se INVERTE entre os temas: no escuro ela e' mais clara que a pagina, no claro precisa ser mais escura. Sem token separado, o tema claro ficava com coluna branca sobre fundo bege — a navegacao boiando, sem chao. */ --qg-side-bg: #12150F; --qg-s2: #191D14; --qg-s3: #21261A; /* Fundo de estado. Sempre translucido, para funcionar sobre qualquer superficie sem precisar de uma variante por elevacao. */ --qg-hover: rgba(236,239,227,.045); --qg-active: rgba(236,239,227,.075); --qg-selected: rgba(201,169,106,.10); /* ------------------------------------------------------------------- 2. TRACO — borda e divisoria. line = divisoria padrao, deve quase sumir strong = borda de componente que precisa se sustentar sozinho focus = so o anel de foco, nunca decoracao ------------------------------------------------------------------- */ --qg-line: rgba(236,239,227,.09); --qg-line-strong: rgba(236,239,227,.17); --qg-line-focus: #C9A96A; /* ------------------------------------------------------------------- 3. TEXTO — tres niveis, e tres bastam. t1 = o dado que a pessoa veio ler (nome do aluno, valor do KPI) t2 = apoio legivel (email, celula secundaria, descricao) t3 = rotulo e metadado (cabecalho de coluna, unidade, timestamp) on-accent = o unico texto que vai sobre dourado ------------------------------------------------------------------- */ --qg-t1: #ECEFE3; --qg-t2: #A5AA98; --qg-t3: #767B6C; --qg-t-on-accent: #14110A; /* ------------------------------------------------------------------- 4. ACENTO — o dourado da marca, com escopo declarado. USE em: botao primario, item ativo da navegacao, anel de foco, a marca no topo. NAO USE em: numero de KPI, titulo de secao, borda de card, barra de progresso comum, texto corrido. ------------------------------------------------------------------- */ --qg-accent: #C9A96A; --qg-accent-hi: #DDC38A; /* hover */ --qg-accent-lo: #A88B4C; /* active */ --qg-accent-soft: rgba(201,169,106,.13); --qg-accent-line: rgba(201,169,106,.32); /* ------------------------------------------------------------------- 5. SEMANTICA — cor que INFORMA, e por isso nunca e' decorativa. Cada uma tem o par soft/line para fundo de selo e borda de aviso, porque foi a falta desse par que espalhou rgba(46,204,113,.13) cravado em doze lugares do CSS antigo. ------------------------------------------------------------------- */ --qg-ok: #63B36B; --qg-ok-soft: rgba(99,179,107,.13); --qg-ok-line: rgba(99,179,107,.34); --qg-warn: #D9A441; --qg-warn-soft: rgba(217,164,65,.13); --qg-warn-line: rgba(217,164,65,.34); --qg-danger: #E2705A; --qg-danger-soft: rgba(226,112,90,.13); --qg-danger-line: rgba(226,112,90,.36); --qg-info: #7E9BB0; --qg-info-soft: rgba(126,155,176,.13); --qg-info-line: rgba(126,155,176,.34); /* ------------------------------------------------------------------- 6. TIPOGRAFIA Barlow para interface. Barlow Condensed SO em marca, titulo de painel e numero grande de KPI — no CSS antigo ela estava em aba, botao, label, celula e secao ao mesmo tempo, e condensada em toda parte e' o que da a leitura de "template". A pilha de fallback existe porque a fonte vem do Google e o aluno do interior abre a pagina antes do webfont chegar. ------------------------------------------------------------------- */ --qg-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --qg-font-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif; --qg-fs-2xs: 10.5px; /* rotulo de KPI, selo */ --qg-fs-xs: 11.5px; /* metadado, timestamp */ --qg-fs-sm: 12.5px; /* celula secundaria */ --qg-fs-md: 13.5px; /* corpo padrao da tabela */ --qg-fs-lg: 15px; /* corpo de leitura */ --qg-fs-xl: 18px; /* titulo de painel */ --qg-fs-2xl: 22px; /* titulo de modal */ --qg-fs-kpi: 30px; /* valor de KPI */ --qg-lh-tight: 1.15; --qg-lh: 1.5; --qg-lh-loose: 1.65; --qg-track-label: .1em; /* letter-spacing de rotulo maiusculo */ /* ------------------------------------------------------------------- 7. ESPACO — escala de 4px. Um passo tem nome; 13px nao tem. ------------------------------------------------------------------- */ --qg-s1x: 4px; --qg-s2x: 8px; --qg-s3x: 12px; --qg-s4x: 16px; --qg-s5x: 20px; --qg-s6x: 24px; --qg-s8x: 32px; --qg-s10x: 40px; --qg-s12x: 48px; /* ------------------------------------------------------------------- 8. RAIO — o legado usava 20-22px em aba, chip e botao, o que transforma todo controle em capsula e e' o segundo maior sinal de "gerado no automatico". Capsula agora e' privilegio de selo e contador. Controle de verdade tem canto de 8px. ------------------------------------------------------------------- */ --qg-r-xs: 4px; --qg-r-sm: 6px; --qg-r-md: 8px; --qg-r-lg: 10px; --qg-r-xl: 14px; --qg-r-full: 999px; /* ------------------------------------------------------------------- 9. ELEVACAO — em tema escuro quem sustenta e' a borda, nao a sombra. Por isso as sombras aqui sao discretas e existem so para o que flutua de verdade (modal, dropdown, toast). ------------------------------------------------------------------- */ --qg-sh-sm: 0 1px 2px rgba(0,0,0,.30); --qg-sh-md: 0 4px 12px -2px rgba(0,0,0,.42); --qg-sh-lg: 0 18px 44px -12px rgba(0,0,0,.62); --qg-sh-focus: 0 0 0 3px rgba(201,169,106,.30); /* ------------------------------------------------------------------- 10. MOVIMENTO fast = mudanca de cor no hover (nao deve chamar atencao) base = mudanca de estado (aba, chip, selo) slow = entrada de camada (modal, drawer, toast) A curva desacelera no fim: o elemento chega, nao freia. ------------------------------------------------------------------- */ --qg-t-fast: 110ms; --qg-t: 170ms; --qg-t-slow: 260ms; --qg-ease: cubic-bezier(.2,.7,.3,1); --qg-ease-out: cubic-bezier(.16,1,.3,1); --qg-t-giro: 800ms; /* um giro do loader (linear so em giro) */ --qg-t-escalonado: 40ms; /* atraso entre camadas de uma mesma entrada */ /* ------------------------------------------------------------------- 11. LAYOUT DO SHELL ------------------------------------------------------------------- */ --qg-sidebar-w: 238px; --qg-topbar-h: 56px; --qg-content-max: 1520px; --qg-gutter: var(--qg-s6x); /* ------------------------------------------------------------------- 12. CAMADA — z-index com nome, para acabar com o z-index:99999 que aparece tres vezes neste projeto por nao haver escala. ------------------------------------------------------------------- */ --qg-z-base: 1; --qg-z-sticky: 30; --qg-z-sidebar: 50; --qg-z-overlay: 100; --qg-z-modal: 110; --qg-z-toast: 200; /* A ESCADA COM NOME (feature hub-mobile, 13/09/2026). O hub tinha z-index de 70 a 100000, e cada peca fixa ganhava um numero maior que a anterior. Sete degraus, do chao ao teto; quem precisa de um oitavo esta errado sobre onde mora. Os nomes velhos acima continuam como apelidos: sticky=30 fica entre conteudo e nav; sidebar=nav. */ --qg-z-conteudo: 1; /* a pagina */ --qg-z-decor: -1; /* emblema, gradiente: atras do texto do PROPRIO bloco (o bloco e o contexto: position:relative + z-index conteudo) */ --qg-z-nav: 50; /* barra inferior / rail */ --qg-z-float: 60; /* cronometro, botoes flutuantes */ --qg-z-popover: 100; /* menus, folhas, backdrop */ /* --qg-z-modal 110 e --qg-z-toast 200 ja existem acima */ /* ------------------------------------------------------------------- 14. LAYOUT MOBILE (feature hub-mobile). Media query nao le var(): os breakpoints ficam aqui como CONTRATO (JS le com matchMedia, CSS repete o numero e o teste confere os dois). xs 340 celular muito estreito: 1 coluna sm 480 celular: grades de 2 colunas, rodape em coluna md 768 tablet lg 900 o max-width:900px que o hub ja usa para o rail ------------------------------------------------------------------- */ --qg-bp-xs: 340px; --qg-bp-sm: 480px; --qg-bp-md: 768px; --qg-bp-lg: 900px; --qg-gutter-m: 16px; /* margem lateral no celular */ --qg-safe-t: env(safe-area-inset-top, 0px); --qg-safe-b: env(safe-area-inset-bottom, 0px); /* laterais: so valem em paisagem, sob o recorte da tela. Os quatro env() so devolvem algo quando a pagina declara viewport-fit=cover na meta viewport — sem isso o Safari do iOS 26 encerra a viewport de layout ACIMA da safe area inferior e a barra fixa "flutua" com o conteudo passando por baixo (medido no iPhone do dono, 13/09/2026). */ --qg-safe-l: env(safe-area-inset-left, 0px); --qg-safe-r: env(safe-area-inset-right, 0px); --qg-nav-h: 60px; /* barra inferior, sem a safe area */ --qg-rail-w: 186px; /* barra lateral do hub (#qg-rail) > lg */ --qg-timer-h: 32px; /* cronometro recolhido */ --qg-fab: 44px; /* botao flutuante = alvo de toque */ /* o chao das pecas flutuantes: acima da barra e da safe area */ --qg-chao: calc(var(--qg-nav-h) + var(--qg-safe-b)); /* acima do breakpoint lg nao ha barra inferior: o chao e so a safe area */ /* ------------------------------------------------------------------- 13. ICONE, BOTAO E DIALOGO (feature saida-e-icones, 12/09/2026) Tamanhos que os componentes React (public_html/qg/react/) e a pele de icones do hub compartilham. Um icone dentro de texto tem o tamanho da fonte (1em); o de destaque (media do dialogo) tem --qg-ic-lg. A largura do traco e a mesma do kit legado (1.7), e bate com o intervalo recomendado pelo Lucide (1.5-2). ------------------------------------------------------------------- */ --qg-ic: 20px; --qg-ic-sm: 16px; --qg-ic-lg: 28px; --qg-ic-nav: 22px; /* icone da barra inferior */ --qg-ic-stroke: 1.7; --qg-btn-h: 40px; /* alvo de toque confortavel (>= 40px) */ --qg-btn-h-sm: 32px; --qg-btn-px: var(--qg-s4x); --qg-dialog-w: 440px; /* largura maxima da folha do dialogo */ --qg-dialog-p: var(--qg-s6x); --qg-dialog-m: var(--qg-s4x); /* margem lateral no celular */ /* fundo da sobreposicao — a unica cor que o CSS de componente pode citar por nome proprio, porque nao e superficie nem texto. */ --qg-overlay: rgba(5,6,4,.66); } @media (min-width:901px){ :root{ --qg-chao: var(--qg-safe-b); } } /* ===================================================================== TEMA CLARO Redefine o CONJUNTO COMPLETO, nao um punhado. O dourado escurece para #8A6A2F porque #C9A96A sobre branco da 2.1:1 de contraste — reprova em qualquer criterio de legibilidade, e era o que acontecia no CSS antigo toda vez que alguem clicava no sol. ===================================================================== */ body.light{ --qg-bg-base: #F4F3EE; --qg-bg-sunken: #EBEAE3; --qg-s1: #FFFFFF; --qg-side-bg: #EBE9E1; --qg-s2: #F7F6F1; --qg-s3: #FFFFFF; --qg-hover: rgba(25,28,20,.038); --qg-active: rgba(25,28,20,.065); --qg-selected: rgba(138,106,47,.09); --qg-line: rgba(25,28,20,.11); --qg-line-strong: rgba(25,28,20,.20); --qg-line-focus: #8A6A2F; --qg-t1: #191C14; --qg-t2: #585D4E; --qg-t3: #7E8374; --qg-t-on-accent: #FFFDF6; --qg-accent: #8A6A2F; --qg-accent-hi: #A07E3D; --qg-accent-lo: #6E5321; --qg-accent-soft: rgba(138,106,47,.10); --qg-accent-line: rgba(138,106,47,.30); --qg-ok: #2F7D46; --qg-ok-soft: rgba(47,125,70,.11); --qg-ok-line: rgba(47,125,70,.30); --qg-warn: #835A0A; /* era #9A6B10: 4,1:1 sobre warn-soft, reprovava AA em botao (12/09) */ --qg-warn-soft: rgba(154,107,16,.11); --qg-warn-line: rgba(154,107,16,.30); --qg-danger: #B03A22; --qg-danger-soft: rgba(176,58,34,.10); --qg-danger-line: rgba(176,58,34,.30); --qg-info: #3C6480; --qg-info-soft: rgba(60,100,128,.10); --qg-info-line: rgba(60,100,128,.30); --qg-sh-sm: 0 1px 2px rgba(25,28,20,.07); --qg-sh-md: 0 4px 12px -2px rgba(25,28,20,.11); --qg-sh-lg: 0 18px 44px -12px rgba(25,28,20,.22); --qg-sh-focus: 0 0 0 3px rgba(138,106,47,.26); --qg-overlay: rgba(25,28,20,.50); }