/* Arrange brand colors, matched to usearrange.com and the app icon. */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #004aad;
  --md-primary-fg-color--light: #2f81f7;
  --md-primary-fg-color--dark: #003a8a;
  --md-accent-fg-color: #2f81f7;
  --md-typeset-a-color: #004aad;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #161b22;
  --md-primary-fg-color--light: #21282d;
  --md-primary-fg-color--dark: #0d1117;
  --md-accent-fg-color: #a5d6ff;
  --md-typeset-a-color: #79b8ff;
  --md-default-bg-color: #0d1117;
  --md-code-bg-color: #161b22;
  --md-footer-bg-color: #0d1117;
  --md-footer-bg-color--dark: #0a0d12;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: #0d1117;
  border-bottom: 1px solid rgba(139, 148, 158, 0.25);
}

/* Screenshots get rounded corners and a soft border. */
.md-typeset img.screen {
  border-radius: 12px;
  border: 1px solid rgba(139, 148, 158, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Download button on the home page. */
.md-typeset .md-button {
  border-radius: 999px;
}

/* Step cards on the home page. */
.md-typeset .grid.cards > ul > li {
  border-radius: 14px;
}

/* Buttons use the brand blue in both schemes (slate's primary is the dark header color). */
.md-typeset .md-button {
  color: #2f81f7;
  border-color: #2f81f7;
}
.md-typeset .md-button--primary,
.md-typeset .md-button--primary:hover,
.md-typeset .md-button:hover {
  background-color: #2f81f7;
  border-color: #2f81f7;
  color: #fff;
}
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: #a5d6ff;
  border-color: #a5d6ff;
}
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover {
  background-color: #2f81f7;
  border-color: #2f81f7;
  color: #fff;
}