@almanaclabs/blaze-ui 0.6.0 → 0.7.0

package/README.md

@@ -1,10 +1,10 @@
 # `@almanaclabs/blaze-ui`
 
-Shared React components and semantic design tokens for Blaze.
+Shared React components and semantic design tokens for Huck.
 
 The components use shadcn's `b0` preset: Base UI primitives, the Nova style,
-neutral colors, Inter, and Tabler outline and filled icons. Component source is
-owned by this package so Blaze-specific changes stay reviewable.
+Huck's warm palette, DM Sans and Fraunces typography, and Tabler icons.
+Component source is owned by this package so design changes stay reviewable.
 
 ## Install
 

package/dist/components/attachment/attachment.js

@@ -62,7 +62,7 @@ function d({ className: t, ...n }) {
 function f({ className: t, ...n }) {
 	return /* @__PURE__ */ r("span", {
 		"data-slot": "attachment-description",
-		className: e("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80", "max-w-full", t),
+		className: e("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive", "max-w-full", t),
 		...n
 	});
 }

package/dist/components/badge/badge.js

@@ -3,22 +3,22 @@ import { cva as t } from "class-variance-authority";
 import { mergeProps as n } from "@base-ui/react/merge-props";
 import { useRender as r } from "@base-ui/react/use-render";
 //#region src/components/badge/badge.tsx
-var i = t("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent font-medium whitespace-nowrap transition-all [--icon-stroke-width:var(--icon-stroke-12)] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+var i = t("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent font-semibold whitespace-nowrap transition-all [--icon-stroke-width:var(--icon-stroke-12)] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+			default: "bg-secondary text-muted-foreground [a]:hover:bg-muted",
 			secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-			destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-			success: "bg-success/10 text-success focus-visible:ring-success/20 dark:bg-success/15 dark:focus-visible:ring-success/30 [a]:hover:bg-success/15",
-			warning: "bg-warning/10 text-warning focus-visible:ring-warning/20 dark:bg-warning/15 dark:focus-visible:ring-warning/30 [a]:hover:bg-warning/15",
+			destructive: "bg-destructive-soft text-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive-soft",
+			success: "bg-success-soft text-success focus-visible:ring-success/20 dark:focus-visible:ring-success/30 [a]:hover:bg-success-soft",
+			warning: "bg-warning-soft text-warning-foreground focus-visible:ring-warning/20 dark:focus-visible:ring-warning/30 [a]:hover:bg-warning-soft",
 			info: "bg-info/10 text-info focus-visible:ring-info/20 dark:bg-info/15 dark:focus-visible:ring-info/30 [a]:hover:bg-info/15",
 			outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
 			ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-			link: "text-primary underline-offset-4 hover:underline"
+			link: "text-link underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-5 px-2 py-0.5 text-xs",
-			md: "h-7 px-2.5 py-1 text-xs"
+			default: "min-h-6 px-2 py-1 text-[11px]",
+			md: "min-h-7 px-2.5 py-1 text-xs"
 		}
 	},
 	defaultVariants: {

package/dist/components/button/button.js

@@ -5,7 +5,7 @@ import { Button as r } from "@base-ui/react/button";
 import { cva as i } from "class-variance-authority";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/button/button.tsx
-var o = "bg-primary text-primary-foreground hover:bg-primary/80 aria-expanded:bg-primary/80", s = "border-border bg-background text-foreground hover:border-foreground/15 hover:bg-background aria-expanded:border-foreground/15 aria-expanded:bg-background", c = "bg-transparent text-foreground hover:bg-muted aria-expanded:bg-muted dark:hover:bg-muted/50", l = `${e.xs} gap-0.5 [--icon-stroke-width:var(--icon-stroke-14)] has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg:not([class*='size-'])]:size-[14px]`, u = `${e.sm} gap-1 [--icon-stroke-width:var(--icon-stroke-15)] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-[15px]`, d = `${e.md} gap-[5px] [--icon-stroke-width:var(--icon-stroke-15)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-[15px]`, f = `${e.lg} gap-1.5 [--icon-stroke-width:var(--icon-stroke-18)] has-data-[icon=inline-end]:pr-[9px] has-data-[icon=inline-start]:pl-[9px] [&_svg:not([class*='size-'])]:size-[18px]`, p = `${e.xl} gap-2 [--icon-stroke-width:var(--icon-stroke-24)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-6`, m = i("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding font-normal whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+var o = "bg-primary text-primary-foreground hover:bg-[var(--primary-hover)] aria-expanded:bg-[var(--primary-hover)]", s = "border-border bg-background text-foreground hover:border-foreground/15 hover:bg-background aria-expanded:border-foreground/15 aria-expanded:bg-background", c = "bg-transparent text-foreground hover:bg-muted aria-expanded:bg-muted dark:hover:bg-muted/50", l = `${e.xs} gap-0.5 [--icon-stroke-width:var(--icon-stroke-14)] has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg:not([class*='size-'])]:size-[14px]`, u = `${e.sm} gap-1 [--icon-stroke-width:var(--icon-stroke-15)] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-[15px]`, d = `${e.md} gap-[5px] [--icon-stroke-width:var(--icon-stroke-15)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-[15px]`, f = `${e.lg} gap-1.5 [--icon-stroke-width:var(--icon-stroke-18)] has-data-[icon=inline-end]:pr-[9px] has-data-[icon=inline-start]:pl-[9px] [&_svg:not([class*='size-'])]:size-[18px]`, p = `${e.xl} rounded-lg gap-2 [--icon-stroke-width:var(--icon-stroke-24)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-6`, m = i("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding font-semibold whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			primary: o,
@@ -13,7 +13,7 @@ var o = "bg-primary text-primary-foreground hover:bg-primary/80 aria-expanded:bg
 			tertiary: c,
 			subtle: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
 			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/10 dark:hover:bg-destructive/15 dark:focus-visible:ring-destructive/40",
-			link: "text-primary underline-offset-4 hover:underline"
+			link: "text-link underline-offset-4 hover:underline"
 		},
 		size: {
 			xs: l,
@@ -24,19 +24,19 @@ var o = "bg-primary text-primary-foreground hover:bg-primary/80 aria-expanded:bg
 			"icon-xs": "size-6 rounded-[6px] [--icon-stroke-width:var(--icon-stroke-14)] [&_svg:not([class*='size-'])]:size-[14px]",
 			"icon-sm": "size-7 rounded-[6px] [--icon-stroke-width:var(--icon-stroke-15)] [&_svg:not([class*='size-'])]:size-[15px]",
 			"icon-md": "size-8 rounded-[8px] [--icon-stroke-width:var(--icon-stroke-15)] [&_svg:not([class*='size-'])]:size-[15px]",
-			"icon-lg": "size-9 rounded-[8px] [--icon-stroke-width:var(--icon-stroke-18)] [&_svg:not([class*='size-'])]:size-[18px]",
+			"icon-lg": "size-10 rounded-[8px] [--icon-stroke-width:var(--icon-stroke-18)] [&_svg:not([class*='size-'])]:size-[18px]",
 			"icon-xl": "size-12 rounded-[10px] [--icon-stroke-width:var(--icon-stroke-24)] [&_svg:not([class*='size-'])]:size-6"
 		}
 	},
 	defaultVariants: {
 		variant: "primary",
-		size: "md"
+		size: "xl"
 	}
 });
 function h({ className: e, ...n }) {
 	return /* @__PURE__ */ a("span", {
 		"data-slot": "button-label",
-		className: t("inline-flex min-w-0 items-center justify-center pb-px", e),
+		className: t("inline-flex min-w-0 items-center justify-center", e),
 		...n
 	});
 }
@@ -47,7 +47,7 @@ function g(e) {
 	}
 	return typeof e == "number" ? /* @__PURE__ */ a(h, { children: e }) : e;
 }
-function _({ className: e, variant: i = "primary", size: o = "md", children: s, ...c }) {
+function _({ className: e, variant: i = "primary", size: o = "xl", children: s, ...c }) {
 	let l = m({
 		variant: i,
 		size: o

package/dist/components/calendar/calendar.js

@@ -84,7 +84,7 @@ function d({ className: n, day: a, modifiers: o, locale: s, ...c }) {
 		"data-range-start": o.range_start,
 		"data-range-end": o.range_end,
 		"data-range-middle": o.range_middle,
-		className: e("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", u.day, n),
+		className: e("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs", u.day, n),
 		...c
 	});
 }

package/dist/components/card/card.js

@@ -6,7 +6,7 @@ function n({ className: n, size: r = "default", ...i }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card",
 		"data-size": r,
-		className: e("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:--spacing(5)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", n),
+		className: e("group/card type-body flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-card-foreground [--card-spacing:19px] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:14px] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", n),
 		...i
 	});
 }
@@ -20,14 +20,14 @@ function r({ className: n, ...r }) {
 function i({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-title",
-		className: e("type-content font-heading font-medium group-data-[size=sm]/card:text-sm", n),
+		className: e("type-section-title font-heading group-data-[size=sm]/card:text-sm", n),
 		...r
 	});
 }
 function a({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-description",
-		className: e("text-sm text-muted-foreground", n),
+		className: e("type-body text-muted-foreground", n),
 		...r
 	});
 }

package/dist/components/input/input.js

@@ -10,11 +10,11 @@ var a = n("w-full min-w-0 rounded-md border border-input bg-background text-fore
 		sm: `${e.sm} pb-px file:h-6 file:text-sm`,
 		md: `${e.md} pb-px file:h-6 file:text-sm`,
 		lg: `${e.lg} pb-px file:h-7 file:text-base`,
-		xl: `${e.xl} pb-px file:h-8 file:text-base`
+		xl: `${e.xl} file:h-8 file:text-base`
 	} },
-	defaultVariants: { size: "md" }
+	defaultVariants: { size: "xl" }
 });
-function o({ className: e, type: n, controlSize: o = "md", ...s }) {
+function o({ className: e, type: n, controlSize: o = "xl", ...s }) {
 	let c = a({ size: o });
 	return /* @__PURE__ */ r(i, {
 		type: n,

package/dist/components/input-group/input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAyB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAG1C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAChD,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAIzC,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAcxE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAgB5E;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAoB,EACpB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC,qBAUF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAU5E;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IAC3D,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,qBAcA;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAWlC;AAED,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAyB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAG1C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAChD,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAIzC,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAcxE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAgB5E;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAoB,EACpB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC,qBAWF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAU5E;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IAC3D,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,qBAcA;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAWlC;AAED,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAA"}

package/dist/components/input-group/input-group.js

@@ -15,10 +15,10 @@ var c = o("group/input-group relative flex w-full min-w-0 items-center rounded-m
 		lg: `${e.lg} px-0 [--input-group-icon-size:18px] [--icon-stroke-width:var(--icon-stroke-18)]`,
 		xl: `${e.xl} px-0 [--input-group-icon-size:24px] [--icon-stroke-width:var(--icon-stroke-24)]`
 	} },
-	defaultVariants: { size: "md" }
-}), l = a.createContext("md");
-function u({ className: e, size: n = "md", ...r }) {
-	let i = n ?? "md";
+	defaultVariants: { size: "xl" }
+}), l = a.createContext("xl");
+function u({ className: e, size: n = "xl", ...r }) {
+	let i = n ?? "xl";
 	return /* @__PURE__ */ s(l.Provider, {
 		value: i,
 		children: /* @__PURE__ */ s("div", {
@@ -64,6 +64,7 @@ function m({ className: e, type: r = "button", variant: i = "tertiary", size: a
 	return /* @__PURE__ */ s(n, {
 		type: r,
 		"data-size": a,
+		size: a === "sm" ? "md" : a === "icon-sm" ? "icon-md" : a,
 		variant: i,
 		className: t(p({ size: a }), e),
 		...o

package/dist/components/item/item.js

@@ -30,7 +30,7 @@ var c = n("group/item flex w-full flex-wrap items-center rounded-lg border text-
 			muted: "border-transparent bg-muted/50"
 		},
 		size: {
-			default: "gap-2.5 px-3 py-2.5",
+			default: "gap-3 px-3.5 py-3.5",
 			sm: "gap-2.5 px-3 py-2.5",
 			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
 		}
@@ -85,14 +85,14 @@ function f({ className: t, ...n }) {
 function p({ className: t, ...n }) {
 	return /* @__PURE__ */ r("div", {
 		"data-slot": "item-title",
-		className: e("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", t),
+		className: e("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-semibold underline-offset-4", t),
 		...n
 	});
 }
 function m({ className: t, ...n }) {
 	return /* @__PURE__ */ r("p", {
 		"data-slot": "item-description",
-		className: e("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
+		className: e("line-clamp-2 text-left text-xs leading-[1.4] font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
 		...n
 	});
 }

package/dist/components/native-select/native-select.js

@@ -4,7 +4,7 @@ import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { IconChevronDown as i } from "@tabler/icons-react";
 //#region src/components/native-select/native-select.tsx
-function a({ className: a, size: o = "md", "aria-label": s = "Select an option", ...c }) {
+function a({ className: a, size: o = "xl", "aria-label": s = "Select an option", ...c }) {
 	return /* @__PURE__ */ r("div", {
 		className: t("group/native-select relative w-fit", a),
 		"data-slot": "native-select-wrapper",
@@ -13,7 +13,7 @@ function a({ className: a, size: o = "md", "aria-label": s = "Select an option",
 			"aria-label": s,
 			"data-slot": "native-select",
 			"data-size": o,
-			className: t("w-full min-w-0 appearance-none border border-input bg-background pt-[calc(var(--sohne-control-optical-offset)+var(--sohne-control-optical-offset))] text-foreground transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", e[o], o === "xs" && "pr-7", (o === "sm" || o === "md") && "pr-8", o === "lg" && "pr-9", o === "xl" && "pr-10"),
+			className: t("w-full min-w-0 appearance-none border border-input bg-background pt-[calc(var(--control-optical-offset,var(--sohne-control-optical-offset))+var(--control-optical-offset,var(--sohne-control-optical-offset)))] text-foreground transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", e[o], o === "xs" && "pr-7", (o === "sm" || o === "md") && "pr-8", o === "lg" && "pr-9", o === "xl" && "pr-10"),
 			...c
 		}), /* @__PURE__ */ n(i, {
 			className: t("pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground select-none", o === "xs" && "icon-optical-14 right-1.5", (o === "sm" || o === "md") && "icon-optical-15 right-2", o === "lg" && "icon-optical-18 right-[13px]", o === "xl" && "icon-optical-24 right-[18px]"),

package/dist/components/select/select.js

@@ -16,11 +16,11 @@ function l({ className: e, ...r }) {
 function u({ className: e, ...r }) {
 	return /* @__PURE__ */ n(s.Value, {
 		"data-slot": "select-value",
-		className: t("flex flex-1 translate-y-[var(--sohne-control-optical-offset)] text-left", e),
+		className: t("flex flex-1 translate-y-[var(--control-optical-offset,var(--sohne-control-optical-offset))] text-left", e),
 		...r
 	});
 }
-function d({ className: i, size: o = "md", children: c, "aria-label": l = "Select an option", ...u }) {
+function d({ className: i, size: o = "xl", children: c, "aria-label": l = "Select an option", ...u }) {
 	return /* @__PURE__ */ r(s.Trigger, {
 		"aria-label": l,
 		"data-slot": "select-trigger",

package/dist/components/sidebar/sidebar.js

@@ -314,7 +314,7 @@ function G({ className: t, ...n }) {
 var K = h("type-body peer/menu-button group/menu-button flex w-full items-center overflow-hidden text-left ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
 	variants: {
 		variant: {
-			default: "bg-transparent text-foreground hover:bg-muted hover:text-foreground active:bg-muted active:text-foreground data-open:hover:bg-muted data-open:hover:text-foreground data-active:bg-navigation-selected data-active:font-medium data-active:text-foreground data-active:hover:bg-navigation-selected",
+			default: "bg-transparent text-foreground hover:bg-muted hover:text-foreground active:bg-muted active:text-foreground data-open:hover:bg-muted data-open:hover:text-foreground data-active:bg-navigation-selected data-active:text-foreground data-active:hover:bg-navigation-selected",
 			outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
 		},
 		size: {

package/dist/components/textarea/textarea.js

@@ -5,7 +5,7 @@ import { jsx as t } from "react/jsx-runtime";
 function n({ className: n, ...r }) {
 	return /* @__PURE__ */ t("textarea", {
 		"data-slot": "textarea",
-		className: e("type-content flex field-sizing-content min-h-[92px] w-full rounded-md border border-input bg-background px-3.5 pt-[9px] pb-[11px] text-foreground transition-colors outline-none placeholder:text-foreground-tertiary hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", n),
+		className: e("type-content flex field-sizing-content min-h-[92px] w-full rounded-md border border-input bg-background px-[13px] py-3 text-foreground transition-colors outline-none placeholder:text-foreground-tertiary hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", n),
 		...r
 	});
 }

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

@@ -2,8 +2,8 @@ export declare const controlSizeClassNames: {
     readonly xs: "h-6 rounded-[6px] px-1.5 text-[13px] leading-[14px] tracking-[0.01em] [--control-padding-inline:0.375rem]";
     readonly sm: "h-7 rounded-[6px] px-2 text-sm leading-5 tracking-[0.01em] [--control-padding-inline:0.5rem]";
     readonly md: "h-8 rounded-[8px] px-[11px] text-sm leading-[15px] tracking-[0.01em] [--control-padding-inline:11px]";
-    readonly lg: "h-9 rounded-[8px] px-[13px] text-base leading-[15px] [--control-padding-inline:13px]";
-    readonly xl: "h-12 rounded-[10px] px-[18px] text-base leading-5 [--control-padding-inline:18px]";
+    readonly lg: "h-10 rounded-[8px] px-[13px] text-base leading-[15px] [--control-padding-inline:13px]";
+    readonly xl: "h-12 rounded-md px-4 text-base leading-5 [--control-padding-inline:1rem]";
 };
 export type ControlSize = keyof typeof controlSizeClassNames;
 //# sourceMappingURL=control-size.d.ts.map

package/dist/lib/control-size.js

@@ -3,8 +3,8 @@ var e = {
 	xs: "h-6 rounded-[6px] px-1.5 text-[13px] leading-[14px] tracking-[0.01em] [--control-padding-inline:0.375rem]",
 	sm: "h-7 rounded-[6px] px-2 text-sm leading-5 tracking-[0.01em] [--control-padding-inline:0.5rem]",
 	md: "h-8 rounded-[8px] px-[11px] text-sm leading-[15px] tracking-[0.01em] [--control-padding-inline:11px]",
-	lg: "h-9 rounded-[8px] px-[13px] text-base leading-[15px] [--control-padding-inline:13px]",
-	xl: "h-12 rounded-[10px] px-[18px] text-base leading-5 [--control-padding-inline:18px]"
+	lg: "h-10 rounded-[8px] px-[13px] text-base leading-[15px] [--control-padding-inline:13px]",
+	xl: "h-12 rounded-md px-4 text-base leading-5 [--control-padding-inline:1rem]"
 };
 //#endregion
 export { e as controlSizeClassNames };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almanaclabs/blaze-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Shared React components and design tokens for Blaze",
   "type": "module",
   "sideEffects": [
@@ -44,7 +44,8 @@
     "tailwindcss": ">=4.3.0 <5"
   },
   "dependencies": {
-    "@fontsource-variable/inter": "5.3.0",
+    "@fontsource-variable/dm-sans": "5.3.0",
+    "@fontsource-variable/fraunces": "5.3.0",
     "@tabler/icons-react": "3.31.0",
     "@tanstack/react-table": "8.21.3",
     "class-variance-authority": "0.7.1",

package/recipes/guided-workflow/README.md

@@ -11,6 +11,7 @@ and advance through a gated sequence.
 - One controlled contextual rail for switching among sibling work items.
 - A single scrollable canvas for the selected item's domain content.
 - Back, secondary, status, and primary actions in a persistent workflow footer.
+- Large Back and primary actions in a tighter persistent footer.
 - Responsive behavior that moves the rail above the canvas on smaller screens.
 - Semantic Blaze UI colors, spacing, focus treatment, and public components.
 - Divider-separated `GuidedWorkflowSection` blocks for task questions that share

package/recipes/guided-workflow/guided-workflow.tsx

@@ -402,14 +402,14 @@ export function GuidedWorkflowFooter({
   return (
     <footer
       className={cn(
-        'flex flex-wrap items-center justify-between gap-3 border-t bg-background px-4 py-3 md:px-6',
-        variant === 'compact' ? 'min-h-[88px]' : 'min-h-16',
+        'flex flex-wrap items-center justify-between gap-3 border-t bg-background px-4 py-2 md:px-6',
+        variant === 'compact' ? 'min-h-[72px]' : 'min-h-16',
         className,
       )}
     >
       <div className="flex min-w-0 items-center gap-3">
         {onBack ? (
-          <Button type="button" variant="secondary" size="md" onClick={onBack}>
+          <Button type="button" variant="secondary" size="lg" onClick={onBack}>
             {backLabel}
           </Button>
         ) : null}
@@ -423,7 +423,7 @@ export function GuidedWorkflowFooter({
         {secondaryActions}
         <Button
           type="button"
-          size="md"
+          size="lg"
           disabled={continueDisabled}
           onClick={onContinue}
         >

package/recipes/workspace-shell/README.md

@@ -12,8 +12,8 @@ own navigation, workflow header, canvas, and actions through slots.
   canvas scrolling, while the optional shell footer stays pinned.
 
 Both modes preserve the same account sidebar, outer workspace gutter, rounded
-workspace frame, and 56px channel header. A focused workflow is content inside the
-workspace shell, not a second application shell.
+workspace frame, and 44px channel header with a bottom divider. A focused workflow
+is content inside the workspace shell, not a second application shell.
 
 ## Preserve
 

package/recipes/workspace-shell/workspace-shell.tsx

@@ -582,7 +582,7 @@ export function WorkspaceShellRecipe({
             aria-label={channelTitle}
             className="flex min-h-0 flex-1 flex-col overflow-hidden border bg-background md:rounded-[10px]"
           >
-            <header className="flex h-14 shrink-0 items-center gap-1 px-4 md:px-5">
+            <header className="flex h-11 shrink-0 items-center gap-1 border-b px-4 md:px-5">
               <WorkspaceFrameSidebarTrigger />
               <div className="flex min-w-0 items-center gap-2">
                 {channelMark}

package/src/styles/globals.css

@@ -1,28 +1,6 @@
 @import 'tw-animate-css';
-
-@font-face {
-  font-family: 'Sohne';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 400;
-  src: url('./fonts/Sohne-Book.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Sohne';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 500;
-  src: url('./fonts/Sohne-Medium.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Sohne';
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src: url('./fonts/Sohne-Semi.woff2') format('woff2');
-}
+@import '@fontsource-variable/dm-sans/standard.css';
+@import '@fontsource-variable/fraunces/standard.css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -46,7 +24,14 @@
   }
 
   --font-heading: var(--font-sans);
-  --font-sans: 'Sohne', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-sans: 'DM Sans Variable', system-ui, sans-serif;
+  --font-accent: 'Fraunces Variable', Georgia, serif;
+  --color-canvas: var(--canvas);
+  --color-brand-surface: var(--brand-surface);
+  --color-brand-surface-foreground: var(--brand-surface-foreground);
+  --color-success-soft: var(--success-soft);
+  --color-warning-soft: var(--warning-soft);
+  --color-destructive-soft: var(--destructive-soft);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -66,6 +51,9 @@
   --color-destructive: var(--destructive);
   --color-success: var(--success);
   --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-brand-accent: var(--brand-accent);
+  --color-link: var(--link);
   --color-info: var(--info);
   --color-foreground-secondary: var(--foreground-secondary);
   --color-foreground-tertiary: var(--foreground-tertiary);
@@ -87,36 +75,37 @@
   --color-card: var(--card);
   --color-foreground: var(--foreground);
   --color-background: var(--background);
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
+  --radius-sm: 0.75rem;
+  --radius-md: 0.8125rem;
   --radius-lg: var(--radius);
-  --radius-xl: 0.75rem;
-  --radius-2xl: 0.875rem;
-  --radius-3xl: 1rem;
-  --radius-4xl: 1.25rem;
+  --radius-xl: 1.125rem;
+  --radius-2xl: 1.375rem;
+  --radius-3xl: 2rem;
+  --radius-4xl: 9999px;
 }
 
 :root {
-  --type-page-title-size: 1.5rem;
-  --type-page-title-line-height: 1.1;
-  --type-page-title-letter-spacing: -0.0125rem;
-  --type-section-title-size: 1.375rem;
-  --type-section-title-line-height: 1.2727;
+  --type-page-title-size: 1.75rem;
+  --type-page-title-line-height: 1.14;
+  --type-page-title-letter-spacing: -0.035em;
+  --type-section-title-size: 1.0625rem;
+  --type-section-title-line-height: 1.3;
   --type-section-title-letter-spacing: 0;
+  --type-accent-title-size: 1.5625rem;
+  --type-accent-title-line-height: 1.12;
   --type-content-size: 1rem;
   --type-content-line-height: 1.4;
-  --type-content-letter-spacing: 0.02em;
+  --type-content-letter-spacing: 0;
   --type-label-size: 0.875rem;
-  --type-label-line-height: 1.4286;
-  --type-label-letter-spacing: 0.02em;
-  --type-body-size: 0.875rem;
-  --type-body-line-height: 1.5;
-  --type-body-letter-spacing: 0.02em;
+  --type-label-line-height: 1.3;
+  --type-label-letter-spacing: 0;
+  --type-body-size: 0.9375rem;
+  --type-body-line-height: 1.45;
+  --type-body-letter-spacing: 0;
   --type-meta-size: 0.75rem;
-  --type-meta-line-height: 1.5;
-  --type-meta-letter-spacing: 0.02em;
-  /* Positive values move editable/selectable values down from line-box center. */
-  --sohne-control-optical-offset: 0.0625rem;
+  --type-meta-line-height: 1.4;
+  --type-meta-letter-spacing: 0;
+  --sohne-control-optical-offset: 0;
   /*
    * These are rendered CSS-pixel widths, not Tabler view-box units. Shape-level
    * non-scaling strokes keep them stable as icons resize. The scale uses only
@@ -132,90 +121,110 @@
   --icon-stroke-20: 1.5px;
   --icon-stroke-24: 1.5px;
   --icon-stroke-32: 1.5px;
-  --background: #fff;
-  --foreground: rgb(0 0 0 / 90%);
-  --foreground-secondary: rgb(0 0 0 / 60%);
-  --foreground-tertiary: rgb(0 0 0 / 56%);
+  --canvas: #f2ede5;
+  --background: #fffaf0;
+  --foreground: #251613;
+  --foreground-secondary: #74635d;
+  --foreground-tertiary: #74635d;
   --card: #fff;
-  --card-foreground: rgb(0 0 0 / 90%);
+  --card-foreground: #251613;
   --popover: #fff;
-  --popover-foreground: rgb(0 0 0 / 90%);
-  --primary: rgb(0 0 0 / 90%);
-  --primary-foreground: #fff;
-  --secondary: rgb(0 0 0 / 3%);
-  --secondary-foreground: rgb(0 0 0 / 90%);
-  --muted: rgb(0 0 0 / 3%);
-  --muted-foreground: rgb(0 0 0 / 60%);
-  --accent: rgb(0 0 0 / 5%);
-  --accent-foreground: rgb(0 0 0 / 90%);
-  --surface-subtle: rgb(0 0 0 / 2%);
-  --surface-muted: rgb(0 0 0 / 3%);
-  --navigation-selected: rgb(0 0 0 / 8%);
-  --destructive: #ad0006;
-  --success: #005f45;
-  --warning: #896900;
+  --popover-foreground: #251613;
+  --brand-accent: #ef4f40;
+  --primary: #c83c31;
+  --primary-hover: #b83e34;
+  --primary-foreground: #fff8e7;
+  --link: #c83c31;
+  --secondary: #f7eee3;
+  --secondary-foreground: #251613;
+  --muted: #f7eee3;
+  --muted-foreground: #74635d;
+  --accent: #f7eee3;
+  --accent-foreground: #251613;
+  --surface-subtle: #fff8e7;
+  --surface-muted: #f7eee3;
+  --navigation-selected: #f7eee3;
+  --brand-surface: #5a170f;
+  --brand-surface-foreground: #fff8e7;
+  --destructive: #b83e34;
+  --destructive-soft: #fae4e1;
+  --success: #2b704b;
+  --success-soft: #e4f2e8;
+  --warning: #9d651b;
+  --warning-foreground: #916017;
+  --warning-soft: #fbedd3;
   --info: #2b6595;
-  --border: rgb(0 0 0 / 8%);
-  --border-subtle: rgb(0 0 0 / 5%);
-  --input: rgb(0 0 0 / 8%);
-  --ring: rgb(0 0 0 / 40%);
+  --border: #e6d9cc;
+  --border-subtle: #e6d9cc;
+  --input: #e6d9cc;
+  --ring: #5a170f;
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
   --chart-4: oklch(0.371 0 0);
   --chart-5: oklch(0.269 0 0);
-  --radius: 0.625rem;
-  --sidebar: #f5f5f5;
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --radius: 0.875rem;
+  --sidebar: #fffaf0;
+  --sidebar-foreground: #251613;
+  --sidebar-primary: #c83c31;
+  --sidebar-primary-foreground: #fff8e7;
   --sidebar-accent: var(--navigation-selected);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-accent-foreground: #251613;
+  --sidebar-border: #e6d9cc;
+  --sidebar-ring: #5a170f;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: rgb(255 255 255 / 90%);
-  --foreground-secondary: rgb(255 255 255 / 60%);
-  --foreground-tertiary: rgb(255 255 255 / 56%);
-  --card: oklch(0.205 0 0);
-  --card-foreground: rgb(255 255 255 / 90%);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: rgb(255 255 255 / 90%);
-  --primary: rgb(255 255 255 / 90%);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: rgb(255 255 255 / 6%);
-  --secondary-foreground: rgb(255 255 255 / 90%);
-  --muted: rgb(255 255 255 / 6%);
-  --muted-foreground: rgb(255 255 255 / 60%);
-  --accent: rgb(255 255 255 / 8%);
-  --accent-foreground: rgb(255 255 255 / 90%);
-  --surface-subtle: rgb(255 255 255 / 4%);
-  --surface-muted: rgb(255 255 255 / 6%);
-  --navigation-selected: rgb(255 255 255 / 10%);
-  --destructive: oklch(0.704 0.191 22.216);
-  --success: #65c9a6;
-  --warning: #e5c559;
+  --canvas: #1a100e;
+  --background: #251613;
+  --foreground: #fffaf0;
+  --foreground-secondary: #d7c5b9;
+  --foreground-tertiary: #bba79a;
+  --card: #39241f;
+  --card-foreground: #fffaf0;
+  --popover: #39241f;
+  --popover-foreground: #fffaf0;
+  --brand-accent: #ef4f40;
+  --primary: #c83c31;
+  --primary-hover: #b83e34;
+  --primary-foreground: #fff8e7;
+  --link: #ef857b;
+  --secondary: #49312a;
+  --secondary-foreground: #fffaf0;
+  --muted: #49312a;
+  --muted-foreground: #d7c5b9;
+  --accent: #49312a;
+  --accent-foreground: #fffaf0;
+  --surface-subtle: #30201b;
+  --surface-muted: #49312a;
+  --navigation-selected: #49312a;
+  --brand-surface: #5a170f;
+  --brand-surface-foreground: #fff8e7;
+  --destructive: #ef857b;
+  --destructive-soft: #572a27;
+  --success: #86cda4;
+  --success-soft: #244a34;
+  --warning: #e9c270;
+  --warning-foreground: #e9c270;
+  --warning-soft: #59401e;
   --info: #7bb5e3;
-  --border: rgb(255 255 255 / 12%);
-  --border-subtle: rgb(255 255 255 / 8%);
-  --input: rgb(255 255 255 / 12%);
-  --ring: rgb(255 255 255 / 45%);
+  --border: #66483e;
+  --border-subtle: #49312a;
+  --input: #66483e;
+  --ring: #ef857b;
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
   --chart-4: oklch(0.371 0 0);
   --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar: #30201b;
+  --sidebar-foreground: #fffaf0;
+  --sidebar-primary: #c83c31;
+  --sidebar-primary-foreground: #fff8e7;
+  --sidebar-accent: #49312a;
+  --sidebar-accent-foreground: #fffaf0;
+  --sidebar-border: #66483e;
+  --sidebar-ring: #ef857b;
 }
 
 @layer base {
@@ -230,9 +239,8 @@
     background-color: var(--background);
     color: var(--foreground);
     font-family: var(--font-sans);
-    font-size: var(--type-body-size);
-    line-height: var(--type-body-line-height);
-    letter-spacing: var(--type-body-letter-spacing);
+    font-size: 1rem;
+    line-height: 1.5;
   }
 
   button:not(:disabled):not([aria-disabled='true']),
@@ -243,15 +251,26 @@
 
 @layer utilities {
   .type-page-title {
+    font-family: var(--font-heading);
     font-size: var(--type-page-title-size);
     line-height: var(--type-page-title-line-height);
     letter-spacing: var(--type-page-title-letter-spacing);
+    font-weight: 600;
   }
 
   .type-section-title {
+    font-family: var(--font-heading);
     font-size: var(--type-section-title-size);
     line-height: var(--type-section-title-line-height);
     letter-spacing: var(--type-section-title-letter-spacing);
+    font-weight: 600;
+  }
+
+  .type-accent-title {
+    font-family: var(--font-accent);
+    font-size: var(--type-accent-title-size);
+    line-height: var(--type-accent-title-line-height);
+    font-weight: 700;
   }
 
   .type-body-lg {
@@ -270,6 +289,7 @@
     font-size: var(--type-label-size);
     line-height: var(--type-label-line-height);
     letter-spacing: var(--type-label-letter-spacing);
+    font-weight: 600;
   }
 
   .type-body {