/* ============================================================
   TOKENS — o unico arquivo deste projeto que contem VALOR de cor,
   tamanho ou espaco. Componente e tela referenciam variavel, nunca hex.
   Trocar a paleta inteira do sistema = editar so este arquivo.

   Decisao do Joao em 03/09/2026: claro, limpo, funcional, diferente do site.
   O site e escuro (--ot-bg #101010) porque vende. Isto e ferramenta que o time
   abre dez vezes por dia: densidade e legibilidade acima de tudo.
============================================================ */

:root {
  /* --- cor: superficie e texto ------------------------------------------ */
  --fundo:        #FFFFFF;   /* fundo de tudo                               */
  --texto:        #000000;   /* 21:1 sobre o fundo                          */
  --texto-apoio:  #5A5A5A;   /* rotulo, legenda, metadado — 6,9:1           */
  --borda:        #E4E4E4;   /* separacao de cartao e linha de tabela       */
  --realce:       #F5F5F5;   /* linha sob o cursor, cabecalho de tabela     */

  /* --- cor: acao --------------------------------------------------------
     E o --ot-accent-on-light do design system da marca. O #03BD96 do manual
     NAO pode ser usado aqui: sobre branco da 2,41:1 e reprova em qualquer
     criterio. Este da 5,3:1, e branco sobre ele tambem da 5,3:1 — entao
     botao verde com letra branca passa. */
  --acao:         #017A61;
  --acao-hover:   #01614D;
  --sobre-acao:   #FFFFFF;

  /* --- cor semantica ---------------------------------------------------
     Separada da cor de marca de proposito: se tudo for verde, nada chama
     atencao. Todas passam 4,5:1 sobre branco. */
  --erro:         #C62828;   /* 5,6:1 — falha, conflito de duplicata        */
  --alerta:       #97540A;   /* 5,9:1 — parado ha muito tempo, pendencia    */
  --neutro:       #5A5A5A;   /* estagio sem carga (novo, perdido)           */
  --positivo:     #017A61;   /* comprou — reusa a cor de acao               */

  /* --- forma -----------------------------------------------------------
     Raio de 6px. A pilula da landing page e linguagem de marketing; em campo
     de formulario e linha de tabela ela desperdica largura e atrapalha o
     alinhamento vertical. */
  --raio:         6px;
  --raio-pequeno: 4px;

  /* --- espaco: grade de 8px -------------------------------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  /* --- tipografia ------------------------------------------------------
     Pilha do sistema no corpo, nao Poppins: carrega instantaneamente, sem
     requisicao externa, e renderiza numero e tabela melhor que uma geometrica.
     A Noxlock saiu de vez: a marca do cabecalho virou o simbolo em imagem, entao
     nao havia mais nada usando a fonte — e ela continuava sendo baixada, 30 KB
     por visita, para nada. O arquivo segue em assets/ se um dia voltar a fazer
     falta; o @font-face e uma linha.
     Se preferir Poppins para continuidade de marca, troque --fonte aqui. */
  --fonte:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --t-corpo:      15px;  --lh-corpo:  22px;
  --t-apoio:      13px;  --lh-apoio:  18px;
  --t-rotulo:     12px;  --lh-rotulo: 16px;
  --t-titulo:     20px;  --lh-titulo: 26px;

  /* --- alvo de toque ---------------------------------------------------
     44px no celular. Densidade nao pode custar o dedo. No desktop a linha de
     tabela cai para 32px, onde existe cursor. */
  --toque:        44px;
  --linha-desk:   32px;
}