/* ======================================================================
   Evoluti Gestão — Tokens
   ----------------------------------------------------------------------
   Camada 1 de 2. Carrega ANTES de style.css.

   Este arquivo é a única fonte de verdade do sistema visual. Ele faz
   duas coisas ao mesmo tempo:

   1. Declara o vocabulário novo, em português (--acao, --receita,
      --superficie, --texto-2 …).
   2. Reaponta TODAS as variáveis legadas que as 190+ páginas já
      consomem (--brand-600, --slate-500, --rose-50 …) para os valores
      novos. É por isso que o rebrand aparece no sistema inteiro sem
      precisar editar nenhum arquivo PHP.

   A paleta vem do CONTEXTO_MESTRE, seção 32 ("Paleta visual aprovada").
   Cada cor aprovada está marcada com [APROVADA] abaixo. Onde um valor
   aprovado não passava em contraste de texto, ele foi preservado no seu
   uso original e um degrau vizinho foi criado para o texto — está
   anotado no ponto exato.

   Contraste validado por script: ../validar-contraste.py
   44 pares, 0 reprovados, nos dois temas.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. PALETA — degraus fixos, independentes de tema
   Nunca use estes diretamente num componente. Use os papéis (seção 2).
   ---------------------------------------------------------------------- */
:root{

  /* Azul — confiança, decisão, institucional.
     O 500 é o Azul Executivo e o 700 é o Azul Estratégico, os dois
     aprovados. O resto da escala foi derivado deles. */
  --azul-50:#EFF6FC;
  --azul-100:#D8E9F6;
  --azul-200:#B3D3EC;
  --azul-300:#7FB2DC;
  --azul-400:#4A8FC8;
  --azul-500:#1B6CA8;   /* [APROVADA] Azul Executivo — ações e botões  */
  --azul-600:#175C90;
  --azul-700:#0F4C81;   /* [APROVADA] Azul Estratégico — institucional */
  --azul-800:#0C3D68;
  --azul-900:#082B4A;

  /* Verde — receita e crescimento.
     O 400 é o Verde Sucesso e o 500 o Verde Crescimento, os dois
     aprovados. O 600 existe porque o 500 com texto branco dá 3,9:1 —
     todo botão verde usa o 600 (4,65:1). */
  --verde-50:#E9F9EF;
  --verde-100:#CDF0DA;
  --verde-200:#9CE2B8;
  --verde-300:#5FD08D;
  --verde-400:#2ECC71;  /* [APROVADA] Verde Sucesso — confirmações/metas */
  --verde-500:#18A957;  /* [APROVADA] Verde Crescimento — receita         */
  --verde-600:#128644;  /* botão verde: 4,65:1 com branco                 */
  --verde-700:#0D6E37;  /* valor de receita em texto: 6,36:1              */
  --verde-800:#0A552B;

  /* Âmbar — oportunidade e urgência.
     Âmbar chapado nunca recebe texto branco (2,1:1). Recebe grafite,
     que dá 6,13:1. O 700 é o degrau de texto sobre fundo âmbar claro. */
  --ambar-50:#FFF8EB;
  --ambar-100:#FDECC8;
  --ambar-300:#FBC65A;
  --ambar-500:#F59E0B;  /* [APROVADA] Âmbar Oportunidade */
  --ambar-600:#C87F05;
  --ambar-700:#8F5C06;

  /* Vermelho — risco e perda. */
  --risco-50:#FDF0EE;
  --risco-100:#FAD9D4;
  --risco-300:#F0A79C;
  --risco-500:#E74C3C;  /* [APROVADA] Vermelho Risco */
  --risco-600:#C93B2C;  /* botão: 5,07:1 com branco  */
  --risco-700:#A62E22;

  /* Turquesa — inteligência e governança.
     Único matiz DERIVADO, não aprovado: o método tem quatro fases e a
     paleta aprovada traz três cores de fase (azul, âmbar, verde).
     Escolhido na ponte exata entre o Azul Estratégico e o Verde
     Crescimento, para pertencer à família sem repetir nenhuma delas. */
  --turq-50:#E6F5F7;
  --turq-100:#C6E7EB;
  --turq-500:#0E7C8A;
  --turq-600:#0B6572;
  --turq-700:#084E58;

  /* Grafite — a escala neutra.
     Family azul-acinzentada, não o cinza puro: é o que liga os neutros
     ao azul da marca em vez de deixá-los à parte. O 900 é o Cinza
     Grafite e o 50 é o Gelo Corporativo, ambos aprovados. */
  --grafite-50:#F5F7FA;   /* [APROVADA] Gelo Corporativo — fundo */
  --grafite-100:#EAEEF2;
  --grafite-200:#D6DEE4;
  --grafite-300:#B4C0C9;
  --grafite-400:#8596A2;  /* borda de controle: 3,05:1 sobre branco */
  --grafite-500:#597481;  /* texto terciário: 4,61:1 sobre o gelo    */
  --grafite-600:#4B626D;
  --grafite-700:#3A4C55;
  --grafite-800:#2E3D45;
  --grafite-900:#263238;  /* [APROVADA] Cinza Grafite — títulos/menus */

  /* [APROVADA] Cinza Técnico.
     Fica de fora da escala de propósito. Como texto sobre o fundo gelo
     ele dá 4,07:1 e reprova. Vive aqui, preservado, para o que ele faz
     bem: ícone decorativo, eixo de gráfico, linha de grade. Texto
     terciário usa --grafite-500, o mesmo matiz 3% mais escuro. */
  --cinza-tecnico:#607D8B;

  --branco:#FFFFFF;
}

/* ----------------------------------------------------------------------
   2. PAPÉIS — o que os componentes realmente usam
   Só o que está aqui muda entre tema claro e escuro.
   ---------------------------------------------------------------------- */
:root{
  /* Superfícies */
  --canvas:#F5F7FA;              /* fundo da aplicação    */
  --superficie:#FFFFFF;          /* cartão, modal, tabela */
  --superficie-2:#F5F7FA;        /* faixa alternada, cabeçalho de tabela */
  --superficie-3:#EAEEF2;        /* poço, campo desabilitado */
  --borda:#D6DEE4;               /* borda de cartão   */
  --borda-forte:#8596A2;         /* borda de controle */
  --menu:#0C3D68;                /* barra lateral — Azul Estratégico, um degrau abaixo */
  --menu-texto:#C5D4E4;          /* item inativo        5,87:1 */
  --menu-rotulo:#A9BDD4;         /* rótulo de seção     4,60:1 */
  --menu-ativo:#D8E9F6;          /* item ativo: preench. 7,13:1 da barra */
  --menu-ativo-tinta:#0C3D68;    /* item ativo: tinta   8,98:1 — de propósito
                                    é a MESMA cor da barra, então a pílula
                                    lê como um recorte dela */
  /* UI de navegação embutida na barra (busca, fixados, estrela).
     Estes valores estão amarrados ao tom da barra: se --menu mudar,
     estes cinco precisam ser recalculados junto. Estão aqui, e não
     cravados no tema.css, exatamente para isso ficar num lugar só.
     Medidos contra --menu e contra o fundo do campo. */
  --menu-campo:#245077;          /* busca: fundo (branco 10% sobre a barra) */
  --menu-campo-borda:#7C9FC2;    /* busca: borda        3,05:1 do campo     */
  --menu-campo-dica:#AFC2D7;     /* busca: placeholder  4,63:1 do campo     */
  --menu-fixar:#6E8CA8;          /* estrela apagada     3,18:1 da barra     */
  --menu-fixado:#FBC65A;         /* estrela acesa       7,08:1 da barra     */

  /* Texto */
  --texto:#263238;               /* principal  13,2:1 */
  --texto-2:#4B626D;             /* secundário  6,4:1 */
  --texto-3:#597481;             /* terciário   4,6:1 */
  --texto-invertido:#FFFFFF;
  --tinta:#263238;               /* texto escuro sobre preenchimento claro */

  /* Ação */
  --acao:#1B6CA8;                /* preenchimento do botão primário */
  --acao-hover:#175C90;
  --acao-ativa:#0F4C81;
  --acao-texto:#175C90;          /* link e ação em texto: 7,07:1 */
  --acao-suave:#EFF6FC;
  --acao-contorno:#B3D3EC;
  --foco:#1B6CA8;                /* anel de foco, um só no produto */

  /* Semântica de dado */
  --receita:#0D6E37;             /* número de receita em texto */
  --receita-forte:#128644;       /* preenchimento verde        */
  --receita-suave:#E9F9EF;
  --alerta:#8F5C06;              /* texto de alerta            */
  --alerta-forte:#F59E0B;        /* preenchimento âmbar        */
  --alerta-suave:#FFF8EB;
  --perigo:#A62E22;
  --perigo-forte:#C93B2C;
  --perigo-suave:#FDF0EE;
  --info:#084E58;
  --info-forte:#0E7C8A;
  --info-suave:#E6F5F7;

  /* As quatro fases do Método Evoluti.
     Isto não é decoração: é a espinha do produto. A navegação, os
     cabeçalhos de módulo e os gráficos usam sempre a mesma cor para a
     mesma fase, então a pessoa aprende o sistema uma vez. */
  --fase-decidir:#0F4C81;
  --fase-executar:#C87F05;
  --fase-medir:#128644;
  --fase-governar:#0E7C8A;
  /* versões claras, para uso sobre a barra lateral escura */
  --fase-decidir-claro:#7FB2DC;
  --fase-executar-claro:#FBC65A;
  --fase-medir-claro:#5FD08D;
  --fase-governar-claro:#5CC5D1;
  /* versões de TEXTO. As de cima são preenchimento e não servem como
     texto: --fase-executar (#C87F05) sobre branco dá 3,23:1 e reprova.
     Toda cor deste sistema tem um degrau de preenchimento e um de
     texto — as fases não podiam ser exceção. */
  --fase-decidir-texto:#0F4C81;   /* 8,86:1 sobre branco */
  --fase-executar-texto:#8F5C06;  /* 5,67:1 */
  --fase-medir-texto:#0D6E37;     /* 6,36:1 */
  --fase-governar-texto:#084E58;  /* 9,37:1 */
}

/* ----------------------------------------------------------------------
   3. TIPOGRAFIA
   Manrope nos títulos e Inter na interface, como pede o CONTEXTO_MESTRE.
   Manrope tem o "g" de caixa-baixa e o "1" mais fechados que a Sora
   anterior — lê melhor em tamanho pequeno de tabela, que é onde este
   produto vive.
   ---------------------------------------------------------------------- */
:root{
  --fonte-ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-titulo:"Manrope",var(--fonte-ui);
  --fonte-num:"Inter",ui-sans-serif,system-ui,sans-serif;

  /* Escala. Passo ~1,17 — apertado de propósito: tela de gestão tem
     muito degrau de hierarquia e um passo largo estoura o layout. */
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-15:15px;
  --t-17:17px; --t-20:20px; --t-24:24px; --t-28:28px; --t-34:34px; --t-44:44px;

  --peso-normal:400;
  --peso-medio:500;
  --peso-forte:600;
  --peso-titulo:700;
  --peso-display:800;

  --altura-apertada:1.18;
  --altura-normal:1.5;
  --altura-solta:1.65;

  /* Título grande fecha o espacejamento; texto pequeno abre.
     É o oposto do padrão de quem não mexe nisso, e é o que faz um
     título parecer desenhado em vez de só aumentado. */
  --tracking-display:-0.022em;
  --tracking-titulo:-0.014em;
  --tracking-normal:0;
  --tracking-etiqueta:0.06em;
}

/* ----------------------------------------------------------------------
   4. ESPAÇO, RAIO, ELEVAÇÃO, MOVIMENTO
   ---------------------------------------------------------------------- */
:root{
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px;
  --e-6:24px; --e-8:32px; --e-10:40px; --e-12:48px; --e-16:64px;

  /* Raio. Revisado a partir das três referências (Hotscool, Daazle,
     mLabs Workflow), que trabalham com canto bem mais generoso que o
     que eu tinha posto. O ajuste é de meio-termo: subi um degrau em
     relação ao anterior (6/10/14 -> 8/12/16) para o produto respirar,
     sem chegar no canto de aplicativo de consumo. O painel e o modal
     ganham um degrau próprio, porque superfície grande aguenta mais
     curva que um botão. */
  --raio-sm:8px;
  --raio:12px;
  --raio-lg:16px;
  --raio-xl:20px;
  --raio-pill:999px;

  /* Tiles de ícone.
     Padrão que aparece nas três referências: um quadrado arredondado
     com fundo em tint bem claro da cor e o ícone na cor saturada. Lê
     melhor que o ícone solto e MUITO melhor que o gradiente que estava
     aqui antes — o tint dá área de cor sem competir com o dado.
     Cada par é fundo + ícone; o contraste do par está validado. */
  --tile-acao-fundo:#EFF6FC;      --tile-acao-icone:#0F4C81;
  --tile-receita-fundo:#E9F9EF;   --tile-receita-icone:#0D6E37;
  --tile-alerta-fundo:#FFF8EB;    --tile-alerta-icone:#8F5C06;
  --tile-perigo-fundo:#FDF0EE;    --tile-perigo-icone:#A62E22;
  --tile-info-fundo:#E6F5F7;      --tile-info-icone:#084E58;
  --tile-neutro-fundo:#EAEEF2;    --tile-neutro-icone:#3A4C55;

  /* Sombra de grafite puro, sem tinta de marca e sem brilho colorido.
     Sombra colorida chama atenção para si; aqui ela só precisa separar
     o cartão do fundo. */
  --sombra-sm:0 1px 2px rgba(38,50,56,.06);
  --sombra:0 2px 6px rgba(38,50,56,.07), 0 1px 2px rgba(38,50,56,.05);
  --sombra-md:0 6px 18px -4px rgba(38,50,56,.11), 0 2px 6px -2px rgba(38,50,56,.07);
  --sombra-lg:0 18px 44px -12px rgba(38,50,56,.20), 0 6px 14px -6px rgba(38,50,56,.10);

  --ease:cubic-bezier(.2,0,0,1);
  --rapido:120ms;
  --normal:180ms;
  --lento:260ms;
}

/* ----------------------------------------------------------------------
   5. TEMA ESCURO
   Vale a preferência do sistema por padrão; [data-tema] vence quando
   a pessoa escolhe explicitamente.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --canvas:#151D21;
    --superficie:#1E282D;
    --superficie-2:#26333A;
    --superficie-3:#2E3D45;
    --borda:#38494F;
    --borda-forte:#5D747E;
    --menu:#0C3D68;                /* barra lateral — Azul Estratégico, um degrau abaixo */
    --menu-texto:#C5D4E4;          /* item inativo        5,87:1 */
    --menu-rotulo:#A9BDD4;         /* rótulo de seção     4,60:1 */
    --menu-ativo:#D8E9F6;          /* item ativo: preench. 7,13:1 da barra */
    --menu-ativo-tinta:#0C3D68;    /* item ativo: tinta   8,98:1 — de propósito
                                    é a MESMA cor da barra, então a pílula
                                    lê como um recorte dela */
  /* UI de navegação embutida na barra (busca, fixados, estrela).
     Estes valores estão amarrados ao tom da barra: se --menu mudar,
     estes cinco precisam ser recalculados junto. Estão aqui, e não
     cravados no tema.css, exatamente para isso ficar num lugar só.
     Medidos contra --menu e contra o fundo do campo. */
  --menu-campo:#245077;          /* busca: fundo (branco 10% sobre a barra) */
  --menu-campo-borda:#7C9FC2;    /* busca: borda        3,05:1 do campo     */
  --menu-campo-dica:#AFC2D7;     /* busca: placeholder  4,63:1 do campo     */
  --menu-fixar:#6E8CA8;          /* estrela apagada     3,18:1 da barra     */
  --menu-fixado:#FBC65A;         /* estrela acesa       7,08:1 da barra     */

    --texto:#E9EEF1;
    --texto-2:#B2C2CB;
    --texto-3:#8FA1AB;
    --texto-invertido:#15222A;
    --tinta:#15222A;

    /* No escuro o preenchimento clareia e o texto escurece — inverter
       o par é o que mantém o botão legível sem virar um bloco apagado. */
    --acao:#6AB2E7;
    --acao-hover:#89C2EC;
    --acao-ativa:#4BA2E2;
    --acao-texto:#8CBEE4;
    --acao-suave:#15303F;
    --acao-contorno:#2C5A76;
    --foco:#8CBEE4;

    --receita:#63D694;
    --receita-forte:#1BBC61;
    --receita-suave:#0F3324;
    --alerta:#F7C05A;
    --alerta-forte:#F59E0B;
    --alerta-suave:#3A2A0C;
    --perigo:#F5978A;
    --perigo-forte:#EB8A7D;
    --perigo-suave:#3B1C18;
    --info:#5CC5D1;
    --info-forte:#0E7C8A;
    --info-suave:#0D2E33;

    --fase-decidir:#7FB2DC;
    --fase-executar:#FBC65A;
    --fase-medir:#5FD08D;
    --fase-governar:#5CC5D1;
    --fase-decidir-texto:#7FB2DC;
    --fase-executar-texto:#FBC65A;
    --fase-medir-texto:#5FD08D;
    --fase-governar-texto:#5CC5D1;


    /* Tiles no escuro: o tint vira um fundo escuro da mesma familia
       e o icone assume a versao clara. */
    --tile-acao-fundo:#15303F;      --tile-acao-icone:#8CBEE4;
    --tile-receita-fundo:#0F3324;   --tile-receita-icone:#63D694;
    --tile-alerta-fundo:#3A2A0C;    --tile-alerta-icone:#F7C05A;
    --tile-perigo-fundo:#3B1C18;    --tile-perigo-icone:#F5978A;
    --tile-info-fundo:#0D2E33;      --tile-info-icone:#5CC5D1;
    --tile-neutro-fundo:#2E3D45;    --tile-neutro-icone:#B2C2CB;
  
  /* Tiles no escuro: o tint vira um fundo escuro da mesma familia
     e o icone assume a versao clara. */
  --tile-acao-fundo:#15303F;      --tile-acao-icone:#8CBEE4;
  --tile-receita-fundo:#0F3324;   --tile-receita-icone:#63D694;
  --tile-alerta-fundo:#3A2A0C;    --tile-alerta-icone:#F7C05A;
  --tile-perigo-fundo:#3B1C18;    --tile-perigo-icone:#F5978A;
  --tile-info-fundo:#0D2E33;      --tile-info-icone:#5CC5D1;
  --tile-neutro-fundo:#2E3D45;    --tile-neutro-icone:#B2C2CB;
  --sombra-sm:0 1px 2px rgba(0,0,0,.4);
    --sombra:0 2px 6px rgba(0,0,0,.44);
    --sombra-md:0 6px 18px -4px rgba(0,0,0,.5);
    --sombra-lg:0 18px 44px -12px rgba(0,0,0,.6);
  }
}

:root[data-tema="escuro"]{
  --canvas:#151D21;
  --superficie:#1E282D;
  --superficie-2:#26333A;
  --superficie-3:#2E3D45;
  --borda:#38494F;
  --borda-forte:#5D747E;
  --menu:#0C3D68;                /* barra lateral — Azul Estratégico, um degrau abaixo */
  --menu-texto:#C5D4E4;          /* item inativo        5,87:1 */
  --menu-rotulo:#A9BDD4;         /* rótulo de seção     4,60:1 */
  --menu-ativo:#D8E9F6;          /* item ativo: preench. 7,13:1 da barra */
  --menu-ativo-tinta:#0C3D68;    /* item ativo: tinta   8,98:1 — de propósito
                                    é a MESMA cor da barra, então a pílula
                                    lê como um recorte dela */
  /* UI de navegação embutida na barra (busca, fixados, estrela).
     Estes valores estão amarrados ao tom da barra: se --menu mudar,
     estes cinco precisam ser recalculados junto. Estão aqui, e não
     cravados no tema.css, exatamente para isso ficar num lugar só.
     Medidos contra --menu e contra o fundo do campo. */
  --menu-campo:#245077;          /* busca: fundo (branco 10% sobre a barra) */
  --menu-campo-borda:#7C9FC2;    /* busca: borda        3,05:1 do campo     */
  --menu-campo-dica:#AFC2D7;     /* busca: placeholder  4,63:1 do campo     */
  --menu-fixar:#6E8CA8;          /* estrela apagada     3,18:1 da barra     */
  --menu-fixado:#FBC65A;         /* estrela acesa       7,08:1 da barra     */

  --texto:#E9EEF1;
  --texto-2:#B2C2CB;
  --texto-3:#8FA1AB;
  --texto-invertido:#15222A;
  --tinta:#15222A;

  --acao:#6AB2E7;
  --acao-hover:#89C2EC;
  --acao-ativa:#4BA2E2;
  --acao-texto:#8CBEE4;
  --acao-suave:#15303F;
  --acao-contorno:#2C5A76;
  --foco:#8CBEE4;

  --receita:#63D694;
  --receita-forte:#1BBC61;
  --receita-suave:#0F3324;
  --alerta:#F7C05A;
  --alerta-forte:#F59E0B;
  --alerta-suave:#3A2A0C;
  --perigo:#F5978A;
  --perigo-forte:#EB8A7D;
  --perigo-suave:#3B1C18;
  --info:#5CC5D1;
  --info-forte:#0E7C8A;
  --info-suave:#0D2E33;

  --fase-decidir:#7FB2DC;
  --fase-executar:#FBC65A;
  --fase-medir:#5FD08D;
  --fase-governar:#5CC5D1;
  --fase-decidir-texto:#7FB2DC;
  --fase-executar-texto:#FBC65A;
  --fase-medir-texto:#5FD08D;
  --fase-governar-texto:#5CC5D1;

  --sombra-sm:0 1px 2px rgba(0,0,0,.4);
  --sombra:0 2px 6px rgba(0,0,0,.44);
  --sombra-md:0 6px 18px -4px rgba(0,0,0,.5);
  --sombra-lg:0 18px 44px -12px rgba(0,0,0,.6);
}

/* ----------------------------------------------------------------------
   A PONTE PARA O SISTEMA LEGADO NÃO MORA MAIS AQUI
   ----------------------------------------------------------------------
   Ela foi para o fim do tema.css, e a razão importa:

   o style.css declara o próprio :root com a paleta antiga inteira
   (--brand-500:#6366f1, --slate-500:#64748b, --emerald-500:#059669 …).
   Como ele carrega DEPOIS deste arquivo e a especificidade é a mesma,
   o :root dele vencia — e reapontar as variáveis legadas aqui não
   surtia efeito nenhum. Só o que o tema.css reescrevia explicitamente
   mudava de cor; todo o resto continuava índigo.

   A ponte precisa vir depois do style.css. Por isso vive no tema.css.
   ---------------------------------------------------------------------- */