/* ============================================================ Paleta — Mobidash, plataforma multi-domínio ============================================================ Base grafite neutra, sem viés de cor. O acento padrão (azul-aço) vale para login, hub e qualquer superfície que não pertença a um domínio específico. Cada domínio tem seu próprio acento, o que dá orientação visual — você sabe onde está pela cor — sem que nenhum deles seja "dono" do tema da plataforma. Para trocar de domínio, basta pôr data-dominio="financeiro" (ou rh, ecommerce, logistica) no : as regras no fim deste arquivo redefinem --accent e derivados, e o resto da interface acompanha sozinho. */ :root { /* Superfícies — grafite neutro. A hierarquia é invertida em relação ao dark theme comum: a tela de trabalho (--bg-canvas) é MAIS CLARA que os cartões e que a moldura. Quem recorta a página são os blocos escuros, e não o contrário — é o que faz o dado saltar em vez de o fundo. O login e a sidebar continuam no tom profundo, então a leitura é: moldura escura, tela clara, cartões escuros. Os fundos são NEUTROS, não quentes. O guia de cores do e-commerce traz fundos âmbar (#0E0D0A, #1E1B15) porque descreve um relatório de tema único; aqui a mesma casca serve a quatro domínios e convive com um login de preto frio. Fundo quente brigava com o login e brigaria de novo na Logística (azul) e no People Analytics (roxo). O guia continua valendo onde importa: laranja, rampa e semântica — a camada de acento. */ --bg-primary: #0a0a0b; /* body, login, sidebar, cabeçalho */ --bg-canvas: #19191c; /* tela de trabalho, atrás dos cartões */ --bg-secondary: #0f0f11; /* cartões e painéis */ --bg-tertiary: #1e1e22; /* "track / vazio": campos e chips */ --bg-elevated: #27272c; /* popovers e selos, acima de tudo */ --bg-hover: #2f2f35; /* Bordas */ --border-color: #26262a; --border-color-light: #38383f; /* Texto neutro, alinhado ao login */ --text-primary: #f0f1f3; --text-secondary: #9a9aa4; --text-muted: #66666e; /* Acento padrão — branco. A interface é majoritariamente neutra: botão, foco de campo e estados ativos usam esta cor. */ --accent: #eef1f6; --accent-hover: #ffffff; --accent-soft: rgba(238, 241, 246, 0.12); --accent-glow: rgba(238, 241, 246, 0.16); /* Texto sobre o acento. Branco pede texto escuro; nos acentos escuros de domínio esta variável é sobrescrita mais abaixo. */ --on-accent: #0e1116; /* O acento quando ele vira TEXTO — mesma separação de `--success-tinta` e companhia, e pelo mesmo motivo. O `--accent` é a cor da barra, da linha e do ponto, e não pode mudar; mas ele também escreve a participação ao lado do ranking, o percentual da rosca e a nota do medidor, e aí o âmbar do E-commerce sobre branco dá 1,8:1. ATENÇÃO ao repetir isto: `--accent-tinta: var(--accent)` é RESOLVIDO no elemento onde é declarado, não onde é usado. Declarado só aqui, ele congelaria o branco do :root e desceria branco para os quatro domínios — medido, o apoio do ranking passou de âmbar a branco no tema escuro. Por isso a linha se repete dentro de cada bloco [data-dominio] abaixo, onde `--accent` já é a cor da área. */ --accent-tinta: var(--accent); /* Verde Mobidash — reservado para detalhes de marca (eyebrow, ícones), não para a interface funcional. É o que dá identidade sem dominar a tela. */ --brand: #cbf41c; --brand-soft: rgba(203, 244, 28, 0.13); /* Texto SOBRE o verde. Existia só como fallback escrito na mão em três lugares (`var(--on-brand, #14170a)`) e por isso nunca mudava — o que era inofensivo enquanto o verde era um só. Com o tema claro o verde escurece, e o fallback pintaria texto escuro sobre fundo escuro. */ --on-brand: #14170a; /* Acentos por domínio */ --dominio-logistica: #4c7df0; --dominio-financeiro: #14b8a6; /* Dourado, e não o roxo que era: é a cor com que o relatório de RH de origem desenha todos os visuais, e a tela precisa ser reconhecível ao lado dele. */ --dominio-rh: #e3c93f; --dominio-ecommerce: #ef9f27; /* Laranja 700 "destaque" do guia */ /* Escala do laranja do guia, para quem precisa de mais de um tom da própria cor (fundo de selo, hover, estado pressionado). */ --laranja-100: #3a2e14; --laranja-300: #6b4a1f; --laranja-500: #ba7517; --laranja-700: #ef9f27; --laranja-900: #ffc163; /* Rampa sequencial — SÓ para ranking com várias categorias. Em gráfico de série única a regra do guia é um laranja só; usar a rampa lá sugeriria uma ordem de grandeza que não existe. */ --rampa-1: #ef9f27; --rampa-2: #d4a257; --rampa-3: #b8895a; --rampa-4: #8c6e4e; --rampa-5: #6b5847; --rampa-6: #4a3d33; /* Segunda série em comparação A vs. B — azul neutro. Precisa ser cromaticamente distante do laranja sem virar um segundo destaque: é a referência contra a qual a série principal é lida. */ --serie-b: #7ba7c9; /* Semântica — verde e vermelho são EXCLUSIVOS de positivo/negativo. Nunca entram como cor de série: se um gráfico usar verde para "categoria X", o leitor lê "bom" onde só havia um rótulo. */ --success: #7bae3f; --success-soft: rgba(123, 174, 63, 0.15); --warning: #ef9f27; --warning-soft: rgba(239, 159, 39, 0.15); --danger: #e27070; --danger-soft: rgba(226, 112, 112, 0.15); /* Par INVERTIDO do vermelho: fundo claro com texto escuro, para quando o valor negativo vira uma pastilha sobre o desenho em vez de texto solto. O --danger/--danger-soft não serve aí — os dois são feitos para texto claro sobre fundo escuro, e numa pastilha a relação se inverte. */ --danger-light: #f3cdcd; --on-danger-light: #7d1f1f; /* Vermelho de ALERTA, à parte do --danger. O danger é um rótulo de leitura (variação que caiu, categoria abaixo da média) e por isso é dessaturado — dezenas deles convivem numa tela sem gritar. O alerta é o oposto: existe um por vez e precisa ser achado de relance, então é mais saturado. Trocar o --danger para cá pintaria todos os KPIs negativos junto. */ /* Os dois extremos da respiração. A distância entre eles é o efeito: quanto maior, mais o sino "puxa o ar". O topo é o vermelho mais vivo que o tema comporta; o piso é escuro o bastante para parecer apagado, mas ainda vermelho — no cinza a respiração viraria intermitência. */ --alerta: #ff4242; --alerta-fraco: #7d3437; --alerta-fundo: rgba(255, 66, 66, 0.13); --alerta-borda: rgba(255, 66, 66, 0.5); --alerta-borda-fraca: rgba(255, 66, 66, 0.1); --alerta-brilho: rgba(255, 66, 66, 0.45); --info: #7ba7c9; --info-soft: rgba(123, 167, 201, 0.15); /* ---------- Tinta: a mesma semântica, quando ela vira TEXTO ---------- Os cinco tokens acima têm dois empregos que parecem um só: pintar um arco de rosca / um ponto de dispersão, e escrever "+8,1%" ao lado de um KPI. No tema escuro dá no mesmo — os cinco foram escolhidos claros justamente para servir de texto sobre grafite. No claro, não. #7bae3f sobre branco dá 2,7:1 e #ef9f27 dá 2,2:1: são números abaixo do mínimo de legibilidade, e a variação de um indicador é exatamente o texto pequeno e em negrito que menos perdoa isso. Escurecê-los na raiz resolveria a leitura e estragaria o gráfico — a rosca de nível de serviço e os pontos de dispersão usam os MESMOS tokens. Daí o par: `--x` continua sendo a cor da série, `--x-tinta` é a cor da letra. Aqui os dois são idênticos, então o tema escuro não muda em nada; quem os separa de verdade é o bloco do tema claro. */ --success-tinta: var(--success); --danger-tinta: var(--danger); --warning-tinta: var(--warning); --info-tinta: var(--info); --fogo-tinta: var(--fogo); /* Malha da tela de trabalho — papel milimetrado, como no relatório de origem: lattice fino e regular, ponto pequeno em cada cruzamento. Claros, e não escuros: com o canvas a apenas 10 pontos dos cartões, um ponto preto não teria contraste nenhum para registrar. */ --grade-passo: 14px; --grade-pontos: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.4px); /* Gamificação — âmbar "de fogo", fixo. Fica de fora do acento de domínio de propósito: sequência e XP não pertencem a nenhuma análise, então mudar de cor ao trocar de área faria o elemento parecer parte da tela. */ --fogo: #f5b31b; --fogo-fundo: rgba(245, 179, 27, 0.12); --fogo-borda: rgba(245, 179, 27, 0.34); /* Metais das insígnias. A cor É o degrau: quem olha a estante lê a dificuldade antes de ler o nome. Cada metal traz o par de paradas do gradiente, a tinta do ícone (escura, para o brilho ficar no metal e não no traço) e o tom rebaixado que pinta o cartão. */ --metal-bronze-1: #d59a63; --metal-bronze-2: #8a5227; --metal-bronze-tinta: #2a1607; --metal-bronze-fundo: rgba(213, 154, 99, 0.10); --metal-bronze-borda: rgba(213, 154, 99, 0.30); --metal-prata-1: #dfe4ea; --metal-prata-2: #8b95a3; --metal-prata-tinta: #23282e; --metal-prata-fundo: rgba(223, 228, 234, 0.08); --metal-prata-borda: rgba(223, 228, 234, 0.26); --metal-ouro-1: #f7cf5e; --metal-ouro-2: #bf8a15; --metal-ouro-tinta: #2b1e02; --metal-ouro-fundo: rgba(247, 207, 94, 0.11); --metal-ouro-borda: rgba(247, 207, 94, 0.32); --metal-platina-1: #d8f2f6; --metal-platina-2: #5f9db5; --metal-platina-tinta: #10262e; --metal-platina-fundo: rgba(216, 242, 246, 0.09); --metal-platina-borda: rgba(216, 242, 246, 0.28); /* Tipografia */ --font-base: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; /* Layout */ --sidebar-width: 260px; --sidebar-width-collapsed: 76px; --header-height: 68px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Sombra */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); /* Da janela modal, à parte das três acima: ela flutua sobre a tela inteira e precisa de uma queda maior que a de um popover. */ --sombra-modal: 0 18px 44px rgba(0, 0, 0, 0.6); /* VÉUS — clareadores aplicados POR CIMA de uma superfície que já tem cor própria (o banner do bloco de usuário, a faixa alternada de uma tabela). Não dá para resolver com --bg-hover: trocar o fundo apagaria o desenho que está embaixo. Por serem clareadores, invertem no tema claro: lá quem destaca é o escurecimento. */ --veu-hover: rgba(255, 255, 255, 0.035); --veu-sutil: rgba(255, 255, 255, 0.025); /* Fundo atrás de um diálogo modal. Escuro nos dois temas — é o apagar da luz da sala, não uma superfície. */ --veu-modal: rgba(0, 0, 0, 0.62); /* Barra de rolagem. Separada de --bg-elevated (que era quem a pintava): no tema claro a superfície elevada é branca, e um polegar branco some. */ --scroll-polegar: var(--bg-elevated); --scroll-polegar-hover: var(--border-color-light); /* Movimento */ --transition-fast: 150ms ease; --transition-base: 220ms ease; } /* ============================================================ Tema claro ============================================================ O tema ESCURO é o de cima — ele é o padrão e continua sendo a versão desenhada primeiro. Aqui só se redefine o que é SUPERFÍCIE: fundos, bordas, texto, véus e sombras. Nada de gráfico entra neste bloco. Por que nada de gráfico: rosca, barra e linha se pintam com --rampa-*, --serie-b, --accent do domínio e a semântica (--success/--danger). Essas escalas foram conferidas contra os relatórios de origem, e trocá-las junto com o fundo seria mudar duas coisas ao mesmo tempo — se um gráfico ficasse ruim, não daria para saber se o problema é o tom da série ou o fundo atrás dela. Fundo primeiro; a calibragem de cada tela vem depois. O bloco fica ANTES dos acentos de domínio de propósito. O tema mora no e o domínio no : o é descendente, então a declaração dele vence para si e para tudo que está dentro. Se a ordem fosse a inversa, ainda funcionaria — mas ler de cima para baixo "tema, depois domínio" é a mesma ordem em que as duas coisas são aplicadas em tempo de execução. */ :root[data-tema="claro"] { /* A MESMA HIERARQUIA DE CIMA, LIDA AO CONTRÁRIO. No escuro a moldura (sidebar + cabeçalho) é o tom mais profundo e a tela de trabalho é mais clara que os cartões — quem recorta a página são os blocos escuros. Aqui o papel se inverte: a moldura e os cartões são brancos e a tela de trabalho é o cinza; quem recorta passa a ser o branco. O que se preservou foi a RELAÇÃO — cartão e moldura no mesmo tom, canvas destacado dos dois —, não os valores. */ /* --bg-primary é o tom REBAIXADO, e não o branco que a leitura literal do comentário lá em cima ("body, login, sidebar, cabeçalho") sugeriria. A sidebar e o cabeçalho usam --bg-secondary; o que de fato consome este token na área interna são os campos em repouso do perfil, que precisam parecer um poço no cartão. No escuro isso saía de graça, porque ali o token é mais escuro que o cartão. Branco puro aqui faria o campo sumir dentro da ficha branca. */ --bg-primary: #f2f4f8; --bg-canvas: #e9ebf0; /* tela de trabalho, atrás dos cartões */ --bg-secondary: #ffffff; /* cartões, sidebar e cabeçalho */ --bg-tertiary: #eef0f4; /* "track / vazio": campos e chips */ --bg-elevated: #ffffff; /* popovers e selos */ --bg-hover: #e7eaf0; --border-color: #e2e5ec; --border-color-light: #c7cdd8; --text-primary: #14161b; --text-secondary: #5a6270; --text-muted: #8a919e; /* O acento neutro é o oposto do de cima: lá era branco sobre grafite, aqui é grafite sobre branco. Vale só onde NÃO há domínio (Início, Comunidade, perfil, Slide Show) — nas análises o carrega data-dominio e o acento é a cor da área, que não muda de tema para tema. É por isso que mexer aqui não toca em nenhum gráfico: toda tela que desenha tem domínio. */ --accent: #1b2027; --accent-hover: #000000; --accent-soft: rgba(27, 32, 39, 0.08); --accent-glow: rgba(27, 32, 39, 0.14); --on-accent: #ffffff; /* O verde da marca ESCURECE. Não é preferência: #cbf41c sobre branco dá contraste 1,4:1 — é literalmente ilegível, e o token é usado como `color:` em 29 lugares (eyebrows, ícones de menu, a marca de carregamento). O tom aqui é o mesmo matiz (~72°) rebaixado até passar dos 5:1, então continua sendo reconhecido como o verde do Mobidash. */ --brand: #5d7805; --brand-soft: rgba(93, 120, 5, 0.12); --on-brand: #ffffff; /* A TINTA da semântica escurece; a SÉRIE não. É a única forma de atender às duas coisas ao mesmo tempo: "mantenha as cores dos gráficos" e "dê para ler". Cada valor é o mesmo matiz do token de série, rebaixado até passar de 5:1 sobre branco — verde continua verde, vermelho continua vermelho. O que muda é só quem escreve. */ --success-tinta: #52791c; --danger-tinta: #c33b3b; --warning-tinta: #a86400; --info-tinta: #35708f; --fogo-tinta: #9c6a00; /* Malha da tela de trabalho: pontos ESCUROS. Os claros de cima não existiriam sobre um canvas claro. */ --grade-pontos: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.06) 1px, transparent 1.4px); /* Sombras muito mais leves. As do escuro têm 45–60% de preto porque precisam vencer um fundo quase preto; as mesmas sobre branco viram manchas. O tom puxa para o azul-cinza (15,20,30) em vez de preto puro — sombra rigorosamente cinza sobre branco parece sujeira. */ --shadow-sm: 0 1px 2px rgba(15, 20, 30, 0.07); --shadow-md: 0 4px 16px rgba(15, 20, 30, 0.10); --shadow-lg: 0 12px 32px rgba(15, 20, 30, 0.14); --sombra-modal: 0 18px 44px rgba(15, 20, 30, 0.20); /* Os véus invertem: aqui quem destaca é escurecer, não clarear. */ --veu-hover: rgba(0, 0, 0, 0.04); --veu-sutil: rgba(0, 0, 0, 0.022); /* O fundo do modal continua escuro — apagar a luz da sala funciona nos dois temas —, só que menos, porque o salto de branco para preto é violento. */ --veu-modal: rgba(15, 20, 30, 0.42); --scroll-polegar: #c7cdd8; --scroll-polegar-hover: #a8afbd; /* A escala do laranja é usada como FUNDO de selo e estado pressionado, e a ponta de baixo dela (#3a2e14, #6b4a1f) foi feita para ser "quase preto alaranjado". Sobre branco esses dois ficam mais escuros que o texto, então as duas primeiras paradas viram tintas claras — a rampa continua indo do apagado ao vivo, na mesma matiz. */ --laranja-100: #fdf0dc; --laranja-300: #f7d7a6; /* Os metais das insígnias trazem fundo e borda pensados para superfície escura (branco a 8–11% de opacidade, que sobre branco some). Aqui o fundo vira a própria cor do metal, rebaixada. As paradas do gradiente e a tinta do ícone NÃO mudam: são o metal em si. */ --metal-bronze-fundo: rgba(138, 82, 39, 0.12); --metal-bronze-borda: rgba(138, 82, 39, 0.34); --metal-prata-fundo: rgba(139, 149, 163, 0.14); --metal-prata-borda: rgba(139, 149, 163, 0.38); --metal-ouro-fundo: rgba(191, 138, 21, 0.13); --metal-ouro-borda: rgba(191, 138, 21, 0.36); --metal-platina-fundo: rgba(95, 157, 181, 0.13); --metal-platina-borda: rgba(95, 157, 181, 0.36); } /* ---------- Troca de acento por domínio ---------- */ [data-dominio="logistica"] { --accent: var(--dominio-logistica); --accent-tinta: var(--accent); --accent-hover: #6f98f5; --accent-soft: rgba(76, 125, 240, 0.14); --accent-glow: rgba(76, 125, 240, 0.28); --on-accent: #ffffff; } [data-dominio="financeiro"] { --accent: var(--dominio-financeiro); --accent-tinta: var(--accent); --accent-hover: #2dd4bf; --accent-soft: rgba(20, 184, 166, 0.14); --accent-glow: rgba(20, 184, 166, 0.28); --on-accent: #04211e; } /* A RAMPA é global e laranja — foi desenhada para o E-commerce, e barra e rosca a usam em qualquer tela. Em RH isso entregava barras laranja ao lado de linhas douradas, duas cores sem relação na mesma tela. Aqui ela é redefinida em tons do próprio acento: mesma progressão do claro ao apagado, outra matiz. */ [data-dominio="rh"] { --rampa-1: #e3c93f; --rampa-2: #c9b148; --rampa-3: #a8944a; --rampa-4: #857748; --rampa-5: #665c3e; --rampa-6: #494331; --accent: var(--dominio-rh); --accent-tinta: var(--accent); --accent-hover: #f0dc6a; --accent-soft: rgba(227, 201, 63, 0.14); --accent-glow: rgba(227, 201, 63, 0.28); /* Texto ESCURO sobre o acento: dourado é claro, e branco em cima dele fica ilegível. É o único domínio em que essa inversão é necessária. */ --on-accent: #1a1608; } [data-dominio="ecommerce"] { --accent: var(--laranja-700); --accent-tinta: var(--accent); --accent-hover: var(--laranja-900); --accent-soft: rgba(239, 159, 39, 0.14); --accent-glow: rgba(239, 159, 39, 0.28); /* Laranja é claro: texto branco em cima não passa em contraste. */ --on-accent: #241703; } /* ---------- A tinta do acento, no tema claro ---------- Os quatro acentos foram escolhidos para saltar de um fundo grafite: são claros. Sobre branco, os mesmos valores escrevem mal — o âmbar do E-commerce dá 1,8:1 e o dourado do RH, 1,6:1. Era o "28,1%" ao lado do ranking de categorias: presente, mas ilegível. As barras, linhas e roscas continuam com o `--accent` original. O que muda é só o `--accent-tinta`, e só aqui: mesmo matiz, rebaixado até passar de 4,5:1 sobre a superfície branca dos cartões. Este bloco precisa vir DEPOIS dos quatro acima e casar as duas condições ao mesmo tempo, porque as duas moram em elementos diferentes: o tema no , o domínio no ou num cartão do Início. */ :root[data-tema="claro"] [data-dominio="logistica"] { --accent-tinta: #2a55c4; } :root[data-tema="claro"] [data-dominio="financeiro"] { --accent-tinta: #0b7a6e; } :root[data-tema="claro"] [data-dominio="rh"] { --accent-tinta: #7d6a06; } :root[data-tema="claro"] [data-dominio="ecommerce"] { --accent-tinta: #9a5c00; }