/* ═══════════════════════════════════════════════════════════════════════════ sirius-themes.css — camada canônica de cores da aplicação ═══════════════════════════════════════════════════════════════════════════ Fonte única de verdade das cores. Todas as telas (site.css, QuerySystem.css, DatabaseSchema.css, DatabaseHealth.css, Profile.css, …) derivam as próprias variáveis destes tokens --sr-*, então trocar o tema aqui repinta a aplicação inteira — inclusive as telas embutidas em iframe pelo Query Studio. Como funciona ───────────── 1. SEEDS (~22 cores): o que um tema realmente define e o que a tela Temas edita. Ficam em [data-sirius-theme=""]. 2. DERIVADOS: tudo o mais (ramps do acento, bordas, sombras, gradientes, linhas de grid). Declarados a partir dos seeds, nunca por tema. 3. POLARIDADE: [data-sirius-polarity="dark"|"light"] escolhe a DIREÇÃO dos derivados (clarear vs. escurecer). É o que faz um mesmo acento funcionar como texto legível nos dois tipos de fundo. Os seletores são de ATRIBUTO (e não html[…]) de propósito: além do , qualquer elemento pode carregar um par tema+polaridade e repintar só a sua subárvore. É assim que a galeria da tela Temas mostra cada card já na cara do próprio tema, sem JS pintando nada. Por isso os derivados também são declarados em [data-sirius-theme]: substituição de custom property acontece no elemento em que a declaração vale, então sem redeclarar ali o card herdaria as bordas/sombras do tema do , não as do tema dele. Este arquivo é carregado ANTES do CSS da tela (ver _Layout.cshtml) e o theme-engine.js, também no , define os atributos data-sirius-* antes da primeira pintura — sem flash de tema errado. Temas customizados do usuário entram como [data-sirius-theme="user:"] via