/* Brand tokens */
:root {
  --cz-primary: #32cfa6;
  --cz-primary-dark: #0c6d54;
  --cz-dark: #26282B;
  --cz-light: #F7F4EF;
  --cz-light-grey: #ebe7e4;

  /* Material theme variables */
  --md-primary-fg-color: var(--cz-dark);
  --md-accent-fg-color: var(--cz-dark);

  /* Code boxes */
  --md-code-bg-color: var(--cz-light-grey);
  --md-code-fg-color: var(--cz-primary-dark);

  --md-default-bg-color: var(--cz-light);
  --md-default-fg-color: var(--cz-dark);

  --md-typeset-a-color: var(--cz-dark);
}

/* Top bar */
.md-header {
  background-color: var(--cz-dark);
}

/* Ensure header text/icons are readable */
.md-header__title,
.md-header__button,
.md-search__input {
  color: var(--cz-light);
}

/* Content links */
.md-typeset a {
  color: var(--cz-primary);
  text-decoration: none;
  font-weight: 500;
}

.md-typeset a:hover,
.md-typeset a:focus {
  text-decoration: underline;
}

/* Code box */
.md-typeset pre>code {
  border-radius: 6px;
}
.md-code__nav {
  background-color: rgba(38,40,43,.05);
}
:hover>.md-code__nav {
  background-color: rgba(38,40,43,.6);
}
.md-code__button {
  color: rgba(38,40,43,.1);
}
:hover>.md-code__nav .md-code__button {
  color: rgba(247,244,236,.9);
}