/* ==================================================================
   LOTERICA DIA DE SORTE - tokens.css
   Paleta institucional Caixa Loterias (azul + laranja).
   Fonte unica de verdade das cores do site. Importar ANTES do
   style.css de cada pagina:

     <link rel="stylesheet" href="/assets/css/tokens.css">
     <link rel="stylesheet" href="./assets/css/style.css">

   Nenhum hex solto nos style.css das paginas: sempre var(--...).
   ================================================================== */

:root{
  /* ---------- BASE (6 valores, o sistema inteiro sai daqui) ---------- */
  --navy:       #012A4D;  /* fundo escuro: hero, rodape, faixas de destaque */
  --azul:       #015CA9;  /* azul Caixa - cor principal, faixas e titulos   */
  --azul-100:   #E3EEF7;  /* tinta clara: fundos alternados, texto sobre navy */
  --laranja:    #F59700;  /* destaque e CTA. Nunca como fundo de texto corrido */
  --branco:     #FAFBFB;  /* fundo neutro da pagina                         */
  --tinta:      #10202E;  /* texto sobre fundo claro                        */

  /* ---------- DERIVADOS (nao inventar novos tons fora daqui) ---------- */
  --navy-800:   #01375F;
  --azul-600:   #0070AF;  /* alternativa aprovada ao --azul                 */
  --laranja-700:#C97800;  /* borda inferior / estado :active do botao       */
  --laranja-400:#FFA715;  /* :hover do botao                                */
  --tinta-60:   #4A5A68;  /* texto secundario                               */
  --linha:      #D8E2EA;  /* bordas e divisores sobre fundo claro           */

  /* ---------- ACENTO DE MODALIDADE ----------
     So para sinalizar de qual jogo a pagina fala (selo, topo do volante).
     NUNCA em botao, CTA ou fundo de secao: a identidade do site e azul+laranja.
     Cores oficiais das Loterias CAIXA. */
  --jogo-lotofacil: #930089;
  --jogo-quina:     #260085;
  --jogo-megasena:  #209869;
  --jogo-diadesorte:#CB8E20;
  --jogo-duplasena: #A8002A;
  --jogo-timemania: #007C2A;

  /* Variante so para PLACA COM TEXTO BRANCO. O verde oficial da Mega-Sena
     da 3,52:1 sobre branco e reprova em texto normal; este da 4,81:1. Os
     outros quatro jogos passam com a cor oficial (5,17:1 a 14,25:1) e por
     isso nao tem variante. */
  --jogo-megasena-700: #1B7F55;

  /* ---------- ESTRUTURA ---------- */
  --pad:   clamp(20px, 5vw, 40px);
  --raio:  10px;
  --max:   1120px;

  /* ---------- TIPOGRAFIA ----------
     Archivo (eixo de largura 62..125) no display, Asap no texto.
     Carregar em cada pagina:
     https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Asap:wght@400..700&display=swap */
  --fonte-display: 'Archivo', system-ui, sans-serif;
  --fonte-texto:   'Asap', system-ui, -apple-system, sans-serif;
  --fonte-recibo:  ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

/* ==================================================================
   PRIMITIVOS COMPARTILHADOS
   O que se repete em toda pagina mora aqui. O resto fica no style.css
   de cada pagina, para nao virar framework.
   ================================================================== */

/* ---------- BOTAO / CTA ----------
   Texto NAVY sobre laranja, nunca branco: branco sobre #F59700 da 2,1:1
   de contraste e reprova em acessibilidade. Navy da 7,6:1. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--laranja); color:var(--navy);
  font-family:var(--fonte-display); font-weight:800; font-size:19px;
  letter-spacing:-.01em;
  padding:17px 30px; border-radius:var(--raio); border:0;
  box-shadow:0 2px 0 var(--laranja-700), 0 10px 24px rgba(0,0,0,.22);
  transition:transform .15s ease, background .15s ease;
  cursor:pointer; width:100%; max-width:420px;
}
.btn:hover{ background:var(--laranja-400); transform:translateY(-2px) }
.btn:active{ transform:translateY(1px) }
.btn svg{ width:24px; height:24px; flex:none }

/* ---------- FOCO VISIVEL (obrigatorio em todo elemento clicavel) ---------- */
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--laranja);
  outline-offset:3px;
  border-radius:4px;
}
.btn:focus-visible,
:where(.hero,.prova,.fecho,.relogio) :where(a,button):focus-visible{
  outline-color:#fff;
}

/* ---------- MARCA ----------
   Mesma construcao em todo o site: circulo azul com anel laranja e o trevo
   de 4 folhas dentro. O <symbol id="i-trevo"> canonico esta na skill
   identidade-loterica e em lotofacil-independencia/index.html. */
.marca{ display:flex; align-items:center; gap:9px }
.marca-sigla{
  width:42px; height:42px; flex:none;
  border-radius:50%;
  background:var(--azul); color:var(--laranja);
  border:2px solid var(--laranja);
  display:grid; place-items:center;
}
.marca-sigla svg{ width:22px; height:22px }
.marca-txt b{
  display:block; font-family:var(--fonte-display); font-weight:800;
  font-size:16px; line-height:1.1; letter-spacing:-.02em;
}
.marca-txt span{
  display:block; font-size:12px; color:var(--tinta-60); line-height:1.2;
}
/* sobre fundo escuro o texto da marca inverte */
:where(.hero,.prova,.fecho,.pe) .marca-txt span{ color:var(--azul-100) }

/* ---------- SELO DE CONFIANCA ----------
   CNPJ e credenciamento aparecem no topo de toda pagina, nunca so no rodape. */
.selo-cnpj{
  font-family:var(--fonte-texto); font-size:12.5px;
  color:var(--tinta-60); line-height:1.3;
}
.selo-cnpj b{ color:var(--azul); font-weight:600 }

.selo18{
  display:inline-block; flex:none;
  border:1.5px solid var(--tinta-60); color:var(--tinta-60);
  border-radius:6px; padding:2px 7px;
  font-size:12px; font-weight:700;
}

/* ---------- CONTEINER ---------- */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }

/* ---------- MOVIMENTO ----------
   Um unico momento orquestrado por pagina. Sempre com esta saida. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto }
}