/* ==========================================================================
   Nodebench · Base reset + typography
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--nb-bg);
  color: var(--nb-text);
  font-family: var(--nb-font-sans);
  font-size: var(--nb-fs-14);
  line-height: var(--nb-lh-body);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--nb-amber);
  outline-offset: 2px;
  border-radius: var(--nb-r-sm);
}

/* Selection */
::selection { background: var(--nb-amber-halo); color: var(--nb-text); }

/* Scrollbars — subtle */
* { scrollbar-width: thin; scrollbar-color: var(--nb-line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--nb-line); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--nb-fog); background-clip: padding-box; border: 2px solid transparent; }

/* Type utilities */
.nb-mono       { font-family: var(--nb-font-mono); }
.nb-caption    { font-family: var(--nb-font-mono); font-size: var(--nb-fs-10); letter-spacing: var(--nb-tracking-caption); text-transform: uppercase; color: var(--nb-fog); }
.nb-meta       { font-family: var(--nb-font-mono); font-size: var(--nb-fs-11); color: var(--nb-mute); }
.nb-title      { font-size: var(--nb-fs-20); letter-spacing: var(--nb-tracking-tight); line-height: var(--nb-lh-snug); }
.nb-display    { font-size: var(--nb-fs-56); font-weight: 500; letter-spacing: var(--nb-tracking-tight); line-height: var(--nb-lh-tight); }
.nb-dim        { color: var(--nb-text-dim); }
.nb-fog        { color: var(--nb-fog); }
.nb-mute       { color: var(--nb-mute); }
.nb-amber      { color: var(--nb-amber-soft); }

/* Dot grid background (canvas + login panel) */
.nb-dotgrid {
  background-image: radial-gradient(circle, var(--nb-line) 0.6px, transparent 0.6px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* Bloom — warm radial, used on hero panels */
.nb-bloom {
  position: absolute;
  inset: auto -160px auto auto;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--nb-amber-wash) 0%, transparent 65%);
  pointer-events: none;
}

/* Screen utility */
.nb-screen { width: 100%; min-height: 100vh; display: flex; overflow: hidden; }

/* Skeleton shimmer */
@keyframes nb-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.nb-skeleton {
  background: linear-gradient(90deg, var(--nb-bg-raised) 0%, var(--nb-line) 50%, var(--nb-bg-raised) 100%);
  background-size: 200% 100%;
  animation: nb-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--nb-r-md);
  color: transparent;
}

/* Cursor blink (login field) */
@keyframes nb-blink { 0%, 55% { opacity: 1 } 60%, 100% { opacity: 0 } }
.nb-cursor {
  display: inline-block;
  width: 1px; height: 1em;
  background: var(--nb-amber);
  margin-left: 2px; vertical-align: -2px;
  animation: nb-blink 1s step-end infinite;
}