/* ===== Padrões visuais da Central de Treinamentos LEAL =====
   Este arquivo é a FONTE ÚNICA de cor, espaço, tipografia, canto e elevação do portal.
   Antes dele, cada página definia o próprio sistema: a cor de fundo tinha 4 valores, a largura
   de conteúdo tinha 8, o dourado tinha 3 e só a home usava 34 tamanhos de fonte.

   COMO USAR numa página nova (ou ao mexer numa existente):
   1. carregue este arquivo no <head>, ANTES do <style> da página:
        <link rel="stylesheet" href="leal-tokens.css">
   2. escreva os estilos usando as variáveis abaixo, nunca valores soltos;
   3. se precisar de um valor que não existe aqui, acrescente ao token mais próximo em vez de
      inventar um valor só para a sua página.

   REGRAS DE LEITURA (valem para o portal inteiro):
   - frase corrida nunca abaixo de 14px; rótulo em caixa alta nunca abaixo de 12px;
   - espaçamento na grade de 8px (4px só para ajuste fino);
   - as cores da marca são ACENTO (botão, link, ícone, barra, destaque), nunca fundo de área grande.
*/
:root{
  /* ----- marca (acento) ----- */
  --leal-rosa:#bb2852;
  --leal-vinho:#820633;
  --leal-cinza:#4d4d4d;
  --leal-ouro:#a97c0a;          /* único dourado do portal: é o que passa em contraste sobre branco */
  --leal-verde:#15803d;         /* acerto e conclusão */

  /* ----- ação: o bordô manda, o vinho só aprofunda -----
     Decisão do dono: o vinho sozinho é escuro demais. Botão principal usa o degradê (o bordô
     aparece primeiro), e texto, link e ícone de ação usam o bordô. O vinho fica para o pé do
     degradê e para detalhe pequeno, nunca para preencher botão inteiro nem para texto corrido. */
  --leal-acao:linear-gradient(135deg,#bb2852,#820633);
  --leal-acao-hover:linear-gradient(135deg,#c93a62,#8f0a3b);
  --leal-acao-cor:#bb2852;      /* texto, link e ícone de ação */

  /* ----- superfícies ----- */
  --leal-bg:#f6f5f6;            /* fundo da página */
  --leal-sup:#fff;              /* cartão */
  --leal-sup-2:#faf8f9;         /* cartão secundário, faixa suave */
  --leal-linha:#e6e1e4;         /* borda padrão */
  --leal-linha-2:#efeaed;       /* divisória interna */

  /* ----- texto ----- */
  --leal-tx:#2c2c2c;            /* título e texto forte */
  --leal-tx-2:#4d4d4d;          /* corpo */
  --leal-tx-3:#6b6b6b;          /* apoio (o mais claro que passa em AA sobre branco) */

  /* ----- espaço: grade de 8 ----- */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px;
  --e-5:24px; --e-6:32px; --e-7:40px; --e-8:56px;

  /* ----- tipografia: 8 degraus ----- */
  --t-xs:12px;   /* rótulo em caixa alta (piso) */
  --t-sm:13px;   /* CUIDADO: 13px é apoio CURTO e tabela densa. Frase corrida NUNCA usa este
                    degrau, porque fica abaixo do piso de leitura de 14px. Em parágrafo, item de
                    lista, célula de tabela ou texto com sete palavras ou mais, use --t-base. */
  --t-base:15px; /* corpo */
  --t-md:17px;   /* subtítulo, título de cartão */
  --t-lg:20px;   /* título de bloco */
  --t-xl:24px;   /* título de seção */
  --t-2xl:30px;  /* título de página */
  --t-3xl:38px;  /* capa */
  --lh-corpo:1.55;
  --lh-titulo:1.2;

  /* ----- larguras ----- */
  --w-leitura:780px;  /* coluna de leitura corrida (conversa, artigo) */
  --w-app:1120px;     /* páginas de aplicação (home, ferramentas, cursos) */
  --w-tabela:1160px;  /* páginas com tabela larga (Painel, Vistorias, Bonificação) */

  /* ----- cantos ----- */
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:22px; --r-pill:999px;

  /* ----- elevação: três degraus, nada além disso ----- */
  --el-1:0 1px 3px rgba(40,10,25,.08);    /* repouso: cartão, linha de tabela */
  --el-2:0 6px 18px rgba(40,10,25,.10);   /* destaque: cartão em foco, barra fixa */
  --el-3:0 14px 34px rgba(130,6,51,.16);  /* flutuante: diálogo, balão, botão flutuante */
}

/* ----- foco: um só indicador no portal inteiro -----
   Anel escuro com halo branco, para aparecer tanto sobre cartão claro quanto sobre faixa colorida. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible{
  outline:3px solid var(--leal-acao-cor);   /* bordô: mesma família dos botões e dos links */
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,255,255,.95);
}

/* ----- número não dança quando o valor muda ----- */
.leal-num,
[data-num]{font-variant-numeric:tabular-nums}

/* ----- âncora não fica escondida atrás de barra fixa ----- */
:target{scroll-margin-top:88px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
