/* ===========================================================================
   TOKENS VISUAIS — Life Be (2026-09-01)

   Fonte de verdade das cores, tipografia e espaçamentos do site novo, conforme
   o documento mestre. Um arquivo só, para que trocar um valor troque o site
   inteiro em vez de caçar hexadecimal espalhado em cinco CSS.

   ATENÇÃO ao escopo: isto vale para a LOJA. O painel administrativo
   (assets/admin.css) continua com a paleta antiga de propósito -- misturar as
   duas agora quebraria o painel que acabou de ficar pronto. A unificação, se
   for desejada, é uma tarefa própria e depois.
   =========================================================================== */

:root{
  /* ------------------------------------------------------------- as cores */
  --lb-esmeralda: #00885A;   /* ação, links, marca */
  --lb-limao:     #B7E045;   /* destaque, acento */
  --lb-floresta:  #0F4D3A;   /* fundos escuros, hover */
  --lb-branco:    #FFFFFF;
  --lb-creatina:  #4B2FA8;   /* roxo, só na linha da creatina */
  --lb-multi:     #FF7A3D;   /* coral, só na linha do multivitamínico */
  --lb-tinta:     #123C32;   /* texto principal */
  --lb-fundo:     #F5F8F1;   /* fundo alternativo claro */

  /* derivadas: tons que faltavam para ter hierarquia de texto e bordas.
     Todas conferidas contra a WCAG 2.1 em 2026-09-03, com o cálculo de
     contraste rodado par a par -- não no olho. */
  --lb-tinta-2:   #3E635A;   /* texto secundário — 6,69:1 no branco */
  --lb-tinta-3:   #5A756C;   /* texto de apoio — era #6E8B82, com 3,70:1 */
  --lb-linha:     #DCE7DC;   /* divisores decorativos (não delimitam campo) */
  --lb-esmeralda-esc: #006F49;  /* hover do botão */
  --lb-esmeralda-pale:#E3F2EB;  /* fundo de selo, foco */

  /* ------------------------------------------------- ajustes de acessibilidade
     O verde da marca (#00885A) dá 4,4975:1 sobre branco. O mínimo da WCAG para
     texto normal é 4,50 -- ele reprova por 0,0025. Invisível a olho nu e
     reprovado em qualquer auditoria.

     Em vez de mudar a cor da marca, separei os usos: #00885A continua sendo o
     verde da Life Be em superfícies e grafismos, onde a regra é mais folgada;
     TEXTO e BOTÃO usam o tom escuro, que é da mesma família e dá 6,23:1.
     Ninguém percebe a diferença; a auditoria percebe. */
  --lb-esmeralda-txt: #006F49;  /* links e rótulo de botão — 6,23:1 */

  /* Borda de campo de formulário. A antiga (#DCE7DC) dava 1,27:1 -- ou seja,
     quase invisível: quem enxerga pouco não achava onde termina o campo.
     A WCAG pede 3:1 para o contorno de um controle. */
  --lb-borda-campo: #789385;    /* 3,33:1 no branco */

  /* Texto de apoio sobre o verde-floresta do rodapé. Era rgba 68% (4,30:1). */
  --lb-sobre-floresta: #A6B8B1; /* 4,72:1 */

  /* --------------------------------------------------------- tipografia */
  /* Barlow Condensed nos títulos de impacto, Manrope no resto.
     O fallback importa: até os .woff2 locais existirem, e sempre que a fonte
     falhar, é ele que aparece -- por isso é uma pilha de verdade e não um
     "sans-serif" solto. */
  --lb-titulo: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --lb-corpo:  Manrope, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* ------------------------------------------------------------ medidas */
  --lb-r:    12px;   /* raio padrão */
  --lb-r-g:  20px;   /* raio grande, dos blocos curvos */
  --lb-max:  1180px; /* largura máxima do conteúdo */
}

/* ===========================================================================
   BASE
   =========================================================================== */

body{
  font-family: var(--lb-corpo);
  color: var(--lb-tinta);
  background: var(--lb-branco);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .lb-titulo{
  font-family: var(--lb-titulo);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
}

h1{ font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800 }
h2{ font-size: clamp(1.5rem, 4vw, 2.4rem) }
h3{ font-size: clamp(1.15rem, 3vw, 1.5rem) }

a{ color: var(--lb-esmeralda-txt) }

/* Respeitar quem pediu menos movimento -- exigência do documento e coisa
   básica de acessibilidade: animação em tela cheia derruba quem tem
   sensibilidade vestibular. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   COMPONENTES GLOBAIS
   =========================================================================== */

.lb-wrap{ max-width: var(--lb-max); margin: 0 auto; padding: 0 20px }

/* --------------------------------------------------------------- botões */
.lb-bt{
  display: inline-block;
  padding: 15px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--lb-esmeralda-txt);
  color: var(--lb-branco);
  font-family: var(--lb-corpo);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease;
}
.lb-bt:hover{ background: var(--lb-esmeralda-esc) }
/* Foco visível sempre: o documento pede navegação por teclado, e teclado sem
   anel de foco é navegação às cegas. */
.lb-bt:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid var(--lb-limao);
  outline-offset: 2px;
}

.lb-bt.vazado{
  background: transparent;
  color: var(--lb-esmeralda-txt);
  box-shadow: inset 0 0 0 2px var(--lb-esmeralda-txt);
}
.lb-bt.vazado:hover{ background: var(--lb-esmeralda-pale) }

/* --------------------------------------------------------- sobretítulo */
.lb-sobre{
  font-family: var(--lb-corpo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lb-esmeralda-txt);
  margin-bottom: 10px;
}

/* ------------------------------------------------------------- seções */
.lb-secao{ padding: clamp(48px, 8vw, 96px) 0 }
.lb-secao.clara{ background: var(--lb-fundo) }

/* Curva ampla entre seções: é o grafismo da marca, feito em CSS para não virar
   imagem que precisa carregar e não escala. */
.lb-curva{ border-radius: 0 0 var(--lb-r-g) var(--lb-r-g) }
.lb-curva-topo{ border-radius: var(--lb-r-g) var(--lb-r-g) 0 0 }

/* ------------------------------------------------------- avisos legais */
/* Advertência de suplemento: obrigatória, e por isso legível. Cinza-claro
   minúsculo em rodapé é como se esconde aviso -- aqui não. */
.lb-aviso{
  font-size: .82rem;
  line-height: 1.55;
  color: var(--lb-tinta-2);
}

/* Nota da garrafa. Existe uma regra explícita no documento: sempre que a
   garrafa aparecer, tem que estar escrito que ela não acompanha o kit. */
.lb-nota-garrafa{
  margin-top: 10px;
  font-size: .82rem;
  color: var(--lb-tinta-3);
}

/* ===========================================================================
   IMAGENS
   Sempre com width/height no HTML. O CSS aqui só garante que elas não estourem
   o container -- sem isto, definir width/height (que evita o pulo de layout)
   quebraria a responsividade.
   =========================================================================== */
img{ max-width: 100%; height: auto }