/* Vitrine (versão neutra), rodada noturna de 12/11/2026: cores e letra da Boito por cima da marca do cliente.
   Só é carregado no endereço da vitrine (worker/vitrine.ts injeta este arquivo). Contrastes medidos:
   texto #1F1C18 sobre branco 16,6:1 · #4F4A42 8,6:1 · #655F56 6,2:1 · ação #7F5F1C com texto branco 6,0:1 ·
   menu: branco sobre #26221D 15,6:1 · #D9D2C6 sobre #26221D 11,3:1 · anel de foco #E2BF73 sobre #26221D 9,4:1. */
@font-face { font-family: "Plus Jakarta Sans"; src: url(/marca/fonte-boito.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
html:root, html:root[data-theme="light"] {
  --fonte-ui: "Plus Jakarta Sans";
  --marca-principal: #1F1C18;  --marca-secundaria: #7F5F1C;  --marca-fundo: #F4F2EE;
  --mesa: #F4F2EE;  --folha: #FFFFFF;  --sf-2: #F8F6F2;  --sf-3: #EFEBE4;
  --linha: #E9E4DB;  --linha-forte: #D9D2C6;  --borda-campo: #8C857A;
  --tx: #1F1C18;  --tx-2: #4F4A42;  --tx-3: #655F56;
  --acc: #7F5F1C;  --acc2: #1F1C18;  --acc-aresta: #6A4F17;  --acc-tinta: #7F5F1C;  --acc-sobre: #FFFFFF;
  --acc-suave: #F3ECDD;  --acc-suave-2: #EADFC8;  --acc-halo: rgba(193, 154, 75, .30);
  --mono-fundo: #1F1C18;  --mono-letra: #E2BF73;
  --el-1: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(31, 28, 24, .05), 0 10px 24px -14px rgba(31, 28, 24, .22);
  --el-2: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 5px rgba(31, 28, 24, .06), 0 20px 44px -20px rgba(31, 28, 24, .30);
  --veu: rgba(16, 14, 11, .50);  --vidro: rgba(244, 242, 238, .8);
  --e1: #7F5F1C; --e2: #1F1C18; --e3: #A88A4F; --e4: #6E6553; --e5: #C19A4B; --e6: #4F4A42; --e7: #9C9384; --e8: #3D3A35;
}
html:root[data-theme="dark"] {
  --mesa: #100E0B;  --folha: #1A1713;  --sf-2: #221E19;  --sf-3: #2B2620;
  --linha: #3A342C;  --linha-forte: #4F473C;  --borda-campo: #8C857A;
  --tx: #F6F2EA;  --tx-2: #C9C2B4;  --tx-3: #A39B8C;
  --acc: #C19A4B;  --acc2: #E2BF73;  --acc-aresta: #C19A4B;  --acc-sobre: #231C0E;  --acc-tinta: #E2BF73;
  --acc-suave: #2A2318;  --acc-suave-2: #352C1D;  --acc-halo: rgba(226, 191, 115, .30);
  --mono-fundo: #E2BF73;  --mono-letra: #1F1C18;
  --e1: #E2BF73; --e2: #C9C2B4; --e3: #C19A4B; --e4: #A39B8C; --e5: #F0D9A8; --e6: #8C857A; --e7: #D9D2C6; --e8: #6E6553;
}
/* menu da esquerda e gaveta do celular: o grafite da Boito no lugar do petróleo do cliente */
.menu {
  --mesa: #1F1C18;  --folha: #26221D;  --sf-2: #302B25;  --sf-3: #3A342C;
  --linha: #3A342C;  --linha-forte: #4F473C;
  --tx: #FFFFFF;  --tx-2: #D9D2C6;  --tx-3: #B8B0A2;
  --acc: #C19A4B;  --acc-tinta: #E2BF73;  --acc-suave: rgba(226, 191, 115, .14);
  background: #26221D linear-gradient(180deg, #2B2620, #1A1713) !important;
}
@media (max-width: 899px) { .app > .menu.mn.aberto { background: #26221D linear-gradient(180deg, #2B2620, #1A1713) !important; } }
.mn-marca:focus-visible, .mn-tres:focus-visible { box-shadow: 0 0 0 2px #E2BF73 !important; }
.mn-mod:focus-visible, .mn-gr:focus-visible { box-shadow: inset 0 0 0 2px #E2BF73 !important; }
.mn-gr.on { color: #1F1C18 !important; box-shadow: inset 3px 0 0 #C19A4B !important; }
.mn-gr.on i { color: #4F4A42 !important; }
.mn-pessoa .av { background: #EADFC8 !important; color: #1F1C18 !important; }
/* entrada: a coluna da marca no grafite, com os blocos assentados em dourado bem apagado */
.bl-marca { background: linear-gradient(160deg, #2B2620 0%, #1F1C18 55%, #15130F 100%) !important; color: #F6F2EA !important; }
.bl-marca::before { filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.9); }
.bl-bloco { background: #C19A4B !important; box-shadow: inset 0 0 0 1px #E2BF73 !important; }
.bl-logo, .mn-marca img, .topo .logo-topo { aspect-ratio: 1416 / 336 !important; object-fit: contain; }
/* no celular a coluna da marca é estreita: a logo inteira ficaria ilegível, então aparece só o selo (o pedaço da esquerda), em 64 px */
@media (max-width: 960px) { .bl-logo { width: 64px !important; height: 64px !important; aspect-ratio: 1 / 1 !important; object-fit: cover; object-position: left center; } }
/* "Como Funciona" dentro do app (public/marca/vitrine.js): rodapé da entrada, menu lateral e barra do topo do celular */
.vt-como {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: 8px;
  background: linear-gradient(180deg, #CDA75A, #C19A4B); color: #231C0E; border: 1px solid #A47E33;
  font: 700 14px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; text-decoration: none; white-space: nowrap;
}
.vt-como:hover { filter: brightness(1.04); }
.vt-como:focus-visible { outline: 2px solid #E2BF73; outline-offset: 3px; }
.vt-entrada { margin: 0 auto 12px; }
.vt-menu { margin: 8px 16px 0; }
.vt-topo { margin-left: auto; min-height: 36px; padding: 6px 12px; font-size: 13px; flex: 0 0 auto; }
@media (max-width: 560px) { .vt-topo { display: none; } }
.vt-aviso { margin: 0; font-size: 13px; line-height: 20px; color: #D9D2C6; }
.bl-nome .vt-aviso .vt-aviso-t { display: inline; font-size: 13px; line-height: 20px; color: #E2BF73; font-weight: 700; letter-spacing: 0; }
@media print { .vt-como { display: none; } }