/* ========================================================================= PG-TOKENS-V1 — Fundacao de tokens do design system do pagalee.gestor ------------------------------------------------------------------------- Paleta "Clinical Precision" (MDC/MIA), trazida do Nutritec.Web/wwwroot/app.css sem alteracao de valores. Fonte unica da verdade para cor no portal. REGRAS DE USO 1. Consuma SEMPRE via var(--cp-*). Nao repita hex em pagina/componente. 2. Paginas que ainda tem os antigos --pg-* devem apenas RE-APONTAR o alias local para var(--cp-*) (ex.: --pg-primary: var(--cp-primary)). Assim a migracao e incremental e o blast radius fica contido. 3. Cor semantica (success/warning/danger/info) e SINAL, nao decoracao. 4. Data-viz CATEGORICO: use --cp-viz-1..8 NESTA ORDEM (sequencia segura p/ daltonismo). Para escala ORDENADA (1o > 2o > 3o...) use --cp-ramp-1..5, que e outra coisa: viz nao tem ordem, ramp tem. DARK MODE: o bloco :root[data-theme="dark"] abaixo esta escrito e pronto, porem INTENCIONALMENTE INERTE — nao existe toggle e nada carimba data-theme no . Nao ativar sem aprovacao do Marcio. ========================================================================= */ :root { /* Marca MDC/MIA — indigo -> violeta */ --cp-primary: #2d3fcc; --cp-primary-deep: #24329e; /* hover/ativo */ --cp-on-primary: #ffffff; --cp-accent: #5b3fff; /* violeta — assinatura MDC */ --cp-periwinkle: #8fa0ff; /* destaque de texto (headline) */ --cp-gradient: linear-gradient(90deg, #2d3fcc 0%, #5b3fff 100%); --cp-gradient-text: linear-gradient(90deg, #8fa0ff, #b7a6ff); /* ---- [pg-tokens-on-primary] (19/07/2026): TINTA SOBRE GRADIENTE ---- --cp-on-primary ESCURECE no dark (ver bloco dark), porque --cp-primary e --cp-accent CLAREIAM la: viram tinta, e tinta clara pede fundo escuro. Mas --cp-gradient e --cp-gradient-text sao hex FIXOS — nao mudam entre os temas, continuam escuros no dark. Quem escreve em cima deles precisa seguir BRANCO nos dois temas, senao o texto some. Sao dois consumidores com necessidade OPOSTA no mesmo token; por isso o par proprio. Vale tambem para qualquer fundo que NAO acompanha o tema: --cp-sidebar (escuro nos dois) e cor vinda do DADO (swatch de categoria). Regra geral: FUNDO que nao muda com o tema pede TINTA que nao muda. */ --cp-on-gradient: #ffffff; /* Semanticas — cor = sinal de seguranca (nao decorar com elas) */ --cp-success: #1f8a4c; --cp-warning: #b06a00; /* ambar-ocre, nao amarelo puro */ --cp-danger: #c62828; /* canal EXCLUSIVO de erro/risco */ --cp-info: #0069c0; --cp-violet: #7c5cff; /* Data-viz — sequencia segura p/ daltonismo (usar nesta ordem) */ --cp-viz-1: #2d3fcc; --cp-viz-2: #00b4d8; --cp-viz-3: #8f7bff; --cp-viz-4: #e07a3f; /* Superficies e texto — TEMA CLARO (padrao) */ --cp-bg: #fbfaff; --cp-surface: #ffffff; --cp-surface-2: #f1f0fb; --cp-primary-soft: #e9ebfb; --cp-line: #e5e3f0; --cp-ink: #1a1d2e; --cp-heading: #24329e; --cp-muted: #5c6288; --cp-faint: #9a9ec0; --cp-input-bg: #ffffff; --cp-input-border: #d7d5ea; --cp-shadow: 0 1px 3px rgba(20, 24, 60, .08); --cp-shadow-lg: 0 8px 20px rgba(20, 24, 60, .12); /* Sidebar / topbar */ --cp-sidebar: linear-gradient(180deg, #2d3fcc 0%, #3b2fb0 100%); --cp-sidebar-brand: rgba(0, 0, 0, .18); --cp-nav: rgba(255, 255, 255, .85); --cp-nav-hover: rgba(255, 255, 255, .12); --cp-nav-active-bg: rgba(255, 255, 255, .22); --cp-nav-sec: rgba(255, 255, 255, .55); --cp-topbar: #ffffff; /* ---- PG-TOKENS-V7 (19/07/2026): TOPBAR DE MARCA ---- O layout ADMIN (PainelAdmin) pinta a MudAppBar com a cor da marca e poe texto/icone BRANCO por cima. Ele usava --cp-primary direto, o que quebra no dark: la --cp-primary vira #7b8bff (indigo CLARO, escolhido para ser LEGIVEL SOBRE fundo escuro) e a barra viraria clara com texto branco. --cp-primary e cor de TINTA no dark; topbar de marca e cor de FUNDO. Sao papeis opostos, logo precisam de token proprio. No claro o valor e EXATAMENTE o mesmo --cp-primary de hoje (#2d3fcc): zero mudanca visual. Nao usar em botao/icone/link — para isso continua valendo --cp-primary. */ --cp-topbar-brand: #2d3fcc; --cp-on-topbar-brand: #ffffff; /* ---- PG-TOKENS-V2 (19/07/2026): papeis que faltavam p/ a migracao das paginas ---- Levantados no piloto de padronizacao (docs/PADRAO-CORES.md). Sao 7 tokens, de proposito: cada um cobre um papel que aparecia repetido em dezenas de telas e que NAO tinha token, obrigando a pagina a cravar hex. --cp-hover : um degrau ABAIXO de --cp-surface-2. Existe porque as telas usam dois niveis de lavagem (fundo de controle x hover do mesmo controle). Colapsar os dois no mesmo token APAGA o feedback de hover — nao unificar. *-soft/*-ink: par de fundo e texto de bloco semantico (chip, badge, faixa de aviso). O -ink e escurecido para passar contraste AA sobre o -soft. Use sempre o par; nunca --cp-success como texto sobre --cp-success-soft (contraste insuficiente). Nao existe par para INFO: o uso real de "info" no portal e sempre a familia da marca, ja coberta por --cp-primary-soft + --cp-heading. Se aparecer demanda real, cria-se o par na mesma forma. */ --cp-hover: #e9e8f6; --cp-success-soft: #e6f4ec; --cp-success-ink: #14663a; --cp-warning-soft: #fdf1de; --cp-warning-ink: #8a5200; --cp-danger-soft: #fdeaea; --cp-danger-ink: #9b1f1f; /* ================= PG-TOKENS-V5 (19/07/2026) ================= Consolidacao da migracao de cores: papeis que a leva 1 encontrou e que o contrato de tokens NAO cobria. Os agentes pararam e reportaram em vez de cravar hex; estes tokens fecham essas lacunas. Ver docs/PADRAO-CORES.md. (a) ESCALA CATEGORICA 5..8 ------------------------------------------- --cp-viz-1..4 nao davam conta de tres telas reais: 9 formas de pagamento (CaixaDetalheDialog), 8 series de grafico (Faturamento) e o rosa de "Feminino" no CRM. A escala vai a 8, mantendo 1..4 INTACTOS (ja estao em producao) e continuando a ordem segura p/ daltonismo — cada novo degrau muda hue E luminancia em relacao ao anterior. Os quatro novos foram escolhidos escuros o bastante para servir de FUNDO de chip com icone/texto BRANCO por cima (contraste >= 4.5:1 sobre branco): viz-5 #d6336c ~ 4.6:1 | viz-6 #0d8175 ~ 4.8:1 viz-7 #437d1b ~ 5.0:1 | viz-8 #6d28d9 ~ 7.1:1 viz-7 e um verde OLIVA de proposito: precisa ser visivelmente diferente de --cp-success (#1f8a4c) para nao ser lido como "sinal de sucesso". viz-8 e roxo profundo, longe da lavanda palida do viz-3. REGRA: viz-* sao cores de PREENCHIMENTO. Quando uma cor categorica precisa carregar TEXTO sobre fundo claro/tingido, use a variante -ink. Hoje so o rosa tem consumidor real (badge de sexo, KPI e chip do CRM), entao so o viz-5 ganhou -ink. Os demais se criam na mesma forma quando houver demanda — nao improvise um hex escuro na pagina. */ --cp-viz-5: #d6336c; /* rosa/magenta */ --cp-viz-6: #0d8175; /* teal */ --cp-viz-7: #437d1b; /* verde oliva */ --cp-viz-8: #6d28d9; /* roxo profundo */ --cp-viz-5-ink: #a81a5c; /* rosa como TEXTO (~7:1 sobre branco) */ /* (b) RAMPA SEQUENCIAL MONOCROMATICA ---------------------------------- Debito antigo (PADRAO-CORES §3.3/§4.4): barras de "Top Produtos" usavam uma escala indigo de 5 degraus cravada na pagina porque nao existia token. viz-* NAO serve aqui: viz e CATEGORICO (cores sem ordem), a rampa e SEQUENCIAL (o degrau 1 significa "maior que" o degrau 2). Ancorada em --cp-primary e clareando; use sempre do 1 para o 5, na ordem. */ --cp-ramp-1: #2d3fcc; --cp-ramp-2: #5566db; --cp-ramp-3: #7d8be7; --cp-ramp-4: #a5aff1; --cp-ramp-5: #ced3f8; /* (c) SUPERFICIE INVERTIDA (bloco de codigo) --------------------------- O

 de JSON/payload e claro-sobre-escuro. Mapea-lo para
       --cp-ink + --cp-on-primary funciona no tema claro mas INVERTE no dark
       (texto branco sobre fundo branco). Precisa de par proprio, que no dark
       permanece escuro-com-texto-claro em vez de inverter. */
    --cp-code-bg: #0f172a;
    --cp-code-ink: #e2e8f0;

    /* (d) HOVER DOS CANAIS SEMANTICOS -------------------------------------
       Mesma logica do --cp-hover para as superficies neutras: um botao com
       repouso *-soft precisa de um degrau MAIS FORTE no :hover. Colapsar os
       dois no mesmo token apaga o feedback — e regressao funcional.
       Consumidor real hoje: so o danger (botao Cancelar do TransmissaoLote).
       success/warning entram por simetria do canal, prontos para uso. */
    --cp-success-soft-hover: #d3ebdd;
    --cp-warning-soft-hover: #f9e4c4;
    --cp-danger-soft-hover: #f9d5d5;

    /* (e) PODIO (ouro / prata / bronze) -----------------------------------
       Excecao consciente a "cor e do design system": aqui a cor E a semantica.
       Ouro/prata/bronze e uma metafora literal de 1o/2o/3o lugar — recolorir
       para a familia da marca destruiria o significado. Por isso, ao contrario
       do resto da migracao, estes tokens PRESERVAM os valores originais.

       Sao STOPS, nao gradientes prontos: as duas telas que os usam tem angulos
       diferentes (135deg na medalha, 90deg na barra de share). Mesma regra do
       --cp-gradient: troque os stops, preserve o angulo. */
    --cp-medal-gold-1: #fbbf24;
    --cp-medal-gold-2: #d97706;
    --cp-medal-silver-1: #d1d5db;
    --cp-medal-silver-2: #6b7280;
    --cp-medal-bronze-1: #fb923c;
    --cp-medal-bronze-2: #c2410c;

    /* ---- Extensoes do portal (nao existem no Nutritec) ---- */
    --cp-font: 'Rubik', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cp-radius: 10px;
    --cp-radius-sm: 8px;

    /* ================= PG-TOKENS-V6 (19/07/2026): ESCALA TIPOGRAFICA =========
       Ver docs/PADRAO-TIPOGRAFIA.md. A familia (Rubik, --cp-font) NAO muda —
       o problema era tamanho/peso/consistencia.

       Origem: o portal tinha ~60 valores distintos de font-size (10px, 10.5px,
       11px, 11.5px, 12px, 12.5px, 13px, 13.5px, .68rem, .72rem, .74rem, .78rem,
       .82rem, .93rem ...). Diferencas de meio pixel que ninguem escolheu de
       proposito — sao sedimento de copiar-colar entre telas.

       A escala tem 8 DEGRAUS e cada degrau tem um PAPEL. Se o papel que voce
       precisa nao esta aqui, pare e proponha o token (mesma regra do PADRAO-CORES
       §1); nao crave "13.5px so nesta tela".

       Por que px e nao rem: o portal ja e todo px e MudBlazor tambem. Trocar a
       unidade agora muda o tamanho de TUDO de uma vez — e outra migracao, com
       outro risco. Aqui so unificamos os valores.

       Os dois degraus de topo sao CLAMP (fluidos) porque titulo de pagina e
       numero de KPI sao os unicos que precisam encolher no celular. ATENCAO ao
       escrever clamp: o valor do meio tem que ser FLUIDO (vw). clamp(1.5rem,
       2rem, 2rem) e um clamp DEGENERADO — resolve sempre 32px fixo e nunca
       encolhe. Era exatamente esse o bug de "Gerencia de Terminais" (32px fixo)
       contra "Demonstrativo de Faturamento" (30px, 22px no celular). */
    --cp-fs-display: clamp(22px, 4vw, 30px); /* titulo de PAGINA (h1). Um por tela.        */
    --cp-fs-kpi: clamp(20px, 3vw, 26px);     /* numero grande: valor de KPI, total herói.  */
    --cp-fs-xl: 18px;                        /* titulo de SECAO (h2) e titulo de dialog.   */
    --cp-fs-lg: 16px;                        /* titulo de CARD/bloco (h3).                 */
    --cp-fs-md: 14px;                        /* subtitulo de pagina, corpo enfatizado.     */
    --cp-fs-base: 13px;                      /* CORPO padrao: celula de tabela, paragrafo. */
    --cp-fs-sm: 12px;                        /* rotulo de campo, texto de apoio.           */
    --cp-fs-xs: 11px;                        /* legenda, badge, chip, overline, timestamp. */

    /* PESOS — o portal usava 400/500/600/700/800 sem criterio. Regra:
       titulo de pagina e numero de KPI = black; demais titulos = bold;
       rotulo/overline = semibold; apoio = medium; corpo = regular. */
    --cp-fw-regular: 400;
    --cp-fw-medium: 500;
    --cp-fw-semibold: 600;
    --cp-fw-bold: 700;
    --cp-fw-black: 800;

    /* ALTURA DE LINHA — so dois valores. Titulo e numero pedem linha curta
       (senao o bloco "descola"); texto corrido pede linha folgada p/ leitura. */
    --cp-lh-tight: 1.15;   /* titulos, KPI, qualquer coisa de 1-2 linhas */
    --cp-lh-normal: 1.45;  /* corpo, subtitulo, paragrafo               */

    /* TRACKING — titulo grande fecha; overline em CAIXA ALTA abre.
       Nao aplicar tracking negativo em texto pequeno: prejudica legibilidade. */
    --cp-track-tight: -0.02em;
    --cp-track-wide: 0.04em;

    /* ---- PG-DS-LOGIN-BLUE: identidade AZUL das telas publicas ----
       Escopo: telas fora do app autenticado (login e recuperacao de senha).
       Decisao do Marcio (19/07/2026): o violeta (--cp-accent) domina demais
       nessas telas; aqui a marca resolve so em azul. O gradiente vai do
       indigo profundo da marca ao azul aberto, sem passar pelo violeta.
       O app autenticado continua usando --cp-gradient (indigo -> violeta). */
    --cp-login-blue-deep: #1b2a8a;   /* ancora escura */
    --cp-login-blue: #2d3fcc;        /* = --cp-primary, mantem a marca */
    --cp-login-blue-bright: #2f7fe6; /* azul aberto, respiro do gradiente */
    --cp-login-gradient: linear-gradient(135deg, #1b2a8a 0%, #2d3fcc 52%, #2f7fe6 100%);
    --cp-login-gradient-bar: linear-gradient(90deg, #1b2a8a 0%, #2d3fcc 50%, #2f7fe6 100%);

    /* ---- V4 (19/07/2026): CAMPO AZUL de fundo ----
       Antes o fundo era branco (--cp-bg) tingido por dois halos azuis de
       ~17% de alpha — sobre branco isso praticamente sumia. Agora o fundo
       e azul de verdade e o card branco FLUTUA por cima (padrao classico
       de tela de login).

       Consequencias desta inversao:
       a) --cp-login-field e a base opaca da viewport (nao usar no card);
       b) os halos viraram luz CLARA por cima do azul; se voltarem a ser
          azul sobre branco, o efeito desaparece de novo;
       c) o card precisa de sombra propria e mais profunda para descolar
          do azul — --cp-login-card-shadow (a --cp-login-shadow continua
          servindo botao/brand-mark, que vivem DENTRO do card branco). */
    --cp-login-field: linear-gradient(135deg, #16217a 0%, #23319f 38%, #2d3fcc 68%, #2f7fe6 100%);
    --cp-login-field-solid: #23319f;   /* fallback opaco / cor de sangria */
    --cp-login-halo-1: rgba(255, 255, 255, .16);
    --cp-login-halo-2: rgba(126, 196, 255, .26);
    --cp-login-card-shadow: 0 26px 64px rgba(8, 14, 52, .42), 0 4px 12px rgba(8, 14, 52, .24);
    --cp-login-card-edge: rgba(255, 255, 255, .55);
    --cp-login-shadow: rgba(27, 42, 138, .28);
    --cp-login-shadow-strong: rgba(27, 42, 138, .38);
    --cp-login-overlay: rgba(11, 22, 74, .70);
}

/* ===== TEMA DARK (marca MDC/MIA — indigo profundo) =====
   ESCRITO MAS NAO ATIVADO. Nenhum elemento recebe data-theme="dark" hoje. */
:root[data-theme="dark"] {
    --cp-primary: #7b8bff;        /* indigo claro p/ contraste no dark */
    --cp-primary-deep: #9aa5ff;
    --cp-primary-soft: #1b2050;

    /* ---- [pg-tokens-on-primary] (19/07/2026) ----
       Aqui --cp-primary (#7b8bff) e --cp-accent (#8fa0ff) sao INDIGOS CLAROS:
       foram escolhidos para ser legiveis SOBRE fundo escuro. Logo, quando eles
       viram PREENCHIMENTO (botao primario, avatar, chip ativo), a tinta por cima
       tem de ser ESCURA. Branco sobre #7b8bff da 3,01:1 e sobre #8fa0ff da
       2,43:1 — reprova AA nos dois. Com #0b0f2c: 6,24:1 e 7,72:1.

       #0b0f2c nao e um valor novo: e o --cp-bg do dark e EXATAMENTE o que
       PagaleeTheme.PaletteDark ja usa em PrimaryContrastText. Ate aqui os dois
       trilhos do tema discordavam — botao MudBlazor com tinta escura, botao de
       CSS proprio com branco. Isto alinha os dois.

       Quem estava sobre GRADIENTE (que nao clareia) migrou para
       --cp-on-gradient; nao volte esses consumidores para ca. */
    --cp-on-primary: #0b0f2c;
    --cp-on-gradient: #ffffff;

    --cp-accent: #8fa0ff;         /* periwinkle — assinatura MIA */
    --cp-periwinkle: #b7a6ff;
    --cp-gradient: linear-gradient(90deg, #2d3fcc 0%, #5b3fff 100%);
    --cp-gradient-text: linear-gradient(90deg, #8fa0ff, #b7a6ff);

    --cp-success: #3ec77e;
    --cp-warning: #f0a93c;
    --cp-danger: #ff6b6b;
    --cp-info: #6ea8ff;
    --cp-violet: #b7a6ff;

    --cp-viz-1: #7b8bff;
    --cp-viz-2: #22c7e6;
    --cp-viz-3: #b7a6ff;
    --cp-viz-4: #f0995a;

    --cp-bg: #0b0f2c;
    --cp-surface: #12173a;
    --cp-surface-2: #161b40;
    --cp-line: #262c55;
    --cp-ink: #eef1f7;
    --cp-heading: #eef1f7;
    --cp-muted: #a6adcd;
    --cp-faint: #7b83ad;
    --cp-input-bg: #161b40;
    --cp-input-border: #262c55;
    --cp-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    --cp-shadow-lg: 0 10px 26px rgba(0, 0, 0, .55);

    --cp-sidebar: #080b22;
    --cp-sidebar-brand: rgba(0, 0, 0, .3);
    --cp-nav: #a6adcd;
    --cp-nav-hover: rgba(255, 255, 255, .05);
    --cp-nav-active-bg: linear-gradient(90deg, rgba(91, 63, 255, .28), transparent);
    --cp-nav-sec: #7b83ad;
    --cp-topbar: #12173a;

    /* PG-TOKENS-V7 no dark: a topbar de marca continua sendo FUNDO, entao ela
       ESCURECE (ao contrario de --cp-primary, que clareia por ser tinta).
       #101641 e um degrau ACIMA de --cp-sidebar (#080b22): encostados um no
       outro, drawer e appbar precisam ter uma aresta visivel, senao o shell
       vira um bloco preto sem hierarquia. Ainda assim e mais escuro/saturado
       que --cp-surface-2 (#161b40), para ler como CROMO da marca e nao como
       mais um card. Branco por cima da ~17:1 (bem acima de AAA). */
    --cp-topbar-brand: #101641;
    --cp-on-topbar-brand: #ffffff;

    /* PG-TOKENS-V2 no dark: a relacao se INVERTE — o -soft e um fundo escuro
       de baixa saturacao e o -ink e a cor clara legivel por cima dele. */
    --cp-hover: #1c2249;
    --cp-success-soft: #12301f;
    --cp-success-ink: #6fe0a4;
    --cp-warning-soft: #33240c;
    --cp-warning-ink: #f5c069;
    --cp-danger-soft: #3a1616;
    --cp-danger-ink: #ff9a9a;

    /* PG-TOKENS-V5 no dark (tambem INERTE) */

    /* Categoricas 5..8: sobem em luminancia para segurar contraste sobre o
       fundo escuro. O -ink do rosa CLAREIA (no dark ele e texto claro sobre
       tingido escuro), espelhando o que ja acontece com success/warning/danger. */
    --cp-viz-5: #ff7aa8;
    --cp-viz-6: #35c9b6;
    --cp-viz-7: #8fcf5a;
    --cp-viz-8: #b39aff;
    --cp-viz-5-ink: #ffa8c6;

    /* Rampa sequencial: no dark ela ESCURECE em vez de clarear, senao o degrau
       5 (o menor) viraria o mais chamativo da tela. */
    --cp-ramp-1: #7b8bff;
    --cp-ramp-2: #6674e0;
    --cp-ramp-3: #5260c2;
    --cp-ramp-4: #414da3;
    --cp-ramp-5: #333d85;

    /* Codigo: NAO inverte. E o unico par que atravessa os dois temas quase
       igual — e exatamente por isso que ele existe separado de ink/on-primary. */
    --cp-code-bg: #0a0e28;
    --cp-code-ink: #d8dcea;

    /* Hover dos canais semanticos: no dark o degrau vai para MAIS CLARO,
       acompanhando a inversao ja aplicada aos -soft acima. */
    --cp-success-soft-hover: #18402a;
    --cp-warning-soft-hover: #45300f;
    --cp-danger-soft-hover: #4c1d1d;

    /* Podio: o metal continua metal (a metafora nao tem tema), so ganha brilho
       para nao afundar no fundo escuro. */
    --cp-medal-gold-1: #fcd34d;
    --cp-medal-gold-2: #e08c10;
    --cp-medal-silver-1: #e5e7eb;
    --cp-medal-silver-2: #9ca3af;
    --cp-medal-bronze-1: #fdba74;
    --cp-medal-bronze-2: #e2601c;

    /* ================= PG-TOKENS-V7 — CONVERGENCIA COM O MUDBLAZOR =========
       O portal tem DOIS trilhos de cor e eles moram em lugares diferentes:
       os --cp-* vivem no NAVEGADOR (este arquivo, aplicado antes do primeiro
       paint) e a palette do MudBlazor vive no CIRCUITO (Themes/PagaleeTheme.cs,
       so existe depois que o SignalR conecta). O portal roda com
       prerender:false — ou seja, entre o HTML chegar e o circuito subir NAO HA
       MudThemingProvider nenhum, e o MudBlazor.min.css pinta tudo no claro.
       Resultado sem este bloco: flash BRANCO em toda navegacao no dark.

       As linhas abaixo adiantam, em CSS puro, as poucas variaveis do Mud que
       pintam AREA GRANDE. Os valores sao IDENTICOS aos de PaletteDark — nao ha
       divergencia possivel entre os dois trilhos; o que muda e so QUANDO cada
       um passa a valer. Como :root[data-theme="dark"] tem especificidade maior
       que o :root do Mud, este bloco tambem funciona como rede de seguranca se
       o estado do circuito atrasar em relacao ao do HTML.

       Ao mexer aqui, mexa TAMBEM em PagaleeTheme.PaletteDark. */
    --mud-palette-background: #0b0f2c;
    --mud-palette-background-grey: #161b40;
    --mud-palette-surface: #12173a;
    --mud-palette-appbar-background: #12173a;
    --mud-palette-appbar-text: #eef1f7;
    --mud-palette-drawer-background: #080b22;
    --mud-palette-drawer-text: #a6adcd;
    --mud-palette-text-primary: #eef1f7;
    --mud-palette-text-secondary: #a6adcd;
    --mud-palette-lines-default: #262c55;
    --mud-palette-table-lines: #262c55;
    --mud-palette-divider: #262c55;
}

/* PG-TOKENS-V7: o  so ganha cor quando o MudBlazor renderiza. Antes
   disso a pagina e branca. Esta regra existe SO no dark (o claro continua
   exatamente como estava) e e o que mata o flash branco de fato. */
:root[data-theme="dark"] body {
    background-color: var(--cp-bg);
    color: var(--cp-ink);
}