/* ============================================================================
   AlphaProve docs — Sonar theme override for Material for MkDocs.
   Dark-only (the `slate` scheme). Mirrors the app tokens in
   apps/web/src/app/globals.css (spec 2026-07-18-sonar-palette-overhaul-design.md):
   petrol-depth surfaces, teal does the work (fills), aqua does the signal
   (links, active nav, focus), green/red reserved for data, magenta retired.
   Loaded via `extra_css` in mkdocs.yml (file keeps its historical name).
   ============================================================================ */

/* Docs typefaces — self-hosted (same-origin) so the docs CSP
   (font-src 'self') actually serves them. The old fontshare/google @imports were
   blocked by that CSP, which is why the site fell back to system fonts. The
   woff2 files live in docs/assets/fonts (Be Vietnam Pro vendored from Google
   Fonts — no variable cut, one file per weight; Satoshi from apps/web/src/fonts;
   Fontsource JetBrains Mono). */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/BeVietnamPro-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/BeVietnamPro-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/BeVietnamPro-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../assets/fonts/BeVietnamPro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  /* Material builds --md-*-font-family as `var(--md-*-font, _), <fallbacks>`.
     With theme.font:false the name tokens are unset (→ `_` → system fonts), so
     set them here so Material's own family chain resolves to our self-hosted
     faces. (We also set the -family vars directly, belt-and-suspenders.) */
  --md-text-font: "Satoshi";
  --md-code-font: "JetBrains Mono";
  --md-text-font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --md-code-font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --ap-display: "Be Vietnam Pro", "Satoshi", ui-sans-serif, system-ui, sans-serif;
}

/* ── Palette: bind Sonar to Material's slate (dark) scheme ────────────────── */
[data-md-color-scheme="slate"] {
  color-scheme: dark;

  /* surfaces (bg ramp surface-0 → surface-3) */
  --md-default-bg-color: #010508;
  --md-default-bg-color--light: #060f14;
  --md-default-bg-color--lighter: #0d181e;
  --md-default-bg-color--lightest: #17242a;

  /* text (primary → ghost) */
  --md-default-fg-color: #eff2f5;
  --md-default-fg-color--light: #bfc5c8;
  --md-default-fg-color--lighter: #909aa0;
  --md-default-fg-color--lightest: rgba(144, 154, 160, 0.45);

  /* header / nav chrome — a dark surface bar, not a saturated accent fill */
  --md-primary-fg-color: #060f14;
  --md-primary-fg-color--light: #0d181e;
  --md-primary-fg-color--dark: #010508;
  --md-primary-bg-color: #eff2f5;
  --md-primary-bg-color--light: #bfc5c8;

  /* accent (interactive: hovers, focus, active) = accent-text (aqua signal) */
  --md-accent-fg-color: #14ffec;
  --md-accent-fg-color--transparent: rgba(20, 255, 236, 0.1);

  /* links */
  --md-typeset-a-color: #14ffec;

  /* code surfaces + syntax (Sonar ramp — magenta retired) */
  --md-code-bg-color: #060f14;
  --md-code-fg-color: #bfc5c8;
  --md-code-hl-color: rgba(13, 115, 119, 0.25);
  --md-code-hl-keyword-color: #7ae3d6;
  --md-code-hl-string-color: oklch(0.80 0.12 150);
  --md-code-hl-function-color: #14ffec;
  --md-code-hl-number-color: oklch(0.78 0.15 70);
  --md-code-hl-constant-color: #2bd2c2;
  --md-code-hl-comment-color: oklch(0.60 0.015 220);
  --md-code-hl-name-color: #bfc5c8;
  --md-code-hl-operator-color: #909aa0;
  --md-code-hl-punctuation-color: #909aa0;
  --md-code-hl-variable-color: oklch(0.70 0.14 30);

  /* footer */
  --md-footer-bg-color: #060f14;
  --md-footer-bg-color--dark: #010508;
}

/* ── Typography: Be Vietnam Pro on headings + brand ──────────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title {
  font-family: var(--ap-display);
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Header: hairline border + soft blur instead of a flat coloured bar ───── */
.md-header {
  border-bottom: 1px solid rgba(191, 197, 200, 0.12);
  box-shadow: none;
  background-color: rgba(6, 15, 20, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Left nav + TOC: accent active item ──────────────────────────────────── */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--md-accent-fg-color);
  font-weight: 500;
}

/* ── Inline code: accent-ghost chip (demo) ───────────────────────────────── */
.md-typeset code {
  background: rgba(13, 115, 119, 0.16);
  color: #14ffec;
  border-radius: 5px;
}
/* …but code INSIDE a fenced block stays plain on the block surface */
.md-typeset pre > code {
  background: transparent;
  color: var(--md-code-fg-color);
}
.md-typeset .highlight,
.md-typeset pre {
  border: 1px solid rgba(191, 197, 200, 0.12);
  border-radius: 10px;
}

/* ── Tables: mono uppercase header, subtle rounded borders (demo) ─────────── */
.md-typeset table:not([class]) {
  border: 1px solid rgba(191, 197, 200, 0.12);
  border-radius: 10px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: #0d181e;
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #909aa0;
  font-weight: 500;
}
.md-typeset table:not([class]) td {
  color: #bfc5c8;
}

/* ── Admonitions → Sonar status colours: tip=gain, note=accent, warn=warn ── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-left-width: 3px;
  font-size: 0.76rem;
}
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: #0d7377;
  background: rgba(13, 115, 119, 0.1);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background: rgba(13, 115, 119, 0.12);
  color: #14ffec;
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: #14ffec;
}
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: oklch(0.78 0.18 158);
  background: oklch(0.78 0.18 158 / 0.10);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background: oklch(0.78 0.18 158 / 0.12);
  color: oklch(0.78 0.18 158);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: oklch(0.78 0.18 158);
}
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: oklch(0.78 0.15 70);
  background: oklch(0.78 0.15 70 / 0.10);
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background: oklch(0.78 0.15 70 / 0.12);
  color: oklch(0.78 0.15 70);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: oklch(0.78 0.15 70);
}

/* ── Search: accent focus ring (demo) ────────────────────────────────────── */
.md-search__form {
  border-radius: 6px;
  background: #17242a;
}
.md-search__input::placeholder {
  color: rgba(144, 154, 160, 0.6);
}

/* ── Selection ───────────────────────────────────────────────────────────── */
::selection {
  background: #0d7377;
  color: #fff;
}

/* ── Top bar → demo 10: brand wordmark + "Docs" pill, centered search, back ── */
/* Brand: the site title rendered as the wordmark, with a "Docs" pill after it. */
.md-header__title {
  font-family: var(--ap-display);
  font-weight: 600;
}
.md-header__title .md-header__topic:first-child > .md-ellipsis::after {
  content: "Docs";
  margin-left: 10px;
  font-family: var(--md-code-font-family);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #14ffec;
  background: rgba(13, 115, 119, 0.2);
  border: 1px solid rgba(13, 115, 119, 0.5);
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
}
/* Centered search on wide viewports (demo 10); no repo link in the demo. */
@media screen and (min-width: 60em) {
  .md-search { margin: 0 auto; }
  .md-header__source { display: none; }
}
/* Back-to-app link in the top bar. */
.md-back-app {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  padding: 0 10px;
  font-size: 0.72rem;
  color: #909aa0;
  text-decoration: none;
  transition: color 120ms;
}
.md-back-app:hover { color: #eff2f5; }
.md-back-app svg { width: 14px; height: 14px; fill: currentColor; }
@media screen and (max-width: 44em) { .md-back-app__label { display: none; } }

/* ── Nav + TOC section labels: mono uppercase (demo 10) ──────────────────── */
.md-nav__title,
.md-nav--secondary .md-nav__title {
  font-family: var(--md-code-font-family);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #909aa0;
}
/* Active left-nav item: accent-ghost background + rounded (demo 10). */
.md-nav__item .md-nav__link--active {
  background: rgba(13, 115, 119, 0.16);
  border-radius: 6px;
}
/* Right TOC ("On this page"): active item gets the accent left border. */
.md-nav--secondary .md-nav__link--active {
  border-left: 2px solid #14ffec;
  margin-left: -2px;
}