/*
 * Vannarho brand theme for the client_platform docs (MkDocs Material).
 * Matches the marketing site: Inter (body) + Space Grotesk (headings),
 * blue accent, dark surface. Keeps Material's nav/search/TOC intact.
 */

:root {
  --vannarho-blue: #2563eb;        /* bg-blue-600 */
  --vannarho-blue-strong: #1d4ed8; /* blue-700 */
  --vannarho-blue-light: #60a5fa;  /* blue-400 */
  --vannarho-ink: #0f172a;         /* slate-900 */
}

/* ---- Typography: match the site ---- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --md-text-font: "Inter";
  --md-code-font: "Roboto Mono";
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title,
.md-nav__title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  letter-spacing: -0.01em;
}

/* ---- Light scheme: brand accent ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--vannarho-blue-strong);
  --md-primary-fg-color--light: var(--vannarho-blue);
  --md-primary-fg-color--dark: #1e3a8a;
  --md-accent-fg-color: var(--vannarho-blue);
}

/* ---- Dark scheme: match the site's dark surface ---- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #111827;     /* gray-900 */
  --md-primary-fg-color--light: #1f2937;
  --md-accent-fg-color: var(--vannarho-blue-light);
  --md-default-bg-color: #0b1220;      /* near gray-950 */
}

/* ---- Header: keep it dark and branded like the site nav ---- */
.md-header {
  background-color: #0f172a;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

/* ---- The soft maturity cues read as gentle badges ---- */
.md-typeset strong:has(+ text),
.md-typeset table strong {
  font-weight: 600;
}

/* "Available today" / "On the roadmap" emphasis — subtle, brand-aligned */
.md-typeset strong {
  color: inherit;
}

/* ---- Hero feel on the H1 ---- */
.md-typeset h1 {
  font-weight: 700;
  color: var(--md-primary-fg-color--light);
}
[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #93c5fd;
}

/* ---- Tables: cleaner, brand-tinted header row ---- */
.md-typeset table:not([class]) th {
  background-color: rgba(37, 99, 235, 0.08);
  font-family: "Space Grotesk", "Inter", sans-serif;
}

/* ---- Links ---- */
.md-typeset a {
  color: var(--md-accent-fg-color);
}

/* ---- Blockquotes: brand left-rule (used for the 'one principle' callouts) ---- */
.md-typeset blockquote {
  border-left: 0.25rem solid var(--vannarho-blue);
}

/* ---- Footer trim ---- */
.md-footer {
  background-color: #0f172a;
}

/* ---- Sticky left-hand navigation ----
   Keep the primary chapter nav pinned on the left and scrolling
   independently, so it stays visible as the reader moves down a page. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    position: sticky;
    top: 2.4rem;            /* clear the fixed header */
    height: calc(100vh - 2.4rem);
    align-self: flex-start;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    height: 100%;
    overflow-y: auto;
  }
  /* Give the left nav a touch more room and a subtle divider */
  .md-nav--primary {
    border-right: 1px solid rgba(148, 163, 184, 0.12);
  }
}

/* Make the active chapter clearly marked in the LHS nav */
.md-nav__link--active {
  font-weight: 600;
  color: var(--md-accent-fg-color);
}