/* Applies the vendored platform tokens (tokens.css) to mkdocs-material.
 * Tokens are the platform's; applying them at documentation scale is this
 * file's job, mirroring how web/site/src/site.css applies them for marketing.
 * Dark (slate) is the brand scheme and the default; light derives from the
 * same tokens with the deep brand blue standing in for the accent, which
 * needs a dark surface to clear WCAG AA.
 */

:root {
  --md-text-font: var(--font);
  --md-code-font: var(--font-mono);
}

/* Brand scheme — reads like mklang.dev */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--bg);
  --md-default-fg-color: var(--text);
  --md-default-fg-color--light: var(--text-secondary);
  --md-default-fg-color--lighter: var(--text-muted);
  --md-default-fg-color--lightest: var(--bg-active);
  --md-typeset-color: var(--text);
  --md-typeset-a-color: var(--accent);
  --md-accent-fg-color: var(--accent-hover);
  --md-primary-fg-color: var(--bg-elevated);
  --md-primary-bg-color: var(--text);
  --md-code-bg-color: #05070b; /* the site's .terminal ground */
  --md-code-fg-color: var(--text);
  --md-typeset-table-color: var(--border);
  --md-typeset-kbd-color: var(--bg-panel-solid);
  --md-footer-bg-color: var(--bg-elevated);
  --md-footer-bg-color--dark: var(--bg);
  --md-footer-fg-color: var(--text-secondary);
}

/* Light derivative. The vendored :root pins color-scheme: dark; undo it here
 * so form controls and scrollbars follow the visible scheme. */
[data-md-color-scheme="default"] {
  color-scheme: light;
  --md-typeset-a-color: var(--brand-deep);
  --md-accent-fg-color: var(--accent-pressed);
  --md-primary-fg-color: var(--bg-elevated); /* masthead stays the brand dark */
  --md-primary-bg-color: var(--text);
  --md-code-bg-color: #f2f4f8;
  --md-footer-bg-color: var(--bg-elevated);
  --md-footer-bg-color--dark: var(--bg);
}

/* Site typography: 400/600 only, tight headings, generous body */
.md-typeset {
  line-height: 1.6;
  letter-spacing: -0.011em;
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.md-typeset strong {
  font-weight: 600;
}

/* Shape: the platform's hairline-and-radius vocabulary */
.md-typeset pre > code {
  border-radius: var(--radius-sm);
}
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--radius-sm);
}