@godxjp/ui 16.3.0 → 16.5.0

package/dist/app/app-provider.js

@@ -275,6 +275,7 @@ function AppProvider({
   React.useEffect(() => {
     if (typeof document !== "undefined") {
       document.documentElement.dir = localeDirection(locale);
+      document.documentElement.lang = locale;
     }
   }, [locale]);
   React.useEffect(() => {

package/dist/components/data-display/card.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+import type { LucideIcon } from "lucide-react";
 type CardSize = "md" | "compact";
 /** Semantic leading-edge accent stripe (border-inline-start; width via the
  *  --card-accent-rail-width token, default 6px). */
@@ -86,6 +87,9 @@ export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<
     label: React.ReactNode;
     value: React.ReactNode;
     hint?: React.ReactNode;
+    /** Optional leading icon, rendered as a tinted medallion above the metric. Decorative
+     *  (aria-hidden) — the label carries the meaning. Tint via --stat-card-icon-* tokens. */
+    icon?: LucideIcon;
     /** Optional compact trend text beside the value. Avoid badge-like deltas. */
     delta?: React.ReactNode;
     /** KPI layout: stacked = design default, inline = label left / value right. */
@@ -98,7 +102,7 @@ export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<
     accent?: CardAccent;
 };
 /** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
-export declare function StatCard({ label, value, hint, delta, layout, align, inverse, accent, className, size, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, className, size, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
 /** Header actions slot — pair with `CardHeader className="flex flex-row …"`. */
 export declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/data-display/card.js

@@ -96,6 +96,7 @@ function StatCard({
   label,
   value,
   hint,
+  icon: Icon,
   delta,
   layout = "stacked",
   align = "start",
@@ -117,6 +118,7 @@ function StatCard({
       "data-stat-align": align,
       ...props,
       children: [
+        Icon ? /* @__PURE__ */ jsx("span", { "data-slot": "stat-card-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }) : null,
         /* @__PURE__ */ jsxs("div", { "data-slot": "stat-card-body", children: [
           /* @__PURE__ */ jsx("div", { "data-slot": "stat-card-label", children: label }),
           hint && layout === "inline" ? /* @__PURE__ */ jsx("div", { "data-slot": "stat-card-hint", children: hint }) : null
@@ -130,8 +132,8 @@ function StatCard({
                 "data-slot": "stat-card-delta",
                 "data-delta-tone": deltaTone,
                 className: cn(
-                  deltaTone === "positive" && "text-success",
-                  deltaTone === "negative" && "text-destructive"
+                  deltaTone === "positive" && "text-success-strong",
+                  deltaTone === "negative" && "text-error-strong"
                 ),
                 children: delta
               }

package/dist/components/feedback/sheet.js

@@ -24,7 +24,9 @@ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PU
     ref,
     "data-slot": "sheet-overlay",
     className: cn(
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+      // Scrim colour comes from the shared --overlay-background token (see dialog-layout.css),
+      // so a service tints every overlay's backdrop from one knob instead of a baked bg-black/50.
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50",
       className
     ),
     ...props

package/dist/components/navigation/steps.js

@@ -17,7 +17,7 @@ function StepIcon({
   if (icon)
     return /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", controlIconClass), children: icon });
   if (type === "dot") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", controlIconClass), children: /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
@@ -28,7 +28,7 @@ function StepIcon({
           status === "wait" && "bg-muted-foreground/30"
         )
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ jsxs(
     "span",

package/dist/lib/control-styles.d.ts

@@ -17,10 +17,12 @@ export declare const controlIconLeadingClass = "size-[length:var(--control-icon-
 export declare const tableRowHeightClass = "h-[length:var(--table-row-height)]";
 export declare const tableHeadHeightClass = "h-[length:var(--table-row-height)]";
 export declare const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
-/** Semantic status / badge tones — always use tokens, never raw Tailwind palette. */
-export declare const toneSuccessClass = "border-success/30 bg-success/10 text-success";
-export declare const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-foreground";
-export declare const toneInfoClass = "border-info/30 bg-info/10 text-info";
-export declare const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-destructive";
+/** Semantic status / badge tones — always use tokens, never raw Tailwind palette. The TEXT uses the
+ * AA-strong status colours (text-*-strong, darker than the fill) so a small status label clears
+ * WCAG AA on the soft tint; the border/fill keep the brighter wa-iro role. */
+export declare const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
+export declare const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
+export declare const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+export declare const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
 export declare const toneMutedClass = "border-border bg-muted text-muted-foreground";
 export declare const toneNeutralClass = "border-border bg-muted text-muted-foreground";

package/dist/lib/control-styles.js

@@ -8,10 +8,10 @@ const controlIconLeadingClass = "size-[length:var(--control-icon-size)] shrink-0
 const tableRowHeightClass = "h-[length:var(--table-row-height)]";
 const tableHeadHeightClass = "h-[length:var(--table-row-height)]";
 const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
-const toneSuccessClass = "border-success/30 bg-success/10 text-success";
-const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-foreground";
-const toneInfoClass = "border-info/30 bg-info/10 text-info";
-const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-destructive";
+const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
+const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
+const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
 const toneMutedClass = "border-border bg-muted text-muted-foreground";
 const toneNeutralClass = "border-border bg-muted text-muted-foreground";
 export {

package/dist/props/registry.d.ts

@@ -1086,7 +1086,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly StatCardProp: {
         readonly group: "data-display";
         readonly file: "components/data-display/card.tsx";
-        readonly vocabulary: readonly ["TitleProp", "ToneProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["TitleProp", "ToneProp", "IconProp", "ClassNameProp"];
     };
     readonly ResponsiveGridProp: {
         readonly group: "layout";

package/dist/props/registry.js

@@ -1080,7 +1080,7 @@ const COMPONENT_PROP_REGISTRY = {
   StatCardProp: {
     group: "data-display",
     file: "components/data-display/card.tsx",
-    vocabulary: ["TitleProp", "ToneProp", "ClassNameProp"]
+    vocabulary: ["TitleProp", "ToneProp", "IconProp", "ClassNameProp"]
   },
   ResponsiveGridProp: {
     group: "layout",

package/dist/styles/alert-layout.css

@@ -120,20 +120,22 @@
     line-height: 1;
   }
 
+  /* Title text reads the AA-strong status colour (darker than the fill) so the coloured heading
+   * clears WCAG AA on the soft alert tint; the icon keeps the brighter role colour. */
   [data-slot="alert-title"][data-tone="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   [data-slot="alert-title"][data-tone="warning"] {
-    color: hsl(var(--warning));
+    color: hsl(var(--text-warning));
   }
 
   [data-slot="alert-title"][data-tone="success"] {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
 
   [data-slot="alert-title"][data-tone="info"] {
-    color: hsl(var(--info));
+    color: hsl(var(--text-info));
   }
 
   [data-slot="alert-description"] {
@@ -168,7 +170,7 @@
 
   .ui-skeleton-block {
     border-radius: var(--skeleton-radius);
-    background: hsl(var(--muted));
+    background: var(--skeleton-background);
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 

package/dist/styles/card-layout.css

@@ -29,8 +29,15 @@
     border-style: solid;
     border-color: hsl(var(--card-border));
     border-radius: var(--card-radius);
-    background: hsl(var(--card-background));
+    /* Fill = base card colour with an opt-in role tint washed over it (--card-tint default
+     * transparent → byte-identical at rest). Tint layer sits ABOVE the base colour. */
+    background:
+      linear-gradient(var(--card-tint), var(--card-tint)),
+      hsl(var(--card-background));
     color: hsl(var(--card-foreground));
+    /* Resting elevation + opt-in brand glow — both quiet no-ops by default so a service theme can
+     * lift (--card-shadow) and/or glow (--card-glow) every card with no markup change. */
+    box-shadow: var(--card-shadow), var(--card-glow);
     overflow: hidden;
   }
 
@@ -384,6 +391,31 @@
     min-width: 0;
   }
 
+  /* Optional leading icon medallion — tinted box above the metric. Tone via tokens (default a
+   * soft brand-primary tint), so a service rethemes it with --primary or the icon tokens. */
+  [data-slot="stat-card-icon"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--stat-card-icon-size);
+    height: var(--stat-card-icon-size);
+    margin-bottom: var(--stat-card-gap);
+    border-radius: var(--stat-card-icon-radius);
+    background: var(--stat-card-icon-background);
+    color: var(--stat-card-icon-foreground);
+  }
+
+  [data-slot="stat-card-icon"] svg {
+    width: var(--stat-card-icon-glyph-size);
+    height: var(--stat-card-icon-glyph-size);
+  }
+
+  /* Inline layout: medallion floats to the trailing edge so label/value keep the start column. */
+  [data-slot="card"][data-stat-layout="inline"] [data-slot="stat-card-icon"] {
+    margin-bottom: 0;
+    order: 1;
+  }
+
   [data-slot="stat-card-label"] {
     display: flex;
     align-items: center;

package/dist/styles/control.css

@@ -50,13 +50,13 @@
   }
 
   .ui-toggle[data-state="on"] {
-    background: hsl(var(--primary));
+    background: var(--toggle-on-background);
     color: hsl(var(--primary-foreground));
   }
 
   .ui-toggle:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.35);
+    box-shadow: 0 0 0 3px hsl(var(--focus-ring-color) / 0.35);
   }
 
   .ui-toggle:disabled,
@@ -85,7 +85,7 @@
 
   .ui-button:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 var(--control-focus-ring-width) hsl(var(--ring));
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color));
   }
 
   .ui-button:disabled {
@@ -102,7 +102,9 @@
   .ui-button--default {
     background: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
-    box-shadow: var(--shadow-sm);
+    /* Brand glow layers on top of the resting shadow; --shadow-glow is invisible by default
+     * (quiet) so a service opts the CTA halo in by setting the token alone. */
+    box-shadow: var(--shadow-sm), var(--shadow-glow);
   }
 
   .ui-button--default:hover {
@@ -119,9 +121,17 @@
     background: hsl(var(--destructive) / 0.9);
   }
 
+  /* Outline + ghost set their text colour EXPLICITLY (read --foreground) — never rely on inherited
+   * body colour. Inheriting breaks in a scoped dark region (e.g. an on-navy hero): the body's
+   * computed dark colour would carry in and the label goes near-invisible on the dark fill. */
   .ui-button--outline {
     border: 1px solid hsl(var(--input));
     background: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+
+  .ui-button--ghost {
+    color: hsl(var(--foreground));
   }
 
   .ui-button--outline:hover,
@@ -277,7 +287,7 @@
   .ui-slider-thumb:focus-visible,
   .ui-switch:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 var(--control-focus-ring-width) hsl(var(--ring));
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color));
   }
 
   .ui-checkbox:disabled,
@@ -289,7 +299,7 @@
   }
 
   .ui-checkbox[data-state="checked"] {
-    background: hsl(var(--primary));
+    background: var(--checkbox-checked-background);
     color: hsl(var(--primary-foreground));
   }
 
@@ -326,7 +336,7 @@
   }
 
   .ui-switch[data-state="checked"] {
-    background: hsl(var(--primary));
+    background: var(--switch-checked-background);
   }
 
   .ui-switch[data-state="unchecked"] {
@@ -364,13 +374,13 @@
     flex-grow: 1;
     overflow: hidden;
     border-radius: var(--radius-pill);
-    background: hsl(var(--primary) / 0.2);
+    background: var(--slider-track-background);
   }
 
   .ui-slider-range {
     position: absolute;
     height: 100%;
-    background: hsl(var(--primary));
+    background: var(--slider-range-background);
   }
 
   .ui-slider-thumb {
@@ -646,13 +656,13 @@
 }
 .ui-otp-slot[data-active="true"] {
   z-index: 1;
-  box-shadow: 0 0 0 2px hsl(var(--ring));
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color));
 }
 .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot {
   border-color: hsl(var(--destructive));
 }
 .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot[data-active="true"] {
-  box-shadow: 0 0 0 2px hsl(var(--destructive));
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
 }
 .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-slot {
   cursor: not-allowed;
@@ -717,7 +727,7 @@
   fill: currentColor;
 }
 .ui-rating-star:focus-visible {
-  outline: 2px solid hsl(var(--ring));
+  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color));
   outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
@@ -735,8 +745,8 @@
   background: hsl(var(--background));
 }
 .ui-tag-input:focus-within {
-  box-shadow: 0 0 0 2px hsl(var(--ring));
-  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color));
+  border-color: hsl(var(--focus-ring-color));
 }
 .ui-tag-input-disabled {
   opacity: 0.6;

package/dist/styles/data-display-layout.css

@@ -9,7 +9,10 @@
     justify-content: center;
     overflow: hidden;
     border-radius: var(--radius-pill);
-    background: hsl(var(--muted));
+    /* Tint washes over the role background (default transparent = no-op, rule #44). */
+    background:
+      linear-gradient(var(--avatar-tint), var(--avatar-tint)),
+      var(--avatar-background);
     color: hsl(var(--muted-foreground));
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
@@ -27,7 +30,7 @@
     height: 100%;
     align-items: center;
     justify-content: center;
-    background: hsl(var(--muted));
+    background: var(--avatar-background);
   }
 
   .ui-progress {
@@ -40,13 +43,13 @@
     height: 0.5rem;
     overflow: hidden;
     border-radius: var(--radius-pill);
-    background: hsl(var(--secondary));
+    background: var(--progress-track-background);
   }
 
   .ui-progress-bar {
     height: 100%;
     border-radius: inherit;
-    background: hsl(var(--success));
+    background: var(--progress-fill-background);
   }
 
   .ui-progress[data-tone="warning"] .ui-progress-bar {
@@ -75,8 +78,8 @@
   }
 
   .ui-tree-item[data-active="true"] {
-    border-color: hsl(var(--primary) / 0.3);
-    background: hsl(var(--primary) / 0.05);
+    border-color: var(--tree-item-active-border);
+    background: var(--tree-item-active-background);
   }
 
   .ui-tree-item[data-depth="1"] {
@@ -151,7 +154,7 @@
     place-items: center;
     border: 1px solid transparent;
     border-radius: var(--radius-pill);
-    background: hsl(var(--success));
+    background: var(--timeline-dot-done-background);
     color: hsl(var(--success-foreground));
     font-size: var(--timeline-note-font-size);
     font-weight: var(--font-weight-medium);
@@ -160,14 +163,14 @@
 
   /* done → success fill. */
   .ui-timeline-dot[data-status="done"] {
-    background: hsl(var(--success));
+    background: var(--timeline-dot-done-background);
     color: hsl(var(--success-foreground));
   }
 
   /* current → primary fill + ring (also the legacy data-current shorthand). */
   .ui-timeline-dot[data-status="current"],
   .ui-timeline-dot[data-current="true"] {
-    background: hsl(var(--primary));
+    background: var(--timeline-dot-current-background);
     color: hsl(var(--primary-foreground));
     box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
   }
@@ -202,7 +205,7 @@
 
   /* The segment below a done/current step reads as travelled (completed). */
   .ui-timeline-line[data-completed="true"] {
-    background: hsl(var(--primary));
+    background: var(--timeline-line-completed-background);
   }
 
   .ui-timeline-head {
@@ -256,7 +259,7 @@
   text-decoration: underline;
 }
 .ui-accordion-trigger:focus-visible {
-  outline: 2px solid hsl(var(--ring));
+  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color));
   outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
@@ -383,7 +386,7 @@
 }
 
 .ui-carousel-dot:focus-visible {
-  outline: 2px solid hsl(var(--ring));
+  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color));
   outline-offset: 2px;
 }
 

package/dist/styles/data-entry-layout.css

@@ -83,8 +83,8 @@
   }
 
   .ui-time-input:focus-visible {
-    border-color: hsl(var(--ring));
-    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3);
+    border-color: hsl(var(--focus-ring-color));
+    box-shadow: 0 0 0 3px hsl(var(--focus-ring-color) / 0.3);
   }
 
   .ui-time-input[aria-invalid="true"] {

package/dist/styles/dialog-layout.css

@@ -21,11 +21,15 @@
     border-top: 1px solid hsl(var(--border));
   }
 
+  .ui-dialog-overlay,
+  [data-slot="sheet-overlay"] {
+    background-color: var(--overlay-background);
+  }
+
   .ui-dialog-overlay {
     position: fixed;
     inset: 0;
     z-index: 50;
-    background-color: rgb(0 0 0 / 0.5);
   }
 
   [data-slot="dialog-content"] {
@@ -43,7 +47,7 @@
     padding: var(--dialog-space-inset);
     /* clip so the full-bleed header/footer bands round with the dialog corners (Ant Modal). */
     overflow: hidden;
-    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)), var(--dialog-content-glow);
   }
 
   @media (min-width: 640px) {

package/dist/styles/index.css

@@ -1,11 +1,29 @@
 @import "sonner/dist/styles.css";
 @import "react-day-picker/style.css";
-/* Default sans font — self-contained so consumers need no font config (subsetted: latin/vi/jp). */
-@import "@fontsource/m-plus-2/400.css";
-@import "@fontsource/m-plus-2/500.css";
-@import "@fontsource/m-plus-2/700.css";
+/* Bundled sans fonts — self-contained so consumers need no font config. The browser only
+ * downloads the subset files matching the rendered text:
+ *  · Noto Sans JP — the DEFAULT face (Japanese + Latin), used for all locales except `vi`.
+ *  · Montserrat   — swapped in for the Vietnamese locale (`<html lang="vi">`), incl. its
+ *                   `vietnamese` subset for full diacritics. See --font-family-sans + :lang(vi). */
+@import "@fontsource/noto-sans-jp/400.css";
+@import "@fontsource/noto-sans-jp/500.css";
+@import "@fontsource/noto-sans-jp/700.css";
+@import "@fontsource/montserrat/400.css";
+@import "@fontsource/montserrat/500.css";
+@import "@fontsource/montserrat/700.css";
 @import "tailwindcss";
 
+/* Vietnamese locale → Montserrat (set by AppProvider via <html lang="vi">). Overrides the
+ * --font-family-sans token so every body/heading rule that reads it switches automatically. */
+:root:lang(vi),
+[lang="vi"] {
+  /* Montserrat for Latin/Vietnamese; Noto Sans JP kept as the tail so any 日本語 in a vi-locale
+   * screen still has the bundled JP face (Montserrat has no CJK glyphs). */
+  --font-family-sans:
+    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    system-ui, "Noto Sans JP", sans-serif;
+}
+
 /* Guarantee the full set of semantic color utilities ships in the compiled CSS
  * even when the library itself only references a few — consumers (and the token
  * docs) must be able to use bg/text/border for EVERY semantic role. Without this
@@ -23,6 +41,8 @@
  * `var(--radius-2xl)` directly; without a generated utility Tailwind drops the unused var). */
 @source inline("rounded-{xs,xl,2xl}");
 @source inline("text-2xs");
+@source inline("text-{3xl,4xl,5xl}");
+@source inline("text-{success,warning,info,error}-strong");
 /* `.js` matters: the published package ships only compiled JS under dist (no
  * .tsx sources), and this file is copied verbatim into dist/styles — without
  * it Tailwind finds no component classes in consumers (unstyled popovers and
@@ -46,7 +66,14 @@
 @import "./navigation-layout.css";
 @import "./chart-layout.css";
 
-@theme {
+/* `inline` (NOT a bare @theme): Tailwind inlines each expression — e.g. `hsl(var(--primary))` —
+ * directly into every utility (`bg-primary` becomes `background-color: hsl(var(--primary))`) instead
+ * of emitting `var(--color-primary)` computed once at :root. This is THE enabler for scoped /
+ * multi-tenant theming: a `[data-tenant]{ --primary: … }` override now re-resolves at the element,
+ * so colors and radius propagate into a subtree (a plain @theme froze them at :root, so scoped
+ * overrides never reached the color utilities). Components read raw tokens like `hsl(var(--primary))`
+ * directly in their own CSS, so they re-theme the same way. */
+@theme inline {
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
   --color-card: hsl(var(--card));
@@ -74,6 +101,12 @@
   --color-info-foreground: hsl(var(--info-foreground));
   --color-attention: hsl(var(--attention));
   --color-attention-foreground: hsl(var(--attention-foreground));
+  /* AA-strong status TEXT colours (text-{success,warning,info,error}-strong) — darker than the
+   * fills so small coloured labels clear WCAG AA on white; flip light on the dark theme. */
+  --color-success-strong: hsl(var(--text-success));
+  --color-warning-strong: hsl(var(--text-warning));
+  --color-info-strong: hsl(var(--text-info));
+  --color-error-strong: hsl(var(--text-error));
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -127,6 +160,10 @@
   --text-lg: var(--font-size-lg);
   --text-xl: var(--font-size-xl);
   --text-2xl: var(--font-size-2xl);
+  /* Opt-in DISPLAY ramp (marketing/hero) — wired to the display tokens, unused by the admin scale. */
+  --text-3xl: var(--font-size-3xl);
+  --text-4xl: var(--font-size-4xl);
+  --text-5xl: var(--font-size-5xl);
 }
 
 @layer base {
@@ -154,7 +191,9 @@
   body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
-    font-family: var(--font-family-sans);
+    /* Body reads --font-family-body (defaults to --font-family-sans → unchanged); a service that
+     * wants a dual-font brand (display + body face) overrides --font-family-body alone. */
+    font-family: var(--font-family-body);
     font-size: var(--font-size-base);
     line-height: var(--line-height-body);
     font-feature-settings:
@@ -168,7 +207,13 @@
 
   /* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
    * the document outline (one <h1> per page, levels never skipped). Visual size
-   * follows the dxs-kintai scale; component titles override via their own class. */
+   * follows the dxs-kintai scale; component titles override via their own class.
+   * Headings read --font-family-display (defaults to --font-family-sans → unchanged) for dual-font
+   * brands (display face on headings, body face on prose). */
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--font-family-display);
+  }
+
   h1 {
     font-size: var(--heading-h1);
     font-weight: var(--font-weight-medium);

package/dist/styles/layout.css

@@ -345,6 +345,9 @@
     gap: var(--space-stack-sm);
     padding-bottom: var(--page-header-pad-bottom);
     border-bottom: var(--page-header-divider);
+    /* Hero banner hook — invisible by default (--gradient-hero: none); a service paints a hero
+     * gradient across the page header (full-bleed) by configuring the token alone. */
+    background-image: var(--gradient-hero);
   }
 
   .ui-page-header-row {