/* =============================================================================
   POMAR — tokens. NENHUM hex mora fora deste arquivo.
   Contrastes conferidos pela formula WCAG 2.x; os valores estao ao lado de cada par.

   Tres camadas:
     1. CASCA   — estatica, IDENTICA nos dois temas. E a identidade do produto.
     2. CANVAS claro
     3. CANVAS escuro

   Regra que sustenta tudo: preenchimento nunca vem sozinho. Existe --x e --x-tinta,
   declarados juntos, e nenhum componente combina duas variaveis na hora. E o que torna
   impossivel escrever o par de 1,48:1 que o vagalume tem hoje.
   ============================================================================= */

/* --- CAMADA 1: CASCA (nao muda de estacao) -------------------------------- */
:root {
  --casca-fundo:   #191712;  /* trilho, login, theme-color */
  --casca-fundo-2: #28241B;  /* hover de item */
  --casca-ativo:   #322D23;  /* item selecionado */
  --casca-borda:   #2C2820;
  --casca-tinta:   #F2EFE8;  /* 15,60:1 sobre --casca-fundo */
  --casca-tinta-2: #A9A296;  /*  7,07:1 sobre --casca-fundo */
  --casca-marca:   #F5B500;  /*  9,80:1 sobre --casca-fundo — o AMBAR COMO TINTA, e so aqui */
  --casca-foco:    #F5B500;  /*  9,80:1 sobre --casca-fundo — o mesmo ambar do canvas, ver --foco */

  /* O par de ACAO da casca. Existe porque a acao ambar tambem aparece sobre o fundo escuro (o
     botao de enviar da tela de inicio), e ali os tokens de canvas mentem: --marca-forte e mais
     ESCURO que --marca no tema claro e mais CLARO no escuro. Como a casca nao muda de tema, o
     mesmo hover apagava o botao para quem estava no claro e o acendia para quem estava no
     escuro — o gesto significando o oposto conforme uma preferencia que aquela tela nao tem.
     Aqui o hover sobe o brilho SEMPRE, que e a unica leitura possivel sobre fundo escuro. */
  --casca-marca-fundo: #F5B500;  /*  9,80:1 sobre --casca-fundo */
  --casca-marca-tinta: #1B1712;  /*  9,76:1 sobre --casca-marca-fundo */
  --casca-marca-forte: #FFC634;  /* 11,41:1 sobre --casca-fundo — o hover */

  /* Veu sobre a foto da tela de entrada. E o que garante o contraste do texto: sem ele o
     titulo cai sobre o rio claro da imagem e o valor medido vira loteria. As paradas vao de
     opaco embaixo (onde o texto vive) a quase limpo em cima (onde a foto respira). */
  --casca-veu-1:   rgb(15 13 10 / .92);
  --casca-veu-2:   rgb(15 13 10 / .72);
  --casca-veu-3:   rgb(15 13 10 / .12);
  --casca-veu-4:   rgb(15 13 10 / .04);
  --casca-brilho:  rgb(245 181 0 / .55);  /* halo do vaga-lume */

  /* Cor por SECAO da doca, como no Grajau: o disco de cada icone tem a sua, e e o que faz a
     pessoa achar "Usuarios" pela cor antes de ler a palavra. Nao sao cores de estado (isso e o
     verde/vermelho/ambar do canvas) — sao rotulo, e por isso vivem na casca, iguais nos dois
     temas. Cada uma carrega a tinta que vai POR CIMA dela, declarada junto, para nao existir a
     combinacao de 2:1 que aparece quando alguem escolhe o fundo hoje e a letra amanha.

     Os dois valores abaixo estavam errados no comentario (8,71 e 9,86): eram a medida contra
     preto puro, de antes de --doca-tinta virar #16130E. Nenhum dos dois reprovava a norma, mas
     o cabecalho deste arquivo promete que os numeros estao conferidos — e agora ha um teste que
     recalcula todos eles pela formula, em vez de acreditar no comentario.

     ATENCAO ao editar este bloco: ele ja quebrou duas vezes, e das duas o sintoma foi o mesmo.
     Comentario CSS NAO ANINHA: a primeira marca de fechamento encerra o comentario inteiro, e
     tudo o que vem depois volta a ser CSS cru dentro do :root. Uma declaracao invalida engole
     tudo ate o proximo ponto-e-virgula — que aqui e justamente o de --doca-usuarios. O token
     nascia VAZIO, o disco de Usuarios na doca ficava sem cor, e nada reclamava: var() sem valor
     cai no fallback e a folha segue valida.

     Por isso este paragrafo nao escreve a sequencia de fechamento como exemplo: escrever sobre
     ela dentro de um comentario e o proprio jeito de reintroduzir o defeito. Ha teste agora
     exigindo que todo --doca-* resolva para uma cor. */
  --doca-usuarios:  #7AA2F7;  /* 7,36:1 com --doca-tinta */
  --doca-super:     #C4A7E7;  /* 8,85:1 com --doca-tinta */
  --doca-aparencia: #8AD8C0;  /* 11,17:1 com --doca-tinta */
  /* Coral, e nao mais um verde: azul, roxo e verde-agua ja ocupam metade do circulo cromatico,
     e uma quarta secao vizinha das tres seria "a outra bolinha esverdeada". O quente tambem nao
     pode ser o ambar da marca, que e preenchimento de UMA acao por tela — este e dessaturado e
     rosado o bastante para nao ser lido como a cor da casa nem como estado de erro. */
  --doca-trabalho:  #F2A78E;  /* 9,43:1 com --doca-tinta */
  --doca-tinta:     #16130E;  /* a letra/glifo sobre qualquer disco da doca */

  /* O VERNIZ do disco: uma luz descendo sobre a cor da secao. Entrou porque o disco chapado
     parecia adesivo colado na moldura, e nao um alvo que se aperta.

     E branco sobre o token, nunca uma segunda cor. E o que o mantem honesto em qualquer secao
     nova — quem escolher --doca-algo nao precisa escolher tambem um degrade — e o que preserva os
     pares medidos logo acima: o branco so CLAREIA o disco, e o glifo e tinta escura, entao na
     faixa onde o icone vive o contraste SOBE. Um verniz escuro faria o oposto, e ai cada secao
     precisaria ser medida de novo.

     A luz morre em 60% da altura de proposito: passando disso o degrade vira faixa e come a cor
     que a pessoa memoriza. O relevo e o par do verniz — a linha clara em cima e a sombra fina
     embaixo sao o que dao a borda do disco, e sem elas o degrade sozinho so parece desbotado. */
  --verniz:        linear-gradient(rgb(255 255 255 / .30), rgb(255 255 255 / 0) 60%);
  --verniz-relevo: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 1px rgb(0 0 0 / .10);
}

/* --- CAMADA 2: CANVAS CLARO ----------------------------------------------- */
:root {
  --fundo:        #F2F0E9;
  --superficie:   #FFFFFF;
  --superficie-2: #F5F3EC;
  --superficie-3: #E9E6DC;
  /* O degrau que faltava na escada. Campo e botao fantasma moram QUASE SEMPRE sobre --superficie
     (lateral, dialogo, bloco), e preenchidos com a mesma cor eles viravam so-contorno — dentro e
     fora identicos. O preenchimento deles subiu um passo (repouso -2, hover -3), e o pressionado
     precisava de um quarto valor, senao hover e :active empatavam e o clique perdia o retorno de
     cor que a regra do .btn:active promete sob reducao de movimento. O passo e o mesmo da escada:
     a distancia de -3 para -4 e a de -2 para -3. */
  --superficie-4: #DDD9CC;

  --tinta:   #1A1815;  /* 17,72:1 sobre --superficie */
  --tinta-2: #55504A;  /*  7,98:1 sobre --superficie */
  --tinta-3: #6B655C;  /*  5,77:1 sobre --superficie */
  --tinta-4: #8A8378;  /*  3,75:1 sobre --superficie — so desabilitado */

  --borda:       #E5E1D7;  /* hairline decorativa: NUNCA identifica controle */

  /* O contorno do CAMPO, e so dele. Ele saiu de --borda-forte por um pedido direto: mesmo no piso
     da norma, um retangulo de 3:1 em volta de tres filtros empilhados era a primeira coisa que a
     lateral dizia. Aqui ele vale ~1,7:1 nos dois temas, que e a vizinhanca em que o Grajau desenha
     a mesma linha.

     Isto e uma EXCECAO DECLARADA a 1.4.11, e nao um descuido: abaixo de 3:1 o contorno deixa de
     cumprir sozinho a identificacao do controle. O que sustenta a decisao e o resto do campo — o
     preenchimento um degrau acima do container, o rotulo sempre visivel acima, o placeholder, e o
     hover/foco que SOBEM para --borda-forte e --foco no primeiro sinal de interesse. Quem depende
     de contorno para achar o campo o encontra assim que o ponteiro ou o teclado chega nele.
     ContratoVisualTests prende este token numa faixa para que ele nao suma nem volte a engrossar
     sem alguem decidir de novo. */
  --borda-campo: #C9C4B8;  /* 1,74:1 sobre --superficie — excecao declarada, ver o teste */

  /* Contorno funcional. Ele ja esteve em 3,98:1 (claro) e 3,99:1 (escuro), quase o dobro do que a
     1.4.11 pede, e o efeito era um retangulo cinza forte em volta de cada campo: numa lateral com
     tres filtros empilhados, o que a pessoa via primeiro era a moldura, e nao o que estava escrito
     dentro. A referencia da casa (o Grajau) desenha essa linha quase invisivel — mas la ela vive a
     1,4:1, que e reprovacao direta na norma, e este projeto tem teste medindo. Entao a linha desceu
     ate perto do PISO da norma, e nao ate o gosto: e a borda mais discreta que ainda identifica o
     controle sem depender de cor de preenchimento. O teste em ContratoVisualTests exige 3:1 nos
     dois temas contra --superficie E contra --fundo — a margem que sobra e de proposito pequena. */
  --borda-forte: #8B8578;  /* contorno funcional — 3,67:1 sobre --superficie, cumpre 1.4.11 */

  --marca:        #F5B500;
  --marca-tinta:  #1B1712;  /* 9,76:1 sobre --marca. Mesmo valor no tema escuro */
  --marca-forte:  #DCA200;  /* hover do preenchimento */
  --marca-borda:  #A87A00;  /* 3,85:1 sobre --superficie — contorno do preenchimento ambar */
  --marca-texto:  #7A5000;  /* 7,06:1 sobre --superficie — a marca como LETRA no canvas */
  --marca-suave:  #FBEFCF;  /* linha selecionada */

  /* O anel de foco e AMBAR, e nao o azul que o navegador traz de fabrica. A razao e de
     identidade: o ambar e a unica cor que este produto tem, e um anel azul em cada campo era a
     cor de outra casa aparecendo no gesto mais repetido da interface.

     O que o ambar NAO pode ser aqui e o #F5B500 da marca. Sobre a superficie branca ele mede
     1,83:1 — o anel sumiria justamente no tema em que a maioria trabalha. Por isso este e o
     unico token de acao que MUDA de valor com o tema: no claro ele desce para o ouro escuro (o
     mesmo hex de --marca-borda, que ja e a linha que contorna o botao ambar, entao o foco nao
     inventa uma sexta cor), e no escuro sobe para o ambar cheio, que ali sobra de contraste.

     O foco continua sendo um CONTORNO FUNCIONAL: vale a 1.4.11, 3:1, e nao os 4,5:1 de texto.
     E os 2px de outline-offset seguem sendo o que salva o anel em volta do proprio botao ambar
     — o vao e pintado pela superficie, entao o anel nunca encosta no preenchimento da mesma
     familia. ContratoVisualTests mede os dois temas; quem quiser outro tom mexe la tambem. */
  --foco: #A87A00;  /* 3,85:1 sobre --superficie — o ouro escuro, ver o paragrafo acima */

  /* Cada estado em duas linhas, e nao duas declaracoes na mesma: o comentario tem de dizer
     contra QUAL das duas o numero foi medido, senao ele nao e verificavel — e o teste que
     recalcula precisa saber quem e letra e quem e fundo. */
  --sucesso:       #146B37;  /* 5,66:1 sobre --sucesso-fundo */
  --sucesso-fundo: #E4F1E7;

  --erro:       #A11E14;  /* 6,60:1 sobre --erro-fundo */
  --erro-fundo: #FBE9E6;

  --erro-cheio-tinta: #FFFFFF;  /* 7,75:1 sobre --erro-cheio */
  --erro-cheio:       #A11E14;

  --aviso:       #7A5000;  /* 6,17:1 sobre --aviso-fundo */
  --aviso-fundo: #FAEFD2;

  --info:       #14557F;  /* 6,84:1 sobre --info-fundo */
  --info-fundo: #E5EFF7;

  --esqueleto: #EAE7DE;
  --veu: rgba(26, 24, 21, .45);

  --elev-1: 0 1px 2px rgba(26,24,21,.06);
  --elev-2: 0 10px 24px -12px rgba(26,24,21,.20), 0 2px 6px -2px rgba(26,24,21,.08);
  --elev-3: 0 32px 64px -24px rgba(26,24,21,.34);
}

/* --- CAMADA 3: CANVAS ESCURO ---------------------------------------------- */
/* Escolha explicita do usuario. */
:root[data-tema="escuro"] { color-scheme: dark; }
/* Preferencia do sistema, quando o usuario esta em "auto" (o servidor nao emite data-tema). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { color-scheme: dark; }
}

/* Os valores escuros aparecem DUAS vezes de proposito: uma para a escolha explicita
   (data-tema="escuro") e outra para "auto" via prefers-color-scheme. Nao da para unir num
   seletor so — o @media e uma condicao de ambiente, nao de seletor. O teste
   TokensCssTests garante que os dois blocos declarem exatamente o mesmo conjunto de tokens. */
:root[data-tema="escuro"] {
  --fundo:        #121110;
  --superficie:   #1A1917;
  --superficie-2: #22201D;
  --superficie-3: #2B2825;
  --superficie-4: #34302D;

  --tinta:   #EFEDE7;  /* 15,01:1 sobre --superficie */
  --tinta-2: #ADA89D;  /*  7,42:1 sobre --superficie */
  --tinta-3: #9B968A;  /*  5,96:1 sobre --superficie */
  --tinta-4: #7C766B;  /*  3,90:1 sobre --superficie — so desabilitado */

  --borda:       #2C2A26;
  --borda-campo: #45413B;  /* 1,73:1 sobre --superficie — excecao declarada, ver o teste */
  --borda-forte: #6B675E;  /* 3,12:1 sobre --superficie, cumpre 1.4.11 */

  --marca:        #F5B500;
  --marca-tinta:  #1B1712;  /* 9,76:1 sobre --marca. IDENTICOS ao claro: o par nao vira */
  --marca-forte:  #FFC634;
  /* No escuro o contorno vale o proprio preenchimento: a regra 1.4.11 ja esta satisfeita pelo
     ambar contra a superficie escura (9,61:1), entao o contorno aqui e forma, nao contraste. */
  --marca-borda:  #F5B500;
  --marca-texto:  #FFC53D;  /* 11,13:1 sobre --superficie */
  --marca-suave:  #33280C;

  --foco: #F5B500;  /* 9,61:1 sobre --superficie — no escuro o ambar cheio ja passa */

  --sucesso:       #6BC58C;  /* 7,32:1 sobre --sucesso-fundo */
  --sucesso-fundo: #14291D;

  --erro:       #F09082;  /* 6,89:1 sobre --erro-fundo */
  --erro-fundo: #331B16;

  --erro-cheio-tinta: #1B1712;  /* 6,69:1 sobre --erro-cheio */
  --erro-cheio:       #E8836A;

  --aviso:       #E9BE5C;  /* 8,81:1 sobre --aviso-fundo */
  --aviso-fundo: #2D2311;

  --info:       #7FBAE6;  /* 7,36:1 sobre --info-fundo */
  --info-fundo: #14263A;

  --esqueleto: #26241F;
  --veu: rgba(0, 0, 0, .62);

  --elev-1: none;  /* no escuro, elevacao e superficie + borda, nunca sombra */
  --elev-2: 0 10px 24px -12px rgba(0,0,0,.55);
  --elev-3: 0 32px 64px -24px rgba(0,0,0,.72);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo:        #121110;
    --superficie:   #1A1917;
    --superficie-2: #22201D;
    --superficie-3: #2B2825;
    --superficie-4: #34302D;

    --tinta:   #EFEDE7;
    --tinta-2: #ADA89D;
    --tinta-3: #9B968A;
    --tinta-4: #7C766B;

    --borda:       #2C2A26;
    --borda-campo: #45413B;
    --borda-forte: #6B675E;

    --marca:        #F5B500;
    --marca-tinta:  #1B1712;
    --marca-forte:  #FFC634;
    --marca-borda:  #F5B500;
    --marca-texto:  #FFC53D;
    --marca-suave:  #33280C;

    --foco: #F5B500;

    --sucesso:       #6BC58C;
    --sucesso-fundo: #14291D;

    --erro:       #F09082;
    --erro-fundo: #331B16;

    --erro-cheio-tinta: #1B1712;
    --erro-cheio:       #E8836A;

    --aviso:       #E9BE5C;
    --aviso-fundo: #2D2311;

    --info:       #7FBAE6;
    --info-fundo: #14263A;

    --esqueleto: #26241F;
    --veu: rgba(0, 0, 0, .62);

    --elev-1: none;
    --elev-2: 0 10px 24px -12px rgba(0,0,0,.55);
    --elev-3: 0 32px 64px -24px rgba(0,0,0,.72);
  }
}

/* --- Tipografia, espaco, forma, movimento --------------------------------- */
:root {
  /* A Inter agora existe de verdade no projeto: wwwroot/fonte/inter-latin-variavel.woff2, com o
     @font-face declarado no topo de pomar.css. Ate aqui as duas pilhas caiam no fallback, e o
     comentario do web.config tinha previsto o estrago palavra por palavra — "Georgia no lugar
     da serifa quase funciona, que e o pior tipo de defeito". Era exatamente o caso.

     A pilha de display e a MESMA da interface. O projeto tinha uma serifa (Fraunces) que nunca
     chegou a existir em arquivo, e a referencia pedida para o redesign e sans contemporanea.
     Um titulo em sans e uma decisao; um titulo em Georgia por acidente nao era.

     O fallback continua listado e continua importando: ele e o que a pessoa le enquanto o
     .woff2 chega (font-display: swap). Segoe UI Variable Text tem metrica proxima da Inter, o
     que torna a troca menos visivel do que seria com a Segoe UI comum. */
  --fonte-ui:      "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --fonte-display: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --fonte-tec:     ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  /* Os dois degraus que faltavam. Sem eles, 2, 5, 6 e 9px apareciam crus catorze vezes — e
     "5px" e "6px" no mesmo arquivo nao sao uma escala, sao duas pessoas decidindo sozinhas. */
  --e0:     2px;  /* separacao de irmaos numa lista densa, altura de trilho */
  --e-fino: 6px;  /* meio passo: icone colado a sua palavra, rotulo colado ao campo */

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --r1: 6px;    /* campo, botao, chip, selo */
  --r2: 10px;   /* ficha, bloco */
  --r3: 14px;   /* dialog, gaveta */
  --r-pill: 999px;

  --alt-topo: 52px; --lateral: 264px; --largura-max: 1440px;
  --alt-cabecalho: 64px;

  /* Empilhamento declarado. Antes eram seis numeros crus espalhados pelo CSS, e o menu da doca
     acabou usando a sombra do modal por nao haver ordem escrita em lugar nenhum. */
  --z-colado:    1;    /* thead sticky dentro do quadro */
  --z-dica:     20;    /* a dica que aparece no hover da barra */
  --z-menu:     30;    /* menu suspenso da doca */
  --z-flutuante:40;    /* o que sai do fluxo sem ser dialogo */
  --z-pular:   100;    /* o link de pular conteudo vence tudo que nao e <dialog> */

  --ms-1: 90ms; --ms-2: 140ms; --ms-3: 200ms;
  --curva: cubic-bezier(.2, 0, 0, 1);
}

/* --- Escala tipografica --------------------------------------------------- */
/* O cabecalho de pomar.css sempre afirmou "nenhum font-size literal aqui", e havia 44 deles,
   em 11 tamanhos, com meio-passos ad-hoc (12,5px em seis lugares, 13,5px num). Nao existia
   escala: existiam valores proximos.

   Cada tamanho vem COLADO a sua altura de linha, pela mesma razao que --x e --x-tinta vem
   colados: sao a mesma decisao, e separa-los e como o par de cor que ninguem checa. */
:root {
  --t-micro:    11px;  --lh-micro:    14px;  /* rotulo caixa alta */
  --t-mini:     12px;  --lh-mini:     16px;  /* carimbo de tempo, nota de rodape */
  --t-apoio:    13px;  --lh-apoio:    18px;  /* rotulo de campo, ajuda, legenda */
  --t-medio:    15px;  --lh-medio:    22px;  /* campo de busca da tela de inicio */
  /* Entrelinha de LEITURA para o tamanho base: texto corrido (a resposta do assistente, a
     linha do hero) respira mais que rotulo de interface no mesmo corpo. */
                       --lh-leitura:  21px;
  --t-secao:    16px;  --lh-secao:    22px;  /* titulo de bloco */
  --t-destaque: 22px;  --lh-destaque: 26px;  /* o numero que importa */
  --t-tela:     26px;  --lh-tela:     30px;  /* titulo de tela */
  --t-marca:    30px;  --lh-marca:    34px;  /* a palavra POMAR na entrada */
}

/* --- Densidade ------------------------------------------------------------ */
/* Antes a densidade so mexia em altura de controle: trocar para "compacta" mudava 4px de altura
   e 1px da fonte base, e nada mais — o texto de apoio, os titulos e os espacos internos ficavam
   parados. Agora ela alcanca a tipografia de apoio e o passo de espaco de dentro dos
   componentes, que e o que faz caber mais linha na tela sem apertar a leitura. */
:root, :root[data-densidade="padrao"] {
  --t-base: 14px; --lh-base: 20px;
  --alt-controle: 36px; --alt-linha: 36px;
  --e-caixa: var(--e4);   /* recuo interno de bloco e celula */
  --e-pilha: var(--e3);   /* distancia entre irmaos empilhados */
}
:root[data-densidade="compacta"] {
  --t-base: 13px; --lh-base: 18px;
  --t-apoio: 12px; --lh-apoio: 16px;
  --alt-controle: 32px; --alt-linha: 32px;
  --e-caixa: var(--e3);
  --e-pilha: var(--e2);
}
:root[data-densidade="confortavel"] {
  --t-base: 15px; --lh-base: 22px;
  --t-apoio: 14px; --lh-apoio: 20px;
  --alt-controle: 40px; --alt-linha: 40px;
  --e-caixa: var(--e5);
  --e-pilha: var(--e4);
}