/* ===========================================================================
   Radar DJEN, tokens de tema.

   Nenhum valor solto no resto do CSS: tudo sai daqui.

   COR. A interface e quase sem cor de proposito, e a cor fica reservada para
   o SIGNIFICADO: vermelho e vencido, ambar e hoje, verde e resolvido. Esse e
   o truque que faz produto caro parecer caro. Encher de cor e de gradiente
   faz o contrario, e ainda por cima e a assinatura de tela feita por IA.

   O azul institucional existe em pouquissimos lugares: botao primario, foco,
   e a etiqueta "por lei". Ele nao pinta a estrutura.

   NEUTRO. Cinza FRIO, nao bege. A versao anterior usava #f7f6f3, cor de
   papel, e era o que mais estava envelhecendo a tela: lia como cartorio, nao
   como software. Um pouco de azul no cinza faz ele parecer escolhido.

   ACABAMENTO. Sobrio nao e ausencia de acabamento. Uma versao anterior zerou
   raio, elevacao e icone e o resultado pareceu HTML sem estilo. O que da
   acabamento sem virar enfeite: raio de 13px constante, UMA sombra de duas
   camadas curtas, e hover que levanta 1px.
   =========================================================================== */
:root{
  /* --- neutros: cinza frio, nao bege ------------------------------------ */
  --c-fundo:      #f4f5f7;
  --c-superficie: #ffffff;
  --c-superficie-2:#fafbfc;  /* campo de formulario dentro do cartao */
  --c-realce:     #eef0f3;   /* hover em area sem cartao */
  --c-tinta:      #14171c;   /* nunca preto puro: cansa em leitura longa */
  --c-tinta-2:    #545c66;
  /* 4.5 de contraste sobre a superficie E sobre o fundo. O #858e99 de
     antes dava 3.04 sobre o fundo, e ele pinta seis coisas que a pessoa
     precisa ler: numero do processo, quantos dias correram, etiqueta de
     dias, subtitulo do grupo, rotulo dos numeros e o rodape. */
  --c-tinta-3:    #66707c;
  --c-borda:      #e4e7eb;
  --c-borda-2:    #d3d8de;
  --c-borda-3:    #aab2bc;

  /* --- institucional: so botao primario, foco e etiqueta ---------------- */
  --c-inst:       #2f5fe0;
  --c-inst-2:     #2450c8;
  --c-inst-fraco: #eef3ff;
  /* Texto que fica SOBRE a cor institucional. No tema escuro a institucional
     e um azul CLARO, entao branco em cima dela da contraste 1.87 e some.
     La embaixo ela vira tinta escura. */
  --c-sobre-inst: #ffffff;

  /* --- status: cor com significado, e so ------------------------------- */
  --c-risco:      #c8342a;   /* venceu */
  --c-risco-fraco:#fdeeec;
  --c-alerta:     #a35a00;   /* vence hoje ou amanha */
  --c-alerta-fraco:#fff4e2;
  --c-ok:         #17703c;   /* resolvido */
  --c-ok-fraco:   #e9f6ee;

  /* --- tipografia -------------------------------------------------------- */
  /* Sem serif. Ele estava dizendo "documento", e o produto precisa dizer
     "produto". Sem fonte externa tambem: o CSP nao libera dominio de fonte,
     e a stack de sistema em Windows 11 e Mac ja e moderna. */
  --f-corpo: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display",
             "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-titulo: var(--f-corpo);
  --f-mono:  ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,
             "Liberation Mono",monospace;

  --t-1: 11px;   /* rotulo em caixa alta */
  --t-2: 13px;
  --t-3: 14px;
  --t-4: 15px;
  --t-5: 16px;   /* corpo */
  --t-6: 19px;
  --t-7: 26px;
  --t-8: 29px;

  --lh-apertado: 1.2;
  --lh-normal:   1.5;
  --lh-leitura:  1.62;   /* teor da publicacao, que e texto longo */

  --ls-rotulo: .09em;    /* caixa alta pequena precisa de respiro */
  --ls-titulo: -.022em;  /* titulo grande precisa do contrario */

  /* --- espaco: escala de 4 ---------------------------------------------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* --- acabamento -------------------------------------------------------- */
  --raio:    13px;
  --raio-p:  9px;
  --raio-pp: 6px;
  --pilula:  20px;
  --traco:   1.75;       /* espessura do traco dos icones */
  --icone:   17px;
  --icone-p: 14px;

  /* Duas camadas curtas, nao uma difusa: sombra larga borra e suja o fundo. */
  --sombra:   0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --sombra-2: 0 6px 16px rgba(16,24,40,.10), 0 2px 5px rgba(16,24,40,.06);

  /* --- estrutura --------------------------------------------------------- */
  /* O painel e um QUADRO de colunas, nao um texto: ele quer largura, porque
     cada coluna a mais de espaco vira nome de vara que cabe na linha em vez
     de ser cortado. Com 1120px sobravam 800px de margem numa tela de 1920,
     quase metade da tela vazia, e as colunas ficavam espremidas a toa.
     O teto de 1760 existe para nao virar uma faixa de ponta a ponta em
     monitor grande, onde o olho perde a linha entre uma coluna e outra. */
  /* Com DUAS colunas, 1760 deixaria cada uma com 870px: largo demais para
     uma linha de nome de vara, e o olho perde o comeco da proxima. 1400 da
     uns 690px por coluna, que e onde o nome cabe sem virar faixa. */
  --largura:    1400px;
  --col-data:   58px;
  --col-status: 132px;
  --toque:      44px;
  --transicao:  150ms cubic-bezier(.4,0,.2,1);
}

/* O tema escuro precisa existir em DOIS lugares: no media query, para quem
   deixa o sistema decidir, e no [data-theme], para quem aperta o botao. Sem
   o segundo, o botao nao muda nada para quem esta no claro. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-fundo:      #0c0e12;
    --c-superficie: #15181e;
    --c-superficie-2:#1a1e25;
    --c-realce:     #1f242c;
    --c-tinta:      #f0f2f5;
    --c-tinta-2:    #a6afba;
    --c-tinta-3:    #7b838e;
    --c-borda:      #252a33;
    --c-borda-2:    #333a45;
    --c-borda-3:    #4b545f;
    --c-inst:       #7ba2ff;
    --c-inst-2:     #9dbaff;
    --c-inst-fraco: #16203a;
    --c-sobre-inst: #0b1020;
    --c-risco:      #ff9c92;
    --c-risco-fraco:#2c1614;
    --c-alerta:     #f0b45e;
    --c-alerta-fraco:#2a1e0d;
    --c-ok:         #6ed394;
    --c-ok-fraco:   #0f2418;
    --sombra:       0 1px 2px rgba(0,0,0,.45);
    --sombra-2:     0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"]{
  --c-fundo:      #0c0e12;
  --c-superficie: #15181e;
  --c-superficie-2:#1a1e25;
  --c-realce:     #1f242c;
  --c-tinta:      #f0f2f5;
  --c-tinta-2:    #a6afba;
  --c-tinta-3:    #7b838e;
  --c-borda:      #252a33;
  --c-borda-2:    #333a45;
  --c-borda-3:    #4b545f;
  --c-inst:       #7ba2ff;
  --c-inst-2:     #9dbaff;
  --c-inst-fraco: #16203a;
  --c-sobre-inst: #0b1020;
  --c-risco:      #ff9c92;
  --c-risco-fraco:#2c1614;
  --c-alerta:     #f0b45e;
  --c-alerta-fraco:#2a1e0d;
  --c-ok:         #6ed394;
  --c-ok-fraco:   #0f2418;
  --sombra:       0 1px 2px rgba(0,0,0,.45);
  --sombra-2:     0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}

@media (prefers-reduced-motion: reduce){
  :root{--transicao:1ms linear}
}