/* =============================================================
   INTEGRATOR HOST — PORTAL DO CLIENTE
   TOKENS — a fonte unica do desenho

   Este arquivo so declara variaveis. Nao ha nenhuma regra de
   componente aqui, e isso e proposital: assim ele pode ser
   carregado por QUALQUER tela, inclusive as de pre-login, sem
   risco de mudar layout nenhum.

   Era esse o problema que ele resolve. As quatro telas de
   pre-login (login, forgot, reset, verificacao) nao carregam o
   custom.css, entao vinham redeclarando --ig-primary no proprio
   <style>. Cor de marca escrita em cinco lugares e cor de marca
   que uma hora diverge - e ja divergiu.

   QUEM CARREGA O QUE
     - telas internas: custom.css (que faz @import deste arquivo)
     - telas de pre-login: este arquivo direto, e mais nada

   SOBRE AS UNIDADES
   As escalas estao em px, e nao em rem, porque o html deste
   projeto fixa font-size: 14.5px. Com essa base, rem nao cai em
   valores redondos (12px seriam 0.828rem) e ninguem acerta isso
   de cabeca ao dar manutencao. O portal tambem nao tem controle
   de tamanho de fonte, entao nao ha o que preservar. Zoom de
   navegador (Ctrl +) continua funcionando normalmente: ele
   escala px tambem.
   ============================================================= */

:root {

  /* ---------------------------------------------------------
     MARCA
     #25006b e o roxo institucional. Contraste 16.3:1 com branco,
     o que o torna utilizavel como fundo de superficie grande.
     --------------------------------------------------------- */
  --ig-primary: #25006b;
  --ig-primary-600: #34108f;
  --ig-primary-700: #1c0052;
  --ig-primary-soft: #f1ecfb;
  --ig-primary-ring: rgba(37, 0, 107, .18);

  /* Superficies */
  --ig-bg: #f5f7fb;
  --ig-card: #ffffff;
  --ig-line: #e6e9f0;
  --ig-line-strong: #d6dbe6;

  /* Texto */
  --ig-text: #16203a;
  --ig-text-soft: #4a5568;
  --ig-muted: #6b7280;

  /* ---------------------------------------------------------
     STATUS
     Os tons `-ink` existem para TEXTO sobre o `-soft`
     correspondente. Usar o tom base (--ig-success e irmaos) como
     cor de texto sobre fundo claro reprova em contraste: o verde
     #16a34a da 3.1:1 no branco. O -ink e a versao que passa.
     --------------------------------------------------------- */
  --ig-success: #16a34a;
  --ig-success-soft: #e8f7ee;
  --ig-success-ink: #0a7a31;
  --ig-danger: #dc2626;
  --ig-danger-soft: #fdeaea;
  --ig-danger-ink: #b02020;
  --ig-warning: #f59e0b;
  --ig-warning-soft: #fff5e0;
  --ig-warning-ink: #92610a;
  --ig-info: #3b82f6;
  --ig-info-soft: #e8f1fe;
  --ig-info-ink: #1d4ed8;

  /* ---------------------------------------------------------
     SIDEBAR
     Era #0f172a - ardosia. Uma cor que nao tem nada a ver com a
     marca ocupando a maior superficie continua de toda tela do
     portal, em todas as telas.

     Agora deriva do roxo. Os tons de texto sao levemente
     violeta em vez de cinza-azulado, porque cinza-azulado sobre
     roxo aparenta sujeira.

     OS TONS FORAM CLAREADOS depois de ver o menu funcionando.
     Estavam em #c9bce2 (9,1:1) e #a495c4 (5,9:1) - numeros que
     passam na regra e mesmo assim liam mal. Contraste minimo e
     piso de legibilidade, nao alvo de conforto: 4,5:1 e o ponto
     em que o texto deixa de ser ilegivel, nao o ponto em que fica
     bom. Sobre fundo escuro a diferenca aparece mais, porque o
     texto claro sobre escuro ja perde peso aparente.

     Contrastes medidos sobre #25006b:
       texto do item   #e2daf0 -> 12,0:1
       rotulo de grupo #b9a8e0 ->  7,5:1
       item ativo      #ffffff -> 12,3:1 (sobre o realce)
     --------------------------------------------------------- */
  /* DERIVA de --ig-primary, e nao repete o valor.

     Antes estava escrito `#25006b` aqui - o mesmo hex do login, mas
     escrito de novo. Dois lugares com o mesmo valor nao sao um valor
     so: sao dois valores que por enquanto coincidem. Trocar a cor da
     marca em um e esquecer o outro e questao de tempo, e foi
     exatamente o que aconteceu com a versao anterior deste arquivo.

     Assim, o painel roxo do login e a lateral do portal nao TEM como
     divergir: e a mesma variavel, lida uma vez. */
  --ig-sidebar-bg: var(--ig-primary);
  --ig-sidebar-hover: rgba(255, 255, 255, .07);
  --ig-sidebar-active: rgba(255, 255, 255, .12);
  --ig-sidebar-accent: #b9a8f0;
  --ig-sidebar-text: #e2daf0;
  --ig-sidebar-text-active: #ffffff;
  --ig-sidebar-label: #b9a8e0;
  --ig-sidebar-line: rgba(255, 255, 255, .10);

  /* ---------------------------------------------------------
     TIPOGRAFIA — 6 tamanhos
     O portal tinha 38 tamanhos diferentes espalhados. Isso nao e
     hierarquia, e ruido: com 38 degraus nenhum degrau significa
     nada. Seis bastam para tudo que estas telas mostram.
     --------------------------------------------------------- */
  --ig-fs-xs: 12px;    /* rotulo, legenda, pilula de status      */
  --ig-fs-sm: 14px;    /* texto de apoio, celula de tabela       */
  --ig-fs-md: 16px;    /* corpo, nome do item                    */
  --ig-fs-lg: 20px;    /* valor em destaque, titulo de cartao    */
  --ig-fs-xl: 28px;    /* titulo da tela                         */
  --ig-fs-2xl: 40px;   /* numero grande, unico por tela          */

  --ig-lh-tight: 1.2;  /* titulos e numeros                      */
  --ig-lh: 1.5;        /* corpo                                  */

  /* ---------------------------------------------------------
     PESOS — 3
     Estavam usando 700 em tudo que era titulo (46 ocorrencias) e
     400 uma unica vez. Quando tudo e negrito, nada se destaca; a
     hierarquia tem que vir do tamanho e do espaco, nao do peso.
     --------------------------------------------------------- */
  --ig-fw: 400;         /* corpo                                 */
  --ig-fw-medium: 500;  /* enfase, nome, valor                   */
  --ig-fw-bold: 600;    /* titulo - 600, nao 700                 */

  /* ---------------------------------------------------------
     ESPACAMENTO — 7 degraus
     Eram 19 valores distintos. Multiplos de 4 a partir daqui,
     que e o que faz alinhamento parecer intencional em vez de
     aproximado.
     --------------------------------------------------------- */
  --ig-sp-1: 4px;
  --ig-sp-2: 8px;
  --ig-sp-3: 12px;
  --ig-sp-4: 16px;
  --ig-sp-5: 24px;
  --ig-sp-6: 32px;
  --ig-sp-7: 48px;

  /* ---------------------------------------------------------
     FORMA E ELEVACAO
     Havia 14 raios e 19 sombras no projeto. Tres de cada.
     --------------------------------------------------------- */
  --ig-radius-sm: 6px;
  --ig-radius: 10px;
  --ig-radius-lg: 14px;

  --ig-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --ig-shadow: 0 6px 18px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --ig-shadow-lg: 0 14px 38px rgba(16, 24, 40, .10);

  /* Transicao padrao */
  --ig-t: .18s ease;

  /* Familia */
  --ig-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}