/* ============================================================ LE CROQUE — modo noturno (dark) Ativado por [data-theme="dark"] no (via theme.js). ESTRATEGIA: remapeia tokens de TEXTO (so-foreground) e o --creme-claro (so-fundo) para tons escuros; MANTEM --vinho/--creme/--dourado (marca) intactos — as secoes vinho e os botoes vinho+creme ja ficam bem no escuro. Overrides pontuais nas superficies #fff/creme e nos titulos que usam vinho como texto. Nada aqui renomeia/remove regra existente: e 100% aditivo. ============================================================ */ :root[data-theme="dark"] { /* tokens de TEXTO (sempre foreground) -> claros */ --texto: #ecdcc9; --texto-suave: #b3a08c; --suave: #b3a08c; --muted: #b09a83; --chocolate: #f0e3d3; --choco: #f0e3d3; /* --creme-claro e usado so como fundo -> escuro */ --creme-claro: #211712; /* hairlines claros sobre escuro */ --line: rgba(240, 226, 210, .14); --linha: rgba(240, 226, 210, .14); /* card um tom ACIMA do fundo da pagina p/ elevacao perceptivel */ --card: #2a1e17; color-scheme: dark; } /* ---- fundo base da pagina (--creme e #fff cravados como superficie) ---- */ :root[data-theme="dark"] body { background: #191110; } :root[data-theme="dark"] .linha, :root[data-theme="dark"] .visite { background: #191110; } :root[data-theme="dark"] .sobre, :root[data-theme="dark"] .eventos, :root[data-theme="dark"] .sazonal, :root[data-theme="dark"] .social { background: #130d0b; } /* header translucido claro -> escuro */ :root[data-theme="dark"] .site-header { background: rgba(25, 17, 16, .92); border-bottom-color: rgba(240, 226, 210, .1); } :root[data-theme="dark"] .nav { background: #191110; } /* menu mobile off-canvas */ /* ---- superficies brancas/creme -> escuras (cards, paineis, inputs) ---- */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .cardapio-card, :root[data-theme="dark"] .evt-publico, :root[data-theme="dark"] .symbol-card, :root[data-theme="dark"] .topbar, :root[data-theme="dark"] .login, :root[data-theme="dark"] .tool, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .tablewrap, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .pv-card, :root[data-theme="dark"] .pv-opt.sel, :root[data-theme="dark"] .pchip, :root[data-theme="dark"] .fpanel, :root[data-theme="dark"] .fkpi, :root[data-theme="dark"] .cm-card, :root[data-theme="dark"] .cm-kpi, :root[data-theme="dark"] .kb-card, :root[data-theme="dark"] .cm-chartbox, :root[data-theme="dark"] .cm-tabs button, :root[data-theme="dark"] .cm-chip, :root[data-theme="dark"] .cm-sort, :root[data-theme="dark"] .cm-copy, :root[data-theme="dark"] .cm-recompra, :root[data-theme="dark"] .cm-searchbar input, :root[data-theme="dark"] .cm-field input, :root[data-theme="dark"] .cm-field select { background: #2a1e17; border-color: rgba(240, 226, 210, .14); } :root[data-theme="dark"] .kb-col { background: #1f1610; border: 1px solid rgba(240, 226, 210, .06); } /* linha de grupo da DRE (financeiro) tinha #faf3ea cravado -> tint escuro */ :root[data-theme="dark"] table.dre tr.grp td { background: #322418; border-bottom-color: rgba(240, 226, 210, .12); color: #f3e2ce; } /* barra de comparativo (fundo da trilha) */ :root[data-theme="dark"] .cmp .bar { background: rgba(240, 226, 210, .10); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus { background: #322419; } /* selects genericos (ferramentas internas novas, ex. fechamento) */ :root[data-theme="dark"] select { background: #2a1e17; border-color: rgba(240, 226, 210, .14); color: #ecdcc9; } :root[data-theme="dark"] select:focus { background: #322419; } /* ---- titulos/labels que usam --vinho como TEXTO -> clarear (--vinho segue vinho para FUNDOS de botao/secao) ---- */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, /* h3 tinha ficado fora: gestao.css:12 pinta h1,h2,h3 de vinho, mas so h1 e h2 estavam cobertos aqui. Media 1,65:1 de contraste no escuro (ilegivel) em TODA subsecao de /gestao — fechamento, financeiro, vendas-dia, conselho. */ :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] .fin-head h1, :root[data-theme="dark"] .fin-head .big b, :root[data-theme="dark"] .topbar .ttl, :root[data-theme="dark"] .cm-title, :root[data-theme="dark"] .cm-nm, :root[data-theme="dark"] .cm-sec h2, :root[data-theme="dark"] .cm-kpi .n, /* .cm-kpi .n (KPI do comercial) estava aqui, mas o .kpi .v — o KPI GENERICO do gestao.css, usado por admin/financeiro/pedidos/vendas-dia/conselho — nao. Media 1,43:1: o numero grande, que e a razao de existir do cartao, era o elemento menos legivel da tela. */ :root[data-theme="dark"] .kpi .v, :root[data-theme="dark"] .total-row .tv, :root[data-theme="dark"] .cm-val, :root[data-theme="dark"] .cm-col .t, :root[data-theme="dark"] .kb-t, :root[data-theme="dark"] .kb-nm, :root[data-theme="dark"] .mg-txt, :root[data-theme="dark"] .cm-chartt, :root[data-theme="dark"] .cm-modal h2, :root[data-theme="dark"] .vip-stats b, :root[data-theme="dark"] .price, :root[data-theme="dark"] .card-cta, :root[data-theme="dark"] .cardapio-info strong, :root[data-theme="dark"] .evt-tipos span, :root[data-theme="dark"] .contato-list a { color: #f3e2ce; } /* links/hover e botoes-fantasma que viram vinho no claro -> alinhar a familia marfim/dourado (o rosa #e7b7c2 destoava do creme e do dourado). Assim os ghost/links parecem parte do tema quente, nao um roxo-frio avulso. */ :root[data-theme="dark"] .nav a:hover, :root[data-theme="dark"] .hq, :root[data-theme="dark"] .pchip, :root[data-theme="dark"] .btn.ghost, :root[data-theme="dark"] .btn-ghost-dark, :root[data-theme="dark"] .cm-copy, /* link de texto dentro do conteudo: gestao.css:13 pinta todo de vinho. Excluidos os que ja tem tratamento proprio (botao, card do hub, voltar). */ :root[data-theme="dark"] .wrap a:not(.btn):not(.tool):not(.back-link), :root[data-theme="dark"] .cm-recompra { color: #e6c98f; } :root[data-theme="dark"] .btn.ghost, :root[data-theme="dark"] .btn-ghost-dark { border-color: rgba(217, 169, 92, .38); } :root[data-theme="dark"] .pchip { border-color: rgba(217, 169, 92, .30); } /* chips de filtro / ordenacao / busca do comercial usavam --vinho como TEXTO (invisivel sobre card escuro, 1.4:1). -> texto claro. Ativos ficam vinho/ouro. */ :root[data-theme="dark"] .cm-chip, :root[data-theme="dark"] .cm-sort, :root[data-theme="dark"] .cm-tabs button { color: #d9c3ab; } :root[data-theme="dark"] .cm-searchbar input, :root[data-theme="dark"] .cm-field input, :root[data-theme="dark"] .cm-field select { color: #ecdcc9; } :root[data-theme="dark"] .price { color: #f3e2ce !important; } /* style.css usa !important aqui */ /* banner de aviso do comercial tinha cor de texto escura cravada (#6b4e22) */ :root[data-theme="dark"] .cm-banner { color: #e9d8c2; } /* CTA "Meta de reativacao VIP": gradiente cravava #fff no topo (glara branco). -> gradiente escuro tingido de dourado, borda dourada mantida (marca). */ :root[data-theme="dark"] .cm-meta-goal { background: linear-gradient(180deg, rgba(217, 169, 92, .12), rgba(42, 30, 23, .96)) !important; border-color: rgba(217, 169, 92, .42) !important; } :root[data-theme="dark"] .mg-txt { color: #f3e2ce; } :root[data-theme="dark"] .cm-modal .cm-frow { border-color: rgba(240, 226, 210, .1); } /* ============================================================ PILULAS / CHIPS / BANNERS — inverter a logica no escuro Claro: fundo CLARO + texto escuro colorido (viram "adesivos"). Escuro: fundo ESCURO tingido (dark tint) + texto CLARO colorido, mantendo a cor semantica (vermelho=alerta, verde=ok, dourado/ambar= aviso, neutro=cinza-quente). Todos os textos >=4.5:1 sobre o tint (medido sobre card #2a1e17 e pagina #191110). !important porque as regras-fonte moram em