@conduction/docusaurus-preset 3.36.1 → 3.37.0

package/README.md

@@ -354,3 +354,86 @@ If a publish fails mid-run, fix the issue and push another commit — `semantic-
 ## License
 
 EUPL-1.2 + MIT.
+
+### Third-party assets
+
+Not every file here is ours. The marks below keep their own terms.
+
+**Font Awesome Free 6** — the `mail`, `phone`, `github` and `linkedin`
+glyphs in `<EmployeeCard/>` are Font Awesome Free icons by Fonticons, Inc.,
+used under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).
+Source: <https://fontawesome.com>. The paths are pasted into the component
+rather than imported, so this notice is the attribution the licence asks
+for — keep it with the code.
+
+Font Awesome's own licence adds, of the brand glyphs among them: *"All
+brand icons are trademarks of their respective owners… Please do not use
+brand logos for any purpose except to represent the company, product, or
+service to which they refer."* Linking to a profile on that service is
+exactly that use.
+
+**Bluesky and Mastodon marks** — the `bluesky` and `mastodon` glyphs are
+not Font Awesome redraws but the brands' own artwork, byte-identical to
+the source files, because both brands prohibit redrawing the mark:
+
+- Bluesky butterfly — © Bluesky Social PBC, from their
+  [brand assets](https://bsky.social/about/support/icons)
+  (`bluesky_media_kit_logo_transparent_4.svg`). Used as a social-media icon
+  linking to a profile, which their
+  [Trademark Policy](https://bsky.social/about/support/trademarks) §4.1
+  permits without prior approval.
+- Mastodon mark — trademark of Mastodon GmbH, from their
+  [Brand Toolkit](https://joinmastodon.org/branding): `/logos/logo-black.svg`
+  and `/logos/logo-white.svg`. Not the `logo-symbol-icon.svg` in the code
+  repo — that is the in-app UI icon and a different, simpler drawing.
+  Mastodon exports black and white as two separate paths rather than one
+  shape in two fills, so both are embedded and the stylesheet shows
+  whichever suits the ground. See their
+  [Trade Mark Policy](https://joinmastodon.org/trademark).
+
+  Two of their guidelines we cannot fully meet at this size, noted here so
+  nobody rediscovers them: the toolkit asks for 36px of clear space on all
+  sides (impossible for a 16px icon in a contact row), and says to use the
+  mark alone "only when the Mastodon brand has been clearly established in
+  the design". A labelled link to a Mastodon profile is the ordinary
+  reading of that, but it is a judgement call, not a written permission the
+  way Bluesky s section 4.1 is.
+
+**GitHub and LinkedIn marks** — the Font Awesome glyphs for these two are
+renditions of registered trademarks, and both owners publish colour rules
+that bind us:
+
+- GitHub — *"The Invertocat and our wordmark should only appear in white,
+  black, or in few cases grey or green."* <https://github.com/logos>
+- LinkedIn — *"LinkedIn members may only use the [in] Logo in three color
+  variations: blue, black, and white."* Their social-icon clause covers
+  this case directly: *"When using the [in] Logo as a part of a line-up of
+  social media icons… use one of the three icon colors we provide."*
+  <https://brand.linkedin.com/in-logo>
+
+### Why every contact icon is black
+
+Four of the six glyphs in `<EmployeeCard/>` are trademarks, and each owner
+restricts the colours their mark may take:
+
+| Mark | Colours the owner permits |
+| --- | --- |
+| GitHub | white, black, occasionally grey or green |
+| LinkedIn | blue, black, white |
+| Bluesky | official blue, black, white |
+| Mastodon | the mark unmodified; black or white where contrast requires |
+
+**Black is the only colour all four permit.** Cobalt — what this row used
+to be — is permitted by none of them. So the row is black, and white on
+the cobalt hover chip, which is the second variant every one of the four
+brands names for that situation.
+
+That settles the four marks. `mail` and `phone` are ordinary Font Awesome
+icons under no such constraint; they are black so the row reads as one
+decision rather than two colours by accident.
+
+The fills are literal `#000`/`#fff`, never palette tokens, so a future
+brand change cannot silently recolour someone else's trademark.
+`[data-mark]` in `EmployeeCard.module.css` marks the glyphs where this is
+a legal requirement rather than a design choice — if the row is ever
+restyled, those must not follow. Do not "tidy" any of it into a token.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.36.1",
+  "version": "3.37.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"

package/src/components/EmployeeCard/EmployeeCard.jsx

@@ -25,16 +25,106 @@
  *       ]}
  *     />
  *   </TeamGrid>
+ *
+ * Links.
+ *   Every contact is one entry in `links`, and the entry decides all
+ *   three things: `href` is the destination, `icon` picks the glyph
+ *   from the ICONS map below, and `label` is the accessible name (it
+ *   is what a screen reader announces, and what renders verbatim if
+ *   the icon name is unknown). There is no separate email or phone
+ *   prop — an address is a `mailto:` href with icon 'mail', a number
+ *   is a `tel:` href with icon 'phone'. Adding a new network means
+ *   adding one entry to ICONS; nothing else in the component knows
+ *   which networks exist.
+ *
+ *   Supported icons and the href each expects:
+ *     mail      mailto:naam@conduction.nl
+ *     phone     tel:+31612345678        (E.164, no spaces)
+ *     github    https://github.com/<user>
+ *     linkedin  https://www.linkedin.com/in/<slug>/
+ *     bluesky   https://bsky.app/profile/<handle>
+ *     mastodon  https://<instance>/@<handle>
+ *
+ *   An http(s) href opens in a new tab, the same rule FeatureGrid,
+ *   ContactCta, ExternalAppShelf, Footer and Navbar already follow: a
+ *   contact link leaves the site for someone's profile, and sending a
+ *   reader away mid-page loses where they were. `mailto:` and `tel:`
+ *   are excluded — they hand off to another application, so a _blank
+ *   on them opens a tab that never paints and stays behind empty.
  */
 
 import React from 'react';
 import styles from './EmployeeCard.module.css';
 
+/* `rel` travels with every `target="_blank"`: without it the opened page
+   receives a `window.opener` handle back into ours. Modern browsers imply
+   `noopener` for _blank, but the preset states it rather than relying on
+   that, and `noreferrer` additionally withholds the Referer header. */
+const externalProps = (href = '') =>
+  /^https?:\/\//.test(href) ? {target: '_blank', rel: 'noopener noreferrer'} : {};
+
 const ICONS = {
-  mail: <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>,
-  github: <svg viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>,
-  linkedin: <svg viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>,
-  phone: <svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></svg>,
+  /* Font Awesome Free 6, the SVG set — CC BY 4.0, attributed in the
+     preset README. Each is a single solid path at Font Awesome's own
+     viewBox, pasted rather than imported: six glyphs do not justify a
+     runtime dependency on the icon packages for every site that
+     installs this preset. If the set ever grows past a dozen, swap to
+     @fortawesome/free-solid-svg-icons and free-brands-svg-icons.
+
+     Sourced from FortAwesome/Font-Awesome 6.x:
+       mail      svgs/solid/envelope.svg
+       phone     svgs/solid/phone.svg
+       github    svgs/brands/github.svg
+       linkedin  svgs/brands/linkedin.svg */
+  mail: <svg viewBox="0 0 512 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>,
+  github: <svg viewBox="0 0 496 512" data-mark="true"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>,
+  linkedin: <svg viewBox="0 0 448 512" data-mark="true"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>,
+  phone: <svg viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>,
+  /* The two fediverse marks are trademarks, not icons we may draw, so
+     they are the official artwork at its original geometry rather than
+     a redraw normalised to the 24x24 box the other four use.
+
+       bluesky   bsky.social/about/brand-assets/butterfly/
+                 bluesky_media_kit_logo_transparent_4.svg (568x501)
+       mastodon  joinmastodon.org/logos/logo-black.svg and
+                 logo-white.svg (74x79) — the brand page, not the
+                 in-app logo-symbol-icon.svg in the code repo, which
+                 is a different and simpler drawing
+
+     Every glyph in this map is a solid path now, so filling rather
+     than stroking is the default; what these two carry instead is
+     data-mark, the do-not-recolour lock.
+
+     Four of the six glyphs carry data-mark, in two tiers. Bluesky
+     permits the butterfly as a profile link with no permission needed
+     (Trademark Policy 4.1) but forbids recolouring outside the black
+     and white variants; Mastodon's policy says not to change or modify
+     the marks at all. GitHub allows white, black, and in few cases grey
+     or green; LinkedIn allows three colour options only. Black and
+     white are what all four permit, so all four render black on the
+     light chip and white on the cobalt hover chip instead of inheriting
+     currentColor.
+
+     mail and phone stay off the lock: they are Font Awesome utility
+     glyphs under CC BY 4.0, nobody's trademark, and free to take the
+     brand colour if the row is ever restyled.
+
+     Mastodon ships black and white as two separately drawn files —
+     the coordinates differ, they are not one path with two fills the
+     way Bluesky's are. So both are embedded and the stylesheet shows
+     whichever suits the ground, rather than filling one of them the
+     other colour. At 16px nobody could tell; the point is that each
+     variant is their file, used in the situation they drew it for.
+
+     Keep the paths byte-identical to the source files. Rescaling or
+     re-tracing them is the thing both policies prohibit. */
+  bluesky: <svg viewBox="0 0 568 501" data-mark="true"><path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z"/></svg>,
+  mastodon: (
+    <svg viewBox="0 0 74 79" data-mark="true">
+      <path className={styles.markOnLight} d="M73.7014 17.4323C72.5616 9.05152 65.1774 2.4469 56.424 1.1671C54.9472 0.950843 49.3518 0.163818 36.3901 0.163818H36.2933C23.3281 0.163818 20.5465 0.950843 19.0697 1.1671C10.56 2.41145 2.78877 8.34604 0.903306 16.826C-0.00357854 21.0022 -0.100361 25.6322 0.068112 29.8793C0.308275 35.9699 0.354874 42.0498 0.91406 48.1156C1.30064 52.1448 1.97502 56.1419 2.93215 60.0769C4.72441 67.3445 11.9795 73.3925 19.0876 75.86C26.6979 78.4332 34.8821 78.8603 42.724 77.0937C43.5866 76.8952 44.4398 76.6647 45.2833 76.4024C47.1867 75.8033 49.4199 75.1332 51.0616 73.9562C51.0841 73.9397 51.1026 73.9184 51.1156 73.8938C51.1286 73.8693 51.1359 73.8421 51.1368 73.8144V67.9366C51.1364 67.9107 51.1302 67.8852 51.1186 67.862C51.1069 67.8388 51.0902 67.8184 51.0695 67.8025C51.0489 67.7865 51.0249 67.7753 50.9994 67.7696C50.9738 67.764 50.9473 67.7641 50.9218 67.7699C45.8976 68.9569 40.7491 69.5519 35.5836 69.5425C26.694 69.5425 24.3031 65.3699 23.6184 63.6327C23.0681 62.1314 22.7186 60.5654 22.5789 58.9744C22.5775 58.9477 22.5825 58.921 22.5934 58.8965C22.6043 58.8721 22.621 58.8505 22.6419 58.8336C22.6629 58.8167 22.6876 58.8049 22.714 58.7992C22.7404 58.7934 22.7678 58.794 22.794 58.8007C27.7345 59.9796 32.799 60.5746 37.8813 60.5733C39.1036 60.5733 40.3223 60.5733 41.5447 60.5414C46.6562 60.3996 52.0437 60.1408 57.0728 59.1694C57.1983 59.1446 57.3237 59.1233 57.4313 59.0914C65.3638 57.5847 72.9128 52.8555 73.6799 40.8799C73.7086 40.4084 73.7803 35.9415 73.7803 35.4523C73.7839 33.7896 74.3216 23.6576 73.7014 17.4323ZM61.4925 47.3144H53.1514V27.107C53.1514 22.8528 51.3591 20.6832 47.7136 20.6832C43.7061 20.6832 41.6988 23.2499 41.6988 28.3194V39.3803H33.4078V28.3194C33.4078 23.2499 31.3969 20.6832 27.3894 20.6832C23.7654 20.6832 21.9552 22.8528 21.9516 27.107V47.3144H13.6176V26.4937C13.6176 22.2395 14.7157 18.8598 16.9118 16.3545C19.1772 13.8552 22.1488 12.5719 25.8373 12.5719C30.1064 12.5719 33.3325 14.1955 35.4832 17.4394L37.5587 20.8853L39.6377 17.4394C41.7884 14.1955 45.0145 12.5719 49.2765 12.5719C52.9614 12.5719 55.9329 13.8552 58.2055 16.3545C60.4017 18.8574 61.4997 22.2371 61.4997 26.4937L61.4925 47.3144Z"/>
+      <path className={styles.markOnDark} d="M73.7014 17.9592C72.5616 9.62034 65.1774 3.04876 56.424 1.77536C54.9472 1.56019 49.3517 0.7771 36.3901 0.7771H36.2933C23.3281 0.7771 20.5465 1.56019 19.0697 1.77536C10.56 3.01348 2.78877 8.91838 0.903306 17.356C-0.00357857 21.5113 -0.100361 26.1181 0.068112 30.3439C0.308275 36.404 0.354874 42.4535 0.91406 48.489C1.30064 52.498 1.97502 56.4751 2.93215 60.3905C4.72441 67.6217 11.9795 73.6395 19.0876 76.0945C26.6979 78.6548 34.8821 79.0799 42.724 77.3221C43.5866 77.1245 44.4398 76.8953 45.2833 76.6342C47.1867 76.0381 49.4199 75.3714 51.0616 74.2003C51.0841 74.1839 51.1026 74.1627 51.1156 74.1382C51.1286 74.1138 51.1359 74.0868 51.1368 74.0592V68.2108C51.1364 68.185 51.1302 68.1596 51.1185 68.1365C51.1069 68.1134 51.0902 68.0932 51.0695 68.0773C51.0489 68.0614 51.0249 68.0503 50.9994 68.0447C50.9738 68.0391 50.9473 68.0392 50.9218 68.045C45.8976 69.226 40.7491 69.818 35.5836 69.8087C26.694 69.8087 24.3031 65.6569 23.6184 63.9285C23.0681 62.4347 22.7186 60.8764 22.5789 59.2934C22.5775 59.2669 22.5825 59.2403 22.5934 59.216C22.6043 59.1916 22.621 59.1702 22.6419 59.1533C22.6629 59.1365 22.6876 59.1248 22.714 59.1191C22.7404 59.1134 22.7678 59.1139 22.794 59.1206C27.7345 60.2936 32.799 60.8856 37.8813 60.8843C39.1036 60.8843 40.3223 60.8843 41.5447 60.8526C46.6562 60.7115 52.0437 60.454 57.0728 59.4874C57.1983 59.4628 57.3237 59.4416 57.4313 59.4098C65.3638 57.9107 72.9128 53.2051 73.6799 41.2895C73.7086 40.8204 73.7803 36.3758 73.7803 35.889C73.7839 34.2347 74.3216 24.1533 73.7014 17.9592ZM61.4925 47.6918H53.1514V27.5855C53.1514 23.3526 51.3591 21.1938 47.7136 21.1938C43.7061 21.1938 41.6988 23.7476 41.6988 28.7919V39.7974H33.4078V28.7919C33.4078 23.7476 31.3969 21.1938 27.3894 21.1938C23.7654 21.1938 21.9552 23.3526 21.9516 27.5855V47.6918H13.6176V26.9752C13.6176 22.7423 14.7157 19.3795 16.9118 16.8868C19.1772 14.4 22.1488 13.1231 25.8373 13.1231C30.1064 13.1231 33.3325 14.7386 35.4832 17.9662L37.5587 21.3949L39.6377 17.9662C41.7884 14.7386 45.0145 13.1231 49.2765 13.1231C52.9614 13.1231 55.9329 14.4 58.2055 16.8868C60.4017 19.3772 61.4997 22.74 61.4997 26.9752L61.4925 47.6918Z"/>
+    </svg>
+  ),
 };
 
 export function TeamGrid({columns = 3, children, className}) {
@@ -66,7 +156,7 @@ export default function EmployeeCard({
         {links.length > 0 && (
           <div className={styles.contacts}>
             {links.map((l, i) => (
-              <a key={i} href={l.href} aria-label={l.label}>{ICONS[l.icon] || l.label}</a>
+              <a key={i} href={l.href} aria-label={l.label} {...externalProps(l.href)}>{ICONS[l.icon] || l.label}</a>
             ))}
           </div>
         )}
@@ -96,7 +186,7 @@ export default function EmployeeCard({
         {links.length > 0 && (
           <div className={styles.contactsInline}>
             {links.map((l, i) => (
-              <a key={i} href={l.href}>{ICONS[l.icon]}{l.label}</a>
+              <a key={i} href={l.href} {...externalProps(l.href)}>{ICONS[l.icon]}{l.label}</a>
             ))}
           </div>
         )}
@@ -107,7 +197,11 @@ export default function EmployeeCard({
   /* default: compact */
   const Tag = links.length > 0 && links[0].href ? 'a' : 'div';
   return (
-    <Tag href={Tag === 'a' ? links[0].href : undefined} className={[styles.cardCompact, className].filter(Boolean).join(' ')}>
+    <Tag
+      href={Tag === 'a' ? links[0].href : undefined}
+      {...(Tag === 'a' ? externalProps(links[0].href) : {})}
+      className={[styles.cardCompact, className].filter(Boolean).join(' ')}
+    >
       <div className={styles.avatar} style={!photo ? {background: avatarColor || 'var(--c-blue-cobalt)'} : undefined}>
         {photo ? <img src={photo} alt={name} /> : initials}
       </div>
@@ -118,7 +212,7 @@ export default function EmployeeCard({
       {links.length > 0 && (
         <div className={styles.linksRow}>
           {links.map((l, i) => (
-            <a key={i} href={l.href} aria-label={l.label}>{ICONS[l.icon]}</a>
+            <a key={i} href={l.href} aria-label={l.label} {...externalProps(l.href)}>{ICONS[l.icon]}</a>
           ))}
         </div>
       )}

package/src/components/EmployeeCard/EmployeeCard.module.css

@@ -60,7 +60,7 @@
   transition: all 140ms ease;
 }
 .linksRow a:hover { background: var(--c-blue-cobalt); color: white; }
-.linksRow svg { width: 13px; height: 13px; stroke: currentColor; strokeWidth: 2; fill: none; }
+.linksRow svg { width: 13px; height: 13px; fill: #000000; stroke: none; }
 
 /* Photo variant */
 .cardPhoto {
@@ -90,7 +90,7 @@
   transition: all 140ms ease;
 }
 .contacts a:hover { background: var(--c-blue-cobalt); color: white; }
-.contacts svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
+.contacts svg { width: 16px; height: 16px; fill: #000000; stroke: none; }
 
 /* Detail variant */
 .cardDetail {
@@ -141,4 +141,74 @@
   text-decoration: none;
 }
 .contactsInline a:hover { color: var(--c-blue-cobalt); }
-.contactsInline svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
+.contactsInline svg { width: 14px; height: 14px; fill: #000000; stroke: none; }
+
+/* ============================================================
+   Why every contact icon is black
+
+   Four of the six glyphs in this row are registered trademarks, and
+   every one of those four owners restricts the colours their mark may
+   take. Checked against each brand's own published guidance:
+
+     GitHub    "The Invertocat and our wordmark should only appear in
+               white, black, or in few cases grey or green."
+               github.com/logos
+
+     LinkedIn  "LinkedIn members may only use the [in] Logo in three
+               color variations: blue, black, and white." And, for this
+               exact case: "When using the [in] Logo as a part of a
+               line-up of social media icons... use one of the three
+               icon colors we provide." brand.linkedin.com/in-logo
+
+     Bluesky   "Recolor the logo (other than the approved black and
+               white variants)" is listed under Don't.
+               bsky.social/about/support/branding
+
+     Mastodon  "Do not change or modify the Mastodon marks."
+               joinmastodon.org/trademark
+
+   Black is the single colour all four permit. Cobalt is permitted by
+   none of them, and cobalt is what this row used to be.
+
+   That decides the four marks. mail and phone are plain Font Awesome
+   icons under no such constraint — they are black because a contact
+   row in two colours reads as a mistake rather than a decision, and
+   because one rule for the row is one fewer thing to get wrong the
+   next time somebody adds a network.
+
+   White on hover is not an exception: the chip turns cobalt
+   underneath, and white is the second variant all four brands name
+   for precisely that situation.
+
+   Literal #000/#fff on purpose. A palette token here would let a
+   future brand change silently recolour someone else's trademark,
+   which is the thing all four policies forbid.
+   ============================================================ */
+.linksRow a:hover svg,
+.contacts a:hover svg {
+  fill: #FFFFFF;
+}
+
+/* Mastodon publishes black and white as two separate drawings rather
+   than one shape in two fills, so both live in the SVG and we show the
+   one that suits the ground instead of recolouring either. Bluesky
+   needs none of this: its variants are one path, so a fill swap gives
+   the official black and white exactly. */
+.markOnDark { display: none; }
+.linksRow a:hover .markOnLight,
+.contacts a:hover .markOnLight { display: none; }
+.linksRow a:hover .markOnDark,
+.contacts a:hover .markOnDark { display: inline; }
+/* data-mark singles out the glyphs where the rule above is a legal
+   requirement and not a design choice, so a later decision to recolour
+   the row cannot quietly sweep up a trademark. Same values as the
+   default today; the point is that they hold when that changes. */
+.linksRow svg[data-mark],
+.contacts svg[data-mark],
+.contactsInline svg[data-mark] {
+  fill: #000000;
+}
+.linksRow a:hover svg[data-mark],
+.contacts a:hover svg[data-mark] {
+  fill: #FFFFFF;
+}

package/src/css/brand.css

@@ -23,15 +23,48 @@
   --ifm-color-primary-lighter:   var(--c-cobalt-300);
   --ifm-color-primary-lightest:  var(--c-cobalt-200);
 
-  /* Accent → KNVB orange (links, CTAs, focus ring) */
-  --ifm-link-color:              var(--c-orange-knvb);
-  --ifm-link-hover-color:        var(--c-cobalt-700);
+  /* Links follow the published rule: cobalt by default, orange on
+     hover. The inverse shipped for a long time, which put the accent
+     on the most repeated element of a documentation site — far past
+     the ~8% of page area the brand budgets for orange — and carried
+     every body link at 3.01:1, under the 4.5:1 WCAG asks of text.
+     Cobalt links measure 9.08:1. Hover takes the text-safe orange
+     (4.67:1) rather than KNVB, because hover is still a text role.
+     Both read from the tokens, so the rule lives in one place. */
+  --ifm-link-color:              var(--conduction-color-link-default);
+  --ifm-link-hover-color:        var(--conduction-color-link-hover);
   --ifm-button-color:             white;
 
   /* Typography → Figtree body, Plex Mono code */
   --ifm-font-family-base:        var(--conduction-typography-font-family-body);
   --ifm-font-family-monospace:   var(--conduction-typography-font-family-code);
-  --ifm-heading-color:           var(--c-cobalt-900);
+
+  /* Headings are brand cobalt, not near-black. The site read as
+     black-on-white with a blue navbar; the token says the heading
+     colour is the brand colour. 9.08:1 on white, so nothing is lost
+     on contrast. */
+  --ifm-heading-color:           var(--conduction-color-text-default);
+
+  /* The brand heading ramp. Infima ships 32/24/20/16/14/13.6, which
+     collapses h4 to body size and h5 below it; the published ramp is
+     48/40/32/24/20/18 and it is the hierarchy every other Conduction
+     surface uses. Sizes come off the --fs-* scale so the ramp has one
+     source. */
+  --ifm-h1-font-size:            var(--fs-5xl);  /* 48px */
+  --ifm-h2-font-size:            var(--fs-4xl);  /* 40px */
+  --ifm-h3-font-size:            var(--fs-3xl);  /* 32px */
+  --ifm-h4-font-size:            var(--fs-2xl);  /* 24px */
+  --ifm-h5-font-size:            var(--fs-xl);   /* 20px */
+  --ifm-h6-font-size:            var(--fs-lg);   /* 18px */
+
+  /* 700 for h1/h2, 600 from h3 down (the rule below). Every heading
+     bold flattens the step between a section and its subsection. */
+  --ifm-heading-font-weight:     var(--fw-bold);
+
+  /* The radius token, actually read. Infima defaults to 0.4rem
+     (6.4px) where the brand publishes 6px. Invisible, but it means
+     the token was present and unused. */
+  --ifm-global-radius:           var(--radius-md);
 
   /* Code blocks */
   --ifm-code-font-size:          92%;
@@ -50,21 +83,38 @@
   --ifm-footer-link-color:       white;
   --ifm-footer-title-color:      var(--c-cobalt-200);
 
+  /* Status → the brand set, replacing Infima's stock #fa383e /
+     #00a400 / #ffba00. All three framework defaults fail as text on
+     white (3.68, 3.33 and 1.71:1) and none of them has any relation
+     to this palette — the direct cost of the design system having
+     published one status colour and no alert treatment. The alert
+     rules further down pair each base with its ink and tint. */
+  --ifm-color-info:              var(--conduction-color-status-info);
+  --ifm-color-success:           var(--conduction-color-status-success);
+  --ifm-color-warning:           var(--conduction-color-status-warning);
+  --ifm-color-danger:            var(--conduction-color-status-error);
+
   /* Spacing rhythm reused from tokens */
   --ifm-spacing-horizontal:      var(--space-6);
   --ifm-spacing-vertical:        var(--space-6);
-  --ifm-line-height-base:        1.55;
+  --ifm-line-height-base:        var(--lh-normal);
 }
 
+/* Dark mode now comes from the tokens — tokens.css publishes the
+   whole semantic layer under [data-theme="dark"], so these are just
+   the Infima names pointed at it. Links go back to the bright KNVB
+   orange here (5.93:1 on cobalt-900): the text-safe orange exists
+   for white grounds and is the one that fails on a dark one. */
 [data-theme='dark'] {
-  --ifm-background-color:        var(--c-cobalt-900);
-  --ifm-background-surface-color: var(--c-cobalt-800);
-  --ifm-color-primary:           var(--c-cobalt-300);
-  --ifm-color-primary-light:     var(--c-cobalt-200);
-  --ifm-link-color:              var(--c-orange-knvb);
-  --ifm-heading-color:           white;
-  --ifm-font-color-base:         var(--c-cobalt-100);
-  --ifm-code-background:         var(--c-cobalt-800);
+  --ifm-background-color:        var(--conduction-color-background-default);
+  --ifm-background-surface-color: var(--conduction-color-background-surface);
+  --ifm-color-primary:           var(--conduction-color-primary);
+  --ifm-color-primary-light:     var(--conduction-color-primary-light);
+  --ifm-link-color:              var(--conduction-color-link-default);
+  --ifm-link-hover-color:        var(--conduction-color-link-hover);
+  --ifm-heading-color:           var(--conduction-color-text-default);
+  --ifm-font-color-base:         var(--conduction-color-text-default);
+  --ifm-code-background:         var(--conduction-color-code-inline-background);
 }
 
 /* ============================================================
@@ -110,8 +160,16 @@
   outline-offset: 2px;
 }
 
-/* Headings keep the brand letter-spacing */
-h1, h2, h3 { letter-spacing: -0.02em; }
+/* Letter-spacing per level, not one value for the top three. Large
+   Figtree sits loose without it; clearly visible at 48px, invisible
+   below about 24px, which is why h4-h6 get none. */
+h1 { letter-spacing: var(--tracking-tight); }
+h2 { letter-spacing: var(--tracking-snug); }
+h3 { letter-spacing: var(--tracking-normal); }
+
+/* The weight step. --ifm-heading-font-weight carries 700 for h1/h2;
+   from h3 down the brand drops to 600 so a subsection reads as one. */
+h3, h4, h5, h6 { font-weight: var(--fw-semibold); }
 
 /* Marketing pages (frontmatter: hide_table_of_contents: true) get
    a flush top edge AND full-width sections. The MDXPage swizzle
@@ -157,6 +215,51 @@ a:not(.navbar__link):not(.footer__link-item):not(.button):hover {
   text-decoration-color: var(--c-orange-knvb);
 }
 
+/* ============================================================
+   Alerts / admonitions
+
+   Each status is three values, not one: the base draws the rule and
+   the icon, the ink carries the text, the tint is the ground. Every
+   ink-on-tint pair below clears AAA, so the set survives a later
+   change to the tints.
+
+   Warning is the exception to "the base draws the rule": #F36C21 on
+   its own tint measures 2.76:1, under the 3:1 a component boundary
+   needs, so a warning border takes the ink instead.
+
+   Colour is never the only signal — Docusaurus renders an icon and a
+   label in every admonition, and that is what keeps this readable for
+   anyone who cannot separate the success green from the warning
+   orange (they sit 1.68:1 apart in luminance).
+   ============================================================ */
+.alert--info {
+  --ifm-alert-background-color: var(--conduction-color-status-info-tint);
+  --ifm-alert-foreground-color: var(--conduction-color-status-info-ink);
+  --ifm-alert-border-color:     var(--conduction-color-status-info);
+}
+.alert--success {
+  --ifm-alert-background-color: var(--conduction-color-status-success-tint);
+  --ifm-alert-foreground-color: var(--conduction-color-status-success-ink);
+  --ifm-alert-border-color:     var(--conduction-color-status-success);
+}
+.alert--warning {
+  --ifm-alert-background-color: var(--conduction-color-status-warning-tint);
+  --ifm-alert-foreground-color: var(--conduction-color-status-warning-ink);
+  /* ink, not base — see the note above */
+  --ifm-alert-border-color:     var(--conduction-color-status-warning-ink);
+}
+.alert--danger {
+  --ifm-alert-background-color: var(--conduction-color-status-error-tint);
+  --ifm-alert-foreground-color: var(--conduction-color-status-error-ink);
+  --ifm-alert-border-color:     var(--conduction-color-status-error);
+}
+
+/* Blockquote — a cobalt rule and brand ink, from the tokens. */
+blockquote {
+  border-left: var(--conduction-quote-rule-width) solid var(--conduction-color-quote-border);
+  color: var(--conduction-color-text-default);
+}
+
 /* =========================================================================
    Docs-page styling — mirror preview/product-pages/_docs-shell.css
 

package/src/css/tokens.css

@@ -26,6 +26,16 @@
   --c-nextcloud-cyan:     #1CAFFF;  /* Nextcloud lighter cyan */
   --c-commonground-yellow: #F6AD00;  /* Common Ground official, commonground.nl */
 
+  /* Vermillion tint + ink — the error pair. Derived, because the brand
+     publishes the base red only. */
+  --c-red-50:             #FCE8EA;  /* error tint — alert ground */
+  --c-red-950:            #421115;  /* error tint, dark mode. Luminance-matched
+                                       to cobalt-800 so the four alert grounds
+                                       read as one set; red-300 on it is 6.59:1 */
+  --c-red-300:            #EF8A92;  /* light vermillion — error text in dark
+                                       mode, 6.51:1 on cobalt-800 */
+  --c-red-700:            #8D1720;  /* error ink — 7.85:1 on red-50 */
+
   /* Cobalt tints — derived for surfaces, hex-prism faces, soft fills */
   --c-cobalt-50:          #EEF2F8;
   --c-cobalt-100:         #DCE3F0;
@@ -68,8 +78,11 @@
   /* — Component family 3: forest (data / trustworthy / NLDS-compliant)
        Distinct from mint — deeper, denser, more "official." Use this
        for hexes that handle data and registers. — */
+  --c-forest-50:          #EEF7EE;  /* success tint — alert ground */
+  --c-forest-950:         #0B280A;  /* success tint, dark mode — 5.98:1 with forest-300 */
   --c-forest-300:         #7DAA7C;
-  --c-forest-500:         #3D7C3A;
+  --c-forest-500:         #3D7C3A;  /* = status success base */
+  --c-forest-700:         #2C5A2A;  /* success ink — 7.37:1 on forest-50 */
 
   /* — Component family 4: terracotta (documents / human work)
        Tuned around the brand vermillion (#AE1C28), so it ties to the
@@ -85,8 +98,15 @@
      Kept in tokens because they have specific jobs elsewhere. */
 
   /* Coral = KNVB orange accent only — focus rings, hover, occasional highlight. */
+  --c-coral-50:           #FFF3EA;  /* warning tint — alert ground */
+  --c-coral-950:          #351B0D;  /* warning tint, dark mode — 9.07:1 with coral-300 */
   --c-coral-300:          #FAB29C;
   --c-coral-500:          #F36C21;  /* = KNVB */
+  --c-coral-600:          #C64E0B;  /* text-safe orange — 4.67:1 on white.
+                                       Same hue as KNVB, dark enough to carry
+                                       16px text. Use for text and link-hover;
+                                       KNVB stays the fill / focus / icon accent. */
+  --c-coral-700:          #833307;  /* warning ink — 7.89:1 on coral-50 */
 
   /* Gold = Conduction Certified mark ONLY. Reserved for the cert avatar
      and trustmark badges. Do not use as a generic family color. */
@@ -109,28 +129,105 @@
   --conduction-color-brand-nextcloud:    var(--c-nextcloud-blue);
   --conduction-color-brand-commonground: var(--c-commonground-yellow);
 
+  /* Primary ramp — the seven steps a consumer needs to build a UI on
+     cobalt: hover fills, pressed states, borders, muted chrome. The
+     primitives already carry the values; naming them semantically
+     stops every downstream product from picking its own. */
+  --conduction-color-primary-lightest: var(--c-cobalt-200);
+  --conduction-color-primary-lighter:  var(--c-cobalt-300);
+  --conduction-color-primary-light:    var(--c-cobalt-400);
+  --conduction-color-primary:          var(--c-cobalt-500);
+  --conduction-color-primary-dark:     var(--c-cobalt-600);
+  --conduction-color-primary-darker:   var(--c-cobalt-700);
+  --conduction-color-primary-darkest:  var(--c-cobalt-800);
+
   /* Background */
   --conduction-color-background-default: var(--c-white);
   --conduction-color-background-inverse: var(--c-blue-cobalt);
   --conduction-color-background-muted:   var(--c-cobalt-50);
+  /* The deep ground every Conduction site actually paints for dark
+     panels, footers and dark mode. Distinct from -inverse, which is
+     the cobalt hero panel. Both are real, so name them separately
+     rather than leave anything downstream guessing which one
+     "inverse" was meant to be. */
+  --conduction-color-background-dark:    var(--c-cobalt-900);
+  --conduction-color-background-surface: var(--c-cobalt-800);
 
   /* Text */
   --conduction-color-text-default: var(--c-blue-cobalt);
   --conduction-color-text-inverse: var(--c-white);
-  --conduction-color-text-accent:  var(--c-orange-knvb);
+  --conduction-color-text-accent:  var(--c-coral-600);
   --conduction-color-text-muted:   var(--c-cobalt-400);
 
   /* Link */
   --conduction-color-link-default: var(--c-blue-cobalt);
-  --conduction-color-link-hover:   var(--c-orange-knvb);
-
-  /* Status */
-  --conduction-color-status-error: var(--c-red-vermillion);
-
-  /* Border */
-  --conduction-color-border-default: var(--c-cobalt-200);
+  --conduction-color-link-hover:   var(--c-coral-600);
+
+  /* Status — four states, three values each.
+     base = icon, mark, border · ink = text on the tint · tint = ground.
+     Publishing only the base is what left every downstream product
+     inventing the other two. Every ink-on-tint pair below clears AAA.
+
+     Success is forest, not mint: forest carries text on white at
+     5.07:1 where mint reaches only 3.62:1, and it sits further from
+     the warning orange. Warning is the KNVB orange, the only
+     candidate that clears 3:1 on white — so orange now means brand
+     accent, focus ring and warning at once.
+
+     Two rules travel with this set:
+     1. Never signal a status by colour alone — always an icon or a
+        word beside it (WCAG 1.4.1). Success and warning sit 1.68:1
+        apart in luminance, the classic red-green confusion pair.
+     2. Warning is the exception to "the base draws the border":
+        #F36C21 on its own tint measures 2.76:1, under the 3:1 a
+        component boundary needs, so warning borders take the ink. */
+  --conduction-color-status-info:          var(--c-blue-cobalt);
+  --conduction-color-status-info-ink:      var(--c-cobalt-600);
+  --conduction-color-status-info-tint:     var(--c-cobalt-50);
+
+  --conduction-color-status-success:       var(--c-forest-500);
+  --conduction-color-status-success-ink:   var(--c-forest-700);
+  --conduction-color-status-success-tint:  var(--c-forest-50);
+
+  --conduction-color-status-warning:       var(--c-orange-knvb);
+  --conduction-color-status-warning-ink:   var(--c-coral-700);
+  --conduction-color-status-warning-tint:  var(--c-coral-50);
+
+  --conduction-color-status-error:         var(--c-red-vermillion);
+  --conduction-color-status-error-ink:     var(--c-red-700);
+  --conduction-color-status-error-tint:    var(--c-red-50);
+
+  /* Border
+     -default is cobalt-300, the lightest step that clears the 3:1
+     WCAG 1.4.11 asks of anything outlining a control. cobalt-200
+     (1.79:1) is still the right choice for decorative rules between
+     cards and table rows, where no minimum applies — reach for
+     --c-cobalt-200 directly there. */
+  --conduction-color-border-default: var(--c-cobalt-300);
   --conduction-color-border-strong:  var(--c-blue-cobalt);
 
+  /* Footer — the dark panel conduction.nl has run in production for
+     years with no published counterpart. */
+  --conduction-color-footer-background: var(--c-cobalt-900);
+  --conduction-color-footer-text:       var(--c-cobalt-200);
+  --conduction-color-footer-title:      var(--c-cobalt-200);
+  --conduction-color-footer-link:       var(--c-white);
+
+  /* Code — inline sits on a cobalt tint, blocks on the dark ground. */
+  --conduction-color-code-inline-background: var(--c-cobalt-50);
+  --conduction-color-code-inline-text:       var(--c-blue-cobalt);
+  --conduction-color-code-block-background:  var(--c-cobalt-900);
+  --conduction-color-code-block-text:        var(--c-cobalt-100);
+
+  /* Alert, quote, table of contents — defined downstream twice over
+     (once by conduction.nl, once from the Utrecht side) and the two
+     sets disagreed. These are the conduction.nl values. */
+  --conduction-color-alert-border: var(--c-cobalt-100);
+  --conduction-color-quote-border: var(--c-blue-cobalt);
+  --conduction-color-toc-border:   var(--c-cobalt-100);
+  --conduction-alert-rule-width:   5px;
+  --conduction-quote-rule-width:   3px;
+
   /* ---------- Typography primitives ---------- */
   --conduction-typography-font-family-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --conduction-typography-font-family-heading: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
@@ -155,6 +252,14 @@
   --lh-normal:  1.5;
   --lh-relaxed: 1.75;
 
+  /* Tracking — large Figtree needs negative letter-spacing to sit
+     the way the brand's own pages do. Visible from about 24px up,
+     invisible below it. Published as tokens so a consumer does not
+     have to read the numbers off a heading rule. */
+  --tracking-tight:  -0.02em;   /* h1 */
+  --tracking-snug:   -0.015em;  /* h2 */
+  --tracking-normal: -0.01em;   /* h3 */
+
   /* ---------- Spacing (proposed scope-B) ---------- */
   --space-1:  4px;
   --space-2:  8px;
@@ -285,6 +390,154 @@
   --bleed: 0mm;
 }
 
+/* ============================================================
+   Dark theme
+
+   Every Conduction site has run a dark mode for years with no
+   published counterpart, so each product invented its own. These
+   are the values conduction.nl actually paints, promoted to the
+   token layer: cobalt-900 ground, cobalt-800 surface, cobalt-300
+   primary, cobalt-100 text.
+
+   Only the semantic layer flips. The primitives never move — a
+   theme is a different mapping of the same palette, not a second
+   palette. Two rules hold only here:
+
+     1. Text accent goes back to the bright KNVB orange (5.93:1 on
+        the ground). coral-600 exists because orange is too light
+        for white grounds; on a dark ground that reverses and
+        coral-600 becomes the one that fails.
+     2. Status ink and status rule are the same -300 step. The 500
+        bases are far too dark to sit on cobalt-800 — cobalt-500
+        reaches 1.73:1 there — so in dark the light step does both
+        jobs and the tint is simply the surface.
+
+   The attribute selector is what Docusaurus sets on <html>. The
+   media query covers anything that only follows the OS, guarded
+   so an explicit light choice still wins.
+   ============================================================ */
+:root[data-theme="dark"] {
+  /* Background */
+  --conduction-color-background-default: var(--c-cobalt-900);
+  --conduction-color-background-surface: var(--c-cobalt-800);
+  --conduction-color-background-muted:   var(--c-cobalt-800);
+  --conduction-color-background-inverse: var(--c-cobalt-50);
+
+  /* Primary ramp inverts: the light steps carry, the dark recede */
+  --conduction-color-primary:          var(--c-cobalt-300);
+  --conduction-color-primary-light:    var(--c-cobalt-200);
+  --conduction-color-primary-lighter:  var(--c-cobalt-100);
+  --conduction-color-primary-lightest: var(--c-white);
+  --conduction-color-primary-dark:     var(--c-cobalt-400);
+  --conduction-color-primary-darker:   var(--c-cobalt-500);
+  --conduction-color-primary-darkest:  var(--c-cobalt-600);
+
+  /* Text — 13.85:1 for body, 5.91:1 for muted */
+  --conduction-color-text-default: var(--c-cobalt-100);
+  --conduction-color-text-inverse: var(--c-cobalt-900);
+  --conduction-color-text-muted:   var(--c-cobalt-300);
+  --conduction-color-text-accent:  var(--c-orange-knvb);
+
+  /* Link */
+  --conduction-color-link-default: var(--c-cobalt-300);
+  --conduction-color-link-hover:   var(--c-orange-knvb);
+
+  /* Border — cobalt-300 clears 3:1 on both the ground and the
+     surface; cobalt-400 only manages it on the ground. */
+  --conduction-color-border-default: var(--c-cobalt-300);
+  --conduction-color-border-strong:  var(--c-cobalt-200);
+
+  /* Status — the light step carries both ink and rule, and the
+     surface is the ground. */
+  --conduction-color-status-info:          var(--c-cobalt-300);
+  --conduction-color-status-info-ink:      var(--c-cobalt-300);
+  --conduction-color-status-info-tint:     var(--c-cobalt-800);
+
+  --conduction-color-status-success:       var(--c-forest-300);
+  --conduction-color-status-success-ink:   var(--c-forest-300);
+  --conduction-color-status-success-tint:  var(--c-forest-950);
+
+  --conduction-color-status-warning:       var(--c-coral-300);
+  --conduction-color-status-warning-ink:   var(--c-coral-300);
+  --conduction-color-status-warning-tint:  var(--c-coral-950);
+
+  --conduction-color-status-error:         var(--c-red-300);
+  --conduction-color-status-error-ink:     var(--c-red-300);
+  --conduction-color-status-error-tint:    var(--c-red-950);
+
+  /* Code — the block ground was already dark, so it stays; inline
+     moves off the light tint onto the surface. */
+  --conduction-color-code-inline-background: var(--c-cobalt-800);
+  --conduction-color-code-inline-text:       var(--c-cobalt-100);
+
+  /* Alert, quote, toc */
+  --conduction-color-alert-border: var(--c-cobalt-700);
+  --conduction-color-quote-border: var(--c-cobalt-300);
+  --conduction-color-toc-border:   var(--c-cobalt-700);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    /* Background */
+    --conduction-color-background-default: var(--c-cobalt-900);
+    --conduction-color-background-surface: var(--c-cobalt-800);
+    --conduction-color-background-muted:   var(--c-cobalt-800);
+    --conduction-color-background-inverse: var(--c-cobalt-50);
+
+    /* Primary ramp inverts: the light steps carry, the dark recede */
+    --conduction-color-primary:          var(--c-cobalt-300);
+    --conduction-color-primary-light:    var(--c-cobalt-200);
+    --conduction-color-primary-lighter:  var(--c-cobalt-100);
+    --conduction-color-primary-lightest: var(--c-white);
+    --conduction-color-primary-dark:     var(--c-cobalt-400);
+    --conduction-color-primary-darker:   var(--c-cobalt-500);
+    --conduction-color-primary-darkest:  var(--c-cobalt-600);
+
+    /* Text — 13.85:1 for body, 5.91:1 for muted */
+    --conduction-color-text-default: var(--c-cobalt-100);
+    --conduction-color-text-inverse: var(--c-cobalt-900);
+    --conduction-color-text-muted:   var(--c-cobalt-300);
+    --conduction-color-text-accent:  var(--c-orange-knvb);
+
+    /* Link */
+    --conduction-color-link-default: var(--c-cobalt-300);
+    --conduction-color-link-hover:   var(--c-orange-knvb);
+
+    /* Border — cobalt-300 clears 3:1 on both the ground and the
+       surface; cobalt-400 only manages it on the ground. */
+    --conduction-color-border-default: var(--c-cobalt-300);
+    --conduction-color-border-strong:  var(--c-cobalt-200);
+
+    /* Status — the light step carries both ink and rule, and the
+       surface is the ground. */
+    --conduction-color-status-info:          var(--c-cobalt-300);
+    --conduction-color-status-info-ink:      var(--c-cobalt-300);
+    --conduction-color-status-info-tint:     var(--c-cobalt-800);
+
+    --conduction-color-status-success:       var(--c-forest-300);
+    --conduction-color-status-success-ink:   var(--c-forest-300);
+    --conduction-color-status-success-tint:  var(--c-forest-950);
+
+    --conduction-color-status-warning:       var(--c-coral-300);
+    --conduction-color-status-warning-ink:   var(--c-coral-300);
+    --conduction-color-status-warning-tint:  var(--c-coral-950);
+
+    --conduction-color-status-error:         var(--c-red-300);
+    --conduction-color-status-error-ink:     var(--c-red-300);
+    --conduction-color-status-error-tint:    var(--c-red-950);
+
+    /* Code — the block ground was already dark, so it stays; inline
+       moves off the light tint onto the surface. */
+    --conduction-color-code-inline-background: var(--c-cobalt-800);
+    --conduction-color-code-inline-text:       var(--c-cobalt-100);
+
+    /* Alert, quote, toc */
+    --conduction-color-alert-border: var(--c-cobalt-700);
+    --conduction-color-quote-border: var(--c-cobalt-300);
+    --conduction-color-toc-border:   var(--c-cobalt-700);
+  }
+}
+
 /* ============================================================
    Base typography
    ============================================================ */