/* strands-sana — Material accent theme */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #5e35b1;       /* deep purple */
  --md-primary-fg-color--light: #7e57c2;
  --md-primary-fg-color--dark: #4527a0;
  --md-accent-fg-color: #ec407a;        /* pink */
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f0a1a;
  --md-default-fg-color: #e8e3f0;
  --md-primary-fg-color: #b39ddb;
  --md-accent-fg-color: #ff80ab;
  --md-typeset-a-color: #b39ddb;
}

/* Hero callouts */
.hero {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.hero h1 {
  font-size: 2.5rem;
  margin: 0;
  background: linear-gradient(90deg, #5e35b1 0%, #ec407a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .subtitle {
  color: var(--md-default-fg-color--light);
  margin-top: 0.5rem;
}

/* Comparison grids */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.compare-grid figure {
  margin: 0;
}
.compare-grid img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.compare-grid figcaption {
  text-align: center;
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
  margin-top: 0.4em;
}

/* Mermaid spacing */
.mermaid {
  text-align: center;
  margin: 1.5rem 0;
}

/* Tables — full-width */
.md-typeset table:not([class]) {
  width: 100%;
}

/* Code block tweaks */
.md-typeset code {
  border-radius: 4px;
  padding: 0.15em 0.35em;
}