/* ===================================================================== Ally Design System — tokens de fundação. Camadas: 1. Tokens crus da marca (paleta blue/teal/ink, tipografia, espaçamento, raios, efeitos, gradientes, glows) — imutáveis entre temas. 2. Tokens semânticos do app (--bg, --bg-card, --text, --accent, …) — mapeados por tema. Escuro é o padrão; [data-theme="light"] sobrescreve. O tema é controlado pelo atributo data-theme no (script anti-flash no dos templates base). Os nomes semânticos legados do app foram preservados para não quebrar os componentes existentes. ===================================================================== */ :root { /* ============ Marca — escala Blue (primária) ============ */ --blue-50: #EAF1FF; --blue-100: #D2E0FF; --blue-200: #A8C4FF; --blue-300: #7BA2FF; --blue-400: #4E7DFF; --blue-500: #2F6BFF; /* primária */ --blue-600: #1E52E6; --blue-700: #163EB4; --blue-800: #122F86; --blue-900: #0F245F; /* ============ Acento — teal/ciano elétrico (energia de IA) ============ */ --teal-300: #7BF3F2; --teal-400: #35E0E8; --teal-500: #16C7D4; /* acento */ --teal-600: #0EA0B2; /* ============ Ink / neutros (tom frio) ============ */ --ink-950: #05070F; --ink-900: #0A0E1A; --ink-800: #111726; --ink-700: #1B2335; --ink-600: #2A3347; --ink-500: #3E4A63; --ink-400: #5B6883; --ink-300: #8A96AF; --ink-200: #B9C2D6; --ink-100: #DCE2EE; --ink-50: #EEF1F8; --white: #FFFFFF; /* ============ Status ============ */ --success: #22C55E; --warning: #F5A524; --danger: #F0455B; /* ============ Tipografia ============ */ /* trocado de Space Grotesk/Manrope pro stack -apple-system em 2026-08-06 (pedido do usuario: deixar o Ally com cara de app nativo da Apple) - em Mac/iPhone resolve pra SF Pro DE VERDADE (o proprio SO serve a fonte, sem baixar nada); fora do universo Apple cai pro Inter, que e' o substituto mais proximo recomendado pela propria documentacao de design da Apple. */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', ui-sans-serif, sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', ui-sans-serif, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 3.75rem; --text-5xl: 4.75rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tighter: -0.03em; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.02em; --ls-caps: 0.08em; /* ============ Espaçamento / raios / layout (grid 4px) ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* lg/xl subiram (16->20 / 24->28) em 2026-08-07 - Fase 2 do plano Apple-style: CSS não desenha o squircle real da Apple (border-radius é sempre arco de círculo, não superelipse - ver docs/plano-apple- design.md §2), a aproximação prática é um raio GRANDE o suficiente pra "ler" como curva suave em vez de canto arredondado comum. Afeta cartão do modal, sidebar, painéis/kpis/cards de automação de uma vez só (todos usam --radius-lg/--radius-xl) - sm/md ficam como estão, raio grande demais em elemento pequeno vira pastilha gorda, não squircle. */ --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 32px; --radius-full: 999px; --container: 1200px; --container-wide: 1360px; --gutter: 24px; /* ============ Efeitos: elevação (frio, suave) ============ */ --shadow-xs: 0 1px 2px rgba(10, 14, 26, 0.06); --shadow-sm: 0 2px 6px rgba(10, 14, 26, 0.08); --shadow-md: 0 8px 24px rgba(10, 14, 26, 0.10); --shadow-lg: 0 20px 48px rgba(10, 14, 26, 0.14); --shadow-xl: 0 32px 80px rgba(10, 14, 26, 0.20); /* ============ Glow — assinatura da marca ============ */ --glow-sm: 0 4px 20px rgba(47, 107, 255, 0.25); --glow-md: 0 8px 40px rgba(47, 107, 255, 0.35); --glow-lg: 0 12px 60px rgba(47, 107, 255, 0.45); --glow-teal-md: 0 8px 40px rgba(22, 199, 212, 0.35); --glow-blue: rgba(47, 107, 255, 0.45); --glow-teal: rgba(22, 199, 212, 0.35); --shadow-navbar: 0 6px 32px -6px rgba(47, 107, 255, 0.45), 0 1px 0 rgba(255, 255, 255, 0.5) inset; --ring: 0 0 0 3px rgba(47, 107, 255, 0.35); --blur-glass: 16px; /* blur do FUNDO da pagina atras de um modal aberto (diferente de --blur-glass, que e o "vidro" do proprio cartao do modal) - pedido do usuario 2026-08-01: fundo bem mais desfocado que antes (6px), dando profundidade sem escurecer a pagina. Subiu de 14px pra 24px em 2026-08-04 (pedido do usuario: "o blur precisa pegar nos textos tb") - em 14px texto grande/em negrito (ex: titulo "Automações") ainda ficava legivel atras do modal, so as formas/blocos desfocavam de verdade. Baixou em 4 etapas em 2026-08-06 (pedido do usuario): 18px -> 12px -> 9px -> 6px - 24px estava desfocando forte demais. Em 6px provavelmente volta o problema original (texto grande/negrito legivel atras do modal, ver historico acima) - se pedir pra aumentar de novo, essa e' a causa. Ver .modal-overlay/.admtn-dialog::backdrop. */ --blur-backdrop: 6px; /* ============ Movimento ============ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; /* ============ Gradientes de assinatura ============ */ --grad-brand: linear-gradient(135deg, var(--blue-500), var(--teal-500)); --grad-hero: radial-gradient(120% 80% at 50% 120%, rgba(47,107,255,0.55) 0%, rgba(22,199,212,0.25) 40%, transparent 70%); --grad-text: linear-gradient(120deg, #fff 20%, var(--teal-300) 60%, var(--blue-300) 100%); --grad-btn: linear-gradient(180deg, var(--blue-500), var(--blue-700)); } /* ===================================================================== TEMA ESCURO (padrão) — app shell sobre ink-900 ===================================================================== */ :root, [data-theme="dark"] { color-scheme: dark; --bg: var(--ink-900); --bg-elev: var(--ink-800); --bg-card: var(--ink-800); --bg-card-hov: var(--ink-700); --bg-inset: var(--ink-700); --bg-subtle: var(--ink-800); /* fundo "vidro" da sidebar flutuante (Fase 1 do plano Apple-style, 2026-08-07) - translúcido de propósito (backdrop-filter faz o resto), ink-800 com alpha em vez do --bg-elev sólido usado em outros lugares. */ --side-glass-bg: rgba(17, 23, 38, 0.78); /* Borda com gradiente na sidebar (adaptado do mockup "Geoex Automations", 2026-08-08 - pedido do usuário: "quero que fique similar a isso, só que azul" - a técnica original usa roxo, aqui é a mesma ideia com a escala --blue-*). Truque de "gradient border" em CSS: 2 backgrounds empilhados (fundo sólido em padding-box + este gradiente em border-box) com border-color:transparent - ver .side em layout/sidebar.css. Só no tema escuro (mesma escolha do mockup original: no claro o "brilho" de borda colorida ficaria estranho contra fundo claro, lá também é só um branco translúcido plano). */ --side-border-gradient: linear-gradient(160deg, rgba(123, 162, 255, 0.55), rgba(47, 107, 255, 0.10) 35%, rgba(30, 82, 230, 0.06) 60%, rgba(78, 125, 255, 0.45) ) border-box; /* "material padrão" (thin) pra camada de CONTEÚDO (Fase 3, 2026-08-07) - NÃO é vidro (--blur-glass é reservado pra sidebar/modal, camada de controle/navegação - HIG: "Don't use Liquid Glass in the content layer"). Usado só onde já existe sobreposição de verdade (cabeçalho sticky de tabela sobre linhas rolando por baixo) - opaco o bastante pra manter o texto legível, com um blur bem mais discreto que o do vidro, só pra sugerir a camada por baixo em vez de escondê-la de propósito. ink-700 (mesmo tom de --bg-inset no escuro) com alpha. */ --content-thin-bg: rgba(27, 35, 53, 0.86); --content-thin-blur: 8px; /* Degradê removido 2026-08-10 (pedido do usuário: "retire dos cards o degrade" - mockup aprovado antes de aplicar aqui). --card-fill/ --card-border-gradient agora são o padrão LISO usado na maioria das telas (.panel/.kpi/.dados-filtro-card) - fundo sólido (--bg-card) e borda simples (mesma cor de --border, só que empacotada como gradiente pra manter compatível com a técnica de 2 backgrounds empilhados já usada nesses componentes: fill em padding-box, isto em border-box, com border:1px solid transparent). O card com degrade azul continua existindo, mas só na tela de Automações - ver --autom-card-fill/--autom-card-border-gradient abaixo. */ --card-fill: var(--bg-card); --card-border-gradient: linear-gradient(var(--border), var(--border)) border-box; /* Card com degrade - EXCLUSIVO da tela de Automações (pedido do usuário 2026-08-10: "Esse card eu quero apenas na tela de automacoes. Nas demais tela retire os degrades"). Fundo: brilho azul escuro. Borda: ver comentário abaixo - ajustado em várias rodadas de mockup até aprovação final. Usado só em .autom-lista--grid .autom-row (automacoes.css). Fundo invertido 2026-08-10 - saía do canto inferior direito, passou pro canto superior esquerdo (pedido do usuário). Parte clara trocada pra #1C2641 (cor exata pedida pelo usuário) no mesmo dia. */ --autom-card-fill: radial-gradient(ellipse at top left, #1C2641 0%, var(--bg-card) 60% ); /* Invertido 2026-08-10 (pedido do usuário, só tema escuro): o canto claro (antes canto superior esquerdo) passa pro canto inferior direito, e o canto escuro (antes inferior direito) passa pro superior esquerdo - mesmos stops, só a ordem trocada. */ --autom-card-border-gradient: linear-gradient(135deg, rgba(6, 7, 9, 0.85) 0%, rgba(133, 175, 255, 0) 60%, rgba(133, 175, 255, 0.50) 100% ) border-box; --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.16); --text: var(--white); --text-dim: var(--ink-200); --text-faint: var(--ink-400); --text-inverse: var(--ink-900); --text-brand: var(--blue-300); --accent: var(--blue-500); --accent-hover: var(--blue-400); --accent-press: var(--blue-600); --accent-soft: rgba(47, 107, 255, 0.14); --accent-line: rgba(47, 107, 255, 0.40); /* versão OPACA (sem alpha) do mesmo tom de --accent-soft, pra uso em células sticky (dados.css, coluna de ações) - o rgba translúcido deixa o que está "escondido" atrás (colunas roladas por baixo, no scroll horizontal) aparecer fantasma quando usado como fundo de hover. */ --accent-soft-solid: color-mix(in srgb, var(--accent) 14%, var(--bg-card)); --surface-card: rgba(255, 255, 255, 0.04); --ok: var(--success); --warn: var(--warning); --err: var(--danger); --info: var(--blue-500); /* intensidade dos glows ambientes de fundo (body::before = canto superior esquerdo, body::after = canto inferior direito) - zerados em 2026-08-06 (pedido do usuario: "remover esses orbs do modo escuro"). Corrigido 2026-08-10: primeira tentativa foi reativar o de cima- esquerda (--ambient-blue), mas o usuario queria o de baixo-direita (--ambient-teal, controla a intensidade do body::after) e na cor azul do menu lateral (--accent) em vez do teal original do tema claro - por isso --ambient-2-color (cor do body::after, ver tokens abaixo e regra em body::after) é sobrescrito aqui pra azul. O de cima-esquerda (--ambient-blue) volta a zero. */ --ambient-blue: 0; --ambient-teal: 0.07; --ambient-2-color: 47, 107, 255; /* mesmo azul de --accent (blue-500) */ } /* ===================================================================== TEMA CLARO — superfícies claras (ink-50 page / branco cards) ===================================================================== */ [data-theme="light"] { color-scheme: light; --bg: var(--ink-50); --bg-elev: var(--white); --bg-card: var(--white); --bg-card-hov: #F5F7FC; --bg-inset: #F5F7FC; --bg-subtle: var(--ink-50); --side-glass-bg: rgba(255, 255, 255, 0.78); --content-thin-bg: rgba(245, 247, 252, 0.86); /* tema claro: sem o brilho azul (ver comentário no bloco escuro acima) - só um branco translúcido plano, mesma escolha do mockup original. */ --side-border-gradient: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) border-box; /* Degradê de FUNDO removido 2026-08-10 (mesmo pedido do tema escuro, ver comentário em :root acima) - fundo sólido. Padrão usado na maioria das telas (.panel/.kpi/.dados-filtro-card). */ --card-fill: var(--bg-card); /* Borda branca SÓ no canto superior esquerdo (pedido do usuário 2026-08-10, depois de ver o degradê diagonal ao vivo: "eu quero só uma borda branca no canto superior esquerdo" - o linear-gradient(135deg) anterior espalhava um pouco de branco pelos cantos vizinhos também, por ser uma reta atravessando a caixa inteira). Radial em vez de linear: fica concentrado bem no canto, some rápido (raio curto), resto da borda fica transparente de verdade. */ --card-border-gradient: radial-gradient(circle at top left, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 30% ) border-box; /* Card com degrade - EXCLUSIVO da tela de Automações, equivalente claro do bloco :root acima, com alphas reduzidos pra não pesar contra o fundo branco. Fundo invertido 2026-08-10 (mesmo pedido do tema escuro) - saía do canto inferior direito, passou pro superior esquerdo. */ --autom-card-fill: radial-gradient(ellipse at top left, rgba(210, 224, 255, 0.55) 0%, var(--bg-card) 60% ); /* Borda trocada de azul/cinza pra branca 2026-08-10 (pedido do usuário olhando o card no claro: "a borda fique branca") - mesma técnica radial (concentrada no canto superior esquerdo) do --card-border- gradient das demais telas, aplicada aqui também pro card de Automações ficar consistente com o resto do app no tema claro. */ --autom-card-border-gradient: radial-gradient(circle at top left, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 30% ) border-box; --border: #E4E8F2; --border-soft: #EEF1F8; --border-strong: #D5DBE8; --text: var(--ink-900); --text-dim: var(--ink-700); --text-faint: var(--ink-400); --text-inverse: var(--white); --text-brand: var(--blue-600); --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-press: var(--blue-700); --accent-soft: rgba(47, 107, 255, 0.10); --accent-line: rgba(47, 107, 255, 0.35); --accent-soft-solid: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); --surface-card: var(--white); --ok: #15A34A; --warn: #D97706; --err: #DC2A41; --info: var(--blue-500); --ambient-blue: 0.10; --ambient-teal: 0.07; --ambient-2-color: 22, 199, 212; /* teal original do tema claro (sem mudar aqui) */ } /* ===================================================================== Reset / fundação ===================================================================== */ html, body { height: 100vh; overflow: hidden; } body { background: var(--bg); font-family: var(--font-sans); color: var(--text); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; position: relative; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* Títulos e números grandes usam o display (Space Grotesk). */ h1, h2, h3, .font-display, .page-title { font-family: var(--font-display); } /* glows ambient de fundo (atrás de tudo) — intensidade varia por tema */ body::before { content: ""; position: fixed; top: -200px; left: 200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(47, 107, 255, var(--ambient-blue)) 0%, rgba(47, 107, 255, 0) 65%); filter: blur(40px); pointer-events: none; z-index: 0; } body::after { content: ""; position: fixed; bottom: -150px; right: -100px; width: 550px; height: 550px; /* cor vem de --ambient-2-color (rgb "R, G, B" cru, sem rgba()) - teal no tema claro (original), azul (mesmo tom do menu lateral, --accent) no tema escuro - ver os dois tokens em tokens.css. */ background: radial-gradient(circle, rgba(var(--ambient-2-color), var(--ambient-teal)) 0%, rgba(var(--ambient-2-color), 0) 65%); filter: blur(40px); pointer-events: none; z-index: 0; } .text-mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.55; } } @keyframes toast-in { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .dot-pulse { animation: pulse-dot 1.4s ease-in-out infinite; } /* ===================================================================== Compat: telas mais antigas (Dados, Exportações, Certificados, Produtos, Logs, painel do tenant) usam classes utilitárias do Tailwind tipo text-slate-300 direto no HTML, escritas quando só existia tema escuro (a cor fixa fazia sentido contra o fundo .glass, tambem fixo e escuro naquela epoca). Como .glass/.glass-elev/.panel agora trocam de cor no tema claro (ver surface.css), esse texto claro-fixo ficava ilegivel (texto quase branco em cima de painel agora branco). Em vez de reescrever cada template pra usar os tokens semanticos (--text/--text-dim/--text- faint), redireciona as classes Tailwind mais usadas pra eles SO no tema claro - a especificidade do seletor com [data-theme] (0,2,0) ja vence a classe crua do Tailwind (0,1,0), independente da ordem de carregamento. */ [data-theme="light"] .text-slate-100, [data-theme="light"] .text-slate-200 { color: var(--text) !important; } [data-theme="light"] .text-slate-300 { color: var(--text-dim) !important; } [data-theme="light"] .text-slate-400, [data-theme="light"] .text-slate-500, [data-theme="light"] .text-slate-600 { color: var(--text-faint) !important; } /* scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }