/* Tema dos sistemas do assessorIA (painel da equipe, sistema do cliente e blog): claro por padrão, escuro quando o
   sistema da pessoa é escuro ou quando ela escolhe no botão. O tema.js põe <html data-tema="claro|escuro"> antes da
   primeira pintura. As cores vão por papel (fundo, texto, título, botão), a fonte é uma só, e cada sistema usa só estas variáveis. */
/* Plus Jakarta Sans (licença OFL, em fontes/OFL.txt), variável de 200 a 800, só com os caracteres latinos */
@font-face { font-family: "Plus Jakarta Sans"; src: url("fontes/plus-jakarta-sans-latin-wght-normal.7660bd9909fb.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  color-scheme: light;
  /* a marca e o destaque são os mesmos nos dois temas. O âmbar não é cor de partido */
  --marinho: #0B2545; --marinho-claro: #163861; --ambar: #F2A93B; --papel: #FFFFFF;
  --fonte: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fundo: #FFFFFF; --superficie: #FFFFFF; --bruma: #EEF2F7; --linha: #DFE5EC; --borda-campo: #B9C3CF;
  --texto: #1B2433; --suave: #5A6578; --titulo: #0B2545; --link: #0B2545; --foco: #0B2545; --ambar-texto: #8A5A00;
  --botao: #0B2545; --botao-texto: #FFFFFF; --topo: #0B2545; --topo-link: #D3DDEA; --topo-botao: #FFFFFF;
  --ok: #1F6F43; --ok-fundo: #E6F2EA; --atencao: #8A5A00; --atencao-fundo: #FBF1DE;
  /* o topo é escuro nos dois temas, como a arte da entrada */
  --topo-texto: #FFFFFF; --topo-fraco: rgba(255, 255, 255, .08); --topo-borda: rgba(255, 255, 255, .16);
  /* o chão das telas por dentro, um tom abaixo da superfície, e a borda fina dos painéis */
  --chao: #F3F5F9; --borda: #E2E7EE; --elevada: #FFFFFF;
  --sombra: 0 1px 2px rgba(11, 37, 69, .05), 0 1px 1px rgba(11, 37, 69, .03);
  --sombra-alta: 0 24px 56px -18px rgba(11, 37, 69, .32), 0 2px 8px rgba(11, 37, 69, .08);
  /* o dado nos gráficos: a marca no claro, um azul aceso no escuro, e a escala de cinco tons do menos ao mais */
  --dado: #1D4F8F; --dado-fundo: #E4EAF2; --grade: rgba(11, 37, 69, .1);
  --escala-1: #DCE6F2; --escala-2: #A9C2E0; --escala-3: #6F96C8; --escala-4: #3A67A4; --escala-5: #133A6B;
  /* o texto que se lê em cima de cada tom da escala */
  --sobre-1: #0B2545; --sobre-2: #0B2545; --sobre-3: #0B2545; --sobre-4: #FFFFFF; --sobre-5: #FFFFFF;
  --selecao: rgba(242, 169, 59, .32);
  /* o esqueleto da tela que está chegando, com o brilho que passa por cima */
  --esqueleto: rgba(90, 101, 120, .12); --brilho: rgba(255, 255, 255, .75);
  /* movimento: a curva que chega rápido e assenta, e a padrão do tema */
  --chega: cubic-bezier(.22, 1, .36, 1); --padrao: cubic-bezier(.4, 0, .2, 1);
}
[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0B1526; --superficie: #111F35; --bruma: #172A45; --linha: #22385A; --borda-campo: #3A557D;
  --texto: #E3EAF3; --suave: #9FB1C7; --titulo: #F3F6FA; --link: #A8C7EC; --foco: #F2A93B; --ambar-texto: #F2A93B;
  --botao: #F2A93B; --botao-texto: #0B1526; --topo: #07101F; --topo-link: #B8C7DA; --topo-botao: #E3EAF3;
  --ok: #6BD69F; --ok-fundo: rgba(107, 214, 159, .13); --atencao: #F4C46F; --atencao-fundo: rgba(242, 169, 59, .14);
  --chao: #0A1323; --borda: #1D3150; --elevada: #152742;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-alta: 0 28px 64px -16px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .3);
  --dado: #79A7E0; --dado-fundo: #1A2C48; --grade: rgba(168, 199, 236, .12);
  --escala-1: #1B3050; --escala-2: #24497B; --escala-3: #3A6BAB; --escala-4: #6797D3; --escala-5: #B4D0F0;
  --sobre-1: #E3EAF3; --sobre-2: #F3F6FA; --sobre-3: #FFFFFF; --sobre-4: #07101F; --sobre-5: #07101F;
  --selecao: rgba(242, 169, 59, .3);
  --esqueleto: rgba(159, 177, 199, .11); --brilho: rgba(220, 232, 247, .07);
}

/* o botão de luz: o sol no tema claro, a lua no escuro, trocando com giro (como no padrão dos sistemas do Falcão) */
.tema-botao { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; transition: background .2s; }
.tema-botao:hover { background: rgba(127, 127, 127, .14); }
.tema-botao:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.tema-botao svg { position: absolute; width: 19px; height: 19px; transition: opacity .22s cubic-bezier(.4, 0, .2, 1), transform .22s cubic-bezier(.4, 0, .2, 1); }
.tema-botao .lua, [data-tema="escuro"] .tema-botao .sol { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-tema="escuro"] .tema-botao .lua { opacity: 1; transform: none; }

/* a troca de tema revela a página nova num círculo que cresce a partir do clique (tema.js). Sem o esmaecer padrão */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
.trocando-tema * { view-transition-name: none !important; }