/* SSTorytime MkDocs overrides.
 *
 * Palette rationale (used by both Material theme and mermaid classDef
 * fills scattered across the docs):
 *   Graphite #4A4A4A — node outlines, primary text
 *   Indigo   #3949AB — primary arrows, emphasis, decision paths
 *   Amber    #FBC02D — highlights, success states, "aha" moments
 *   Steel    #78909C — context boundaries, secondary flows
 *
 * Why these four: they are readable against both the Material default
 * light background (#ffffff) and the slate dark background (#1e1e2f).
 * Indigo and Amber are a Material-standard complementary pair; both are
 * hardcoded as `classDef fill:…` values in mermaid blocks (index.md,
 * testing.md, build-system.md, concepts/architecture.md,
 * howdoescontextwork.md) together with an explicit `color:` so the
 * label contrast is theme-independent. If this palette ever changes,
 * sweep the docs for `classDef fill:#` and update those hex values too.
 */

/* Mermaid diagram palette — matches Material indigo/amber. */
.mermaid {
  --primary-color: #3949AB;
  --primary-text-color: #ffffff;
  --primary-border-color: #1a237e;
  --secondary-color: #FBC02D;
  --secondary-text-color: #000000;
  --tertiary-color: #78909C;
  --background-color: #ffffff;
  --lineColor: #4A4A4A;
}

/* Dark-mode background for mermaid code blocks so labels stay readable. */
[data-md-color-scheme="slate"] .mermaid {
  --background-color: #1e1e2f;
  --lineColor: #cfd8dc;
}

/* Custom admonition: "code-ref" for "see in code" callouts. */
.md-typeset .admonition.code-ref,
.md-typeset details.code-ref {
  border-left-color: #3949AB;
}
.md-typeset .code-ref > .admonition-title,
.md-typeset .code-ref > summary {
  background-color: rgba(57, 73, 171, 0.08);
}
.md-typeset .code-ref > .admonition-title::before,
.md-typeset .code-ref > summary::before {
  background-color: #3949AB;
  -webkit-mask-image: var(--md-admonition-icon--example);
          mask-image: var(--md-admonition-icon--example);
}