/* Brand colours taken from the app logo: navy header, gold accent. */
:root {
  --md-primary-fg-color: #1b2440;
  --md-primary-fg-color--light: #2a375f;
  --md-primary-fg-color--dark: #121a30;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-accent-fg-color: #b7790a;
  --md-accent-fg-color--transparent: rgba(242, 179, 61, 0.12);
}

/* Light theme: links in a clear blue so they stand out from the dark body text. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #3653b5;
}

/* Dark theme: slate background tinted towards the logo navy; gold links stay readable on it. */
[data-md-color-scheme="slate"] {
  --md-hue: 225;
  --md-typeset-a-color: #f2b33d;
  --md-accent-fg-color: #ffd27a;
}

/* Screenshots: thin frame and rounded corners, so dark screenshots stand out on the light theme too. */
.md-typeset figure img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
}

/* Slightly larger logo in the header, so the gold band is visible. */
.md-header__button.md-logo img {
  height: 1.6rem;
}