:root {
  --cb-navy: #031e45;
  --cb-orange: #fe5503;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #031e45;
  --md-primary-fg-color--light: #1b3a6b;
  --md-primary-fg-color--dark: #021430;
  --md-accent-fg-color: #fe5503;
  --md-typeset-a-color: #c63f00;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #031e45;
  --md-primary-fg-color--light: #1b3a6b;
  --md-primary-fg-color--dark: #021430;
  --md-accent-fg-color: #fe5503;
  --md-typeset-a-color: #ff7a33;
  --md-default-bg-color: #0b1220;
  --md-default-bg-color--light: #121a2b;
  --md-code-bg-color: #101a2e;
}

.md-header {
  background-color: var(--cb-navy);
}

.md-tabs {
  background-color: var(--cb-navy);
}

.md-typeset .md-button {
  border-radius: 0.5rem;
  font-weight: 600;
}

.md-typeset .md-button--primary {
  background-color: var(--cb-orange);
  border-color: var(--cb-orange);
  color: #fff;
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: #d94700;
  border-color: #d94700;
  color: #fff;
}

/* Landing page */
.cb-hero {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.cb-hero img {
  max-width: min(560px, 90%);
  height: auto;
}

.cb-hero h1 {
  color: var(--cb-navy);
  margin: 0.5rem 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.cb-hero p {
  max-width: 40rem;
  margin: 0.75rem auto;
}

.cb-download {
  font-size: 1.05rem;
  padding: 0.7rem 2rem !important;
  margin-top: 0.5rem;
}

.cb-meta {
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
}

.cb-shot img {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  box-shadow: 0 6px 24px rgba(3, 30, 69, 0.15);
}

.cb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.cb-stat {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  text-align: center;
}

.cb-stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--cb-orange);
  line-height: 1.2;
}

.cb-stat span {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--cb-orange);
}

[data-md-color-scheme="slate"] .cb-hero h1 {
  color: #eef3fa;
}