/* =================================================================
   Moonshine — public docs theme (docs.moonshine.software)
   Mirrors the application's design tokens (src/index.css @theme) so the
   docs and the product read as one system.

   Fonts are SELF-HOSTED (assets/fonts/) rather than pulled from a CDN:
   same files the app ships, no third-party request, works offline.
   ================================================================= */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
}

/* ---- Tokens ---- */
:root {
  --md-primary-fg-color: #6366f1;
  --md-primary-fg-color--light: #818cf8;
  --md-primary-fg-color--dark: #4f46e5;
  --md-primary-bg-color: #e4e4e7;
  --md-primary-bg-color--light: #f4f4f5;

  --md-accent-fg-color: #818cf8;
  --md-accent-fg-color--transparent: rgba(99, 102, 241, 0.1);
  --md-accent-bg-color: #e4e4e7;

  --md-text-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0a0f;
  --md-default-fg-color: #e4e4e7;
  --md-default-fg-color--light: #a1a1aa;
  --md-default-fg-color--lighter: #52525b;
  --md-default-fg-color--lightest: #3a3a48;

  --md-code-bg-color: #12121a;
  --md-code-fg-color: #e4e4e7;
  --md-typeset-color: #e4e4e7;
  --md-typeset-a-color: #818cf8;
  --md-typeset-table-color: rgba(42, 42, 54, 0.5);

  --md-footer-bg-color: #0a0a0f;
  --md-footer-bg-color--dark: #0a0a0f;
}

/* ---- Chrome ---- */
.md-header {
  background-color: #12121a;
  border-bottom: 1px solid #2a2a36;
  box-shadow: none;
}

/* Logo aspect protection.
   The header is a flex row and Material leaves the logo at flex-shrink:1 with
   min-width:0 and object-fit:fill. Below roughly 1200px the title pushes back,
   the image is allowed to shrink on the x axis only, and `fill` squashes the
   bitmap to match -- at 900px it collapses to zero width entirely. Pinning the
   box and using `contain` keeps the mark circular at every width. */
.md-header__button.md-logo :is(img, svg),
.md-nav__button.md-logo :is(img, svg) {
  flex-shrink: 0;
  object-fit: contain;
  width: 1.5rem;
  height: 1.5rem;
}
.md-header__title { font-weight: 700; letter-spacing: 0.12em; }
.md-header__topic:first-child { text-transform: uppercase; font-size: 0.72rem; }
.md-tabs {
  background-color: #12121a;
  border-bottom: 1px solid #2a2a36;
}
.md-tabs__link { color: #a1a1aa; opacity: 1; }
.md-tabs__link--active,
.md-tabs__link:hover { color: #818cf8; }
.md-sidebar { background-color: #0a0a0f; }
.md-content { background-color: #0a0a0f; }
.md-footer { background-color: #12121a; border-top: 1px solid #2a2a36; }
.md-footer-meta { background-color: #0a0a0f; }

/* ---- Navigation ---- */
.md-nav__link { color: #a1a1aa; }
.md-nav__link:hover,
.md-nav__link--active { color: #818cf8; }
.md-nav__item--active > .md-nav__link { color: #818cf8; font-weight: 500; }
.md-nav__title { color: #e4e4e7; }

/* ---- Typography ---- */
.md-typeset h1 {
  color: #e4e4e7;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.md-typeset h2 {
  color: #e4e4e7;
  font-weight: 500;
  margin-top: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #2a2a36;
}
.md-typeset h3 { color: #e4e4e7; font-weight: 500; }
.md-typeset a:hover { color: #6366f1; }

/* Lead paragraph — the one-line answer under each H1. */
.md-typeset h1 + p {
  color: #a1a1aa;
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ---- Code ---- */
.md-typeset code {
  background-color: #12121a;
  color: #e4e4e7;
  border: 1px solid #2a2a36;
  border-radius: 4px;
}
.md-typeset pre {
  background-color: #12121a;
  border: 1px solid #2a2a36;
  border-radius: 6px;
}
.md-typeset pre > code { border: none; }

/* Keyboard keys — used heavily in the shortcut reference. */
.md-typeset kbd {
  background-color: #1a1a24;
  color: #e4e4e7;
  border: 1px solid #3a3a48;
  border-radius: 4px;
  box-shadow: 0 2px 0 #2a2a36;
  font-size: 0.85em;
  padding: 0.1em 0.5em;
}

/* ---- Tables ---- */
.md-typeset table:not([class]) { border: 1px solid #2a2a36; }
.md-typeset table:not([class]) th {
  background-color: #1a1a24;
  color: #e4e4e7;
  border-color: #2a2a36;
  font-weight: 500;
}
.md-typeset table:not([class]) td { border-color: #2a2a36; }
.md-typeset table:not([class]) tr:hover { background-color: #12121a; }

/* ---- Screenshots ---- */
.md-typeset img {
  border: 1px solid #2a2a36;
  border-radius: 8px;
  max-width: 100%;
}
.md-typeset figure img { margin-bottom: 0.4em; }
.md-typeset figcaption {
  color: #52525b;
  font-size: 0.72rem;
  text-align: center;
}

/* ---- Admonitions ---- */
.md-typeset .admonition,
.md-typeset details {
  background-color: #12121a;
  border-radius: 6px;
  font-size: 0.75rem;
}
.md-typeset .admonition.note,
.md-typeset details.note { border-color: #6366f1; }
.md-typeset .note > .admonition-title,
.md-typeset .note > summary { background-color: rgba(99, 102, 241, 0.1); }

.md-typeset .admonition.tip,
.md-typeset details.tip { border-color: #10b981; }
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary { background-color: rgba(16, 185, 129, 0.1); }

.md-typeset .admonition.warning,
.md-typeset details.warning { border-color: #f59e0b; }
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary { background-color: rgba(245, 158, 11, 0.1); }

.md-typeset .admonition.danger,
.md-typeset details.danger { border-color: #f43f5e; }
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary { background-color: rgba(244, 63, 94, 0.1); }

.md-typeset .admonition.info,
.md-typeset details.info { border-color: #06b6d4; }
.md-typeset .info > .admonition-title,
.md-typeset .info > summary { background-color: rgba(6, 182, 212, 0.1); }

/* ---- Search ---- */
.md-search__input { background-color: #1a1a24; color: #e4e4e7; }
.md-search__input::placeholder { color: #52525b; }
[data-md-color-scheme="slate"] .md-search__output { background-color: #12121a; }

/* ---- Misc ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a3a48 #12121a;
}
::selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: #e4e4e7;
}
.md-typeset hr { border-bottom: 1px solid #2a2a36; }