/*
 * estilo.css - tokens de cor, tipografia e as poucas animações do catálogo.
 *
 * O resto do visual é Tailwind (carregado por CDN em cada página). Aqui ficam só as coisas que
 * o Tailwind lê como variável: as cores do tema e os quadros das animações.
 *
 * As cores são escritas em canais RGB ("28 131 73") e não em hexadecimal porque é assim que o
 * Tailwind consegue aplicar transparência em cima delas (bg-primary/10, border-border...).
 *
 * Para trocar a cor da marca, mexa em --c-primary aqui e no campo "marca" do dados.js.
 * Use qualquer conversor de hexadecimal para RGB.
 */

:root {
  --c-background: 255 255 255;
  --c-foreground: 22 21 15;
  --c-card: 255 255 255;
  --c-muted: 242 242 240;
  --c-muted-foreground: 111 111 106;
  --c-border: 231 231 229;
  --c-primary: 28 131 73;
  --c-primary-foreground: 255 255 255;
  --c-primary-dark: 21 97 54;
  --c-accent: 204 43 43;
  --c-placeholder: 232 232 230;
  --c-placeholder-foreground: 160 160 156;
  color-scheme: light;
}

/* Rolagem suave nos links internos (o "Ver categorias" do topo da home). */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*
 * Foco visível em tudo que é clicável, para quem navega por teclado.
 * Fica em um lugar só, então nenhum botão novo nasce sem ele.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--c-primary));
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Atalho para pular o cabeçalho, útil para leitor de tela e teclado. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}

.pular-para-conteudo:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1rem;
  background-color: rgb(var(--c-background));
  border: 2px solid rgb(var(--c-primary));
  border-radius: 0.75rem;
  font-weight: 600;
}

/* Enquanto a gaveta do carrinho ou o menu estão abertos, a página atrás não rola. */
body.sem-rolagem {
  overflow: hidden;
}

/* Pintura base antes de o Tailwind da CDN terminar de carregar (evita o flash branco). */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: rgb(var(--c-background));
  color: rgb(var(--c-foreground));
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

/* Faixa de dizeres do topo: duas cópias da fita deslizando em looping. */
@keyframes desliza-fita {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.fita-anuncios {
  animation: desliza-fita 120s linear infinite;
}

/* Tira de benefícios no celular: mesma ideia da faixa de dizeres, mais rápida. */
.fita-beneficios {
  animation: desliza-fita 28s linear infinite;
}

/* Quem pede menos animação no sistema não recebe fita em movimento. */
@media (prefers-reduced-motion: reduce) {
  .fita-anuncios,
  .fita-beneficios {
    animation: none;
  }
}

/* Rolagem horizontal (carrosséis e categorias) sem a barra cinza aparecendo. */
.sem-barra {
  scrollbar-width: none;
}

.sem-barra::-webkit-scrollbar {
  display: none;
}

/* Toda imagem reserva o espaço dela, então a página não "pula" enquanto carrega. */
img[width][height] {
  height: auto;
}

/* Campo de busca: some o "x" nativo do Chrome, que briga com o ícone da lupa. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}