feat(design-tokens): complete the CSS-var surface so the website can leave inline styles

apps/website/src/app/global.css

@@ -1,6 +1,35 @@
 @import "tailwindcss";
 @import "@threadplane/design-tokens/theme.css";
 
+/*
+ * Local, non-token constants.
+ *
+ * These are deliberately NOT design tokens. Promoting them to
+ * @threadplane/design-tokens would imply the design system owns the syntax
+ * theme and the docs figure treatment. It does not.
+ *
+ * The --docs-code-* group is coupled to `rehypeOptions.theme` ('tokyo-night')
+ * in components/docs/MdxRenderer.tsx. Change the shiki theme and these must
+ * change with it.
+ * --docs-code-title-fg is here rather than on --color-text-muted for the same
+ * reason: it sits on a dark surface, where the light-theme muted token drops
+ * to 3.6:1 contrast.
+ */
+:root {
+  --docs-code-bg: #1a1b26;
+  --docs-code-title-fg: #8b8fa3;
+  --docs-code-border: rgba(0, 0, 0, 0.1);
+  --docs-code-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  --docs-code-title-rule: rgba(255, 255, 255, 0.06);
+  --docs-figure-shadow: 0 4px 16px rgba(0, 32, 72, 0.1);
+  --docs-figure-shadow-bare: 0 4px 16px rgba(0, 32, 72, 0.08);
+  /* Accent tints in the 3.5–10% range, around --color-accent-surface (6%).
+   * Derived rather than hardcoded so they track the accent. */
+  --docs-accent-tint-faint: color-mix(in srgb, var(--color-accent) 3.5%, transparent);
+  --docs-accent-tint-soft: color-mix(in srgb, var(--color-accent) 8%, transparent);
+  --docs-accent-tint-line: color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -55,7 +84,7 @@ html {
 /* Shiki code blocks — tokyo-night theme */
 .shiki {
   padding: 1.5rem;
-  background: #1a1b26 !important;
+  background: var(--docs-code-bg) !important;
   overflow-x: auto;
 }
 .shiki code {
@@ -74,8 +103,8 @@ html {
 .docs-prose [data-rehype-pretty-code-figure] pre {
   padding: 1.25rem 1.5rem;
   border-radius: 0.75rem;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--docs-code-border);
+  box-shadow: var(--docs-code-shadow);
   overflow-x: auto;
   font-size: 0.8rem;
   line-height: 1.7;
@@ -97,10 +126,10 @@ html {
 .docs-prose [data-rehype-pretty-code-figure] [data-rehype-pretty-code-title] {
   font-family: var(--font-mono), monospace;
   font-size: 0.7rem;
-  color: #8b8fa3;
+  color: var(--docs-code-title-fg);
   padding: 0.5rem 1.5rem;
-  background: #1a1b26;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--docs-code-bg);
+  border-bottom: 1px solid var(--docs-code-title-rule);
   border-radius: 0.75rem 0.75rem 0 0;
 }
 
@@ -111,8 +140,8 @@ html {
 .docs-prose :not(pre) > code {
   font-family: var(--font-mono), monospace;
   font-size: 0.85em;
-  background: rgba(0, 64, 144, 0.06);
-  color: #004090;
+  background: var(--color-accent-surface);
+  color: var(--color-accent);
   padding: 0.15rem 0.4rem;
   border-radius: 0.25rem;
   font-weight: 400;
@@ -136,7 +165,7 @@ html {
 .docs-prose ol { list-style-type: decimal; }
 .docs-prose li { margin-bottom: 0.5rem; line-height: 1.6; }
 .docs-prose li > p { margin-bottom: 0.5rem; }
-.docs-prose li::marker { color: var(--color-text-muted, #555770); }
+.docs-prose li::marker { color: var(--color-text-muted); }
 .docs-prose ul ul, .docs-prose ol ol, .docs-prose ul ol, .docs-prose ol ul {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -151,23 +180,23 @@ html {
 .docs-prose figure:has(> img) {
   margin: 2.5rem 0;
   padding: 0.75rem 0.75rem 0;
-  background: rgba(0, 64, 144, 0.035);
-  border: 1px solid rgba(0, 64, 144, 0.1);
+  background: var(--docs-accent-tint-faint);
+  border: 1px solid var(--docs-accent-tint-line);
   border-radius: 0.75rem;
 }
 .docs-prose figure:has(> img) > img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 0.5rem;
-  box-shadow: 0 4px 16px rgba(0, 32, 72, 0.1);
+  box-shadow: var(--docs-figure-shadow);
 }
 .docs-prose figure:has(> img) > figcaption {
   margin: 0;
   padding: 0.875rem 0.5rem 0.625rem;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: var(--color-text-muted, #555770);
+  color: var(--color-text-muted);
   text-align: center;
   font-style: italic;
 }
@@ -179,7 +208,7 @@ html {
   height: auto;
   margin: 2rem auto;
   border-radius: 0.5rem;
-  box-shadow: 0 4px 16px rgba(0, 32, 72, 0.08);
+  box-shadow: var(--docs-figure-shadow-bare);
 }
 
 /* Architecture diagrams are authored at exactly the width `.docs-prose`
@@ -192,8 +221,8 @@ html {
 
 .docs-table-scroll { max-width: 100%; overflow-x: auto; margin: 1.5rem 0; }
 .docs-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0; }
-.docs-prose th { text-align: left; padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; color: #555770; border-bottom: 1px solid rgba(0, 64, 144, 0.15); }
-.docs-prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(0, 64, 144, 0.08); color: #555770; }
+.docs-prose th { text-align: left; padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-accent-border); }
+.docs-prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--docs-accent-tint-soft); color: var(--color-text-secondary); }
 .docs-prose td code { font-size: 0.8em; }
 
 /* UI primitive — Card.