/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg is monochrome: an off-white #f6f6f4 half and a near-black
 * #0b0b0c half, with #a9a9b2 and #55555c greys for the secondary text. The app
 * uses the same zinc greys and no hue, so the site does too. With no colour to
 * tell a link from body text, links are underlined.
 */
:root {
  --md-primary-fg-color:        #0b0b0c;  /* banner dark half */
  --md-primary-fg-color--light: #2b292c;
  --md-primary-fg-color--dark:  #000000;
  --md-primary-bg-color:        #f6f6f4;  /* banner light half, text on the header */
  --md-primary-bg-color--light: #a9a9b2;

  --md-accent-fg-color:         #a9a9b2;  /* banner grey */
  --md-accent-fg-color--transparent: #a9a9b21a;
}

/* Dark scheme: the page body uses the banner's dark half too, so the header
   and the page read as one surface. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:        #0b0b0c;
  --md-code-bg-color:           #19181a;
  --md-typeset-a-color:         #f6f6f4;
}

/* Light scheme: #a9a9b2 on white is 2.3:1, too faint even for hover. #55555c
   is 7.4:1; links take the banner's near-black. */
[data-md-color-scheme="default"] {
  --md-accent-fg-color:         #55555c;
  --md-typeset-a-color:         #0b0b0c;
}

.md-typeset a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Fixed logo size so it does not crowd the site name. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}