/* =====================================================================
   1-base.css  |  CORES, TEMA ESCURO/CLARO E ESTILO GERAL
   Mude as cores aqui e o site inteiro muda.
   ===================================================================== */

/* TEMA ESCURO (é o padrão do site) */
:root{
  --bg:#0f0d14;                       /* fundo da página */
  --card:#1a1724;                     /* fundo dos cartões e janelas */
  --campo:#120f1a;                    /* fundo dos campos de digitar */
  --ink:#f4f1fa;                      /* cor do texto principal */
  --muted:#a59fb8;                    /* cor do texto secundário (cinza) */
  --linha:rgba(255,255,255,.10);      /* cor das bordas finas */
  --linha-forte:rgba(255,255,255,.20);/* cor das bordas mais visíveis */
  --header-bg:rgba(15,13,20,.85);     /* fundo do menu do topo */
  --accent:#ff5ea8;                   /* cor de destaque 1 (rosa) */
  --accent2:#7c5cff;                  /* cor de destaque 2 (roxo) */
  --erro:#ff6b6b;                     /* cor das mensagens de erro */
  --ok:#3ddc97;                       /* cor das mensagens de sucesso */
  --radius:20px;                      /* arredondamento dos cantos */
}

/* TEMA CLARO: só vale quando o site está com data-tema="claro" (botão 🌙/☀️ no topo) */
[data-tema="claro"]{
  --bg:#f6f4fb;
  --card:#ffffff;
  --campo:#f0edf8;
  --ink:#1c1830;
  --muted:#6a6482;
  --linha:rgba(20,10,60,.10);
  --linha-forte:rgba(20,10,60,.20);
  --header-bg:rgba(246,244,251,.88);
  --erro:#d93a3a;
  --ok:#14975f;
}

/* elementos com o atributo "hidden" ficam realmente escondidos */
[hidden]{display:none !important}

/* tira as margens padrão do navegador */
*{box-sizing:border-box;margin:0;padding:0}

/* rolagem suave ao clicar em links internos (#produtos) */
html{scroll-behavior:smooth}

/* fonte, fundo e cor do texto da página (com transição suave ao trocar o tema) */
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;transition:background .3s,color .3s}

/* links sem sublinhado e com a cor do texto */
a{color:inherit;text-decoration:none}

/* caixa central que limita a largura do conteúdo */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* títulos de seção (h2) e a frase de apoio embaixo deles */
h2{font-size:clamp(26px,4vw,38px);letter-spacing:-1px;margin-bottom:8px}
.sub{color:var(--muted);margin-bottom:26px}

/* etiqueta pequena arredondada (ex: "💰 Novo Produtos Adicionado") */
.tag{display:inline-block;background:var(--campo);border:1px solid var(--linha);padding:6px 14px;border-radius:999px;font-size:13px;color:var(--muted);margin-bottom:22px}