/* ==========================================================================
   VESPER NODE CLEANER — shared design tokens
   Palette is drawn from the Blueprint graph editor itself: void-black canvas,
   the dotted grid, and the three pin colors developers already read fluently
   (exec white, function blue, pure/teal green). Red is reserved for "problem"
   states only — it's the event-node red, used sparingly.
   ========================================================================== */

:root{
  /* -- surface -- */
  --void:        #0e0e11;
  --panel:       #17171b;
  --panel-2:     #1d1d22;
  --line:        #2a2a31;
  --dot:         #232329;

  /* -- ink -- */
  --ink:         #eceaf2;
  --dim:         #96939f;
  --faint:       #5c5a66;

  /* -- signal (Blueprint pin colors) -- */
  --blue:        #3e7bfa;   /* function pin / primary accent   */
  --blue-dim:    #274a99;
  --green:       #2fd897;   /* pure function pin / success     */
  --red:         #e5484d;   /* event pin / problem callouts     */

  /* -- type -- */
  --f-display:   'Space Grotesk', 'Segoe UI', sans-serif;
  --f-body:      'Inter', 'Segoe UI', sans-serif;
  --f-mono:      'JetBrains Mono', 'Consolas', monospace;

  --radius:      3px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* dotted "graph canvas" background, used behind hero + section breaks */
.grid-bg{
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:22px 22px;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}

/* -- type scale -- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem, 5vw, 4rem); }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size:1.15rem; }
p{ margin:0; color:var(--dim); }
.eyebrow{
  font-family:var(--f-mono);
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue);
}
code, .mono{ font-family:var(--f-mono); }
.kbd{
  font-family:var(--f-mono);
  font-size:0.8rem;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:4px;
  padding:2px 7px;
  color:var(--ink);
  white-space:nowrap;
}

/* -- buttons -- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-mono);
  font-size:0.85rem;
  letter-spacing:0.02em;
  padding:12px 20px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--blue); color:#0b0b0d; font-weight:600; }
.btn-primary:hover{ background:#5c92ff; }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }

/* -- card -- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
}

/* -- nav -- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(14,14,17,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-logo{
  font-family:var(--f-mono);
  font-weight:600;
  font-size:0.95rem;
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
  color:var(--ink);
}
.nav-logo .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:0.88rem; color:var(--dim); text-decoration:none;
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--ink); }

footer{
  border-top:1px solid var(--line);
  padding:40px 0;
  color:var(--faint);
  font-size:0.85rem;
}
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }

@media (max-width: 760px){
  .nav-links{ display:none; }
}