/* * Painel de Inteligência de Mercado — design tokens * Paleta corporativa: verde institucional + neutros frios. * Tema claro é o padrão; o escuro é ativado por [data-tema="escuro"] no . * * FORMA — o hub segue o desenho de ERP corporativo (JD Edwards EnterpriseOne): * canto quase reto, sombra rasa, régua de 1px separando tudo. Raio grande e * sombra funda pertencem a app de consumo; aqui a tela é densa e passa o dia * aberta, então a hierarquia sai da BORDA e do fundo, não do relevo. */ :root { /* marca */ --verde-900: #0d3320; --verde-800: #14532d; --verde-700: #1a6b3c; --verde-600: #2f7a4f; --verde-500: #3f9464; --verde-100: #e3f0e8; --verde-050: #f2f8f4; /* commodities */ --c-soja: #2f7a4f; --c-milho: #c79a1e; --c-algodao: #4f7fb5; --c-fertilizantes: #8b5fa8; --c-macro: #6b7280; --c-clima: #0f8ba8; /* semânticos */ --alta: #16794a; --baixa: #c0392b; --neutro: #6b7280; --alerta: #b45309; --info: #1d6fa5; /* superfícies (claro) */ --bg: #f4f6f5; --bg-elev: #ffffff; --bg-sub: #fafbfa; --bg-inset: #eef1ef; --borda: #dfe4e1; --borda-forte: #c6cec9; /* texto */ --txt: #16211b; --txt-2: #4a5751; --txt-3: #7c8a83; --txt-inv: #f2f8f4; /* * BANNER — a faixa escura de largura total, no alto. É a única superfície * escura do tema claro: no E1 ela carrega a marca e as ações globais, e o * resto da tela fica claro para o dado ter contraste. */ --banner-1: #0b2b1b; --banner-2: #123f27; --banner-txt: #cfe2d7; --banner-txt-forte: #ffffff; --banner-borda: rgba(255, 255, 255, .13); --banner-campo: rgba(255, 255, 255, .10); /* * NAVEGADOR — painel CLARO, ao contrário da barra lateral escura que o hub * tinha antes. É o desenho do E1: a árvore de tarefas é um documento, não um * painel de comando, e em claro ela aceita três níveis de recuo sem virar * um bloco preto na lateral. */ --nav-bg: #edf1ef; --nav-bg-2: #e5eae7; --nav-borda: #d5dcd8; --nav-txt: #35423b; --nav-txt-2: #6d7c74; --nav-modulo: #16211b; --nav-hover: #dfe7e2; --nav-ativo-bg: #ffffff; --nav-ativo-txt: var(--verde-800); --nav-trilho: var(--verde-700); /* abas de aplicações abertas */ --aba-bg: #e7edea; --aba-ativa: var(--bg-elev); /* forma */ --r-sm: 2px; --r: 3px; --r-lg: 4px; --sombra-1: 0 1px 1px rgba(16, 40, 28, .05); --sombra-2: 0 1px 3px rgba(16, 40, 28, .10), 0 4px 12px rgba(16, 40, 28, .06); --sombra-3: 0 10px 34px rgba(13, 51, 32, .20); /* tipografia */ --ff: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, Helvetica, Arial, sans-serif; --ff-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace; /* * Fonte dos GRÁFICOS — a da marca. Só o desenho em canvas usa, porque é ele que * vira imagem e sai do hub; a interface segue no --ff do sistema. * * A pilha guarda o fallback: se por algum motivo o arquivo não carregar, o * gráfico sai em Segoe UI em vez de sair na fonte padrão do canvas, que é uma * serifada de 10px e destoaria de tudo. */ --ff-grafico: Jost, "Segoe UI", Helvetica, Arial, sans-serif; --fs-xs: 11px; --fs-sm: 12.5px; --fs: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 23px; --fs-2xl: 30px; /* * MEDIDAS DO CHROME. * * `--topo-h` não é mais a altura de UMA barra: é a soma das três faixas * grudadas no alto da coluna de conteúdo (banner + abas + trilha). Quem * gruda algo por dentro do conteúdo — o cartão lateral do Morning Call é o * caso — precisa desse total, não da altura de uma delas. */ --nav-w: 268px; --banner-h: 44px; --abas-h: 34px; --caminho-h: 38px; --topo-h: calc(var(--banner-h) + var(--abas-h) + var(--caminho-h)); --gap: 16px; } html[data-tema="escuro"] { --bg: #101713; --bg-elev: #18211c; --bg-sub: #141d18; --bg-inset: #1e2923; --borda: #2a3730; --borda-forte: #3a4a41; --txt: #e6efe9; --txt-2: #a9bbb1; --txt-3: #7b8d84; --banner-1: #071a10; --banner-2: #0c2b1b; --banner-txt: #9db8ab; --banner-borda: rgba(255, 255, 255, .09); --banner-campo: rgba(255, 255, 255, .07); --nav-bg: #141d18; --nav-bg-2: #111a15; --nav-borda: #263129; --nav-txt: #b6c8bd; --nav-txt-2: #7b8d84; --nav-modulo: #e6efe9; --nav-hover: #1e2923; --nav-ativo-bg: #21302a; --nav-ativo-txt: #b8e3cb; --nav-trilho: var(--verde-500); --aba-bg: #141d18; --aba-ativa: var(--bg-elev); --verde-100: #1d3a2a; --verde-050: #16281e; --alta: #34b37a; --baixa: #e5705f; --alerta: #d99a3d; --info: #4ea3d8; --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 2px 8px rgba(0, 0, 0, .35); --sombra-3: 0 12px 40px rgba(0, 0, 0, .5); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }