@mdxui/named 8.0.0 → 8.2.0

package/dist/styles.css

@@ -141,49 +141,42 @@
        copy of named-agents app/globals.css :root (LIGHT / cream).
    ────────────────────────────────────────────────────────────────── */
 [data-dialect='named'] {
-  /* ---- neo shared tokens, re-pointed to the cream baseline ----------- */
-  /* surfaces */
-  --background: oklch(0.945 0.01 95); /* baseline --color-surface */
-  --foreground: oklch(0.18 0.008 80); /* baseline --color-fg */
-  --card: oklch(0.975 0.005 95); /* baseline --color-surface-raised */
-  --card-foreground: oklch(0.18 0.008 80);
-  --popover: oklch(0.975 0.005 95);
-  --popover-foreground: oklch(0.18 0.008 80);
-  --muted: oklch(0.91 0.012 95); /* baseline --color-surface-sunken */
-  --muted-foreground: oklch(0.46 0.012 80); /* baseline --color-fg-muted */
-  /* primary CTA — neutral ink gradient endpoints collapse to the dark end */
-  --primary: oklch(0.06 0 0); /* baseline --color-btn-primary-to */
-  --primary-foreground: oklch(0.995 0.005 80); /* --color-btn-primary-fg */
-  --secondary: oklch(0.975 0.005 95);
-  --secondary-foreground: oklch(0.18 0.008 80);
-  --accent: oklch(0.81 0.11 45); /* baseline persimmon --color-accent */
-  --accent-foreground: oklch(0.18 0.008 80);
-  --border: oklch(0.18 0.008 80 / 0.1); /* baseline --color-border */
-  --input: oklch(0.18 0.008 80 / 0.1);
-  --ring: oklch(0.18 0.008 80 / 0.35); /* baseline --color-ring */
-  --destructive: oklch(0.58 0.18 25);
-  --destructive-foreground: oklch(0.995 0.005 80);
-
-  /* ---- baseline semantic layer (verbatim from globals.css :root) ----- */
-  --color-surface: oklch(0.945 0.01 95);
-  --color-surface-raised: oklch(0.975 0.005 95);
-  --color-surface-sunken: oklch(0.91 0.012 95);
-
-  --color-fg: oklch(0.18 0.008 80);
-  --color-fg-soft: oklch(0.32 0.01 80);
-  --color-fg-muted: oklch(0.46 0.012 80);
-
-  --color-border: oklch(0.18 0.008 80 / 0.1);
-  --color-border-strong: oklch(0.18 0.008 80 / 0.25);
-  --color-ring: oklch(0.18 0.008 80 / 0.35);
-  --color-hover: oklch(0.18 0.008 80 / 0.06);
-
-  --color-btn-primary-from: oklch(0.315 0.008 250);
-  --color-btn-primary-to: oklch(0.06 0 0);
-  --color-btn-primary-fg: oklch(0.995 0.005 80);
-
-  --color-destructive: oklch(0.58 0.18 25);
-  --color-destructive-fg: oklch(0.995 0.005 80);
+  /* ════ THEME DERIVATION ══════════════════════════════════════════════
+     The neo shared names (--background, --primary, …) are NOT re-declared
+     here anymore: they inherit from the host theme preset that <Site>
+     (DialectShell) sets on its wrapper, so swapping the preset repaints the
+     named subtree. The semantic layer below derives from them, with the
+     cream-baseline literals as var() fallbacks — a host that mounts the
+     named arc with no theme CSS at all still renders the baseline.
+
+     PAIR RULE: whenever a derivation adjusts one half of a contrast pair
+     (clamping a field, lifting type), the partner must be re-derived with
+     it — never keep the preset's pairing against an adjusted value. */
+
+  /* ---- baseline semantic layer, derived from the preset --------------- */
+  --color-surface: var(--background, oklch(0.945 0.01 95));
+  --color-surface-raised: var(--card, oklch(0.975 0.005 95));
+  --color-surface-sunken: var(--muted, oklch(0.91 0.012 95));
+
+  --color-fg: var(--foreground, oklch(0.18 0.008 80));
+  --color-fg-soft: color-mix(in oklab, var(--color-fg) 60%, var(--color-fg-muted));
+  --color-fg-muted: var(--muted-foreground, oklch(0.46 0.012 80));
+
+  /* hairlines: always ink-at-alpha so the rules read on any palette */
+  --color-border: color-mix(in oklab, var(--color-fg) 10%, transparent);
+  --color-border-strong: color-mix(in oklab, var(--color-fg) 25%, transparent);
+  --color-ring: color-mix(in oklab, var(--color-fg) 35%, transparent);
+  --color-hover: color-mix(in oklab, var(--color-fg) 6%, transparent);
+
+  /* primary CTA gradient: the preset primary, top endpoint lifted a step
+     (the baseline's graphite→ink read). Text keeps the preset's pairing —
+     the bottom endpoint IS the raw primary. */
+  --color-btn-primary-from: oklch(from var(--primary, oklch(0.06 0 0)) calc(l + 0.12) c h);
+  --color-btn-primary-to: var(--primary, oklch(0.06 0 0));
+  --color-btn-primary-fg: var(--primary-foreground, oklch(0.995 0.005 80));
+
+  --color-destructive: var(--destructive, oklch(0.58 0.18 25));
+  --color-destructive-fg: var(--destructive-foreground, oklch(0.995 0.005 80));
 
   /* ---- baseline hue library + persona accent (Priya = persimmon) ----- */
   --hue-teal-soft: oklch(0.95 0.04 210);
@@ -206,10 +199,34 @@
   --hue-purple-medium: oklch(0.86 0.045 314);
   --hue-purple-strong: oklch(0.63 0.065 314);
 
-  --color-accent-soft: var(--hue-orange-soft);
-  --color-accent: var(--hue-orange-medium);
-  --color-accent-strong: var(--hue-orange-strong);
-  --color-accent-fg: oklch(0.18 0.008 80);
+  /* Persona accent: derived from the preset primary in the baseline's
+     pastel register (soft chip → medium badge → strong mark). Unthemed
+     hosts fall back to the baseline persimmon. accent-fg pairs with
+     accent-strong (= the RAW primary — the Button `accent` variant is its
+     one consumer), so it rides the preset's own contrast partner. */
+  --color-accent-soft: color-mix(in oklab, var(--primary, var(--hue-orange-medium)) 18%, var(--color-surface));
+  --color-accent: color-mix(in oklab, var(--primary, var(--hue-orange-medium)) 45%, var(--color-surface));
+  --color-accent-strong: var(--primary, var(--hue-orange-strong));
+  --color-accent-fg: var(--primary-foreground, oklch(0.18 0.008 80));
+
+  /* Footer — the ink closing band (baseline bg-[#111011]): derived from the
+     theme's ink so the band follows the palette; the page surface is the
+     on-band type color (the theme's fg/bg pair guarantees contrast both
+     ways). The dark block re-derives the pair — the band stays a step
+     deeper than the walls instead of inverting (the bookend is ink in both
+     modes; that's the studio signature). */
+  --color-footer: color-mix(in oklab, var(--color-fg) 97%, var(--color-surface));
+  --color-footer-fg: var(--color-surface);
+
+  /* Code panels (the shared CodeWindow ground; studio + executive read
+     these, gallery has its vitrine) — derived from the theme's ink instead
+     of the old literal #0d1117 github-dark ground, which is a BLUE-hued
+     black (~hue 250) and read blue against the warm/themed surfaces in
+     both modes. Same model as the footer band: the theme's ink by day, a
+     step deeper than the walls after dark — the panel stays dark in both
+     modes (shiki's dark token palette needs the dark ground). */
+  --color-code: color-mix(in oklab, var(--color-fg) 96%, var(--color-surface));
+  --color-code-fg: var(--color-surface);
 
   /* ---- baseline radii (62d6f04) ------------------------------------- */
   --radius-section: 36px; /* large section containers */
@@ -297,48 +314,21 @@ html:has([data-dialect='named']) {
    ────────────────────────────────────────────────────────────────── */
 .dark [data-dialect='named'],
 [data-dialect='named'].dark {
-  /* ---- neo shared tokens, re-pointed to the dark baseline ----------- */
-  --background: oklch(0.155 0.005 60); /* baseline dark --color-surface */
-  --foreground: oklch(0.94 0.008 80); /* baseline dark --color-fg */
-  --card: oklch(0.23 0.008 60); /* baseline dark --color-surface-raised */
-  --card-foreground: oklch(0.94 0.008 80);
-  --popover: oklch(0.23 0.008 60);
-  --popover-foreground: oklch(0.94 0.008 80);
-  --muted: oklch(0.105 0.003 60); /* baseline dark --color-surface-sunken */
-  --muted-foreground: oklch(0.7 0.012 80); /* baseline dark --color-fg-muted */
-  /* primary CTA inverts to cream-on-dark (baseline dark --color-btn-primary-*) */
-  --primary: oklch(0.87 0.01 80);
-  --primary-foreground: oklch(0.18 0.005 60);
-  --secondary: oklch(0.23 0.008 60);
-  --secondary-foreground: oklch(0.94 0.008 80);
-  --accent: oklch(0.335 0.09 45); /* dark persimmon --hue-orange-medium */
-  --accent-foreground: oklch(0.18 0.008 80);
-  --border: oklch(0.94 0.008 80 / 0.12);
-  --input: oklch(0.94 0.008 80 / 0.12);
-  --ring: oklch(0.94 0.008 80 / 0.4);
-  --destructive: oklch(0.64 0.18 25);
-  --destructive-foreground: oklch(0.18 0.005 60);
-
-  /* ---- baseline semantic layer (verbatim from globals.css .dark) ----- */
-  --color-surface: oklch(0.155 0.005 60);
-  --color-surface-raised: oklch(0.23 0.008 60);
-  --color-surface-sunken: oklch(0.105 0.003 60);
-
-  --color-fg: oklch(0.94 0.008 80);
-  --color-fg-soft: oklch(0.82 0.01 80);
-  --color-fg-muted: oklch(0.7 0.012 80);
-
-  --color-border: oklch(0.94 0.008 80 / 0.12);
-  --color-border-strong: oklch(0.94 0.008 80 / 0.25);
-  --color-ring: oklch(0.94 0.008 80 / 0.4);
-  --color-hover: oklch(0.94 0.008 80 / 0.08);
-
-  --color-btn-primary-from: oklch(0.945 0.008 80);
-  --color-btn-primary-to: oklch(0.87 0.01 80);
-  --color-btn-primary-fg: oklch(0.18 0.005 60);
-
-  --color-destructive: oklch(0.64 0.18 25);
-  --color-destructive-fg: oklch(0.18 0.005 60);
+  /* With the shared names inherited, the preset's own .dark values flow
+     through every derivation in the light block — surfaces, ink, hairlines,
+     the CTA gradient, and the accent trio all flip for free. Only the hue
+     library below needs dark values (it stays template-owned literal). */
+
+  /* Footer: the ink band does NOT invert after dark — it re-derives a step
+     deeper than the walls (derived from the wall's own lightness; preset
+     --muted can sit ABOVE a dark background, so it can't anchor "deeper"). */
+  --color-footer: oklch(from var(--color-surface) calc(l * 0.72) c h);
+  --color-footer-fg: var(--color-fg);
+
+  /* Code panels after dark: a step deeper than the walls, type in the
+     room's ink (re-paired, same as the footer band). */
+  --color-code: oklch(from var(--color-surface) calc(l * 0.72) c h);
+  --color-code-fg: var(--color-fg);
 
   /* ---- hue library, dark values (hue angles preserved) --------------- */
   --hue-teal-soft: oklch(0.245 0.025 210);
@@ -362,28 +352,6 @@ html:has([data-dialect='named']) {
   --hue-purple-strong: oklch(0.73 0.125 314);
 }
 
-/* Dark variants for the scoped utilities that bake literal light-ink values
-   (everything var()-driven above flips automatically). */
-.dark [data-dialect='named'] .text-foreground\/70,
-[data-dialect='named'].dark .text-foreground\/70 {
-  color: oklch(0.94 0.008 80 / 0.7);
-}
-.dark [data-dialect='named'] .text-foreground\/60,
-[data-dialect='named'].dark .text-foreground\/60 {
-  color: oklch(0.94 0.008 80 / 0.6);
-}
-.dark [data-dialect='named'] .bg-primary\/10,
-[data-dialect='named'].dark .bg-primary\/10 {
-  background-color: oklch(0.87 0.01 80 / 0.1);
-}
-.dark [data-dialect='named'] .fill-muted-foreground\/20,
-[data-dialect='named'].dark .fill-muted-foreground\/20 {
-  fill: oklch(0.7 0.012 80 / 0.2);
-}
-.dark [data-dialect='named'] .stroke-muted-foreground\/20,
-[data-dialect='named'].dark .stroke-muted-foreground\/20 {
-  stroke: oklch(0.7 0.012 80 / 0.2);
-}
 /* Baseline `.dark .integration-square-shadow` (globals.css) */
 .dark [data-dialect='named'] .integration-square-shadow,
 [data-dialect='named'].dark .integration-square-shadow {
@@ -428,7 +396,7 @@ html:has([data-dialect='named']) {
   background-color: var(--color-btn-primary-to);
 }
 [data-dialect='named'] .bg-primary\/10 {
-  background-color: oklch(0.06 0 0 / 0.1);
+  background-color: color-mix(in oklab, var(--color-btn-primary-to) 10%, transparent);
 }
 
 /* —— Text colors —————————————————————————————————————————————————— */
@@ -436,10 +404,10 @@ html:has([data-dialect='named']) {
   color: var(--color-fg);
 }
 [data-dialect='named'] .text-foreground\/70 {
-  color: oklch(0.18 0.008 80 / 0.7);
+  color: color-mix(in oklab, var(--color-fg) 70%, transparent);
 }
 [data-dialect='named'] .text-foreground\/60 {
-  color: oklch(0.18 0.008 80 / 0.6);
+  color: color-mix(in oklab, var(--color-fg) 60%, transparent);
 }
 [data-dialect='named'] .text-muted-foreground {
   color: var(--color-fg-muted);
@@ -461,10 +429,10 @@ html:has([data-dialect='named']) {
 
 /* —— Fills / strokes (svg accents that read muted-foreground) ———————— */
 [data-dialect='named'] .fill-muted-foreground\/20 {
-  fill: oklch(0.46 0.012 80 / 0.2);
+  fill: color-mix(in oklab, var(--color-fg-muted) 20%, transparent);
 }
 [data-dialect='named'] .stroke-muted-foreground\/20 {
-  stroke: oklch(0.46 0.012 80 / 0.2);
+  stroke: color-mix(in oklab, var(--color-fg-muted) 20%, transparent);
 }
 
 /* —— Custom utilities the baseline markup relies on ———————————————— */
@@ -617,62 +585,52 @@ html:has([data-dialect='named']) {
 }
 
 [data-dialect='named'][data-template='executive'] {
-  /* ---- semantic layer — Ledger Paper ---------------------------------- */
-  /* surfaces: cool paper (hue 250, whisper of chroma — never #fff) */
-  --color-surface: oklch(0.975 0.004 250);
-  --color-surface-raised: oklch(0.99 0.003 250);
-  --color-surface-sunken: oklch(0.952 0.005 250);
-
-  /* ink: graphite, cool */
-  --color-fg: oklch(0.21 0.012 255);
-  --color-fg-soft: oklch(0.34 0.012 255);
-  --color-fg-muted: oklch(0.47 0.012 255);
-
-  /* hairline rules — the structural language */
-  --color-border: oklch(0.21 0.012 255 / 0.16);
-  --color-border-strong: oklch(0.21 0.012 255 / 0.45);
-  --color-ring: oklch(0.21 0.012 255 / 0.4);
-  --color-hover: oklch(0.21 0.012 255 / 0.04);
-
-  /* the one accent: oxblood — in TWO roles. `field` paints large surfaces
-     (the cover, the featured tier); `strong` is red TYPE and small marks
-     (numerals, squares). In light they share one value; dark splits them —
-     fields must stay deep (rich burgundy on ink), type must lift to stay
-     legible. Lifting a large field is what reads muddy-salmon. */
-  --color-accent-field: oklch(0.42 0.13 20);
-  --color-accent-strong: oklch(0.42 0.13 20);
-  --color-accent: oklch(0.49 0.12 20);
-  --color-accent-soft: oklch(0.93 0.02 20);
-  --color-accent-fg: oklch(0.985 0.004 250);
-
-  /* primary button: solid oxblood (the studio gradient collapses flat) */
-  --color-btn-primary-from: oklch(0.42 0.13 20);
-  --color-btn-primary-to: oklch(0.42 0.13 20);
-  --color-btn-primary-fg: oklch(0.985 0.004 250);
-
-  --color-destructive: oklch(0.58 0.18 25);
-  --color-destructive-fg: oklch(0.985 0.004 250);
-
-  /* ---- neo shared names, re-pointed (keeps shared primitives correct) -- */
-  --background: oklch(0.975 0.004 250);
-  --foreground: oklch(0.21 0.012 255);
-  --card: oklch(0.99 0.003 250);
-  --card-foreground: oklch(0.21 0.012 255);
-  --popover: oklch(0.99 0.003 250);
-  --popover-foreground: oklch(0.21 0.012 255);
-  --muted: oklch(0.952 0.005 250);
-  --muted-foreground: oklch(0.47 0.012 255);
-  --primary: oklch(0.42 0.13 20);
-  --primary-foreground: oklch(0.985 0.004 250);
-  --secondary: oklch(0.952 0.005 250);
-  --secondary-foreground: oklch(0.21 0.012 255);
-  --accent: oklch(0.49 0.12 20);
-  --accent-foreground: oklch(0.985 0.004 250);
-  --border: oklch(0.21 0.012 255 / 0.16);
-  --input: oklch(0.21 0.012 255 / 0.16);
-  --ring: oklch(0.21 0.012 255 / 0.4);
-  --destructive: oklch(0.58 0.18 25);
-  --destructive-foreground: oklch(0.985 0.004 250);
+  /* ════ THEME DERIVATION ══════════════════════════════════════════════
+     Like studio/gallery: the neo shared names inherit from the host preset
+     (<Site>'s wrapper — studio's block no longer re-points them), and the
+     executive semantic layer derives from them. The hairline language
+     survives as foreground-at-alpha mixes; the one-accent language maps
+     onto the preset's --primary/--primary-foreground contrast pair.
+     Geometry (2px corners, zero shadows) and the Anton masthead stay
+     template identity and do NOT follow the theme.
+
+     PAIR RULE: whenever a derivation adjusts one half of a contrast pair,
+     the partner is re-derived with it (see the dark block). */
+
+  /* ---- semantic layer — derived from the preset ------------------------ */
+  /* surfaces (fallbacks: Ledger Paper, for hosts with no theme CSS) */
+  --color-surface: var(--background, oklch(0.975 0.004 250));
+  --color-surface-raised: var(--card, oklch(0.99 0.003 250));
+  --color-surface-sunken: var(--muted, oklch(0.952 0.005 250));
+
+  /* ink */
+  --color-fg: var(--foreground, oklch(0.21 0.012 255));
+  --color-fg-soft: color-mix(in oklab, var(--color-fg) 55%, var(--color-fg-muted));
+  --color-fg-muted: var(--muted-foreground, oklch(0.47 0.012 255));
+
+  /* hairline rules — the structural language: always ink-at-alpha, never the
+     preset's solid --border (a solid border kills the ledger hairline read) */
+  --color-border: color-mix(in oklab, var(--color-fg) 16%, transparent);
+  --color-border-strong: color-mix(in oklab, var(--color-fg) 45%, transparent);
+  --color-ring: color-mix(in oklab, var(--color-fg) 40%, transparent);
+  --color-hover: color-mix(in oklab, var(--color-fg) 4%, transparent);
+
+  /* the one accent — in TWO roles (`field` paints large surfaces, `strong`
+     is accent TYPE and small marks). Both map onto the preset's primary
+     pair (fallback: oxblood); the dark block splits them. */
+  --color-accent-field: var(--primary, oklch(0.42 0.13 20));
+  --color-accent-strong: var(--primary, oklch(0.42 0.13 20));
+  --color-accent: oklch(from var(--primary, oklch(0.49 0.12 20)) calc(l + 0.07) c h);
+  --color-accent-soft: color-mix(in oklab, var(--primary, oklch(0.42 0.13 20)) 12%, var(--color-surface));
+  --color-accent-fg: var(--primary-foreground, oklch(0.985 0.004 250));
+
+  /* primary button: solid accent (the studio gradient collapses flat) */
+  --color-btn-primary-from: var(--primary, oklch(0.42 0.13 20));
+  --color-btn-primary-to: var(--primary, oklch(0.42 0.13 20));
+  --color-btn-primary-fg: var(--primary-foreground, oklch(0.985 0.004 250));
+
+  --color-destructive: var(--destructive, oklch(0.58 0.18 25));
+  --color-destructive-fg: var(--destructive-foreground, oklch(0.985 0.004 250));
 
   /* ---- geometry: square document corners, flat surfaces ---------------- */
   /* 2px everywhere a radius utility appears (--radius anchors the host's
@@ -724,55 +682,26 @@ html:has([data-dialect='named']) {
    ────────────────────────────────────────────────────────────────── */
 .dark [data-dialect='named'][data-template='executive'],
 [data-dialect='named'][data-template='executive'].dark {
-  /* ---- semantic layer — ink paper ------------------------------------- */
-  --color-surface: oklch(0.16 0.01 255);
-  --color-surface-raised: oklch(0.205 0.012 255);
-  --color-surface-sunken: oklch(0.125 0.008 255);
-
-  --color-fg: oklch(0.945 0.005 250);
-  --color-fg-soft: oklch(0.84 0.006 250);
-  --color-fg-muted: oklch(0.67 0.008 250);
-
-  --color-border: oklch(0.945 0.005 250 / 0.15);
-  --color-border-strong: oklch(0.945 0.005 250 / 0.45);
-  --color-ring: oklch(0.945 0.005 250 / 0.4);
-  --color-hover: oklch(0.945 0.005 250 / 0.06);
-
-  /* oxblood splits by role on ink: FIELDS stay deep (rich burgundy — a
-     lifted large field reads muddy salmon), TYPE lifts to stay legible. */
-  --color-accent-field: oklch(0.37 0.115 20);
-  --color-accent-strong: oklch(0.62 0.16 24);
-  --color-accent: oklch(0.68 0.15 26);
-  --color-accent-soft: oklch(0.28 0.06 20);
-  --color-accent-fg: oklch(0.975 0.006 250);
-
-  --color-btn-primary-from: oklch(0.55 0.15 22);
-  --color-btn-primary-to: oklch(0.55 0.15 22);
-  --color-btn-primary-fg: oklch(0.975 0.006 250);
-
-  --color-destructive: oklch(0.62 0.18 25);
-  --color-destructive-fg: oklch(0.16 0.01 255);
-
-  /* ---- neo shared names, re-pointed ----------------------------------- */
-  --background: oklch(0.16 0.01 255);
-  --foreground: oklch(0.945 0.005 250);
-  --card: oklch(0.205 0.012 255);
-  --card-foreground: oklch(0.945 0.005 250);
-  --popover: oklch(0.205 0.012 255);
-  --popover-foreground: oklch(0.945 0.005 250);
-  --muted: oklch(0.125 0.008 255);
-  --muted-foreground: oklch(0.67 0.008 250);
-  --primary: oklch(0.55 0.16 22);
-  --primary-foreground: oklch(0.975 0.006 250);
-  --secondary: oklch(0.205 0.012 255);
-  --secondary-foreground: oklch(0.945 0.005 250);
-  --accent: oklch(0.62 0.15 22);
-  --accent-foreground: oklch(0.975 0.006 250);
-  --border: oklch(0.945 0.005 250 / 0.15);
-  --input: oklch(0.945 0.005 250 / 0.15);
-  --ring: oklch(0.945 0.005 250 / 0.4);
-  --destructive: oklch(0.62 0.18 25);
-  --destructive-foreground: oklch(0.16 0.01 255);
+  /* SPIKE: with the shared names un-shadowed (base block `inherit`), the
+     host preset's own .dark values flow through the derivations above —
+     surfaces, ink, hairlines, and the contrast pairs all flip for free.
+     The only design-specific dark rule left is the accent ROLE SPLIT:
+     FIELDS stay deep (a lifted large field reads muddy), accent TYPE lifts
+     to stay legible on ink — derived from the preset primary via relative
+     color syntax instead of the old oxblood literals. */
+  --color-accent-field: oklch(from var(--primary, oklch(0.37 0.115 20)) min(l, 0.45) c h);
+  --color-accent-strong: oklch(from var(--primary, oklch(0.62 0.16 24)) max(l, 0.62) c h);
+  --color-accent: oklch(from var(--primary, oklch(0.68 0.15 26)) max(l, 0.68) calc(c * 1.05) h);
+  --color-accent-soft: color-mix(in oklab, var(--primary, oklch(0.37 0.115 20)) 22%, var(--color-surface));
+  /* Type/marks ON the clamped-deep fields can't keep the preset's
+     --primary-foreground pairing — that pairs with the RAW primary, and a
+     light dark-mode primary (clay: 0.68 L) carries a near-BLACK foreground,
+     which lands black-on-deep once the field is clamped. The theme's dark
+     ink IS light, so the cover sets in the theme's own ink. */
+  --color-accent-fg: var(--color-fg);
+
+  --color-btn-primary-from: oklch(from var(--primary, oklch(0.55 0.15 22)) max(l, 0.55) c h);
+  --color-btn-primary-to: oklch(from var(--primary, oklch(0.55 0.15 22)) max(l, 0.55) c h);
 }
 
 /* Display headings: the shared h1/h2 rule supplies var(--font-display) →
@@ -810,4 +739,263 @@ html:has([data-dialect='named']) {
   left: 0;
   right: 0;
   border-top: 1px solid var(--color-border);
-}
+}
+
+/**
+ * @mdxui/named — GALLERY template envelope ("The Evening Gallery")
+ * ============================================================================
+ *
+ * The museum register of the named dialect: the page is an exhibition
+ * catalogue for a singular talent. Scene: an evening visitor moving alone
+ * through a dim gallery — warm near-black walls, each capability hung as a
+ * spot-lit work with its bone placard beside it, one Klein-blue wall at the
+ * end of the walk.
+ *
+ * LIGHT MODE IS THE DAY GALLERY, not an inversion: bone plaster walls under
+ * even daylight, the SAME placard system (placards are physical bone cards —
+ * they keep their material in both modes), the vitrines keep their dark
+ * velvet interiors, and the ultramarine holds. Dark mode dims the walls to
+ * warm near-black; the placards and vitrines read as lit objects by contrast
+ * alone.
+ *
+ * Color strategy: RESTRAINED — vast warm-neutral emptiness; one saturated
+ * accent (electric ultramarine, the International-Klein-Blue register of
+ * gallery walls) held under ~10% of the surface: catalogue numbers, the
+ * primary action, and the single painted wall of the closing room.
+ * Deliberately NOT gold/amber, NOT neon, NOT terminal-dark.
+ *
+ * SCOPING — rides on top of the studio envelope exactly like executive: the
+ * view renders `data-dialect="named" data-template="gallery"`, so studio's
+ * bare `[data-dialect='named']` block still matches and this two-attribute
+ * selector re-points every token the gallery subtree reads. The dark block
+ * below (3 selectors) outranks both this block and studio's `.dark` block.
+ */
+
+/* Display face — Bricolage Grotesque (variable 200–800, optical sizes 12–96):
+   a grotesque with flare cuts and real presence at exhibition-title sizes,
+   nothing like Halant's serif or Anton's condensed shout. Inter body ships
+   from the studio block of the same stylesheet. */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 200 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/bricolagegrotesque/v9/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInHWVyNJ.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+[data-dialect='named'][data-template='gallery'] {
+  /* ════ THEME DERIVATION ══════════════════════════════════════════════
+     Like studio/executive: the neo shared names inherit from the host
+     preset (<Site>'s wrapper); the gallery semantic layer derives from
+     them, with the day-gallery literals as unthemed fallbacks. The museum
+     STRUCTURE (placard system, vitrines, frames, museum light) is the
+     identity; the palette follows the theme.
+
+     PAIR RULE: whenever a derivation adjusts one half of a contrast pair,
+     the partner is re-derived with it (see the dark block). */
+
+  /* ---- semantic layer — derived from the preset ------------------------ */
+  /* walls */
+  --color-surface: var(--background, oklch(0.957 0.007 80));
+  --color-surface-raised: var(--card, oklch(0.978 0.005 82));
+  --color-surface-sunken: var(--muted, oklch(0.928 0.009 78));
+
+  /* ink */
+  --color-fg: var(--foreground, oklch(0.21 0.012 55));
+  --color-fg-soft: color-mix(in oklab, var(--color-fg) 60%, var(--color-fg-muted));
+  --color-fg-muted: var(--muted-foreground, oklch(0.47 0.014 60));
+
+  /* hairlines — frame edges and rule lines: always ink-at-alpha */
+  --color-border: color-mix(in oklab, var(--color-fg) 14%, transparent);
+  --color-border-strong: color-mix(in oklab, var(--color-fg) 42%, transparent);
+  --color-ring: color-mix(in oklab, var(--primary, oklch(0.45 0.2 264)) 50%, transparent);
+  --color-hover: color-mix(in oklab, var(--color-fg) 5%, transparent);
+
+  /* the one accent: the preset primary in the Klein-blue roles. `field`
+     paints the large surfaces (the closing-room wall, the featured
+     edition); `strong` is accent TYPE and small marks (catalogue numbers,
+     diamonds). They share the raw primary in daylight — the preset's
+     --primary-foreground pairing holds; after dark they split (below). */
+  --color-accent-field: var(--primary, oklch(0.45 0.28 264));
+  --color-accent-strong: var(--primary, oklch(0.45 0.26 264));
+  --color-accent: oklch(from var(--primary, oklch(0.5 0.24 264)) calc(l + 0.05) calc(c * 0.9) h);
+  --color-accent-soft: color-mix(in oklab, var(--primary, oklch(0.45 0.28 264)) 10%, var(--color-surface));
+  --color-accent-fg: var(--primary-foreground, oklch(0.975 0.006 85));
+
+  /* placards: the preset's card material (the bone-card conceit yields to
+     the theme — a placard is the theme's card, hung in the gallery) */
+  --color-placard: var(--card, oklch(0.982 0.005 85));
+  --color-placard-fg: var(--card-foreground, oklch(0.21 0.012 55));
+  --color-placard-soft: color-mix(in oklab, var(--color-placard-fg) 80%, var(--color-placard));
+  --color-placard-muted: color-mix(in oklab, var(--color-placard-fg) 64%, var(--color-placard));
+  --color-placard-border: color-mix(in oklab, var(--color-placard-fg) 12%, transparent);
+
+  /* vitrines: dark velvet interiors — display cases stay dark by day, so
+     by day the velvet derives from the room's INK (pair: type in the
+     room's surface tone). The dark block re-derives both (see below). */
+  --color-vitrine: color-mix(in oklab, var(--color-fg) 92%, var(--color-surface));
+  --color-vitrine-fg: var(--color-surface);
+  --color-vitrine-border: color-mix(in oklab, var(--color-fg) 35%, transparent);
+
+  /* primary action: solid preset primary (the studio gradient collapses flat) */
+  --color-btn-primary-from: var(--primary, oklch(0.45 0.28 264));
+  --color-btn-primary-to: var(--primary, oklch(0.45 0.28 264));
+  --color-btn-primary-fg: var(--primary-foreground, oklch(0.975 0.006 85));
+
+  --color-destructive: var(--destructive, oklch(0.55 0.19 28));
+  --color-destructive-fg: var(--destructive-foreground, oklch(0.975 0.006 85));
+
+  /* ---- geometry: crisp frames, gently eased placard corners ------------ */
+  /* 4px base (--radius anchors the host's @theme-inline multipliers; see
+     the studio block for the mechanism). Frames and vitrines are sharp by
+     component class; placards take the soft 4px of a die-cut card. */
+  --radius: 0.25rem;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.1875rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.25rem;
+  --radius-xl: 0.375rem;
+  --radius-2xl: 0.5rem;
+  --radius-3xl: 0.5rem;
+  --radius-4xl: 0.5rem;
+  --radius-section: 0px;
+  --radius-image: 4px;
+
+  /* ---- elevation: museum light --------------------------------------- */
+  /* Placards and vitrines cast soft warm shadows (objects under daylight);
+     warm-black tint so the shadow belongs to the room, not to a screen. */
+  --shadow-2xs: 0 1px 1px oklch(0.15 0.012 48 / 0.05);
+  --shadow-xs: 0 1px 2px oklch(0.15 0.012 48 / 0.06);
+  --shadow-sm: 0 1px 3px oklch(0.15 0.012 48 / 0.08),
+    0 1px 2px -1px oklch(0.15 0.012 48 / 0.08);
+  --shadow-md: 0 6px 16px -6px oklch(0.15 0.012 48 / 0.14),
+    0 2px 4px -2px oklch(0.15 0.012 48 / 0.08);
+  --shadow-lg: 0 18px 40px -16px oklch(0.15 0.012 48 / 0.2),
+    0 4px 10px -6px oklch(0.15 0.012 48 / 0.1);
+  --shadow-xl: 0 28px 56px -20px oklch(0.15 0.012 48 / 0.26);
+  --shadow-2xl: 0 36px 72px -24px oklch(0.15 0.012 48 / 0.32);
+
+  /* ---- type ------------------------------------------------------------ */
+  /* Display = Bricolage Grotesque (exhibition titles, catalogue numbers,
+     prices). Body stays on the inherited Inter. */
+  --font-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
+
+  background: var(--color-surface);
+  color: var(--color-fg);
+  font-family: var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* The hero's light wash — dark mode only, FULL WIDTH of the hero (inset 0,
+   never a negative-offset box): one warm pool falling from the top of the
+   wall, fading out before the ticker rule. */
+[data-dialect='named'][data-template='gallery'] .gal-wash {
+  position: relative;
+}
+.dark [data-dialect='named'][data-template='gallery'] .gal-wash::before,
+[data-dialect='named'][data-template='gallery'].dark .gal-wash::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    120% 100% at 50% 0%,
+    oklch(0.93 0.01 80 / 0.08),
+    transparent 58%
+  );
+}
+
+/* ──────────────────────────────────────────────────────────────────
+   DARK MODE — the evening gallery, the design's namesake. Warm near-black
+   walls (NOT cool terminal black), bone type. The placard keeps its
+   bone card material — a lit object on a dark wall — and the vitrine keeps
+   its velvet interior, now a step deeper than the room. Ultramarine splits
+   by role: painted fields stay deep IKB, type lifts to read on the dark.
+   Activated by the host's `.dark` class (DialectShell's <Site mode="dark">).
+   ────────────────────────────────────────────────────────────────── */
+.dark [data-dialect='named'][data-template='gallery'],
+[data-dialect='named'][data-template='gallery'].dark {
+  /* With the shared names inherited, the preset's .dark values flow through
+     the light-block derivations — walls, ink, hairlines, placards (now the
+     theme's dark cards) all flip for free. What remains is design-specific:
+     the accent ROLE SPLIT (painted fields hold deep, type lifts — and the
+     on-field type re-pairs to the theme's dark ink, which is light), the
+     vitrine re-derived a step deeper than the walls, and the museum light. */
+
+  /* accent after dark: fields hold deep, type lifts */
+  --color-accent-field: oklch(from var(--primary, oklch(0.43 0.27 264)) min(l, 0.45) c h);
+  --color-accent-strong: oklch(from var(--primary, oklch(0.66 0.19 266)) max(l, 0.64) calc(c * 0.85) h);
+  --color-accent: oklch(from var(--primary, oklch(0.58 0.22 265)) max(l, 0.58) calc(c * 0.9) h);
+  --color-accent-soft: color-mix(in oklab, var(--primary, oklch(0.45 0.28 264)) 20%, var(--color-surface));
+  --color-accent-fg: var(--color-fg);
+  --color-ring: color-mix(in oklab, var(--color-accent-strong) 55%, transparent);
+
+  /* vitrine: a step deeper than the walls (re-paired to the dark room).
+     Derived from the wall's own lightness — preset --muted can sit ABOVE
+     the dark background (clay: 0.22 vs 0.15), which would read raised. */
+  --color-vitrine: oklch(from var(--background, oklch(0.168 0.012 45)) calc(l * 0.72) c h);
+  --color-vitrine-fg: var(--color-fg);
+  --color-vitrine-border: color-mix(in oklab, var(--color-fg) 22%, transparent);
+
+  /* primary action: lifted half a step for the dark room; the lift only
+     raises l, so the preset's --primary-foreground pairing still holds */
+  --color-btn-primary-from: oklch(from var(--primary, oklch(0.48 0.26 264)) max(l, 0.48) c h);
+  --color-btn-primary-to: oklch(from var(--primary, oklch(0.48 0.26 264)) max(l, 0.48) c h);
+
+  /* shadows deepen after dark — spotlit objects throw real penumbrae */
+  --shadow-sm: 0 1px 3px oklch(0.08 0.008 45 / 0.3),
+    0 1px 2px -1px oklch(0.08 0.008 45 / 0.3);
+  --shadow-md: 0 8px 20px -8px oklch(0.08 0.008 45 / 0.5),
+    0 2px 6px -2px oklch(0.08 0.008 45 / 0.35);
+  --shadow-lg: 0 22px 48px -18px oklch(0.08 0.008 45 / 0.6),
+    0 6px 14px -8px oklch(0.08 0.008 45 / 0.4);
+  --shadow-xl: 0 32px 64px -22px oklch(0.08 0.008 45 / 0.65);
+  --shadow-2xl: 0 40px 80px -26px oklch(0.08 0.008 45 / 0.7);
+}
+
+/* Display headings: the shared h1/h2 rule supplies var(--font-display) →
+   Bricolage Grotesque here. Exhibition titles set tight and confident —
+   medium weight (the variable cut around 560 has the flare without the
+   shout), near-solid leading, a breath of negative tracking. Title case,
+   never uppercase — placards do the small-caps work. */
+[data-dialect='named'][data-template='gallery'] h1,
+[data-dialect='named'][data-template='gallery'] h2 {
+  font-weight: 560;
+  letter-spacing: -0.02em;
+  line-height: 0.98;
+}
+
+/* The display voice, on demand (prices, the wordmark, catalogue numbers). */
+[data-dialect='named'][data-template='gallery'] .gal-display {
+  font-family: var(--font-display);
+}
+
+/* Museum placard label — small-caps register built from uppercase + wide
+   tracking (Inter carries no true smcp; synthesis reads cheap). */
+[data-dialect='named'][data-template='gallery'] .gal-label {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  line-height: 1.5;
+}
+
+/* Catalogue number — "No. 3" in the display face, lining figures. */
+[data-dialect='named'][data-template='gallery'] .gal-no {
+  font-family: var(--font-display);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+/* The spotlight pool — the dark gallery's lighting model. By day the room
+   is evenly lit, so the class renders nothing; after dark a soft bone wash
+   falls from above each work. A lighting effect on the wall, not a panel
+   treatment (no blur, no glass). */