/* ============================================================
 * DxVisualizer — MkDocs Material theme
 * Dx family system: shared skeleton, azure product hue.
 * Fonts: Space Grotesk (display) / IBM Plex Sans (body, via
 * mkdocs.yml font.text) / JetBrains Mono (code, via font.code).
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --dxv-azure: #5b9dff;        /* chrome, links, primary */
  --dxv-azure-soft: #b5d0ff;   /* mark interior, selected text */
  --dxv-azure-paper: #2a64c4;  /* azure on Press paper, 5.0:1 */
  --dxv-green: #7fb88a;        /* tip, positive */
  --dxv-amber: #f4a836;        /* warning */
  --dxv-ember: #ec4661;        /* danger */
  --dxv-accent: var(--dxv-azure);
}

/* ============= DARK (default) — scheme: slate ============= */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0d1117;
  --md-default-fg-color: #e9eef4;
  --md-default-fg-color--light: #9aa3af;
  --md-default-fg-color--lighter: #6b7480;
  --md-default-fg-color--lightest: #232c38;

  --md-primary-fg-color: #0d1117;
  --md-primary-bg-color: #e9eef4;
  --md-accent-fg-color: #b5d0ff;

  --md-typeset-color: #c9d2dc;
  --md-typeset-a-color: #5b9dff;

  --md-code-bg-color: #0c1016;
  --md-code-fg-color: #c9d2dc;
  --md-code-hl-color: rgba(91, 157, 255, 0.12);

  --md-footer-bg-color: #0a0e13;
  --md-footer-bg-color--dark: #070a0e;

  --dxv-accent: var(--dxv-azure);
}

/* ============= LIGHT — scheme: default (Press paper) ============= */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #f4f1ea;
  --md-default-fg-color: #1b1813;
  --md-default-fg-color--light: #5f5a4f;
  --md-default-fg-color--lighter: #9a948a;
  --md-default-fg-color--lightest: #e4dfd1;

  --md-primary-fg-color: #f4f1ea;
  --md-primary-bg-color: #1b1813;
  --md-accent-fg-color: #1d4c99;

  --md-typeset-color: #46423a;
  --md-typeset-a-color: #2a64c4;

  --md-code-bg-color: #faf8f3;
  --md-code-fg-color: #46423a;
  --md-code-hl-color: rgba(42, 100, 196, 0.10);

  --md-footer-bg-color: #ebe7dd;
  --md-footer-bg-color--dark: #e4dfd1;
  --md-footer-fg-color: #1b1813;
  --md-footer-fg-color--light: #5f5a4f;
  --md-footer-fg-color--lighter: #9a948a;

  --dxv-accent: var(--dxv-azure-paper);
}

/* ============= TYPE ============= */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__topic,
.md-nav__title {
  font-family: "Space Grotesk", var(--md-text-font-family, sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.md-typeset h1 { color: var(--md-default-fg-color); }

/* Eyebrow-style h5 (optional utility) */
.md-typeset h5 {
  font-family: var(--md-code-font-family, monospace);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--dxv-accent);
}

/* ============= HEADER / NAV ============= */
.md-header { border-bottom: 1px solid var(--md-default-fg-color--lightest); box-shadow: none; }
.md-tabs { border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.md-header__button.md-logo img { height: 1.4rem; }

/* Active nav item: contained pill, never a left accent bar */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--dxv-accent);
  background: color-mix(in srgb, var(--dxv-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dxv-accent) 28%, transparent);
  border-radius: 7px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ============= ADMONITIONS — contained, no left-edge accent ============= */
.md-typeset .admonition,
.md-typeset details {
  border-width: 1px;
  border-left-width: 1px !important;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.72rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent !important;
  font-weight: 700;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: currentColor !important; }

.md-typeset .admonition.note    { border-color: rgba(91, 157, 255, 0.35); background: rgba(91, 157, 255, 0.06); }
.md-typeset .note > .admonition-title    { color: var(--dxv-azure); }
.md-typeset .admonition.tip     { border-color: rgba(127, 184, 138, 0.35); background: rgba(127, 184, 138, 0.06); }
.md-typeset .tip > .admonition-title     { color: var(--dxv-green); }
.md-typeset .admonition.warning { border-color: rgba(244, 168, 54, 0.40); background: rgba(244, 168, 54, 0.07); }
.md-typeset .warning > .admonition-title { color: var(--dxv-amber); }
.md-typeset .admonition.danger  { border-color: rgba(236, 70, 97, 0.40); background: rgba(236, 70, 97, 0.07); }
.md-typeset .danger > .admonition-title  { color: var(--dxv-ember); }

/* Paper needs darker titles to stay above 4.5:1 */
[data-md-color-scheme="default"] .md-typeset .note > .admonition-title    { color: #2a64c4; }
[data-md-color-scheme="default"] .md-typeset .tip > .admonition-title     { color: #3d7348; }
[data-md-color-scheme="default"] .md-typeset .warning > .admonition-title { color: #8a5f12; }
[data-md-color-scheme="default"] .md-typeset .danger > .admonition-title  { color: #b3243c; }

/* ============= CODE ============= */
.md-typeset pre > code { border-radius: 10px; }
.md-typeset .highlight { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 10px; }
.md-typeset code {
  border-radius: 5px;
  padding: 0.1em 0.35em;
}

/* ============= BUTTONS ============= */
.md-typeset .md-button { border-radius: 9px; }
.md-typeset .md-button--primary {
  background-color: var(--dxv-accent);
  border-color: var(--dxv-accent);
  color: #0d1117;
  font-weight: 600;
}
[data-md-color-scheme="default"] .md-typeset .md-button--primary { color: #f4f1ea; }
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--dxv-azure-soft);
  border-color: var(--dxv-azure-soft);
  color: #0d1117;
}
[data-md-color-scheme="default"] .md-typeset .md-button--primary:hover,
[data-md-color-scheme="default"] .md-typeset .md-button--primary:focus {
  background-color: #1d4c99;
  border-color: #1d4c99;
  color: #f4f1ea;
}

/* ============= TABLES / RULES ============= */
.md-typeset hr { border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
}

/* ============= IMAGES — framed like the window ============= */
.md-typeset img[src*="data-visualizer-"] {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
}