/* ===== 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, e SÓ PARA DECORAÇÃO: borda, bolinha,
                                   marcador, faixa, degradê. Dá 3,77:1 sobre branco, o suficiente
                                   para elemento gráfico (o mínimo é 3:1) e NÃO para texto.
                                   Dourado em TEXTO usa --leal-ambar-tx (#8a6714, 5,21:1). */
  --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}
}

/* ===== fonte única do portal =====
   Instrument Sans nas quatro telas do dia a dia (ficha, propostas, gerador, painel).
   Se o Google Fonts não carregar, a página cai para Inter e depois para a fonte do sistema:
   nada quebra, só muda o desenho da letra. */
:root{
  --f-ui:'Instrument Sans','Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --f-titulo:var(--f-ui);
}

/* ===== estados: escritos uma vez, valem para as quatro telas =====
   Antes disso cada página tinha o seu, e "desabilitado" era igual a "clicável". */
.leal-est button:hover:not(:disabled),
.leal-est .bt:hover:not(:disabled),
.leal-est [role="button"]:hover:not([aria-disabled="true"]){filter:brightness(1.06)}
.leal-est button:active:not(:disabled),
.leal-est .bt:active:not(:disabled){transform:translateY(1px)}
.leal-est button:disabled,
.leal-est .bt:disabled,
.leal-est [aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.leal-est input:hover:not(:disabled):not(:focus),
.leal-est select:hover:not(:disabled):not(:focus),
.leal-est textarea:hover:not(:disabled):not(:focus){border-color:#d4cdd1}
.leal-est input:disabled,
.leal-est select:disabled,
.leal-est textarea:disabled{background:var(--leal-sup-2);color:var(--leal-tx-3);cursor:not-allowed}
/* erro e acerto: a cor nunca vai sozinha, sempre acompanha texto */
.leal-est .ruim,
.leal-est [aria-invalid="true"]{border-color:#c62828;background:#fdf3f4}
.leal-est .certo,
.leal-est [data-ok="1"]{border-color:#8fcfa8;background:#f4fbf6}

/* ===== escala do cliente =====
   As páginas que o CLIENTE preenche e lê (ficha, garantias, seguro) usam uma escala
   maior que a das telas da equipe: quem lê está no celular, muitas vezes à noite.
   Antes disto, as três páginas copiavam esta lista no próprio :root, e a cópia já
   tinha divergido em dois valores (--t-3xl e --lh-corpo). Aqui ela existe uma vez só.
   Uso: <body class="leal-cliente"> */
.leal-cliente{
  --t-xs:13px; --t-sm:14.5px; --t-base:17px; --t-md:19px;
  --t-lg:22px; --t-xl:26px; --t-2xl:32px; --t-3xl:38px;
  --lh-corpo:1.62; --lh-titulo:1.22;
}

/* ===== estados: um trio por estado, e nada além disso =====
   Antes disto o verde de acerto tinha seis valores só na ficha, e o âmbar de
   pendência tinha quatro. Cor de estado nunca vai sozinha: sempre com texto junto. */
:root{
  --leal-verde-tx:#166534;  --leal-verde-fundo:#f2f9f4;  --leal-verde-linha:#cfe7d8;
  --leal-ambar-tx:#8a6714;  --leal-ambar-fundo:#fffaf0;  --leal-ambar-linha:#e9d9a8;
  --leal-erro-tx:#b3261e;   --leal-erro-fundo:#fdf6f6;   --leal-erro-linha:#e8b4b0;
  /* os nomes antigos continuam valendo, apontando para o novo */
  --pend-fundo:var(--leal-ambar-fundo);
  --pend-tx:var(--leal-ambar-tx);
  --err-fundo:var(--leal-erro-fundo);
}

/* ===== superfície da marca =====
   O bordô é ACENTO e nunca preenche área grande. Estas são as versões clarinhas
   dele, para faixa suave, cartão marcado e botão de terceiro peso. */
:root{
  --leal-rosa-fundo:#fdf4f7;
  --leal-rosa-fundo-2:#fbf3f6;
  --leal-rosa-linha:#f0d9e2;
  --leal-rosa-linha-2:#e6c6d3;
}

/* ===== o que faltava e virava número solto ===== */
:root{
  --alvo-toque:44px;            /* o mínimo do dedo, escrito uma vez */
  --leal-tx-4:#767077;          /* placeholder e pé de página: passa em AA, o #a49da2 não passava */
  --leal-zap:#128c4a; --leal-zap-linha:#bfe5cd;
  --w-cliente:960px;            /* página de leitura (garantias, seguro) */
  --w-form:840px;               /* página de preenchimento (ficha) */
}

/* ===== os últimos números soltos das páginas do cliente ===== */
:root{
  --leal-preto-cam:#111;          /* fundo da câmera e da foto: preto de vídeo, não da marca */
  --leal-preto-cam-2:#1b1b1b;
  --leal-zap-marca:#25d366;       /* o verde da marca do WhatsApp, só na borda do atalho */
  --leal-vinho-aviso:#8d3a4c;     /* texto do aviso em fundo rosa claro */
  --leal-linha-hover:#d4cdd1;     /* borda de campo sob o cursor */
  --leal-ambar-linha-2:#ecd7ad;   /* divisória dentro de caixa âmbar */
  --leal-sup-3:#fafafa;           /* faixa tracejada de soltar arquivo */
  --leal-verde-fundo-2:#fbfefc;   /* documento entregue: verde quase branco */
}
