@nebutra/design-tokens 0.1.2 → 2.0.0

package/build/css/theme-inline.css

@@ -175,6 +175,22 @@
   --radius-3xl: 1.5rem;
   --radius-full: 9999px;
 
+  /* Containers — the page-width contract from CLAUDE.md, as real utilities.
+     max-w-text (reading), max-w-content (pricing/blog), max-w-wide (feature bento, navbar).
+
+     These values also reach :root through the semantic layer, so var(--container-wide) keeps
+     working; what was missing was the Tailwind side. Without it there is no max-w-wide to reach
+     for, and 92 call sites across apps/** had typed max-w-wide instead — a decided number
+     living in a className, where changing the token cannot move it.
+
+     Literals rather than var(--container-wide): Tailwind emits an @theme entry into its own
+     layer, so a same-named reference becomes self-referential and survives only because the
+     semantic :root happens to come later in the cascade. Duplicating the number and pinning it
+     with a parity test is the honest trade — see design-tokens' container parity test. */
+  --container-text: 896px;
+  --container-content: 1152px;
+  --container-wide: 1400px;
+
   /* Shadows */
   --shadow-xs: var(--elevation-xs);
   --shadow-sm: var(--elevation-sm);
@@ -185,22 +201,77 @@
   --shadow-brand: var(--elevation-brand);
   --shadow-brand-lg: var(--elevation-brand-lg);
 
-  /* Motion — Easing curves */
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  /* shadow-ambient-md / shadow-glass-lg / shadow-sheen — so marketing surfaces
+     reach for a step on the ramp instead of spelling out a blur and a spread.
+     Aliased to var() rather than inlined so the dark theme's values apply. */
+  --shadow-ambient-sm: var(--elevation-ambient-sm);
+  --shadow-ambient-md: var(--elevation-ambient-md);
+  --shadow-ambient-lg: var(--elevation-ambient-lg);
+  --shadow-glass-sm: var(--elevation-glass-sm);
+  --shadow-glass-md: var(--elevation-glass-md);
+  --shadow-glass-lg: var(--elevation-glass-lg);
+  --shadow-sheen: var(--elevation-sheen);
+
+  /* Coloured and centred elevation. shadow-ambient-glow is the one
+     non-directional step; shadow-glow-accent|-lg|-sm carry a brand-accent halo
+     so a glass card never hand-types the accent as raw rgba; shadow-glow-primary
+     tints the xl geometry with the action fill. */
+  --shadow-ambient-glow: var(--elevation-ambient-glow);
+  --shadow-glow-accent: var(--elevation-glow-accent);
+  --shadow-glow-accent-lg: var(--elevation-glow-accent-lg);
+  --shadow-glow-accent-sm: var(--elevation-glow-accent-sm);
+  --shadow-glow-primary: var(--elevation-glow-primary);
+
+  /* Motion — Easing curves.
+     Indirect, like the shadows above: an @theme entry holding a literal is
+     inlined into the utility, so the ease-out class compiled to a fixed
+     cubic-bezier and no Brand Package could move it. Pointing at the runtime
+     rail in static/base.css makes it follow the language the page is under.
+     (No backticks in this block — it is inside a JS template literal.) */
+  --ease-in: var(--motion-ease-in);
+  --ease-out: var(--motion-ease-out);
+  --ease-brand: var(--motion-ease-brand);
+  --ease-in-out: var(--motion-ease-in-out);
+  --ease-spring: var(--motion-ease-spring);
 
   /* Motion — Durations (four-rail; see core.json:duration). Names denote intent, not relative speed. */
-  --duration-micro: 100ms;
-  --duration-flow: 200ms;
-  --duration-reveal: 300ms;
-  --duration-cinematic: 500ms;
-
-  /* Font family — Geist primary stack with CJK fallbacks */
-  --font-sans: var(--font-geist-sans), "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
-  --font-display: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
-  --font-heading: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
+  --duration-micro: var(--motion-duration-micro);
+  --duration-flow: var(--motion-duration-flow);
+  --duration-reveal: var(--motion-duration-reveal);
+  --duration-cinematic: var(--motion-duration-cinematic);
+
+  /* The same four rails on the namespace Tailwind reads for duration-*.
+     --duration-* is the variable other CSS consumes; the utility class is built
+     from --transition-duration-*, and only that one. Without these,
+     duration-micro and duration-reveal are class names that generate nothing:
+     they were in use in the component library and on the marketing site, and
+     every one of them silently fell back to the 150ms default. */
+  --transition-duration-micro: var(--motion-duration-micro);
+  --transition-duration-flow: var(--motion-duration-flow);
+  --transition-duration-reveal: var(--motion-duration-reveal);
+  --transition-duration-cinematic: var(--motion-duration-cinematic);
+
+  /* Likewise for ease-*: the utility namespace is --ease-* already, so the four
+     above are reachable as ease-brand / ease-spring without further mapping. */
+
+  /* Spacing — DO NOT register --spacing-sm|md|lg|xl|2xl here.
+     Tailwind v4 puts every --spacing-{key} on the shared size rail, so
+     max-w-sm / max-w-2xl (and width/height/gap utilities with the same keys)
+     resolve to the breathing-room lengths (0.75rem to 3rem) instead of the
+     container scale (24rem to 42rem). That shipped as one-word-per-line prose
+     and a 32px install box on nebutra.com (measured 2026-08-03).
+     Brand Packages still override --space-source-*; consumers must read
+     those vars directly (var(--space-source-md, ...)), never via a @theme
+     --spacing-{step} alias. --spacing itself (0.25rem arithmetic base) stays
+     untouched. See static/base.css. */
+
+  /* Font family — Geist keeps Latin + numerals, self-hosted Noto Sans SC takes
+     CJK, system CJK faces behind it. Order is the design decision; see the
+     fontFamily $description in tokens/core.json. Mirror of those tokens — keep
+     the two in sync (verify:parity compares them). */
+  --font-sans: var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-cn: var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-display: var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
+  --font-heading: var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
   --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
 }

package/build/tailwind/dark.preset.cjs

@@ -52,6 +52,7 @@ module.exports = {
   "breakpoint-shell": "73.75rem",
   "breakpoint-3xl": "112.5rem",
   "radius-none": "0",
+  "radius-xs": "0.125rem",
   "radius-sm": "0.25rem",
   "radius-md": "0.375rem",
   "radius-lg": "0.5rem",
@@ -67,7 +68,7 @@ module.exports = {
   "duration-reveal": "300ms",
   "duration-cinematic": "500ms",
   "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
+  "ease-out": "cubic-bezier(0.16, 1, 0.3, 1)",
   "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
   "ease-spring": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
   "tracking-display": "-0.04em",
@@ -78,15 +79,15 @@ module.exports = {
   "ring-hairline": "inset 0 0 0 1px rgb(255 255 255 / 0.06)",
   "overlay-faint": "rgb(255 255 255 / 0.06)",
   "font-sans":
-    'var(--font-geist-sans), "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
+    'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
   "font-cn":
-    '"Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif',
-  "font-display": 'var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif',
-  "font-heading": 'var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif',
+    'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", sans-serif',
+  "font-display":
+    'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif',
+  "font-heading":
+    'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif',
   "font-mono":
     'var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-  "transition-duration": "200ms",
-  "transition-easing": "ease-out",
   "brand-primary": "#5c7cfa",
   "brand-accent": "#1af7c8",
   "brand-tertiary": "#8b5cf6",
@@ -118,45 +119,47 @@ module.exports = {
   "neutral-3": "#1e293b",
   "neutral-4": "#334155",
   "neutral-5": "#475569",
-  "neutral-6": "#171717",
-  "neutral-7": "#262626",
-  "neutral-8": "#404040",
+  "neutral-6": "#666666",
+  "neutral-7": "#7a7a7a",
+  "neutral-8": "#8d8d8d",
   "neutral-9": "#94a3b8",
   "neutral-10": "#cbd5e1",
   "neutral-11": "#e2e8f0",
   "neutral-12": "#f8fafc",
-  "blue-1": "#000830",
-  "blue-2": "#000f59",
-  "blue-3": "#001882",
-  "blue-4": "#0021ab",
-  "blue-5": "#002ad4",
-  "blue-6": "#001882",
-  "blue-7": "#0021ab",
-  "blue-8": "#002ad4",
-  "blue-9": "#5c7cfa",
-  "blue-10": "#91a7ff",
-  "blue-11": "#bac8ff",
-  "blue-12": "#dbe4ff",
-  "cyan-1": "#012923",
-  "cyan-2": "#035143",
-  "cyan-3": "#057963",
-  "cyan-4": "#07a183",
-  "cyan-5": "#09c9a3",
-  "cyan-6": "#057963",
-  "cyan-7": "#07a183",
-  "cyan-8": "#09c9a3",
-  "cyan-9": "#1af7c8",
-  "cyan-10": "#4dfcd4",
-  "cyan-11": "#80ffe0",
-  "cyan-12": "#b3ffec",
+  "blue-1": "#030815",
+  "blue-2": "#060f25",
+  "blue-3": "#09183b",
+  "blue-4": "#0d2254",
+  "blue-5": "#132e6f",
+  "blue-6": "#1c3c8a",
+  "blue-7": "#254ba7",
+  "blue-8": "#2f5ac4",
+  "blue-9": "#396ae2",
+  "blue-10": "#3f70e3",
+  "blue-11": "#89aaee",
+  "blue-12": "#d2e0fd",
+  "blue-contrast": "#ffffff",
+  "cyan-1": "#04100c",
+  "cyan-2": "#091e18",
+  "cyan-3": "#0f2e25",
+  "cyan-4": "#1c4035",
+  "cyan-5": "#2b5347",
+  "cyan-6": "#307864",
+  "cyan-7": "#309e82",
+  "cyan-8": "#28c7a2",
+  "cyan-9": "#0bf1c3",
+  "cyan-10": "#5af8ce",
+  "cyan-11": "#90fbdb",
+  "cyan-12": "#bdfde8",
+  "cyan-contrast": "#0d2b25",
   background: "222 14% 9%",
   foreground: "210 18% 96%",
   card: "222 12% 13%",
   "card-foreground": "210 18% 96%",
   popover: "222 12% 13%",
   "popover-foreground": "210 18% 96%",
-  primary: "228 90% 72%",
-  "primary-foreground": "222 14% 9%",
+  primary: "222.6 74.4% 55.5%",
+  "primary-foreground": "0 0% 100%",
   secondary: "222 10% 18%",
   "secondary-foreground": "210 18% 96%",
   muted: "222 10% 17%",
@@ -165,10 +168,13 @@ module.exports = {
   "accent-foreground": "228 95% 80%",
   destructive: "0 63% 38%",
   "destructive-foreground": "210 18% 96%",
+  "destructive-strong": "0 80% 66%",
   success: "142 60% 42%",
   "success-foreground": "222 14% 9%",
+  "success-strong": "142 60% 42%",
   warning: "38 80% 52%",
   "warning-foreground": "222 14% 9%",
+  "warning-strong": "38 80% 52%",
   info: "228 95% 72%",
   "info-foreground": "222 14% 9%",
   border: "220 8% 22%",
@@ -233,4 +239,26 @@ module.exports = {
     "0 0 0 1px rgb(92 124 250 / 0.25), 0 4px 20px -2px rgb(92 124 250 / 0.3)",
   "elevation-brand-lg":
     "0 0 0 1px rgb(92 124 250 / 0.3), 0 8px 40px -4px rgb(92 124 250 / 0.4)",
+  "elevation-ambient-sm":
+    "0 1px 2px -1px rgb(0 0 0 / 0.4), 0 6px 16px -6px rgb(0 0 0 / 0.5)",
+  "elevation-ambient-md":
+    "0 2px 4px -2px rgb(0 0 0 / 0.4), 0 12px 32px -10px rgb(0 0 0 / 0.55)",
+  "elevation-ambient-lg":
+    "0 4px 8px -4px rgb(0 0 0 / 0.4), 0 24px 56px -18px rgb(0 0 0 / 0.6)",
+  "elevation-glass-sm":
+    "inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.4), 0 6px 16px -6px rgb(0 0 0 / 0.5)",
+  "elevation-glass-md":
+    "inset 0 1px 0 rgb(255 255 255 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.4), 0 12px 32px -10px rgb(0 0 0 / 0.55)",
+  "elevation-glass-lg":
+    "inset 0 1px 0 rgb(255 255 255 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.4), 0 24px 56px -18px rgb(0 0 0 / 0.6)",
+  "elevation-sheen": "inset 0 1px 0 rgb(0 0 0 / 0.12)",
+  "elevation-ambient-glow": "0 0 80px rgb(255 255 255 / 0.06)",
+  "elevation-glow-accent":
+    "0 8px 32px rgb(0 0 0 / 0.4), 0 0 60px color-mix(in srgb, var(--brand-accent) 8%, transparent)",
+  "elevation-glow-accent-lg":
+    "0 12px 48px rgb(0 0 0 / 0.5), 0 0 80px color-mix(in srgb, var(--brand-accent) 12%, transparent)",
+  "elevation-glow-accent-sm":
+    "0 0 20px color-mix(in srgb, var(--brand-accent) 10%, transparent)",
+  "elevation-glow-primary":
+    "0 20px 25px -5px hsl(var(--primary) / 0.05), 0 8px 10px -6px hsl(var(--primary) / 0.05)",
 };

package/build/tailwind/light.preset.cjs

@@ -52,6 +52,7 @@ module.exports = {
   "breakpoint-shell": "73.75rem",
   "breakpoint-3xl": "112.5rem",
   "radius-none": "0",
+  "radius-xs": "0.125rem",
   "radius-sm": "0.25rem",
   "radius-md": "0.375rem",
   "radius-lg": "0.5rem",
@@ -67,7 +68,7 @@ module.exports = {
   "duration-reveal": "300ms",
   "duration-cinematic": "500ms",
   "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
+  "ease-out": "cubic-bezier(0.16, 1, 0.3, 1)",
   "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
   "ease-spring": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
   "tracking-display": "-0.04em",
@@ -78,15 +79,15 @@ module.exports = {
   "ring-hairline": "inset 0 0 0 1px rgb(255 255 255 / 0.04)",
   "overlay-faint": "rgb(0 0 0 / 0.06)",
   "font-sans":
-    'var(--font-geist-sans), "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
+    'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
   "font-cn":
-    '"Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif',
-  "font-display": 'var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif',
-  "font-heading": 'var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif',
+    'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", "Microsoft YaHei", sans-serif',
+  "font-display":
+    'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif',
+  "font-heading":
+    'var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif',
   "font-mono":
     'var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-  "transition-duration": "200ms",
-  "transition-easing": "ease-out",
   "brand-primary": "#0033fe",
   "brand-accent": "#0bf1c3",
   "brand-tertiary": "#8b5cf6",
@@ -118,44 +119,46 @@ module.exports = {
   "neutral-3": "#f1f5f9",
   "neutral-4": "#e2e8f0",
   "neutral-5": "#cbd5e1",
-  "neutral-6": "#e2e8f0",
-  "neutral-7": "#cbd5e1",
-  "neutral-8": "#94a3b8",
+  "neutral-6": "#b0bccb",
+  "neutral-7": "#96a3b5",
+  "neutral-8": "#7d8ba0",
   "neutral-9": "#64748b",
   "neutral-10": "#475569",
   "neutral-11": "#334155",
   "neutral-12": "#0f172a",
-  "blue-1": "#f0f4ff",
-  "blue-2": "#dbe4ff",
-  "blue-3": "#bac8ff",
-  "blue-4": "#91a7ff",
-  "blue-5": "#5c7cfa",
-  "blue-6": "#bac8ff",
-  "blue-7": "#91a7ff",
-  "blue-8": "#5c7cfa",
-  "blue-9": "#0033fe",
-  "blue-10": "#002ad4",
-  "blue-11": "#0021ab",
-  "blue-12": "#000f59",
-  "cyan-1": "#e6fff8",
-  "cyan-2": "#b3ffec",
-  "cyan-3": "#80ffe0",
-  "cyan-4": "#4dfcd4",
-  "cyan-5": "#1af7c8",
-  "cyan-6": "#80ffe0",
-  "cyan-7": "#4dfcd4",
-  "cyan-8": "#1af7c8",
+  "blue-1": "#fafcfe",
+  "blue-2": "#f2f6fd",
+  "blue-3": "#e7eefc",
+  "blue-4": "#d8e4fb",
+  "blue-5": "#c6d7fa",
+  "blue-6": "#9fbcf9",
+  "blue-7": "#79a1f7",
+  "blue-8": "#5384f3",
+  "blue-9": "#2e65ee",
+  "blue-10": "#2253d4",
+  "blue-11": "#1740ad",
+  "blue-12": "#031654",
+  "blue-contrast": "#ffffff",
+  "cyan-1": "#f9fdfb",
+  "cyan-2": "#effbf7",
+  "cyan-3": "#daf9ee",
+  "cyan-4": "#c3f6e4",
+  "cyan-5": "#a3f2d8",
+  "cyan-6": "#8eefd1",
+  "cyan-7": "#77ecc9",
+  "cyan-8": "#5be8c2",
   "cyan-9": "#0bf1c3",
-  "cyan-10": "#09c9a3",
-  "cyan-11": "#07a183",
-  "cyan-12": "#035143",
+  "cyan-10": "#33e5bb",
+  "cyan-11": "#027a61",
+  "cyan-12": "#004133",
+  "cyan-contrast": "#0d2b25",
   background: "0 0% 100%",
   foreground: "222 47% 11%",
   card: "0 0% 100%",
   "card-foreground": "222 47% 11%",
   popover: "0 0% 100%",
   "popover-foreground": "222 47% 11%",
-  primary: "228 85% 56%",
+  primary: "222.8 85% 55.7%",
   "primary-foreground": "0 0% 100%",
   secondary: "210 40% 96%",
   "secondary-foreground": "222 47% 11%",
@@ -165,10 +168,13 @@ module.exports = {
   "accent-foreground": "228 85% 56%",
   destructive: "0 84% 45%",
   "destructive-foreground": "0 0% 100%",
+  "destructive-strong": "0 84% 45%",
   success: "142 71% 29%",
   "success-foreground": "0 0% 100%",
+  "success-strong": "142 71% 27%",
   warning: "38 92% 50%",
   "warning-foreground": "222 47% 11%",
+  "warning-strong": "38 92% 30%",
   info: "228 85% 56%",
   "info-foreground": "0 0% 100%",
   border: "240 5.9% 90%",
@@ -233,4 +239,26 @@ module.exports = {
     "0 0 0 1px rgb(0 51 254 / 0.15), 0 4px 20px -2px rgb(0 51 254 / 0.2)",
   "elevation-brand-lg":
     "0 0 0 1px rgb(0 51 254 / 0.2), 0 8px 40px -4px rgb(0 51 254 / 0.3)",
+  "elevation-ambient-sm":
+    "0 1px 2px -1px hsl(222 47% 11% / 0.06), 0 6px 16px -6px hsl(222 47% 11% / 0.12)",
+  "elevation-ambient-md":
+    "0 2px 4px -2px hsl(222 47% 11% / 0.06), 0 12px 32px -10px hsl(222 47% 11% / 0.14)",
+  "elevation-ambient-lg":
+    "0 4px 8px -4px hsl(222 47% 11% / 0.06), 0 24px 56px -18px hsl(222 47% 11% / 0.16)",
+  "elevation-glass-sm":
+    "inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 2px -1px hsl(222 47% 11% / 0.06), 0 6px 16px -6px hsl(222 47% 11% / 0.12)",
+  "elevation-glass-md":
+    "inset 0 1px 0 rgb(255 255 255 / 0.5), 0 2px 4px -2px hsl(222 47% 11% / 0.06), 0 12px 32px -10px hsl(222 47% 11% / 0.14)",
+  "elevation-glass-lg":
+    "inset 0 1px 0 rgb(255 255 255 / 0.5), 0 4px 8px -4px hsl(222 47% 11% / 0.06), 0 24px 56px -18px hsl(222 47% 11% / 0.16)",
+  "elevation-sheen": "inset 0 1px 0 rgb(255 255 255 / 0.2)",
+  "elevation-ambient-glow": "0 0 80px hsl(222 47% 11% / 0.1)",
+  "elevation-glow-accent":
+    "0 8px 32px rgb(0 0 0 / 0.4), 0 0 60px color-mix(in srgb, var(--brand-accent) 8%, transparent)",
+  "elevation-glow-accent-lg":
+    "0 12px 48px rgb(0 0 0 / 0.5), 0 0 80px color-mix(in srgb, var(--brand-accent) 12%, transparent)",
+  "elevation-glow-accent-sm":
+    "0 0 20px color-mix(in srgb, var(--brand-accent) 10%, transparent)",
+  "elevation-glow-primary":
+    "0 20px 25px -5px hsl(var(--primary) / 0.05), 0 8px 10px -6px hsl(var(--primary) / 0.05)",
 };

package/build/ts/dark.d.ts

@@ -70,19 +70,29 @@ export const SizeBreakpointTight: string;
 export const SizeBreakpointShell: string;
 /** 1800px — 4K / Studio Display friendliness */
 export const SizeBreakpoint3xl: string;
+/** Job: flush. Edge-to-edge surfaces — a full-bleed table row, a segment welded to its neighbour, an inset that must not round twice. */
 export const SizeRadiusNone: string;
+/** Job: swatch. The smallest corner that still reads as intentional at 8-12px: chart legend keys, mark highlights, progress and sparkline bar caps. Added because 18 call sites had hand-written 1px, 2px and 3px corners with no step to reach for. Matches the bottom of the Tailwind scale, so rounded-xs and var(--radius-xs) agree. */
+export const SizeRadiusXs: string;
+/** Job: inner. The corner of something nested inside a control — a thumbnail inside a chip, a swatch inside a tile, a code span inside a paragraph. One step inside md. */
 export const SizeRadiusSm: string;
+/** Job: control. The default for anything you can click or type into at text height: input, select trigger, small button, menu item, badge with square corners. The most-used step on the ladder. */
 export const SizeRadiusMd: string;
+/** Job: container. Things that hold controls rather than being one: popover, dropdown surface, tooltip, toolbar, inline code block. Aliased as radius-button. */
 export const SizeRadiusLg: string;
+/** Job: card. A discrete surface in a list or grid that carries its own padding and elevation. Aliased as radius-card. */
 export const SizeRadiusXl: string;
+/** Job: panel. A region that holds cards — bento cell, dialog, sheet, dashboard section. Aliased as radius-panel. */
 export const SizeRadius2xl: string;
+/** Job: frame. The outermost shell of a marketing or docs composition — mockup window, hero frame, screenshot chrome. The top of the ladder. */
 export const SizeRadius3xl: string;
+/** Job: pill. Fully round by intent, not by size: avatar, dot, toggle track, tag. Kept as one step, not a pair, so there is exactly one way to say round. */
 export const SizeRadiusFull: string;
-/** 2026 button radius — Vercel/Linear/Cursor consensus */
+/** Intent alias for the container step. Reach for this in product code instead of lg so the shape can be re-tuned in one place. */
 export const SizeRadiusButton: string;
-/** 2026 card radius */
+/** Intent alias for the card step. Reach for this in product code instead of xl. */
 export const SizeRadiusCard: string;
-/** 2026 bento/hero panel radius */
+/** Intent alias for the panel step. Reach for this in product code instead of 2xl. */
 export const SizeRadiusPanel: string;
 /** Micro-feedback: hover, focus, toggle, button press */
 export const DurationMicro: string;
@@ -109,6 +119,7 @@ export const RingHairline: string;
 /** Dark-mode faint overlay (6% white) — inverted from light */
 export const OverlayFaint: string;
 export const FontFamilySans: string;
+/** CJK-locale stack — same order as sans, minus the Latin-only system faces */
 export const FontFamilyCn: string;
 export const FontFamilyDisplay: string;
 export const FontFamilyHeading: string;
@@ -119,13 +130,9 @@ export const TransitionDefault: {
   timingFunction: string;
   delay: string;
 };
-/** Default transition duration — 200ms flow rail. */
-export const TransitionDuration: string;
-/** ease-out keyword form (CSS-friendly). Equivalent to cubic-bezier(0,0,0.2,1). */
-export const TransitionEasing: string;
-/** Dark-mode brand primary — visible against dark surfaces (uses --blue-9 = nebutra-blue-400). */
+/** Dark-mode brand primary — the identity blue lifted to nebutra-blue-400 so it stays visible on dark surfaces. This is the identity alias, not the functional fill: the dark solid fill is --blue-9 (#396ae2, white label 4.85:1). The two are deliberately separate now that the VI hex is no longer pinned into ramp slot 9. */
 export const BrandPrimary: string;
-/** Dark-mode brand accent — visible against dark surfaces (uses --cyan-9 = nebutra-cyan-400). */
+/** Dark-mode brand accent — nebutra-cyan-400 (L* 87.1). The functional bright fill is --cyan-9 (#0bf1c3, L* 85.41), the same hex in both modes; dark ink for it is --cyan-contrast at 10.35:1. */
 export const BrandAccent: string;
 export const BrandTertiary: string;
 /** Legacy alias of --primary (shadcn product blue). Prefer bg-primary / Button default. */
@@ -165,44 +172,77 @@ export const ScaleNeutral2: string;
 export const ScaleNeutral3: string;
 export const ScaleNeutral4: string;
 export const ScaleNeutral5: string;
+/** subtle border — DERIVED: OKLab lerp step5 → step9 at t=0.25, chroma forced to 0. The achromatic result is deliberate and preserves the documented intent of color.nebutra-gray ('used where blue undertone clashes — primarily dark-mode borders, dividers, elevation hairlines'). What was broken was the LIGHTNESS: gray-900/800/700 are darker than the slate background tier they sit above, so the border read as a hole rather than a hairline. */
 export const ScaleNeutral6: string;
+/** default border — DERIVED: OKLab lerp step5 → step9 at t=0.50, chroma 0. */
 export const ScaleNeutral7: string;
+/** hovered border — DERIVED: OKLab lerp step5 → step9 at t=0.75, chroma 0. */
 export const ScaleNeutral8: string;
 export const ScaleNeutral9: string;
 export const ScaleNeutral10: string;
 export const ScaleNeutral11: string;
 export const ScaleNeutral12: string;
+/** app tint — L* 13.59, C 0.031, hue 264. */
 export const ScaleBlue1: string;
+/** subtle background — L* 17.43, C 0.048. */
 export const ScaleBlue2: string;
+/** component background default — L* 22.04, C 0.071. */
 export const ScaleBlue3: string;
+/** component background hover — L* 26.99, C 0.095. */
 export const ScaleBlue4: string;
+/** component background active — L* 32.46, C 0.118. Anchor for the derived border tier. */
 export const ScaleBlue5: string;
+/** subtle border — DERIVED at build time (scripts/derive-border-tier.mjs): OKLab lerp of step 5 toward step9 (deep scale, span 23.5 L*) at t=0.25. The value here is a placeholder anchor only; the preprocessor overwrites it. Lands at L* 38.25, C 0.136. */
 export const ScaleBlue6: string;
+/** default border — DERIVED at build time (scripts/derive-border-tier.mjs): OKLab lerp of step 5 toward step9 (deep scale, span 23.5 L*) at t=0.50. The value here is a placeholder anchor only; the preprocessor overwrites it. Lands at L* 44.21, C 0.155. */
 export const ScaleBlue7: string;
+/** hovered border — DERIVED at build time (scripts/derive-border-tier.mjs): OKLab lerp of step 5 toward step9 (deep scale, span 23.5 L*) at t=0.75. The value here is a placeholder anchor only; the preprocessor overwrites it. Lands at L* 50.01, C 0.173. */
 export const ScaleBlue8: string;
+/** solid fill — L* 55.92, C 0.191, hue 264.3. White label 4.85:1. Same value as the dark shadcn --primary, so light and dark both take their deep fill from one source. Chroma ceiling for dark is 0.190; this is 0.191. */
 export const ScaleBlue9: string;
+/** solid fill hover — L* 57.44, C 0.183. White label 4.53:1. The hover has to move UP in a dark ramp, which costs contrast, so the step is deliberately small (1.52 L*) to keep white above 4.5:1. */
 export const ScaleBlue10: string;
+/** secondary text — L* 74.01, C 0.106. 8.62:1 on step 1. */
 export const ScaleBlue11: string;
+/** primary text — L* 90.52, C 0.043. 15.08:1 on step 1. */
 export const ScaleBlue12: string;
+/** Label ink for the solid fill tier. Absolute value, identical in both modes. 4.85:1 on step 9, 4.53:1 on step 10. */
+export const ScaleBlueContrast: string;
+/** app tint — L* 15.90, C 0.021, hue 172. */
 export const ScaleCyan1: string;
+/** subtle background — L* 21.54, C 0.030. */
 export const ScaleCyan2: string;
+/** component background default — L* 27.46, C 0.041. */
 export const ScaleCyan3: string;
+/** component background hover — L* 34.10, C 0.046. */
 export const ScaleCyan4: string;
+/** component background active — L* 40.88, C 0.050. Anchor for the derived border tier. */
 export const ScaleCyan5: string;
+/** subtle border — DERIVED at build time (scripts/derive-border-tier.mjs): OKLab lerp of step 5 toward step9 (span 44.5 L*) at t=0.25. The value here is a placeholder anchor only; the preprocessor overwrites it. Lands at L* 52.12, C 0.079. */
 export const ScaleCyan6: string;
+/** default border — DERIVED at build time (scripts/derive-border-tier.mjs): OKLab lerp of step 5 toward step9 (span 44.5 L*) at t=0.50. The value here is a placeholder anchor only; the preprocessor overwrites it. Lands at L* 63.04, C 0.107. */
 export const ScaleCyan7: string;
+/** hovered border — DERIVED at build time (scripts/derive-border-tier.mjs): OKLab lerp of step 5 toward step9 (span 44.5 L*) at t=0.75. The value here is a placeholder anchor only; the preprocessor overwrites it. Lands at L* 74.30, C 0.136. */
 export const ScaleCyan8: string;
+/** solid fill — same bright value as light mode, the way Radix ships one hex for mint-9 in both modes: L* 85.41, C 0.164. Ink 10.35:1 against --cyan-contrast. */
 export const ScaleCyan9: string;
+/** solid fill hover — L* 88.53, C 0.145, 3.12 L* above step 9 (Radix mint dark moves up 4.60 L*). Ink 11.34:1. */
 export const ScaleCyan10: string;
+/** secondary text — L* 91.46, C 0.110. 15.68:1 on step 1. */
 export const ScaleCyan11: string;
+/** primary text — L* 94.54, C 0.070. 16.95:1 on step 1. */
 export const ScaleCyan12: string;
+/** Label ink for the bright fill tier. Absolute near-black, identical in both modes. 10.35:1 on step 9, 11.34:1 on step 10. */
+export const ScaleCyanContrast: string;
 export const ShadcnBackground: string;
 export const ShadcnForeground: string;
 export const ShadcnCard: string;
 export const ShadcnCardForeground: string;
 export const ShadcnPopover: string;
 export const ShadcnPopoverForeground: string;
+/** Dark-mode action blue, paired with the near-black --primary-foreground, not white. #396ae2 keeps the VI hue and sits at L*55.9 C0.191. */
 export const ShadcnPrimary: string;
+/** White, matching light mode and matching --blue-contrast. It was near-black (222 14% 9%) when --primary was a LIGHT fill at L* 68.3, where dark ink read 6.20:1. Once --primary became a deep fill at L* 55.9 the pairing inverted and measured 3.74:1, below AA — the fill moved and the ink did not. The deep-fill tier takes white in both modes; --blue-contrast says the same thing, and they must agree because --primary and --blue-9 are now the same value. */
 export const ShadcnPrimaryForeground: string;
 export const ShadcnSecondary: string;
 export const ShadcnSecondaryForeground: string;
@@ -212,10 +252,16 @@ export const ShadcnAccent: string;
 export const ShadcnAccentForeground: string;
 export const ShadcnDestructive: string;
 export const ShadcnDestructiveForeground: string;
+/** Red as FOREGROUND on a dark surface. --destructive (0 63% 38%) is 2.15:1 on --card here — a fill only. Lightened to 5.18:1 on --card / 5.61:1 on --neutral-1, which sits alongside the light-mode 5.42:1 so red reads with the same weight in both themes. Use --destructive for fills with --destructive-foreground on top; use this for red text and icons. */
+export const ShadcnDestructiveStrong: string;
 export const ShadcnSuccess: string;
 export const ShadcnSuccessForeground: string;
+/** Green as foreground on a dark surface. Needs no adjustment — 142 60% 42% is already 4.83:1 as ink on its own 10% tint — so it deliberately equals --success, matching how --warning-strong behaves in this theme. */
+export const ShadcnSuccessStrong: string;
 export const ShadcnWarning: string;
 export const ShadcnWarningForeground: string;
+/** Amber as foreground on a dark surface. Unlike light mode this needs no adjustment — 38 80% 52% is already 7.98:1 against --neutral-1 — so it deliberately equals --warning. The token exists in both themes so consumers can reference one name. */
+export const ShadcnWarningStrong: string;
 export const ShadcnInfo: string;
 export const ShadcnInfoForeground: string;
 export const ShadcnBorder: string;
@@ -275,3 +321,27 @@ export const ElevationXl: string;
 export const Elevation2xl: string;
 export const ElevationBrand: string;
 export const ElevationBrandLg: string;
+/** Ambient elevation, small. Contact layer plus a wide soft pool — the marketing-surface counterpart to the tight xs..2xl product ramp. */
+export const ElevationAmbientSm: string;
+/** Ambient elevation, medium. Default resting depth for a floating marketing card. */
+export const ElevationAmbientMd: string;
+/** Ambient elevation, large. One step up from md; use for hover of a md surface, not as a resting default. */
+export const ElevationAmbientLg: string;
+/** Ambient-sm plus a lit top edge, for translucent panels over a blurred backdrop. */
+export const ElevationGlassSm: string;
+/** Ambient-md plus a lit top edge. */
+export const ElevationGlassMd: string;
+/** Ambient-lg plus a lit top edge. */
+export const ElevationGlassLg: string;
+/** Top-edge sheen for solid inverted fills (bg-foreground). Lifts with light on a dark fill, with shade on a light one. */
+export const ElevationSheen: string;
+/** Centred offsetless halo — the only non-directional step on the ramp. Inverted from the light value: a black halo has nothing to darken against a dark surround, so the halo becomes light. Keep the alpha low; this is separation, not a bloom. */
+export const ElevationAmbientGlow: string;
+/** Identical to the light value by design. The pool is theme-invariant black because glow-accent surfaces are fixed dark glass in both themes; only the accent halo shifts, via --brand-accent. */
+export const ElevationGlowAccent: string;
+/** Hover escalation of glow-accent. Identical to the light value by design. */
+export const ElevationGlowAccentLg: string;
+/** Accent halo alone, no pool. Identical to the light value by design. */
+export const ElevationGlowAccentSm: string;
+/** xl geometry tinted with the action fill at 5 percent. Same reference as light; --primary carries the dark channels. */
+export const ElevationGlowPrimary: string;