/* ═══════════════════════════════════════════════════════════════════════ KIT NAPOLEÃO · tokens — estilo CONSULADO II (18/08/2026) Cores, raios, sombras, fontes e MOVIMENTO. Trocar o visual do Napoleão inteiro começa aqui. ARQUIVO COMPARTILHADO — a fonte é "KIT NAPOLEAO - MARIA BRASILEIRA/css/". A cópia dentro de cada módulo é GERADA por `node sync.js`. O que mudou em relação ao Consulado (31/07/2026): · A cor institucional passa a ser o AZUL-MARINHO da camisa (#0E2A47) e o dourado da logo (#D9A426) é o único acento. O verde-petróleo continua vivo, mas rebaixado a cor de estado ("conferido", "ok"). · O tema escuro deixa de ser grafite/neutro e passa a ser MARINHO escuro: o fundo é a mesma família da marca, não cinza. · Nomes de variável antigos foram TODOS preservados (--verde-escuro, --amarelo-principal, --sidebar-*, --raio, --sombra-md…) para que base.css, layout.css e o CSS de cada módulo continuem funcionando sem uma linha alterada. O que mudou é o VALOR. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Marca ───────────────────────────────────────────────────────────── */ --marinho: #0E2A47; /* institucional: barra lateral, botão primário, título */ --marinho-claro: #12365C; /* hover do marinho */ --marinho-fundo: #E8EEF4; /* faixa/realce marinho no claro */ --dourado: #D9A426; /* acento único: ação principal, ícone ativo, prazo */ --dourado-forte: #B8871A; /* texto dourado sobre branco (contraste) */ --dourado-fundo: #FBF2DC; /* Aliases históricos — o app inteiro usa estes nomes. Mantidos de propósito. */ --amarelo-principal: #D9A426; --amarelo-hover: #C69420; --amarelo: #D9A426; --azul-figura: #12365C; --azul-claro: #2F7FD1; --azul: #0E2A47; --verde-escuro: #0E2A47; /* era petróleo; agora a barra lateral é marinho */ --verde-medio: #0E7462; --verde-claro: #14A085; --verde-bg: #E4F1EC; --verde: #0E7462; /* verde vira COR DE ESTADO, não de moldura */ --vermelho-alerta: #C0392B; --vermelho-claro: #FCEEEC; --vermelho: #C0392B; --laranja-aviso: #8D6106; --laranja-claro: #FBEFD6; /* ── Neutros frios (base do visual, puxados para o marinho) ──────────── */ --branco: #FFFFFF; /* superfície: card, tabela, modal, painel */ --branco-puro: #FFFFFF; --cinza-fundo: #F2F5F8; /* fundo da página */ --hover: #F7FAFC; /* hover neutro de linha e menu */ --cinza-borda: #DDE4EB; --cinza-texto: #5A6B7D; /* 4,6:1 sobre branco e sobre --superficie-suave */ --preto-contorno: #16211E; --preto: #16211E; --superficie-suave: #E8EEF4; /* rebaixada: coluna de kanban, faixa dentro de card */ /* ── Barra lateral (superfície escura, tokens próprios) ──────────────── */ --sidebar-w: 260px; --sidebar-bg: #0E2A47; --sidebar-texto: #DCE8F3; --sidebar-texto-fraco: #A9C0D6; /* 5,1:1 sobre o marinho — os rótulos têm 10px */ --sidebar-borda: rgba(255,255,255,.14); --sidebar-hover: rgba(255,255,255,.10); --sidebar-ativo-bg: #FFFFFF; --sidebar-ativo-texto: #0E2A47; --sidebar-icone: #A9C0D6; /* ícone em repouso */ --sidebar-icone-ativo: #D9A426; /* ícone do item ativo: dourado */ --sidebar-scroll: rgba(255,255,255,.20); --sidebar-scroll-forte: rgba(255,255,255,.34); /* ── Forma e profundidade ────────────────────────────────────────────── */ --raio: 14px; --raio-sm: 10px; --raio-lg: 18px; --sombra: none; --sombra-md: 0 18px 46px -16px rgba(14, 42, 71, .30); --sombra-lg: 0 40px 80px -30px rgba(10, 24, 42, .45); /* ── Tipografia ──────────────────────────────────────────────────────── */ /* Bricolage Grotesque nos títulos e números; Instrument Sans no corpo. Carregar no do módulo: */ --fonte-titulo: 'Bricolage Grotesque', 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --fonte-corpo: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* ── Movimento (usado por movimento.css e movimento.js) ──────────────── */ --mov-rapido: 120ms; /* clique, hover, press */ --mov-medio: 260ms; /* modal, aviso, chip */ --mov-lento: 320ms; /* painel deslizante */ --mov-cascata: 45ms; /* defasagem entre linhas de tabela */ --mov-curva: cubic-bezier(.22, .61, .36, 1); --mov-curva-saida: cubic-bezier(.4, 0, 1, 1); --desfoque-fundo: 6px; /* backdrop-filter do modal */ } /* ═══ TEMA ESCURO — marinho escuro, não grafite ═══════════════════════════ Mesmas variáveis, outros valores. Vive AQUI (não mais dentro do tema.js), para que trocar o visual seja um arquivo só. */ html[data-tema="escuro"] { color-scheme: dark; --branco: #0E2233; /* superfície */ --branco-puro: #0E2233; --cinza-fundo: #08182A; /* fundo da página */ --hover: #12293C; --cinza-borda: #1B3448; --cinza-texto: #93A9BC; /* 4,7:1 sobre a superfície */ --preto-contorno: #E3EBF2; --preto: #E3EBF2; --superficie-suave: #122B3E; /* ⚠️ Estes três são usados como COR DE TEXTO no CSS dos módulos (--verde-escuro sozinho aparece 108 vezes, em título de card e de seção). No claro são escuros, e sem uma versão aqui continuavam escuros sobre fundo escuro — o texto simplesmente sumia. Os valores abaixo foram escolhidos por medida de contraste sobre a superfície (#0E2233): 9,0 · 7,0 · 6,4 — bem acima do mínimo de 4,5. */ --verde-escuro: #9EC5EA; /* título de card/seção: azul claro, família da marca */ --azul-figura: #6BB0F0; --vermelho: #E58A7F; --marinho: #12365C; --marinho-claro: #1A4576; --marinho-fundo: #12293C; --dourado: #E8B341; --dourado-forte: #E8B341; --dourado-fundo: rgba(232,179,65,.14); --amarelo-principal: #E8B341; --amarelo-hover: #D5A233; --amarelo: #E8B341; --verde-medio: #5CCDAC; --verde-claro: #5CCDAC; --verde-bg: rgba(92,205,172,.16); --verde: #5CCDAC; --vermelho-alerta: #E58A7F; --vermelho-claro: rgba(229,138,127,.14); --laranja-aviso: #E8B341; --laranja-claro: rgba(232,179,65,.14); --azul-claro: #6BB0F0; --sidebar-bg: #081F33; --sidebar-texto: #DCE8F3; --sidebar-texto-fraco: #7FA0C0; --sidebar-borda: rgba(255,255,255,.10); --sidebar-hover: rgba(255,255,255,.08); --sidebar-ativo-bg: #12365C; --sidebar-ativo-texto: #FFFFFF; --sidebar-icone: #7FA0C0; --sidebar-icone-ativo: #E8B341; --sombra: none; --sombra-md: 0 18px 46px -16px rgba(0,0,0,.60); --sombra-lg: 0 40px 80px -30px rgba(0,0,0,.70); } html[data-tema="escuro"] body { background: var(--cinza-fundo); color: var(--preto-contorno); } /* A marca NUNCA vai marinho sobre fundo escuro: no escuro usa-se a versão vazada. Onde o HTML tiver , esta regra troca o arquivo sozinha. */ html[data-tema="escuro"] .logo-napoleao { content: url('/img/logo-napoleao-escuro.svg'); }