/* ============================================================================
 * TOKENS — base do sistema visual.
 *
 * Fonte: Manual de Identidade Visual ILOS v3 (páginas 7-8).
 *
 * Regra prática: componente NÃO usa cor literal nem cor de marca direto. Usa o token
 * semântico (--cor-acao, --superficie, --borda...). É isso que vai permitir tema por projeto
 * depois — trocar um token muda a interface inteira, em vez de caçar literais em 5.088 linhas.
 * ========================================================================== */

:root {
    /* Explícito: sem ele o navegador segue a preferência do SISTEMA, e quem usa o
     * Windows no escuro veria menus escuros sobre a tela clara. */
    color-scheme: light;
    /* --- Marca (não alterar: valores do manual) ------------------------------ */
    --ilos-laranja: #F7941E;      /* institucional      RGB 247/148/30  Pantone 144 C  */
    /* Canais separados: `rgba()` não aceita variável de cor, e sem isto qualquer laranja com
     * transparência voltaria a ser valor cravado. */
    --ilos-laranja-rgb: 247, 148, 30;
    --ilos-cinza: #ACA28F;        /* consultoria        RGB 172/162/143 Pantone 7536 C */
    --ilos-vinho: #9A1D28;        /* intel. de mercado  RGB 154/29/40   Pantone 187 C  */
    --ilos-vermelho: #DA212A;     /* eventos corp.      RGB 218/33/42   Pantone 185 C  */

    /* TODO — verde de capacitação: o manual (pág. 8) repete o RGB do cinza no campo do
     * verde, claramente um copy-paste, já que a amostra é verde-escura. O valor abaixo foi
     * estimado da amostra. Pedir o oficial ao Marketing (divulgacao@ilos.com.br) antes de
     * usar em material que vá para cliente. */
    --ilos-verde: #0A3D33;

    /* Tons DERIVADOS do laranja. Não são cores de marca — existem só por acessibilidade e
     * retorno visual. Não usar como cor institucional.
     *
     * hover: escurece o botão no clique.
     * texto: o laranja da marca sobre branco dá 2,3:1 e some. Mesmo o tom de hover fica em
     *        3,0:1, que só vale para texto grande — e `.text-primary` é aplicado também em
     *        <div> e <span>, que são texto normal e exigem 4,5:1. Este tom dá 5,1:1. */
    --ilos-laranja-escuro: #DB7C0C;
    --ilos-laranja-texto: #A85A00;

    /* --- A MARCA COMO TEXTO --------------------------------------------------
     *
     * A cor que se escolhe chamando-se "Laranja" tem de ser O LARANJA — o mesmo do logo, na
     * mesma tela. Um tom aproximado, por melhor que fosse a intenção, é lido como erro: quem
     * escolhe compara com a marca que está no canto superior esquerdo.
     *
     * Por isso, no claro estes são EXATAMENTE os `--ilos-*` do manual. Este bloco existe pelo
     * tema ESCURO, onde duas das cinco não sobrevivem: sobre a superfície escura o vinho do
     * manual dá 1,8:1 e o verde 1,2:1 — não é "pouco contraste", é um número que não se vê.
     * Ali, e só ali, entra um tom mais claro DA MESMA MATIZ.
     *
     * O QUE ISSO CUSTA, dito por escrito: um número de KPI é texto grande e negrito, e o piso
     * da WCAG para isso é 3:1. Sobre branco, o laranja da marca dá 2,3:1 e o cinza 2,5:1 — os
     * dois reprovam. Foi uma escolha deliberada de fidelidade à marca, e não um descuido; para
     * um número que precise ser lido por quem tem baixa visão, o `Neutro` continua sendo a
     * opção certa. */
    --marca-laranja: var(--ilos-laranja);    /* 2,3:1 — abaixo do piso, e é o da marca */
    --marca-cinza: var(--ilos-cinza);        /* 2,5:1 — idem                           */
    --marca-vinho: var(--ilos-vinho);        /* 7,4:1                                  */
    --marca-vermelho: var(--ilos-vermelho);  /* 4,5:1                                  */
    --marca-verde: var(--ilos-verde);        /* 12,1:1                                 */

    /* --- Neutros (escala que o app já usava, agora nomeada) ------------------ */
    --n-950: #0F172A;
    --n-900: #1E293B;
    --n-800: #334155;
    --n-700: #475569;
    --n-500: #64748B;
    --n-400: #94A3B8;
    --n-300: #CBD5E1;
    --n-200: #E2E8F0;
    --n-100: #F1F5F9;
    --n-50:  #F8FAFC;

    /* --- Semânticos: é isto que os componentes usam -------------------------- */
    --cor-acao: var(--ilos-laranja);
    --cor-acao-hover: var(--ilos-laranja-escuro);

    /* TEXTO SOBRE LARANJA É ESCURO, e isto não é escolha estética:
     * branco sobre #F7941E dá contraste de 2,3:1 e reprova no WCAG AA (mínimo 4,5:1);
     * #1E293B sobre o mesmo laranja dá 6,3:1 e passa. Com texto branco, o rótulo do botão
     * que dispara a otimização fica ilegível para quem tem baixa visão. */
    --cor-acao-texto: var(--n-900);

    --superficie: #FFFFFF;
    --superficie-2: var(--n-50);
    --borda: var(--n-200);
    --texto: var(--n-900);
    --texto-suave: var(--n-500);

    /* Shell (sidebar) — ACOMPANHA O TEMA.
     *
     * Antes a sidebar era escura nos dois temas, o que dava um visual híbrido: metade clara,
     * metade escura. Agora ela é clara no tema claro e escura no escuro.
     *
     * Isto exige que TUDO dentro da sidebar use estes tokens. Havia cinco pontos com branco
     * cravado (`rgba(255,255,255,…)`) que simplesmente desapareceriam sobre fundo branco — o
     * mesmo tipo de armadilha do `100vh`.
     *
     * Sobre a marca: o manual só permite a marca COMPLETA sobre fundos monocromáticos, e
     * branco é o primeiro exemplo que ele dá (pág. 13). A versão reduzida, que é a usada aqui,
     * aparece sobre branco, preto e cinzas (págs. 32-33). Os dois temas são legítimos. */
    /* Cinza claro, não branco: com a casca e o conteúdo os dois brancos, a sidebar somia
     * dentro da área de trabalho e só a borda separava. O padrão que funciona é o inverso —
     * casca com um tom, conteúdo branco — para o que importa ficar em destaque. */
    --shell-bg: var(--n-100);
    --shell-borda: var(--n-200);
    --shell-texto: var(--n-700);
    --shell-texto-forte: var(--n-950);
    /* Um passo mais escuro que --n-500: sobre a casca cinza aquele tom cai para 4,34:1 e
     * reprova. Este dá 5,03:1 e ainda fica claramente mais suave que o texto do menu. */
    --shell-suave: #5B6A7F;
    --shell-hover: rgba(15, 23, 42, .06);
    --shell-btn-bg: #FFFFFF;
    --shell-btn-borda: var(--n-200);

    /* Acento do item selecionado (faixa e ícone). Sobre a sidebar CLARA, o laranja da marca
     * dá 2,3:1 e reprova no mínimo de 3:1 que o WCAG 1.4.11 exige de elemento gráfico de
     * interface — e esta faixa é justamente o que indica onde você está. Sobre a casca cinza
     * nem o tom de hover basta (2,8:1); este chega a 3,4:1 e continua lendo como laranja. */
    --shell-acento: #C86E08;

    /* --- Forma --------------------------------------------------------------- */
    /* Tipografia de apoio do manual (pág. 10). Nativa no Windows: sem CDN, sem licença e
     * sem atraso de carregamento. O `Inter` que existia antes não está no manual. */
    --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    --raio-sm: 6px;
    --raio-md: 10px;
    --raio-lg: 14px;
    --sombra-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --sombra-2: 0 4px 12px rgba(15, 23, 42, .10);
    /* No claro não há fio de luz: a sombra sozinha já levanta a superfície. O token existe nos
     * dois temas para quem o usa não precisar de um `if` — aqui ele é nada. */
    --realce-topo: none;

    /* A MOLDURA DO GRAFICO — eixo, grade e tooltip.
     *
     * O ECharts desenha num canvas e nao enxerga CSS: quem lhe passa cor e o JavaScript. Ele
     * ja lia as SERIES daqui (ver `paletaAtual` em charts.html); a moldura continuava cravada,
     * em pares `tema === 'dark' ? A : B` espalhados pelo arquivo — e foi por isso que a dash
     * seguiu com eixo e tooltip azuis mesmo depois de a rampa virar neutra.
     *
     * Com token, o JavaScript le uma vez e o tema resolve sozinho, como no resto do app.
     *
     * No claro estes valores sao os que o ECharts ja usava por padrao; declara-los explicita a
     * escolha e da ao escuro um lugar para diferir. */
    --grafico-eixo: var(--n-300);
    --grafico-grade: var(--n-200);
    --grafico-tooltip-bg: rgba(255, 255, 255, .98);
    --grafico-tooltip-borda: var(--n-200);

    /* Altura da barra superior. Mudar aqui muda em todo lugar. */
    --topbar-h: 52px;

    /* ALTURA ÚTIL PARA CONTEÚDO — use isto, não 100vh.
     *
     * Telas que ocupam a janela inteira devem usar var(--altura-conteudo). Um `height: 100vh`
     * dentro da área de conteúdo fica 52px maior que o espaço disponível, produzindo barra de
     * rolagem dupla e conteúdo cortado no rodapé.
     *
     * Exceção legítima: overlays com `position: fixed` que cobrem a tela toda (como o de
     * carregamento do mapa) devem continuar em 100vh — eles não vivem dentro da área de
     * conteúdo. */
    --altura-conteudo: calc(100vh - var(--topbar-h));

    /* MOVIMENTO — as durações e as curvas, num lugar só.
     *
     * Não havia nenhuma: as ~40 transições do projeto traziam a duração cravada, com QUATRO
     * curvas diferentes convivendo. A escala abaixo não foi inventada — é a que o projeto já
     * praticava de fato (0.15 para hover pequeno, 0.2 para link e botão, 0.3 para layout);
     * nomeá-la é o que impede a quinta curva de aparecer na próxima animação.
     *
     * Por enquanto só a barra lateral usa. Varrer o resto é outro trabalho. */
    --dur-rapida: .15s;
    --dur-media: .22s;
    --dur-lenta: .30s;

    /* Padrão do Material: sai devagar, chega firme. Já é a curva mais usada no projeto. */
    --ease-padrao: cubic-bezier(.4, 0, .2, 1);

    /* Expo-out: arranca e assenta. Para o que ENTRA na tela — o painel do celular, os itens
     * da barra ao trocar de modo. Numa entrada, a `--ease-padrao` parece hesitar no começo. */
    --ease-saida: cubic-bezier(.16, 1, .3, 1);

    /* --- SÉRIES DE GRÁFICO ---------------------------------------------------
     *
     * Oito matizes, em ordem FIXA. Nunca cicladas: a nona série vira "Outros", agregada.
     *
     * A paleta anterior tinha quinze cores e reprovava em tudo. Os números, do validador:
     * o par vermelho/vinho ficava em ΔE 5,0 para VISÃO NORMAL (o piso é 15 — eram a mesma cor
     * na prática), nove das quinze liam como cinza, e `#fce3c9` tinha 1,21:1 sobre o branco,
     * ou seja, era invisível. A partir da 11ª série o gráfico simplesmente não mostrava nada.
     *
     * Esta passa em todos os testes nos dois temas, contra as superfícies reais do app:
     * pior par adjacente CVD ΔE 8,6 (claro) e 8,3 (escuro); visão normal 19,6 e 19,3.
     *
     * O laranja da MARCA sobrevive no slot 2 — testado, ele passa. O azul institucional
     * (#043b8a) não: fica em L 0,374, abaixo da faixa 0,43–0,77, e some sobre o branco. Ele
     * continua sendo a cor da casca; série é outra função. */
    --serie-1: #2a78d6;
    --serie-2: #f7941e;
    --serie-3: #1baf7a;
    --serie-4: #eda100;
    --serie-5: #e87ba4;
    --serie-6: #008300;
    --serie-7: #4a3aa7;
    --serie-8: #e34948;

    /* Rampa de MAGNITUDE (mapa de calor): um matiz só, claro -> escuro. Nunca arco-íris — a
     * ordem das cores do arco-íris não é a ordem dos números, e o olho inventa degraus onde
     * não há. Validada: luminosidade monótona, degraus visíveis, ponta clara acima de 2:1. */
    --rampa-1: #86b6ef;
    --rampa-2: #3987e5;
    --rampa-3: #256abf;
    --rampa-4: #184f95;
    --rampa-5: #0d366b;
}

/* Modo escuro: só os tokens semânticos mudam. As cores de marca são as mesmas nos dois
 * temas — laranja institucional não tem "versão escura". */
[data-bs-theme="dark"] {
    /* O QUE O NAVEGADOR DESENHA, e nós não.
     *
     * O menu de um `<select>`, a barra de rolagem, o calendário de um campo de data: nenhum
     * deles passa pelo nosso CSS. Quem os pinta é o navegador, e ele decide pelo `color-scheme`
     * — sem esta linha ele assume claro, e o menu de argumento do editor de fórmulas abria
     * creme sobre a tela escura, com o texto quase ilegível.
     *
     * Uma declaração resolve todos de uma vez, e é a única forma de alcançá-los. */
    color-scheme: dark;

    /* A RAMPA NEUTRA, REFEITA — e é daqui que sai o resto.
     *
     * A do tema claro é a `slate`: cinza com azul dentro. Nos tons 50–300, que é onde o claro a
     * usa, o azul é um sopro. Nos tons 900–950, que é onde o ESCURO a usa, ele é a cor
     * dominante — e a tela inteira saía azul-marinho em vez de escura.
     *
     * Estes são neutros de verdade, com um resto de frio para não puxarem para o sépia. O
     * contraste entre os degraus é o mesmo, então tudo o que deriva deles continua funcionando;
     * o que muda é só a matiz.
     *
     * Redefinir a RAMPA, e não cada token semântico, é o que impede um deles de ficar para
     * trás: eles derivam daqui. */
    --n-950: #0A0A0C;
    --n-900: #141417;
    --n-800: #1E1E23;
    --n-700: #2C2C33;
    --n-500: #71717A;
    --n-400: #A1A1AA;
    --n-300: #D4D4D8;
    --n-200: #E4E4E7;
    --n-100: #F4F4F5;
    --n-50:  #FAFAFA;

    /* AS SUPERFÍCIES DO BOOTSTRAP, TRAZIDAS PARA A NOSSA RAMPA.
     *
     * O app se apoia nelas em mais de 250 lugares — `--bs-tertiary-bg` sozinho pinta os painéis
     * de lista do construtor. No escuro o Bootstrap as define com a paleta DELE (`#212529`,
     * `#2b3035`, `#343a40`), que é outro cinza: mais claro e com outra temperatura. O resultado
     * era um bloco cinza-claro no meio da tela grafite, sem nada explicando por que ele era de
     * outra família.
     *
     * Redefini-las aqui e não caçá-las nos CSS de tela é o mesmo raciocínio da rampa: elas são
     * a fonte, e quem deriva delas passa a seguir junto — inclusive os componentes do próprio
     * Bootstrap (tabela, dropdown, modal), que nenhum CSS nosso alcança.
     *
     * A ORDEM DO BOOTSTRAP É PRESERVADA (body mais fundo, secondary acima, tertiary no meio):
     * inverter a hierarquia faria um hover ficar mais escuro que a superfície que ele destaca. */
    --bs-body-bg: var(--n-950);
    --bs-body-color: var(--texto);
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--texto-suave);
    --bs-secondary-bg: var(--n-800);
    --bs-tertiary-bg: var(--n-900);
    --bs-tertiary-color: var(--n-500);
    --bs-border-color: rgba(255, 255, 255, .09);
    --bs-border-color-translucent: rgba(255, 255, 255, .09);

    /* ELEVAÇÃO, e é aqui que o escuro se inverte em relação ao claro.
     *
     * No claro, `superficie` é branco e `superficie-2` é um cinza levemente mais ESCURO: o
     * segundo plano afunda. No escuro o que afunda desaparece — profundidade se faz com LUZ. Por
     * isso `superficie-2` passa a ser mais CLARA que `superficie`, e a página é o nível mais
     * fundo de todos.
     *
     * Antes as duas eram n-900 e n-950, ou seja, a segunda mais escura que a primeira: o mesmo
     * gesto do tema claro, que no escuro dizia o contrário do que queria. */
    --superficie: var(--n-900);
    --superficie-2: var(--n-800);
    /* Fio de luz, e não um cinza sólido: sobre grafite uma borda opaca vira um traço cinzento
     * em volta de cada caixa, e a tela ganha uma grade que ninguém pediu. */
    --borda: rgba(255, 255, 255, .09);
    --texto: var(--n-100);
    --texto-suave: var(--n-400);

    /* SOMBRA NO ESCURO precisa ser mais funda e mais espalhada: preto a 10% sobre grafite não
     * aparece. E ganha um fio de luz no topo (`realce-topo`), que é o que faz uma superfície
     * parecer levantada quando a sombra sozinha não dá conta. */
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --sombra-2: 0 10px 30px rgba(0, 0, 0, .55);
    --realce-topo: inset 0 1px 0 rgba(255, 255, 255, .05);

    /* A BARRA É O NÍVEL MAIS FUNDO, junto com a página: assim o conteúdo (`superficie`) flutua
     * sobre ela, e a separação vem da luz e não de um traço. É o mesmo gesto do resto do tema. */
    --shell-bg: var(--n-950);
    --shell-borda: rgba(255, 255, 255, .08);
    --shell-texto: rgba(255, 255, 255, .82);
    --shell-texto-forte: #FFFFFF;
    --shell-suave: rgba(255, 255, 255, .55);
    --shell-hover: rgba(255, 255, 255, .08);
    --shell-btn-bg: rgba(255, 255, 255, .05);
    --shell-btn-borda: rgba(255, 255, 255, .12);
    /* Sobre a sidebar escura o laranja da marca chega a 6,4:1 — usa-se ele puro. */
    --shell-acento: var(--ilos-laranja);

    /* As MESMAS oito matizes, repassadas para a superfície escura -- não outra paleta.
     *
     * A anterior trocava o conjunto inteiro no tema escuro (eram os tons 400 do Tailwind):
     * a série 3 ia de verde-petróleo para esmeralda, a 5 de vinho para violeta. Trocar de tema
     * repintava cada série com outra cor, e cor tem de seguir a ENTIDADE, não o tema.
     *
     * O QUE MUDA AQUI É LUMINOSIDADE E SATURAÇÃO, NUNCA A MATIZ — e é o que a regra acima
     * exige, não o que ela proíbe. Sobre grafite, os tons médios do tema claro chegam
     * apagados; a mesma cor precisa de mais luz para ter a mesma presença. A série 6 é o caso
     * extremo: `#008300` sobre `#141417` é quase invisível.
     *
     * Cada uma continua sendo reconhecidamente a mesma cor ao trocar de tema, que é a promessa
     * que interessa a quem lê um gráfico nos dois. */
    /* A marca como texto, no escuro. Tres das cinco sao as do manual e brilham sobre o fundo
     * escuro; o vinho e o verde teriam de ser lidos sobre um fundo quase da mesma luminosidade
     * deles, e por isso sobem -- mesma matiz, so mais claras. */
    --marca-laranja: var(--ilos-laranja);   /* 6,4:1 sobre a superfície escura */
    --marca-cinza: var(--ilos-cinza);       /* 5,8:1                           */
    --marca-vinho: #D96A78;                 /* o da marca daria 1,8:1          */
    --marca-vermelho: #F0555C;              /* 4,3:1                           */
    --marca-verde: #3E9B84;                 /* o da marca daria 1,2:1          */

    --serie-1: #5AA5FF;
    --serie-2: #FFA53D;
    --serie-3: #2FD39B;
    --serie-4: #FFC233;
    --serie-5: #FF87B2;
    --serie-6: #45D164;
    --serie-7: #B0A4FF;
    --serie-8: #FF8F8F;

    /* A moldura do grafico no escuro. Nao sao degraus da rampa: um eixo precisa de luz
     * suficiente para se ler sobre grafite sem competir com os dados, e a rampa nao tem um
     * degrau nessa medida — `--n-700` sumiria e `--n-500` gritaria.
     *
     * O tooltip e quase opaco de proposito: translucido sobre um grafico cheio, o texto dele
     * disputa com as barras que estao atras. */
    --grafico-eixo: #4A4A55;
    --grafico-grade: #2E2E36;
    --grafico-tooltip-bg: rgba(20, 20, 23, .98);
    --grafico-tooltip-borda: rgba(255, 255, 255, .12);

    /* Invertida: sobre fundo escuro, "mais" é mais CLARO. */
    --rampa-1: #256abf;
    --rampa-2: #3987e5;
    --rampa-3: #6da7ec;
    --rampa-4: #9ec5f4;
    --rampa-5: #cde2fb;
}

/* ============================================================================
 * POR QUE ISTO NÃO ESTÁ NO `base.css`
 *
 * Porque o `base.css` é carregado por UM template: o `calculator/base.html`, a casca do app.
 * O portal e o login usam outra casca (`templates/shell_publico.html`), e ela nunca o carregou.
 *
 * O efeito disso passou despercebido por muito tempo: o `portal.css` consome estes tokens
 * treze vezes -- a faixa laranja do topo, o hover dos itens, a marca do projeto atual, o fundo
 * do ícone, o botão da tela de login -- e TODAS as declarações eram descartadas pelo
 * navegador, porque `var(--cor-acao)` sem `--cor-acao` definido é valor inválido. A tela
 * inteira renderizava cinza, e parecia decisão de projeto.
 *
 * Num arquivo próprio, carregado pelas duas cascas, a paleta existe onde quer que se pinte.
 * Copiá-la para dentro do `portal.css` teria resolvido a tela e criado duas verdades sobre a
 * mesma marca -- que divergem na primeira correção.
 * ========================================================================== */