/* ========================================================================== design-tokens.css — Fonte única de verdade para cores e tokens do portal. Importe este arquivo antes de qualquer outro CSS de página. TEMA ESCURO (padrão). O tema claro vive em tema.css, sob html[data-theme="light"], e TEM QUE SER ALTERADO NO MESMO DEPLOY que este. Paleta oficial do Manual de Marca GTABC.Inc (jul/2026): principais #EC6533 laranja · #000000 preto · #FFFFFF branco #575756 cinza · #E3CF79 dourado auxiliar #002373 azul marinho REGRAS QUE VÊM DA MEDIÇÃO (não mude sem refazer a conta): 1. Texto BRANCO sobre o laranja dá 3,24:1 e reprova o WCAG AA. Sobre o laranja use --brand-on (preto, 6,48:1). Por isso o botão primário tem texto preto. 2. O cinza #575756 sobre preto dá 2,90:1: NÃO serve como texto no tema escuro, só como borda/divisor/superfície. Como texto ele só aparece no tema claro. 3. O azul #002373 sobre preto dá 1,49:1 (invisível). No escuro use a versão clareada (--navy); o valor puro do manual (--navy-solid) é só para fundo claro. 4. O dourado #E3CF79 sobre branco dá 1,56:1 (invisível). No claro ele é preenchimento, nunca texto: para texto existe --gold-txt. 5. O manual não tem verde nem vermelho. --good e --bad são DERIVADOS, fora do manual, aprovados como extensão de produto. 6. Nenhum vermelho se separa o suficiente do laranja da marca (o melhor caso medido dá ΔE 14,8, abaixo do piso 15). Logo: valor negativo SEMPRE com sinal, seta ou rótulo. Nunca só a cor. ========================================================================== */ :root { /* ── Superfícies (pretos neutros, derivados do preto institucional) ── */ --bg-body: #000000; /* Fundo geral (todas as páginas) */ --bg-card: #121212; /* Cards, headers de tabela */ --bg-input: #0a0a0a; /* Inputs e textareas */ --bg-hover: #1f1f1e; /* Hover de linhas de tabela */ /* ── Bordas (0.10 sobre #121212 resolve em ~#2a2a2a) ── */ --border: rgba(255, 255, 255, 0.10); --border-md: rgba(255, 255, 255, 0.16); /* ── Tipografia: cor ── */ --text-primary: #ffffff; /* branco do manual · 18,7:1 no card */ --text-secondary: #c6c6c5; /* cinza da marca, claro · 11,0:1 no card */ --text-muted: #979796; /* rótulo, legenda · 6,4:1 no card */ /* ── Tipografia: família ────────────────────────────────────────────── Manual de Marca GTABC.Inc: Axiforma principal, Roboto auxiliar. Auto-hospedadas em /fonts (ver fonts.css); o CSP do portal é font-src 'self'. A DIVISÃO É MEDIDA, não estética: - Axiforma é 22,9% mais larga que a Inter que saiu daqui. No corpo, 19 dos 63 rótulos do menu passariam a cortar. Por isso ela leva TÍTULO, onde sobra espaço. - Os dígitos da Axiforma são PROPORCIONAIS: numa coluna de valores não alinham. Onde ela mostrar número, `font-variant-numeric: tabular-nums` é OBRIGATÓRIO. - A Roboto é +10,4% e já tem dígito tabular nativo. Leva corpo, tabela e número, que é o grosso de um portal de dados. */ --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Axiforma', 'Roboto', system-ui, sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; /* ── Marca ── */ --brand: #ec6533; /* laranja do manual */ --brand-on: #000000; /* TEXTO sobre o laranja (ver regra 1) */ --brand-txt: #ec6533; /* marca como texto (no escuro, o próprio) */ --brand-2: #e3cf79; /* dourado do manual */ --brand-soft: rgba(236, 101, 51, 0.12); /* tint de fundo da marca */ --brand-dim: rgba(236, 101, 51, 0.10); /* ── Cores do manual com papel próprio ── */ --gold: #e3cf79; /* dourado, preenchimento e acento */ --gold-txt: #e3cf79; /* dourado como texto (no escuro, o próprio) */ --navy: #6b8fd0; /* azul do manual CLAREADO, para fundo escuro */ --navy-solid: #002373; /* azul do manual puro, só sobre fundo claro */ --gray-brand: #575756; /* cinza do manual: borda/divisor, nunca texto aqui */ /* ── Semânticas (reservadas: nunca reutilizar como série de gráfico) ── */ --good: #3fa960; /* derivado, fora do manual */ --warn: #e3cf79; /* dourado do manual */ --bad: #e5484d; /* derivado, fora do manual · sempre com sinal */ --danger: #e5484d; --info: #6b8fd0; /* azul do manual clareado */ /* ── Séries de gráfico ──────────────────────────────────────────────── Ordem FIXA, atribuída em sequência, nunca ciclada. Esta ordem é a única que passa nas seis checagens (banda de luminosidade, piso de croma, separação para daltonismo, piso de visão normal, contraste) NOS DOIS TEMAS, para a cor de uma série não mudar quando o usuário troca de tema. Teto de 3 séries em dispersão/bolha/pequenos múltiplos. O dourado ficou fora de propósito: no valor do manual sai da banda de luminosidade e, forçado para dentro dela, vira oliva e perde a identidade. */ --chart-1: #ec6533; /* laranja */ --chart-2: #009a98; /* teal */ --chart-3: #956ed2; /* roxo */ --chart-4: #369e4e; /* verde */ --chart-5: #6b8fd0; /* azul */ --chart-6: #c95a8b; /* rosa */ --chart-7: #0093c2; /* ciano */ --chart-8: #d05a69; /* vinho */ /* ── Layout ── */ --maxw: 1200px; --radius: 12px; --radius-lg: 16px; /* ── Escala (30/09/2026 · skill design-portal) ──────────────────────── Antes daqui o portal tinha 220 font-sizes, 616 paddings e 57 raios distintos (docs/DESIGN_DIAGNOSTICO.md §4). Estes degraus são a régua para código NOVO e para as telas que forem migradas; nada existente muda de valor. - Em PX de propósito: seis páginas reduzem o para 14–15px (home, estoque, inadimplência, poc3…) e uma escala em rem encolheria nelas. - Nomes conferidos sem colisão no repositório inteiro (existem --radius-sm/md/xl LOCAIS em algumas páginas: por isso o raio aqui é --r-*). - Não dependem do tema, então NÃO têm par no tema.css — exceto as sombras. */ /* Tipo: 7 degraus. PISO de 12px para qualquer texto visível. */ --fs-xs: 12px; /* rótulo em caixa-alta, legenda, pílula */ --fs-sm: 13px; /* texto de apoio, tabela densa */ --fs-md: 14px; /* corpo, célula de tabela, botão, campo */ --fs-lg: 16px; /* título de card/seção */ --fs-xl: 20px; /* valor de KPI compacto, subtítulo grande */ --fs-2xl: 24px; /* título da página, valor de KPI */ --fs-3xl: 32px; /* número-herói: no máximo um por tela */ --lh-tight: 1.2; /* títulos e números */ --lh-base: 1.5; /* texto corrido */ /* Pesos que EXISTEM nas fontes auto-hospedadas (fonts.css): Roboto 400/500/600/ 700/900 e Axiforma 400/600/700/900. 800 NÃO existe: o navegador sobe para 900. */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Espaço: base 4px. Padding/gap/margem saem daqui. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* Raio: controle 8, card 12, painel 16 (os dois últimos = --radius/--radius-lg). */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* Elevação: no escuro o card se separa pela BORDA, não pela sombra. Sombra só para o que flutua sobre a página (menu suspenso, popover, modal). */ --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.60); /* Controles: altura de botão/campo no desktop (no celular vale --tap-min: 44px). */ --ctl-h: 36px; /* ── Barra de rolagem (06–07/10/2026) ───────────────────────────────── Cinza NEUTRO opaco: o MESMO valor serve aos dois temas e passa nos 3:1 do WCAG 1.4.11 (componente de tela: quando o portal pinta a barra, deixa de valer a isenção de "aparência do navegador"). Medido sobre as superfícies: escuro 3,74–4,76:1, claro 3,73–4,42:1. #787878 é o cinza que dá o MELHOR pior caso nos dois temas (o pior é o --bg-hover de cada um). Escolha do dono em 07/10/2026, vendo as duas na tela real, contra a versão translúcida rgba(128,128,128,.5): mais discreta, mas só 1,7–2,1:1. NÃO tem par no tema.css, e é de propósito: o tema.css vem do de cada página com ?v= próprio e fica até 30 dias no cache do navegador, enquanto esta folha chega nova pelo menu_topbar.php; um valor só do claro lá chegaria atrasado e, até chegar, o claro usaria o do escuro. */ --scroll-thumb: #787878; } /* Foco de teclado visível global (WCAG 2.4.7 / 2.4.11). :focus-visible só dispara no teclado — não afeta clique de mouse. :where() tem especificidade 0, então é um FALLBACK: qualquer estilo de foco próprio da página prevalece; isto só cobre os elementos que hoje não têm foco algum. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Barra de rolagem padrão do portal (06/10/2026). Antes cada tela desenhava a sua: ~15 regras, de 4 a 10px, várias com cor só do escuro (rgba(255,255,255,.1) some no claro). Esta folha chega a toda página que tem menu, pelo menu_topbar.php. - scrollbar-color é HERDADO: posto no html, vale para toda caixa com rolagem. A tela que declarar a própria (ex.: .tower-body do telão) continua mandando. - scrollbar-width NÃO é herdado, por isso vai em todo elemento. - :where() tem especificidade 0, como o foco acima: é FALLBACK. Qualquer regra da página prevalece, mesmo esta folha chegando depois dela (o menu entra no , depois do da página). - Medido no Chrome 152 (06/10/2026): com scrollbar-color/-width definidos, o Chrome IGNORA as regras ::-webkit-scrollbar. As barras desenhadas à mão viram esta sem mexer nas telas, mas esconder a barra só com ::-webkit-scrollbar { display: none } deixa de funcionar (a barra volta). Para esconder, use scrollbar-width: none, com o -webkit- junto para o Safari. Fina = 10px no Chrome do Windows; a barra padrão tinha 15px. - Sem reserva por ::-webkit-scrollbar, de propósito: ela só valeria em navegador sem scrollbar-color (Safari mais antigo, Chrome anterior ao 121) e, no Mac, trocaria a barra que some sozinha por uma barra fixa de 10px em toda caixa que rola. Nesses navegadores fica a barra do sistema. */ :where(html) { scrollbar-color: var(--scroll-thumb) transparent; } :where(*) { scrollbar-width: thin; }