/*
 * qBraid docs — brand layer over Mintlify's mint theme.
 *
 * Tokens mirror the qbraid.com marketing site (qbraid-external-site,
 * src/app/globals.css + STYLE-GUIDE.md). Colors, backgrounds, and the
 * heading/body font are set in docs.json; this file carries what docs.json
 * cannot express: the code font, heading discipline, and small warm-neutral
 * details. Keep overrides shallow — deep selectors into Mintlify internals
 * break on their deploys.
 */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* qbraid.com token family — single source: the marketing repo. */
  --qb-bg: #0a0a0b;
  --qb-fg: #ece9e0;
  --qb-accent: #9f6cff;
  --qb-accent-soft: rgba(159, 108, 255, 0.14);
  --qb-paper: #f4f3ee;
  --qb-ink: #111114;
}

/*
 * Headings — brand rule: weight 400 only, tight tracking. Space Grotesk
 * bolded reads generic; at 400/-0.02em it reads like qbraid.com.
 */
h1,
h2,
h3,
h4 {
  font-weight: 400;
  letter-spacing: -0.02em;
}

/*
 * Code — JetBrains Mono everywhere code appears, same as the marketing
 * site's terminal panels. (Supersedes the old `pre * { monospace }` hack.)
 */
pre,
pre *,
code,
kbd,
samp {
  font-family:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* Text selection in the brand accent, as on qbraid.com. */
::selection {
  background: var(--qb-accent-soft);
}

/*
 * Inherited layout rule (pre-restyle): fixes the second column of parameter
 * tables at a readable width. Left as-is — a restyle shouldn't reflow tables.
 */
td:nth-child(2) {
  width: 200px;
}

/*
 * Workaround for a Mintlify hosted-renderer bug (confirmed by their support).
 * On first paint the sidebar is offset by a single-row navbar (64px) even though
 * our navbar is two rows (logo/search + tab row = 112px), so the sidebar's top
 * is painted under the navbar and the anchor links are clipped. It self-corrects
 * on client-side navigation. Pinning the header-height slot to the real height
 * fixes the initial render. Remove once Mintlify ships a fix upstream.
 */
@media (min-width: 1024px) {
  :root {
    --mintlify-slot-header-height: 7rem;
  }
}