/* Colour tokens for the inline SVG diagrams. Light values first, dark overrides under slate. */
:root {
  --smd-ink: #2c2c2a;
  --smd-muted: #5f5e5a;
  --smd-line: #888780;

  --smd-gray-fill: #f1efe8;  --smd-gray-stroke: #888780;  --smd-gray-head: #444441;  --smd-gray-sub: #5f5e5a;
  --smd-teal-fill: #e1f5ee;  --smd-teal-stroke: #0f6e56;  --smd-teal-head: #085041;  --smd-teal-sub: #0f6e56;
  --smd-purple-fill: #eeedfe; --smd-purple-stroke: #534ab7; --smd-purple-head: #3c3489; --smd-purple-sub: #534ab7;
  --smd-coral-fill: #faece7; --smd-coral-stroke: #993c1d; --smd-coral-head: #712b13; --smd-coral-sub: #993c1d;
}

[data-md-color-scheme="slate"] {
  --smd-ink: #e8e6dc;
  --smd-muted: #b4b2a9;
  --smd-line: #9c9a92;

  --smd-gray-fill: #444441;  --smd-gray-stroke: #b4b2a9;  --smd-gray-head: #f1efe8;  --smd-gray-sub: #d3d1c7;
  --smd-teal-fill: #085041;  --smd-teal-stroke: #5dcaa5;  --smd-teal-head: #e1f5ee;  --smd-teal-sub: #9fe1cb;
  --smd-purple-fill: #3c3489; --smd-purple-stroke: #afa9ec; --smd-purple-head: #eeedfe; --smd-purple-sub: #cecbf6;
  --smd-coral-fill: #712b13; --smd-coral-stroke: #f0997b; --smd-coral-head: #faece7; --smd-coral-sub: #f5c4b3;
}

.smd-diagram {
  margin: 1.5rem 0;
  text-align: center;
}

.smd-diagram svg {
  width: 100%;
  max-width: 760px;
  height: auto;
}

.smd-diagram svg text {
  font-family: var(--md-text-font-family, "Roboto", sans-serif);
}