/* ===========================================================
   NodeWeave — Design Tokens
   Reverse-engineered from https://nodeweave-project.com (meta
   theme-color #00d47e + voice/structure inference).
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Brand colour ----------------------------------------- */
  --mesh:          #00d47e;
  --mesh-bright:   #1dffa4;
  --mesh-deep:     #00a862;
  --mesh-glow:     0 0 0 1px rgba(0,212,126,.4), 0 0 24px -4px rgba(0,212,126,.5);
  --mesh-soft:     rgba(0,212,126,.12);

  /* --- Ink (dark) scale ------------------------------------- */
  --ink-0: #06090a;
  --ink-1: #0d1113;
  --ink-2: #151b1e;
  --ink-3: #1f272b;
  --ink-4: #2a3438;

  /* --- Fog (text on dark) ----------------------------------- */
  --fog-0: #ffffff;
  --fog-1: #c9d3d6;
  --fog-2: #8a979c;
  --fog-3: #5b6669;

  /* --- Paper (light surfaces) ------------------------------- */
  --paper-0: #fbfdfb;
  --paper-1: #eef2ee;
  --paper-2: #dfe5df;
  --paper-ink: #0d1113;

  /* --- Semantic signals (rare) ------------------------------ */
  --signal-warn:  #ffb547;
  --signal-error: #ff5c5c;
  --signal-info:  #6ec8ff;

  /* --- Type families ---------------------------------------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* --- Type scale (modular 1.250) --------------------------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   20px;
  --text-lg:   28px;
  --text-xl:   40px;
  --text-2xl:  56px;
  --text-3xl:  80px;

  /* --- Spacing (4px base) ----------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* --- Radii ------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* --- Borders / shadows ------------------------------------ */
  --hairline-dark:  1px solid var(--ink-4);
  --hairline-light: 1px solid rgba(0,0,0,.08);

  --shadow-card-light: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px -8px rgba(0,0,0,.08);
  --shadow-card-dark:  none; /* dark mode uses surface scale */

  /* --- Motion ----------------------------------------------- */
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --dur-micro:   180ms;
  --dur-ui:      320ms;
  --dur-entry:   600ms;

  /* --- Layout ----------------------------------------------- */
  --content-max: 1200px;
  --hero-measure: 22ch;
}

/* ===========================================================
   Semantic element styles  (use these directly when scaffolding)
   =========================================================== */

.nw-dark { background: var(--ink-1); color: var(--fog-1); }
.nw-light { background: var(--paper-0); color: var(--paper-ink); }

.nw-h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.nw-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.nw-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.nw-h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.nw-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fog-1);
}
.nw-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}
.nw-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fog-2);
}
.nw-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: -0.01em;
}
.nw-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mesh);
}

/* italic emphasis token — "Weave the *mesh* without internet" */
.nw-em {
  font-style: italic;
  font-weight: 400;
  color: var(--mesh);
}

/* ----- Primary button --------------------------------------- */
.nw-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.nw-btn-primary {
  background: var(--mesh);
  color: var(--ink-0);
  box-shadow: var(--mesh-glow);
}
.nw-btn-primary:hover { background: var(--mesh-bright); }
.nw-btn-primary:active { transform: scale(.98); }

.nw-btn-ghost {
  background: transparent;
  color: var(--fog-1);
  border-color: var(--ink-4);
}
.nw-btn-ghost:hover {
  background: var(--ink-3);
  border-color: var(--fog-3);
}

/* ----- Status chip ------------------------------------------ */
.nw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--mesh-soft);
  color: var(--mesh);
  border: 1px solid rgba(0,212,126,.3);
}

/* ----- Card ------------------------------------------------- */
.nw-card {
  background: var(--ink-2);
  border: var(--hairline-dark);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: background var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out);
}
.nw-card:hover {
  background: var(--ink-3);
  border-color: rgba(0,212,126,.3);
}

/* ----- Mesh dot-grid background ----------------------------- */
.nw-bg-dotgrid {
  background-color: var(--ink-1);
  background-image: radial-gradient(circle at 1px 1px, rgba(0,212,126,.18) 1px, transparent 0);
  background-size: 48px 48px;
}