@mdxui/named 8.1.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) →
@@ -860,74 +789,66 @@ html:has([data-dialect='named']) {
 }
 
 [data-dialect='named'][data-template='gallery'] {
-  /* ---- semantic layer — the day gallery -------------------------------- */
-  /* walls: bone plaster (warm hue, whisper of chroma — never #fff) */
-  --color-surface: oklch(0.957 0.007 80);
-  --color-surface-raised: oklch(0.978 0.005 82);
-  --color-surface-sunken: oklch(0.928 0.009 78);
-
-  /* ink: warm umber, never pure black */
-  --color-fg: oklch(0.21 0.012 55);
-  --color-fg-soft: oklch(0.34 0.012 55);
-  --color-fg-muted: oklch(0.47 0.014 60);
-
-  /* hairlines — frame edges and rule lines */
-  --color-border: oklch(0.21 0.012 55 / 0.14);
-  --color-border-strong: oklch(0.21 0.012 55 / 0.42);
-  --color-ring: oklch(0.45 0.2 264 / 0.5);
-  --color-hover: oklch(0.21 0.012 55 / 0.05);
-
-  /* the one accent: electric ultramarine (Klein blue). `field` paints the
-     large surfaces (the closing-room wall, the featured edition); `strong`
-     is blue TYPE and small marks (catalogue numbers, diamonds). They share
-     a value in daylight; after dark they split — fields stay deep and
-     saturated, type lifts to stay legible on near-black. */
-  --color-accent-field: oklch(0.45 0.28 264);
-  --color-accent-strong: oklch(0.45 0.26 264);
-  --color-accent: oklch(0.5 0.24 264);
-  --color-accent-soft: oklch(0.93 0.035 264);
-  --color-accent-fg: oklch(0.975 0.006 85);
-
-  /* placards: physical bone cards — same material in BOTH modes */
-  --color-placard: oklch(0.982 0.005 85);
-  --color-placard-fg: oklch(0.21 0.012 55);
-  --color-placard-soft: oklch(0.36 0.012 55);
-  --color-placard-muted: oklch(0.48 0.014 58);
-  --color-placard-border: oklch(0.21 0.012 55 / 0.12);
-
-  /* vitrines: dark velvet interiors — display cases stay dark by day too */
-  --color-vitrine: oklch(0.15 0.012 48);
-  --color-vitrine-fg: oklch(0.92 0.008 80);
-  --color-vitrine-border: oklch(0.21 0.012 55 / 0.35);
-
-  /* primary action: solid ultramarine (the studio gradient collapses flat) */
-  --color-btn-primary-from: oklch(0.45 0.28 264);
-  --color-btn-primary-to: oklch(0.45 0.28 264);
-  --color-btn-primary-fg: oklch(0.975 0.006 85);
-
-  --color-destructive: oklch(0.55 0.19 28);
-  --color-destructive-fg: oklch(0.975 0.006 85);
-
-  /* ---- neo shared names, re-pointed (keeps shared primitives correct) -- */
-  --background: oklch(0.957 0.007 80);
-  --foreground: oklch(0.21 0.012 55);
-  --card: oklch(0.978 0.005 82);
-  --card-foreground: oklch(0.21 0.012 55);
-  --popover: oklch(0.978 0.005 82);
-  --popover-foreground: oklch(0.21 0.012 55);
-  --muted: oklch(0.928 0.009 78);
-  --muted-foreground: oklch(0.47 0.014 60);
-  --primary: oklch(0.45 0.28 264);
-  --primary-foreground: oklch(0.975 0.006 85);
-  --secondary: oklch(0.928 0.009 78);
-  --secondary-foreground: oklch(0.21 0.012 55);
-  --accent: oklch(0.5 0.24 264);
-  --accent-foreground: oklch(0.975 0.006 85);
-  --border: oklch(0.21 0.012 55 / 0.14);
-  --input: oklch(0.21 0.012 55 / 0.14);
-  --ring: oklch(0.45 0.2 264 / 0.5);
-  --destructive: oklch(0.55 0.19 28);
-  --destructive-foreground: oklch(0.975 0.006 85);
+  /* ════ 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
@@ -1001,67 +922,32 @@ html:has([data-dialect='named']) {
    ────────────────────────────────────────────────────────────────── */
 .dark [data-dialect='named'][data-template='gallery'],
 [data-dialect='named'][data-template='gallery'].dark {
-  /* ---- semantic layer — after hours ------------------------------------ */
-  --color-surface: oklch(0.168 0.012 45);
-  --color-surface-raised: oklch(0.205 0.014 45);
-  --color-surface-sunken: oklch(0.13 0.01 45);
-
-  --color-fg: oklch(0.93 0.01 80);
-  --color-fg-soft: oklch(0.82 0.01 80);
-  --color-fg-muted: oklch(0.66 0.012 75);
-
-  --color-border: oklch(0.93 0.01 80 / 0.13);
-  --color-border-strong: oklch(0.93 0.01 80 / 0.4);
-  --color-ring: oklch(0.64 0.19 266 / 0.55);
-  --color-hover: oklch(0.93 0.01 80 / 0.06);
-
-  /* ultramarine after dark: fields hold deep IKB, type lifts */
-  --color-accent-field: oklch(0.43 0.27 264);
-  --color-accent-strong: oklch(0.66 0.19 266);
-  --color-accent: oklch(0.58 0.22 265);
-  --color-accent-soft: oklch(0.26 0.08 264);
-  --color-accent-fg: oklch(0.965 0.008 85);
-
-  /* the placard stays a bone card — now a lit object on the dark wall */
-  --color-placard: oklch(0.936 0.012 82);
-  --color-placard-fg: oklch(0.22 0.012 50);
-  --color-placard-soft: oklch(0.37 0.012 52);
-  --color-placard-muted: oklch(0.46 0.014 55);
-  --color-placard-border: oklch(0.22 0.012 50 / 0.14);
-
-  /* vitrine: a step deeper than the walls */
-  --color-vitrine: oklch(0.115 0.01 45);
-  --color-vitrine-fg: oklch(0.92 0.008 80);
-  --color-vitrine-border: oklch(0.93 0.01 80 / 0.22);
-
-  /* primary action: ultramarine lifted half a step for the dark room */
-  --color-btn-primary-from: oklch(0.48 0.26 264);
-  --color-btn-primary-to: oklch(0.48 0.26 264);
-  --color-btn-primary-fg: oklch(0.965 0.008 85);
-
-  --color-destructive: oklch(0.62 0.18 28);
-  --color-destructive-fg: oklch(0.168 0.012 45);
-
-  /* ---- neo shared names, re-pointed ----------------------------------- */
-  --background: oklch(0.168 0.012 45);
-  --foreground: oklch(0.93 0.01 80);
-  --card: oklch(0.205 0.014 45);
-  --card-foreground: oklch(0.93 0.01 80);
-  --popover: oklch(0.205 0.014 45);
-  --popover-foreground: oklch(0.93 0.01 80);
-  --muted: oklch(0.13 0.01 45);
-  --muted-foreground: oklch(0.66 0.012 75);
-  --primary: oklch(0.48 0.26 264);
-  --primary-foreground: oklch(0.965 0.008 85);
-  --secondary: oklch(0.205 0.014 45);
-  --secondary-foreground: oklch(0.93 0.01 80);
-  --accent: oklch(0.58 0.22 265);
-  --accent-foreground: oklch(0.965 0.008 85);
-  --border: oklch(0.93 0.01 80 / 0.13);
-  --input: oklch(0.93 0.01 80 / 0.13);
-  --ring: oklch(0.64 0.19 266 / 0.55);
-  --destructive: oklch(0.62 0.18 28);
-  --destructive-foreground: oklch(0.168 0.012 45);
+  /* 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),