/* tema-tokens.css · FONTE ÚNICA dos tokens de cor/superfície (tema "Synax data-grade").

   Por que este arquivo existe
   ---------------------------
   Estes tokens viviam duplicados à mão no <style> de templates/base.html e em
   static/css/dashboard.css · o comentário do base.html admitia "Espelha
   static/css/dashboard.css e tema.py". O espelho quebrou: 7 dos 36 tokens já divergiam, e
   --sub-on-dark existia só no dashboard.css, então templates/login.html (que usa
   var(--sub-on-dark)) renderizava os bullets em preto herdado. Agora há um arquivo só.

   Consumidores (carregam este CSS ANTES de qualquer folha que use os tokens):
   - templates/base.html    · telas admin/config + Mirante e Poker (que dela herdam)
   - static/dashboard.html  · o SPA, antes de dashboard.css

   Ordem importa
   -------------
   Este arquivo traz os DEFAULTS. Quem sobrepõe, por ordem crescente de precedência:
     1. este arquivo (:root e :root[data-theme="light"])
     2. <style id="tema-marca"> e <style id="tema-cliente">   · paleta do tenant
     3. vars aplicadas INLINE no <html> por static/js/tema-nucleo.js  · sempre vencem
   Por isso NÃO mova o <link> deste arquivo para depois dos <style> de marca/cliente: os
   defaults passariam a vencer a paleta do tenant e o white-label pararia de funcionar.

   Relação com tema.py
   -------------------
   tema.py:css_vars gera em runtime um subconjunto destes tokens (accent, accent-deep,
   good, good-deep, br-green, br-green-deep, warn, bad, bg, bg-2, bg-light, bg-2-light,
   accent-soft, ring). Para esses, o valor aqui é apenas o DEFAULT de quando não há tema de
   cliente/marca. Os demais (superfícies, tinta, sombras, sidebar) existem só aqui.
   Atenção: --bg/--bg-2 abaixo são do modo ESCURO; o modo claro vem do bloco
   :root[data-theme="light"], e a variante do tenant chega via --bg-light (ver tema-nucleo.js). */

:root {
  /* Escala de texto/interface (controle "Tamanho do texto"). 1 = Padrão, idêntico ao
     atual. O tema-nucleo.js sobrepõe --fs-scale inline no <html> conforme a escolha salva
     (dash-fs); a regra body{zoom:...} no fim deste arquivo faz texto + espaçamento
     crescerem juntos. Default aqui garante zoom:1 quando não há escolha. */
  --fs-scale: 1;
  /* A TELA DE VERDADE sob esse zoom (v852) · use no lugar de 100vw/100vh em tudo que
     precisa caber na janela. Explicação completa na regra body{zoom} no fim do arquivo. */
  --vw-tela: calc(100vw / var(--fs-scale, 1));
  --vh-tela: calc(100vh / var(--fs-scale, 1));
  /* Tema "Synax data-grade" (default): superfícies navy escuras, cards escuros,
     tinta clara, âncoras azul/ciano/esmeralda/âmbar/rosa. Ver tema.py CORES_PADRAO. */
  --bg: #0A1120;
  --bg-2: #0E1830;
  --bg-deep: #060B18;                        /* fim do gradiente do fundo (v606, protótipo) */
  /* Cards translúcidos (frosted glass): o --panel deriva de --surf (tinta OPACA do card).
     O default é navy (#2D4066 == rgba(45,64,102)); cada paleta injeta a sua via css_vars()
     (cinza, verde, violeta, quente…). O degradê da marca aparece através dos cards. */
  --surf: #2D4066;                           /* tinta do card · tema.py emite por paleta */
  --panel: color-mix(in srgb, var(--surf) 58%, transparent);
  --panel-2: color-mix(in srgb, color-mix(in srgb, var(--surf), #fff 6%) 50%, transparent);
  --panel-solid: #1A2740;                    /* superfície OPACA (ex.: stroke de ponto em gráfico) */
  /* Versões OPACAS de --panel/--panel-2, na MESMA proporção, compostas sobre --bg em vez de
     transparent. Para quem fica sticky sobre conteúdo que rola (coluna fixa de tabela/Gantt):
     com o vidro fosco, o que rola aparece por baixo. Diferente de --panel-solid, que é um navy
     fixo · estas seguem o --surf que o tema.py emite por paleta, então respeitam a marca. */
  --panel-op: color-mix(in srgb, var(--surf) 58%, var(--bg));
  --panel-2-op: color-mix(in srgb, color-mix(in srgb, var(--surf), #fff 6%) 50%, var(--bg));
  /* v653 · lift de contraste: bordas mais firmes (eram .16/.28) para os cards/inputs
     descolarem do fundo navy sem mexer no vidro fosco. Vale para todo tenant (valor
     neutro em slate, legível sobre qualquer tinta escura de --surf). */
  --border: rgba(191,205,232,0.22);
  --border-strong: rgba(191,205,232,0.34);   /* borda de ênfase (swatches, inputs) */
  --card-blur: blur(16px) saturate(128%);    /* desfoque do vidro fosco (cards/overlays) */
  --card-hi: rgba(255,255,255,0.10);         /* brilho interno no topo do card (mais lift → volta a flutuar) */
  --card-ring: rgba(120,150,210,0.10);       /* aro de luz externo · é ele que faz o card "flutuar" */
  --grid-line: rgba(191,205,232,0.10);       /* linhas de grade dos gráficos · mais sutil que --border */
  --sel-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A6B2CB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  /* Texto DENTRO dos cards (agora escuros → tinta clara) */
  --text: #F1F5FC;
  /* v653 · texto secundário mais claro (eram #B4C0D8 / #8493B1): tira dicas, rótulos e
     chips não selecionados do quase-ilegível. Ganho de legibilidade puro, sem alterar a
     identidade do tema. */
  --text-dim: #C6D2E6;
  --text-faint: #9DAAC6;
  /* Texto FORA dos cards (sobre fundo navy) */
  --text-on-dark: #F1F5FC;
  --dim-on-dark: #C6D2E6;
  --sub-on-dark: #D2DBEA;
  --faint-on-dark: #9DAAC6;
  --border-on-dark: rgba(191,205,232,0.22);
  --accent: #2563EB;
  --accent-deep: #1D4ED8;
  --accent-soft: rgba(37,99,235,0.12);
  --ring: rgba(37,99,235,.32);
  --good: #22D3EE;
  --good-deep: #0E7490;
  /* Tinta de TEXTO legível sobre card (o -deep foi calibrado p/ fundo claro; sobre
     card escuro falha o contraste). Padrão escuro: variantes claras. Ver bloco claro. */
  --good-ink: #67E8F9;                       /* ciano legível como texto sobre card escuro */
  --accent-ink: #93B4FF;                     /* azul legível como texto sobre card escuro */
  --warn: #FBBF24;
  --bad: #FB7185;
  /* v687: o par -ink existia só para good/accent, e faltava justo onde mais dói — os chips
     de status pintam o TEXTO com a mesma cor do fundo tingido ("estourou" vermelho sobre
     vermelho, "risco" âmbar sobre âmbar). Derivado com color-mix em vez de hex fixo para
     seguir a paleta do tenant no white-label. */
  --warn-ink: color-mix(in srgb, var(--warn) 74%, white);
  --bad-ink: color-mix(in srgb, var(--bad) 72%, white);
  /* v699: par escuro da tinta verde · sobre o card escuro o pior caso fica em 8.4:1 */
  --pos-ink: color-mix(in srgb, var(--br-green) 86%, white);
  --neutral: #93A1BD;
  --br-green: #34D399;
  --br-green-deep: #059669;
  /* Roxo derivado (tipo "Feature"/escopo). Vivia só em static/dashboard/portfolio.css,
     onde era redeclarado em três blocos · aqui vira token único, com a MESMA fórmula,
     para poder ganhar tinta calibrada no tema claro. */
  --purple: color-mix(in srgb, var(--accent) 55%, var(--bad));
  /* v700 · as três tintas que faltavam na família. No ESCURO elas são a IDENTIDADE da cor
     de origem: quem trocar a cor de gráfico pela tinta correspondente não move um pixel
     no tema escuro. O ganho está no bloco claro, onde a cor de gráfico reprova como
     texto sobre o card branco (--neutral 2,60:1, --info dependente da paleta do tenant). */
  --neutral-ink: var(--neutral);
  --purple-ink: var(--purple);
  /* --info é apelido de --accent-deep (portfolio.css). A tinta segue o mesmo caminho. */
  --info-ink: var(--accent-deep);
  /* ---- APELIDOS de tokens que NUNCA existiram (v700) ------------------------------
     `--dim`, `--faint`, `--line`, `--crit`, `--sidebar` e `--accent-2` aparecem em ~76
     lugares (cerimonias-hub.css, helpdesk.css, dashboard.css) e não estavam definidos em
     canto nenhum do produto: TODO uso caía no hex cravado como fallback, calibrado para
     fundo ESCURO. No tema claro isso pintava, entre outros, `--dim` a 2,20:1 sobre card
     branco, chip navy dentro de card branco (`--line`) e o `.hd-fsel option` com tinta
     escura sobre `--sidebar` navy (1,00:1 · texto invisível).
     Os valores AQUI são os fallbacks que o cerimonias-hub.css (69 dos 76 usos) já
     aplicava, então o tema escuro daquele arquivo fica byte-a-byte. Os poucos usos com
     fallback DIFERENTE (helpdesk.css usava #6B7280 para --dim, dashboard.css #94A3B8
     para --faint) foram trocados no ponto de uso pelo token de texto correto
     (--text-dim / --text-faint), que é o que aquelas regras queriam dizer. */
  --dim: #9FB0CC;
  --faint: #63748F;
  --line: #213049;
  --crit: #E5604D;
  --sidebar: #0F1A2E;
  --accent-2: #7A5CF0;
  /* ---- cores dos ÍCONES da árvore de navegação (v700) -----------------------------
     Vieram cravadas de static/css/dashboard.css. Viraram token porque precisavam mudar
     por MODO, e um segundo seletor `:root[data-theme=light] .nav-...` inverteria a
     precedência entre "cor do nível" e "cor da tela" (a regra do modo ganharia da regra
     mais específica e todo ícone ativo viraria azul). Aqui no escuro os valores são
     EXATAMENTE os de antes. */
  --ic-cli: #5B89C4; --ic-proj: #D29A3A; --ic-squad: #9B7FC4;
  --ic-dash: #5B89C4; --ic-okrs: #38B2A0; --ic-visao: #5FAE5C;
  --ic-road: #9B7FC4; --ic-help: #5BB6D4; --ic-squads: #CE7BA6;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 14px 36px rgba(0,0,0,0.48), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-lg: 0 30px 72px rgba(0,0,0,0.58);
  --radius: 16px;
  --sb-w:300px; --sb-wc:76px;
  /* v972 · FOLGA DO BALÃO no rail de ícones. Com a barra recolhida a árvore volta a ser um
     contêiner de ROLAGEM (sem isso ela vaza por baixo do rodapé e os ícones se sobrepõem),
     e quem recorta um contêiner de rolagem é a CAIXA DE PADDING dele. Esta medida estica
     esse padding para a direita · uma margem negativa de mesmo valor devolve a largura, de
     forma que a coluna não muda de tamanho · e o balão do `data-tip`, que nasce fora do
     rail, volta a caber dentro do recorte. Fica aqui, e não nas duas folhas da barra,
     porque as duas precisam do MESMO valor (CLAUDE.md, "duas implementações"). */
  --sb-dica-folga:240px;
  /* Menu lateral: usa a cor escolhida pelo tenant (--sb-bg-user, emitida pelo css_vars) ou,
     quando ausente, deriva do --bg como sempre (translúcido p/ o glass do backdrop-filter). */
  --sb-bg:color-mix(in srgb, var(--sb-bg-user, var(--bg)), transparent 16%); --sb-item:rgba(233,237,246,.05); --sb-item-hover:rgba(233,237,246,.09);
  /* item de menu ATIVO (v606, protótipo). Deriva do accent (não é hex fixo): css_vars()
     não emite --sb-item-on-bg, então o azul cravado aqui ignorava o white-label e pintava
     de azul o menu ativo de todo tenant com paleta não-azul. Para o accent padrão o
     resultado é o mesmo rgba(37,99,235,0.20) de antes. */
  --sb-item-on-bg: color-mix(in srgb, var(--accent) 20%, transparent);
  /* Controles contínuos do degradê (sliders no editor de tema):
       --bg-forca  : intensidade (multiplicador). 1 = histórico; 0 = fundo quase liso.
       --bg-eq     : equilíbrio accent×good (0..1). .5 = neutro; →1 realça accent, →0 realça good.
     Derivamos dois fatores; nos defaults (forca 1, eq .5) ambos valem 1.0 → color-mix idêntico
     ao degradê fixo anterior (identidade byte-a-byte quando o tenant não mexe nos sliders). */
  --bg-forca: 1; --bg-eq: .5;
  --bg-fa: calc(var(--bg-forca) * var(--bg-eq) * 2);
  --bg-fg: calc(var(--bg-forca) * (1 - var(--bg-eq)) * 2);
  /* Fundo: gradiente derivado da PALETA (accent/good), acompanha o white-label. O DEFAULT
     (v617) é "Duas cores": accent num canto, good no oposto, e o linear vai accent→bg→good.
     A variante "Sutil" (o degradê antigo, v606) é opt-in por data-bg="sutil" (ver abaixo).
     O tema-nucleo.js lê --fundo (emitido por css_vars) e põe data-bg no <html>. */
  --bg-layers:
    radial-gradient(1180px 880px at -4% -8%, color-mix(in srgb, var(--accent) calc(40% * var(--bg-fa)), transparent), transparent 56%),
    radial-gradient(1180px 900px at 104% 108%, color-mix(in srgb, var(--good) calc(38% * var(--bg-fg)), transparent), transparent 58%),
    radial-gradient(760px 620px at 108% -6%, color-mix(in srgb, var(--good) calc(22% * var(--bg-fg)), transparent), transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) calc(26% * var(--bg-fa)), var(--bg)) 0%, var(--bg) 48%, color-mix(in srgb, var(--good) calc(24% * var(--bg-fg)), var(--bg-deep)) 100%);
}
/* Variante SUTIL do fundo (o degradê discreto pré-v617) · opt-in por tenant via data-bg. */
:root[data-bg="sutil"] {
  --bg-layers:
    radial-gradient(680px 440px at 0% -16%, color-mix(in srgb, var(--accent) calc(16% * var(--bg-fa)), transparent), transparent 46%),
    radial-gradient(640px 440px at 110% -2%, color-mix(in srgb, var(--good) calc(12% * var(--bg-fg)), transparent), transparent 46%),
    radial-gradient(760px 760px at 98% 120%, color-mix(in srgb, var(--accent) calc(14% * var(--bg-fa)), transparent), transparent 52%),
    linear-gradient(165deg, var(--bg-2) 0%, var(--bg) 50%, var(--bg-deep) 100%);
}
/* ----- TEMA CLARO (opcional via toggle: cards brancos, fundo claro) ----- */
:root[data-theme="light"] {
  /* Campo slate; card BRANCO e opaco. Ver v699 abaixo antes de clarear o fundo de novo.
     ------------------------------------------------------------------------------
     v699 · o card não se separava da página. Medido no navegador: o card compunha
     #FBFCFD sobre um fundo #E7ECF4, ou seja 1,15:1 — o card ERA a página. E os quatro
     sinais que definem uma superfície flutuante estavam todos perto de zero ao mesmo
     tempo: superfície quase igual ao fundo, borda em 1,26:1, anel em 0.06 e sombra em
     0.06. A borda sozinha não resolve: mesmo em alfa 0.38 ela chega a 2,29:1, e para
     alcançar os 3:1 da WCAG 1.4.11 viraria um contorno pesado em TODA divisória do
     produto, já que este token também desenha réguas de tabela e separadores.
     A saída foi reequilibrar o que ESTE arquivo controla: card opaco, borda e anel
     visíveis, sombra com presença.
     ATENÇÃO ao mexer no fundo: no tema claro `--bg` NÃO vem daqui. A paleta do tenant
     (tema.py) emite `--bg-light`, e o tema-nucleo o aplica em `--bg` no modo claro —
     medido: alterar `--bg` neste bloco não muda nada na tela. Aprofundar o campo do
     tema claro é decisão de PALETA, no tema.py, e chega ao usuário só quando o
     `tema_css` da sessão é regerado.
     No tema ESCURO nada disso muda: lá a receita translúcida funciona, porque o navy
     do card já destaca do fundo. */
  --bg: #E7ECF4;
  --bg-2: #DDE4EF;
  --bg-deep: #CBD4E4;
  --surf: #FFFFFF;                            /* card claro · tema.py emite surf_light por paleta */
  --panel: color-mix(in srgb, var(--surf) 96%, transparent);
  --panel-2: color-mix(in srgb, color-mix(in srgb, var(--surf), #000 5%) 92%, transparent);
  --panel-solid: #FFFFFF;
  --panel-op: color-mix(in srgb, var(--surf) 96%, var(--bg));
  --panel-2-op: color-mix(in srgb, color-mix(in srgb, var(--surf), #000 5%) 92%, var(--bg));
  --border: rgba(23,34,60,0.22);
  --border-strong: rgba(23,34,60,0.32);
  --card-blur: blur(14px) saturate(118%);
  --card-hi: rgba(255,255,255,0.85);
  --card-ring: rgba(23,34,60,0.10);
  --grid-line: rgba(23,34,60,0.09);
  --sel-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23566079' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --text: #111A2E;
  --text-dim: #46516C;
  /* v699: era #6B7691, que dava 3,83:1 sobre a página e 4,42:1 sobre o card — reprovava
     nos dois, e é o token dos rótulos e legendas, o texto pequeno que mais precisa de
     contraste. Agora 4,71:1 sobre a página e 5,43:1 sobre o card. */
  --text-faint: #5D6881;
  /* TINTAS DE TEXTO no tema claro (v697 · recalibradas na v700).
     A premissa da v697 ("sobre card claro o -deep já é legível") não se sustentava: o
     -deep é DERIVADO da cor de marca do cliente, então a legibilidade dependia da
     paleta. Medindo as 13 paletas contra o card branco, 8 ficavam abaixo do mínimo de
     4,5:1 do WCAG AA, a pior em 2,64:1.

     v700 · A CALIBRAGEM ANTERIOR MEDIA CONTRA O FUNDO ERRADO. Ela mirava #FFFFFF, mas
     quase todo consumidor destas tintas escreve sobre um TINT DA PRÓPRIA COR
     (`background: color-mix(in srgb, var(--bad) 13%, transparent)` e afins), que compõe
     sobre o card e escurece o fundo o bastante para comer a margem inteira. Medido no
     navegador: `.alert.err` dava 4,43 e não os 5,01 que a fórmula prometia; o
     `.pf-skin .chip.w`, que fica sobre a PÁGINA e não sobre o card, dava 4,34. Dos 56
     consumidores catalogados, 37 reprovavam.
     Agora cada porcentagem é a MAIOR (menos escurecimento, mais cor) que ainda passa
     4,55:1 no pior par (paleta × componente), medindo a tinta contra o TINT COMPOSTO
     sobre a superfície real de cada componente: card (--panel), drawer (--panel-2) ou
     página (--bg). Os comentários abaixo trazem o pior caso REAL, não o "sobre branco".
     Mexer nelas exige refazer essa medição · ver tests/test_tema_contraste_tintas.py,
     que hoje reproduz exatamente este cálculo e trava a propriedade. */
  --good-ink: color-mix(in srgb, var(--good-deep) 58%, #0A1120);      /* pior 4,65 · .hd-pc */
  --accent-ink: color-mix(in srgb, var(--accent-deep) 66%, #0A1120);  /* pior 4,61 · .pf-skin .dd-btn .cnt */
  /* v699 mirava o chip cinza da etiqueta "DoD ≥S10"; a v700 mantém essa restrição e
     acrescenta o chip âmbar do pf-dw, que fica sobre o --panel-2 do drawer. */
  --warn-ink: color-mix(in srgb, var(--warn) 44%, #0A1120);           /* pior 4,68 · .pf-dw .chip.w */
  --bad-ink: color-mix(in srgb, var(--bad) 54%, #0A1120);             /* pior 4,71 · .pf-dw .chip.b */
  /* v699: a família tinha quatro membros e o VERDE de sucesso ficou de fora, mesmo
     sendo usado como texto em 10 lugares. Sem tinta, ele saía na cor de gráfico. */
  --pos-ink: color-mix(in srgb, var(--br-green) 46%, #0A1120);        /* pior 4,61 · .rel-pill de produção */
  /* v700: completam a família.
       --neutral-ink → --neutral é hex FIXO, então não varia por tenant, mas o TINT dele
                       vai a 22% no chip "sem dado" do portfólio.
       --info-ink    → --info é apelido de --accent-deep, e o tint dele é do próprio
                       accent-deep (mais escuro que o accent), então precisa de mais
                       escurecimento que o --accent-ink apesar da mesma cor de base.
       --purple-ink  → o roxo derivado (accent+bad) chegava a 2,55:1 cru na paleta ciano. */
  --neutral-ink: color-mix(in srgb, var(--neutral) 52%, #0A1120);     /* pior 4,67 · .pf-dw .chip.n */
  --info-ink: color-mix(in srgb, var(--accent-deep) 62%, #0A1120);    /* pior 4,61 · .okr-tag.esp */
  --purple-ink: color-mix(in srgb, var(--purple) 56%, #0A1120);       /* pior 4,69 · .pf-dw .ty.feat */
  /* Contraparte CLARA dos apelidos declarados no bloco escuro (ver o comentário longo
     lá em cima). Aqui é onde o resíduo do tema claro morre de vez. */
  --dim: var(--text-dim);                    /* 7,91:1 no card · 6,67:1 na página */
  --faint: var(--text-faint);                /* 5,58:1 no card · 4,70:1 na página */
  /* --line desenha réguas E vira fundo de chip (color-mix 55% sobre o card): o valor
     abaixo dá chip #E2E8F0, onde --dim lê a 6,42:1 e --faint a 4,53:1. */
  --line: #CBD5E4;
  --crit: var(--bad-ink);                    /* mesma tinta calibrada do vermelho */
  /* fundo OPACO (é o background de <option>, que não aceita translúcido) */
  --sidebar: var(--panel-solid);
  --accent-2: #644DC6;                       /* roxo "backlog" · 6,14:1 no card */
  /* Ícones da árvore. Sobre a barra lateral clara (que compõe ~#F0F5FD) os tons do bloco
     escuro mediam de 2,11 a 3,08:1 e reprovavam a WCAG 1.4.11, que pede 3:1 para
     elemento de INTERFACE e não só para texto: helpdesk 2,11 · projeto 2,28 · okrs 2,38
     · visão 2,49 · squads 2,74 · roadmap 3,08. Cada valor abaixo é o MESMO tom puxado
     para o navy do produto até passar de 3,45:1. O fundo do item ativo deriva de
     var(--ic), então acompanha sozinho. */
  --ic-cli: #5985BF;    /* 3,46:1 */   --ic-proj: #A67C34;   /* 3,46:1 */
  --ic-squad: #9177B9;  /* 3,46:1 */   --ic-dash: #5985BF;
  --ic-okrs: #2E9085;   /* 3,51:1 */   --ic-visao: #509251;  /* 3,45:1 */
  --ic-road: #9177B9;                  --ic-help: #468BA5;   /* 3,49:1 */
  --ic-squads: #B36C93; /* 3,50:1 */
  --text-on-dark: #111A2E;
  --dim-on-dark: #46516C;
  --sub-on-dark: #2E374C;
  /* v699: acompanha --text-faint. No claro estes tokens "-on-dark" viram tinta escura, e
     este era o mesmo #6B7691 que reprovava (3,83:1 sobre a página). É o token dos
     rótulos da barra lateral e do rodapé. */
  --faint-on-dark: #5D6881;
  --border-on-dark: rgba(23,34,60,0.14);
  --sb-bg:color-mix(in srgb, rgba(255,255,255,.84), var(--accent) 5%); --sb-item:rgba(26,36,56,.045); --sb-item-hover:rgba(26,36,56,.085);
  --sb-item-on-bg: color-mix(in srgb, var(--accent) 10%, transparent);   /* deriva do accent · ver bloco escuro */
  /* v699: sombras com presença. No claro elas eram quase transparentes (0.05/0.06), e a
     sombra é justamente o que sustenta a leitura de "superfície flutuante" quando o card
     é branco sobre um campo claro · o contraste de luminância sozinho não dá conta. */
  --shadow-sm: 0 1px 2px rgba(15,25,50,0.10), 0 2px 8px rgba(15,25,50,0.07);
  --shadow-md: 0 10px 30px rgba(15,25,50,0.16), 0 2px 6px rgba(15,25,50,0.09);
  --shadow-lg: 0 26px 64px rgba(15,25,50,0.22);
  --bg-layers:
    radial-gradient(1180px 880px at -4% -8%, color-mix(in srgb, var(--accent) calc(30% * var(--bg-fa)), transparent), transparent 58%),
    radial-gradient(1180px 900px at 104% 110%, color-mix(in srgb, var(--good) calc(34% * var(--bg-fg)), transparent), transparent 58%),
    radial-gradient(760px 620px at 106% -6%, color-mix(in srgb, var(--good) calc(20% * var(--bg-fg)), transparent), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) calc(18% * var(--bg-fa)), var(--bg)) 0%, var(--bg) 50%, color-mix(in srgb, var(--good) calc(22% * var(--bg-fg)), var(--bg-deep)) 100%);
}
/* Variante SUTIL do fundo · tema claro */
:root[data-theme="light"][data-bg="sutil"] {
  --bg-layers:
    radial-gradient(900px 560px at 3% -12%, color-mix(in srgb, var(--good) calc(20% * var(--bg-fg)), transparent), transparent 55%),
    radial-gradient(780px 520px at 106% -6%, color-mix(in srgb, var(--accent) calc(16% * var(--bg-fa)), transparent), transparent 52%),
    radial-gradient(820px 820px at 96% 118%, color-mix(in srgb, var(--accent) calc(14% * var(--bg-fa)), transparent), transparent 58%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg) 62%, #fff) 0%, var(--bg) 55%, var(--bg-deep) 100%);
}

/* ----- ESCALA DE TEXTO/INTERFACE (controle "Tamanho do texto") -----
   `zoom` escala texto E espaçamento juntos, como o zoom nativo do navegador (não quebra
   position:fixed, ao contrário de transform:scale). Default --fs-scale:1 → zoom:1, sem
   qualquer mudança visual. O tema-nucleo.js define --fs-scale inline no <html> a partir de
   dash-fs; body herda. Aplicado no <body> (não no <html>) para não afetar a barra de
   rolagem da viewport. Nota: a exportação offline/PPTX usa o Padrão (1), sem distorção. */
body { zoom: var(--fs-scale, 1); }

/* ----- A TELA DE VERDADE, sob o zoom acima (v852) -----
   `zoom` no body tem um efeito que não é óbvio: **unidade de viewport não é afetada por
   zoom**. Dentro de um corpo com `zoom:1.2`, `100vw` continua valendo a janela inteira em
   px de CSS, e o navegador ainda multiplica isso por 1,2 na hora de pintar · o elemento
   sai 20% maior que a tela. Em elemento `position:fixed` (gaveta, modal, popover) isso
   corta conteúdo pela borda, e não há ajuste dentro da caixa que resolva, porque o que
   está grande demais é a caixa.
   Medido em 13/08/2026, gaveta de work item em tela cheia, janela 1600x900 com o texto em
   "Extra": 1920x1080, 320px fora à direita e 180px abaixo.
   Por isso os tokens `--vw-tela` / `--vh-tela` (declarados no :root lá em cima, junto do
   --fs-scale): eles são a tela REAL, já descontada a escala · use-os no lugar de `100vw`/
   `100vh` em qualquer coisa que precise caber na janela. Frações saem de `calc()`:
   `min(720px, calc(var(--vw-tela) * .95))`.
   Onde NÃO precisa: `max-width` em vw de elemento de FLUXO (o cap só deixa de vincular, não
   corta), e as telas de Mirante/Poker, que não carregam esta folha e portanto não têm zoom.
   `frontend/src/__tests__/azwi_criar_pai_e_corte.test.js` é a catraca da lista de caixas. */
