@cogenta/theme-docs 0.3.3 → 0.5.4

package/src/styles/tokens.css

@@ -1,31 +1,26 @@
 /*
  * `@cogenta/theme-docs`'s design system.
  *
- * Contract D fixes a *closed* skin token set — seven colours, five type
- * tokens, two spacing tokens, three radii, three motion tokens, two shadows
- * — and refuses any skin that adds one. So this layer adds nothing to the
- * skin: every value below is *derived* from `--cogenta-*` by composition
- * (`calc`, `color-mix`, relative colour syntax). A skin swap rewrites the
- * generated `--cogenta-*` sheet and this whole system follows, with no
- * build step.
+ * The register is first-class technical documentation: dense but calm,
+ * navigation first, code treated as the main character of a page. White and
+ * a cool grey scale carry the page, text is set in a near-black ink, and one
+ * deep petrol teal is kept for links, the page a reader is on, and focus.
+ * Structure is drawn with space and hairlines, never with boxes, shadows or
+ * decorative shapes.
  *
- * Two rules hold everywhere in this file and the two that import it:
+ * Two families from one superfamily. IBM Plex Sans sets everything a reader
+ * reads and uses; IBM Plex Mono sets code, file names, keys, commands and
+ * the handful of labels a program prints (a version, a date in a changelog).
  *
- * 1. **No colour literal.** Not one hex, `rgb()`, `hsl()` or bare `oklch()`.
- *    Every colour is either a skin token or a function *of* a skin token.
- * 2. **No second scale.** The type steps come from `--cogenta-font-size-*`
- *    and the spacing multiplier from `--cogenta-space-scale`, both emitted
- *    by `renderSkin` from the same tokens the validator checked.
+ * Contract D fixes a closed skin token set, so nothing here adds a token:
+ * every value is derived from a `--cogenta-*` property (`calc`, `color-mix`,
+ * relative colour syntax).
  *
- * The default skin (`tokens.json`) is a neutral blue-grey ground with one
- * confident blue accent — the Docusaurus/GitBook register the aesthetic
- * direction asks for: dense, structured, and legible over long reference
- * pages rather than expressive. Light mode is "structured and edged"
- * (hairline borders carry most of the depth, shadow reserved for genuine
- * hover elevation, exactly the language `theme-entreprise` already proved);
- * dark mode is a real slate, designed on its own terms rather than
- * mechanically inverted — see the colour section below for the five
- * decisions that make it so.
+ * Two rules hold in every stylesheet of this theme:
+ *
+ * 1. No colour literal. Every colour is a skin token or a function of one.
+ * 2. No second type scale. Steps come from `--cogenta-font-size-*`; fluid
+ *    sizes only interpolate between steps of that one ladder.
  */
 
 :where(:root) {
@@ -41,267 +36,266 @@
 }
 
 /* --------------------------------------------------------------------------
-   Space — a compact scale: a docs page is read a paragraph at a time, and
-   the aesthetic direction asks for information density over air.
+   Space: one unit, one section rhythm, one page width, three reading columns.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
-  --cg-density: var(--cogenta-space-scale, 1);
-  --cg-unit: calc(var(--cogenta-space-unit) * var(--cg-density));
-
-  --cg-s1: calc(var(--cg-unit) * 1);
-  --cg-s2: calc(var(--cg-unit) * 2);
-  --cg-s3: calc(var(--cg-unit) * 3);
-  --cg-s4: calc(var(--cg-unit) * 4);
-  --cg-s5: calc(var(--cg-unit) * 5);
-  --cg-s6: calc(var(--cg-unit) * 6);
-  --cg-s8: calc(var(--cg-unit) * 8);
-  --cg-s10: calc(var(--cg-unit) * 10);
-  --cg-s12: calc(var(--cg-unit) * 12);
-  --cg-s16: calc(var(--cg-unit) * 16);
-  --cg-s20: calc(var(--cg-unit) * 20);
-  --cg-s28: calc(var(--cg-unit) * 28);
-
-  --cg-gutter: var(--cg-s6);
-  --cg-gap-tight: var(--cg-s2);
-  --cg-gap: var(--cg-s5);
-  --cg-gap-loose: var(--cg-s10);
-  --cg-section-y: var(--cg-s16);
-
-  --cg-measure: 72ch;
-  --cg-measure-narrow: 44ch;
-  --cg-page: 78rem;
-  --cg-page-narrow: 50rem;
-  --cg-sidebar-width: 17rem;
-  --cg-header-height: 3.75rem;
+  --cd-density: var(--cogenta-space-scale, 1);
+  --cd-unit: calc(var(--cogenta-space-unit) * var(--cd-density));
+
+  --cd-s1: calc(var(--cd-unit) * 1);
+  --cd-s2: calc(var(--cd-unit) * 2);
+  --cd-s3: calc(var(--cd-unit) * 3);
+  --cd-s4: calc(var(--cd-unit) * 4);
+  --cd-s5: calc(var(--cd-unit) * 5);
+  --cd-s6: calc(var(--cd-unit) * 6);
+  --cd-s8: calc(var(--cd-unit) * 8);
+  --cd-s10: calc(var(--cd-unit) * 10);
+  --cd-s12: calc(var(--cd-unit) * 12);
+  --cd-s16: calc(var(--cd-unit) * 16);
+  --cd-s20: calc(var(--cd-unit) * 20);
+  --cd-s24: calc(var(--cd-unit) * 24);
+
+  /* The only vertical rhythm between blocks. Every block is padded by half of
+     it above and below, so any two blocks sit one full step apart. Inside an
+     article the step is shorter: a documentation page is read continuously. */
+  --cd-section: clamp(var(--cd-s12), 7vw, var(--cd-s24));
+  --cd-section-doc: var(--cd-s10);
+
+  /* The home page and every page outside the documentation sit on twelve
+     columns. */
+  --cd-columns: 12;
+  --cd-gutter: clamp(var(--cd-s5), 3vw, var(--cd-s10));
+  --cd-col-gap: clamp(var(--cd-s4), 2vw, var(--cd-s8));
+  /* One page width for the header, the footer, the home page and a
+     documentation page, so every left edge lines up with the wordmark. */
+  --cd-page: 90rem;
+
+  /* A documentation page: navigation, the article, the table of contents.
+     The side columns are fixed so the text never moves when the navigation
+     changes. Code, notes and reference tables take the whole article;
+     running text keeps to the measure. A `ch` is the width of Plex Sans's
+     zero, wider than its average letter: 56ch sets about 70 characters to a
+     line, measured in Chrome on the real pages. */
+  --cd-sidebar: 16rem;
+  --cd-toc: 13.5rem;
+  --cd-doc-page: var(--cd-page);
+  --cd-article: 46rem;
+  --cd-measure: 56ch;
+  --cd-header-height: 3.75rem;
 }
 
 :where([data-density="compact"]) {
-  --cg-density: 0.85;
+  --cd-density: 0.85;
 }
 
 :where([data-density="comfortable"]) {
-  --cg-density: 1;
+  --cd-density: 1;
 }
 
 :where([data-density="spacious"]) {
-  --cg-density: 1.25;
+  --cd-density: 1.2;
 }
 
 /* --------------------------------------------------------------------------
-   Type — the skin's scale, named; plus the rhythm the scale does not carry.
+   Type: Plex Sans to read, Plex Mono for what a machine prints.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
-  --cg-text-xs: var(--cogenta-font-size-xs, 0.72rem);
-  --cg-text-sm: var(--cogenta-font-size-sm, 0.85rem);
-  --cg-text-md: var(--cogenta-font-size-md, var(--cogenta-font-base-size, 1rem));
-  --cg-text-lg: var(--cogenta-font-size-lg, 1.15rem);
-  --cg-text-xl: var(--cogenta-font-size-xl, 1.32rem);
-  --cg-text-2xl: var(--cogenta-font-size-2xl, 1.52rem);
-  --cg-text-3xl: var(--cogenta-font-size-3xl, 1.75rem);
-
-  --cg-leading-tight: 1.15;
-  --cg-leading-snug: 1.3;
-  --cg-leading-normal: 1.6;
-  --cg-leading-relaxed: 1.75;
-
-  --cg-tracking-tight: -0.012em;
-  --cg-tracking-snug: -0.006em;
-  --cg-tracking-normal: 0em;
-  --cg-tracking-wide: 0.08em;
-
-  --cg-weight-regular: 400;
-  --cg-weight-medium: 500;
-  --cg-weight-semibold: 600;
-  --cg-weight-bold: 700;
+  --cd-font-sans: var(--cogenta-font-sans);
+  --cd-font-mono: var(--cogenta-font-mono);
+
+  --cd-text-xs: var(--cogenta-font-size-xs, 0.69rem);
+  --cd-text-sm: var(--cogenta-font-size-sm, 0.83rem);
+  --cd-text-md: var(--cogenta-font-size-md, var(--cogenta-font-base-size, 1rem));
+  --cd-text-lg: var(--cogenta-font-size-lg, 1.2rem);
+  --cd-text-xl: var(--cogenta-font-size-xl, 1.44rem);
+  --cd-text-2xl: var(--cogenta-font-size-2xl, 1.73rem);
+  --cd-text-3xl: var(--cogenta-font-size-3xl, 2.07rem);
+  /* The same ladder, continued upward by the skin's own ratio. */
+  --cd-text-4xl: calc(var(--cd-text-3xl) * var(--cogenta-font-scale, 1.2));
+  --cd-text-5xl: calc(var(--cd-text-4xl) * var(--cogenta-font-scale, 1.2));
+
+  /* Interface text: navigation, labels, table cells. A quarter step under
+     the body size, the size an editor or a terminal uses. */
+  --cd-text-ui: calc((var(--cd-text-sm) + var(--cd-text-md) * 3) / 4);
+  --cd-text-label: calc((var(--cd-text-sm) * 3 + var(--cd-text-md)) / 4);
+  /* Code: Plex Mono sets wide, so it runs a step under the text around it. */
+  --cd-text-code: calc((var(--cd-text-sm) + var(--cd-text-md)) / 2);
+
+  --cd-size-display: clamp(var(--cd-text-3xl), calc(1rem + 3.2vw), var(--cd-text-5xl));
+  --cd-size-title: clamp(var(--cd-text-2xl), calc(1rem + 1.9vw), var(--cd-text-4xl));
+  --cd-size-section: clamp(var(--cd-text-xl), calc(0.95rem + 1.1vw), var(--cd-text-3xl));
+  --cd-size-h2: clamp(var(--cd-text-lg), calc(0.95rem + 0.6vw), var(--cd-text-2xl));
+  --cd-size-h3: var(--cd-text-lg);
+  --cd-size-lead: clamp(var(--cd-text-md), calc(0.9rem + 0.35vw), var(--cd-text-lg));
+  --cd-size-figure: clamp(var(--cd-text-2xl), calc(0.95rem + 1.6vw), var(--cd-text-4xl));
+  --cd-size-quote: clamp(var(--cd-text-lg), calc(0.95rem + 0.8vw), var(--cd-text-2xl));
+
+  --cd-leading-display: 1.08;
+  --cd-leading-heading: 1.22;
+  --cd-leading-lead: 1.55;
+  --cd-leading-text: 1.72;
+  --cd-leading-code: 1.7;
+  --cd-leading-ui: 1.45;
+
+  --cd-tracking-display: -0.024em;
+  --cd-tracking-heading: -0.012em;
+
+  --cd-weight-regular: 400;
+  --cd-weight-medium: 500;
+  --cd-weight-semibold: 600;
 }
 
 /* --------------------------------------------------------------------------
-   Radius — restrained, closer to square than round: a reference site reads
-   as a tool, not a marketing page.
+   Shape and motion: a hair of softening on controls and code, motion is a
+   colour or an underline.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
-  --cg-radius-xs: calc(var(--cogenta-radius-sm) / 2);
-  --cg-radius-sm: var(--cogenta-radius-sm);
-  --cg-radius-md: var(--cogenta-radius-md);
-  --cg-radius-lg: var(--cogenta-radius-lg);
-  --cg-radius-xl: calc(var(--cogenta-radius-lg) * 1.4);
-  --cg-radius-pill: 999rem;
-}
+  --cd-radius-control: var(--cogenta-radius-md);
+  --cd-radius-frame: var(--cogenta-radius-lg);
+  --cd-radius-inline: var(--cogenta-radius-sm);
 
-/* --------------------------------------------------------------------------
-   Motion
-   -------------------------------------------------------------------------- */
+  --cd-duration: min(var(--cogenta-motion-duration), 150ms);
+  --cd-ease: var(--cogenta-motion-easing);
 
-:where(:root) {
-  --cg-duration-fast: calc(var(--cogenta-motion-duration) * 0.65);
-  --cg-duration: var(--cogenta-motion-duration);
-  --cg-duration-slow: calc(var(--cogenta-motion-duration) * 3);
-  --cg-ease: var(--cogenta-motion-easing);
+  --cd-rule: 1px;
+  --cd-rule-strong: 2px;
 }
 
 /* --------------------------------------------------------------------------
-   Colour — one palette per scheme, both derived from the same seven tokens.
+   Colour: white, a cool grey scale, near-black ink, one petrol teal.
    --------------------------------------------------------------------------
 
-   The block below declares the **light** palette in plain terms; the
-   scheme-aware values live in the `@supports` block after it, guarded the
-   same way `theme-canonical`/`theme-entreprise` guard it: a browser that
-   cannot parse `light-dark()` must still get a usable light palette rather
-   than an `unset` custom property.
-
-   **This dark palette is designed on its own terms, not inverted — five
-   decisions, each the opposite of what a mechanical `bg`/`fg` swap would
-   produce (the same five `theme-entreprise` already proved, re-derived here
-   from a blue accent instead of a green one):**
-
-   1. *Elevation is a hairline, almost everywhere.* A raised surface is a
-      **border**, shadow reserved for genuine hover lift — a code block or a
-      sidebar panel looks like a plate on a desk, never a sticker.
-   2. *The accent is lifted less than a mechanical swap would allow, and
-      **desaturated** rather than just brightened* — a saturated blue pushed
-      to the same lightness a mechanical fix would pick reads as neon on
-      slate; this palette lifts it and pulls a third of its chroma back.
-   3. *The accent's foreground flips to ink* — light text on a lifted accent
-      fails contrast, so `accent-fg` is derived dark from the accent's own
-      hue rather than kept as the skin's white.
-   4. *Text is never pure light and never fully desaturated* — ink carries a
-      trace of the accent's hue at low chroma, a blue-tinted slate rather
-      than a generic dark-mode grey.
-   5. *A border lightens rather than darkens against its surface* — a darker
-      line on dark ink is invisible.
-
-   Known limit, same one `theme-canonical`/`theme-entreprise` record: the
-   derivation assumes a light-first skin (`bg` lighter than `fg`).
+   The first block declares the light palette plainly; the scheme-aware
+   values follow behind a feature query, so a browser that cannot parse
+   `light-dark()` still gets a complete light palette.
+
+   The teal (the skin's accent) is for four things only: a link in running
+   text, the page the reader is on in the navigation, the rule of a note, and
+   the focus ring. It is never a band, a card, a heading or a button fill
+   larger than a control.
+
+   Code has its own quiet ground: a step off the page in light, a step above
+   it in dark, always inside a hairline, so a long example reads as one
+   object without shouting.
+
+   The dark palette is designed for reading code at night, not inverted:
+
+   1. The ground is a cool near-black taken from the ink's own hue, and depth
+      is a lightness step up: canvas, code ground, raised panel.
+   2. Hairlines are a step up from the ground, visible without glowing.
+   3. Text is a soft white, a step below pure white, so long code does not
+      vibrate; secondary text and code comments keep AA.
+   4. The teal is lifted to a pale sea green that holds against the dark
+      ground, keeping its hue.
+   5. Diagrams and screenshots (light images) are dimmed a little with a
+      brightness step, so a white figure does not glare on a dark page.
+
+   Every ratio is computed from this file by `test/design-system.test.ts`,
+   in both schemes.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
-  --cg-canvas: var(--cogenta-color-bg);
-  --cg-surface: var(--cogenta-color-bg);
-  --cg-surface-raised: var(--cogenta-color-bg);
-  --cg-surface-sunken: var(--cogenta-color-muted);
-  --cg-surface-tinted: color-mix(in oklab, var(--cogenta-color-accent) 7%, var(--cogenta-color-bg));
-
-  --cg-ink: var(--cogenta-color-fg);
-  --cg-ink-muted: var(--cogenta-color-muted-fg);
-  --cg-ink-subtle: color-mix(in oklab, var(--cogenta-color-muted-fg) 85%, var(--cogenta-color-bg));
-
-  --cg-accent: var(--cogenta-color-accent);
-  --cg-accent-fg: var(--cogenta-color-accent-fg);
-  --cg-accent-hover: color-mix(in oklab, var(--cogenta-color-accent) 84%, var(--cogenta-color-fg));
-  --cg-accent-soft: color-mix(in oklab, var(--cogenta-color-accent) 9%, var(--cogenta-color-bg));
-  --cg-accent-soft-fg: color-mix(
-    in oklab,
-    var(--cogenta-color-accent) 70%,
-    var(--cogenta-color-fg)
-  );
-
-  --cg-line: var(--cogenta-color-border);
-  --cg-line-soft: color-mix(in oklab, var(--cogenta-color-border) 50%, var(--cogenta-color-bg));
-  --cg-line-strong: color-mix(in oklab, var(--cogenta-color-border) 60%, var(--cogenta-color-fg));
-
-  --cg-scrim: color-mix(in oklab, var(--cogenta-color-fg) 58%, transparent);
+  --cd-canvas: var(--cogenta-color-bg);
+  --cd-surface: color-mix(in oklab, var(--cogenta-color-muted) 55%, var(--cogenta-color-bg));
+  --cd-raised: var(--cogenta-color-muted);
+  --cd-code-ground: color-mix(in oklab, var(--cogenta-color-muted) 70%, var(--cogenta-color-bg));
+
+  --cd-ink: var(--cogenta-color-fg);
+  --cd-ink-muted: var(--cogenta-color-muted-fg);
+  --cd-ink-soft: color-mix(in oklab, var(--cogenta-color-fg) 70%, var(--cogenta-color-muted-fg));
+
+  --cd-accent: var(--cogenta-color-accent);
+  --cd-accent-fg: var(--cogenta-color-accent-fg);
+  --cd-accent-hover: color-mix(in oklab, var(--cogenta-color-accent) 80%, var(--cogenta-color-fg));
+  --cd-link: var(--cogenta-color-accent);
+
+  --cd-line: var(--cogenta-color-border);
+  --cd-line-strong: color-mix(in oklab, var(--cogenta-color-border) 58%, var(--cogenta-color-fg));
+  --cd-line-ink: var(--cogenta-color-fg);
+
+  --cd-footer: color-mix(in oklab, var(--cogenta-color-muted) 55%, var(--cogenta-color-bg));
+
+  --cd-image-brightness: 1;
 }
 
 @supports (color: light-dark(currentColor, currentColor)) and
   (color: oklch(from currentColor l c h)) {
   :where(:root) {
-    --cg-canvas: light-dark(
+    --cd-canvas: light-dark(
       var(--cogenta-color-bg),
-      oklch(from var(--cogenta-color-fg) 0.155 calc(c * 0.65) h)
+      oklch(from var(--cogenta-color-fg) 0.175 calc(c * 0.9) h)
     );
-    --cg-surface: light-dark(
-      var(--cogenta-color-bg),
-      oklch(from var(--cogenta-color-fg) 0.155 calc(c * 0.65) h)
-    );
-    --cg-surface-raised: light-dark(
-      var(--cogenta-color-bg),
-      oklch(from var(--cogenta-color-fg) 0.225 calc(c * 0.6) h)
+    --cd-surface: light-dark(
+      color-mix(in oklab, var(--cogenta-color-muted) 55%, var(--cogenta-color-bg)),
+      oklch(from var(--cogenta-color-fg) 0.2 calc(c * 0.9) h)
     );
-    --cg-surface-sunken: light-dark(
+    --cd-raised: light-dark(
       var(--cogenta-color-muted),
-      oklch(from var(--cogenta-color-fg) 0.115 calc(c * 0.75) h)
+      oklch(from var(--cogenta-color-fg) 0.235 calc(c * 0.9) h)
     );
-    --cg-surface-tinted: light-dark(
-      color-mix(in oklab, var(--cogenta-color-accent) 7%, var(--cogenta-color-bg)),
-      oklch(from var(--cogenta-color-accent) 0.235 calc(c * 0.55) h)
+    --cd-code-ground: light-dark(
+      color-mix(in oklab, var(--cogenta-color-muted) 70%, var(--cogenta-color-bg)),
+      oklch(from var(--cogenta-color-fg) 0.205 calc(c * 0.9) h)
     );
 
-    --cg-ink: light-dark(
-      var(--cogenta-color-fg),
-      oklch(from var(--cogenta-color-accent) 0.93 0.01 h)
-    );
-    --cg-ink-muted: light-dark(
+    --cd-ink: light-dark(var(--cogenta-color-fg), oklch(from var(--cogenta-color-bg) 0.925 c h));
+    --cd-ink-muted: light-dark(
       var(--cogenta-color-muted-fg),
-      oklch(from var(--cogenta-color-accent) 0.76 0.016 h)
+      oklch(from var(--cogenta-color-muted-fg) 0.76 c h)
     );
-    --cg-ink-subtle: light-dark(
-      color-mix(in oklab, var(--cogenta-color-muted-fg) 85%, var(--cogenta-color-bg)),
-      oklch(from var(--cogenta-color-accent) 0.63 0.014 h)
+    --cd-ink-soft: light-dark(
+      color-mix(in oklab, var(--cogenta-color-fg) 70%, var(--cogenta-color-muted-fg)),
+      oklch(from var(--cogenta-color-muted-fg) 0.85 c h)
     );
 
-    --cg-accent: light-dark(
+    --cd-accent: light-dark(
       var(--cogenta-color-accent),
-      oklch(from var(--cogenta-color-accent) 0.68 calc(c * 0.72) h)
+      oklch(from var(--cogenta-color-accent) 0.8 calc(c * 0.85) h)
     );
-    --cg-accent-fg: light-dark(
+    --cd-accent-fg: light-dark(
       var(--cogenta-color-accent-fg),
-      oklch(from var(--cogenta-color-accent) 0.16 calc(c * 0.5) h)
+      oklch(from var(--cogenta-color-fg) 0.175 calc(c * 0.9) h)
     );
-    --cg-accent-hover: light-dark(
-      color-mix(in oklab, var(--cogenta-color-accent) 84%, var(--cogenta-color-fg)),
-      oklch(from var(--cogenta-color-accent) 0.77 calc(c * 0.68) h)
+    --cd-accent-hover: light-dark(
+      color-mix(in oklab, var(--cogenta-color-accent) 80%, var(--cogenta-color-fg)),
+      oklch(from var(--cogenta-color-accent) 0.87 calc(c * 0.7) h)
     );
-    --cg-accent-soft: light-dark(
-      color-mix(in oklab, var(--cogenta-color-accent) 9%, var(--cogenta-color-bg)),
-      oklch(from var(--cogenta-color-accent) 0.28 calc(c * 0.45) h)
-    );
-    --cg-accent-soft-fg: light-dark(
-      color-mix(in oklab, var(--cogenta-color-accent) 70%, var(--cogenta-color-fg)),
-      oklch(from var(--cogenta-color-accent) 0.87 calc(c * 0.4) h)
+    --cd-link: light-dark(
+      var(--cogenta-color-accent),
+      oklch(from var(--cogenta-color-accent) 0.8 calc(c * 0.85) h)
     );
 
-    --cg-line: light-dark(
+    --cd-line: light-dark(
       var(--cogenta-color-border),
-      oklch(from var(--cogenta-color-accent) 0.34 calc(c * 0.2) h)
+      oklch(from var(--cogenta-color-fg) 0.3 calc(c * 0.9) h)
     );
-    --cg-line-soft: light-dark(
-      color-mix(in oklab, var(--cogenta-color-border) 50%, var(--cogenta-color-bg)),
-      oklch(from var(--cogenta-color-accent) 0.27 calc(c * 0.18) h)
+    --cd-line-strong: light-dark(
+      color-mix(in oklab, var(--cogenta-color-border) 58%, var(--cogenta-color-fg)),
+      oklch(from var(--cogenta-color-fg) 0.44 calc(c * 0.9) h)
     );
-    --cg-line-strong: light-dark(
-      color-mix(in oklab, var(--cogenta-color-border) 60%, var(--cogenta-color-fg)),
-      oklch(from var(--cogenta-color-accent) 0.55 calc(c * 0.22) h)
+    --cd-line-ink: light-dark(
+      var(--cogenta-color-fg),
+      oklch(from var(--cogenta-color-bg) 0.925 c h)
     );
-  }
-}
 
-/* --------------------------------------------------------------------------
-   Elevation — a hairline ring by default in both schemes; a real shadow is
-   spent only on hover.
-   -------------------------------------------------------------------------- */
-
-:where(:root) {
-  --cg-ring: inset 0 0 0 1px var(--cg-line);
-  --cg-ring-accent: inset 0 0 0 1px var(--cg-accent);
-  --cg-ring-strong: inset 0 0 0 1px var(--cg-line-strong);
-
-  --cg-elevation-0: none;
-  --cg-elevation-1: var(--cg-ring);
-  --cg-elevation-2: var(--cogenta-shadow-sm), var(--cg-ring);
-  --cg-elevation-3: var(--cogenta-shadow-md), var(--cg-ring);
+    --cd-footer: light-dark(
+      color-mix(in oklab, var(--cogenta-color-muted) 55%, var(--cogenta-color-bg)),
+      oklch(from var(--cogenta-color-fg) 0.155 calc(c * 0.9) h)
+    );
+  }
 }
 
+/* A light figure on the dark ground is dimmed a little, so a white diagram
+   does not glare. A brightness step, never a blur. */
 @media (prefers-color-scheme: dark) {
   :where(:root:not([data-theme="light"])) {
-    --cg-elevation-2: var(--cg-ring-strong);
-    --cg-elevation-3: var(--cg-ring-strong), var(--cogenta-shadow-md);
+    --cd-image-brightness: 0.88;
   }
 }
 
 :where(:root[data-theme="dark"]) {
-  --cg-elevation-2: var(--cg-ring-strong);
-  --cg-elevation-3: var(--cg-ring-strong), var(--cogenta-shadow-md);
+  --cd-image-brightness: 0.88;
 }