From 281c7ac941d679c3cd00e10ef8c0e25755573443 Mon Sep 17 00:00:00 2001
From: Danijel Martinek <danijel@fraqtal.xyz>
Date: Fri, 8 May 2026 00:48:15 +0200
Subject: [PATCH] docs(html): align trace-tree code background with existing
 code-bg palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The .trace-tree blocks I added in §06 / §08 used var(--ink-2) (#5b4a3c —
medium brown), which clashed with the page's dedicated --code-bg
(#16110d, deep dark). Switched to --code-bg + --code-paper for text,
plus the same border + inset/drop shadow as pre.code, so the new blocks
read consistently with every other code block on the page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/architecture/data-flow-explainer.html | 7 ++++++-
 docs/architecture/di-explainer.html        | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/architecture/data-flow-explainer.html b/docs/architecture/data-flow-explainer.html
index fd42fc3..faca525 100644
--- a/docs/architecture/data-flow-explainer.html
+++ b/docs/architecture/data-flow-explainer.html
@@ -1415,7 +1415,8 @@ footer .colophon {
   max-width: 70ch;
 }
 .trace-tree {
-  background: var(--ink-2, rgba(0,0,0,.32));
+  background: var(--code-bg);
+  color: var(--code-paper);
   padding: 1.25rem 1.5rem;
   border-radius: 4px;
   overflow-x: auto;
@@ -1423,6 +1424,10 @@ footer .colophon {
   font-size: 0.85rem;
   line-height: 1.6;
   margin: 0 0 18px;
+  border: 1px solid var(--code-bg-2);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 14px 40px -20px rgba(20, 14, 8, 0.5);
 }
 .capture-rules {
   border-collapse: collapse;
diff --git a/docs/architecture/di-explainer.html b/docs/architecture/di-explainer.html
index 2d5de44..a6566a5 100644
--- a/docs/architecture/di-explainer.html
+++ b/docs/architecture/di-explainer.html
@@ -663,7 +663,8 @@ footer .colophon {
   font-size: 0.95rem;
 }
 .trace-tree {
-  background: var(--ink-2, rgba(0,0,0,.32));
+  background: var(--code-bg);
+  color: var(--code-paper);
   padding: 1rem 1.25rem;
   border-radius: 4px;
   overflow-x: auto;
@@ -671,6 +672,10 @@ footer .colophon {
   font-size: 0.82rem;
   line-height: 1.55;
   margin: 0 0 18px;
+  border: 1px solid var(--code-bg-2);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 14px 40px -20px rgba(20, 14, 8, 0.5);
 }
 
 /* ─── Responsive ─────────────────────────────────────────────────── */