@cogenta/theme-portfolio 1.1.3 → 1.3.4

package/src/styles/theme.css

@@ -1,20 +1,32 @@
 /*
- * The portfolio theme's stylesheet — the entry point, and nothing else.
+ * `@cogenta/theme-portfolio`'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, section labels,
+ *                actions, header, footer, search, forms and comments
+ *   work.css     the work grid, the index, the strip, the project page
+ *   blocks.css   the other vocabulary blocks
+ *   archive.css  the taxonomy-term archive, set as the studio's index
+ *   widgets.css  the widget areas: the column beside an index, the bands
+ *                before and after the work, the footer columns
  *
- *   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.
+ * The one thing this file adds on its own is the Google Fonts request for
+ * Archivo with both of its axes: width (62 to 125, the display sizes are set
+ * wide) and weight. A skin only names a family; it never fetches one. The
+ * family falls back to a real system stack if Google Fonts is unreachable,
+ * and `display=swap` keeps text visible while it loads. `cogenta serve`
+ * hoists this `@import` above the skin's rules.
  */
 
+@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap");
+
 @import "./tokens.css";
 @import "./base.css";
+@import "./work.css";
 @import "./blocks.css";
 @import "./archive.css";
+@import "./widgets.css";

package/src/styles/tokens.css

@@ -1,35 +1,25 @@
 /*
- * The portfolio theme's design system.
+ * `@cogenta/theme-portfolio`'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, `clamp`). A skin swap rewrites the
- * generated `--cogenta-*` sheet and this whole system follows, with no build
- * step.
+ * The register is an independent design studio: black type on white paper,
+ * work shown large and square-cornered, one signal colour kept for a couple of
+ * details, and structure drawn with space and hairlines, never with boxes or
+ * shadows. One family, Archivo, does everything: its width axis sets the
+ * display sizes wide and calm, and the text sits at its regular width.
  *
- * 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).
  *
- * 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 colour or type scale.** The type steps come from
- *    `--cogenta-font-size-*` and the spacing multiplier from
- *    `--cogenta-space-scale`. The display headline sizes below (`--cg-text-
- *    hero`, `--cg-text-jumbo`, …) are `clamp()` *lengths*, not colours — the
- *    isolation rule is about colour, and a viewport-responsive headline scale
- *    is exactly the "risk-taking" this theme's brief asks for, tied to the
- *    same weight/tracking/leading tokens as the rest of the system.
+ * 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 scale. Type steps come from `--cogenta-font-size-*`; the
+ *    display steps above `3xl` continue the same ratio, and fluid sizes only
+ *    interpolate between steps of that one ladder.
  */
 
-/* Google Fonts — a real fallback stack accompanies every one, so the theme
-   degrades to a system stack rather than to invisible text when the network
-   is unavailable (`font-display: swap` is the default for this endpoint). */
-@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=JetBrains+Mono:wght@400;500;600&display=swap");
-
 :where(:root) {
-  /* Lets the browser paint native controls, scrollbars and form widgets in the
-     right scheme, and is what makes `light-dark()` below resolve at all. */
   color-scheme: light dark;
 }
 
@@ -42,7 +32,7 @@
 }
 
 /* --------------------------------------------------------------------------
-   Space
+   Space: one unit, one section rhythm, one twelve-column grid.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
@@ -63,156 +53,138 @@
   --cg-s24: calc(var(--cg-unit) * 24);
   --cg-s32: calc(var(--cg-unit) * 32);
 
-  --cg-gutter: var(--cg-s5);
-  --cg-gap-tight: var(--cg-s2);
-  --cg-gap: var(--cg-s4);
-  --cg-gap-loose: var(--cg-s10);
-  --cg-section-y: var(--cg-s24);
+  /* 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, whatever
+     their order. A studio page breathes: the step is long. */
+  --cg-section: clamp(var(--cg-s16), 9vw, var(--cg-s32));
+
+  /* Twelve columns with constant gutters, on a wide page: the work is shown
+     large. */
+  --cg-columns: 12;
+  --cg-gutter: clamp(var(--cg-s5), 3vw, var(--cg-s12));
+  --cg-col-gap: clamp(var(--cg-s4), 1.7vw, var(--cg-s8));
+  --cg-row-gap: clamp(var(--cg-s12), 6vw, var(--cg-s24));
+  --cg-page: 96rem;
+
+  --cg-measure: 64ch;
+  --cg-measure-short: 44ch;
+  --cg-header-height: 4.5rem;
+}
+
+:where([data-density="compact"]) {
+  --cg-density: 0.75;
+}
+
+:where([data-density="comfortable"]) {
+  --cg-density: 1;
+}
 
-  --cg-measure: 66ch;
-  --cg-measure-narrow: 44ch;
-  --cg-page: 84rem;
-  --cg-page-narrow: 52rem;
+:where([data-density="spacious"]) {
+  --cg-density: 1.25;
 }
 
 /* --------------------------------------------------------------------------
-   Type — the skin's scale, named, plus the display tier a portfolio's
-   headlines need. `renderSkin` only ever emits seven steps up to `3xl`; the
-   display tier is composed on top of `3xl` with `calc`, so a skin with a
-   flatter scale still produces a *bigger* display size than its own body
-   text, in proportion — never a fixed number disconnected from the skin.
+   Type: one family, two widths.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
-  --cg-text-xs: var(--cogenta-font-size-xs, 0.64rem);
-  --cg-text-sm: var(--cogenta-font-size-sm, 0.8rem);
-  --cg-text-md: var(--cogenta-font-size-md, var(--cogenta-font-base-size, 1rem));
-  --cg-text-lg: var(--cogenta-font-size-lg, 1.25rem);
-  --cg-text-xl: var(--cogenta-font-size-xl, 1.5625rem);
-  --cg-text-2xl: var(--cogenta-font-size-2xl, 1.9531rem);
-  --cg-text-3xl: var(--cogenta-font-size-3xl, 2.4414rem);
-
-  /* Fluid display tiers — clamped between a floor that still reads as
-     "headline" on a phone and a ceiling this theme's brief asks for outright
-     (8-12rem worth of visual weight once line-height and tracking are
-     applied). Each is anchored to `--cg-text-3xl` so a skin with a smaller
-     base type still gets a proportionally smaller, never a fixed, display
-     size. */
-  --cg-text-jumbo: clamp(calc(var(--cg-text-3xl) * 1.6), 11vw, calc(var(--cg-text-3xl) * 4.1));
-  --cg-text-hero: clamp(
-    calc(var(--cg-text-3xl) * 1.35),
-    7vw +
-    1rem,
-    calc(var(--cg-text-3xl) * 2.85)
+  --cg-font: var(--cogenta-font-sans);
+  --cg-font-code: var(--cogenta-font-mono);
+
+  /* Archivo's width axis runs from 62 to 125. The display sizes are set wide,
+     which calms a large line and gives it the proportions of a studio's
+     lettering; text and interface stay at the width the face was drawn for. */
+  --cg-width-text: 100%;
+  --cg-width-display: 112%;
+  --cg-width-wide: 125%;
+
+  --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));
+  --cg-text-7xl: calc(var(--cg-text-6xl) * var(--cogenta-font-scale, 1.25));
+
+  /* Captions and labels sit between `sm` and `md`. */
+  --cg-text-caption: calc((var(--cg-text-sm) + var(--cg-text-md)) / 2);
+  /* The reading size: `md` on a phone, a little above it on a desk. */
+  --cg-text-reading: clamp(
+    var(--cg-text-md),
+    calc(0.95rem + 0.22vw),
+    calc((var(--cg-text-md) * 3 + var(--cg-text-lg)) / 4)
   );
-  --cg-text-cta: clamp(
-    calc(var(--cg-text-3xl) * 1.1),
-    5vw +
-    0.5rem,
-    calc(var(--cg-text-3xl) * 1.95)
-  );
-  --cg-text-quote: clamp(
-    calc(var(--cg-text-3xl) * 0.85),
-    3vw +
-    0.75rem,
-    calc(var(--cg-text-3xl) * 1.35)
-  );
-  --cg-text-stat: clamp(
-    calc(var(--cg-text-3xl) * 0.95),
-    3.5vw +
-    0.5rem,
-    calc(var(--cg-text-3xl) * 1.7)
-  );
-
-  --cg-leading-tight: 1.02;
-  --cg-leading-snug: 1.15;
-  --cg-leading-normal: 1.5;
-  --cg-leading-relaxed: 1.68;
 
-  --cg-tracking-tighter: -0.035em;
-  --cg-tracking-tight: -0.02em;
-  --cg-tracking-snug: -0.01em;
-  --cg-tracking-normal: 0em;
-  --cg-tracking-wide: 0.09em;
-  --cg-tracking-wider: 0.16em;
+  --cg-size-statement: clamp(var(--cg-text-2xl), calc(0.75rem + 4.9vw), var(--cg-text-7xl));
+  --cg-size-title: clamp(var(--cg-text-3xl), calc(0.9rem + 4.6vw), var(--cg-text-7xl));
+  --cg-size-contact: clamp(var(--cg-text-xl), calc(0.6rem + 4.1vw), var(--cg-text-6xl));
+  --cg-size-lead: clamp(var(--cg-text-lg), calc(0.85rem + 1.05vw), var(--cg-text-2xl));
+  --cg-size-heading: clamp(var(--cg-text-lg), calc(0.9rem + 0.9vw), var(--cg-text-2xl));
+  --cg-size-figure: clamp(var(--cg-text-3xl), calc(1rem + 3.6vw), var(--cg-text-6xl));
+  --cg-size-work: clamp(var(--cg-text-md), calc(0.85rem + 0.45vw), var(--cg-text-lg));
+  --cg-size-nav: clamp(var(--cg-text-2xl), calc(1rem + 6vw), var(--cg-text-4xl));
+
+  --cg-leading-display: 1;
+  --cg-leading-title: 1.04;
+  --cg-leading-heading: 1.12;
+  --cg-leading-lead: 1.28;
+  --cg-leading-text: 1.58;
+  --cg-leading-ui: 1.4;
+
+  --cg-tracking-display: -0.024em;
+  --cg-tracking-heading: -0.012em;
+  --cg-tracking-caption: 0.005em;
 
   --cg-weight-regular: 400;
   --cg-weight-medium: 500;
   --cg-weight-semibold: 600;
-  --cg-weight-bold: 700;
-  --cg-weight-black: 800;
 }
 
 /* --------------------------------------------------------------------------
-   Radius — kept small and mostly square: a brutalist-editorial system draws
-   its softness from generous space and huge type, not from rounded corners.
+   Shape and motion: square corners, 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-pill: 999rem;
-}
+  --cg-radius: var(--cogenta-radius-sm);
+  --cg-radius-control: var(--cogenta-radius-sm);
 
-/* --------------------------------------------------------------------------
-   Motion
-   -------------------------------------------------------------------------- */
-
-:where(:root) {
-  --cg-duration-fast: calc(var(--cogenta-motion-duration) * 0.55);
-  --cg-duration: var(--cogenta-motion-duration);
-  --cg-duration-slow: calc(var(--cogenta-motion-duration) * 3.2);
+  --cg-duration: min(var(--cogenta-motion-duration), 150ms);
   --cg-ease: var(--cogenta-motion-easing);
+
+  --cg-rule: 1px;
+  --cg-rule-strong: 2px;
+  --cg-rule-heavy: 3px;
 }
 
 /* --------------------------------------------------------------------------
-   Colour — one palette per scheme, both derived from the same seven tokens.
+   Colour: black and white, and one signal.
    --------------------------------------------------------------------------
 
-   The block below declares the **light** palette in plain terms; the scheme
-   aware values live in the `@supports` block after it.
-
-   **The dark palette is designed, not inverted — this theme's own five
-   decisions, not a restatement of any other theme's:**
-
-   1. *Elevation changes colour, never shape (L25 D5, binding: no glow).* In
-      light, this is a brutalist system: a raised surface carries a hard,
-      unblurred offset shadow straight from the skin's own `shadow.sm`/
-      `shadow.md` tokens — a shape that reads as "cut paper laid on paper".
-      A near-black shadow is invisible on a dark ground, so dark elevation
-      keeps the *exact same* hard, zero-blur offset geometry and only
-      recolours it in `--cg-line-strong` — the same brighter-than-surface
-      line this palette already uses for depth (decision 5, below). An
-      earlier version of this system read that shadow as a soft accent glow
-      instead; that is precisely the generic "AI-generated" register the
-      product owner ruled out, so elevation now stays flat in both schemes.
-   2. *The accent is pushed toward neon, not merely lifted.* Dark ink makes a
-      mid-saturation accent read as merely "lighter"; this palette both lifts
-      *and* re-saturates it (`calc(c * 1.05)` against light mode's own
-      chroma), because a portfolio in dark mode is exactly the context an
-      "electric" accent is chosen for in the first place.
-   3. *The accent foreground follows, ink-dark and warmed by the same hue*, so
-      a button never reads as a light chip pasted onto a light accent.
-   4. *Text carries the accent's own warmth, not a neutral grey.* Ink in dark
-      mode is not merely "off white" — its hue is drawn from the accent, so
-      the whole dark page reads as one lit surface rather than white text
-      dropped onto an unrelated background.
-   5. *Borders in dark mode are drawn brighter than the surface they outline*,
-      because this system replaces shadow-as-depth with line-as-depth in dark
-      mode (decision 1) — the border is doing elevation's job, so it has to be
-      visible on its own, not merely "a shade darker than the panel".
-
-   Every ratio below is computed for real, from this file, by
-   `test/design-system.test.ts` — in both schemes, against the AA body
-   threshold.
-
-   Known limit, matching the same one `theme-canonical` records: the
-   derivation assumes a light-first skin (`bg` lighter than `fg`), which is
-   contract D's default and every current blueprint. A skin that is already
-   dark would need a second colour group in the contract — a `theme@2.0`
-   bump, not a change this 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 signal (the skin's accent) is for details only: the underline of the
+   contact line, the focus ring, a selection. It is never a text colour at the
+   text size, which is why no pair below sets small text in it.
+
+   The dark palette is designed, not inverted:
+
+   1. The ground is true black, the way a studio shows work on a screen, and
+      the few raised surfaces step up in lightness from it.
+   2. Type is white lowered a step, so a long case study stays calm.
+   3. The signal is kept exactly: it was chosen to hold on black and white.
+   4. Hairlines are a step up in lightness from black.
+   5. A mark drawn for paper keeps a light plate, so no logo disappears.
+
+   Every ratio is computed from this file by `test/design-system.test.ts`,
+   in both schemes.
    -------------------------------------------------------------------------- */
 
 :where(:root) {
@@ -220,144 +192,94 @@
   --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) 9%, var(--cogenta-color-bg));
-  --cg-surface-inverted: var(--cogenta-color-fg);
-  --cg-surface-inverted-fg: var(--cogenta-color-bg);
+  --cg-plate: var(--cogenta-color-muted);
 
   --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) 86%, 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) 88%, var(--cogenta-color-fg));
-  --cg-accent-soft: color-mix(in oklab, var(--cogenta-color-accent) 11%, var(--cogenta-color-bg));
-  --cg-accent-soft-fg: color-mix(
-    in oklab,
-    var(--cogenta-color-accent) 70%,
-    var(--cogenta-color-fg)
-  );
+  --cg-ink-subtle: color-mix(in oklab, var(--cogenta-color-muted-fg) 88%, var(--cogenta-color-bg));
+  --cg-plate-ink: var(--cogenta-color-fg);
+
+  --cg-signal: var(--cogenta-color-accent);
+  --cg-signal-fg: var(--cogenta-color-accent-fg);
 
   --cg-line: var(--cogenta-color-border);
-  --cg-line-soft: color-mix(in oklab, var(--cogenta-color-border) 55%, var(--cogenta-color-bg));
-  --cg-line-strong: color-mix(in oklab, var(--cogenta-color-border) 60%, var(--cogenta-color-fg));
+  --cg-line-strong: color-mix(in oklab, var(--cogenta-color-border) 45%, var(--cogenta-color-fg));
+  --cg-line-ink: var(--cogenta-color-fg);
+
+  --cg-action: var(--cogenta-color-fg);
+  --cg-action-fg: var(--cogenta-color-bg);
+  --cg-action-hover: color-mix(in oklab, var(--cogenta-color-fg) 78%, var(--cogenta-color-bg));
+  --cg-action-hover-fg: var(--cogenta-color-bg);
 
-  --cg-scrim: color-mix(in oklab, var(--cogenta-color-fg) 64%, transparent);
+  --cg-image-brightness: 1;
 }
 
 @supports (color: light-dark(currentColor, currentColor)) and
   (color: oklch(from currentColor l c h)) {
   :where(:root) {
-    --cg-canvas: light-dark(
-      var(--cogenta-color-bg),
-      oklch(from var(--cogenta-color-fg) 0.155 calc(c * 0.65) h)
-    );
-    --cg-surface: light-dark(
-      var(--cogenta-color-bg),
-      oklch(from var(--cogenta-color-fg) 0.195 calc(c * 0.6) h)
-    );
+    --cg-canvas: light-dark(var(--cogenta-color-bg), oklch(from var(--cogenta-color-fg) 0 0 h));
+    --cg-surface: light-dark(var(--cogenta-color-bg), oklch(from var(--cogenta-color-fg) 0 0 h));
     --cg-surface-raised: light-dark(
       var(--cogenta-color-bg),
-      oklch(from var(--cogenta-color-fg) 0.24 calc(c * 0.52) h)
+      oklch(from var(--cogenta-color-fg) 0.19 c h)
     );
     --cg-surface-sunken: light-dark(
       var(--cogenta-color-muted),
-      oklch(from var(--cogenta-color-fg) 0.12 calc(c * 0.75) h)
-    );
-    --cg-surface-tinted: light-dark(
-      color-mix(in oklab, var(--cogenta-color-accent) 9%, var(--cogenta-color-bg)),
-      oklch(from var(--cogenta-color-accent) 0.24 calc(c * 0.48) h)
-    );
-    --cg-surface-inverted: light-dark(
-      var(--cogenta-color-fg),
-      oklch(from var(--cogenta-color-bg) 0.94 calc(c * 0.4) h)
+      oklch(from var(--cogenta-color-fg) 0.16 c h)
     );
-    --cg-surface-inverted-fg: light-dark(
-      var(--cogenta-color-bg),
-      oklch(from var(--cogenta-color-fg) 0.14 calc(c * 0.5) h)
+    --cg-plate: light-dark(
+      var(--cogenta-color-muted),
+      oklch(from var(--cogenta-color-muted) 0.94 c h)
     );
 
-    --cg-ink: light-dark(
-      var(--cogenta-color-fg),
-      oklch(from var(--cogenta-color-accent) 0.93 0.018 h)
-    );
+    --cg-ink: light-dark(var(--cogenta-color-fg), oklch(from var(--cogenta-color-bg) 0.96 c h));
     --cg-ink-muted: light-dark(
       var(--cogenta-color-muted-fg),
-      oklch(from var(--cogenta-color-accent) 0.76 0.024 h)
+      oklch(from var(--cogenta-color-muted) 0.78 c h)
     );
     --cg-ink-subtle: light-dark(
-      color-mix(in oklab, var(--cogenta-color-muted-fg) 86%, var(--cogenta-color-bg)),
-      oklch(from var(--cogenta-color-accent) 0.65 0.02 h)
-    );
-
-    --cg-accent: light-dark(
-      var(--cogenta-color-accent),
-      oklch(from var(--cogenta-color-accent) 0.78 calc(c * 1.05) h)
-    );
-    --cg-accent-fg: light-dark(
-      var(--cogenta-color-accent-fg),
-      oklch(from var(--cogenta-color-accent) 0.16 calc(c * 0.6) h)
+      color-mix(in oklab, var(--cogenta-color-muted-fg) 88%, var(--cogenta-color-bg)),
+      oklch(from var(--cogenta-color-muted) 0.7 c h)
     );
-    --cg-accent-hover: light-dark(
-      color-mix(in oklab, var(--cogenta-color-accent) 88%, var(--cogenta-color-fg)),
-      oklch(from var(--cogenta-color-accent) 0.87 calc(c * 0.95) h)
-    );
-    --cg-accent-soft: light-dark(
-      color-mix(in oklab, var(--cogenta-color-accent) 11%, var(--cogenta-color-bg)),
-      oklch(from var(--cogenta-color-accent) 0.32 calc(c * 0.55) h)
+    --cg-plate-ink: light-dark(
+      var(--cogenta-color-fg),
+      oklch(from var(--cogenta-color-fg) 0.18 c 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.92 calc(c * 0.5) h)
+
+    --cg-signal: light-dark(var(--cogenta-color-accent), var(--cogenta-color-accent));
+    --cg-signal-fg: light-dark(var(--cogenta-color-accent-fg), var(--cogenta-color-accent-fg));
+
+    --cg-line: light-dark(var(--cogenta-color-border), oklch(from var(--cogenta-color-fg) 0.3 c h));
+    --cg-line-strong: light-dark(
+      color-mix(in oklab, var(--cogenta-color-border) 45%, var(--cogenta-color-fg)),
+      oklch(from var(--cogenta-color-fg) 0.52 c h)
     );
-    --cg-line: light-dark(
-      var(--cogenta-color-border),
-      oklch(from var(--cogenta-color-accent) 0.4 calc(c * 0.24) h)
+    --cg-line-ink: light-dark(
+      var(--cogenta-color-fg),
+      oklch(from var(--cogenta-color-bg) 0.96 c h)
     );
-    --cg-line-soft: light-dark(
-      color-mix(in oklab, var(--cogenta-color-border) 55%, var(--cogenta-color-bg)),
-      oklch(from var(--cogenta-color-accent) 0.3 calc(c * 0.22) h)
+
+    --cg-action: light-dark(var(--cogenta-color-fg), oklch(from var(--cogenta-color-bg) 0.96 c h));
+    --cg-action-fg: light-dark(var(--cogenta-color-bg), oklch(from var(--cogenta-color-fg) 0 0 h));
+    --cg-action-hover: light-dark(
+      color-mix(in oklab, var(--cogenta-color-fg) 78%, var(--cogenta-color-bg)),
+      oklch(from var(--cogenta-color-bg) 0.82 c 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.62 calc(c * 0.28) h)
+    --cg-action-hover-fg: light-dark(
+      var(--cogenta-color-bg),
+      oklch(from var(--cogenta-color-fg) 0 0 h)
     );
   }
 }
 
-/* --------------------------------------------------------------------------
-   Elevation — a hard, zero-blur offset shadow in both schemes (L25 D5,
-   binding: "never glows"). Light reads it in the skin's own near-black
-   `--cogenta-shadow-sm`/`-md`; dark cannot reuse those (a near-black shadow
-   is invisible on a near-black surface), so it draws the *same* offset
-   geometry in `--cg-line-strong` instead — the brighter-than-surface line
-   colour this file already uses to do elevation's job in dark mode (see the
-   colour system's own decision 5, above). Two literal card corners stacking
-   behind one another, never a halo: this replaces what used to be an
-   accent-tinted `blur()` glow, which is exactly the "100% AI" look the
-   product owner ruled out.
-   -------------------------------------------------------------------------- */
-
-:where(:root) {
-  --cg-ring: inset 0 0 0 1px var(--cg-line);
-  --cg-ring-accent: inset 0 0 0 1px var(--cg-accent);
-
-  --cg-elevation-0: none;
-  --cg-elevation-1: var(--cogenta-shadow-sm);
-  --cg-elevation-2: var(--cogenta-shadow-md);
-  --cg-elevation-3: var(--cogenta-shadow-md), var(--cg-ring);
-}
-
+/* Work on black is dimmed a very little, so a white page in a picture does not
+   glare in a dark room. A brightness step, not a blur. */
 @media (prefers-color-scheme: dark) {
   :where(:root:not([data-theme="light"])) {
-    --cg-elevation-1: var(--cg-ring), 0.125rem 0.125rem 0 var(--cg-line-strong);
-    --cg-elevation-2: var(--cg-ring), 0.25rem 0.25rem 0 var(--cg-line-strong);
-    --cg-elevation-3: var(--cg-ring), 0.4rem 0.4rem 0 var(--cg-line-strong);
+    --cg-image-brightness: 0.92;
   }
 }
 
 :where(:root[data-theme="dark"]) {
-  --cg-elevation-1: var(--cg-ring), 0.125rem 0.125rem 0 var(--cg-line-strong);
-  --cg-elevation-2: var(--cg-ring), 0.25rem 0.25rem 0 var(--cg-line-strong);
-  --cg-elevation-3: var(--cg-ring), 0.4rem 0.4rem 0 var(--cg-line-strong);
+  --cg-image-brightness: 0.92;
 }