/* House look: the console's Geist and Geist Mono, from the API's own
   self-hosted files (theme.font is false, so nothing loads from Google), and
   the console's ink, ground, line and orbit-blue tokens. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/fonts/geist-latin-300-600.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/geist-mono-latin-400-500.woff2") format("woff2");
}

:root {
  --md-text-font: "Geist";
  --md-code-font: "Geist Mono";
  /* The console's tokens (src/planisphere_api/static/console/app.css :root). */
  --planisphere-orbit-blue: #1766D2;
  --planisphere-ink: #111111;
  --planisphere-ground: #F7F4EF;
  --planisphere-ledger: #5B6472;
  --planisphere-line: rgb(17 17 17 / 18%);
  --planisphere-veil: rgb(17 17 17 / 4%);
}

/* Geist ships 300-600 and Geist Mono 400-500: a bolder request uses the
   heaviest real weight instead of a smeared faux bold, as in the console. */
body {
  font-synthesis-weight: none;
}

/* The console's palette: a ground page and header with ink text, a hairline
   under the header, and orbit blue for links and the accent (theme.palette
   is primary: custom, accent: custom, so Material defines none of these). */
:root,
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--planisphere-ground);
  --md-default-fg-color: rgb(17 17 17 / 87%);
  --md-default-fg-color--light: rgb(17 17 17 / 62%);
  --md-default-fg-color--lighter: rgb(17 17 17 / 36%);
  --md-default-fg-color--lightest: rgb(17 17 17 / 8%);
  --md-code-bg-color: color-mix(in srgb, var(--planisphere-ground) 90%, var(--planisphere-ledger));
  --md-code-fg-color: var(--planisphere-ink);
  --md-typeset-a-color: var(--planisphere-orbit-blue);
}

:root,
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--planisphere-ground);
  --md-primary-fg-color--light: var(--planisphere-ground);
  --md-primary-fg-color--dark: var(--planisphere-ink);
  --md-primary-bg-color: var(--planisphere-ink);
  --md-primary-bg-color--light: rgb(17 17 17 / 62%);
}

:root,
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--planisphere-orbit-blue);
  --md-accent-fg-color--transparent: rgb(23 102 210 / 10%);
  --md-accent-bg-color: var(--planisphere-ground);
  --md-accent-bg-color--light: rgb(247 244 239 / 70%);
}

.md-header {
  border-bottom: 1px solid var(--planisphere-line);
  box-shadow: none;
}

.md-header--shadow {
  box-shadow: none;
}

.md-tabs {
  border-bottom: 1px solid var(--planisphere-line);
}

/* The symbol raster carries a paper-white ground, as in the console. */
.md-header__button.md-logo img {
  mix-blend-mode: multiply;
}

/* The search field sits on the ground header: a faint ink wash and a
   hairline, not Material's dark glass; open, it is the page ground. */
@media screen and (min-width: 60em) {
  .md-search__form {
    background-color: var(--planisphere-veil);
    box-shadow: inset 0 0 0 1px var(--planisphere-line);
  }

  .md-search__form:hover {
    background-color: rgb(17 17 17 / 8%);
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    background-color: var(--md-default-bg-color);
  }

  .md-search__input {
    color: var(--planisphere-ink);
  }

  .md-search__input::placeholder,
  .md-search__input ~ .md-search__icon {
    color: rgb(17 17 17 / 62%);
  }
}

/* Light display headings, as the console sets its page and card titles. */
.md-typeset h1,
.md-typeset h2 {
  font-family: var(--md-text-font-family);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  font-family: var(--md-text-font-family);
  font-weight: 500;
  letter-spacing: 0;
}

.md-typeset h1 {
  color: var(--planisphere-ink);
}

.md-typeset h2 {
  border-bottom: 1px solid var(--planisphere-line);
  padding-bottom: 0.2em;
}

.md-typeset h1 .headerlink,
.md-typeset h2 .headerlink,
.md-typeset h3 .headerlink {
  color: var(--planisphere-orbit-blue);
}

/* Links in running text are underlined, not told apart by colour alone
   (WCAG 1.4.1): orbit blue is only 2.46:1 against the body text. Heading
   permalinks and buttons keep their own look. */
.md-typeset a:not(.headerlink):not(.md-button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* The footer's links ("Planisphere home", "Console") were the same grey as the
   copyright line around them: full footer white, underlined. */
.md-footer-meta.md-typeset .md-copyright a {
  color: var(--md-footer-fg-color);
}