/* prumo-ds.css — sistema de design da landing do Prumo (dark premium, baseado no produto) */

/* Nippo — fonte local usada também na plataforma (--font-mono/acento).
   Arquivo variável copiado de web/public/fonts para manter consistência com o produto. */
@font-face{
  font-family:'Nippo';
  src:url('fonts/Nippo-Variable.woff2') format('woff2');
  font-weight:200 700;
  font-display:swap;
}

:root{
  /* dark (default) — mesma paleta da plataforma: preto quase puro + texto creme quente.
     Superfícies e bordas levam um leve tom creme (#e8dfc5) para combinar com o produto. */
  --bg:#0a0a0a;            /* dark background da plataforma */
  --bg-2:#100f0c;
  --surface:#16140f;
  --surface-2:#1c1a14;
  --surface-3:#23201a;
  --border:rgba(232,223,197,.10);
  --border-2:rgba(232,223,197,.17);
  --text:#e8dfc5;          /* foreground creme da plataforma */
  --text-2:#a39c8a;
  --text-3:#6f6a5c;
  --accent:#6f9cf0;        /* azul (acento padrão) */
  --accent-ink:#cdddff;
  --amber:#e0a14e;  --amber-bg:rgba(224,161,78,.13);
  --blue:#7099ec;   --blue-bg:rgba(112,153,236,.15);
  --green:#56bd83;  --green-bg:rgba(86,189,131,.14);
  --gray-bg:rgba(232,223,197,.06);

  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --maxw:1180px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.8);

  /* Mesma família da plataforma Prumo: Poppins no corpo/títulos, Nippo no mono/acento. */
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;
  --font-mono:'Nippo','Space Mono',ui-monospace,monospace;
}

[data-theme="light"]{
  /* light — off-white quente da plataforma (#f8f2dc) e "branco" creme (#fdf6e3). */
  --bg:#f8f2dc;            /* light background da plataforma */
  --bg-2:#f1ead0;
  --surface:#fdf6e3;       /* "white" creme da plataforma */
  --surface-2:#f4eed7;
  --surface-3:#eee6cc;     /* zinc-100 da plataforma */
  --border:rgba(23,23,23,.10);
  --border-2:rgba(23,23,23,.18);
  --text:#171717;          /* foreground claro da plataforma */
  --text-2:#5f5b4e;
  --text-3:#8c8675;
  --accent:#2f6fd0;
  --accent-ink:#1c4f9e;
  --amber:#b9772a;  --amber-bg:rgba(185,119,42,.12);
  --blue:#2f6fd0;   --blue-bg:rgba(47,111,208,.12);
  --green:#2f9d5f;  --green-bg:rgba(47,157,95,.12);
  --gray-bg:rgba(15,15,20,.05);
  --shadow:0 1px 2px rgba(15,15,20,.04), 0 24px 60px -36px rgba(15,15,20,.22);
}
[data-accent="amber"]{ --accent:#e0a14e; --accent-ink:#f3cf9c; }
[data-accent="green"]{ --accent:#56bd83; --accent-ink:#bfeed2; }
[data-accent="white"]{ --accent:#e8dfc5; --accent-ink:#fdf6e3; }
[data-theme="light"][data-accent="amber"]{ --accent:#b9772a; --accent-ink:#8a571c; }
[data-theme="light"][data-accent="green"]{ --accent:#2f9d5f; --accent-ink:#1f7345; }
[data-theme="light"][data-accent="white"]{ --accent:#16161a; --accent-ink:#000; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .3s ease, color .3s ease;
}
::selection{ background:var(--accent); color:#0a0a0a; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* layout */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:104px 0; }
.section.tight{ padding:72px 0; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-3);
}
.eyebrow .dot{ color:var(--accent); }

/* display type */
.display{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; line-height:1.02;
  font-size:clamp(38px,6vw,76px);
}
.h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(30px,4vw,50px);
}
.h3{ font-family:var(--font-display); font-weight:650; letter-spacing:-.015em; font-size:clamp(20px,2vw,26px); }
.lead{ color:var(--text-2); font-size:clamp(17px,1.5vw,21px); line-height:1.55; }
.muted{ color:var(--text-2); }
.faint{ color:var(--text-3); }
.mono{ font-family:var(--font-mono); }
.grad-text{
  background:linear-gradient(177deg, var(--text) 32%, color-mix(in oklab, var(--text) 38%, transparent) 118%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.accent-text{ color:var(--accent); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:550;
  font-size:15px; padding:11px 20px; border-radius:11px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .2s ease, border-color .2s ease; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--text); color:var(--bg); }
.btn-primary:hover{ background:#fff; }
[data-theme="light"] .btn-primary:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--text-3); }
.btn-subtle{ background:var(--surface-2); color:var(--text); border-color:var(--border); }
.btn-subtle:hover{ background:var(--surface-3); }
.btn-lg{ padding:14px 24px; font-size:16px; border-radius:12px; }

/* badge — replica do produto */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.02em; padding:3px 9px; border-radius:7px; line-height:1.5;
  background:var(--gray-bg); color:var(--text-2);
}
.badge.amber{ background:var(--amber-bg); color:var(--amber); }
.badge.blue{ background:var(--blue-bg); color:var(--blue); }
.badge.green{ background:var(--green-bg); color:var(--green); }
.badge .dotled{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* card / surface */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
}
.card-pad{ padding:22px 24px; }
.hairline{ height:1px; background:var(--border); border:0; margin:0; }

/* pill chip */
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-2);
  font-size:13px; font-family:var(--font-mono); letter-spacing:.02em;
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* sidebar nav item (mock) */
.navitem{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  color:var(--text-2); font-size:14px;
}
.navitem.active{ background:var(--surface-3); color:var(--text); }
.navitem .ico{ width:16px; height:16px; opacity:.85; flex-shrink:0; }
.navitem .chev{ margin-left:auto; opacity:.4; }

/* generic icon stroke */
.ico-stroke{ stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* nav bar */
.topnav{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--border);
}
.topnav-inner{ display:flex; align-items:center; gap:28px; height:62px; }
.navlink{ color:var(--text-2); font-size:14.5px; }
.navlink:hover{ color:var(--text); }

/* logo */
.logo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:500; font-size:19px; letter-spacing:-.01em; }

/* footer */
.footer{ border-top:1px solid var(--border); padding:56px 0 40px; color:var(--text-2); }

/* ---- blog: tipografia do corpo do artigo (.prose) ---- */
.prose{ color:var(--text-2); font-size:16.5px; line-height:1.72; }
.prose > * + *{ margin-top:18px; }            /* espaçamento vertical entre blocos */
.prose h2{ font-family:var(--font-display); color:var(--text); font-weight:600;
  font-size:clamp(22px,2.6vw,28px); letter-spacing:-.01em; line-height:1.2; margin-top:40px; }
.prose h3{ font-family:var(--font-display); color:var(--text); font-weight:600; font-size:20px; margin-top:30px; }
.prose p{ margin:0; }
.prose strong{ color:var(--text); font-weight:600; }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose ul, .prose ol{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.prose li{ padding-left:4px; }
.prose blockquote{ margin:0; padding:14px 20px; border-left:3px solid var(--accent);
  background:var(--surface); border-radius:0 10px 10px 0; color:var(--text); font-style:italic; }

/* utility */
.grid{ display:grid; }
.flex{ display:flex; }
.center{ align-items:center; }
.between{ justify-content:space-between; }
@media (max-width:860px){
  .section{ padding:72px 0; }
  body{ font-size:16px; }
}