/* ═══════════════════════════════════════════════════════════════════════════════ VALORE — TOKENS DE COR E FORMA (arquivo compartilhado entre TODOS os portais) Cópia mestre: Projetos Valore/_padrao_valore/valore-tokens.css Ao alterar aqui, recopie para todos os portais listados no PADRAO-VALORE.md. ORDEM DE CARREGAMENTO (importa muito): 1. o CSS próprio do portal 2. valore-tokens.css ← este arquivo 3. valore-ui.css 4. valore-sidebar.css Ele vem DEPOIS do CSS do portal de propósito: é assim que o :root daqui prevalece sobre o :root local e recolore o portal inteiro sem precisar editar o CSS de cada um. ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ─── MARCA ───────────────────────────────────────────────────────────── */ --vl-blue: #1A6FCC; /* cor principal: botões, links, item ativo */ --vl-blue-hover: #14539C; /* estado :hover do azul principal */ --vl-blue-light: #2D8EE8; /* realce: barra do item ativo, ícones */ --vl-cyan: #17C0E0; /* destaque pontual: selos, gráficos */ --vl-blue-soft: #EAF2FB; /* fundo levíssimo de aviso/realce */ --vl-blue-line: #BBD6F2; /* borda de elementos em azul suave */ --vl-blue-tint: #D6E7F9; /* fundo azul claro (chips, destaques) */ /* ─── ESCUROS (sidebar, login, tela de carregamento) ──────────────────── */ --vl-dark-top: #141414; /* topo do degradê escuro */ --vl-dark-bottom: #000000; /* base do degradê escuro */ --vl-dark-grad: linear-gradient(180deg, #141414 0%, #000000 100%); --vl-login-card: #0F0F0F; /* card da tela de login sobre o fundo preto */ /* ─── NEUTROS (páginas internas — sempre claras) ──────────────────────── */ --vl-bg: #F4F6FB; --vl-surface: #FFFFFF; --vl-surface-2: #F8F9FD; --vl-border: #E4E8F2; --vl-border-strong: #CDD3E8; --vl-text: #0A1628; --vl-text-2: #4A5568; --vl-text-3: #8896B0; /* ─── SEMÂNTICAS ────────────────────────────────────────────────────────── Não fazem parte da paleta de marca, mas são obrigatórias: um portal fiscal precisa distinguir "conforme" de "crítico", e isso não se faz com tons de azul. */ --vl-success:#16A34A; --vl-success-bg:#DCFCE7; --vl-success-line:#BBF7D0; --vl-success-ink:#15803D; --vl-danger: #DC2626; --vl-danger-bg: #FEE2E2; --vl-danger-line: #FECACA; --vl-danger-ink: #B91C1C; --vl-warning:#B45309; --vl-warning-bg:#FEF3C7; --vl-warning-line:#FDE68A; --vl-warning-ink:#92400E; /* ─── FORMA, SOMBRA E TIPOGRAFIA ──────────────────────────────────────── */ --vl-radius: 10px; --vl-radius-sm: 8px; --vl-radius-lg: 14px; --vl-shadow-sm: 0 1px 3px rgba(26,31,54,.06), 0 1px 2px rgba(26,31,54,.04); --vl-shadow: 0 4px 16px rgba(26,31,54,.08), 0 1px 4px rgba(26,31,54,.04); --vl-shadow-lg: 0 8px 32px rgba(26,31,54,.12), 0 2px 8px rgba(26,31,54,.06); --vl-font: 'Plus Jakarta Sans', 'DM Sans', 'Segoe UI', Arial, sans-serif; --vl-transition: .18s ease; /* ═════════════════════════════════════════════════════════════════════════ PONTES PARA OS NOMES QUE OS PORTAIS JÁ USAM Os portais nasceram com nomes próprios de variável. Em vez de renomear tudo (o que exigiria varrer o CSS de 10 projetos), os nomes antigos são reapontados aqui para os tokens novos. ATENÇÃO — o erro fácil de cometer aqui: `--accent-light` NÃO é um azul forte. No Auditoria ele vale #dbeafe, um azul clarinho usado como FUNDO de chip e de aviso. Se alguém apontar `--accent-light` para #2D8EE8, todo fundo claro vira azul escuro e o texto some. O #2D8EE8 é um papel NOVO (--vl-blue-light), usado em realces sobre fundo escuro — nunca como substituto de --accent-light. Cada ponte abaixo respeita o PAPEL da variável antiga, não o nome dela. ═══════════════════════════════════════════════════════════════════════ */ --accent: var(--vl-blue); /* era #1d4ed8 */ --accent-hover: var(--vl-blue-hover); /* era #1e40af */ --accent-soft: var(--vl-blue-soft); /* era #eff6ff — fundo bem claro */ --accent-light: var(--vl-blue-tint); /* era #dbeafe — fundo claro */ --accent-line: var(--vl-blue-line); /* era #93c5fd — borda suave */ --info: var(--vl-blue); --info-bg: var(--vl-blue-soft); --bg: var(--vl-bg); --surface: var(--vl-surface); --surface2: var(--vl-surface-2); --surface-2: var(--vl-surface-2); --border: var(--vl-border); --border-strong: var(--vl-border-strong); --text: var(--vl-text); --text-2: var(--vl-text-2); --text-3: var(--vl-text-3); --success: var(--vl-success); --success-bg: var(--vl-success-bg); --danger: var(--vl-danger); --danger-bg: var(--vl-danger-bg); --warning: var(--vl-warning); --warning-bg: var(--vl-warning-bg); --radius: var(--vl-radius); --radius-sm: var(--vl-radius-sm); --radius-lg: var(--vl-radius-lg); --shadow-sm: var(--vl-shadow-sm); --shadow: var(--vl-shadow); --shadow-lg: var(--vl-shadow-lg); --font: var(--vl-font); --transition: var(--vl-transition); /* Nomes antigos em português (Emissão NFSe, Cobrança Ativa) */ --azul-escuro: var(--vl-text); --azul-medio: var(--vl-blue); --azul-claro: var(--vl-blue-tint); --azul-hover: var(--vl-blue-hover); --branco: var(--vl-surface); --texto: var(--vl-text); --login-blue: var(--vl-blue); /* O laranja do Valore Hub e o limão da Consultoria saem de cena: viram o azul da marca. Mantidos como ponte para não quebrar quem ainda os cita. */ --orange: var(--vl-blue); --orange-dark: var(--vl-blue-hover); --orange-soft: var(--vl-blue-soft); --lime: var(--vl-blue); --lime-dark: var(--vl-blue-hover); } /* A tipografia do padrão é a Plus Jakarta Sans. O do Google Fonts precisa existir no de cada portal — ver PADRAO-VALORE.md. */ body { font-family: var(--vl-font); }