/* ============================================================
   Helvia Console — base element defaults
   Mirrors the app's antd-overrides Base region: body font,
   slate text, generous 1.8 line-height, font smoothing.
   Scoped lightly so specimen cards & kits inherit the look.
   ============================================================ */
.hbf, body.hbf {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hbf h1, .hbf h2, .hbf h3, .hbf h4 {
  color: var(--heading-color);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin: 0;
}

.hbf code, .hbf kbd, .hbf samp {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  background: #F2F4F5;
  border: 1px solid #EEE;
  border-radius: 3px;
  padding: 0.2em 0.4em;
}

/* Helvia's custom scrollbar (Scroll_Bar spec) — 8px, #F1F1F4 track, #C4C6DA thumb.
   Applied globally so every scroll surface matches. */
* {
  scrollbar-width: thin;
  scrollbar-color: #C4C6DA #F1F1F4;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #F1F1F4; border-radius: 4px; }
*::-webkit-scrollbar-thumb {
  background: #C4C6DA;
  border: 2px solid #F1F1F4;
  background-clip: padding-box;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: #AAACC6; background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: #F1F1F4; }

/* Legacy hook — same look, kept for explicit opt-in usage. */
.scrollbar-custom { scrollbar-width: thin; scrollbar-color: #C4C6DA #F1F1F4; }
.scrollbar-custom::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-custom::-webkit-scrollbar-track { background: #F1F1F4; border-radius: 4px; }
.scrollbar-custom::-webkit-scrollbar-thumb {
  background: #C4C6DA;
  border: 2px solid #F1F1F4;
  background-clip: padding-box;
  border-radius: 4px;
}