/* =====================================================================
   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:#0b1220;                       /* fundo da página */
  --card:#111b30;                     /* fundo dos cartões e janelas */
  --campo:#0c1424;                    /* fundo dos campos de digitar */
  --ink:#eef4ff;                      /* cor do texto principal */
  --muted:#9db0cf;                    /* 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(11,18,32,.85);     /* fundo do menu do topo */
  --accent:#3b82f6;                   /* cor de destaque 1 (azul) */
  --accent2:#2563eb;                  /* cor de destaque 2 (azul escuro) */
  --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:#f2f7fe;
  --card:#ffffff;
  --campo:#e8f0fb;
  --ink:#0b1220;
  --muted:#51668a;
  --linha:rgba(10,40,100,.10);
  --linha-forte:rgba(10,40,100,.20);
  --header-bg:rgba(242,247,254,.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}

/* ===== FUNDO PREMIUM: aurora azul suave + grade fina + granulado ===== */
body{background:#05080f}
body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 35% at 15% 10%,rgba(59,130,246,.38),transparent 70%),
    radial-gradient(35% 30% at 85% 25%,rgba(124,58,237,.22),transparent 70%),
    radial-gradient(45% 40% at 70% 90%,rgba(14,165,233,.25),transparent 70%),
    radial-gradient(30% 30% at 25% 75%,rgba(37,99,235,.20),transparent 70%);
  filter:blur(40px);animation:aurora 26s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%)}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-3%,0) scale(1.08)}100%{transform:translate3d(-4%,3%,0) scale(1.02)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
[data-tema="claro"] body{background:#eef3fb}
[data-tema="claro"] body::before{opacity:.45}
[data-tema="claro"] body::after{background-image:linear-gradient(rgba(10,40,100,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,40,100,.05) 1px,transparent 1px)}