@cogenta/theme-entreprise 1.1.3 → 1.3.3

package/src/styles/theme.css

@@ -1,36 +1,30 @@
 /*
- * `@cogenta/theme-entreprise`'s stylesheet — the entry point, and nothing
+ * `@cogenta/theme-entreprise`'s stylesheet: the entry point, and nothing
  * else.
  *
- * Three layers, in the only order that works:
+ *   tokens.css   the design system, derived from the skin's `--cogenta-*`
+ *                custom properties (contract D)
+ *   base.css     document, accessibility floor, grid, chrome, actions
+ *   blocks.css   the seventeen vocabulary blocks and the entry header
+ *   archive.css  the taxonomy-term archive
+ *   widgets.css  the widget areas: the side column, the bands, the footer row
  *
- *   tokens.css  the design system, derived entirely from the skin's
- *               `--cogenta-*` custom properties (contract D)
- *   base.css    document, accessibility floor, page frame, chrome, actions
- *   blocks.css  the seventeen vocabulary blocks
+ * Not one colour is written literally in any of them: every value comes from
+ * a skin token or from a `--cg-*` property composed from those.
  *
- * Not one colour, font, radius, duration or shadow is written literally in
- * any of the three: every value comes from a `--cogenta-<group>-<name>`
- * property produced from the skin's tokens, or from a `--cg-*` property
- * composed from those. A single hard-coded hex would be a colour no skin
- * can change.
- *
- * `@import` is resolved at build time by Astro, and by `@cogenta/cli`'s own
- * inliner when `cogenta serve` renders without a build. Both flatten these
- * three into one sheet, so no visitor ever pays for three round trips.
- *
- * The one thing this file adds on its own: the Google Fonts request for the
- * two type families `tokens.json` names (Archivo for the sans, Source Serif
- * 4 for the serif accents in `quote`, `prose`'s blockquotes and the
- * numbered indices in `featureGrid`/`faq`) — loaded here, once, rather than
- * per skin, since a skin only ever *names* a font family; it does not fetch
- * one. Both fall back to a real system stack (`tokens.json`'s `font.sans`/
- * `font.serif`) if Google Fonts is unreachable.
+ * The one thing this file adds on its own is the Google Fonts request for the
+ * two families `tokens.json` names: Newsreader (display and headings, with
+ * its optical-size axis, so a 13 px caption and an 80 px title each get the
+ * cut drawn for them) and Hanken Grotesk (text and interface). A skin only
+ * names a family; it never fetches one. Both fall back to real system stacks
+ * if Google Fonts is unreachable, and `display=swap` keeps text visible while
+ * they load. `cogenta serve` hoists this `@import` above the skin's rules.
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,400&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&display=swap");
 
 @import "./tokens.css";
 @import "./base.css";
 @import "./blocks.css";
 @import "./archive.css";
+@import "./widgets.css";

package/src/styles/tokens.css

@@ -1,30 +1,24 @@
 /*
  * `@cogenta/theme-entreprise`'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 a management consultancy's: institutional restraint,
+ * generous whitespace, editorial confidence. Neutrals carry the page (a cool
+ * ivory paper and a blue-black ink), one deep green accent is spent rarely
+ * (links, the eyebrow rule, one bar in an exhibit), and depth comes from
+ * hairlines and space, never from shadows or tinted boxes.
  *
- * Two rules hold everywhere in this file and the two that import it:
+ * 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). A skin swap rewrites that sheet and
+ * this whole system follows.
  *
- * 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.
+ * Two rules hold in every stylesheet of this theme:
  *
- * The default skin (`tokens.json`) is a light-mode-forward palette built
- * around one confident accent — a deep forest green rather than the more
- * expected "corporate blue" — on a warm near-white ground. This file's own
- * decisions are what turn that into a full system: the light mode is
- * "structured and edged" (hairline borders carry most of the depth, shadow
- * reserved for genuine hover elevation), and the dark mode is designed on
- * its own terms rather than mechanically inverted — see the colour section
- * below for the five choices that make it so.
+ * 1. No colour literal. Every colour is a skin token or a function of one.
+ * 2. No second scale. Type steps come from `--cogenta-font-size-*`; the
+ *    display steps above `3xl` continue the same ratio
+ *    (`--cogenta-font-scale`), and fluid sizes only interpolate between
+ *    steps of that one ladder.
  */
 
 :where(:root) {
@@ -40,10 +34,7 @@
 }
 
 /* --------------------------------------------------------------------------
-   Space — a slightly more generous scale than the type steps alone would
-   suggest: the aesthetic direction asks for "real breathing room", which
-   this theme spends mostly in its section rhythm (`--cg-section-y`) and
-   its row/card padding, not in a larger base unit.
+   Space: one unit, one section rhythm, one grid.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
@@ -61,18 +52,30 @@
   --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-s20);
+  --cg-s24: calc(var(--cg-unit) * 24);
+  --cg-s32: calc(var(--cg-unit) * 32);
+
+  /* The only vertical rhythm between sections. Every block is padded by
+     half of it above and below, so any two blocks sit one full step apart
+     whatever their order; a band (the call to action, a muted variant) is
+     padded by the whole step. */
+  --cg-section: clamp(var(--cg-s16), 9vw, var(--cg-s32));
+
+  /* A twelve-column grid with constant gutters. */
+  --cg-columns: 12;
+  --cg-gutter: clamp(var(--cg-s5), 4.5vw, var(--cg-s16));
+  --cg-col-gap: clamp(var(--cg-s4), 2.2vw, var(--cg-s8));
+  --cg-page: 80rem;
+
+  /* One column's width, for an element that hangs into the margin (a prose
+     heading). Unregistered custom properties are substituted where they are
+     used, so `cqi` resolves against the grid container around that element. */
+  --cg-col: calc((100cqi - (var(--cg-columns) - 1) * var(--cg-col-gap)) / var(--cg-columns));
 
   --cg-measure: 66ch;
-  --cg-measure-narrow: 44ch;
-  --cg-page: 78rem;
-  --cg-page-narrow: 50rem;
+  --cg-measure-narrow: 48ch;
+
+  --cg-header-height: var(--cg-s20);
 }
 
 :where([data-density="compact"]) {
@@ -88,109 +91,90 @@
 }
 
 /* --------------------------------------------------------------------------
-   Type — the skin's scale, named; plus the rhythm the scale does not carry.
+   Type: Newsreader for display and headings, Hanken Grotesk for text and
+   interface. The skin names both; the theme only decides where each goes.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
-  --cg-text-xs: var(--cogenta-font-size-xs, 0.69rem);
-  --cg-text-sm: var(--cogenta-font-size-sm, 0.83rem);
-  --cg-text-md: var(--cogenta-font-size-md, var(--cogenta-font-base-size, 1rem));
-  --cg-text-lg: var(--cogenta-font-size-lg, 1.2rem);
-  --cg-text-xl: var(--cogenta-font-size-xl, 1.44rem);
-  --cg-text-2xl: var(--cogenta-font-size-2xl, 1.728rem);
-  --cg-text-3xl: var(--cogenta-font-size-3xl, 2.0736rem);
-
-  --cg-leading-tight: 1.08;
-  --cg-leading-snug: 1.24;
-  --cg-leading-normal: 1.55;
-  --cg-leading-relaxed: 1.72;
-
-  /* A confident display face wants tighter tracking at large sizes, and a
-     label set in small caps wants the opposite — both scale with the font
-     size because they are written in `em`. */
-  --cg-tracking-tight: -0.018em;
-  --cg-tracking-snug: -0.008em;
-  --cg-tracking-normal: 0em;
-  --cg-tracking-wide: 0.1em;
-
+  --cg-font-display: var(--cogenta-font-serif);
+  --cg-font-text: var(--cogenta-font-sans);
+
+  --cg-text-xs: var(--cogenta-font-size-xs, 0.68rem);
+  --cg-text-sm: var(--cogenta-font-size-sm, 0.85rem);
+  --cg-text-md: var(--cogenta-font-size-md, var(--cogenta-font-base-size, 1.0625rem));
+  --cg-text-lg: var(--cogenta-font-size-lg, 1.33rem);
+  --cg-text-xl: var(--cogenta-font-size-xl, 1.66rem);
+  --cg-text-2xl: var(--cogenta-font-size-2xl, 2.08rem);
+  --cg-text-3xl: var(--cogenta-font-size-3xl, 2.59rem);
+  /* The same ladder, continued: each step is the previous one times the
+     skin's own ratio. */
+  --cg-text-4xl: calc(var(--cg-text-3xl) * var(--cogenta-font-scale, 1.25));
+  --cg-text-5xl: calc(var(--cg-text-4xl) * var(--cogenta-font-scale, 1.25));
+  --cg-text-6xl: calc(var(--cg-text-5xl) * var(--cogenta-font-scale, 1.25));
+  /* Interface text (navigation, buttons, labels in forms) sits between two
+     steps: `sm` is too small for a primary control, `md` too loud. */
+  --cg-text-ui: calc((var(--cg-text-sm) + var(--cg-text-md)) / 2);
+
+  /* Fluid sizes interpolate between two steps of the ladder above. */
+  --cg-size-display: clamp(var(--cg-text-3xl), calc(1.1rem + 4.2vw), var(--cg-text-6xl));
+  --cg-size-heading: clamp(var(--cg-text-2xl), calc(1rem + 2.3vw), var(--cg-text-4xl));
+  --cg-size-subheading: clamp(var(--cg-text-xl), calc(0.95rem + 1vw), var(--cg-text-2xl));
+  --cg-size-quote: clamp(var(--cg-text-xl), calc(1rem + 1.8vw), var(--cg-text-3xl));
+  --cg-size-figure: clamp(var(--cg-text-3xl), calc(1rem + 3vw), var(--cg-text-5xl));
+  --cg-size-lead: clamp(var(--cg-text-lg), calc(0.9rem + 0.6vw), var(--cg-text-xl));
+
+  --cg-leading-display: 1.02;
+  --cg-leading-heading: 1.1;
+  --cg-leading-snug: 1.3;
+  --cg-leading-text: 1.62;
+
+  --cg-tracking-display: -0.022em;
+  --cg-tracking-heading: -0.014em;
+  --cg-tracking-label: 0.08em;
+
+  --cg-weight-light: 350;
   --cg-weight-regular: 400;
   --cg-weight-medium: 500;
   --cg-weight-semibold: 600;
-  --cg-weight-bold: 700;
 }
 
 /* --------------------------------------------------------------------------
-   Radius — deliberately sharper than a typical marketing template: a
-   consultancy or a software vendor reads as more serious with edges that
-   are structured rather than soft. `--cg-radius-pill` is the one rounded
-   shape this theme uses freely (the eyebrow tag, small badges) precisely
-   because everything else stays close to square.
+   Shape and motion: corners are square, and motion is a colour change.
    -------------------------------------------------------------------------- */
 
 :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.5);
-  --cg-radius-pill: 999rem;
-}
-
-/* --------------------------------------------------------------------------
-   Motion
-   -------------------------------------------------------------------------- */
+  --cg-radius: var(--cogenta-radius-sm);
+  --cg-radius-portrait: var(--cogenta-radius-md);
 
-: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-duration: min(var(--cogenta-motion-duration), 150ms);
   --cg-ease: var(--cogenta-motion-easing);
+
+  --cg-rule: 1px;
+  --cg-rule-strong: 2px;
 }
 
 /* --------------------------------------------------------------------------
-   Colour — one palette per scheme, both derived from the same seven tokens.
+   Colour: one palette per scheme, both derived from the same seven tokens.
    --------------------------------------------------------------------------
 
-   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 for the same reason `theme-canonical` guards 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:**
-
-   1. *Elevation is a hairline, almost everywhere.* Light mode expresses a
-      raised surface mostly as a **border**, reserving `box-shadow` for
-      genuine hover lift (a card, a service row). Dark mode keeps that same
-      restraint: elevation is a ring that steps *up* in lightness, never a
-      shadow — a shadow on ink conveys nothing.
-   2. *The accent is lifted less than a mechanical swap would allow, and
-      **desaturated** rather than just brightened.* A forest green pushed to
-      the same lightness a mechanical fix would pick reads as neon; this
-      palette lifts it to L 0.68 and pulls a third of its chroma back, which
-      is what makes it still read as "the same considered green" instead of
-      a highlighter.
-   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 — an off-white that still
-      belongs to this palette 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.
-
-   The hue and chroma of every dark value come from a skin token, so a skin
-   with a different accent gets a dark palette tuned the same way without
-   touching this file. Every ratio these values produce is computed for
-   real, from this file, by `test/design-system.test.ts`, in both schemes.
-
-   Known limit, same one `theme-canonical` records: the derivation assumes a
-   light-first skin (`bg` lighter than `fg`) — what contract D's default and
-   every blueprint use. A skin that starts dark would need a second colour
-   group in the contract, a `theme@2.0` change no single theme can make on
-   its own.
+   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 dark palette is designed, not inverted:
+
+   1. The ground is deep ink, derived from the skin's own `fg` hue, never a
+      neutral grey and never pure black. Surfaces step up in lightness
+      (sunken, canvas, raised); nothing casts a shadow.
+   2. Text is the paper colour, lifted: the ivory's own hue at a lower
+      lightness than white, so long reading on ink stays calm.
+   3. The accent is lifted and desaturated, and its foreground flips to ink.
+   4. Hairlines step up in lightness from the surface they sit on.
+   5. The ink band keeps its role (the one dark plane of a light page) by
+      becoming the raised ink surface, framed by hairlines.
+
+   Every ratio is computed from this file by `test/design-system.test.ts`,
+   in both schemes.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
@@ -198,27 +182,28 @@
   --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-ink-subtle: color-mix(in oklab, var(--cogenta-color-muted-fg) 88%, 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-accent-hover: 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);
+  --cg-line-soft: color-mix(in oklab, var(--cogenta-color-border) 60%, var(--cogenta-color-bg));
+  --cg-line-strong: color-mix(in oklab, var(--cogenta-color-border) 42%, var(--cogenta-color-fg));
+
+  --cg-band: var(--cogenta-color-fg);
+  --cg-band-ink: var(--cogenta-color-bg);
+  --cg-band-muted: color-mix(in oklab, var(--cogenta-color-bg) 74%, var(--cogenta-color-fg));
+  --cg-band-line: color-mix(in oklab, var(--cogenta-color-bg) 24%, var(--cogenta-color-fg));
+
+  --cg-action: var(--cogenta-color-fg);
+  --cg-action-fg: var(--cogenta-color-bg);
+  --cg-action-hover: var(--cogenta-color-accent);
+  --cg-action-hover-fg: var(--cogenta-color-accent-fg);
 }
 
 @supports (color: light-dark(currentColor, currentColor)) and
@@ -226,101 +211,86 @@
   :where(:root) {
     --cg-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.19 calc(c * 0.8) h)
     );
     --cg-surface: 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.19 calc(c * 0.8) h)
     );
     --cg-surface-raised: light-dark(
       var(--cogenta-color-bg),
-      oklch(from var(--cogenta-color-fg) 0.225 calc(c * 0.6) h)
+      oklch(from var(--cogenta-color-fg) 0.24 calc(c * 0.8) h)
     );
     --cg-surface-sunken: light-dark(
       var(--cogenta-color-muted),
-      oklch(from var(--cogenta-color-fg) 0.115 calc(c * 0.75) 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)
+      oklch(from var(--cogenta-color-fg) 0.16 calc(c * 0.8) h)
     );
 
-    --cg-ink: light-dark(
-      var(--cogenta-color-fg),
-      oklch(from var(--cogenta-color-accent) 0.93 0.01 h)
-    );
+    --cg-ink: light-dark(var(--cogenta-color-fg), oklch(from var(--cogenta-color-bg) 0.93 c h));
     --cg-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-bg) 0.79 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)
+      color-mix(in oklab, var(--cogenta-color-muted-fg) 88%, var(--cogenta-color-bg)),
+      oklch(from var(--cogenta-color-bg) 0.69 c h)
     );
 
     --cg-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.76 calc(c * 0.72) h)
     );
     --cg-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-accent) 0.18 calc(c * 0.5) 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)
-    );
-    --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)
+      oklch(from var(--cogenta-color-accent) 0.85 calc(c * 0.55) h)
     );
 
     --cg-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.33 calc(c * 0.8) 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)
+      color-mix(in oklab, var(--cogenta-color-border) 60%, var(--cogenta-color-bg)),
+      oklch(from var(--cogenta-color-fg) 0.27 calc(c * 0.8) 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)
+      color-mix(in oklab, var(--cogenta-color-border) 42%, var(--cogenta-color-fg)),
+      oklch(from var(--cogenta-color-fg) 0.55 calc(c * 0.6) h)
     );
-  }
-}
 
-/* --------------------------------------------------------------------------
-   Elevation — a hairline ring by default in both schemes; a real shadow is
-   spent only on hover, never on a resting surface. This is the theme's own
-   "structured, edged" answer to elevation, distinct from a shadow-first
-   system: a resting card looks like a plate on a desk, not a sticker
-   floating above the page.
-   -------------------------------------------------------------------------- */
-
-: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);
-}
+    --cg-band: light-dark(
+      var(--cogenta-color-fg),
+      oklch(from var(--cogenta-color-fg) 0.25 calc(c * 0.9) h)
+    );
+    --cg-band-ink: light-dark(
+      var(--cogenta-color-bg),
+      oklch(from var(--cogenta-color-bg) 0.95 c h)
+    );
+    --cg-band-muted: light-dark(
+      color-mix(in oklab, var(--cogenta-color-bg) 74%, var(--cogenta-color-fg)),
+      oklch(from var(--cogenta-color-bg) 0.8 c h)
+    );
+    --cg-band-line: light-dark(
+      color-mix(in oklab, var(--cogenta-color-bg) 24%, var(--cogenta-color-fg)),
+      oklch(from var(--cogenta-color-fg) 0.37 calc(c * 0.8) h)
+    );
 
-@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);
+    --cg-action: light-dark(var(--cogenta-color-fg), oklch(from var(--cogenta-color-bg) 0.93 c h));
+    --cg-action-fg: light-dark(
+      var(--cogenta-color-bg),
+      oklch(from var(--cogenta-color-fg) 0.19 calc(c * 0.8) h)
+    );
+    --cg-action-hover: light-dark(
+      var(--cogenta-color-accent),
+      oklch(from var(--cogenta-color-accent) 0.76 calc(c * 0.72) h)
+    );
+    --cg-action-hover-fg: light-dark(
+      var(--cogenta-color-accent-fg),
+      oklch(from var(--cogenta-color-accent) 0.18 calc(c * 0.5) h)
+    );
   }
 }
-
-:where(:root[data-theme="dark"]) {
-  --cg-elevation-2: var(--cg-ring-strong);
-  --cg-elevation-3: var(--cg-ring-strong), var(--cogenta-shadow-md);
-}