/* kasas brand palette — tuned to the logo (navy circle, cyan gopher). */

:root {
  --kasas-navy: #1b3a5e;
  --kasas-navy-light: #2c5689;
  --kasas-navy-dark: #112740;
  --kasas-cyan: #29a8cc;
  --kasas-cyan-bright: #4cc9f0;
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--kasas-navy);
  --md-primary-fg-color--light: var(--kasas-navy-light);
  --md-primary-fg-color--dark: var(--kasas-navy-dark);
  --md-accent-fg-color: #0e7da0;
  --md-typeset-a-color: #0e6f8f;
}

/* Dark scheme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--kasas-navy);
  --md-primary-fg-color--light: var(--kasas-navy-light);
  --md-primary-fg-color--dark: var(--kasas-navy-dark);
  --md-accent-fg-color: var(--kasas-cyan-bright);
  --md-typeset-a-color: #5cc4e6;
  /* a faint blue cast on the dark background to match the brand */
  --md-default-bg-color: hsl(212, 22%, 12%);
}

/* Header logo a touch larger and crisp. */
.md-header__button.md-logo img {
  height: 1.6rem;
  width: 1.6rem;
}

/* Center Mermaid diagrams and give them breathing room. */
.md-typeset .mermaid {
  margin: 1.4em auto;
  text-align: center;
}

/* Homepage hero. */
.kasas-hero {
  text-align: center;
  padding: 1.2rem 0 0.4rem;
}
.kasas-hero img {
  width: 132px;
  height: 132px;
}
.kasas-hero h1 {
  margin: 0.4rem 0 0.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.kasas-hero .kasas-tagline {
  font-size: 1.15rem;
  color: var(--md-default-fg-color--light);
  max-width: 42rem;
  margin: 0 auto;
}

/* Tighten grid cards and lift them on hover. */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Pill row used under the hero. */
.kasas-pills {
  text-align: center;
  margin: 0.6rem 0 0.2rem;
}
.kasas-pills a {
  display: inline-block;
}