/* Tokens do painel: ponte entre a marca do produto e os componentes.
   A marca vem de /painel/marca/tokens.css (cópia de produtos/vendas-em-direto/marca/tokens.css, variáveis --vd-*, carregada antes deste ficheiro).
   Os componentes em painel.css só usam as variáveis abaixo. Para trocar a marca: substituir marca/tokens.css (os nomes --vd-* são definitivos). */
:root {
  /* Cor */
  --tinta: var(--vd-cor-texto);
  --texto-2: var(--vd-cor-texto-suave);
  --fundo: var(--vd-cor-fundo);
  --superficie: var(--vd-cor-superficie);
  --superficie-2: var(--vd-papel);
  --linha: var(--vd-cor-linha);
  --linha-campo: var(--vd-linha-forte);
  --acento: var(--vd-cor-aovivo);            /* indicadores (separador ativo, contadores, guia) */
  --acento-texto: var(--vd-cor-acao-texto);  /* texto sobre o acento */
  --acao: var(--vd-cor-acao);                /* botão principal */
  --acao-hover: var(--vd-cor-acao-hover);
  --acao-texto: var(--vd-cor-acao-texto);
  --ligacao: var(--vd-cor-ligacao);
  --foco: var(--vd-cor-foco);
  --ok: var(--vd-sucesso); --ok-f: var(--vd-sucesso-fundo);
  --aviso: var(--vd-aviso); --aviso-f: var(--vd-aviso-fundo); --aviso-borda: var(--vd-aviso);
  --erro: var(--vd-erro); --erro-f: var(--vd-erro-fundo);
  --info: var(--vd-info); --info-f: var(--vd-info-fundo);
  --neutro: var(--vd-grafite); --neutro-f: var(--vd-linha);
  --aovivo: var(--vd-cor-aovivo);
  --loja: var(--vd-tinta);                   /* cor da loja (vem das definições; só acento no topo da barra lateral) */
  --sobre-escuro: var(--vd-branco); --sobre-escuro-2: var(--vd-nevoa); --sobre-escuro-hover: var(--vd-noite-linha);
  --escuro-2: var(--vd-noite);
  --primario-hover: var(--vd-cor-acao-hover); --perigo-hover: var(--vd-erro);
  --veu: rgba(23, 20, 31, .5);
  /* Tipo */
  --fonte: var(--vd-fonte-texto);
  --fonte-titulos: var(--vd-fonte-titulos);
  --numeros: var(--vd-numeros);
  --t-pequeno: .875rem; --t-corpo: 1rem; --t-h3: 1.0625rem; --t-h2: 1.1875rem; --t-h1: 1.5rem; --t-numero: 1.75rem;
  /* Espaço */
  --e-1: var(--vd-e-1); --e-2: var(--vd-e-2); --e-3: var(--vd-e-3); --e-4: var(--vd-e-4); --e-5: var(--vd-e-5); --e-6: var(--vd-e-6); --e-7: var(--vd-e-7);
  /* Raio e sombra */
  --raio-1: var(--vd-raio-1); --raio-2: var(--vd-raio-2); --raio-3: var(--vd-raio-3); --raio-pilula: var(--vd-raio-pilula);
  --sombra-1: var(--vd-sombra-1), 0 0 0 1px var(--vd-linha);
  --sombra-2: var(--vd-sombra-3);
  --lateral: 248px;
}