/* ============================================================
   CADEN STUDIO — Design System base
   Variáveis e regras compartilhadas por todas as páginas
   (index.html, branding.html, motion.html, social.html, ux-produto.html).
   Carregado via <link> antes do <style> de cada página, que pode
   sobrescrever valores específicos (ex: .grain, .reveal, --accent).
   Ver DESIGN-SYSTEM.md para a documentação completa.
   ============================================================ */
:root{
  --bg:#F3EFE6;--bg-2:#ECE6D9;--ink:#15120E;--ink-2:#3a352d;--muted:#6a6358;
  --line:rgba(21,18,14,.13);--line-strong:rgba(21,18,14,.25);
  --dark:#0D0B09;
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --maxw:1280px;--pad:clamp(20px,5vw,64px);
  --r-lg:26px;--r-md:18px;--r-sm:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;font-weight:700;line-height:.98;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-family:"Montserrat",sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--ink);opacity:.5}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.go{opacity:1;transform:none}
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04;mix-blend-mode:multiply;background-image:url("../svg/noise-1.svg")}