/* =========================================================
   ZAR AI v2 — TYPOGRAPHY BASE
   Scoped under .zar-v2 — the single root wrapping the orb,
   compact panel, and full-screen workspace. Nothing here
   touches body/html.
========================================================= */

.zar-v2 {
  font-family: var(--zar-v2-font-sans);
  font-size: var(--zar-v2-font-size-base);
  line-height: var(--zar-v2-line-height-normal);
  color: var(--zar-v2-text-primary);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.zar-v2 h1, .zar-v2 h2, .zar-v2 h3, .zar-v2 h4 {
  margin: 0;
  font-weight: var(--zar-v2-font-weight-bold);
  line-height: var(--zar-v2-line-height-tight);
  letter-spacing: -0.01em;
}

.zar-v2 p {
  margin: 0;
}

.zar-v2 code, .zar-v2 pre {
  font-family: var(--zar-v2-font-mono);
}

.zar-v2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared focus-visible treatment — every interactive ZAR v2
   component relies on this instead of redefining its own. */
.zar-v2 :focus-visible {
  outline: none;
  box-shadow: var(--zar-v2-focus-ring);
  border-radius: var(--zar-v2-radius-xs);
}

/* Scrollbars (WebKit + Firefox) for any scrollable ZAR v2
   surface — applied narrowly so it never leaks onto the host
   page's own scroll areas. */
.zar-v2 [data-zar-v2-scroll] {
  scrollbar-width: thin;
  scrollbar-color: var(--zar-v2-scrollbar-thumb) var(--zar-v2-scrollbar-track);
}
.zar-v2 [data-zar-v2-scroll]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.zar-v2 [data-zar-v2-scroll]::-webkit-scrollbar-thumb {
  background: var(--zar-v2-scrollbar-thumb);
  border-radius: var(--zar-v2-radius-pill);
}
.zar-v2 [data-zar-v2-scroll]::-webkit-scrollbar-thumb:hover {
  background: var(--zar-v2-scrollbar-thumb-hover);
}