/* Ignis — tokens de design extraídos do protótipo.
   Fonte da verdade dos valores: Ignis.dc.html. Nada aqui muda a aparência;
   é a mesma lista de literais, com nome, para o app de produção nascer igual. */
:root {
  /* cor — acento e semântica (D-002) */
  /* Acento — a família neutra da marca (o cinza do wordmark "ignis").
     Marca ESTADO ATIVO: item selecionado no rail, layer ligado, handle de
     slider, botão primário, borda do que está em foco.

     Por que #5C5C5C e não o #7D7D7D exato da logo: o acento só cumpre a função
     se ativo e inativo se distinguirem, e o inativo é #A1A1AA. Medido sobre
     branco e contra o inativo:

       #0F5C6B (o teal antigo)  7,60:1   e  2,97:1
       #7D7D7D (o da logo)      4,12:1   e  1,61:1   ← ativo ≈ inativo
       #5C5C5C (adotado)        6,69:1   e  2,61:1

     Com 1,61:1 um layer ligado e um desligado ficam do mesmo tom. #5C5C5C é o
     mesmo cinza, um passo mais fundo — mantém a marca e a leitura.

     `--ig-acento-rgb` existe porque ~30 lugares do App.jsx escreviam
     `rgba(15,92,107,.1)` à mão para os fundos translúcidos do estado ativo.
     Com a cor cravada, trocar o token pintava metade da interface e deixava a
     outra metade na cor antiga. */
  --ig-acento: #5C5C5C;
  --ig-acento-rgb: 92, 92, 92;
  --ig-acento-medio: #7D7D7D;   /* o cinza exato da logo */
  --ig-acento-claro: #A8A8A8;
  --ig-alerta: #A24B36;
  --ig-areia: #E8DCC8;
  --ig-argila: #C9B79C;
  --ig-disponivel: #3D6849;
  /* Cores da marca, medidas do wordmark "ignis". O cinza é o das letras e do
     pin; o dourado é o do "g" e o da chama. Ficam como token porque a tela de
     login desenha o nome como TEXTO ao lado da imagem — se divergirem, o nome
     e o logo aparecem em cinzas diferentes lado a lado.

     ⚠️ #7D7D7D dá 4,12:1 sobre branco e NÃO passa no AA para texto pequeno
     (pede 4,5:1). Aqui serve porque o nome é desenhado em 38px bold, onde o
     mínimo é 3:1. Não reaproveite este cinza para texto corrido. */
  --ig-logo-cor: #7D7D7D;
  --ig-logo-chama: #F0C350;
  --ig-fonte-logo: 'Poppins', var(--ig-fonte);

  /* cor por grupo (barras, pizza, pirâmide do painel), claro→escuro.
     ⚠️ VALORES DE FÁBRICA, e não a fonte da verdade: quem manda é a paleta do
     grupo, escrita aqui em tempo de execução por `_aplicarCoresGrupo` (App.jsx)
     a partir de `tonsDoGrupo` (core/mapa.js). Estes ficam como fallback para o
     primeiro render, antes daquilo rodar.
     Eram nove hex escolhidos à mão, uma segunda tabela de "a cor de cada grupo"
     ao lado das paletas — e já tinham divergido: ouro estava #A27F1F contra o
     #929544 da rampa. Azul e lagoa coincidiam, sinal de que saíram do stop 4 da
     paleta uma vez e ninguém manteve.
     São QUATRO grupos hoje: Demografia=ouro, Atividades=lagoa, Mobilidade=azul,
     Ambiente=terra. `economia` saiu junto com a área (ver processamento/areas.py). */
  --ig-demografia-clara: #F7D34D;
  --ig-demografia-media: #CA9411;
  --ig-demografia-escura: #A16F0A;
  --ig-atividades-clara: #66AE70;
  --ig-atividades-media: #186B38;
  --ig-atividades-escura: #0C512B;
  --ig-mobilidade-clara: #8EBCE1;
  --ig-mobilidade-media: #3978B3;
  --ig-mobilidade-escura: #1C558E;
  --ig-ambiente-clara: #B1B1B3;
  --ig-ambiente-media: #6C6C71;
  --ig-ambiente-escura: #4C4C50;
  --ig-cidade-clara: #E8DCC8;
  --ig-cidade-media: #C9B79C;
  --ig-cidade-escura: #7A5C3E;

  /* cor — neutros em cinza frio (D-003) */
  --ig-tinta: #18181B;
  --ig-tinta-2: #27272A;
  --ig-corpo: #3F3F46;
  --ig-corpo-2: #52525B;
  --ig-secundario: #71717A;
  /* Subiu de #A1A1AA, que dava 2,56:1 sobre branco — reprovava com folga o
     mínimo de 4,5:1 para texto pequeno, e é a cor dos subtítulos e legendas de
     11px do painel de config (o relato foi "difícil de ler", e era). #6E6E78
     dá 5,04:1.

     A escala fica mais comprimida (corpo 10,44 · corpo-2 7,73 · secundário
     4,83 · terciário 5,04) e isso é deliberado: hierarquia visual não vale
     texto ilegível. Para diferenciar nível de importância, use tamanho e peso,
     que não custam contraste. */
  --ig-terciario: #6E6E78;
  --ig-borda-forte: #C4C4CC;
  --ig-borda-suave: #D4D4D8;
  --ig-papel: #FAFAFA;
  --ig-branco: #fff;
  --ig-barra-vazia: #6A787C;

  /* superfícies e linhas */
  --ig-linha: rgba(0,0,0,.06);
  /* Borda de janela/inspector — Etapa 5.3: era sutil (.08) demais pra separar
     o painel de vidro claro do mapa por baixo; contraste real agora. */
  --ig-borda: rgba(0,0,0,.16);
  /* Os DOIS divisores horizontais, nomeados pelo PAPEL e não pelo tom (D-002).
     Existiam de facto — `divisoria()` usava --ig-borda e as grades de métrica
     tinham rgba(0,0,0,.05) inline — mas sem nome ninguém sabia qual usar, e o
     forte acabou entre todos os cards em vez de só entre os grupos.

     forte: separa as QUATRO CLASSES de dado (Demografia · Economia ·
            Mobilidade · Ambiente). É a única fronteira do painel que o olho
            deve pegar sem procurar;
     fraco: tudo o mais — entre cards da mesma classe, entre linhas de grade. */
  --ig-divisor-forte: rgba(0,0,0,.16);
  --ig-divisor-fraco: rgba(0,0,0,.07);
  --ig-hover: rgba(0,0,0,.03);
  --ig-tile: rgba(255,255,255,.5);

  /* vidro (D-006) */
  --ig-vidro: rgba(255,255,255,.44);
  --ig-vidro-rail: rgba(255,255,255,.4);
  /* O inspector (janela da direita) tem vidro próprio só para poder ficar mais
     vazado que as outras janelas no modo invisível; fora dele é o mesmo vidro
     de sempre, então o modo normal não muda em nada. Mesma ideia no contorno:
     a borda externa das superfícies de vidro sai daqui em vez de --ig-borda
     direto, para o modo invisível trocar só ela por um cinza que se destaca do
     mapa nos dois temas — sem mexer nas linhas internas de janela e campo, que
     continuam em --ig-borda. */
  --ig-vidro-inspector: var(--ig-vidro);
  /* A janela de Configuração é a MAIS OPACA das superfícies de vidro, e por um
     motivo que não vale para as outras: ela é a única cheia de texto pequeno em
     tom secundário — rótulos, unidades, explicações de campo — apoiada sobre um
     mapa que muda de luminosidade no meio da tela. Relatado como pouco legível.
     As demais janelas mostram número grande e nome de variável, que aguentam o
     vidro de sempre; deixá-las opacas junto tiraria o mapa da vista sem
     necessidade. Token próprio, e não um valor solto no estilo da janela, para
     os quatro estados (claro/escuro × normal/invisível) continuarem sendo
     decididos num lugar só. */
  --ig-vidro-config: rgba(255,255,255,.82);
  --ig-contorno-vidro: var(--ig-borda);
  /* Cinza de contorno do sistema — para o que se apoia DIRETO no mapa, sem
     painel atrás: as bolhas e a janela da direita no modo invisível, a rampa de
     cores e as barras do histograma (estas em qualquer modo, porque a legenda
     sempre flutua sobre o basemap). Não sai de --ig-borda de propósito: aquela
     é preto translúcido no claro e branco translúcido no escuro, e nenhum dos
     dois se destaca de um basemap que muda de luminosidade no meio da tela.
     Um cinza médio se destaca dos dois. */
  --ig-cinza-contorno: rgba(113,113,122,.55);
  --ig-blur: blur(28px) saturate(1.08);
  /* opaco: menus suspensos e o popover da conta. Sobre eles o vidro atrapalha a
     leitura porque o mapa aparece por baixo do texto. */
  --ig-solido: #FFFFFF;
  /* Fundo de campo (input/select/textarea/botão-de-opção dentro de uma
     janela) — era 'rgba(255,255,255,.6..95)' espalhado e fixo pelo arquivo,
     nunca invertido no escuro: texto claro (--ig-corpo, já correto por tema)
     sobre um branco fixo ficava ilegível. Claro aqui mantém o valor de
     sempre; só o escuro muda (ver [data-tema="escuro"] abaixo). */
  --ig-campo: rgba(255,255,255,.7);

  /* sombra (D-009) — Etapa 5.3: mesmo motivo da borda, mais presença. */
  --ig-sombra-painel: 0 2px 4px rgba(0,0,0,.1), 0 12px 32px rgba(0,0,0,.16);

  /* tipografia (D-004, D-005) */
  --ig-fonte: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ig-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ig-peso-leve: 300;
  --ig-peso-corpo: 400;
  --ig-peso-medio: 500;

  /* raio */
  --ig-raio-painel: 12px;
  --ig-raio-tile: 8px;
  --ig-raio-controle: 6px;
  --ig-raio-chip: 4px;
  --ig-raio-barra: 3px;

  /* largura e altura de estrutura */
  --ig-rail: 48px;
  --ig-janela: 264px;
  --ig-inspector: 420px;
  --ig-ingestao: 560px;
  --ig-doca: 170px;
  --ig-linha-alta: 32px;
}

/* Tema escuro (Etapa 5.2 do plano de temas) — mesmo bloco de variáveis
   neutras/de superfície, valores invertidos. Ligado por [data-tema="escuro"]
   na raiz (ainda sem seletor na interface — chega na Etapa 5.7). Cor de
   acento, alerta e as paletas decorativas por aba/grupo (D-055) ficam de fora
   de propósito: são cor de marca e sistema próprio, tratados nas Etapas 5.4–5.5
   (basemap escuro, paletas por tema), não aqui. */
[data-tema="escuro"] {
  /* Acento invertido: no escuro o cinza fundo some no fundo. Medido sobre a
     superfície #18181B, #5C5C5C dá 2,65:1 — abaixo dos 3:1 que um componente
     de interface precisa. O passo claro dá 7,45:1.

     Vale registrar que isto já estava errado antes desta mudança: o teal
     #0F5C6B dava 2,33:1 no escuro e não tinha variante — o acento do tema
     escuro era menos legível que o do claro, sem ninguém ter decidido isso. */
  --ig-acento: #A8A8A8;
  --ig-acento-rgb: 168, 168, 168;
  --ig-acento-medio: #7D7D7D;
  --ig-acento-claro: #5C5C5C;

  /* cor — neutros, invertidos */
  --ig-tinta: #F4F4F5;
  --ig-tinta-2: #E4E4E7;
  --ig-corpo: #D4D4D8;
  --ig-corpo-2: #A1A1AA;
  --ig-secundario: #8B8B94;
  /* Mesmo problema do claro, espelhado: #6C6C76 dava 3,41:1 sobre a
     superfície escura. #8A8A94 dá 5,18:1. */
  --ig-terciario: #8A8A94;
  --ig-borda-forte: #52525B;
  --ig-borda-suave: #3F3F46;
  --ig-papel: #18181B;
  --ig-branco: #26262B;
  --ig-barra-vazia: #526266;

  /* superfícies e linhas — overlays pretos (D-003) não aparecem sobre fundo
     escuro; equivalente em branco translúcido */
  --ig-linha: rgba(255,255,255,.08);
  /* Contraste real (Etapa 5.3), como no claro — mas em branco, senão some
     contra o painel já escuro. */
  --ig-borda: rgba(255,255,255,.22);
  --ig-divisor-forte: rgba(255,255,255,.22);
  --ig-divisor-fraco: rgba(255,255,255,.10);
  --ig-hover: rgba(255,255,255,.05);
  --ig-tile: rgba(0,0,0,.3);

  /* vidro — mais escuro, não mais claro (era o problema de legibilidade
     relatado: vidro claro sobre mapa claro já era ilegível; sobre basemap
     escuro, sem isso, ficaria pior ainda) */
  --ig-vidro: rgba(24,24,27,.55);
  --ig-vidro-config: rgba(24,24,27,.88);
  --ig-vidro-rail: rgba(24,24,27,.5);
  --ig-solido: #26262B;

  /* sombra — a versão clara "some" contra um painel já escuro; mais forte
     pra continuar separando o painel do mapa por baixo */
  --ig-sombra-painel: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.45);

  /* Alfa maior que no claro para o traço chegar com a MESMA presença: aqui ele
     cai sobre superfície escura e basemap escuro, e o valor do claro lia como
     quase apagado nos dois usos (bolhas do rail e barras do histograma). */
  --ig-cinza-contorno: rgba(161,161,170,.6);

  /* Campo — branco fixo virava a causa nº 1 de texto ilegível no escuro
     (texto claro sobre fundo claro fixo). Claro aqui, translúcido sobre o
     painel já escuro — o efeito "campo" (distinto do painel) vem de ficar
     um pouco mais claro que o --ig-solido/--ig-vidro em volta, não de ficar
     escuro feito eles. */
  --ig-campo: rgba(255,255,255,.08);
}

/* Modo invisível (Etapa 5.6) — dimensão independente do tema. Reaproveita
   --ig-vidro/--ig-vidro-rail (já usados por toda janela flutuante e pelas
   bolhas do rail — ver App.jsx renderRail/renderJanela/renderConfig) em vez
   de tokens novos. --ig-vidro (janelas, ex. o painel da direita) fica MAIS
   transparente que o normal — pedido explícito, pra sumir mais no mapa;
   --ig-vidro-rail (bolha de cada ícone) fica só um pouco mais opaco que o
   vidro das janelas, senão os ícones ficam ilegíveis soltos sobre o mapa sem
   nenhuma barra os unindo (Etapa 5.6-v2: sem corpo de rail, só bolhas
   sempre visíveis). Compostas com [data-tema="escuro"] porque os valores
   claros não fazem sentido sobre um basemap escuro. */
[data-modo="invisivel"] {
  --ig-vidro: rgba(255,255,255,.28);
  --ig-vidro-rail: rgba(255,255,255,.5);
  --ig-vidro-inspector: rgba(255,255,255,.16);
  /* Mesmo no modo invisível a Config continua legível: aqui o pedido de vazar a
     interface vale para o que fica SOBRE o mapa o tempo todo, e ela é modal —
     abre, se usa e fecha. */
  --ig-vidro-config: rgba(255,255,255,.78);
  /* Mesmo cinza da legenda/histograma — é o que faz as bolhas, a janela da
     direita e o gráfico lerem como um sistema só, e não três contornos
     parecidos. A variante por tema já está em --ig-cinza-contorno. */
  --ig-contorno-vidro: var(--ig-cinza-contorno);
}
[data-tema="escuro"][data-modo="invisivel"] {
  --ig-vidro: rgba(24,24,27,.32);
  --ig-vidro-rail: rgba(24,24,27,.5);
  --ig-vidro-inspector: rgba(24,24,27,.2);
  --ig-vidro-config: rgba(24,24,27,.84);
  /* --ig-contorno-vidro não se repete aqui: ele já aponta para
     --ig-cinza-contorno no bloco acima, e var() resolve no uso — então a
     variante escura desse cinza (definida em [data-tema="escuro"]) chega
     sozinha. Repetir o valor era a única forma de ele sair de sincronia. */
}