/* Colours of the app (web/src/app.css): navy in light mode, amber accents in dark mode. */
:root {
  --md-primary-fg-color: #182633;
  --md-primary-fg-color--light: #2c4560;
  --md-primary-fg-color--dark: #0c141c;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #f59e0b;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #101b25;
  --md-primary-fg-color--light: #1c2c3d;
  --md-primary-fg-color--dark: #0c141c;
  --md-accent-fg-color: #fbbf24;
  --md-typeset-a-color: #fbbf24;
  --md-default-bg-color: #0c141c;
}

/* Screenshots get a frame so they stand out from the page. */
.md-typeset img.screenshot {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

/* Only show the screenshot that matches the colour scheme. */
[data-md-color-scheme="default"] .only-dark,
[data-md-color-scheme="slate"] .only-light {
  display: none;
}