@conduction/docusaurus-preset 3.44.2 → 3.44.3

package/src/components/StampRush/StampRush.module.css

@@ -10,7 +10,7 @@
 .rush {
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
-  background: white;
+  background: var(--conduction-color-surface-card);
   padding: clamp(16px, 3vw, 28px);
   font-family: var(--conduction-typography-font-family-body);
 }
@@ -37,7 +37,7 @@
   margin: 0 0 6px;
   font-size: 20px;
   font-weight: 700;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .lede {
@@ -45,7 +45,7 @@
   max-width: 52ch;
   font-size: 14px;
   line-height: 1.5;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .hud {
@@ -60,8 +60,8 @@
 .hudLives {
   padding: 6px 10px;
   border-radius: var(--radius-pill);
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-strong);
   white-space: nowrap;
 }
 
@@ -87,7 +87,7 @@
   padding: 10px;
   border: 1px dashed var(--c-cobalt-200);
   border-radius: var(--radius-md);
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   cursor: pointer;
   font-family: inherit;
   text-align: center;
@@ -110,7 +110,7 @@
 
 .slotFull {
   border-style: solid;
-  background: white;
+  background: var(--conduction-color-surface-card);
   box-shadow: var(--shadow-3);
 }
 .slotReady { border-color: var(--c-mint-500); }
@@ -125,14 +125,14 @@
 .cardTitle {
   font-size: 13px;
   font-weight: 600;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   line-height: 1.25;
 }
 
 .cardNote {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 .foot {
@@ -161,7 +161,7 @@
 .hint {
   margin: 0;
   font-size: 12px;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   max-width: 48ch;
 }
 
@@ -178,10 +178,10 @@
   .flashBad  { animation: srBad 260ms ease-out; }
   @keyframes srGood {
     0%   { background: var(--c-mint-300); }
-    100% { background: var(--c-cobalt-50); }
+    100% { background: var(--conduction-color-surface-subtle); }
   }
   @keyframes srBad {
-    0%, 100% { background: var(--c-cobalt-50); transform: translateX(0); }
+    0%, 100% { background: var(--conduction-color-surface-subtle); transform: translateX(0); }
     25%  { background: var(--c-coral-300); transform: translateX(-3px); }
     75%  { transform: translateX(3px); }
   }

package/src/components/StatsStrip/StatsStrip.module.css

@@ -6,7 +6,7 @@
  */
 
 .strip {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-top: 1px solid var(--c-cobalt-100);
   border-bottom: 1px solid var(--c-cobalt-100);
   font-family: var(--conduction-typography-font-family-body);
@@ -41,13 +41,13 @@
   font-size: 42px;
   font-weight: 700;
   letter-spacing: -0.02em;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   line-height: 1;
 }
 
 .label {
   font-size: 14px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin-top: 8px;
   line-height: 1.4;
 }

package/src/components/ThemeSeamMock/ThemeSeamMock.module.css

@@ -131,7 +131,7 @@
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
   letter-spacing: 0.06em;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   text-transform: uppercase;
   text-align: center;
 }

package/src/components/Troubleshooting/Troubleshooting.module.css

@@ -7,14 +7,14 @@
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0 0 var(--space-3);
   line-height: 1.2;
 }
 
 .lede {
   font-size: 17px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.6;
   margin: 0 0 var(--space-5);
 }
@@ -25,7 +25,7 @@
 }
 
 .item {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-left: 3px solid var(--c-orange-knvb);
   border-radius: var(--radius-md);
   padding: var(--space-4) var(--space-5);
@@ -57,7 +57,7 @@
 .symptomText {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 14px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   background: transparent;
   padding: 0;
   font-weight: 600;
@@ -66,17 +66,17 @@
 
 .body {
   font-size: 16px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.6;
 }
 
 .body code {
-  background: var(--c-cobalt-100);
+  background: var(--conduction-color-surface-sunken);
   border-radius: 4px;
   padding: 1px 6px;
   font-family: var(--conduction-typography-font-family-code);
   font-size: 14px;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 .body p { margin: var(--space-2) 0 0; }

package/src/components/WidgetMock/WidgetMock.module.css

@@ -56,6 +56,6 @@
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin: 0;
 }

package/src/components/WidgetShelf/WidgetShelf.module.css

@@ -42,10 +42,10 @@
 .eyebrow .h { width: 10px; height: 12px; clip-path: var(--hex-pointy-top); background: var(--c-orange-knvb); }
 .title {
   font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
-  line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
+  line-height: 1.1; color: var(--conduction-color-text-strong); margin: 0 0 var(--space-3);
   text-wrap: pretty; /* run full width; no artificial two-line balance */
 }
-.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; max-width: 70ch; }
+.lede { font-size: 17px; line-height: 1.5; color: var(--conduction-color-text-body); margin: 0; max-width: 70ch; }
 
 .grid {
   display: grid;
@@ -129,11 +129,11 @@
   border: 1px solid var(--c-cobalt-200);
   border-radius: var(--radius-pill);
   background: transparent;
-  color: var(--c-blue-cobalt);
+  color: var(--conduction-color-text-default);
   cursor: pointer;
 }
 .ctrl:hover {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   border-color: var(--c-blue-cobalt);
 }
 .ctrl:focus-visible {
@@ -176,7 +176,7 @@
 }
 
 .card {
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   overflow: hidden;
@@ -185,7 +185,7 @@
 }
 
 .panel {
-  background: var(--c-cobalt-50);
+  background: var(--conduction-color-surface-subtle);
   padding: var(--space-5);
   min-height: 180px;
   display: flex;
@@ -200,7 +200,7 @@
   font-size: 18px;
   font-weight: 600;
   letter-spacing: -0.005em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   padding: var(--space-4) var(--space-5) 0;
 }
@@ -208,7 +208,7 @@
 .cardDesc {
   font-size: 14px;
   line-height: 1.55;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   margin: 0;
   padding: var(--space-2) var(--space-5) var(--space-5);
 }
@@ -224,7 +224,7 @@
   width: 100%;
   max-width: 280px;
   min-height: 124px;
-  background: white;
+  background: var(--conduction-color-surface-card);
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-1);
@@ -251,7 +251,7 @@
   font-weight: 700;
   line-height: 1;
   letter-spacing: -0.01em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .autoKpiBar {
   display: block;
@@ -311,7 +311,7 @@
   width: 86%;
   height: 4px;
   border-radius: 1px;
-  background: var(--c-cobalt-100);
+  background: var(--conduction-color-surface-sunken);
 }
 
 /* Donut gauge */

package/src/components/primitives/AuthorByline.module.css

@@ -16,8 +16,8 @@
   width: 22px;
   height: 25px;
   clip-path: var(--hex-pointy-top);
-  background: var(--c-cobalt-100);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-sunken);
+  color: var(--conduction-color-text-body);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -41,10 +41,10 @@
 .date { }
 
 /* Tones for placement on different grounds. */
-.tone-default .name { color: var(--c-cobalt-700); }
+.tone-default .name { color: var(--conduction-color-text-body); }
 .tone-default .date,
 .tone-default .sep,
-.tone-default        { color: var(--c-cobalt-400); }
+.tone-default        { color: var(--conduction-color-text-muted); }
 
 .tone-on-dark .name  { color: white; }
 .tone-on-dark .date,
@@ -52,7 +52,7 @@
 .tone-on-dark        { color: var(--c-cobalt-200); }
 .tone-on-dark .avatar { background: var(--c-cobalt-700); color: white; }
 
-.tone-muted .name    { color: var(--c-cobalt-700); }
+.tone-muted .name    { color: var(--conduction-color-text-body); }
 .tone-muted .date,
 .tone-muted .sep,
 .tone-muted          { color: var(--c-cobalt-300); }

package/src/components/primitives/Button.module.css

@@ -50,20 +50,20 @@
 }
 
 .v-secondary {
-  background: white;
-  color: var(--c-blue-cobalt);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-default);
   border-color: var(--c-cobalt-200);
 }
 .v-secondary:hover {
   border-color: var(--c-blue-cobalt);
-  color: var(--c-blue-cobalt);
-  background: white;
+  color: var(--conduction-color-text-default);
+  background: var(--conduction-color-surface-card);
   text-decoration: none;
 }
 
 .v-ghost {
   background: transparent;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   padding-inline: 4px;
   font-size: 14px;
 }
@@ -75,15 +75,15 @@
 
 /* For use inside cobalt CTA panels (inverse surfaces) */
 .v-on-dark-primary {
-  background: white;
-  color: var(--c-blue-cobalt);
+  background: var(--conduction-color-surface-card);
+  color: var(--conduction-color-text-default);
   border-color: white;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 14px;
   font-weight: 600;
 }
-.v-on-dark-primary:hover { opacity: 0.92; color: var(--c-blue-cobalt); }
+.v-on-dark-primary:hover { opacity: 0.92; color: var(--conduction-color-text-default); }
 
 .v-on-dark-secondary {
   background: transparent;

package/src/components/primitives/Card.module.css

@@ -6,13 +6,13 @@
   position: relative;
   border-radius: var(--radius-lg);
   border: 1px solid var(--c-cobalt-100);
-  background: white;
+  background: var(--conduction-color-surface-card);
   transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
   font-family: var(--conduction-typography-font-family-body);
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
-.tone-surface { background: white; }
+.tone-surface { background: var(--conduction-color-surface-card); }
 .tone-ghost {
   background: transparent;
   border-style: dashed;

package/src/components/primitives/Eyebrow.module.css

@@ -11,7 +11,7 @@
   font-size: 12px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: 24px;
 }
 

package/src/components/primitives/HexThumbnail.module.css

@@ -40,6 +40,6 @@
 .tone-cobalt      { background: var(--c-blue-cobalt); }
 .tone-cobalt-dark { background: var(--c-cobalt-700); }
 .tone-cobalt-deep { background: var(--c-cobalt-900); }
-.tone-cobalt-50   { background: var(--c-cobalt-50); color: var(--c-blue-cobalt); }
+.tone-cobalt-50   { background: var(--conduction-color-surface-subtle); color: var(--conduction-color-text-default); }
 .tone-mint        { background: var(--c-mint-500); }
 .tone-orange      { background: var(--c-orange-knvb); }

package/src/components/primitives/Pill.module.css

@@ -18,8 +18,8 @@
 }
 
 .tone-default {
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-700);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-body);
 }
 
 .tone-solid {

package/src/components/primitives/Section.module.css

@@ -16,8 +16,8 @@
 }
 
 /* Background variants */
-.bg-default { background: white; }
-.bg-tinted  { background: var(--c-cobalt-50); border-top: 1px solid var(--c-cobalt-100); border-bottom: 1px solid var(--c-cobalt-100); }
+.bg-default { background: var(--conduction-color-surface-card); }
+.bg-tinted  { background: var(--conduction-color-surface-subtle); border-top: 1px solid var(--c-cobalt-100); border-bottom: 1px solid var(--c-cobalt-100); }
 .bg-inverse { background: var(--c-blue-cobalt); color: white; }
 
 /* Vertical-spacing variants */

package/src/components/primitives/SectionHead.module.css

@@ -25,7 +25,7 @@
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.02em;
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
   margin: 0;
   /* Section titles run the full line before wrapping. The kit's base
      h1-h6 rule sets `text-wrap: balance`, which splits a title into
@@ -41,7 +41,7 @@
 
 .lede {
   font-size: 17px;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   line-height: 1.55;
   margin: 0;
 }

package/src/css/brand.css

@@ -139,7 +139,7 @@
    Common Ground yellow (reuses .cg-yellow), "+" in Nextcloud blue.
    Use through the <CommonGroundPlus/> primitive; the rules below back
    it (and any plain-HTML preview that wires up the same span shape). */
-.cg-plus-common { color: var(--c-blue-cobalt); }
+.cg-plus-common { color: var(--conduction-color-text-default); }
 .cg-plus-plus   { color: var(--conduction-color-brand-nextcloud); font-weight: inherit; }
 
 /* Buttons inherit brand-primary fill */
@@ -276,7 +276,7 @@ blockquote {
 .theme-doc-sidebar-container {
   width: 280px !important;
   border-right: 1px solid var(--c-cobalt-100) !important;
-  background: white;
+  background: var(--conduction-color-surface-card);
 }
 
 /* Menu list typography + spacing */
@@ -295,7 +295,7 @@ blockquote {
 /* Default link state: idle sentence-case cobalt-700 on white,
    4-px-radius hover tint cobalt-50. */
 .menu__link {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   padding: 4px 10px;
   border-radius: var(--radius-sm);
   margin-bottom: 2px;
@@ -303,8 +303,8 @@ blockquote {
   line-height: 1.4;
 }
 .menu__link:hover {
-  background: var(--c-cobalt-50);
-  color: var(--c-cobalt-900);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-strong);
 }
 
 /* Active item: 2-px cobalt left border + cobalt-50 fill + cobalt-blue text.
@@ -312,8 +312,8 @@ blockquote {
    aligned with the idle siblings above and below. */
 .menu__link--active,
 .menu__link--active:hover {
-  background: var(--c-cobalt-50);
-  color: var(--c-blue-cobalt);
+  background: var(--conduction-color-surface-subtle);
+  color: var(--conduction-color-text-default);
   font-weight: 500;
   border-left: 2px solid var(--c-blue-cobalt);
   padding-left: 8px;
@@ -328,13 +328,13 @@ blockquote {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   font-weight: 500;
   margin: var(--space-4) 0 var(--space-2);
 }
 .menu__list-item-collapsible > .menu__link:hover {
   background: transparent;
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
 }
 
 /* Caret on collapsible categories — desaturate to cobalt-300. */
@@ -356,27 +356,27 @@ blockquote {
   letter-spacing: -0.02em;
   line-height: 1.1;
   margin: 0 0 var(--space-4);
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .theme-doc-markdown h2 {
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -0.01em;
   margin: var(--space-8) 0 var(--space-3);
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .theme-doc-markdown h3 {
   font-size: 20px;
   font-weight: 600;
   margin: var(--space-6) 0 var(--space-3);
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 .theme-doc-markdown p,
 .theme-doc-markdown ul,
 .theme-doc-markdown ol {
   font-size: 15px;
   line-height: 1.65;
-  color: var(--c-cobalt-800);
+  color: var(--conduction-color-text-strong);
   margin: 0 0 var(--space-3);
 }
 .theme-doc-markdown ul,
@@ -387,7 +387,7 @@ blockquote {
   margin-bottom: var(--space-2);
 }
 .theme-doc-markdown strong {
-  color: var(--c-cobalt-900);
+  color: var(--conduction-color-text-strong);
 }
 
 /* Code-typeface breadcrumb above the H1. Docusaurus renders this
@@ -397,11 +397,11 @@ blockquote {
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   margin-bottom: var(--space-4);
 }
 .theme-doc-breadcrumbs .breadcrumbs__link {
-  color: var(--c-cobalt-400);
+  color: var(--conduction-color-text-muted);
   background: transparent;
   padding: 0;
 }
@@ -410,7 +410,7 @@ blockquote {
   background: transparent;
 }
 .theme-doc-breadcrumbs .breadcrumbs__item--active .breadcrumbs__link {
-  color: var(--c-cobalt-700);
+  color: var(--conduction-color-text-body);
   background: transparent;
 }
 

package/src/css/tokens.css

@@ -145,6 +145,23 @@
   --conduction-color-background-default: var(--c-white);
   --conduction-color-background-inverse: var(--c-blue-cobalt);
   --conduction-color-background-muted:   var(--c-cobalt-50);
+
+  /* Card and panel surfaces.
+     `background: white` and `background: var(--c-cobalt-50)` are written
+     straight into components about 280 times. Neither can flip, so in
+     dark mode the card stayed white while the text on it went light,
+     which is the second half of the dark-mode failure: correct ink,
+     invisible on a surface that never changed.
+
+     Lossless again: each is the value it replaces in light mode.
+     `-plate` is the exception that must NOT flip. Third-party logos are
+     designed against white and lose contrast on anything else, so the
+     brand rule is a white tile always. Naming it makes that deliberate
+     rather than an oversight the next sweep tries to "fix". */
+  --conduction-color-surface-card:   var(--c-white);
+  --conduction-color-surface-subtle: var(--c-cobalt-50);
+  --conduction-color-surface-sunken: var(--c-cobalt-100);
+  --conduction-color-surface-plate:  var(--c-white);
   /* 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
@@ -159,6 +176,20 @@
   --conduction-color-text-accent:  var(--c-coral-600);
   --conduction-color-text-muted:   var(--c-cobalt-400);
 
+  /* Text, the two darker inks.
+     Components reach past the semantic layer for these two steps all the
+     time: cobalt-900 for a heading, cobalt-700 for body copy. A raw
+     palette value cannot flip, so in dark mode that ink stayed navy on a
+     navy ground. Measured 2026-09-19: 1,362 elements below 1.5:1 across
+     121 of the 163 pages on conduction.nl, the homepage h1 at exactly
+     1.00.
+
+     These two exist so that migration is lossless. Each resolves to the
+     identical value it replaces in light mode, so nothing moves on a
+     white ground, and only the dark block below has to be right. */
+  --conduction-color-text-strong:  var(--c-cobalt-900);
+  --conduction-color-text-body:    var(--c-cobalt-700);
+
   /* Link */
   --conduction-color-link-default: var(--c-blue-cobalt);
   --conduction-color-link-hover:   var(--c-coral-600);
@@ -423,6 +454,17 @@
   --conduction-color-background-muted:   var(--c-cobalt-800);
   --conduction-color-background-inverse: var(--c-cobalt-50);
 
+  /* Card and panel surfaces lift off the cobalt-900 ground rather than
+     sink into it, so a card still reads as a card. `-sunken` goes the
+     other way for the insets that were cobalt-100 on white.
+
+     `-plate` stays white on purpose: it is the tile third-party logos
+     sit on, and those are drawn for a white ground in either mode. */
+  --conduction-color-surface-card:   var(--c-cobalt-800);
+  --conduction-color-surface-subtle: var(--c-cobalt-800);
+  --conduction-color-surface-sunken: var(--c-cobalt-700);
+  --conduction-color-surface-plate:  var(--c-white);
+
   /* 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);
@@ -438,6 +480,12 @@
   --conduction-color-text-muted:   var(--c-cobalt-300);
   --conduction-color-text-accent:  var(--c-orange-knvb);
 
+  /* The two darker inks invert. White for a heading so it outranks body
+     copy the way cobalt-900 outranks cobalt-700 on a white ground, and
+     cobalt-100 for body at 13.85:1 on the cobalt-900 default. */
+  --conduction-color-text-strong:  var(--c-white);
+  --conduction-color-text-body:    var(--c-cobalt-100);
+
   /* Link */
   --conduction-color-link-default: var(--c-cobalt-300);
   --conduction-color-link-hover:   var(--c-orange-knvb);
@@ -499,6 +547,18 @@
     --conduction-color-text-muted:   var(--c-cobalt-300);
     --conduction-color-text-accent:  var(--c-orange-knvb);
 
+    /* Mirrors the [data-theme="dark"] block above. Both have to carry
+       every token: this one is what a visitor gets before the theme
+       script runs, and a token defined in only one of them reverts to
+       its light value for exactly the readers dark mode is for. */
+    --conduction-color-text-strong:  var(--c-white);
+    --conduction-color-text-body:    var(--c-cobalt-100);
+
+    --conduction-color-surface-card:   var(--c-cobalt-800);
+    --conduction-color-surface-subtle: var(--c-cobalt-800);
+    --conduction-color-surface-sunken: var(--c-cobalt-700);
+    --conduction-color-surface-plate:  var(--c-white);
+
     /* Link */
     --conduction-color-link-default: var(--c-cobalt-300);
     --conduction-color-link-hover:   var(--c-orange-knvb);