/* Colors taken from the group logo (docs/images/logo.png) */
:root {
  --bhi-charcoal: #313131;
  --bhi-charcoal-dark: #1f1f1f;
  --bhi-yellow: #fdeb68;
  --bhi-gold: #7a6400; /* darker yellow, readable on white */
}

/* Light theme (default) */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--bhi-charcoal);
  --md-primary-fg-color--light: #4a4a4a;
  --md-primary-fg-color--dark: var(--bhi-charcoal-dark);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color: var(--bhi-gold);
  --md-accent-fg-color--transparent: rgba(253, 235, 104, 0.25);
  --md-accent-bg-color: var(--bhi-charcoal);
  --md-typeset-a-color: var(--bhi-gold);
  --md-footer-bg-color: var(--bhi-charcoal);
  --md-footer-bg-color--dark: var(--bhi-charcoal-dark);
}

/* Dark theme */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #262626;
  --md-primary-fg-color: var(--bhi-charcoal-dark);
  --md-primary-fg-color--light: var(--bhi-charcoal);
  --md-primary-fg-color--dark: #141414;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color: #fff3a8;
  --md-accent-fg-color--transparent: rgba(253, 235, 104, 0.15);
  --md-accent-bg-color: var(--bhi-charcoal);
  --md-typeset-a-color: var(--bhi-yellow);
  --md-footer-bg-color: var(--bhi-charcoal-dark);
  --md-footer-bg-color--dark: #141414;
}

/* Buttons: charcoal with yellow text, like the logo */
.md-typeset .md-button {
  color: var(--bhi-charcoal);
  border-color: var(--bhi-charcoal);
}

.md-typeset .md-button--primary,
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  color: var(--bhi-yellow);
  background-color: var(--bhi-charcoal);
  border-color: var(--bhi-charcoal);
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  color: var(--bhi-yellow);
  border-color: var(--bhi-yellow);
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary,
[data-md-color-scheme="slate"] .md-typeset .md-button:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:focus {
  color: var(--bhi-charcoal);
  background-color: var(--bhi-yellow);
  border-color: var(--bhi-yellow);
}

/* Yellow underline on the page title, echoing the logo */
.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-weight: 700;
  border-bottom: 4px solid var(--bhi-yellow);
  display: inline-block;
  padding-bottom: 0.2em;
}