docs: enable dark mode behind theme toggle (default stays light) (#391)

* feat(docs): enable dark mode (toggle on, default stays light)

- Add light/dark logo pair and dark background (#111113, brand grey-dark scale)
- Add html.dark overrides for tables, tinker-box, button border, hero bot
- Keep default appearance light; dark is opt-in pending brand/design review

* polish(docs): dark-mode card + hero illustrations

- add dark-recolored variants for the four homepage card svgs
  (o11y, chromium, auth, stealth) so cream/tan/green tiles no longer
  blast on the dark page bg
- add dark-recolored tinker-bot variant and drop the filter: invert()
  hack on style.css
- swap variants under html.dark via content: url(...) so index.mdx
  stays untouched and light mode is byte-for-byte identical

contrast on #111113: body #EDEEF0 ~16:1, accent #CAB168 ~9:1 (WCAG AAA).

* revert(docs): keep homepage card illustrations light on dark page

the cream/green/tan card tiles read as framed illustrations on a dark
page, not as page leakage. keeping them aligns with how the kernel.sh
brand handles illustrations (always light surface) and avoids the
visual inconsistency of charcoal-everything-except-chromium-green.

tinker-bot keeps its dark-recolored variant: it's a flat silhouette
with no card frame, so it actually disappears against #111113 — that
swap is a readability fix, not a brand call.

* fix(docs): match tinker-bot src as substring to handle mintlify cdn rewrite

mintlify rewrites img srcs at deploy time to a cdn url with query params
(/{deployment}/{hash}/images/tinker-bot.svg?fit=max&auto=format&...), so
the prior [src$="..."] suffix selector never matched in production and
the dark recolor swap silently no-op'd. [src*="..."] handles both raw
and rewritten srcs.

* align(docs): swap dark-mode values to kernel brand tokens

dark mode foundation was off-system. swap to the canonical kernel tokens:

- background color #111113 -> #212225 (kernel charcoal / grey-dark-03,
  the brand's canonical dark background)
- white-alpha rgba(255,255,255,...) -> grey-dark-12 alpha rgba(237,238,240,...)
  across table fills, borders, hovers, and the tinker-box border (kernel
  brand book lists white as "rare; prefer beige/grey-dark-12")
- pricing button border #fff -> #EDEEF0 (grey-dark-12)

wcag aaa still holds on the new bg: body 13.7:1, gold 7.57:1, green 6.35:1.

intentionally untouched in this commit:
- the comment reference to #111113 in the hero-bot rule (stale but
  cosmetic; will sweep separately if needed)

* docs(style): update stale comment to reflect new charcoal bg

the hero-bot rule's explanatory comment still referenced #111113 after
the brand-alignment swap to #212225. cosmetic only, no behavior change.

* deslop: shrink dark-mode comments to match existing file style

the existing style.css uses single-line terse comments
(/* table headers */, /* tinker box responsive layout */). the dark-mode
block had multi-line essay comments restating what the selectors already
say. cropped to match.

* feat(docs): brand-align warning callout in dark mode

mintlify's default warning renders as bright yellow on amber-brown, all
non-kernel-palette colors. eric flagged it as "harsh on the eyes."

swap to:
- panel bg/border: grey-dark-12 alpha tints (matches our table treatment)
- icon: kernel gold #CAB168 (the brand's only approved warm accent)

light mode unchanged. only the yellow Warning class is targeted —
Note/Info (blue) and Tip (green) stay mintlify-default for now.

note: text color inside the callout still uses mintlify's #9F9F9F since
no kernel token cleanly matches a dark-mode mid-gray. follow-up to
formalize a dark-mode neutral text token in BRAND.md.

* deslop: shrink warning callout comment to single-line WHAT

matches the existing single-line comment style in the file
(/* tinker box border */, /* hero bot dark recolor */, etc).

* docs(brand): rename logo/light.svg to logo/white.svg

the dark-mode logo is the brand book's "white monochrome" variant.
naming it light.svg made docs.json line read "dark": "/logo/light.svg",
which clashes with the eye. rename closes the cognitive nit and aligns
the file name with the brand book's own terminology.

* address review nits on dark mode warning callout + alpha consistency

- standardize alpha values to 2-decimal form (0.1 → 0.10) so the
  surface depth scale reads uniformly (0.02 / 0.04 / 0.08 / 0.10 / 0.14)
- add comment above warning callout block noting the selector depends
  on mintlify's yellow-* tailwind classes and silently no-ops if renamed

Author: jarugupj

docs.json

@@ -21,7 +21,7 @@
   "theme": "palm",
   "appearance": {
     "default": "light",
-    "strict": true
+    "strict": false
   },
   "name": "Kernel",
   "colors": {
@@ -356,10 +356,14 @@
       }
     ]
   },
-  "logo": "/logo/black.svg",
+  "logo": {
+    "light": "/logo/black.svg",
+    "dark": "/logo/white.svg"
+  },
   "background": {
     "color": {
-      "light": "#F0F0F3"
+      "light": "#F0F0F3",
+      "dark": "#212225"
     }
   },
   "footer": {

images/tinker-bot-dark.svg

@@ -178,3 +178,52 @@ table tbody td:first-child {
     width: 100%;
   }
 }
+
+/* dark mode overrides */
+html.dark .prose table,
+html.dark article table,
+html.dark table {
+  border-color: rgba(237, 238, 240, 0.10) !important;
+  background-color: rgba(237, 238, 240, 0.02) !important;
+}
+
+html.dark .prose table thead th,
+html.dark article table thead th,
+html.dark table thead th {
+  background-color: rgba(237, 238, 240, 0.04) !important;
+  border-bottom-color: rgba(237, 238, 240, 0.10) !important;
+}
+
+html.dark .prose table tbody tr,
+html.dark article table tbody tr,
+html.dark table tbody tr {
+  border-bottom-color: rgba(237, 238, 240, 0.08) !important;
+}
+
+html.dark .prose table tbody tr:hover,
+html.dark article table tbody tr:hover,
+html.dark table tbody tr:hover {
+  background-color: rgba(237, 238, 240, 0.04) !important;
+}
+
+/* tinker box border */
+html.dark .tinker-box {
+  border-color: rgba(237, 238, 240, 0.14);
+}
+
+/* pricing calculator button border */
+html.dark {
+  --btn-border: #EDEEF0;
+}
+
+/* hero bot dark recolor */
+html.dark img[src*="/images/tinker-bot.svg"] { content: url("/images/tinker-bot-dark.svg"); }
+
+/* warning callout — selector depends on mintlify's yellow-* classes; renames silently break this */
+html.dark .callout[class*="yellow"] {
+  background-color: rgba(237, 238, 240, 0.03) !important;
+  border-color: rgba(237, 238, 240, 0.10) !important;
+}
+html.dark .callout[class*="yellow"] svg {
+  color: #CAB168 !important;
+}