/* D2 diagrams are inlined as SVG by mdbook-d2, so the mdbook theme variables on <html>
   cascade into them. d2 tags every colored element with a theme-slot class (fill-N1,
   stroke-B1, ...) alongside a presentation attribute, and remapping the slots here
   repaints the diagrams without touching any d2 fence.

   The leading `svg` is load-bearing. d2 also emits its own `<style>` inside the SVG with
   `.d2-<hash> .fill-N7{...}` rules. Those are specificity 0,2,0 and sit in <body>, after
   this stylesheet's <link> in <head>, so a bare `.d2-svg .fill-N7` would lose the tie on
   source order. `svg.d2-svg` is 0,2,1 and wins outright. */

svg.d2-svg .fill-N7 {
  fill: var(--bg);
}
svg.d2-svg .fill-N1 {
  fill: var(--fg);
}
svg.d2-svg .fill-N2 {
  fill: var(--icons);
}

svg.d2-svg .stroke-B1 {
  stroke: var(--links);
}
svg.d2-svg .fill-B1 {
  fill: var(--links);
}
svg.d2-svg .stroke-B2 {
  stroke: color-mix(in srgb, var(--links) 60%, var(--bg));
}
svg.d2-svg .fill-B2 {
  fill: color-mix(in srgb, var(--links) 60%, var(--bg));
}

/* Container fills, tinted from the accent so nesting depth reads the same in every theme. */
svg.d2-svg .fill-B4 {
  fill: color-mix(in srgb, var(--links) 22%, var(--bg));
}
svg.d2-svg .fill-B5 {
  fill: color-mix(in srgb, var(--links) 14%, var(--bg));
}
svg.d2-svg .fill-B6 {
  fill: color-mix(in srgb, var(--links) 7%, var(--bg));
}

/* A color set explicitly in the d2 source replaces the slot class, so these are matched on the
   value instead and remapped onto mdbook's alert palette. d2 passes CSS named colors through
   verbatim, so the name is the contract: `dimgray` here is the same `dimgray` a fence writes.
   Each role needs both rules. An edge's stroke color also becomes the fill of its arrowhead
   <polygon>, and a stroke-only rule leaves that arrowhead stuck at the literal color.

   The vocabulary and which class in a fence carries which color is in docs/CLAUDE.md. Read it
   before adding a color: one that is not listed below stays fixed across all five themes. */

/* muted: annotation, or an edge deliberately drawn back from the diagram's subject. */
svg.d2-svg [stroke="dimgray"] {
  stroke: var(--icons);
}
svg.d2-svg [fill="dimgray"] {
  fill: var(--icons);
}

/* denied: denied, blocked, or danger. */
svg.d2-svg [stroke="firebrick"] {
  stroke: var(--blockquote-caution-color, #f21424);
}
svg.d2-svg [fill="firebrick"] {
  fill: var(--blockquote-caution-color, #f21424);
}

/* boundary: roots and sinks, or the start and end of a sequence. */
svg.d2-svg [stroke="seagreen"] {
  stroke: var(--blockquote-tip-color, #09ca09);
}
svg.d2-svg [fill="seagreen"] {
  fill: var(--blockquote-tip-color, #09ca09);
}
svg.d2-svg [fill="honeydew"] {
  fill: color-mix(in srgb, var(--blockquote-tip-color, #09ca09) 14%, var(--bg));
}

/* secondary: a second kind of node, distinct from the subject but not de-emphasized. */
svg.d2-svg [stroke="mediumpurple"] {
  stroke: var(--blockquote-important-color, #ab7df8);
}
svg.d2-svg [fill="mediumpurple"] {
  fill: var(--blockquote-important-color, #ab7df8);
}
svg.d2-svg [fill="lavender"] {
  fill: color-mix(
    in srgb,
    var(--blockquote-important-color, #ab7df8) 14%,
    var(--bg)
  );
}

/* external: a third-party service or resource outside this repository's control. */
svg.d2-svg [stroke="goldenrod"] {
  stroke: var(--blockquote-warning-color, #d29922);
}
svg.d2-svg [fill="goldenrod"] {
  fill: var(--blockquote-warning-color, #d29922);
}
svg.d2-svg [fill="cornsilk"] {
  fill: color-mix(
    in srgb,
    var(--blockquote-warning-color, #d29922) 14%,
    var(--bg)
  );
}
