/* Pulse marketing palette applied to MkDocs Material.
   Tokens mirror src/app/(marketing)/marketing.css — warm paper, carbon ink,
   instrument-blue signal. Display: Space Grotesk; body: Inter; mono: JetBrains Mono. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root,
[data-md-color-scheme="default"] {
  --md-default-bg-color: #f4f2ec;
  --md-default-fg-color: #0e1116;
  --md-default-fg-color--light: #5a5e66;
  --md-default-fg-color--lighter: #9a9da3;
  --md-default-fg-color--lightest: rgba(14, 17, 22, 0.06);

  --md-primary-fg-color: #0e1116;
  --md-primary-fg-color--light: #23262d;
  --md-primary-fg-color--dark: #0e1116;
  --md-primary-bg-color: #ffffff;

  --md-accent-fg-color: #1b36f5;
  --md-accent-fg-color--transparent: rgba(27, 54, 245, 0.1);
  --md-accent-bg-color: #ffffff;

  --md-typeset-a-color: #1b36f5;

  --md-code-bg-color: #ffffff;
  --md-code-fg-color: #0e1116;

  --md-text-font: "Inter", system-ui, -apple-system, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, monospace;

  --pulse-hairline: rgba(14, 17, 22, 0.1);
  --pulse-hairline-strong: rgba(14, 17, 22, 0.18);
  --pulse-card: #ffffff;
  --pulse-bg-recede: #e8e2d2;
  --pulse-signal-soft: #dce3ff;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0e1116;
  --md-default-fg-color: #f4f2ec;
  --md-default-fg-color--light: #b8bbc1;
  --md-default-fg-color--lighter: #7a7d83;
  --md-primary-fg-color: #0e1116;
  --md-accent-fg-color: #6b82ff;
  --md-typeset-a-color: #6b82ff;
  --pulse-hairline: rgba(244, 242, 236, 0.1);
  --pulse-hairline-strong: rgba(244, 242, 236, 0.2);
  --pulse-card: #181b22;
}

body,
.md-typeset {
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* Display type — Space Grotesk on headings, with marketing letterspacing. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-header__topic,
.md-header__title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--md-default-fg-color);
}

.md-typeset {
  font-size: 0.78rem;
}

.md-typeset h1 {
  font-size: clamp(1.55rem, 2.6vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin-bottom: 1rem;
}

.md-typeset h2 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.22;
  margin-top: 1.9rem;
}

.md-typeset h3 {
  font-size: 1rem;
  margin-top: 1.5rem;
}

.md-typeset p,
.md-typeset li {
  line-height: 1.62;
  color: var(--md-default-fg-color--light);
}

.md-typeset strong {
  color: var(--md-default-fg-color);
}

/* Header bar — paper-on-paper with hairline, matches marketing nav. */
.md-header {
  background: rgba(244, 242, 236, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pulse-hairline);
  color: var(--md-default-fg-color);
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-header {
  background: rgba(14, 17, 22, 0.82);
}

.md-header__title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* Inline links — signal blue with hairline underline, as in marketing. */
.md-typeset a:not(.md-button):not(.md-tag):not(.md-nav__link):not(.md-footer__link) {
  color: var(--md-accent-fg-color);
  text-decoration: none;
  border-bottom: 1px solid var(--pulse-signal-soft);
  transition: border-color 0.15s ease;
}

.md-typeset a:not(.md-button):not(.md-tag):not(.md-nav__link):not(.md-footer__link):hover {
  border-bottom-color: var(--md-accent-fg-color);
}

/* Nav rail — quieter, mono micro-labels for section headings. */
.md-nav__title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  font-weight: 400;
}

.md-nav__link {
  color: var(--md-default-fg-color--light);
}

.md-nav__link:hover,
.md-nav__link--active {
  color: var(--md-default-fg-color);
}

.md-nav__link--active {
  font-weight: 500;
}

/* Search input — clean rounded pill in paper tone. */
.md-search__form {
  background: var(--pulse-card);
  border: 1px solid var(--pulse-hairline);
  border-radius: 999px;
}

.md-search__input {
  font-family: "Inter", sans-serif;
}

/* Code — paper card with hairline, mono font already set above. */
.md-typeset code,
.md-typeset pre {
  font-size: 0.86em;
}

.md-typeset code {
  background: var(--pulse-card);
  border: 1px solid var(--pulse-hairline);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--md-default-fg-color);
}

.md-typeset pre > code {
  border: none;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--pulse-card);
  box-shadow: 0 0 0 1px var(--pulse-hairline);
}

/* Tables — hairline grid, monospaced numerics, paper card. */
.md-typeset table:not([class]) {
  border: 1px solid var(--pulse-hairline);
  border-radius: 14px;
  overflow: hidden;
  background: var(--pulse-card);
  font-size: 0.78rem;
}

.md-typeset table:not([class]) th {
  background: transparent;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  font-weight: 400;
  border-bottom: 1px solid var(--pulse-hairline);
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid var(--pulse-hairline);
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

/* Blockquote — left-bar in signal blue, like marketing pull-quotes. */
.md-typeset blockquote {
  border-left: 2px solid var(--md-accent-fg-color);
  padding-left: 1.1rem;
  color: var(--md-default-fg-color);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.04rem;
  line-height: 1.55;
  letter-spacing: -0.008em;
}

/* Eyebrow-style label using H6 for section openers (optional pattern). */
.md-typeset h6 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  font-weight: 400;
  margin-bottom: 1rem;
}

/* Footer — quiet mono, hairline divider. */
.md-footer {
  background: transparent;
  color: var(--md-default-fg-color--lighter);
  border-top: 1px solid var(--pulse-hairline);
}

.md-footer-meta {
  background: transparent;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Admonitions — paper cards with signal-blue accents. */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--pulse-hairline);
  border-radius: 14px;
  background: var(--pulse-card);
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border-bottom: 1px solid var(--pulse-hairline);
}

/* Mermaid diagrams — paper card frame so inline flowcharts read as figures,
   not raw SVG dumped on the page. Authoring convention lives in ADR-083. */
.md-typeset .mermaid {
  background: var(--pulse-card);
  border: 1px solid var(--pulse-hairline);
  border-radius: 14px;
  padding: 1.2rem 1rem;
  margin: 1.4rem 0;
  text-align: center;
}

/* Large diagrams (e.g. the full 79-ADR map) live inside a collapsible
   <details>. A graph that wide is unreadable when squeezed to column width,
   so inside <details> let it render at natural size and scroll horizontally
   rather than scaling down to fit. */
.md-typeset details .mermaid {
  overflow-x: auto;
  text-align: left;
}
.md-typeset details .mermaid svg {
  max-width: none !important;
  height: auto;
}

/* Figure caption — pair an italic line directly under a diagram or table.
   Usage: follow the diagram with `{ .figure-caption }` on a paragraph. */
.md-typeset .figure-caption {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--lighter);
  text-align: center;
  margin-top: -0.8rem;
  margin-bottom: 1.6rem;
}

/* Reader's-guide / "start here" callout — signal-soft card to mark the
   plain-language entry point at the top of a dense section. Usage:
   wrap intro in `!!! tip "Start here"` or apply class via attr_list. */
.md-typeset .start-here {
  background: var(--pulse-signal-soft);
  border: 1px solid var(--pulse-hairline-strong);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0 1.8rem;
}

[data-md-color-scheme="slate"] .md-typeset .start-here {
  background: rgba(107, 130, 255, 0.12);
}