/* Imaginie design system v1 · tokens e base. Importar antes de components.css */
/* ──────────────────────────────────────────────────────────────
   TOKENS · Imaginie design system v1 (proposta)
   Layout: container 1200, grid de 8 px, seções 96/64, um só H2.
   ────────────────────────────────────────────────────────────── */
:root{
  /* paleta oficial */
  --primary:#6735ea; --primary-dark:#4a21b4; --ink:#1f1f60; --bg:#f5f5f5;
  --cta-pink:#b62f68; --cta-green:#b4e839; --accent:#a0eae6; --white:#ffffff;
  /* campanha */
  --night:#10102e; /* preto da Black Friday, derivado do --ink */
  /* semântica */
  --text:var(--ink); --text-muted:rgba(31,31,96,.7);
  --text-on-dark:#ffffff; --text-on-dark-muted:rgba(255,255,255,.85);
  --border:rgba(31,31,96,.12); --surface:#ffffff; --surface-alt:#f5f5f5;
  --wa:#075e54;
  /* tipografia */
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fs-display:56px; --fs-h2:40px; --fs-h3:24px; --fs-h4:18px; --fs-lead:18px;
  --fs-body:16px; --fs-small:14px; --fs-eyebrow:12px;
  /* espaço */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px;
  --sp-8:64px; --sp-10:80px; --sp-12:96px;
  --section-y:var(--sp-12); --container:1200px; --gutter:24px;
  /* forma */
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(31,31,96,.06); --shadow-2:0 12px 32px rgba(31,31,96,.12);
  --shadow-cta:0 8px 20px rgba(182,47,104,.28);
  --nav-h:72px;
  color-scheme:light;
}
@media (max-width:768px){
  :root{ --fs-display:36px; --fs-h2:30px; --fs-h3:22px; --fs-lead:17px;
         --section-y:var(--sp-8); --gutter:16px; --nav-h:64px; }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{font-family:var(--font);font-size:var(--fs-body);line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15}
h1{font-size:var(--fs-display);font-weight:700;line-height:1.08;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.3}
h4{font-size:var(--fs-h4);font-weight:600;line-height:1.4}
p{max-width:65ch}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--cta-green);outline-offset:3px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--sp-2);top:-100px;z-index:100;background:var(--cta-green);color:var(--ink);padding:12px 20px;border-radius:var(--r-pill);font-weight:700}
.skip-link:focus{top:var(--sp-2)}