/* Give /docs/ the landing page's colours.
 *
 * The values below are the ones in web/style.css; keep the two in step.  This
 * only remaps Material's colour and font variables -- no layout is touched, so
 * a theme update cannot collide with it.
 */

:root {
  --lt-background: #111315;
  --lt-surface: #191c1f;
  --lt-line: #343a3e;
  --lt-muted: #9ba3a8;
  --lt-text: #f1f3f2;
  --lt-accent: #c9f06b;
  --lt-accent-muted: #829d42;

  --md-text-font: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --md-primary-fg-color: var(--lt-surface);
  --md-primary-fg-color--light: var(--lt-line);
  --md-primary-fg-color--dark: var(--lt-background);
  --md-primary-bg-color: var(--lt-text);
  --md-primary-bg-color--light: var(--lt-muted);

  --md-footer-bg-color: var(--lt-surface);
  --md-footer-bg-color--dark: var(--lt-background);
  --md-footer-fg-color: var(--lt-text);
  --md-footer-fg-color--light: var(--lt-muted);
  --md-footer-fg-color--lighter: var(--lt-line);

  --md-default-bg-color: var(--lt-background);
  --md-default-bg-color--light: rgba(241, 243, 242, 0.06);
  --md-default-bg-color--lighter: rgba(241, 243, 242, 0.03);
  --md-default-bg-color--lightest: rgba(241, 243, 242, 0.015);

  --md-default-fg-color: var(--lt-text);
  --md-default-fg-color--light: var(--lt-muted);
  --md-default-fg-color--lighter: #6d757a;
  --md-default-fg-color--lightest: var(--lt-line);

  /* Body copy sits at the landing page's grey, the same relationship its lede
   * has to its headings.  7.4:1 on the background, and it leaves the near
   * white for the things that should stand out. */
  --md-typeset-color: var(--lt-muted);
  --md-typeset-a-color: var(--lt-accent);
  --md-accent-fg-color: var(--lt-accent);
  --md-accent-fg-color--transparent: rgba(201, 240, 107, 0.1);
  /* What sits on top of the accent when it is used as a fill. */
  --md-accent-bg-color: var(--lt-background);
  --md-accent-bg-color--light: rgba(17, 19, 21, 0.7);

  --md-code-bg-color: var(--lt-surface);
  --md-code-fg-color: var(--lt-text);
  --md-typeset-kbd-color: var(--lt-line);
  --md-typeset-kbd-accent-color: #454d52;
  --md-typeset-kbd-border-color: var(--lt-background);
  --md-typeset-mark-color: rgba(201, 240, 107, 0.25);
  --md-typeset-table-color: var(--lt-line);

  /* Material derives the search and admonition surfaces from these. */
  --md-shadow-z1: 0 0 0 1px var(--lt-line);
  --md-shadow-z2: 0 0 0 1px var(--lt-line);
}

/* What the grey body copy is there to set off.  Material leaves bold text at
 * the inherited colour and dims h1, both of which work against that. */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6,
[data-md-color-scheme="slate"] .md-typeset th,
[data-md-color-scheme="slate"] .md-typeset strong,
[data-md-color-scheme="slate"] .md-typeset b {
  color: var(--lt-text);
}

/* Inline code is the landing page's one accent-coloured detail. */
[data-md-color-scheme="slate"] .md-typeset code {
  color: var(--lt-accent);
}

/* Material normally hovers a link to the accent colour, but here the link
 * colour already is the accent -- so hovering would do nothing visible.  Flip
 * to the body colour instead, the way the landing page's links do. */
[data-md-color-scheme="slate"] .md-typeset a:hover,
[data-md-color-scheme="slate"] .md-typeset a:focus {
  color: var(--lt-text);
}

/* The search field sits on the dark header. */
.md-search__form {
  background-color: rgba(241, 243, 242, 0.1);
}

.md-search__form:hover {
  background-color: rgba(241, 243, 242, 0.16);
}

/* Match the landing page's tight, slightly negative heading tracking. */
.md-typeset h1,
.md-typeset h2 {
  letter-spacing: -0.03em;
}