/* ===================================================================== OLT Observer — tokens de design ===================================================================== TRES CAMADAS, e a separacao entre elas e a decisao mais importante deste arquivo: 1. ESCALA espaco, tipo, raio, sombra. Nao varia por marca nem por tema. E a gramatica do layout. 2. MARCA o "cromado" da aplicacao: cabecalho, logo, acao primaria, foco. VARIA por empresa (Telgo / Wixx). 3. SEMANTICO estado da REDE: critico, alerta, ok, energia, massa. **NAO VARIA POR EMPRESA. NUNCA.** Por que o semantico nao varia — e por que isso nao viola manual nenhum: Cor de estado aqui nao e enfeite de marca, e instrumento de leitura, como o vermelho de um semaforo nao pertence a prefeitura da cidade. Um analista que atende Telgo e Wixx no mesmo turno precisa ler vermelho como "fibra rompida, despacha tecnico" nos dois lugares. Trocar essa cor por marca seria risco operacional, nao coerencia visual. O manual da Wixx diz que a MARCA nao tem cor de acento — e este arquivo respeita isso ao pe da letra: no tema Wixx o cromado e inteiramente monocromatico. A cor aparece so onde carrega significado. O efeito colateral e bonito: com o cromado neutro, o sinal de estado fica ainda mais legivel na Wixx do que na Telgo. REGRA DE OURO DE ACESSIBILIDADE: cor nunca sozinha. Todo estado carrega cor + icone + texto. ~8% dos homens tem alguma deficiencia de visao de cor; um NOC inteiro nao pode depender de distinguir vermelho de verde. ===================================================================== */ :root { /* ---------- 1. ESCALA: espacamento (grade de 8pt, meio-passo 4px) */ --e-0: 0; --e-1: 0.25rem; /* 4px */ --e-2: 0.5rem; /* 8px */ --e-3: 0.75rem; /* 12px */ --e-4: 1rem; /* 16px */ --e-5: 1.5rem; /* 24px */ --e-6: 2rem; /* 32px */ --e-7: 3rem; /* 48px */ --e-8: 4rem; /* 64px */ /* ---------- 1. ESCALA: tipografia Escala modular 1.200 (terca menor) — suave o bastante para ferramenta densa, onde muitos degraus grandes desperdicam tela. */ --t-xs: 0.75rem; /* 12px — legenda, rodape de celula */ --t-sm: 0.8125rem; /* 13px — corpo denso de tabela */ --t-md: 0.875rem; /* 14px — corpo padrao da interface */ --t-lg: 1rem; /* 16px — corpo de leitura, input */ --t-xl: 1.25rem; /* 20px — titulo de secao */ --t-2xl: 1.5rem; /* 24px — titulo de pagina */ --t-3xl: 2rem; /* 32px — numero grande de KPI */ --t-4xl: 2.5rem; /* 40px — KPI de destaque */ --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --linha-apertada: 1.25; --linha-normal: 1.5; /* Medida de linha: texto corrido nunca passa de ~75 caracteres. Acima disso o olho perde a linha ao voltar. */ --medida: 68ch; /* ---------- 1. ESCALA: raio, borda, sombra */ --raio-sm: 4px; --raio-md: 6px; --raio-lg: 6px; --raio-cheio: 999px; --borda: 1px; /* ---------- 1. ESCALA: alvos de toque 44px e o minimo da Apple HIG; 48px o do Material. Adotamos 44 no desktop denso e 48 no mobile, onde o dedo e o ponteiro. */ --alvo-min: 44px; --alvo-toque: 48px; --altura-linha-tabela: 40px; /* denso, mas ainda clicavel */ /* ---------- 1. ESCALA: camadas */ --z-base: 0; --z-cabecalho: 100; --z-menu: 200; --z-modal: 300; --z-aviso: 400; --transicao: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* ===================================================================== 3. SEMANTICO — ESTADO DA REDE (identico nas duas empresas) Mapeia 1:1 as causas que o motor de correlacao ja produz, para que tela, alarme e relatorio falem a mesma lingua: fiber_cut -> critico despacha tecnico power_loss -> energia NAO despacha (cliente sem luz) reboot -> alerta observar reincidencia mass_event -> massa infraestrutura, apurar antes ok -> ok online Valores escolhidos da escala Radix, que e construida para manter contraste AA nos dois temas — nao sao "vermelho bonito", sao vermelho que passa em teste de contraste no claro E no escuro. ===================================================================== */ --estado-critico: #E5484D; --estado-critico-fraco: #FEEBEC; --estado-critico-forte: #C62A2F; --estado-alerta: #FFB224; --estado-alerta-fraco: #FFF4D5; --estado-alerta-forte: #AB6400; --estado-ok: #30A46C; --estado-ok-fraco: #E6F6EC; --estado-ok-forte: #218358; --estado-energia: #0091FF; /* power_loss — informativo, nao urgente */ --estado-energia-fraco: #E1F0FF; --estado-energia-forte: #006ADC; --estado-massa: #8E4EC6; /* mass_event — infraestrutura */ --estado-massa-fraco: #F3E7FC; --estado-massa-forte: #6E3B9E; --estado-neutro: #8B8D98; /* desconhecido / sem dado */ --estado-neutro-fraco: #F1F1F3; /* Sinal optico — semaforo de potencia. Mesma logica: escala unica, independente de marca. Faixas em dBm ficam no back-end (podem variar por classe de ONU); aqui so a cor de cada faixa. */ /* Traco de duracao do historico de quedas (`.fora__traco`). Marca GRAFICA de 4px, nao texto: o piso e 3:1 contra o fundo (WCAG 1.4.11), e a cor plena de alerta nao alcanca isso no claro — medido em 1,8:1 sobre a superficie do cartao. Por isso o claro usa a variante `-forte` e o escuro a plena; token proprio para a escolha ficar num lugar so, e nao espalhada em `.fora--*`. */ /* A piscada usa TINTA, nao cor de estado, e isso e semantico: uma queda de 4 segundos nao e um estado que mereca cor propria, e o ruido de fundo de 70% do parque. (No claro a --estado-neutro tambem nao alcancava: 2,91:1 sobre o papel da Wixx.) */ --traco-piscada: var(--tinta-3); --traco-sentida: var(--estado-alerta-forte); --traco-longa: var(--estado-critico-forte); --sinal-bom: var(--estado-ok); --sinal-atencao: var(--estado-alerta); --sinal-ruim: var(--estado-critico); --sinal-sem-dado: var(--estado-neutro); /* A COR DE ESTADO QUANDO E TEXTO MIUDO (--t-xs, peso normal). Medido no navegador em 07/10/2026, tema claro, sobre --sup-base: --estado-critico #E5484D .... 3,3:1 REPROVA (precisa 4,5) --estado-ok #30A46C .... 3,0:1 REPROVA --estado-alerta #FFB224 .... 1,8:1 REPROVA A cor plena foi calibrada para NUMERO (peso 600, --t-md), que conta como texto grande e se contenta com 3:1. Nota de uma linha abaixo de um nome, nao: e a mesma armadilha do traco de duracao, documentada logo acima. Mesma saida tambem — no claro desce um degrau, no escuro usa a plena, que la ja foi recalibrada como texto (ver o bloco do tema escuro). Token proprio para a escolha ficar num lugar so. A `-forte` sozinha NAO bastou, e quem reprovou foi a Wixx: o cartao dela no claro e papel quente (#F3F0ED), nao o branco puro da Telgo, e tira ~0,7 de razao. Medido nas quatro combinacoes: telgo cartao/chao wixx cartao/chao critico #C62A2F 5,57 / 4,73 4,90 / 5,25 alerta #9A5A00 5,47 / 4,66 4,82 / 5,17 ok #1B6E4A 6,22 / 5,29 5,48 / 5,87 Critico e a propria `-forte`. Alerta e ok sao um degrau abaixo da delas (#AB6400 dava 4,06 e #218358 dava 4,15 no cartao da Wixx), escolhido medindo contra a PIOR superficie do produto — nao contra o branco, que e a mais generosa das quatro. */ --estado-critico-texto: var(--estado-critico-forte); --estado-alerta-texto: #9A5A00; --estado-ok-texto: #1B6E4A; /* Series de grafico (16/09/2026). Cor de IDENTIDADE, nao de estado: estado e dos limiares. Fixa entre marcas (a Wixx nao tem azul na marca e o grafico continua legivel) e validada pra daltonismo nos dois temas com o validador da skill de dataviz — no escuro #2E9BD3/#D8559E passam com folga (dE 9,4); no claro #1E8FB0/#B8398A ficam na faixa em que o tracejado da subida e a codificacao secundaria exigida. Valores do tema claro aqui; o escuro redefine no bloco de tema. */ --grafico-descida: #1E8FB0; --grafico-subida: #B8398A; } /* ===================================================================== 2. MARCA — Telgo Fonte da verdade: skill telgo-identidade-visual (manual BR/BAUEN 2014) Amarelo #FFD600 · Azul claro #6EC4E8 · Azul escuro #333D47 ATENCAO DE CONTRASTE: o amarelo Telgo tem razao ~1.3:1 sobre branco. Ele NUNCA pode ser cor de texto nem de icone sobre fundo claro. Aqui ele vive como preenchimento (com texto escuro por cima) e como faixa de destaque — que e exatamente o papel dele no manual. ===================================================================== */ [data-marca="telgo"] { --marca-primaria: #6EC4E8; --marca-primaria-forte: #3BA9D6; --marca-primaria-fraca: #E8F6FC; --marca-acento: #FFD600; --marca-acento-texto: #333D47; /* texto que vai POR CIMA do amarelo */ --marca-tinta: #333D47; /* azul escuro institucional */ /* Texto sobre fundo --marca-tinta (nav do tema claro, ver base.css) — mesmos tons do --tinta/--tinta-2 do tema ESCURO: a barra vira uma "ilha escura" dentro do claro, entao usa o vocabulario de texto que ja existe pra fundo escuro. 9.1:1 e 4.9:1, formula WCAG. */ --marca-tinta-texto: #E6E9EE; --marca-tinta-texto-fraco: #A6ADBA; /* RUBIK NO CORPO TAMBEM — decisao do Jaime em 2026-08-06, depois de medir. O manual (2014, impresso) pede Calibri no corpo, mas Calibri e fonte proprietaria da Microsoft: nao pode ser distribuida pela aplicacao, e nao existe em Mac sem Office, Android, iOS ou Linux. O que acontecia na pratica: cada maquina sorteava a sua. No Mac do Jaime saia San Francisco — medida: "Calibri" rendia exatamente a largura do fallback (240.8px), prova de que nao estava instalada. Pior, Rubik (218.4) e SF (219.3) tem metrica quase igual e desenho diferente: o olho le como ERRO, nao como escolha. Era a origem do "despadronizado". Rubik resolve os dois lados: e a fonte oficial da marca, esta no repositorio sob OFL, e carrega do servidor — entao e IDENTICA em toda maquina. A variavel de peso 300-900 cobre corpo e titulo. */ --fonte-titulo: "Rubik", system-ui, sans-serif; --fonte-corpo: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; } /* ===================================================================== 2. MARCA — Wixx Fonte da verdade: skill wixx-identidade-visual (brand sheet 2019) Monocromatica: preto #000 · cinza #9E968D · 80% #B1AAA2 · 60% #D7D3CF "Nao existe cor de acento na marca." Respeitado: o cromado da Wixx e inteiramente monocromatico. Onde a Telgo usa azul/amarelo, a Wixx usa grafite e cinza institucional. A UNICA cor da interface Wixx e a semantica de estado — e e proposital. ===================================================================== */ [data-marca="wixx"] { --marca-primaria: #9E968D; --marca-primaria-forte: #7D766E; --marca-primaria-fraca: #EAE6E2; /* = --sup-2 do tema claro, ver abaixo */ --marca-acento: #9E968D; --marca-acento-texto: #FFFFFF; --marca-tinta: #000000; /* Texto sobre fundo --marca-tinta (nav do tema claro) — 21:1 e 9.1:1, formula WCAG. Ver mesma nota na Telgo, acima. */ --marca-tinta-texto: #FFFFFF; --marca-tinta-texto-fraco: #B1AAA2; --fonte-titulo: "WIXX Display", system-ui, sans-serif; --fonte-corpo: "WIXX Text", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; } /* ===================================================================== SUPERFICIES — variam por MARCA e por TEMA Padrao escuro por decisao de uso, nao de moda: NOC opera turno inteiro, muitas vezes com luz baixa e telao. Fundo claro em sala escura cansa e ofusca. O fundo nunca e preto puro (#000) NEM branco puro (#FFF): os dois extremos, contra o texto quase-oposto que cada tema usa, causam halacao (o texto "vibra") — o mesmo fenomeno, so que nas duas pontas da escala. Ate 2026-08-06 so o lado escuro respeitava isso; o Jaime relatou o tema claro como "muito claro, dificil de trabalhar", e a causa era exatamente esta: --sup-base era #FFFFFF puro. TEMPERATURA POR MARCA — o refinamento que faz a interface parecer *daquela empresa*, e nao "um sistema com o logo trocado": Telgo #333D47 frio (B>G>R) -> grafite azulado Wixx #9E968D quente (R>G>B) -> grafite ataupado O desvio e sutil de proposito. Ele nao encosta em NENHUM token semantico: alarme se le igual nas duas marcas. Contraste medido (formula WCAG, nao estimado) — todas as combinacoes passam AA (4.5:1 para texto): tinta ~14.7:1 tinta-2 ~7.8:1 tinta-3 ~5.3:1 ===================================================================== */ /* ---- Telgo: grafite frio ---- */ [data-marca="telgo"] { /* Mesma correcao do tema claro: 1A1E25 sobre 14171C era ~3%. */ --sup-base: #101318; --sup-1: #1E242B; /* cartao mais claro que o chao, nao quase igual */ --sup-2: #262D36; --sup-3: #2F3742; --linha: #363E4A; --linha-forte: #4A5462; --tinta: #E6E9EE; /* 14.8:1 */ --tinta-2: #A6ADBA; /* 8.0:1 */ --tinta-3: #8891A0; /* 5.6:1 */ --tinta-invertida: #14171C; --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4); --sombra-2: 0 4px 12px rgb(0 0 0 / 0.5); } [data-marca="telgo"][data-theme="light"] { /* O CARTAO PRECISA EXISTIR SOZINHO. Estava #EEF1F5 sobre #F5F7FA — 2,5% de diferenca. O olho nao le isso como objeto pousado na pagina, le como mancha; foi o que o Jaime chamou de "transparencia demais" (14/08/2026), sem haver um `rgba` sequer no CSS. E os dois problemas se causavam: como o cartao quase nao existia, a UNICA coisa que o delimitava era a faixa ciano do cabecalho — e a faixa precisava gritar para o cartao aparecer. Com o cartao solido, o cabecalho pode calar. */ --sup-base: #E9EDF2; /* o chao recua */ --sup-1: #FFFFFF; /* o cartao avanca — 2,5% vira ~8% */ --sup-2: #F1F4F8; --sup-3: #E3E9F0; --linha: #C9D2DD; --linha-forte: #A7B2C0; --tinta: #14171C; /* 16.7:1 sobre o novo sup-base */ --tinta-2: #48505C; /* 7.6:1 */ --tinta-3: #646D7B; /* 4.9:1 */ --tinta-invertida: #FFFFFF; --sombra-1: 0 1px 2px rgb(16 24 40 / 0.06); --sombra-2: 0 4px 12px rgb(16 24 40 / 0.10); } /* ---- Wixx: grafite quente. O --tinta-2 do escuro e literalmente o cinza 80% do manual (#B1AAA2) — a marca aparece ate no texto secundario, sem precisar de acento. ---- */ [data-marca="wixx"] { --sup-base: #1A1816; --sup-1: #211E1B; --sup-2: #292521; --sup-3: #332E29; --linha: #3B352F; --linha-forte: #4E4740; --tinta: #EDE9E5; /* 14.7:1 */ --tinta-2: #B1AAA2; /* 7.7:1 — cinza 80% do manual Wixx */ --tinta-3: #948C83; /* 5.3:1 */ --tinta-invertida: #1A1816; --sombra-1: 0 1px 2px rgb(0 0 0 / 0.45); --sombra-2: 0 4px 12px rgb(0 0 0 / 0.55); } [data-marca="wixx"][data-theme="light"] { --sup-base: #FAF8F6; /* era #FFFFFF — mesma correcao da Telgo, ver nota acima */ --sup-1: #F3F0ED; --sup-2: #EAE6E2; --sup-3: #DFD9D3; --linha: #D0C9C2; --linha-forte: #B0A89E; --tinta: #1A1816; /* 16.7:1 sobre o novo sup-base */ --tinta-2: #57514B; /* 7.4:1 */ --tinta-3: #6E675F; /* 5.3:1 */ --tinta-invertida: #FFFFFF; --sombra-1: 0 1px 2px rgb(26 24 22 / 0.06); --sombra-2: 0 4px 12px rgb(26 24 22 / 0.10); } /* ===================================================================== Ajuste do SEMANTICO no tema escuro. Correcao de rigor: as cores base foram medidas sobre as superficies escuras reais e duas REPROVARAM como texto — critico #E5484D -> 4.3:1 (precisa 4.5) massa #8E4EC6 -> 3.2:1 As variantes abaixo passam nas DUAS marcas (>=4.9:1). Alerta, ok e energia ja passavam e ficam como estao. O fundo pastel tambem muda: no escuro ele ficaria berrante, entao vira versao translucida da propria cor sobre a superficie. ===================================================================== */ [data-theme="dark"], [data-marca="telgo"]:not([data-theme="light"]), [data-marca="wixx"]:not([data-theme="light"]) { --grafico-descida: #2E9BD3; --grafico-subida: #D8559E; --estado-critico: #F2555A; /* 5.0:1 telgo · 4.9:1 wixx */ --estado-massa: #A87FE8; /* 5.5:1 telgo · 5.4:1 wixx */ --estado-critico-fraco: rgb(242 85 90 / 0.15); --estado-alerta-fraco: rgb(255 178 36 / 0.15); --estado-ok-fraco: rgb(48 164 108 / 0.15); --estado-energia-fraco: rgb(0 145 255 / 0.15); --estado-massa-fraco: rgb(168 127 232 / 0.15); --estado-neutro-fraco: rgb(139 141 152 / 0.15); /* No escuro a cor PLENA e que alcanca o piso de 3:1 — a `-forte`, calibrada para fundo claro, sumiria. Medido: 8,7:1 e 4,6:1. */ --traco-sentida: var(--estado-alerta); --traco-longa: var(--estado-critico); /* Mesma inversao para o texto miudo: aqui a plena JA e a versao de texto (as duas linhas corrigidas acima), e a `-forte` — escura por construcao — desapareceria no fundo escuro. */ --estado-critico-texto: var(--estado-critico); --estado-alerta-texto: var(--estado-alerta); --estado-ok-texto: var(--estado-ok); } /* Respeita quem pediu menos animacao no sistema operacional. */ @media (prefers-reduced-motion: reduce) { :root { --transicao: 0ms; } } /* ===================================================================== CAMADA DE PAPEL — a marca ganha FUNCAO, nao enfeite ===================================================================== O manual da Telgo da tres cores. Numa peca grafica elas se distribuem pelo gosto do designer; numa ferramenta de operacao, cada uma precisa de um trabalho, senao a tela vira decoracao colorida e o operador para de confiar na cor. acento (amarelo) o que EXIGE atencao agora. So isto. marca (azul claro) o que e interativo e o titulo de secao tinta (azul escuro) superficie e texto O amarelo e o mais dificil: se aparecer em tudo, deixa de significar qualquer coisa. Fica reservado ao que muda a acao do operador. NAO HA REDEFINICAO DE TOKEN AQUI, E ISSO E DELIBERADO. Uma versao anterior deste bloco redeclarava a escala tipografica com outros valores. Como vinha depois, no mesmo arquivo e com a mesma especificidade, ela VENCIA — e toda regra escrita contra a escala original passou a renderizar um degrau acima. O campo de formulario, desenhado para 16px (limite abaixo do qual o iOS da zoom ao focar), saia com 20px. Foi o que o usuario percebeu como "fontes desproporcionais", e a causa nao estava em tela nenhuma: estava aqui. ===================================================================== */