/* Base theme overrides with your logo palette */

/* Outer ring + handle → Graphite */
:root {
    --md-primary-fg-color: #2E3440;   /* graphite */
    --md-accent-fg-color: #5E81AC;    /* aqua */
    --md-default-bg-color: #ECEFF4;   /* ice gray */
  }

  /* Headings for crisp modern feel */
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #2E3440;
  }

  /* Links with aqua accent */
  .md-typeset a {
    color: #5E81AC;
  }
  .md-typeset a:hover {
    text-decoration: underline;
    color: #2E3440;
  }

  /* Navigation bar */
  .md-header {
    background-color: #2E3440 !important;
    color: #ECEFF4 !important;
  }

  /* Active tab highlighting */
  .md-tabs__item--active > a {
    color: #5E81AC !important;
    font-weight: 600;
  }

  /* Footer background */
  .md-footer {
    background-color: #ECEFF4 !important;
    color: #2E3440 !important;
  }

  /* Make sure logo looks crisp */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 32px;   /* tweak as needed */
  width: auto;
}

.mermaid {
    background-color: #ECEFF4;
    border-radius: 8px;
    padding: 12px;
    color: #2E3440;
  }

  /* Links and arrows */
  .mermaid .edgePath path {
    stroke: #5E81AC !important;
  }

  .mermaid .node rect,
  .mermaid .node circle {
    stroke: #2E3440;
    fill: #ECEFF4;
  }