/* =========================================================================
   VisiteNE — Tokens de identidade
   Versão 1.0 — agosto de 2026 · Mandacaru Tech
   Ancoragem: azul #0D2B69 e dourado #F3B404, amostrados do logotipo oficial.
   Este arquivo não contém componente. Só token. Quem importa isto herda a
   paleta inteira; quem quiser os componentes importa visitene-ui.css depois.
   ========================================================================= */

:root {
  /* ---- Azul institucional — primária ---------------------------------- */
  /* Âncora em 800 (#0D2B69): a cor exata do disco do logotipo.            */
  --azul-50:#F3F5F9;  --azul-100:#E2E7F1; --azul-200:#C5CFE5; --azul-300:#99AED9;
  --azul-400:#6286D0; --azul-500:#3061C7; --azul-600:#214DA8; --azul-700:#163C8B;
  --azul-800:#0D2B69; --azul-900:#0C265C; --azul-950:#091632;

  /* ---- Dourado — acento e sinal de conquista --------------------------- */
  /* Âncora em 500 (#F3B404): a cor exata do mapa e da palavra "NE".        */
  /* 50 é a areia do carimbo, amostrada do miolo do Passaporte NE.          */
  --ouro-50:#FEF6EB;  --ouro-100:#F9EDD6; --ouro-200:#ECE0BE; --ouro-300:#E8CF8A;
  --ouro-400:#EDC145; --ouro-500:#F3B404; --ouro-600:#BB8E0E; --ouro-700:#8D6D13;
  --ouro-800:#6E5614; --ouro-900:#554414; --ouro-950:#2C240E;

  /* ---- Neutros com viés azul ------------------------------------------ */
  /* Cinza puro ao lado de um azul profundo lê como cinza sujo. Estes       */
  /* puxam para o azul da marca e pertencem à mesma família.                */
  --n-0:#FFFFFF;  --n-50:#F7F8FB;  --n-100:#EEF1F6; --n-200:#DDE2EC;
  --n-300:#C2CADA; --n-400:#8E99AE; --n-500:#67728A; --n-600:#4E596F;
  --n-700:#3A4459; --n-800:#293142; --n-900:#1A2030; --n-950:#0C1020;

  /* ---- Papéis semânticos de superfície --------------------------------- */
  --fundo:var(--n-50);
  --superficie:var(--n-0);
  --superficie-alt:var(--n-100);
  --superficie-marca:var(--azul-800);
  --borda:var(--n-200);
  --borda-forte:var(--n-300);
  --texto:var(--n-900);
  --texto-suave:var(--n-600);
  --texto-fraco:var(--n-500);
  --texto-sobre-marca:#FFFFFF;

  --acento:var(--azul-700);
  --acento-hover:var(--azul-800);
  --acento-fraco:var(--azul-50);
  --foco:var(--azul-500);

  /* ---- Semânticos ------------------------------------------------------ */
  /* Regra de colisão do VisiteNE: a marca ocupa o azul E o dourado, que    */
  /* são justamente as duas cores que a convenção reserva para "informação" */
  /* e "atenção". Por isso os dois semânticos foram deslocados de matiz:    */
  /* informação vai para o petróleo, atenção vai para a terracota. Sem esse */
  /* deslocamento, um aviso ficaria indistinguível de um link ou de um selo.*/
  --sucesso:#157A4B;  --sucesso-fraco:#E8F5EE;
  --atencao:#A8420E;  --atencao-fraco:#FBEDE6;
  --perigo:#C42B1C;   --perigo-fraco:#FCEAE8;
  --info:#0E6E7A;     --info-fraco:#E5F3F5;
  --ia-fundo:#EDE9FE; --ia-texto:#6D28D9;

  /* Patrimônio: usado só na camada de conteúdo (tombamento, sítio          */
  /* histórico). Marrom-dourado, nunca o dourado da marca — conquista e     */
  /* patrimônio não podem ler igual.                                        */
  --patrimonio:#7A4B12; --patrimonio-fraco:#F5EEE3;

  /* ---- Estados da federação de dados ----------------------------------- */
  /* Seis leituras para as seis situações possíveis de uma base estadual.   */
  /* Cor nunca carrega o estado sozinha: todo chip leva marcador e rótulo.  */
  --f-conectado:#157A4B;
  --f-sincronizando:#0E6E7A;
  --f-defasado:#A8420E;
  --f-degradado:#8D6D13;
  --f-suspenso:#4E596F;
  --f-desconectado:#C42B1C;

  /* ---- Estados do carimbo do Passaporte NE ------------------------------ */
  --c-disponivel:#157A4B;   /* dentro do raio, pronto para carimbar        */
  --c-fora-de-raio:#4E596F; /* ponto conhecido, pessoa longe               */
  --c-na-fila:#0E6E7A;      /* carimbado offline, aguardando sincronização */
  --c-obtido:#8D6D13;       /* já consta na coleção                        */
  --c-recusado:#C42B1C;     /* antifraude barrou                           */

  /* ---- Tipografia ------------------------------------------------------ */
  /* Bitter (serifa de contraste baixo) carrega a marca e os títulos: o     */
  /* produto é um guia de viagem, e serifa lê como editorial, não como      */
  /* painel de controle. IBM Plex Sans e Mono seguem do padrão VisitePB,    */
  /* o que mantém as duas plataformas na mesma família tipográfica.         */
  --f-marca:"Bitter",Georgia,"Times New Roman",serif;
  --f-ui:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-dado:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;

  /* ---- Forma ------------------------------------------------------------ */
  --raio-sm:4px; --raio:8px; --raio-lg:12px; --raio-xl:18px; --pill:999px;
  --sombra-sm:0 1px 2px rgba(13,43,105,.08);
  --sombra:0 2px 8px rgba(13,43,105,.10),0 1px 2px rgba(13,43,105,.06);
  --sombra-lg:0 16px 36px rgba(13,43,105,.14),0 3px 8px rgba(13,43,105,.08);
  --ease:cubic-bezier(.2,.8,.2,1);

  /* ---- Espaço — base 4 -------------------------------------------------- */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px;
  --e-6:24px; --e-8:32px; --e-12:48px; --e-16:64px;
}

/* ---- Modo escuro ------------------------------------------------------- */
/* Só papéis são redefinidos. As escalas nunca mudam: um #0D2B69 é          */
/* #0D2B69 nos dois modos, e é isso que permite exportar a mesma paleta     */
/* para impressão sem recalcular nada.                                      */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo:var(--n-950);
    --superficie:#141B2B;
    --superficie-alt:#1D253A;
    --superficie-marca:#0A2050;
    --borda:#2A3348;
    --borda-forte:#3A4459;
    --texto:#E8ECF4;
    --texto-suave:#AAB4C7;
    --texto-fraco:#8E99AE;
    --acento:var(--azul-300);
    --acento-hover:var(--azul-200);
    --acento-fraco:#132348;
    --foco:var(--azul-300);
    --sucesso:#5BD79A; --sucesso-fraco:#0F2B1F;
    --atencao:#F0A275; --atencao-fraco:#33190D;
    --perigo:#F58A7E;  --perigo-fraco:#341615;
    --info:#6FD0DC;    --info-fraco:#0D2A2E;
    --ia-fundo:#2B1D57; --ia-texto:#C4B5FD;
    --patrimonio:#D8B37A; --patrimonio-fraco:#2C220F;
    --f-conectado:#5BD79A; --f-sincronizando:#6FD0DC; --f-defasado:#F0A275;
    --f-degradado:#EDC145; --f-suspenso:#8E99AE;     --f-desconectado:#F58A7E;
    --c-disponivel:#5BD79A; --c-fora-de-raio:#8E99AE; --c-na-fila:#6FD0DC;
    --c-obtido:#EDC145;     --c-recusado:#F58A7E;
    --sombra-sm:0 1px 2px rgba(0,0,0,.5);
    --sombra:0 2px 8px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4);
    --sombra-lg:0 16px 36px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  --fundo:var(--n-950);
  --superficie:#141B2B;
  --superficie-alt:#1D253A;
  --superficie-marca:#0A2050;
  --borda:#2A3348;
  --borda-forte:#3A4459;
  --texto:#E8ECF4;
  --texto-suave:#AAB4C7;
  --texto-fraco:#8E99AE;
  --acento:var(--azul-300);
  --acento-hover:var(--azul-200);
  --acento-fraco:#132348;
  --foco:var(--azul-300);
  --sucesso:#5BD79A; --sucesso-fraco:#0F2B1F;
  --atencao:#F0A275; --atencao-fraco:#33190D;
  --perigo:#F58A7E;  --perigo-fraco:#341615;
  --info:#6FD0DC;    --info-fraco:#0D2A2E;
  --ia-fundo:#2B1D57; --ia-texto:#C4B5FD;
  --patrimonio:#D8B37A; --patrimonio-fraco:#2C220F;
  --f-conectado:#5BD79A; --f-sincronizando:#6FD0DC; --f-defasado:#F0A275;
  --f-degradado:#EDC145; --f-suspenso:#8E99AE;     --f-desconectado:#F58A7E;
  --c-disponivel:#5BD79A; --c-fora-de-raio:#8E99AE; --c-na-fila:#6FD0DC;
  --c-obtido:#EDC145;     --c-recusado:#F58A7E;
  --sombra-sm:0 1px 2px rgba(0,0,0,.5);
  --sombra:0 2px 8px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4);
  --sombra-lg:0 16px 36px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.45);
}

/* ---- Regras duras, expressas como token ---------------------------------
   1. O dourado 400 e 500 NUNCA carregam texto sobre branco: o contraste é
      1,71:1 e 1,85:1. Para dourado que precisa ser lido, use --ouro-700
      (4,85:1 sobre branco). O par legítimo do dourado 500 é o azul 800,
      que dá 7,24:1 — é exatamente o par do logotipo.
   2. Semântico nunca vira cromo e cromo nunca vira semântico. O azul da
      marca é navegação; informação é petróleo. O dourado da marca é
      conquista; atenção é terracota.
   3. Todo estado leva marcador e rótulo além da cor.
   ------------------------------------------------------------------------ */