/* ============================================================================
   dj-ui — base visual compartilhada entre o portal_cliente e o
   central_contadores_erp.

   FONTE DA VERDADE: este arquivo vive no portal_cliente e e' COPIADO para o
   central por `docs/dj-ui/sincronizar.sh`. Nao edite a copia — ela sera'
   sobrescrita. A paleta ja' nasceu no central e derivou por ter sido copiada na
   mao; a partir daqui a copia e' automatica.

   O que ESTA' aqui: a escala do sistema (tipografia, espacamento, raio) e os
   nomes SEMANTICOS derivados do core.

   O que NAO esta' aqui, de proposito: as cores de tema. Cada projeto tem as
   suas — o portal tem claro/escuro porque a cor vem da marca do cliente; o
   central tem 12 temas porque quem passa o dia nele gosta de escolher. O
   contrato entre os dois sao os DEZ nomes do core, que ja' batem:

       --bg  --panel  --panel-2  --text  --muted  --line
       --primary  --primary-strong  --danger  --shadow

   ⚠️ O bloco semantico fica em `body`, nao em `:root`, e isso e' proposital:
   no portal o tema mora em `body[data-theme]` e no central em `html[data-theme]`.
   Em `body` os dois resolvem certo — no portal porque e' o mesmo elemento, no
   central porque `body` herda de `html`. Em `:root` o portal quebraria: o
   `:root` dele carrega o tema escuro como padrao e o claro deixaria de valer.
   ============================================================================ */

/* ── Escala do sistema ──────────────────────────────────────────────────────
   Tipografia em 8 degraus com line-height casado (havia 10+ tamanhos soltos,
   com meio-pixel: 11.5, 12.5, 13.5). Espacamento em multiplos de 4. Raio num
   lugar so', para a interface ter o mesmo acabamento em todo canto.
   Referencia: SaaSBold (Inter, cinzas neutros, borda discreta). */
:root{
    --fs-2xs:10.5px;  --lh-2xs:1.45;
    --fs-xs:11.5px;   --lh-xs:1.45;
    --fs-sm:12.5px;   --lh-sm:1.5;
    --fs-md:13.5px;   --lh-md:1.55;
    --fs-lg:15px;     --lh-lg:1.55;
    --fs-xl:18px;     --lh-xl:1.4;
    --fs-2xl:22px;    --lh-2xl:1.3;
    --fs-3xl:28px;    --lh-3xl:1.2;

    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
}

/* ── Semanticos derivados do core (re-resolvem a cada tema) ──────────────── */
body{
    --panel-soft:var(--panel-2);
    --panel-strong:var(--panel-2);
    --border:var(--line);
    --border-strong:var(--line);
    --muted-strong:var(--muted);
    --primary-hover:var(--primary-strong);
    --radius:var(--r-lg);
    --radius-sm:var(--r-sm);

    /* Cor de DADO, nao da marca: verde de sucesso, ambar de atencao, amarelo da
       estrela de avaliacao, roxo do KPI e as duas extras de grafico. Tem nome
       proprio para o JS nunca reescrever hex. */
    --success:#22c55e;
    --warning:#f59e0b;
    --star:#f5b301;
    --chart-1:#38bdf8;
    --chart-2:#a855f7;
    /* ⚠️ Roxo do KPI. O nome era `--accent` e NAO pode voltar a ser: no
       central_contadores_erp `--accent` ja' significa AZUL de destaque, com
       fallback em 22 lugares dos templates (seta de ordenacao, item ativo da
       ajuda, contorno de card em cobranca). Publicar um `--accent` roxo aqui
       pintou tudo aquilo de roxo la'. Nome generico em base compartilhada e'
       armadilha: o token tem de dizer PARA QUE serve. */
    --kpi-roxo:#8b5cf6;

    --card-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 18px rgba(0,0,0,.10);
    --card-shadow-hover:0 2px 6px rgba(0,0,0,.16),0 14px 32px rgba(0,0,0,.16);
}