/* The colours of the app: a navy header, blue buttons, a sky accent, Segoe UI. */
:root {
  --md-text-font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --md-code-font: Consolas, "Cascadia Mono", ui-monospace, monospace;
}

[data-md-color-primary=custom] {
  --md-primary-fg-color: #0f172a;
  --md-primary-fg-color--light: #1e293b;
  --md-primary-fg-color--dark: #0b1120;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, .7);
}

[data-md-color-accent=custom] {
  --md-accent-fg-color: #2563eb;
  --md-accent-fg-color--transparent: rgba(37, 99, 235, .1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, .7);
}

[data-md-color-scheme=default] {
  --md-typeset-a-color: #2563eb;
}

[data-md-color-scheme=slate] {
  --md-typeset-a-color: #7dd3fc;
  --md-default-bg-color: #0f172a;
  --md-default-fg-color: #e2e8f0;
  --md-code-bg-color: #1e293b;
  --md-footer-bg-color: #0b1120;
  --md-footer-bg-color--dark: #0b1120;
}

/* The active tab in the app's sky blue. */
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: #38bdf8;
}
.md-tabs__link:hover {
  color: #7dd3fc;
}

.md-header__button.md-logo img {
  height: 1.6rem;
  width: 1.6rem;
}

/* Buttons like the app's. */
.md-typeset .md-button--primary {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

/* The home page. */
.hero {
  text-align: center;
  padding: 1.5rem 0 1rem;
}
.hero img.logo {
  width: 104px;
  height: 104px;
  filter: drop-shadow(0 8px 24px rgba(56, 189, 248, .35));
}
.hero .eyebrow {
  color: #0284c7;
  font-weight: 600;
  letter-spacing: .04em;
  font-size: .8rem;
  margin: .6rem 0 0;
}
[data-md-color-scheme=slate] .hero .eyebrow {
  color: #38bdf8;
}
.md-typeset .hero h1 {
  font-size: 2.2rem;
  margin: .3rem 0 .6rem;
  letter-spacing: -.02em;
}
.hero p.tag {
  font-size: 1.05rem;
  max-width: 36rem;
  margin: 0 auto 1rem;
}
.hero .md-button {
  margin: .25rem .3rem;
}
.hero .badges {
  margin-top: 1rem;
}
.hero .badges img {
  height: 22px;
  margin: 2px;
}

/* Screenshots: a frame, centred. */
.md-typeset figure.shot {
  margin: 1rem auto;
}
.md-typeset figure.shot img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.md-typeset figure.shot figcaption {
  font-size: .75rem;
  color: var(--md-default-fg-color--light);
}

/* Secondary buttons: blue in both schemes (the theme would take the navy primary colour). */
.md-typeset .md-button:not(.md-button--primary) {
  color: #2563eb;
  border-color: #2563eb;
}
[data-md-color-scheme=slate] .md-typeset .md-button:not(.md-button--primary) {
  color: #7dd3fc;
  border-color: #7dd3fc;
}
.md-typeset .md-button:not(.md-button--primary):hover {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.md-typeset .hero h1 .headerlink {
  display: none;
}