/* stylesheets/mermaid-theme.css — site-wide Mermaid diagram skin.
 *
 * Restyles every diagram centrally by overriding Material's --md-mermaid-*
 * CSS custom properties (they inherit into the mermaid shadow roots), so
 * chapter Mermaid source needs no styling directives. Typography and
 * structural polish (uppercase zone labels, rounded corners, hairline
 * clusters) is injected per-diagram by javascripts/mermaid-theme.js using
 * the --emu-mermaid-* variables below.
 *
 * Design: the site's blue color sheet (Material blue primary / light-blue
 * accent) — blue-50 node cards with primary-blue borders, blue-tinted zone
 * washes labeled in small uppercase mono, blue edge annotations over muted
 * blue-gray lines.
 *
 * Node backgrounds must stay opaque: mermaid draws edges underneath nodes,
 * so a translucent fill would show lines passing through the boxes.
 */

:root,
[data-md-color-scheme="default"] {
  --md-mermaid-node-bg-color: #e3f2fd;
  --md-mermaid-node-fg-color: #1976d2;
  --md-mermaid-edge-color: #546e7a;
  --md-mermaid-label-fg-color: #212121;
  --md-mermaid-sequence-actor-bg-color: #e3f2fd;
  --md-mermaid-sequence-note-bg-color: #bbdefb;
  --md-mermaid-sequence-note-border-color: rgba(25, 118, 210, 0.4);
  --md-mermaid-sequence-actor-line-color: rgba(21, 101, 192, 0.3);

  --emu-mermaid-cluster-bg: rgba(25, 118, 210, 0.035);
  --emu-mermaid-cluster-border: rgba(25, 118, 210, 0.2);
  --emu-mermaid-activation-bg: rgba(25, 118, 210, 0.1);
  --emu-mermaid-zone-label-color: rgba(21, 101, 192, 0.75);
  --emu-mermaid-edge-label-color: #1565c0;
}

[data-md-color-scheme="slate"] {
  --md-mermaid-node-bg-color: #263241;
  --md-mermaid-node-fg-color: #64b5f6;
  --md-mermaid-edge-color: #9fb8cc;
  --md-mermaid-label-fg-color: #eceff1;
  --md-mermaid-sequence-actor-bg-color: #263241;
  --md-mermaid-sequence-note-bg-color: #1e3a5f;
  --md-mermaid-sequence-note-border-color: rgba(100, 181, 246, 0.45);
  --md-mermaid-sequence-actor-line-color: rgba(100, 181, 246, 0.35);

  --emu-mermaid-cluster-bg: rgba(100, 181, 246, 0.06);
  --emu-mermaid-cluster-border: rgba(100, 181, 246, 0.25);
  --emu-mermaid-activation-bg: rgba(100, 181, 246, 0.15);
  --emu-mermaid-zone-label-color: rgba(100, 181, 246, 0.75);
  --emu-mermaid-edge-label-color: #64b5f6;
}