@mdxui/named 7.0.0 → 8.0.0

package/dist/styles.css

@@ -53,11 +53,13 @@
  */
 
 /* ──────────────────────────────────────────────────────────────────
-   FONTS — Halant (serif display) + Atkinson Hyperlegible, self-contained.
-   The baseline loads Halant via next/font and Atkinson via @font-face. The
-   package can't rely on the host loading either, so the envelope ships both via
-   @font-face (Google Fonts woff2). @font-face has no ordering constraint
-   (unlike @import url()), so it is safe to drop anywhere in the consumer's entry.
+   FONTS — Halant (serif display) + Inter (body), self-contained.
+   The baseline loads both via next/font (app/layout.tsx: Halant for h1/h2
+   display, Inter for body — Hanken Grotesk / Instrument Sans are loaded there
+   too but referenced nowhere). The package can't rely on the host loading
+   either, so the envelope ships both via @font-face (Google Fonts woff2).
+   @font-face has no ordering constraint (unlike @import url()), so it is safe
+   to drop anywhere in the consumer's entry.
    ────────────────────────────────────────────────────────────────── */
 @font-face {
   font-family: 'Halant';
@@ -115,12 +117,15 @@
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: 'Atkinson Hyperlegible';
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 400 700;
+  font-weight: 100 900;
   font-display: swap;
-  src: url('https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v7/NaPNcYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGseiJn3o.woff2')
+  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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;
 }
 
 /* ──────────────────────────────────────────────────────────────────
@@ -210,20 +215,182 @@
   --radius-section: 36px; /* large section containers */
   --radius-image: 64px; /* hero artwork mask */
 
-  /* ---- fonts — Halant display, Atkinson/Inter body ------------------ */
+  /* ---- radius scale — stock Tailwind v4 ------------------------------ */
+  /* The baseline runs Tailwind's default radius scale (rounded-3xl = 1.5rem
+     cards, rounded-xl chips, rounded-md input). Host theme layers remap
+     --radius-{sm..3xl} as multiples of the preset's --radius (e.g. clay's
+     0.75rem makes rounded-3xl render 36px instead of 24px), so pin the
+     defaults inside the scope. Hosts that remap via `@theme inline` bake
+     `calc(var(--radius) * N)` into the utilities — the multipliers anchor on
+     lg = --radius, so pinning --radius to stock lg (0.5rem) reproduces the
+     whole default scale; the explicit --radius-* pins cover hosts whose
+     utilities read the scale tokens directly. --radius-section/-image above
+     stay the baseline's own additions. */
+  --radius: 0.5rem;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
+  /* ---- shadows — neutral black (Tailwind v4 defaults) ---------------- */
+  /* The baseline runs stock Tailwind shadows. Host theme presets re-point
+     the --shadow-* tokens (e.g. clay's warm oklch(0.35 0.08 40) tint +
+     different geometry), and Tailwind's shadow-{sm,md,lg} utilities read
+     them — so without this pin, button/card shadows inside the named scope
+     pick up the host's tint. */
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* ---- fonts — Halant display, Inter body ---------------------------- */
+  /* NOTE: do NOT write `--font-inter: var(--font-inter, …)` here — a custom
+     property referencing itself is a cycle, invalid at computed-value time,
+     and it voids every declaration that var()s it (the body font silently
+     fell back to the host font). Reference the host's token only at the
+     use site, with the packaged Inter as the var() fallback. */
   --font-halant: 'Halant', ui-serif, Georgia, serif;
-  --font-inter: var(--font-inter, 'Atkinson Hyperlegible', system-ui, sans-serif);
+  /* Template indirection: the shared h1/h2 + .font-halant rules read
+     --font-display, so other templates (executive) swap the display face by
+     re-pointing ONE token instead of fighting these rules' specificity. */
+  --font-display: var(--font-halant);
 
   /* Paint the named surface cream + warm ink, independent of the host's
      dark page, so the editorial sections read on cream. */
   background: var(--color-surface);
   color: var(--color-fg);
-  font-family: 'Atkinson Hyperlegible', var(--font-inter), system-ui, sans-serif;
+  font-family: var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }
 
+/* ──────────────────────────────────────────────────────────────────
+   ANCHOR-SCROLL POLISH (baseline globals.css): smooth scrolling for the
+   navbar's #features/#pricing/#faq jumps + clearance so the sticky nav
+   doesn't cover the section heading on arrival. `html` can't sit under the
+   dialect scope, so the smooth rule is gated with :has() — a no-op on
+   pages that don't render the named arc.
+   ────────────────────────────────────────────────────────────────── */
+html:has([data-dialect='named']) {
+  scroll-behavior: smooth;
+}
+[data-dialect='named'] section[id] {
+  scroll-margin-top: 80px;
+}
+
+/* ──────────────────────────────────────────────────────────────────
+   DARK MODE — the baseline's Anthropic-calm dark set (globals.css `.dark`,
+   verbatim): warm near-black surfaces, cream ink, the primary CTA gradient
+   inverted to cream-on-dark, hue library re-tuned with hue angles preserved.
+   Activated by the host's `.dark` class (DialectShell's <Site mode="dark">
+   sets it on an ancestor). The persona accent mapping (--color-accent-*)
+   cascades from the light block via var() — re-declaring the --hue-* values
+   here is enough, exactly like the baseline.
+   ────────────────────────────────────────────────────────────────── */
+.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);
+
+  /* ---- hue library, dark values (hue angles preserved) --------------- */
+  --hue-teal-soft: oklch(0.245 0.025 210);
+  --hue-teal-medium: oklch(0.33 0.06 210);
+  --hue-teal-strong: oklch(0.65 0.09 210);
+
+  --hue-orange-soft: oklch(0.245 0.04 48);
+  --hue-orange-medium: oklch(0.335 0.09 45);
+  --hue-orange-strong: oklch(0.72 0.15 50);
+
+  --hue-green-soft: oklch(0.245 0.035 134);
+  --hue-green-medium: oklch(0.33 0.075 134);
+  --hue-green-strong: oklch(0.73 0.14 134);
+
+  --hue-sky-blue-soft: oklch(0.245 0.035 235);
+  --hue-sky-blue-medium: oklch(0.33 0.075 235);
+  --hue-sky-blue-strong: oklch(0.73 0.14 235);
+
+  --hue-purple-soft: oklch(0.245 0.03 314);
+  --hue-purple-medium: oklch(0.33 0.07 314);
+  --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 {
+  box-shadow: 0px 0px 0px 1px var(--color-border),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+}
+
 /* ════════════════════════════════════════════════════════════════════
    NEO UTILITIES — scoped class rules.
    Every neo utility the named markup references, defined under the subtree so
@@ -231,9 +398,20 @@
    the cream baseline values.
    ════════════════════════════════════════════════════════════════════ */
 
-/* —— Serif display face (baseline `font-halant`) ——————————————————— */
+/* —— Display face (baseline `font-halant`; reads the template-indirected
+      --font-display so non-studio templates can swap it) ——————————————— */
 [data-dialect='named'] .font-halant {
-  font-family: var(--font-halant);
+  font-family: var(--font-display, var(--font-halant));
+}
+
+/* Baseline @layer base rule (globals.css): every section-level heading gets
+   the display treatment; h3 and below stay on the body sans. Scoped here
+   so components only specify size + variant, exactly like the baseline. */
+[data-dialect='named'] h1,
+[data-dialect='named'] h2 {
+  font-family: var(--font-display, var(--font-halant));
+  font-weight: 400;
+  line-height: 1.1;
 }
 
 /* —— Backgrounds —————————————————————————————————————————————————— */
@@ -290,6 +468,16 @@
 }
 
 /* —— Custom utilities the baseline markup relies on ———————————————— */
+/* Primary CTA gradient (baseline @utility btn-gradient-dark) — the shared
+   Button's `default` variant. Token-driven so a persona re-pointing the
+   --color-btn-primary-* endpoints restyles every primary button at once. */
+[data-dialect='named'] .btn-gradient-dark {
+  background: linear-gradient(
+    180deg,
+    var(--color-btn-primary-from) 0%,
+    var(--color-btn-primary-to) 100%
+  );
+}
 [data-dialect='named'] .card-shadow {
   box-shadow: 0px 0.602px 0.602px -1.25px rgba(0, 0, 0, 0.36),
     0px 2.289px 2.289px -2.5px rgba(0, 0, 0, 0.32),
@@ -317,3 +505,309 @@
     transparent 83.55%
   );
 }
+
+/* —— CodeWindow (shiki) ———————————————————————————————————————————— */
+/* The template's panel owns the surface; shiki's theme background must not
+   fight it. Scoped under the dialect attr so it covers every template. */
+[data-dialect='named'] .shiki {
+  background-color: transparent !important;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: pre;
+}
+
+/* —— Marquee animation (hero tool strip) ——————————————————————————— */
+/* The baseline defines these as `--animate-marquee` + @keyframes inside its
+   Tailwind @theme block — host builds that don't replicate that theme key
+   never generate the `animate-marquee` utility, leaving the strip frozen.
+   Ship them here. Keyframe names are global, so they carry a `named-` prefix
+   to stay collision-free; the class rules are scoped like everything else.
+   The shared Marquee component sets `--duration`/`--gap` inline. */
+@keyframes named-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap)));
+  }
+}
+@keyframes named-marquee-vertical {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(calc(-100% - var(--gap)));
+  }
+}
+[data-dialect='named'] .animate-marquee {
+  animation: named-marquee var(--duration, 40s) linear infinite;
+}
+[data-dialect='named'] .animate-marquee-vertical {
+  animation: named-marquee-vertical var(--duration, 40s) linear infinite;
+}
+
+
+/**
+ * @mdxui/named — EXECUTIVE template envelope ("Ledger Paper")
+ * ============================================================================
+ *
+ * The professional register of the named dialect ("Your AI CFO"): cool paper
+ * white + graphite ink, hairline rules as the structural language (no cards,
+ * no shadows), 2px corners, tabular numerals on every figure, and a single
+ * oxblood accent reserved for the primary CTA and key figures (Restrained
+ * color strategy — the accent stays under 10% of the surface).
+ *
+ * Scene: a founder or COO at a laptop in daylight, skeptical, deciding
+ * whether to hand their books to an AI agent. Light theme; rigor over vibes.
+ * Deliberately NOT navy-and-gold and NOT terminal-dark — both are the
+ * category reflexes for "finance".
+ *
+ * SCOPING — this block rides ON TOP of the studio envelope. The view renders
+ * `data-dialect="named" data-template="executive"`, so studio's bare
+ * `[data-dialect='named']` token block still matches; this selector's higher
+ * specificity (two attributes) re-points every token the executive subtree
+ * reads. Studio's scoped utility rules (.bg-background etc.) are var-driven,
+ * so they resolve to executive values here too — but executive markup writes
+ * arbitrary-value classes (`bg-(--color-surface)`) and avoids studio's
+ * literal-value utilities. Concatenated AFTER studio in dist/styles.css, so
+ * on specificity ties (e.g. studio's `.dark` block) executive wins: the
+ * dark block below restyles the ledger for ink (oxblood lifted luminous).
+ */
+
+/* Masthead/display face — Anton (black condensed grotesque; the cover voice).
+   Source Serif 4 survives only as the italic standfirst counter-voice. Inter
+   body ships from the studio block of the same stylesheet. */
+@font-face {
+  font-family: 'Anton';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3Kz-C8CSKlv.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;
+}
+
+/* Standfirst face — Source Serif 4 (variable weight, latin, + true italic). */
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: normal;
+  font-weight: 200 900;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/sourceserif4/v14/vEFI2_tTDB4M7-auWDN0ahZJW1gb8te1Xb7G.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;
+}
+/* True italic — the hero standfirst is set in it; a synthesized slant on a
+   serif reads cheap, which defeats the standfirst's whole job. */
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: italic;
+  font-weight: 200 900;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/sourceserif4/v14/vEFK2_tTDB4M7-auWDN0ahZJW1gewtW_WpzEpMs.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='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);
+
+  /* ---- geometry: square document corners, flat surfaces ---------------- */
+  /* 2px everywhere a radius utility appears (--radius anchors the host's
+     @theme-inline multipliers; see the studio block for the mechanism). */
+  --radius: 0.125rem;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.125rem;
+  --radius-md: 0.125rem;
+  --radius-lg: 0.125rem;
+  --radius-xl: 0.25rem;
+  --radius-2xl: 0.25rem;
+  --radius-3xl: 0.25rem;
+  --radius-4xl: 0.25rem;
+  --radius-section: 0px;
+  --radius-image: 2px;
+
+  /* no elevation — hairlines do the separating */
+  --shadow-2xs: 0 0 #0000;
+  --shadow-xs: 0 0 #0000;
+  --shadow-sm: 0 0 #0000;
+  --shadow-md: 0 0 #0000;
+  --shadow-lg: 0 0 #0000;
+  --shadow-xl: 0 0 #0000;
+  --shadow-2xl: 0 0 #0000;
+
+  /* ---- type ------------------------------------------------------------ */
+  /* Display = Anton (masthead, headings, the giant numerals). The serif is
+     demoted to the standfirst counter-voice via .exec-serif. */
+  --font-display: 'Anton', 'Arial Narrow', sans-serif;
+  --font-serif-exec: 'Source Serif 4', ui-serif, Georgia, 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;
+}
+
+/* ──────────────────────────────────────────────────────────────────
+   DARK MODE — the ledger after hours: deep cool ink surfaces, paper type,
+   and the oxblood LIFTED to a luminous brick (the light-mode 0.42 L red
+   would die on ink). Everything var-driven inverts automatically — notably
+   the closing CTA band (bg --color-fg / text --color-surface) flips from
+   ink-band-on-paper to paper-band-on-ink: the bookend follows the theme.
+   Activated by the host's `.dark` class (DialectShell's <Site mode="dark">).
+   Higher specificity (3 selectors) than both the executive light block and
+   studio's dark block.
+   ────────────────────────────────────────────────────────────────── */
+.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);
+}
+
+/* Display headings: the shared h1/h2 rule supplies var(--font-display) →
+   Anton here. Anton is a single-cut black condensed grotesque: uppercase,
+   near-solid leading, a touch of positive tracking so large settings don't
+   weld together. */
+[data-dialect='named'][data-template='executive'] h1,
+[data-dialect='named'][data-template='executive'] h2 {
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+  line-height: 0.92;
+  font-variant-numeric: lining-nums;
+}
+
+/* The standfirst counter-voice (true italic ships above). */
+[data-dialect='named'][data-template='executive'] .exec-serif {
+  font-family: var(--font-serif-exec);
+}
+
+/* Figures (prices, indices) read as ledger entries everywhere. */
+[data-dialect='named'][data-template='executive'] .exec-figure {
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+/* The ledger closing signature: a double rule (totals row). */
+[data-dialect='named'][data-template='executive'] .exec-double-rule {
+  border-top: 2px solid var(--color-border-strong);
+  position: relative;
+}
+[data-dialect='named'][data-template='executive'] .exec-double-rule::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--color-border);
+}

package/dist/view/index.d.ts

@@ -33,6 +33,10 @@ type NamedAgentFeature = {
         text: string;
     }[];
     code: string;
+    /** Shiki language id for the code window. Optional — the persona DSL is
+     *  valid TypeScript, which is the default; the cascade may emit any
+     *  language per agent (python, sql, yaml, …). */
+    language?: string;
     badge: string;
 };
 type NamedAgentFeatures = {
@@ -40,7 +44,7 @@ type NamedAgentFeatures = {
     description: string;
     features: NamedAgentFeature[];
 };
-/** Pricing — Pricing1 (single tier) vs Pricing2 (multi-tier) fork, discriminated
+/** Pricing — single-tier vs multi-tier fork, discriminated
  *  on `variant` so both are expressible on one wire field. */
 type NamedAgentPricingFeature = {
     text: string;
@@ -102,7 +106,11 @@ type NamedAgentLandingContent = {
     cta: NamedAgentCta;
 };
 
-type NamedAgentViewProps = DialectViewProps<NamedAgentLandingContent>;
-declare function NamedAgentView({ content, theme, mode, brandName, hostname }: NamedAgentViewProps): react_jsx_runtime.JSX.Element;
+type NamedAgentTemplate = 'studio' | 'executive';
+type NamedAgentViewProps = DialectViewProps<NamedAgentLandingContent> & {
+    /** Design language for the page. Defaults to the named-agents baseline. */
+    template?: NamedAgentTemplate;
+};
+declare function NamedAgentView({ content, theme, mode, brandName, hostname, template }: NamedAgentViewProps): react_jsx_runtime.JSX.Element;
 
-export { type NamedAgentCta, type NamedAgentCtaButton, type NamedAgentFaq, type NamedAgentFaqItem, type NamedAgentFeature, type NamedAgentFeatures, type NamedAgentHero, type NamedAgentLandingContent, type NamedAgentPricing, type NamedAgentPricingFeature, type NamedAgentPricingTier, NamedAgentView, type NamedAgentViewProps, NamedAgentView as default };
+export { type NamedAgentCta, type NamedAgentCtaButton, type NamedAgentFaq, type NamedAgentFaqItem, type NamedAgentFeature, type NamedAgentFeatures, type NamedAgentHero, type NamedAgentLandingContent, type NamedAgentPricing, type NamedAgentPricingFeature, type NamedAgentPricingTier, type NamedAgentTemplate, NamedAgentView, type NamedAgentViewProps, NamedAgentView as default };