/*
 * theved.ai brand theme for hgateway-docs.
 * Light mode: warm parchment/cream + deep green, matching hgateway-website's
 * landing page (Fraunces serif display, IBM Plex Sans/Mono body/code).
 * Dark mode: near-black + neon green, matching the theved.ai logo mark.
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --md-text-font: "IBM Plex Sans", system-ui, sans-serif;
  --md-code-font: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- Light (default) ---------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #faf6ec;
  --md-default-fg-color: #2a2417;
  --md-default-fg-color--light: #655b47;
  --md-default-fg-color--lighter: #9a9077;
  --md-default-fg-color--lightest: #ded2bb;

  --md-primary-fg-color: #2a2417 !important;
  --md-primary-fg-color--light: #655b47 !important;
  --md-primary-fg-color--dark: #171407 !important;
  --md-primary-bg-color: #faf6ec !important;
  --md-primary-bg-color--light: #faf6ec !important;

  --md-accent-fg-color: #0c8f44 !important;
  --md-accent-fg-color--transparent: rgba(12, 143, 68, 0.1) !important;
  --md-accent-bg-color: #ffffff !important;

  --md-typeset-a-color: #0a7a3a !important;

  --md-code-bg-color: #f2ebdd;
  --md-code-fg-color: #453d2b;

  --md-footer-bg-color: #211d13;
  --md-footer-fg-color: #ece3d3;

  --ved-card-bg: #f5efe3;
  --ved-border: #d3c6ab;
}

/* ---------- Dark (slate) ---------- */
[data-md-color-scheme="slate"] {
  --md-hue: 120;
  --md-default-bg-color: #14120d;
  --md-default-fg-color: #e7e2d3;
  --md-default-fg-color--light: #b3ab95;
  --md-default-fg-color--lighter: #79725e;
  --md-default-fg-color--lightest: #322c1f;

  --md-primary-fg-color: #0b0a07 !important;
  --md-primary-bg-color: #e7e2d3 !important;

  --md-accent-fg-color: #2ee673 !important;
  --md-accent-fg-color--transparent: rgba(46, 230, 115, 0.12) !important;
  --md-accent-bg-color: #0b0a07 !important;

  --md-typeset-a-color: #3ce87e !important;

  --md-code-bg-color: #1c1a12;
  --md-code-fg-color: #d9d3bf;

  --md-footer-bg-color: #0b0a07;
  --md-footer-fg-color: #b3ab95;

  --ved-card-bg: #1c1a12;
  --ved-border: #322c1f;
}

/* ---------- Typography ---------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 700;
}

.md-header__title,
.md-nav__title,
.md-tabs__link {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

/* ---------- Header ---------- */
.md-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 2px 8px rgba(42, 36, 23, 0.06);
}

.md-header__title {
  font-weight: 700;
}

/* Logo reads as a small badge (it's a square black mark) rather than a bare
   raster image floating in the header. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  border-radius: 7px;
}

/* ---------- Nav tabs: pill container, matching the website's site-nav pill links ---------- */
.md-tabs {
  background-color: var(--md-primary-fg-color);
}

.md-tabs__link {
  font-weight: 600;
  opacity: 0.75;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* ---------- Code blocks & admonitions: warm bordered cards ---------- */
.md-typeset pre > code {
  font-size: 0.82rem;
}

.md-typeset .highlight,
.md-typeset pre {
  border-radius: 8px;
}

.md-typeset code {
  border-radius: 4px;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-width: 1px;
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 600;
}

/* ---------- Tables ---------- */
.md-typeset table:not([class]) {
  border-radius: 8px;
  border: 1px solid var(--ved-border);
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 600;
}

/* ---------- Mermaid diagrams ---------- */
.mermaid {
  display: flex;
  justify-content: center;
}