/* Tema escuro do painel da demo. Liga com (demo/tema.js decide: a escolha guardada; sem
escolha, claro. "Igual ao sistema", no perfil, segue o prefers-color-scheme). Aqui só se redefinem tokens; as cores do painel já leem deles.
A barra lateral, a faixa e a barra do celular já são noite nos dois temas.
A vitrine (#/loja) continua clara: é a loja como a cliente dela vê, com a marca da loja, não a preferência do dono. */
:root[data-tema="escuro"] {
color-scheme: dark;
/* papel vira noite; o fundo da página fica um tom acima da lateral, para ela continuar se destacando */
--paper: #162124;
--paper-2: #0F181A;
--paper-3: #202D30;
--ink: #E6ECEB;
--ink-2: #AEB9BB;
--ink-3: #97A3A5; /* 6,3:1 no cartão, 5,1:1 no trilho mais claro */
--hair: rgba(255,255,255,.09);
--hair-2: rgba(255,255,255,.16);
--ring: 0 0 0 1px rgba(255,255,255,.07);
--teal-ink: #45CDD1; /* texto pequeno em teal: 8,5:1 no cartão */
--teal-soft: #123538;
--pos: #6BCB93; --neg: #F2907C; --warn: #E4B96E;
--shadow-frame: 0 40px 120px -40px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.3);
--info: #7FD0D3; --info-bg: #12302F; --cinza-bg: #243033;
--tinta-rgb: 255 255 255;
--tinta2-rgb: 255 255 255;
--teal-ink-rgb: 69 205 209;
--fundo-rgb: 15 24 26;
--papel-rgb: 22 33 36;
--sup-1: #1A2528; --sup-2: #1D292C; --sup-3: #243235;
--barra: #34423F; --barra-2: #3B4A48; --barra-hover: #5B6E6C;
--trilho: #3A4749;
--estrela-vazia: #3A4442;
--pos-bg: #173326; --warn-bg: #3A2D17; --neg-bg: #3C211C; --neg-barra: #8E4A40;
--bolha-bg: #1A2F22; --bolha-ink: #E4F2E5;
--dica-ink: #BDEBEC;
--ink-hover: #C9D3D2;
--roxo: #A9A5D6;
--no-teal: #04201F;
--no-neg: #2A0F0A; /* texto sobre botão de perigo (--neg claro): 7,7:1; branco daria 2,3:1 */
}
/* componentes do design system com cor fixa de papel */
:root[data-tema="escuro"] .btn-primary:hover { background: var(--ink-hover); }
:root[data-tema="escuro"] .btn-secondary:hover { border-color: rgba(255,255,255,.28); }
:root[data-tema="escuro"] .tag-ok { background: var(--pos-bg); }
:root[data-tema="escuro"] .tag-warn { background: var(--warn-bg); }
:root[data-tema="escuro"] .tag-bad { background: var(--neg-bg); }
/* a faixa é noite nos dois temas: o botão branco dela mantém o texto escuro */
:root[data-tema="escuro"] .faixa-btn.forte, :root[data-tema="escuro"] .faixa-btn.forte:hover { color: #0B0F10; }
/* o canal Assinatura é quase preto (COR_CANAL em app.js): no escuro, um cinza claro para o ponto e a barra aparecerem */
:root[data-tema="escuro"] .corpo [style*="#0B0F10"], :root[data-tema="escuro"] .dlg [style*="#0B0F10"] { background: #C3CDCC !important; }
:root[data-tema="escuro"] .toast { box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); }
:root[data-tema="escuro"] .dlg::backdrop { background: rgba(0,0,0,.6); }
/* a vitrine volta ao papel claro (os tokens herdados são os do claro) */
:root[data-tema="escuro"] body.modo-loja {
color-scheme: light;
--paper: #FFFFFF; --paper-2: #F6F6F4; --paper-3: #ECECE9;
--ink: #0B0F10; --ink-2: #5C6670; --ink-3: #646E76;
--hair: rgba(11,15,16,.08); --hair-2: rgba(11,15,16,.14); --ring: 0 0 0 1px rgba(11,15,16,.06);
--teal-ink: #007578; --teal-soft: #E4F1F1;
--pos: #2E7D4F; --neg: #B3402B; --warn: #8A5A12;
--fundo: #F6F6F4; --cartao: #FFFFFF;
--info: #0F5E63; --info-bg: #E4F1F1; --cinza-bg: #EDEDEA;
--tinta-rgb: 0 0 0; --tinta2-rgb: 11 15 16; --teal-ink-rgb: 0 117 120; --fundo-rgb: 246 246 244; --papel-rgb: 255 255 255;
--sup-1: #FAFAF8; --sup-2: #F4F5F3; --sup-3: #EDF0EF;
--barra: #D8DEDD; --barra-2: #C9D6D4; --barra-hover: #9FB2B1; --trilho: #CDD3D3; --estrela-vazia: #E3E1DC;
--pos-bg: #E6F0E4; --warn-bg: #F7EDDD; --neg-bg: #F3E1DD; --neg-barra: #F0B8B1;
--bolha-bg: #EFF6EC; --bolha-ink: #1F3326; --dica-ink: #0B4E52; --ink-hover: #242B2E; --roxo: #6C6897; --no-teal: #fff; --no-neg: #fff;
}
/* ---------- a chave claro/escuro ---------- */
.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: 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: 0 0 0 1px rgb(var(--tinta2-rgb) / .26); }
.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; }
@media (max-width: 720px) { .tema-bt { width: 36px; height: 36px; } }
/* escolha de tema com três opções (no perfil) */
.tema-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--hair); }
.tema-seg button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: var(--w-medium); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.tema-seg button svg { width: 15px; height: 15px; }
.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); }