@juwel-development/design-system 3.4.0 → 3.5.0

package/README.md

@@ -74,6 +74,26 @@ on an ancestor re-points every token underneath it.
 A product re-themes the whole system by supplying its own values for the same role
 names, which is what lets one design system serve several brands.
 
+### Typography status tones
+
+Typography whose colour is selectable accepts the general `success`, `warning`, `error`, and
+`info` status tones alongside `foreground` and `muted`. This includes `H1`–`H6`, `Eyebrow`, `P`,
+`Note`, and `Prose.Body`; fixed-colour members such as `Prose.Lede` and `Prose.Tail` remain fixed.
+
+```tsx
+<P color={'warning'}>Warning: patience is low and the offer gap is wide.</P>
+```
+
+A status tone reinforces status that the content already communicates: never use colour as the
+only cue. Selecting one changes only the semantic text colour and does not add an ARIA role, live
+region, icon, or wording. The caller remains responsible for announcement behavior when a changing
+status needs it.
+
+All four palette roles must remain at least 4.5:1 against `surface` in every theme because they can
+paint normal-size and small text. They remain general roles rather than typography-only tokens, so
+constraints from other carriers also apply; `error`, for example, remains Meter's depletion
+endpoint and must keep that complete path at least 3:1 against `meterTrack`.
+
 ### Single-theme builds
 
 `styles.css` and `tokens.css` carry both colour sets, so a product that ships only one

package/dist/design-system.js

@@ -338,7 +338,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }, F = p("font-secondary text-label tracking-label font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "muted" }
 }), I = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
@@ -348,7 +352,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), L = p("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), R = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
@@ -358,7 +366,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), z = p("font-primary text-title leading-title tracking-optical", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), B = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
@@ -368,7 +380,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), V = p("font-primary text-subtitle leading-subtitle", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), H = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
@@ -378,7 +394,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), U = p("font-primary text-body leading-body font-bold", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), de = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
@@ -388,7 +408,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), fe = p("font-primary text-body leading-body font-semibold", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), pe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
@@ -398,7 +422,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), me = p("font-primary text-body leading-body font-medium", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), he = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
@@ -408,7 +436,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), ge = p("font-secondary text-small", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), _e = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
@@ -418,7 +450,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), ve = p("font-primary text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), ye = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
@@ -428,7 +464,11 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 }), be = p("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), xe = p("font-primary text-lede leading-lede text-foreground"), Se = p("font-primary text-body leading-body", {
 	variants: { color: {
 		foreground: "text-foreground",
-		muted: "text-muted"
+		muted: "text-muted",
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		info: "text-info"
 	} },
 	defaultVariants: { color: "foreground" }
 }), Ce = p("font-primary text-small text-muted"), we = {
@@ -932,10 +972,10 @@ var d = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, f = u, p = (e
 	disabledHover: "#64748b",
 	focusRing: "#475569",
 	link: "#2563eb",
-	success: "#10b981",
-	warning: "#f59e0b",
+	success: "#047857",
+	warning: "#b45309",
 	error: "#d63384",
-	info: "#06b6d4"
+	info: "#0e7490"
 }, pt = {
 	surface: "#0f172a",
 	foreground: "#f8fafc",

package/dist/index.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-200:oklch(92.9% .013 255.508);--color-slate-900:oklch(20.8% .042 265.755);--color-stone-50:oklch(98.5% .001 106.423);--color-white:#fff;--spacing:.25rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-meter-fill:var(--color-meter-fill);--color-meter-track:var(--color-meter-track);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--leading-label:1.5;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.isolate{isolation:isolate}.z-10{z-index:10}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:0}.m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]{margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.h-12{height:calc(var(--spacing) * 12)}.h-\[var\(--meter-track-thickness\)\]{height:var(--meter-track-thickness)}.h-\[var\(--slider-thumb-size\)\]{height:var(--slider-thumb-size)}.h-full{height:100%}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--cover-height\)\]{min-height:var(--cover-height)}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[360px\]{width:360px}.w-\[calc\(var\(--meter-level\)\*100\%\)\]{width:calc(var(--meter-level) * 100%)}.w-\[var\(--measure-action\)\]{width:var(--measure-action)}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.list-none{list-style-type:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-\[length\:var\(--tab-marker-thickness\)\]{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--tab-marker-thickness)}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-slate-200{border-color:var(--color-slate-200)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:var(--color-meter-fill)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:color-mix(in oklab,var(--color-meter-fill) calc(var(--meter-level) * 100%),var(--color-error))}}.bg-backing{background-color:var(--color-backing)}.bg-meter-fill{background-color:var(--color-meter-fill)}.bg-meter-track{background-color:var(--color-meter-track)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-4{padding:calc(var(--spacing) * 4)}.p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.px-\[var\(--tab-inset-inline\)\]{padding-inline:var(--tab-inset-inline)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-collection-item\)\]{padding-block:var(--space-collection-item)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.py-\[var\(--tab-inset-block\)\]{padding-block:var(--tab-inset-block)}.pt-1{padding-top:var(--spacing)}.pb-1{padding-bottom:var(--spacing)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-nowrap{text-wrap:nowrap}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-error{color:var(--color-error)}.text-foreground{color:var(--color-foreground)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}.aria-selected\:border-foreground[aria-selected=true]{border-color:var(--color-foreground)}.aria-selected\:text-foreground[aria-selected=true]{color:var(--color-foreground)}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media (width>=48rem){.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[12rem_minmax\(0\,1fr\)\]{grid-template-columns:12rem minmax(0,1fr)}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-baseline{align-items:baseline}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\+li\]\:border-t+li{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\+li\]\:border-solid+li{--tw-border-style:solid;border-style:solid}.\[\&\+li\]\:border-border+li{border-color:var(--color-border)}.\[\&\:\:-moz-range-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-moz-range-thumb\]\:rounded-\[var\(--radius-control\)\]::-moz-range-thumb{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-thumb\]\:border-none::-moz-range-thumb{--tw-border-style:none;border-style:none}.\[\&\:\:-moz-range-thumb\]\:bg-foreground::-moz-range-thumb{background-color:var(--color-foreground)}.\[\&\:\:-moz-range-track\]\:h-\[var\(--slider-track-thickness\)\]::-moz-range-track{height:var(--slider-track-thickness)}.\[\&\:\:-moz-range-track\]\:rounded-\[var\(--radius-control\)\]::-moz-range-track{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-track\]\:bg-control-border::-moz-range-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-\[var\(--slider-track-thickness\)\]::-webkit-slider-runnable-track{height:var(--slider-track-thickness)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-runnable-track{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-control-border::-webkit-slider-runnable-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-thumb\]\:mt-\[calc\(\(var\(--slider-track-thickness\)-var\(--slider-thumb-size\)\)\/2\)\]::-webkit-slider-thumb{margin-top:calc((var(--slider-track-thickness) - var(--slider-thumb-size)) / 2)}.\[\&\:\:-webkit-slider-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-thumb{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-thumb\]\:bg-foreground::-webkit-slider-thumb{background-color:var(--color-foreground)}.\[\&\:disabled\:\:-moz-range-thumb\]\:bg-disabled:disabled::-moz-range-thumb{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-moz-range-track\]\:bg-disabled:disabled::-moz-range-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-runnable-track\]\:bg-disabled:disabled::-webkit-slider-runnable-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-thumb\]\:bg-disabled:disabled::-webkit-slider-thumb{background-color:var(--color-disabled)}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:not\(\[data-notes\]\)\]\:overflow-x-auto:not([data-notes]){overflow-x:auto}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}@media (width>=64rem){.lg\:\[\&\>dd\]\:col-start-2>dd{grid-column-start:2}.lg\:\[\&\>dd\]\:row-start-1>dd{grid-row-start:1}}.\[\&\>div\:first-child\]\:border-b>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&\>div\:first-child\]\:border-solid>div:first-child{--tw-border-style:solid;border-style:solid}.\[\&\>div\:first-child\]\:border-border>div:first-child{border-color:var(--color-border)}.\[\&\>div\:first-child\]\:pb-\[var\(--space-stack\)\]>div:first-child{padding-bottom:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>div\:first-child\]\:border-r>div:first-child{border-right-style:var(--tw-border-style);border-right-width:1px}.lg\:\[\&\>div\:first-child\]\:border-b-0>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:\[\&\>div\:first-child\]\:pr-\[var\(--space-stack\)\]>div:first-child{padding-right:var(--space-stack)}.lg\:\[\&\>div\:first-child\]\:pb-0>div:first-child{padding-bottom:0}}.\[\&\>div\:first-child\>nav\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}@media (width>=64rem){.lg\:\[\&\>div\:first-child\>nav\]\:sticky>div:first-child>nav{position:sticky}.lg\:\[\&\>div\:first-child\>nav\]\:top-0>div:first-child>nav{top:0}.lg\:\[\&\>div\:first-child\>nav\]\:max-h-\[min\(100dvh\,var\(--sidebar-scrollport-height\,100dvh\)\)\]>div:first-child>nav{max-height:min(100dvh, var(--sidebar-scrollport-height,100dvh))}.lg\:\[\&\>div\:first-child\>nav\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.lg\:\[\&\>div\:first-child\>nav\]\:overflow-y-auto>div:first-child>nav{overflow-y:auto}}.\[\&\>div\:first-child\>nav\>ul\]\:flex>div:first-child>nav>ul{display:flex}.\[\&\>div\:first-child\>nav\>ul\]\:flex-col>div:first-child>nav>ul{flex-direction:column}.\[\&\>div\:first-child\>nav\>ul\]\:gap-\[var\(--space-stack\)\]>div:first-child>nav>ul{gap:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]_tbody\]\:max-md\:block[data-notes=content] tbody,.\[\&\[data-notes\=content\]_td\]\:max-md\:block[data-notes=content] td,.\[\&\[data-notes\=content\]_tfoot\]\:max-md\:block[data-notes=content] tfoot,.\[\&\[data-notes\=content\]_th\]\:max-md\:block[data-notes=content] th,.\[\&\[data-notes\=content\]_thead\]\:max-md\:block[data-notes=content] thead,.\[\&\[data-notes\=content\]_tr\]\:max-md\:block[data-notes=content] tr,.\[\&\[data-notes\=content\]\>table\]\:max-md\:block[data-notes=content]>table{display:block}.\[\&\[data-notes\=supplementary\]_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary] [data-variant=note]{display:none}}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-meter-fill:#0f172a;--color-meter-track:#e2e8f0;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-meter-fill:#f8fafc;--color-meter-track:#334155;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--measure-action:20rem;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--space-collection-item:1em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--tick-length:.9rem;--tick-thickness:1px;--tab-marker-thickness:2px;--tab-inset-inline:1em;--tab-inset-block:.5em;--slider-track-thickness:.25rem;--slider-thumb-size:1.5rem;--meter-track-thickness:.5rem}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-200:oklch(92.9% .013 255.508);--color-slate-900:oklch(20.8% .042 265.755);--color-stone-50:oklch(98.5% .001 106.423);--color-white:#fff;--spacing:.25rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-meter-fill:var(--color-meter-fill);--color-meter-track:var(--color-meter-track);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--leading-label:1.5;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.isolate{isolation:isolate}.z-10{z-index:10}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:0}.m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]{margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.h-12{height:calc(var(--spacing) * 12)}.h-\[var\(--meter-track-thickness\)\]{height:var(--meter-track-thickness)}.h-\[var\(--slider-thumb-size\)\]{height:var(--slider-thumb-size)}.h-full{height:100%}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--cover-height\)\]{min-height:var(--cover-height)}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[360px\]{width:360px}.w-\[calc\(var\(--meter-level\)\*100\%\)\]{width:calc(var(--meter-level) * 100%)}.w-\[var\(--measure-action\)\]{width:var(--measure-action)}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[var\(--control-min-width\)\]{min-width:var(--control-min-width)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.list-none{list-style-type:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-\[length\:var\(--tab-marker-thickness\)\]{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--tab-marker-thickness)}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-slate-200{border-color:var(--color-slate-200)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:var(--color-meter-fill)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:color-mix(in oklab,var(--color-meter-fill) calc(var(--meter-level) * 100%),var(--color-error))}}.bg-backing{background-color:var(--color-backing)}.bg-meter-fill{background-color:var(--color-meter-fill)}.bg-meter-track{background-color:var(--color-meter-track)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-4{padding:calc(var(--spacing) * 4)}.p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.px-\[var\(--tab-inset-inline\)\]{padding-inline:var(--tab-inset-inline)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-collection-item\)\]{padding-block:var(--space-collection-item)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.py-\[var\(--tab-inset-block\)\]{padding-block:var(--tab-inset-block)}.pt-1{padding-top:var(--spacing)}.pb-1{padding-bottom:var(--spacing)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-nowrap{text-wrap:nowrap}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-error{color:var(--color-error)}.text-foreground{color:var(--color-foreground)}.text-info{color:var(--color-info)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}.aria-selected\:border-foreground[aria-selected=true]{border-color:var(--color-foreground)}.aria-selected\:text-foreground[aria-selected=true]{color:var(--color-foreground)}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}@media (width>=48rem){.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[12rem_minmax\(0\,1fr\)\]{grid-template-columns:12rem minmax(0,1fr)}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-baseline{align-items:baseline}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\+li\]\:border-t+li{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\+li\]\:border-solid+li{--tw-border-style:solid;border-style:solid}.\[\&\+li\]\:border-border+li{border-color:var(--color-border)}.\[\&\:\:-moz-range-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-moz-range-thumb\]\:rounded-\[var\(--radius-control\)\]::-moz-range-thumb{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-thumb\]\:border-none::-moz-range-thumb{--tw-border-style:none;border-style:none}.\[\&\:\:-moz-range-thumb\]\:bg-foreground::-moz-range-thumb{background-color:var(--color-foreground)}.\[\&\:\:-moz-range-track\]\:h-\[var\(--slider-track-thickness\)\]::-moz-range-track{height:var(--slider-track-thickness)}.\[\&\:\:-moz-range-track\]\:rounded-\[var\(--radius-control\)\]::-moz-range-track{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-track\]\:bg-control-border::-moz-range-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-\[var\(--slider-track-thickness\)\]::-webkit-slider-runnable-track{height:var(--slider-track-thickness)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-runnable-track{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-control-border::-webkit-slider-runnable-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-thumb\]\:mt-\[calc\(\(var\(--slider-track-thickness\)-var\(--slider-thumb-size\)\)\/2\)\]::-webkit-slider-thumb{margin-top:calc((var(--slider-track-thickness) - var(--slider-thumb-size)) / 2)}.\[\&\:\:-webkit-slider-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-thumb{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-thumb\]\:bg-foreground::-webkit-slider-thumb{background-color:var(--color-foreground)}.\[\&\:disabled\:\:-moz-range-thumb\]\:bg-disabled:disabled::-moz-range-thumb{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-moz-range-track\]\:bg-disabled:disabled::-moz-range-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-runnable-track\]\:bg-disabled:disabled::-webkit-slider-runnable-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-thumb\]\:bg-disabled:disabled::-webkit-slider-thumb{background-color:var(--color-disabled)}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:not\(\[data-notes\]\)\]\:overflow-x-auto:not([data-notes]){overflow-x:auto}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}@media (width>=64rem){.lg\:\[\&\>dd\]\:col-start-2>dd{grid-column-start:2}.lg\:\[\&\>dd\]\:row-start-1>dd{grid-row-start:1}}.\[\&\>div\:first-child\]\:border-b>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&\>div\:first-child\]\:border-solid>div:first-child{--tw-border-style:solid;border-style:solid}.\[\&\>div\:first-child\]\:border-border>div:first-child{border-color:var(--color-border)}.\[\&\>div\:first-child\]\:pb-\[var\(--space-stack\)\]>div:first-child{padding-bottom:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>div\:first-child\]\:border-r>div:first-child{border-right-style:var(--tw-border-style);border-right-width:1px}.lg\:\[\&\>div\:first-child\]\:border-b-0>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:\[\&\>div\:first-child\]\:pr-\[var\(--space-stack\)\]>div:first-child{padding-right:var(--space-stack)}.lg\:\[\&\>div\:first-child\]\:pb-0>div:first-child{padding-bottom:0}}.\[\&\>div\:first-child\>nav\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}@media (width>=64rem){.lg\:\[\&\>div\:first-child\>nav\]\:sticky>div:first-child>nav{position:sticky}.lg\:\[\&\>div\:first-child\>nav\]\:top-0>div:first-child>nav{top:0}.lg\:\[\&\>div\:first-child\>nav\]\:max-h-\[min\(100dvh\,var\(--sidebar-scrollport-height\,100dvh\)\)\]>div:first-child>nav{max-height:min(100dvh, var(--sidebar-scrollport-height,100dvh))}.lg\:\[\&\>div\:first-child\>nav\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.lg\:\[\&\>div\:first-child\>nav\]\:overflow-y-auto>div:first-child>nav{overflow-y:auto}}.\[\&\>div\:first-child\>nav\>ul\]\:flex>div:first-child>nav>ul{display:flex}.\[\&\>div\:first-child\>nav\>ul\]\:flex-col>div:first-child>nav>ul{flex-direction:column}.\[\&\>div\:first-child\>nav\>ul\]\:gap-\[var\(--space-stack\)\]>div:first-child>nav>ul{gap:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]_tbody\]\:max-md\:block[data-notes=content] tbody,.\[\&\[data-notes\=content\]_td\]\:max-md\:block[data-notes=content] td,.\[\&\[data-notes\=content\]_tfoot\]\:max-md\:block[data-notes=content] tfoot,.\[\&\[data-notes\=content\]_th\]\:max-md\:block[data-notes=content] th,.\[\&\[data-notes\=content\]_thead\]\:max-md\:block[data-notes=content] thead,.\[\&\[data-notes\=content\]_tr\]\:max-md\:block[data-notes=content] tr,.\[\&\[data-notes\=content\]\>table\]\:max-md\:block[data-notes=content]>table{display:block}.\[\&\[data-notes\=supplementary\]_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary] [data-variant=note]{display:none}}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-meter-fill:#0f172a;--color-meter-track:#e2e8f0;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#047857;--color-warning:#b45309;--color-error:#d63384;--color-info:#0e7490}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-meter-fill:#f8fafc;--color-meter-track:#334155;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--measure-action:20rem;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--space-collection-item:1em;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--tick-length:.9rem;--tick-thickness:1px;--tab-marker-thickness:2px;--tab-inset-inline:1em;--tab-inset-block:.5em;--slider-track-thickness:.25rem;--slider-thumb-size:1.5rem;--meter-track-thickness:.5rem}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}

package/dist/types/Display/Typography/Eyebrow/Eyebrow.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const eyebrow: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IEyebrowProps extends VariantProps<typeof eyebrow> {
     children: ReactNode;
@@ -15,12 +15,15 @@ interface IEyebrowProps extends VariantProps<typeof eyebrow> {
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary`, sized by `--text-label` and tracked by
  *   `--tracking-label`, at weight 500.
- * - `color` selects the `muted` (default) or `foreground` role; nothing else paints text.
+ * - `color` selects `muted` (default), `foreground`, `success`, `warning`, `error` or `info`;
+ *   nothing else paints text. A status tone changes colour only and adds no announcement semantics.
  * - Sets neither `font-variant-caps` nor `font-variant-numeric` under any prop.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is **not a form label**: it renders no `htmlFor` and labels no control. A labelled control
  *   uses `Input`/`TextArea`, which label themselves.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const Eyebrow: FunctionComponent<IEyebrowProps>;
 export {};

package/dist/types/Display/Typography/H1/H1.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h1: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH1Props extends VariantProps<typeof h1> {
     children: ReactNode;
@@ -18,7 +18,8 @@ interface IH1Props extends VariantProps<typeof h1> {
  *   because bigger type wants fewer characters per line (docs/adr/0004). The bound is the recipe's,
  *   not a caller's: the level fixes the role and the role fixes the measure, so there is no `measure`
  *   prop to select between roles (docs/adr/0008). It holds under every `color`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is an ordinary page title, and it is also a hero's lead - `display` is the hero role, so a
@@ -28,6 +29,8 @@ interface IH1Props extends VariantProps<typeof h1> {
  * - A subpage head is the exception: `PageHead` renders its own `h1` at the `title` role, the one
  *   sanctioned escape valve from level-fixes-role (docs/adr/0005). Reach for it where it fits.
  * - Heading levels descend without skipping — an `h1` is followed by an `h2`, never an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const H1: FunctionComponent<IH1Props>;
 export {};

package/dist/types/Display/Typography/H2/H2.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h2: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH2Props extends VariantProps<typeof h2> {
     children: ReactNode;
@@ -15,10 +15,13 @@ interface IH2Props extends VariantProps<typeof h2> {
  * - Reads `--font-primary`, sized by `--text-title`, led by `--leading-title` and optically corrected
  *   by `--tracking-optical` — the title role is the smallest role that carries it, so `H3` and below
  *   take none.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h2` sits under an `h1`, not under an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const H2: FunctionComponent<IH2Props>;
 export {};

package/dist/types/Display/Typography/H3/H3.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h3: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH3Props extends VariantProps<typeof h3> {
     children: ReactNode;
@@ -14,10 +14,13 @@ interface IH3Props extends VariantProps<typeof h3> {
  * @Guarantees — enforced on every render
  * - Renders an `h3`; its outline level and the subtitle role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-subtitle` and led by `--leading-subtitle`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h3` sits under an `h2`, not under an `h1`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const H3: FunctionComponent<IH3Props>;
 export {};

package/dist/types/Display/Typography/H4/H4.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h4: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH4Props extends VariantProps<typeof h4> {
     children: ReactNode;
@@ -13,10 +13,13 @@ interface IH4Props extends VariantProps<typeof h4> {
  * @Guarantees — enforced on every render
  * - Renders an `h4`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, and is bold so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h4` sits under an `h3`, not under an `h2`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const H4: FunctionComponent<IH4Props>;
 export {};

package/dist/types/Display/Typography/H5/H5.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h5: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH5Props extends VariantProps<typeof h5> {
     children: ReactNode;
@@ -14,10 +14,13 @@ interface IH5Props extends VariantProps<typeof h5> {
  * @Guarantees — enforced on every render
  * - Renders an `h5`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, semibold so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h5` sits under an `h4`, not under an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const H5: FunctionComponent<IH5Props>;
 export {};

package/dist/types/Display/Typography/H6/H6.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const h6: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IH6Props extends VariantProps<typeof h6> {
     children: ReactNode;
@@ -14,10 +14,13 @@ interface IH6Props extends VariantProps<typeof h6> {
  * @Guarantees — enforced on every render
  * - Renders an `h6`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, medium so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h6` sits under an `h5`, not under an `h4`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const H6: FunctionComponent<IH6Props>;
 export {};

package/dist/types/Display/Typography/Note/Note.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const note: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface INoteProps extends VariantProps<typeof note> {
     /** The annotation. A `ReactNode` rather than a string, because these lines carry inline links. */
@@ -16,7 +16,8 @@ export interface INoteProps extends VariantProps<typeof note> {
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary` and sized by `--text-small`.
- * - `color` selects the `foreground` (default) or `muted` role; nothing else paints text.
+ * - `color` selects `foreground` (default), `muted`, `success`, `warning`, `error` or `info`;
+ *   nothing else paints text. A status tone changes colour only.
  * - Emits no tracking, no font-weight, no measure and no margin under any prop.
  * - Carries no ARIA role and no live region under any prop.
  *
@@ -30,6 +31,8 @@ export interface INoteProps extends VariantProps<typeof note> {
  *   architecture standard's one-way dependency rule is why `Prose` restates `P`'s utilities.
  * - Where the annotation is a form's status message, `Form` owns `role="status"`/`role="alert"` by
  *   state; a `Note` announces nothing.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const Note: FunctionComponent<INoteProps>;
 export {};

package/dist/types/Display/Typography/P/P.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const p: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IPProps extends VariantProps<typeof p> {
     children: ReactNode;
@@ -13,13 +13,16 @@ interface IPProps extends VariantProps<typeof p> {
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-primary`, sized by `--text-body` and led by `--leading-body`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Where line length matters, place the paragraph inside whatever bounds the reading measure; `P`
  *   does not constrain its own width.
  * - For a paragraph inside a reading column, reach for `Prose.Body`, which is measure-bounded by its
  *   `Prose.Root`; `P` is for a paragraph with no reading column around it.
+ * - Status-toned content communicates its status without relying on colour. If a change needs to be
+ *   announced, the caller owns that behavior; selecting a tone does not create a status event.
  */
 export declare const P: FunctionComponent<IPProps>;
 export {};

package/dist/types/Display/Typography/Prose/Prose.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 declare const proseBody: (props?: ({
-    color?: "foreground" | "muted" | null | undefined;
+    color?: "foreground" | "muted" | "success" | "warning" | "error" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IProseRootProps {
     children?: ReactNode;
@@ -26,12 +26,15 @@ interface IProseTailProps {
  *   `--measure`, setting no font-size so the `ch` measure resolves against inherited body type.
  * - `Root` stacks its children on `--space-stack` and takes no outer margin: the page owns the
  *   rhythm around the block, and the air the block wants is at its edges and inside the type.
- * - `Lede` renders a `p` at the lede role; `Body` at the body role with a `foreground`/`muted`
- *   `color`; `Tail` at the small role, muted. No drop cap or other invented device.
+ * - `Lede` renders a fixed-foreground `p` at the lede role; `Body` at the body role with a
+ *   `foreground`, `muted`, `success`, `warning`, `error` or `info` `color`; `Tail` at the small
+ *   role, always muted. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Use `Prose.Body` for a paragraph inside this reading column; for a paragraph with no reading
  *   column around it - in a form, a card, a table cell - use `P` instead.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export declare const Prose: {
     readonly Root: FunctionComponent<IProseRootProps>;

package/dist/types/Theme/Palette.d.ts

@@ -95,11 +95,18 @@ export type PaletteTokens = {
      *  carries the text threshold, not the 3:1 the ring takes. Constraint (WCAG 2.2 SC 1.4.3): at
      *  least 4.5:1 against `surface` in the same theme. */
     link: string;
-    /** Status colours. Not yet consumed by a component - they complete the role set so the
-     *  first Alert or Toast has names to reach for instead of inventing them. */
+    /** The success status tone. Status tones reinforce content independently of their carrier and
+     *  carry no announcement behavior. Constraint (WCAG 2.2 SC 1.4.3): at least 4.5:1 against
+     *  `surface` in the same theme. */
     success: string;
+    /** The warning status tone. Carries the general status-tone contract and 4.5:1-against-`surface`
+     *  constraint stated on `success`. */
     warning: string;
+    /** The error status tone. Carries the general status-tone contract and 4.5:1-against-`surface`
+     *  constraint stated on `success`, plus the depletion-path constraint stated on `meterFill`. */
     error: string;
+    /** The informational status tone. Carries the general status-tone contract and
+     *  4.5:1-against-`surface` constraint stated on `success`. */
     info: string;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@juwel-development/design-system",
-	"version": "3.4.0",
+	"version": "3.5.0",
 	"type": "module",
 	"description": "Shared design system: tokens and components.",
 	"license": "MIT",

package/src/Display/Typography/Eyebrow/Eyebrow.tsx

@@ -10,7 +10,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const eyebrow = cva('font-secondary text-label tracking-label font-medium', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'muted' },
 });
@@ -28,12 +35,15 @@ interface IEyebrowProps extends VariantProps<typeof eyebrow> {
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary`, sized by `--text-label` and tracked by
  *   `--tracking-label`, at weight 500.
- * - `color` selects the `muted` (default) or `foreground` role; nothing else paints text.
+ * - `color` selects `muted` (default), `foreground`, `success`, `warning`, `error` or `info`;
+ *   nothing else paints text. A status tone changes colour only and adds no announcement semantics.
  * - Sets neither `font-variant-caps` nor `font-variant-numeric` under any prop.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is **not a form label**: it renders no `htmlFor` and labels no control. A labelled control
  *   uses `Input`/`TextArea`, which label themselves.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Eyebrow: FunctionComponent<IEyebrowProps> = ({
   children,

package/src/Display/Typography/H1/H1.tsx

@@ -12,7 +12,14 @@ const h1 = cva(
   'font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]',
   {
     variants: {
-      color: { foreground: 'text-foreground', muted: 'text-muted' },
+      color: {
+        foreground: 'text-foreground',
+        muted: 'text-muted',
+        success: 'text-success',
+        warning: 'text-warning',
+        error: 'text-error',
+        info: 'text-info',
+      },
     },
     defaultVariants: { color: 'foreground' },
   },
@@ -34,7 +41,8 @@ interface IH1Props extends VariantProps<typeof h1> {
  *   because bigger type wants fewer characters per line (docs/adr/0004). The bound is the recipe's,
  *   not a caller's: the level fixes the role and the role fixes the measure, so there is no `measure`
  *   prop to select between roles (docs/adr/0008). It holds under every `color`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is an ordinary page title, and it is also a hero's lead - `display` is the hero role, so a
@@ -44,6 +52,8 @@ interface IH1Props extends VariantProps<typeof h1> {
  * - A subpage head is the exception: `PageHead` renders its own `h1` at the `title` role, the one
  *   sanctioned escape valve from level-fixes-role (docs/adr/0005). Reach for it where it fits.
  * - Heading levels descend without skipping — an `h1` is followed by an `h2`, never an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H1: FunctionComponent<IH1Props> = ({
   children,

package/src/Display/Typography/H2/H2.tsx

@@ -9,7 +9,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // Colour is a semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h2 = cva('font-primary text-title leading-title tracking-optical', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -27,10 +34,13 @@ interface IH2Props extends VariantProps<typeof h2> {
  * - Reads `--font-primary`, sized by `--text-title`, led by `--leading-title` and optically corrected
  *   by `--tracking-optical` — the title role is the smallest role that carries it, so `H3` and below
  *   take none.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h2` sits under an `h1`, not under an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H2: FunctionComponent<IH2Props> = ({
   children,

package/src/Display/Typography/H3/H3.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // class.
 const h3 = cva('font-primary text-subtitle leading-subtitle', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH3Props extends VariantProps<typeof h3> {
  * @Guarantees — enforced on every render
  * - Renders an `h3`; its outline level and the subtitle role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-subtitle` and led by `--leading-subtitle`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h3` sits under an `h2`, not under an `h1`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H3: FunctionComponent<IH3Props> = ({
   children,

package/src/Display/Typography/H4/H4.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h4 = cva('font-primary text-body leading-body font-bold', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -24,10 +31,13 @@ interface IH4Props extends VariantProps<typeof h4> {
  * @Guarantees — enforced on every render
  * - Renders an `h4`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, and is bold so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h4` sits under an `h3`, not under an `h2`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H4: FunctionComponent<IH4Props> = ({
   children,

package/src/Display/Typography/H5/H5.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h5 = cva('font-primary text-body leading-body font-semibold', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH5Props extends VariantProps<typeof h5> {
  * @Guarantees — enforced on every render
  * - Renders an `h5`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, semibold so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h5` sits under an `h4`, not under an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H5: FunctionComponent<IH5Props> = ({
   children,

package/src/Display/Typography/H6/H6.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h6 = cva('font-primary text-body leading-body font-medium', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH6Props extends VariantProps<typeof h6> {
  * @Guarantees — enforced on every render
  * - Renders an `h6`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, medium so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h6` sits under an `h5`, not under an `h4`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H6: FunctionComponent<IH6Props> = ({
   children,

package/src/Display/Typography/Note/Note.tsx

@@ -11,7 +11,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // the page owns the rhythm around it. Colour is re-pointed by `.dark`, so no variant carries `dark:`.
 const note = cva('font-secondary text-small', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -30,7 +37,8 @@ export interface INoteProps extends VariantProps<typeof note> {
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary` and sized by `--text-small`.
- * - `color` selects the `foreground` (default) or `muted` role; nothing else paints text.
+ * - `color` selects `foreground` (default), `muted`, `success`, `warning`, `error` or `info`;
+ *   nothing else paints text. A status tone changes colour only.
  * - Emits no tracking, no font-weight, no measure and no margin under any prop.
  * - Carries no ARIA role and no live region under any prop.
  *
@@ -44,6 +52,8 @@ export interface INoteProps extends VariantProps<typeof note> {
  *   architecture standard's one-way dependency rule is why `Prose` restates `P`'s utilities.
  * - Where the annotation is a form's status message, `Form` owns `role="status"`/`role="alert"` by
  *   state; a `Note` announces nothing.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Note: FunctionComponent<INoteProps> = ({
   children,

package/src/Display/Typography/P/P.tsx

@@ -7,7 +7,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // P owns no reading measure - that belongs to whatever owns the reading column (Prose #21).
 const p = cva('font-primary text-body leading-body', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -23,13 +30,16 @@ interface IPProps extends VariantProps<typeof p> {
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-primary`, sized by `--text-body` and led by `--leading-body`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Where line length matters, place the paragraph inside whatever bounds the reading measure; `P`
  *   does not constrain its own width.
  * - For a paragraph inside a reading column, reach for `Prose.Body`, which is measure-bounded by its
  *   `Prose.Root`; `P` is for a paragraph with no reading column around it.
+ * - Status-toned content communicates its status without relying on colour. If a change needs to be
+ *   announced, the caller owns that behavior; selecting a tone does not create a status event.
  */
 export const P: FunctionComponent<IPProps> = ({ children, color, testId }) => (
   <p className={p({ color })} data-testid={testId}>

package/src/Display/Typography/Prose/Prose.tsx

@@ -20,7 +20,14 @@ const proseLede = cva('font-primary text-lede leading-lede text-foreground');
 // semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const proseBody = cva('font-primary text-body leading-body', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -76,12 +83,15 @@ const ProseTail: FunctionComponent<IProseTailProps> = ({ children }) => (
  *   `--measure`, setting no font-size so the `ch` measure resolves against inherited body type.
  * - `Root` stacks its children on `--space-stack` and takes no outer margin: the page owns the
  *   rhythm around the block, and the air the block wants is at its edges and inside the type.
- * - `Lede` renders a `p` at the lede role; `Body` at the body role with a `foreground`/`muted`
- *   `color`; `Tail` at the small role, muted. No drop cap or other invented device.
+ * - `Lede` renders a fixed-foreground `p` at the lede role; `Body` at the body role with a
+ *   `foreground`, `muted`, `success`, `warning`, `error` or `info` `color`; `Tail` at the small
+ *   role, always muted. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Use `Prose.Body` for a paragraph inside this reading column; for a paragraph with no reading
  *   column around it - in a form, a card, a table cell - use `P` instead.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Prose = {
   Root: ProseRoot,

package/src/Theme/Palette.ts

@@ -102,11 +102,18 @@ export type PaletteTokens = {
    *  least 4.5:1 against `surface` in the same theme. */
   link: string;
 
-  /** Status colours. Not yet consumed by a component - they complete the role set so the
-   *  first Alert or Toast has names to reach for instead of inventing them. */
+  /** The success status tone. Status tones reinforce content independently of their carrier and
+   *  carry no announcement behavior. Constraint (WCAG 2.2 SC 1.4.3): at least 4.5:1 against
+   *  `surface` in the same theme. */
   success: string;
+  /** The warning status tone. Carries the general status-tone contract and 4.5:1-against-`surface`
+   *  constraint stated on `success`. */
   warning: string;
+  /** The error status tone. Carries the general status-tone contract and 4.5:1-against-`surface`
+   *  constraint stated on `success`, plus the depletion-path constraint stated on `meterFill`. */
   error: string;
+  /** The informational status tone. Carries the general status-tone contract and
+   *  4.5:1-against-`surface` constraint stated on `success`. */
   info: string;
 };
 
@@ -156,10 +163,10 @@ export const light: PaletteTokens = {
 
   link: '#2563eb',
 
-  success: '#10b981',
-  warning: '#f59e0b',
+  success: '#047857',
+  warning: '#b45309',
   error: '#d63384',
-  info: '#06b6d4',
+  info: '#0e7490',
 };
 
 /**

package/src/tokens.css

@@ -29,10 +29,10 @@
   --color-disabled-hover: #64748b;
   --color-focus-ring: var(--color-ring, #475569);
   --color-link: #2563eb;
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
+  --color-success: #047857;
+  --color-warning: #b45309;
   --color-error: #d63384;
-  --color-info: #06b6d4;
+  --color-info: #0e7490;
 }
 
 .dark {

package/src/tokens.light.css

@@ -24,10 +24,10 @@
   --color-disabled-hover: #64748b;
   --color-focus-ring: var(--color-ring, #475569);
   --color-link: #2563eb;
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
+  --color-success: #047857;
+  --color-warning: #b45309;
   --color-error: #d63384;
-  --color-info: #06b6d4;
+  --color-info: #0e7490;
 }
 
 @theme inline {