/* Tema escuro do painel da demo. Liga com (tema.js decide: a escolha guardada; sem escolha,
igual ao sistema). Aqui só se redefinem os tokens de demo.css; todo o painel já lê deles. A faixa é noite nos
dois temas; a barra lateral, a folha do celular e a barra de baixo são papel no claro e voltam à noite aqui.
O escuro é o da torra: papel vira café, o cobre do grão fica mais claro para ser lido sobre ele.
Desde 29/09 é a noite do preview da home (#0e0a07 de fundo, #17110b no cartão): mais contraste para os números. */
:root[data-tema="escuro"] {
color-scheme: dark;
--paper: #17110b;
--paper-2: #0e0a07;
--paper-3: #221910;
--ink: #f2eae0;
--ink-2: #c4b6a6;
--ink-3: #a89886; /* 5,8:1 no cartão */
--hair: rgba(244, 237, 227, .09);
--hair-2: rgba(244, 237, 227, .17);
--accent-ink: #f2a061; /* texto em cobre: 8,6:1 no cartão */
--accent-soft: #2e1d10;
--verde: #86b390;
--pos: #7fcf9b; --neg: #f39a86; --warn: #e6bd6f;
--info: #9cb8e2; --info-bg: #1c2636;
--cinza-bg: #221910;
--pos-bg: #16301f; --warn-bg: #3a2c14; --neg-bg: #3e2019;
--barra: #3a2c20; --barra-hover: #8a6c50;
--sup-1: #1b140e;
--foco: #f2a061;
--ring: 0 0 0 1px var(--hair), 0 1px 2px rgba(0, 0, 0, .3);
--no-ink: #15100c;
--ink-hover: #d9cfc3;
--tinta-rgb: 244 237 227;
--fundo-rgb: 14 10 7;
--dica-ink: #f6d4b5;
--cobre-bg: #e08744; --cobre-ink: #1a0e05; --cobre-hover: #f2a061;
--pos-bg-2: #15261b;
--etq-bg: #fbf8f4; --etq-ink: #15100c; /* a etiqueta e o QR são papel: continuam claros */
--sombra: rgba(0, 0, 0, .55);
}
/* o que tem cor própria e precisa de outra tinta no escuro */
:root[data-tema="escuro"] .sel,
:root[data-tema="escuro"] .form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b6a6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); }
:root[data-tema="escuro"] .faixa-btn.forte, :root[data-tema="escuro"] .faixa-btn.forte:hover { color: #15100c; }
:root[data-tema="escuro"] .kpi-link:hover { box-shadow: 0 0 0 1px var(--accent), 0 14px 28px -18px rgba(0, 0, 0, .7); }
:root[data-tema="escuro"] .gav-caixa { box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .8), -1px 0 0 var(--hair); }
:root[data-tema="escuro"] .gav-fundo, :root[data-tema="escuro"] .folha-fundo { background: rgba(0, 0, 0, .6); }
:root[data-tema="escuro"] .toast { background: #221910; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8), 0 0 0 1px var(--hair); }
:root[data-tema="escuro"] .tcard.alta { box-shadow: 0 0 0 1px rgba(243, 154, 134, .4), 0 12px 30px -22px rgba(0, 0, 0, .8); }
:root[data-tema="escuro"] .linha-svg .area { fill: rgba(242, 160, 97, .14); }
:root[data-tema="escuro"] .dec-it.aprovada { box-shadow: inset 0 0 0 1px rgba(127, 207, 155, .35); }
:root[data-tema="escuro"] .btn-perigo { box-shadow: inset 0 0 0 1px rgba(243, 154, 134, .4); }
/* No noite o fundo é quase preto (#0e0a07): a lateral e a barra de baixo sobem um tom (o dos cartões) e fazem sombra
sobre a página. Só a sombra não bastava, porque sombra não aparece sobre fundo mais escuro que ela (SIT-37). */
:root[data-tema="escuro"] .lateral { background: #17110b; box-shadow: 6px 0 28px -6px rgba(0, 0, 0, .9); z-index: 5; }
:root[data-tema="escuro"] .barra { background: rgba(23, 17, 11, .97); box-shadow: 0 -6px 28px -6px rgba(0, 0, 0, .9); }
/* o canal Clube é marrom-escuro (COR_CANAL em nucleo.js): no escuro, um caramelo para o ponto e a barra aparecerem */
:root[data-tema="escuro"] .corpo [style*="#7A4B2A"], :root[data-tema="escuro"] .gaveta [style*="#7A4B2A"] { background: #b98357 !important; }
:root[data-tema="escuro"] img { color-scheme: normal; }
/* a vitrine volta ao papel claro: os tokens herdados são os do claro, e os que derivam deles são declarados de novo */
:root[data-tema="escuro"] body.modo-especial {
color-scheme: light;
--paper: #ffffff; --paper-2: #f7f3ee; --paper-3: #ede6dc;
--ink: #15100c; --ink-2: #5e554c; --ink-3: #685f56;
--hair: rgba(21, 16, 12, 0.09); --hair-2: rgba(21, 16, 12, 0.16);
--accent-ink: #9a4a14; --accent-soft: #fbeadb; --verde: #6f9a78;
--pos: #2e7d4f; --neg: #b3402b; --warn: #8a5a12;
--info: #3F5F8A; --info-bg: #E6ECF4; --cinza-bg: #EFEAE3;
--pos-bg: #E4EFE6; --warn-bg: #F7EBD8; --neg-bg: #F6E0DA;
--barra: #E3D6C7; --barra-hover: #CDB59B; --sup-1: #FBF8F4; --foco: #C9702F;
--no-ink: #fff; --ink-hover: #33261b; --tinta-rgb: 21 16 12; --fundo-rgb: 247 243 238; --dica-ink: #5c2f10;
--cobre-bg: #9a4a14; --cobre-ink: #fff; --cobre-hover: #7e3b0f; --pos-bg-2: #f6faf7; --etq-bg: #fff; --etq-ink: #15100c; --sombra: rgba(21, 16, 12, .18);
--fundo: var(--paper-2); --cartao: var(--paper);
--ring: 0 0 0 1px var(--hair), 0 1px 2px rgb(var(--tinta-rgb) / .04);
}
/* ---------- a chave claro/escuro do topo ---------- */
.tema-bt { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair-2); transition: color var(--d-xs) var(--e-ui), box-shadow var(--d-xs) var(--e-ui); }
.tema-bt:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgb(var(--tinta-rgb) / .3); }
.tema-bt svg { width: 18px; height: 18px; }
.tema-bt .i-sol { display: none; }
:root[data-tema="escuro"] .tema-bt .i-lua { display: none; }
:root[data-tema="escuro"] .tema-bt .i-sol { display: block; }
/* escolha de tema com três opções (no perfil e em Configurações) */
.tema-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); max-width: 100%; }
.tema-seg button { height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tema-seg button:hover { color: var(--ink); }
.tema-seg button svg { width: 15px; height: 15px; flex: none; }
.tema-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--hair); }
:root[data-tema="escuro"] .tema-seg button[aria-pressed="true"] { background: var(--paper-3); }