/* ============================================================
   Painel NIA · tokens
   Única fonte de cor, tipo, espaço, raio, borda, sombra e movimento.
   Componentes e telas usam só var(--...). Nenhum valor solto fora daqui.
   Tema claro em :root. Tema escuro em [data-tema="escuro"], ligado por tema.js
   (segue o aparelho até a pessoa escolher).
   ============================================================ */
/* ---- Fontes: IBM Plex (licença SIL OFL), arquivos locais em ./fontes ----
   Nada vem da internet. Sem os arquivos, cai na fonte do sistema. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: local("IBM Plex Sans"), local("IBMPlexSans"), url("fontes/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"), url("fontes/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"), url("fontes/IBMPlexSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: local("IBM Plex Mono"), local("IBMPlexMono"), url("fontes/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"), url("fontes/IBMPlexMono-Medium.woff2") format("woff2"); }

:root {
  /* ---- Marca (NIA) ---- */
  --cor-primaria:             #044A5A; /* teal NIA. Substitui o azul provisório #2f5bea */
  --cor-primaria-hover:       #06596C;
  --cor-primaria-pressionada: #033B49;
  --cor-primaria-suave:       #E2EBEE; /* fundo de item selecionado e aviso informativo */
  --cor-sobre-primaria:       #FFFFFF; /* texto em cima da primária */
  --cor-titulo:               #00072A; /* navy NIA: títulos e números de destaque */

  /* ---- Capa (topo navy de cada tela) ---- */
  --cor-capa:          #00072A; /* navy NIA, sólido, sem degradê */
  --cor-capa-texto:    #FFFFFF;
  --cor-capa-suave:    rgba(255, 255, 255, 0.68); /* 9:1 sobre navy */
  --cor-capa-linha:    rgba(255, 255, 255, 0.14);
  --cor-capa-barra:    rgba(255, 255, 255, 0.26); /* colunas do histórico */
  --cor-prata:         #C0C0C0; /* acento metálico NIA: rótulos sobre navy */
  --cor-capa-erro:     #F29A90;
  --cor-capa-sucesso:  #7FD3A6;
  --cor-capa-alerta:   #E9B866; /* dado antigo dentro da capa */

  /* ---- Neutros (4 cinzas no lugar de 6) ---- */
  --cor-fundo:          #F0F5F7; /* atrás dos blocos */
  --cor-superficie:     #FFFFFF; /* blocos, topo, menu, modal */
  --cor-superficie-alt: #E2EBEE; /* trilho das abas, esqueleto, tag neutra */
  --cor-texto:          #1C2733;
  --cor-texto-suave:    #5A6B72; /* rótulos, fontes, notas */
  --cor-linha:          #D2DDE1; /* divisórias e borda de bloco */
  --cor-linha-campo:    #7D8E95; /* borda de campo: 3:1 sobre branco */
  --cor-linha-forte:    #1C2733; /* linha de total da tabela */
  --cor-desativado:       #9AA6AB;
  --cor-desativado-fundo: #E2EBEE;
  --cor-moldura:        #D2DDE1; /* fora do app, em tela larga */

  /* ---- Estado ---- */
  --cor-sucesso:        #1E7A52;
  --cor-sucesso-fundo:  #E4F3EB;
  --cor-alerta:         #8A5800;
  --cor-alerta-fundo:   #FFF1D6;
  --cor-erro:           #A8322B;
  --cor-erro-hover:     #8F2A24;
  --cor-erro-fundo:     #FDE3E3;
  --cor-info:           #044A5A;
  --cor-info-fundo:     #E2EBEE;
  --cor-sobre-cor:      #FFFFFF; /* texto em cima de erro/sucesso sólidos */

  /* ---- Foco e camadas ---- */
  --cor-foco:  #044A5A;
  --cor-veu:   rgba(0, 7, 42, 0.48); /* fundo atrás do modal */
  --cor-selecao: rgba(4, 74, 90, 0.18);

  /* ---- Tipografia: IBM Plex Sans (texto e números) + IBM Plex Mono (datas, horas, posição) ---- */
  --fonte-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-dados: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --texto-legenda:   12px; /* fonte, nota, cabeçalho de tabela, menu, tag */
  --texto-corpo:     14px; /* texto padrão */
  --texto-subtitulo: 16px; /* título de bloco; também tamanho de campo (evita zoom no iPhone) */
  --texto-titulo:    20px; /* título da tela */
  --texto-numero:    24px; /* número de indicador */
  --texto-destaque:  36px; /* número de destaque fora da capa */
  --texto-gigante:   64px; /* o número da capa, um por tela */

  --peso-normal: 400;
  --peso-medio:  600;
  --peso-forte:  700;

  --altura-justa:  1.2;  /* títulos, números, botões */
  --altura-corpo:  1.45; /* parágrafos, linhas */

  --entreletra-titulo: -0.01em;
  --entreletra-numero: -0.02em;
  --entreletra-gigante: -0.035em;
  --entreletra-rotulo:  0.14em; /* rótulos em caixa alta (sobrelinha) */
  --altura-gigante: 1;

  /* ---- Espaçamento (escala única, base 4) ---- */
  --espaco-4:  4px;
  --espaco-8:  8px;
  --espaco-12: 12px;
  --espaco-16: 16px;
  --espaco-24: 24px;
  --espaco-32: 32px;
  --espaco-48: 48px;

  /* ---- Raios ---- */
  --raio-pequeno:  4px;   /* aba selecionada, esqueleto */
  --raio-controle: 8px;   /* botão, campo, aviso, trilho das abas */
  --raio-bloco:    12px;  /* bloco, modal */
  --raio-pilula:   999px; /* tag e contador, só eles */

  /* ---- Bordas ---- */
  --borda-fina:  1px;
  --borda-forte: 2px;
  --foco-distancia: 2px;

  /* ---- Sombras (tingidas de navy, nunca preto) ----
     Blocos não têm sombra. Só o que flutua. */
  --sombra-baixa: 0 1px 2px rgba(0, 7, 42, 0.10);
  --sombra-alta:  0 12px 32px rgba(0, 7, 42, 0.16), 0 4px 8px rgba(0, 7, 42, 0.08);

  /* ---- Movimento ---- */
  --duracao-rapida: 140ms;
  --duracao-media:  220ms;
  --duracao-lenta:  360ms; /* entrada de bloco, folha de baixo */
  --atraso-passo:   45ms;  /* intervalo entre blocos que entram em sequência */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Medidas ---- */
  --toque-minimo:  44px;
  --icone:         20px;
  --icone-pequeno: 16px;
  --icone-menu:    22px;
  --icone-grande:  32px;
  --icone-traco:   2;
  --barra-altura:  8px;
  --barra-fina:    4px;
  --colunas-altura: 56px;
  --linha-lista:   64px; /* linha de pendência */
  --coluna-quantidade: 56px;
  --alca-largura:  36px;
  --faixa-altura:  32px;
  --largura-app:   430px;
  --largura-modal: 400px;
  --largura-leitura: 1200px;
}

[data-tema="escuro"] {
  --cor-capa:                 #0A1340;
  --cor-primaria:             #6FB7C6;
  --cor-primaria-hover:       #8CC8D4;
  --cor-primaria-pressionada: #5AA3B3;
  --cor-primaria-suave:       #143039;
  --cor-sobre-primaria:       #021E26;
  --cor-titulo:               #F2F7F8;

  --cor-fundo:          #071318;
  --cor-superficie:     #0E1E24;
  --cor-superficie-alt: #163038;
  --cor-texto:          #E3ECEE;
  --cor-texto-suave:    #9DB0B6;
  --cor-linha:          #24414A;
  --cor-linha-campo:    #5E7A83;
  --cor-linha-forte:    #E3ECEE;
  --cor-desativado:       #5E747B;
  --cor-desativado-fundo: #163038;
  --cor-moldura:        #03090C;

  --cor-sucesso:        #6FCF9E;
  --cor-sucesso-fundo:  #10302A;
  --cor-alerta:         #E9B866;
  --cor-alerta-fundo:   #33270C;
  --cor-erro:           #F29A90;
  --cor-erro-hover:     #F5B0A8;
  --cor-erro-fundo:     #3D1B18;
  --cor-info:           #6FB7C6;
  --cor-info-fundo:     #143039;
  --cor-sobre-cor:      #071318;

  --cor-foco:  #8CC8D4;
  --cor-veu:   rgba(0, 0, 0, 0.60);
  --cor-selecao: rgba(111, 183, 198, 0.28);

  --sombra-baixa: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sombra-alta:  0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30);
}