/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg: #0f1117;
  --bg2: #161b27;
  --bg3: #1c2333;
  --border: rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.14);
  --text: #e8eaf0;
  --text-muted: #7a8499;
  --text-dim: #4a5168;
  --accent: #00d9a3;
  --accent-dim: rgba(0, 217, 163, 0.12);
  --accent-dim2: rgba(0, 217, 163, 0.06);
  --blue: #4f9eff;
  --blue-dim: rgba(79, 158, 255, 0.12);
  --amber: #f5a623;
  --amber-dim: rgba(245, 166, 35, 0.12);
  --red: #ff6b6b;
  --red-dim: rgba(255, 107, 107, 0.12);
  --purple: #b388ff;
  --purple-dim: rgba(179, 136, 255, 0.12);
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Sora', sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
}

/* ─── Slate scheme: backgrounds & text ──────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #0f1117;
  --md-default-bg-color--light:    #161b27;
  --md-default-bg-color--lighter:  #1c2333;
  --md-default-bg-color--lightest: rgba(28, 35, 51, 0.5);

  --md-default-fg-color:           #e8eaf0;
  --md-default-fg-color--light:    #b0b7c8;
  --md-default-fg-color--lighter:  #7a8499;
  --md-default-fg-color--lightest: rgba(232, 234, 240, 0.12);

  --md-typeset-a-color:   #00d9a3;
  --md-code-bg-color:     #161b27;
  --md-code-fg-color:     #e8eaf0;

  /* footer */
  --md-footer-bg-color:        #161b27;
  --md-footer-bg-color--dark:  #0f1117;
  --md-footer-fg-color:        #e8eaf0;
  --md-footer-fg-color--light: #7a8499;
}

/* ─── Custom primary: dark header with light text ───────────────────────────── */
/*
 * Material uses --md-primary-fg-color as the header/nav background.
 * --md-primary-bg-color is the text colour painted ON TOP of that background.
 * We want a dark header (#0f1117) with light text (#e8eaf0).
 */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #0f1117;
  --md-primary-fg-color--light: rgba(15, 17, 23, 0.54);
  --md-primary-fg-color--dark:  #0a0d12;
  --md-primary-bg-color:        #e8eaf0;   /* header text = light  */
  --md-primary-bg-color--light: rgba(232, 234, 240, 0.7);
}

/* ─── Custom accent: teal ───────────────────────────────────────────────────── */
[data-md-color-accent="custom"] {
  --md-accent-fg-color:             #00d9a3;
  --md-accent-fg-color--transparent: rgba(0, 217, 163, 0.1);
  --md-accent-bg-color:             #0f1117;
  --md-accent-bg-color--light:      rgba(232, 234, 240, 0.54);
}

/* ─── Typography ─────────────────────────────────────────────────────────────── */
body {
  font-family: 'Sora', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

code, kbd, pre {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */
.md-header {
  background-color: var(--bg) !important;
  border-bottom: 0.5px solid var(--border);
  box-shadow: none !important;
  color: var(--text) !important;
}

/* Site title */
.md-header__title,
.md-header__topic,
.md-header__ellipsis {
  color: var(--text) !important;
}

/* Icon buttons (search toggle, hamburger, back arrow) */
.md-header__button.md-icon,
.md-header__button {
  color: var(--text-muted) !important;
}

.md-header__button:hover {
  color: var(--accent) !important;
}

/* ─── Nav tabs ───────────────────────────────────────────────────────────────── */
.md-tabs {
  background-color: var(--bg) !important;
  border-bottom: 0.5px solid var(--border);
  color: var(--text-muted) !important;
}

.md-tabs__link {
  color: var(--text-muted) !important;
  opacity: 1;
  font-size: 0.78rem;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--accent) !important;
}

/* ─── Sidebar ─────────────────────────────────────────────────────────────────── */
.md-sidebar {
  background-color: var(--bg);
}

.md-sidebar__inner {
  border-right: 0.5px solid var(--border);
}

.md-nav__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
}

/* ─── Nav links ──────────────────────────────────────────────────────────────── */
.md-nav__link {
  color: var(--text-muted);
  font-size: 0.82rem;
  transition: color 0.15s;
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--accent) !important;
}

.md-nav__link--active {
  color: var(--accent) !important;
  font-weight: 500;
}

.md-nav__item--section > .md-nav__link {
  color: var(--text);
  font-weight: 500;
}

/* ─── Inline code ─────────────────────────────────────────────────────────────── */
.md-typeset :not(pre) > code {
  background: var(--accent-dim2);
  color: var(--accent);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  font-size: 0.85em;
}

/* ─── Code blocks ─────────────────────────────────────────────────────────────── */
.md-typeset pre {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
}

.md-typeset pre > code {
  color: var(--text);
}

/* ─── Headings ───────────────────────────────────────────────────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: 'Sora', sans-serif;
  letter-spacing: -0.02em;
  color: var(--text);
}

.md-typeset h1 { font-size: 1.6rem; font-weight: 600; }
.md-typeset h2 {
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 0.4rem;
}
.md-typeset h3 { font-size: 1.05rem; font-weight: 500; }

/* ─── Links ──────────────────────────────────────────────────────────────────── */
.md-typeset a {
  color: var(--accent);
}
.md-typeset a:hover {
  color: var(--accent);
  opacity: 0.8;
}

/* ─── Blockquotes ─────────────────────────────────────────────────────────────── */
.md-typeset blockquote {
  border-left: 2px solid var(--accent);
  background: var(--bg2);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
}

/* ─── Tables ──────────────────────────────────────────────────────────────────── */
.md-typeset table:not([class]) {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--bg3);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border-bottom: 0.5px solid var(--border);
}
.md-typeset table:not([class]) td {
  border-bottom: 0.5px solid var(--border);
  color: var(--text-muted);
}
.md-typeset table:not([class]) tr:last-child td { border-bottom: none; }

/* ─── Admonitions ─────────────────────────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: none;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--bg3) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* ─── Mermaid diagrams ────────────────────────────────────────────────────────── */
/*
 * Colours live in javascripts/mermaid-init.js, which reads the :root tokens
 * above. Only layout and chrome belong here.
 */
.md-typeset .mermaid {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
  overflow-x: auto;
}

.md-typeset .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* ─── Search ──────────────────────────────────────────────────────────────────── */
.md-search__input {
  background-color: var(--bg2) !important;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text) !important;
  font-family: 'Sora', sans-serif;
}
.md-search__input::placeholder { color: var(--text-dim); }
.md-search-result__article,
.md-search-result__meta { background: var(--bg2); }
.md-search__output { background: var(--bg2); border: 0.5px solid var(--border); }

/* ─── Footer ──────────────────────────────────────────────────────────────────── */
.md-footer {
  background: var(--bg2);
  border-top: 0.5px solid var(--border);
  color: var(--text-muted);
}
.md-footer-meta { background: var(--bg); }
.md-footer__link { color: var(--text-muted); }
.md-footer__link:hover { color: var(--accent); }

/* ─── Content area ────────────────────────────────────────────────────────────── */
.md-content { background: var(--bg); }
.md-typeset hr { border-color: var(--border); }

/* ─── Breadcrumbs ─────────────────────────────────────────────────────────────── */
.md-nav__link.md-nav__link--index { color: var(--text-muted); }

/* ─── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }