/* Conta Ovos — tokens de tema (claro/escuro). Substitui o antigo night_view.css, que era uma folha de ~300 linhas de !important keyed em nomes de classe legados (herança do fork do cardsrealm). O problema daquele modelo: qualquer classe nova era invisível para ele, então componente novo simplesmente não adaptava ao modo escuro. Aqui a cor mora num token; quem usa var(--surface) já nasce funcionando nos dois modos. COMO O TEMA É ESCOLHIDO 1. [data-theme="dark"] / [data-theme="light"] no — escolha explícita do usuário, gravada em localStorage("contaovos-theme") e aplicada antes do primeiro paint pelo script inline em head.html. 2. Sem escolha gravada, vale prefers-color-scheme do sistema operacional. O :not([data-theme="light"]) no bloco de mídia é o que permite o usuário forçar claro mesmo com o SO em escuro. ESTE ARQUIVO NÃO CARREGA A COR DA MARCA As cinco cores por tenant (g.website_color_1..5) continuam vindo do Jinja, não daqui — um arquivo estático no CDN é servido igual para todos os domínios e não tem como saber a marca de cada site (ver CLAUDE.md, seção Colors). Se precisar de um token de marca, defina-o inline no template:
E não decomponha esse valor em rgba()/color-mix(): ele vem do banco e o formato não é garantido. Para um tom mais escuro use filter: brightness(). */ :root { color-scheme: light; /* Fundo listrado da página (body/html) */ --page-stripe-a: #fff; --page-stripe-b: #eee3; --page-stripe-c: #fff; /* Superfícies */ --surface: #fff; /* cartões, painéis, .background_white, .card_div */ --surface-alt: #eee; /* faixas laterais, .div_right, .background_side_padding */ --surface-raised: #222; /* barras escuras que são escuras nos DOIS modos */ --field-bg: #fff; /* input, select, textarea */ --field-text: #333; /* Texto */ --text: #212529; --text-strong: #322340; --text-muted: #555; --text-soft: #666; /* Traços */ --border: rgba(115, 123, 137, .25); --border-strong: #ccc; /* Ícones monocromáticos servidos como imagem (.fa/.fas/.far e afins). Em SVG novo prefira stroke/fill="currentColor" e ignore este token. */ --icon-invert: 0; --link: #5692f6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --page-stripe-a: #111; --page-stripe-b: #111d; --page-stripe-c: #111c; --surface: #111; --surface-alt: #111; --surface-raised: #222; --field-bg: #444; --field-text: #fff; --text: #fff; --text-strong: #fff; --text-muted: #eee; --text-soft: #ddd; --border: #555; --border-strong: #aaa; --icon-invert: 1; --link: #8ab4ff; /* Tokens da documentação da API (valores claros em templates/api/style.html). O seletor tem especificidade (0,2,0) e vence o :root (0,1,0) de lá independentemente da ordem de carga — é por isso que os claros podem continuar morando no template. */ --api-surface: #1b2030; --api-surface-alt: #232838; --api-border: #333a4d; --api-text: #eef1f7; --api-text-muted: #a3acc2; --api-badge-ok: #4ade80; --api-badge-warn: #fb923c; } } :root[data-theme="dark"] { color-scheme: dark; --page-stripe-a: #111; --page-stripe-b: #111d; --page-stripe-c: #111c; --surface: #111; --surface-alt: #111; --surface-raised: #222; --field-bg: #444; --field-text: #fff; --text: #fff; --text-strong: #fff; --text-muted: #eee; --text-soft: #ddd; --border: #555; --border-strong: #aaa; --icon-invert: 1; --link: #8ab4ff; --api-surface: #1b2030; --api-surface-alt: #232838; --api-border: #333a4d; --api-text: #eef1f7; --api-text-muted: #a3acc2; --api-badge-ok: #4ade80; --api-badge-warn: #fb923c; } /* --------------------------------------------------------------------------- Regras que dependem só de token. O resto da adaptação está no styles.css e no bloco