/* ─────────────────────────────────────────────────────────────────────────────
   WPX Fiscal Hub — Tokens de design
   ─────────────────────────────────────────────────────────────────────────────
   Camada ÚNICA de decisão visual. Nenhuma cor, tamanho ou espaço literal deve
   aparecer fora deste arquivo: `wpx.css` e os templates consomem daqui.

   Os valores NÃO foram escolhidos no olho — saíram de amostragem de pixel dos
   mockups (`docs/redesign/TOKENS-MEDIDOS.md`, que registra onde cada um foi
   medido e por quê). O mockup é 2560 px de largura mas representa um layout de
   ~1500 px: a escala de 1,71× está deduzida lá, medindo a altura dos glifos.

   Carregado ANTES de `wpx.css` no `base.html`. Bootstrap continua respondendo
   por grid e acessibilidade básica; aqui trocamos só a pele.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Marca e navegação ─────────────────────────────────────────────────── */
    --wpx-navy:            #03213F;   /* fundo da sidebar */
    --wpx-navy-hover:      #0A2E52;   /* item de sidebar sob o cursor */
    --wpx-navy-line:       #123353;   /* divisória dentro da sidebar */

    /* ── Ação ──────────────────────────────────────────────────────────────── */
    /* O pill do item ativo mediu #0155DA e o botão primário #025BE3: 9 pontos
       de azul de diferença, dentro do ruído de compressão do PNG. Um token só. */
    --wpx-primary:         #0257DE;
    --wpx-primary-hover:   #0148BC;
    --wpx-primary-active:  #013C9E;
    --wpx-primary-soft:    #E6F1FE;   /* fundo de ícone/realce sobre claro */
    --wpx-focus-ring:      rgba(2, 87, 222, 0.35);

    /* ── Superfícies ───────────────────────────────────────────────────────── */
    --wpx-surface-page:    #FAFAFA;
    --wpx-surface-card:    #FFFFFF;
    --wpx-surface-sunken:  #F4F5F7;   /* faixas, cabeçalho de tabela, code */
    --wpx-border:          #EFEFEF;
    --wpx-border-strong:   #E2E4E9;   /* divisória que precisa aparecer */
    --wpx-border-topbar:   #EBEBEB;

    /* ── Texto ─────────────────────────────────────────────────────────────── */
    --wpx-text-strong:     #00061C;   /* H1 */
    --wpx-text:            #0D192F;   /* corpo e títulos de card */
    --wpx-text-label:      #484D60;   /* rótulo de coluna */
    --wpx-text-muted:      #5A6175;   /* subtítulo de página */
    --wpx-text-subtle:     #6D7384;   /* auxiliar, "vs. mês anterior" */
    --wpx-on-navy:         #FFFFFF;
    --wpx-on-navy-muted:   #B7C6DA;   /* rótulo de grupo na sidebar */

    /* ── Semânticas ────────────────────────────────────────────────────────────
       Sempre em par fundo+texto: chip com cor só de fundo obriga o usuário a
       distinguir estado por matiz, o que a proposta de UI/UX proíbe (e a WCAG
       desaconselha). Todo chip leva ícone + texto + cor.                        */
    --wpx-info-bg:         #ECF5FE;
    --wpx-info-fg:         #075AF2;
    --wpx-warn-bg:         #FEF5E5;
    --wpx-warn-fg:         #C77813;
    --wpx-success-bg:      #ECF8EE;
    --wpx-success-fg:      #269560;
    --wpx-danger-bg:       #FDEAEA;
    --wpx-danger-fg:       #C12A33;
    --wpx-neutral-bg:      #F1F2F4;
    --wpx-neutral-fg:      #5A6175;

    /* Versões saturadas, para barra de progresso e ponto de status. */
    --wpx-info-solid:      #0257DE;
    --wpx-warn-solid:      #E8A317;
    --wpx-success-solid:   #2BA45F;
    --wpx-danger-solid:    #D6333D;

    /* ── Tipografia ────────────────────────────────────────────────────────────
       Nada de fonte externa: a topbar não pode piscar esperando CDN, e a stack
       do sistema já resolve pt-BR com acentuação completa.                      */
    --wpx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
    --wpx-font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;

    --wpx-fs-h1:           1.875rem;  /* 30px — título de página */
    --wpx-fs-h2:           1.25rem;   /* 20px — título de seção */
    --wpx-fs-kpi:          2rem;      /* 32px — número de KPI */
    --wpx-fs-card-title:   0.9375rem; /* 15px */
    --wpx-fs-body:         0.875rem;  /* 14px — corpo e célula de tabela */
    --wpx-fs-label:        0.8125rem; /* 13px — rótulo de coluna */
    --wpx-fs-small:        0.75rem;   /* 12px — chip, auxiliar */

    --wpx-fw-normal:       400;
    --wpx-fw-medium:       500;
    --wpx-fw-semibold:     600;
    --wpx-fw-bold:         700;

    --wpx-lh-tight:        1.25;
    --wpx-lh-normal:       1.5;

    /* ── Espaçamento (escala de 4) ─────────────────────────────────────────── */
    --wpx-space-1:         0.25rem;   /*  4px */
    --wpx-space-2:         0.5rem;    /*  8px */
    --wpx-space-3:         0.75rem;   /* 12px */
    --wpx-space-4:         1rem;      /* 16px */
    --wpx-space-5:         1.25rem;   /* 20px */
    --wpx-space-6:         1.5rem;    /* 24px */
    --wpx-space-7:         1.75rem;   /* 28px — respiro lateral do conteúdo */
    --wpx-space-8:         2rem;      /* 32px */

    /* ── Raio ──────────────────────────────────────────────────────────────── */
    --wpx-radius-sm:       6px;       /* input, botão */
    --wpx-radius-md:       10px;      /* card */
    --wpx-radius-lg:       14px;      /* painel, dropzone */
    --wpx-radius-pill:     999px;     /* chip, item ativo da sidebar */

    /* ── Elevação ──────────────────────────────────────────────────────────────
       Discreta de propósito: o mockup separa as áreas por borda e por fundo, não
       por sombra. Sombra forte aqui viraria ruído numa tela cheia de tabelas.    */
    --wpx-shadow-card:     0 1px 2px rgba(3, 33, 63, 0.04);
    --wpx-shadow-raised:   0 4px 12px rgba(3, 33, 63, 0.08);
    --wpx-shadow-overlay:  0 12px 32px rgba(3, 33, 63, 0.16);

    /* ── Métricas do AppShell ──────────────────────────────────────────────── */
    --wpx-sidebar-w:       240px;
    --wpx-sidebar-w-min:   68px;      /* recolhida: só ícones */
    --wpx-topbar-h:        64px;
    --wpx-row-h:           38px;      /* linha de tabela */
    --wpx-control-h:       38px;      /* input e botão, para alinharem na FilterBar */

    /* ── Movimento ─────────────────────────────────────────────────────────── */
    --wpx-transition:      150ms ease;

    /* ── Marcas de terceiros (bancos dos consórcios) ────────────────────────────
       ⚠️ Estes NÃO são tokens da WPX e não entram na paleta do produto: são a
       cor oficial de cada banco, usada só para identificar de quem é o lote no
       cabeçalho das telas de consórcio. Nunca use um destes em botão, chip ou
       estado — o significado de "laranja" aqui é "Itaú", não "atenção".

       Amostrados do próprio arquivo de logo instalado em `static/img/`, não
       escolhidos no olho. Trocar o SVG obriga a reamostrar. */
    --wpx-banco-itau:       #FF6200;
    --wpx-banco-santander:  #EA1D25;
}

/* Quem pediu menos movimento não deve receber transição nenhuma — inclusive as
   nossas, não só as do Bootstrap. */
@media (prefers-reduced-motion: reduce) {
    :root { --wpx-transition: 0ms; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Aliases legados — PONTE, não destino

   Hoje o mesmo nome de variável é declarado em TRÊS lugares com valores
   diferentes: no `<style>` do `base.html`, no topo do `wpx.css` e (a partir
   daqui) neste arquivo. Os nomes antigos apontam para os tokens novos para que
   o redesign avance sem reescrever, no mesmo commit, todas as regras que já
   usam `var(--wpx-azul)`.

   Ao terminar a migração de uma regra, troque o nome legado pelo token e
   remova a linha correspondente daqui. Este bloco deve terminar vazio.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --wpx-azul:        var(--wpx-navy);
    --wpx-azul-claro:  var(--wpx-primary);
    --wpx-azul-hover:  var(--wpx-navy-hover);
    --wpx-cinza:       var(--wpx-surface-page);
    --wpx-borda:       var(--wpx-border);
    --wpx-texto-claro: var(--wpx-on-navy-muted);
}