@hirobius/design-system 0.23.1 → 0.23.2

package/dist/hirobius-ui.js

@@ -7,15 +7,15 @@ import { cva as $ } from "class-variance-authority";
 import { Info as ze, TriangleAlert as _e, CircleX as Oe, CircleCheck as Ge, X as $e, ChevronRight as Ce, Circle as ot, Check as pe, Copy as st, SquareArrowOutUpRight as lt, Loader2 as ct, Minus as dt, ChevronsUpDown as je, ChevronDown as pt, ChevronLeft as ut } from "lucide-react";
 import D, { tokenValues as De } from "./tokens.js";
 import { cn as d } from "./cn.js";
-import { u as j, I, i as mt, d as vt, T as Ue, w as ue, B as be, r as Ye, L as qe, S as Ae, a as gt } from "./chunks/empty-state-ChC_xZfg.js";
-import { A as mr, b as vr, e as gr, f as fr, g as hr, j as br, k as $r, l as yr, m as xr, C as wr, E as kr, G as Sr, H as Nr, c as zr, n as Cr } from "./chunks/empty-state-ChC_xZfg.js";
+import { u as j, I as A, i as mt, d as vt, T as Ue, w as ue, B as be, r as Ye, L as qe, S as Ie, a as gt } from "./chunks/empty-state-BQ1v7ZIx.js";
+import { A as mr, b as vr, e as gr, f as fr, g as hr, j as br, k as $r, l as yr, m as xr, C as wr, E as kr, G as Sr, H as Nr, c as zr, n as Cr } from "./chunks/empty-state-BQ1v7ZIx.js";
 import * as U from "@radix-ui/react-dialog";
 import * as B from "@radix-ui/react-dropdown-menu";
 import * as se from "@radix-ui/react-popover";
 import * as re from "@radix-ui/react-tooltip";
 import { a as Xe, u as me } from "./chunks/DemoStateContext-Cz5TmrYu.js";
 import { H as Tr } from "./chunks/DemoStateContext-Cz5TmrYu.js";
-import * as Ie from "@radix-ui/react-toggle-group";
+import * as Ae from "@radix-ui/react-toggle-group";
 import * as G from "@radix-ui/react-select";
 import * as ye from "@radix-ui/react-tabs";
 import * as ae from "@radix-ui/react-toast";
@@ -55,7 +55,7 @@ const ft = /* @__PURE__ */ $(
       className: d(ft({ tone: e, hasTitle: l })),
       children: [
         /* @__PURE__ */ t(
-          I,
+          A,
           {
             icon: o,
             size: "small",
@@ -398,7 +398,7 @@ const xa = /* @__PURE__ */ m.forwardRef(function({ className: e, tone: i, as: a
   );
 }), Vt = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
   return /* @__PURE__ */ t(U.Title, { asChild: !0, children: /* @__PURE__ */ t(Ue, { ref: r, as: "h2", variant: "title", className: e, ...a, children: i }) });
-}), At = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
+}), It = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
   return /* @__PURE__ */ t(U.Description, { asChild: !0, children: /* @__PURE__ */ t(
     Ue,
     {
@@ -411,10 +411,10 @@ const xa = /* @__PURE__ */ m.forwardRef(function({ className: e, tone: i, as: a
     }
   ) });
 });
-function It(n) {
+function At(n) {
   return /* @__PURE__ */ t(U.Root, { ...n });
 }
-const Ca = /* @__PURE__ */ Object.assign(It, {
+const Ca = /* @__PURE__ */ Object.assign(At, {
   Trigger: Dt,
   Portal: Je,
   Overlay: Ke,
@@ -422,7 +422,7 @@ const Ca = /* @__PURE__ */ Object.assign(It, {
   Header: Rt,
   Footer: Lt,
   Title: Vt,
-  Description: At,
+  Description: It,
   Close: Tt,
   // Set here, not by a later `Dialog.displayName = …` write: a top-level
   // property write is a side effect that keeps the module alive.
@@ -477,12 +477,12 @@ const Ht = B.Trigger, Bt = B.Group, Wt = B.RadioGroup, Ft = B.Sub, Ze = /* @__PU
   return /* @__PURE__ */ t(B.Item, { ref: a, className: d(xe, e), ...i });
 }), Gt = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
   return /* @__PURE__ */ h(B.CheckboxItem, { ref: r, className: d(xe, "pl-6", e), ...a, children: [
-    /* @__PURE__ */ t("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ t(B.ItemIndicator, { children: /* @__PURE__ */ t(I, { icon: pe, size: 14, color: "currentColor", "aria-hidden": !0 }) }) }),
+    /* @__PURE__ */ t("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ t(B.ItemIndicator, { children: /* @__PURE__ */ t(A, { icon: pe, size: 14, color: "currentColor", "aria-hidden": !0 }) }) }),
     i
   ] });
 }), jt = /* @__PURE__ */ m.forwardRef(function({ className: e, children: i, ...a }, r) {
   return /* @__PURE__ */ h(B.RadioItem, { ref: r, className: d(xe, "pl-6", e), ...a, children: [
-    /* @__PURE__ */ t("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ t(B.ItemIndicator, { children: /* @__PURE__ */ t(I, { icon: ot, size: 6, color: "currentColor", "aria-hidden": !0, className: "fill-current" }) }) }),
+    /* @__PURE__ */ t("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ t(B.ItemIndicator, { children: /* @__PURE__ */ t(A, { icon: ot, size: 6, color: "currentColor", "aria-hidden": !0, className: "fill-current" }) }) }),
     i
   ] });
 }), Ut = /* @__PURE__ */ m.forwardRef(function({ className: e, ...i }, a) {
@@ -512,7 +512,7 @@ const Ht = B.Trigger, Bt = B.Group, Wt = B.RadioGroup, Ft = B.Sub, Ze = /* @__PU
       ...a,
       children: [
         i,
-        /* @__PURE__ */ t(I, { icon: Ce, size: 14, color: "currentColor", "aria-hidden": !0, className: "ml-auto" })
+        /* @__PURE__ */ t(A, { icon: Ce, size: 14, color: "currentColor", "aria-hidden": !0, className: "ml-auto" })
       ]
     }
   );
@@ -663,7 +663,7 @@ function Ra({
             "aria-label": o ? "Copied" : "Copy",
             onClick: p,
             style: o ? { color: "var(--semantic-color-content-accent)" } : void 0,
-            iconLeft: /* @__PURE__ */ t(I, { icon: o ? pe : st, size: "small" })
+            iconLeft: /* @__PURE__ */ t(A, { icon: o ? pe : st, size: "small" })
           }
         ),
         c
@@ -681,7 +681,7 @@ function La({ href: n, children: e, externalIcon: i = !0 }) {
     e,
     /* @__PURE__ */ t("span", { className: "sr-only", children: " (opens in new tab)" }),
     i && /* @__PURE__ */ t(
-      I,
+      A,
       {
         icon: lt,
         size: 11,
@@ -815,7 +815,7 @@ const Va = /* @__PURE__ */ m.forwardRef(function({
   onChange: k,
   ...P
 }, H) {
-  const V = m.useId(), C = r ?? V, R = m.useRef(null), L = me(), y = !!u || L === "error", M = x || L === "loading", Y = !!w || L === "disabled", F = y && (b || L === "error") ? `${C}-error` : void 0, _ = s && !F ? `${C}-hint` : void 0, Q = [_, F].filter(Boolean).join(" ") || void 0, [ve, le] = m.useState(() => typeof P.defaultValue == "string" ? P.defaultValue : typeof P.defaultValue == "number" ? String(P.defaultValue) : ""), ee = typeof P.value == "string" ? P.value : typeof P.value == "number" ? String(P.value) : void 0, ge = ee ?? ve, A = pi[i], fe = !!l, ce = !!p, te = Ee(c), q = Ee(v), ie = te || q, de = !di.has(e) && ge.length > 0 && !Y && !M, g = M || ce || de;
+  const V = m.useId(), C = r ?? V, R = m.useRef(null), L = me(), y = !!u || L === "error", M = x || L === "loading", Y = !!w || L === "disabled", F = y && (b || L === "error") ? `${C}-error` : void 0, _ = s && !F ? `${C}-hint` : void 0, Q = [_, F].filter(Boolean).join(" ") || void 0, [ve, le] = m.useState(() => typeof P.defaultValue == "string" ? P.defaultValue : typeof P.defaultValue == "number" ? String(P.defaultValue) : ""), ee = typeof P.value == "string" ? P.value : typeof P.value == "number" ? String(P.value) : void 0, ge = ee ?? ve, I = pi[i], fe = !!l, ce = !!p, te = Ee(c), q = Ee(v), ie = te || q, de = !di.has(e) && ge.length > 0 && !Y && !M, g = M || ce || de;
   function z(O) {
     if (R.current = O, typeof H == "function") {
       H(O);
@@ -833,9 +833,9 @@ const Va = /* @__PURE__ */ m.forwardRef(function({
     )) == null ? void 0 : Ve.set;
     we == null || we.call(O, ""), O.dispatchEvent(new Event("input", { bubbles: !0 })), O.focus();
   }
-  const J = L || (M ? "loading" : Y ? "disabled" : y ? "error" : ge.length > 0 ? "filled" : "default"), K = fe ? A.leadPad : te ? A.prefixGap : A.restPadL, it = g ? A.trailPad : q ? A.suffixGap : A.restPadR, Re = d(
+  const J = L || (M ? "loading" : Y ? "disabled" : y ? "error" : ge.length > 0 ? "filled" : "default"), K = fe ? I.leadPad : te ? I.prefixGap : I.restPadL, it = g ? I.trailPad : q ? I.suffixGap : I.restPadR, Re = d(
     "flex shrink-0 items-center whitespace-nowrap text-muted-foreground",
-    A.iconWrap
+    I.iconWrap
   ), Le = /* @__PURE__ */ h("div", { className: ie ? "relative min-w-0 flex-1 self-stretch" : "relative w-full", children: [
     fe && /* @__PURE__ */ t(
       "span",
@@ -843,8 +843,8 @@ const Va = /* @__PURE__ */ m.forwardRef(function({
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute left-0 flex items-center text-muted-foreground",
-          A.inset,
-          A.iconWrap
+          I.inset,
+          I.iconWrap
         ),
         children: l
       }
@@ -884,9 +884,9 @@ const Va = /* @__PURE__ */ m.forwardRef(function({
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute right-0 flex items-center text-muted-foreground",
-          A.inset
+          I.inset
         ),
-        children: /* @__PURE__ */ t(ct, { className: d("animate-spin motion-reduce:animate-none", A.iconClass) })
+        children: /* @__PURE__ */ t(ct, { className: d("animate-spin motion-reduce:animate-none", I.iconClass) })
       }
     ),
     !M && ce && /* @__PURE__ */ t(
@@ -895,8 +895,8 @@ const Va = /* @__PURE__ */ m.forwardRef(function({
         "aria-hidden": "true",
         className: d(
           "pointer-events-none absolute right-0 flex items-center text-muted-foreground",
-          A.inset,
-          A.iconWrap
+          I.inset,
+          I.iconWrap
         ),
         children: p
       }
@@ -909,18 +909,18 @@ const Va = /* @__PURE__ */ m.forwardRef(function({
         "aria-label": e === "search" ? "Clear search" : "Clear input",
         className: d(
           "absolute right-0 flex items-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
-          A.inset
+          I.inset
         ),
-        children: /* @__PURE__ */ t($e, { className: A.iconClass, "aria-hidden": "true" })
+        children: /* @__PURE__ */ t($e, { className: I.iconClass, "aria-hidden": "true" })
       }
     )
   ] });
   return /* @__PURE__ */ h("div", { className: d("flex flex-col gap-1.5", ne, N), children: [
     o && /* @__PURE__ */ t("label", { htmlFor: C, className: "hds-type-ui text-foreground", children: o }),
     ie ? /* @__PURE__ */ h("div", { className: li({ size: i, textStyle: a, invalid: y }), children: [
-      te && /* @__PURE__ */ t("span", { className: d(Re, A.prefixPad), children: c }),
+      te && /* @__PURE__ */ t("span", { className: d(Re, I.prefixPad), children: c }),
       Le,
-      q && /* @__PURE__ */ t("span", { className: d(Re, A.suffixPad), children: v })
+      q && /* @__PURE__ */ t("span", { className: d(Re, I.suffixPad), children: v })
     ] }) : Le,
     _ && /* @__PURE__ */ t("span", { id: _, className: "hds-type-caption text-muted-foreground", children: s }),
     y && (b || L === "error") && /* @__PURE__ */ t("span", { id: F, role: "alert", className: "hds-type-caption text-destructive", children: b || "Field error" })
@@ -944,7 +944,7 @@ const Va = /* @__PURE__ */ m.forwardRef(function({
       invalid: !1
     }
   }
-), Aa = /* @__PURE__ */ m.forwardRef(
+), Ia = /* @__PURE__ */ m.forwardRef(
   function({
     id: e,
     label: i,
@@ -1098,7 +1098,7 @@ const mi = /* @__PURE__ */ $(
 function fi(n, e) {
   typeof n == "function" ? n(e) : n && (n.current = e);
 }
-const Ia = /* @__PURE__ */ oe(
+const Aa = /* @__PURE__ */ oe(
   function({
     label: e,
     checked: i,
@@ -1168,7 +1168,7 @@ const Ia = /* @__PURE__ */ oe(
               style: {
                 transition: `background-color ${V.duration}s ease, border-color ${V.duration}s ease`
               },
-              children: r ? /* @__PURE__ */ t(I, { icon: dt, size: 14, color: H, "aria-hidden": !0 }) : i ? /* @__PURE__ */ t(I, { icon: pe, size: 14, color: H, "aria-hidden": !0 }) : null
+              children: r ? /* @__PURE__ */ t(A, { icon: dt, size: 14, color: H, "aria-hidden": !0 }) : i ? /* @__PURE__ */ t(A, { icon: pe, size: 14, color: H, "aria-hidden": !0 }) : null
             }
           ),
           /* @__PURE__ */ t(
@@ -1796,7 +1796,7 @@ const Ia = /* @__PURE__ */ oe(
     },
     defaultVariants: { fullWidth: !1 }
   }
-), Ai = /* @__PURE__ */ $(
+), Ii = /* @__PURE__ */ $(
   "flex max-w-full items-stretch gap-[var(--semantic-space-subgrid-gap)] overflow-x-auto overflow-y-hidden rounded-lg border border-solid border-[var(--semantic-color-border-default)] [scrollbar-width:thin]",
   {
     variants: {
@@ -1811,7 +1811,7 @@ const Ia = /* @__PURE__ */ oe(
     },
     defaultVariants: { variant: "primary", fullWidth: !1 }
   }
-), Ii = /* @__PURE__ */ $(
+), Ai = /* @__PURE__ */ $(
   "relative m-0 flex flex-col items-center justify-center gap-[var(--semantic-space-subgrid-hairline)] rounded-md border-0 bg-transparent py-[var(--semantic-space-subgrid-gap)] text-center transition-[color,outline-color,transform] duration-[var(--hds-motion-productive-duration)] ease-[var(--hds-motion-productive-easing)]",
   {
     variants: {
@@ -2033,7 +2033,7 @@ const Ia = /* @__PURE__ */ oe(
         }
       ),
       /* @__PURE__ */ t(
-        Ie.Root,
+        Ae.Root,
         {
           type: "single",
           role: "radiogroup",
@@ -2043,12 +2043,12 @@ const Ia = /* @__PURE__ */ oe(
             T && !k && o(T);
           },
           disabled: k,
-          className: Ai({ variant: l, fullWidth: p }),
+          className: Ii({ variant: l, fullWidth: p }),
           style: { padding: c ?? "4px" },
           children: a.map((T) => {
             const L = T.value === r, y = f ? f === "hover" && L : b === T.value, M = f === "pressed" && L, Y = f ? f === "focused" && L : x === T.value, F = k, _ = M ? "pressed" : y ? "hover" : "rest", Q = !!f && Y;
             return /* @__PURE__ */ t(
-              Ie.Item,
+              Ae.Item,
               {
                 asChild: !0,
                 value: T.value,
@@ -2071,7 +2071,7 @@ const Ia = /* @__PURE__ */ oe(
                     } : void 0,
                     className: d(
                       "hds-focus",
-                      Ii({
+                      Ai({
                         size: s,
                         fullWidth: p,
                         variant: l,
@@ -2167,7 +2167,7 @@ const Ia = /* @__PURE__ */ oe(
           ),
           children: [
             /* @__PURE__ */ t(G.Value, {}),
-            /* @__PURE__ */ t(G.Icon, { className: "flex shrink-0 text-muted-foreground", children: /* @__PURE__ */ t(I, { icon: je, size: "small", color: "currentColor" }) })
+            /* @__PURE__ */ t(G.Icon, { className: "flex shrink-0 text-muted-foreground", children: /* @__PURE__ */ t(A, { icon: je, size: "small", color: "currentColor" }) })
           ]
         }
       ),
@@ -2197,7 +2197,7 @@ const Ia = /* @__PURE__ */ oe(
               ),
               children: [
                 /* @__PURE__ */ t(G.ItemText, { children: f.label }),
-                /* @__PURE__ */ t(G.ItemIndicator, { className: "flex shrink-0", children: /* @__PURE__ */ t(I, { icon: pe, size: "small", color: "currentColor" }) })
+                /* @__PURE__ */ t(G.ItemIndicator, { className: "flex shrink-0", children: /* @__PURE__ */ t(A, { icon: pe, size: "small", color: "currentColor" }) })
               ]
             },
             f.value
@@ -2626,7 +2626,7 @@ const Xi = /* @__PURE__ */ $("", {
           }
         ),
         !c && /* @__PURE__ */ t(
-          I,
+          A,
           {
             icon: Ce,
             size: "small",
@@ -2688,16 +2688,16 @@ const nr = /* @__PURE__ */ m.forwardRef(
         le.current = g, typeof b == "function" ? b(g) : b && (b.current = g);
       },
       [b]
-    ), A = m.useRef(null);
+    ), I = m.useRef(null);
     m.useEffect(() => {
       var K;
-      const g = A.current;
-      if (!g || R.length === g.count || (A.current = null, R.length > g.count)) return;
+      const g = I.current;
+      if (!g || R.length === g.count || (I.current = null, R.length > g.count)) return;
       const z = ve.current, W = (z == null ? void 0 : z.querySelectorAll("li button:not(:disabled)")) ?? [];
       (K = W[Math.min(g.index, W.length - 1)] ?? (z == null ? void 0 : z.querySelector('[role="combobox"]'))) == null || K.focus();
     }, [R.length]);
     function fe(g, z) {
-      u.multiple && (A.current = { index: z, count: R.length }, u.onChange(C.filter((W) => W !== g.value)));
+      u.multiple && (I.current = { index: z, count: R.length }, u.onChange(C.filter((W) => W !== g.value)));
     }
     function ce(g) {
       if (y.length !== 0) {
@@ -2750,7 +2750,7 @@ const nr = /* @__PURE__ */ m.forwardRef(
               children: [
                 /* @__PURE__ */ t("span", { className: d("truncate", !L && "text-muted-foreground"), children: L || i }),
                 /* @__PURE__ */ t(
-                  I,
+                  A,
                   {
                     icon: je,
                     size: "small",
@@ -2834,7 +2834,7 @@ const nr = /* @__PURE__ */ m.forwardRef(
                             "disabled:pointer-events-none disabled:text-[var(--semantic-color-content-disabled)]"
                           ),
                           children: [
-                            /* @__PURE__ */ t("span", { className: "flex size-4 items-center justify-center", children: W ? /* @__PURE__ */ t(I, { icon: pe, size: "small", color: "currentColor", "aria-hidden": !0 }) : null }),
+                            /* @__PURE__ */ t("span", { className: "flex size-4 items-center justify-center", children: W ? /* @__PURE__ */ t(A, { icon: pe, size: "small", color: "currentColor", "aria-hidden": !0 }) : null }),
                             /* @__PURE__ */ t("span", { className: "truncate", children: g.label })
                           ]
                         }
@@ -2865,7 +2865,7 @@ const nr = /* @__PURE__ */ m.forwardRef(
           ),
           children: [
             g.label,
-            /* @__PURE__ */ t(I, { icon: $e, size: "small", color: "currentColor", "aria-hidden": !0 })
+            /* @__PURE__ */ t(A, { icon: $e, size: "small", color: "currentColor", "aria-hidden": !0 })
           ]
         }
       ) }, g.value)) }) : null
@@ -2943,7 +2943,7 @@ const nr = /* @__PURE__ */ m.forwardRef(
                   ease: P.easing
                 },
                 className: "inline-grid size-[var(--hds-icon-small)] shrink-0 origin-center place-items-center self-center overflow-hidden leading-none",
-                children: /* @__PURE__ */ t(I, { icon: pt, size: "small", color: "currentColor" })
+                children: /* @__PURE__ */ t(A, { icon: pt, size: "small", color: "currentColor" })
               }
             )
           ]
@@ -2974,13 +2974,13 @@ const nr = /* @__PURE__ */ m.forwardRef(
         }
       ) })
     ] });
-    return o === "nav" ? /* @__PURE__ */ t(Ae, { ref: u, gap: "tight", style: { gap: C }, children: T }) : /* @__PURE__ */ t(
+    return o === "nav" ? /* @__PURE__ */ t(Ie, { ref: u, gap: "tight", style: { gap: C }, children: T }) : /* @__PURE__ */ t(
       gt,
       {
         ref: u,
         padding: "component",
         className: o === "card" ? "overflow-hidden" : void 0,
-        children: /* @__PURE__ */ t(Ae, { gap: "tight", style: { gap: C }, children: T })
+        children: /* @__PURE__ */ t(Ie, { gap: "tight", style: { gap: C }, children: T })
       }
     );
   }
@@ -3008,7 +3008,7 @@ const sr = /* @__PURE__ */ m.forwardRef(
           "aria-label": "Previous page",
           disabled: e <= 1,
           onClick: () => v(e - 1),
-          iconLeft: /* @__PURE__ */ t(I, { icon: ut, size: "small" })
+          iconLeft: /* @__PURE__ */ t(A, { icon: ut, size: "small" })
         }
       ) }),
       c.map(
@@ -3042,7 +3042,7 @@ const sr = /* @__PURE__ */ m.forwardRef(
           "aria-label": "Next page",
           disabled: e >= i,
           onClick: () => v(e + 1),
-          iconLeft: /* @__PURE__ */ t(I, { icon: Ce, size: "small" })
+          iconLeft: /* @__PURE__ */ t(A, { icon: Ce, size: "small" })
         }
       ) })
     ] }) });
@@ -3103,7 +3103,7 @@ function cr({
           ),
           children: [
             /* @__PURE__ */ t(
-              I,
+              A,
               {
                 icon: ia[v],
                 size: "small",
@@ -3124,7 +3124,7 @@ function cr({
                   "absolute right-2 top-2 inline-flex size-6 items-center justify-center",
                   "rounded-sm text-muted-foreground transition-colors hover:text-foreground hds-focus"
                 ),
-                children: /* @__PURE__ */ t(I, { icon: $e, size: "small", color: "currentColor", "aria-hidden": !0 })
+                children: /* @__PURE__ */ t(A, { icon: $e, size: "small", color: "currentColor", "aria-hidden": !0 })
               }
             )
           ]
@@ -3143,7 +3143,7 @@ function cr({
     )
   ] }) });
 }
-const aa = "https://www.designtokens.org/schemas/2025.10/format.json", ra = "Adrian Milsap hirobius design tokens - W3C DTCG 2025.10 compliant, Figma SDS architecture", na = /* @__PURE__ */ JSON.parse(`{"$description":"Base values used as inputs to derived token layers.","color":{"$type":"color","neutral":{"50":{"$value":"#fafafa","$description":"Specific value within the neutral range at a defined lightness step."},"100":{"$value":"#f5f5f5","$description":"Specific value within the neutral range at a defined lightness step."},"200":{"$value":"#e5e5e5","$description":"Specific value within the neutral range at a defined lightness step."},"300":{"$value":"#d4d4d4","$description":"Specific value within the neutral range at a defined lightness step."},"400":{"$value":"#a3a3a3","$description":"Specific value within the neutral range at a defined lightness step."},"500":{"$value":"#737373","$description":"Specific value within the neutral range at a defined lightness step."},"600":{"$value":"#525252","$description":"Specific value within the neutral range at a defined lightness step."},"700":{"$value":"#404040","$description":"Specific value within the neutral range at a defined lightness step."},"800":{"$value":"#262626","$description":"Specific value within the neutral range at a defined lightness step."},"850":{"$value":"#1a1a1a","$description":"Specific value within the neutral range at a defined lightness step."},"900":{"$value":"#111111","$description":"Specific value within the neutral range at a defined lightness step."},"950":{"$value":"#0a0a0a","$description":"Specific value within the neutral range at a defined lightness step."},"$description":"Discrete values within the neutral range at defined lightness steps.","white":{"$value":"#ffffff","$description":"Specific value within the neutral range at a defined lightness step."},"black":{"$value":"#000000","$description":"Specific value within the neutral range at a defined lightness step."}},"blue":{"50":{"$value":"oklch(0.96 0.03 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"100":{"$value":"oklch(0.92 0.04 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"200":{"$value":"oklch(0.88 0.07 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"300":{"$value":"oklch(0.70 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"400":{"$value":"oklch(0.65 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"450":{"$value":"oklch(0.56 0.29 266.60)","$description":"Specific value within the blue range at a defined lightness step."},"500":{"$value":"#1E2EFD","$description":"Specific value within the blue range at a defined lightness step."},"600":{"$value":"oklch(0.45 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"700":{"$value":"oklch(0.44 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"800":{"$value":"oklch(0.30 0.07 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"900":{"$value":"oklch(0.22 0.05 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"$description":"Discrete values within the blue range at defined lightness steps."},"red":{"50":{"$value":"#fef2f2","$description":"Specific value within the red range at a defined lightness step."},"400":{"$value":"#f87171","$description":"Specific value within the red range at a defined lightness step."},"700":{"$value":"#b91c1c","$description":"Specific value within the red range at a defined lightness step."},"950":{"$value":"#450a0a","$description":"Specific value within the red range at a defined lightness step."},"$description":"Discrete values within the red range at defined lightness steps."},"green":{"50":{"$value":"#ecfdf5","$description":"Specific value within the green range at a defined lightness step."},"400":{"$value":"#34d399","$description":"Specific value within the green range at a defined lightness step."},"700":{"$value":"#047857","$description":"Specific value within the green range at a defined lightness step."},"950":{"$value":"#022c22","$description":"Specific value within the green range at a defined lightness step."},"$description":"Discrete values within the green range at defined lightness steps."},"apple":{"50":{"$value":"#f2faeb","$description":"Apple-green accent tint — faintest step."},"100":{"$value":"#e2f3cf","$description":"Apple-green accent — very light tint."},"200":{"$value":"#c7e7a4","$description":"Apple-green accent — light tint."},"300":{"$value":"#a6d873","$description":"Apple-green accent — soft mid-light step."},"400":{"$value":"#85c84c","$description":"Apple-green accent — bright step; dark-mode rest accent."},"500":{"$value":"#66b239","$description":"Apple-green accent rest — bright, rich apple green; AA for dark (neutral.900) text as a fill."},"600":{"$value":"#54922d","$description":"Apple-green accent — hover / border step."},"700":{"$value":"#416f20","$description":"Apple-green accent — pressed and accent-intent text (AA for text on page and card surfaces)."},"800":{"$value":"#34571b","$description":"Apple-green accent — deep step."},"900":{"$value":"#2b4518","$description":"Apple-green accent — darkest usable step."},"950":{"$value":"#16250c","$description":"Apple-green accent — near-black green substrate."},"$description":"Discrete values within the apple-green (brand accent) range at defined lightness steps. Distinct from the emerald \`green\` feedback/success scale."},"violet":{"50":{"$value":"#f5f3ff","$description":"Specific value within the violet range at a defined lightness step."},"400":{"$value":"#a78bfa","$description":"Specific value within the violet range at a defined lightness step."},"700":{"$value":"#6d28d9","$description":"Specific value within the violet range at a defined lightness step."},"950":{"$value":"#2e1065","$description":"Specific value within the violet range at a defined lightness step."},"$description":"Discrete values within the violet range at defined lightness steps."},"lilac":{"50":{"$value":"#f7f4fe","$description":"Specific value within the lilac range at a defined lightness step."},"100":{"$value":"#efe9fd","$description":"Specific value within the lilac range at a defined lightness step."},"200":{"$value":"#ddd0fb","$description":"Specific value within the lilac range at a defined lightness step."},"300":{"$value":"#c3aef6","$description":"Specific value within the lilac range at a defined lightness step."},"400":{"$value":"#a585ee","$description":"Specific value within the lilac range at a defined lightness step."},"450":{"$value":"#9a6fe8","$description":"Specific value within the lilac range at a defined lightness step."},"500":{"$value":"#6f3fd4","$description":"Lilac accent rest — AA for white text on page and card surfaces."},"600":{"$value":"#5f33c0","$description":"Specific value within the lilac range at a defined lightness step."},"700":{"$value":"#4f2aa3","$description":"Specific value within the lilac range at a defined lightness step."},"800":{"$value":"#3a1f78","$description":"Specific value within the lilac range at a defined lightness step."},"900":{"$value":"#2a1659","$description":"Specific value within the lilac range at a defined lightness step."},"$description":"Lilac ramp at fixed lightness steps. Mirrors the blue ramp's stops; available to brand overlays."},"amber":{"50":{"$value":"#fffbeb","$description":"Specific value within the amber range at a defined lightness step."},"400":{"$value":"#fbbf24","$description":"Specific value within the amber range at a defined lightness step."},"800":{"$value":"#92400e","$description":"Specific value within the amber range at a defined lightness step."},"950":{"$value":"#451a03","$description":"Specific value within the amber range at a defined lightness step."},"$description":"Discrete values within the amber range at defined lightness steps."},"stone":{"100":{"$value":"#F5EFE7","$description":"Stone 100 — near-white warm tint; accent-subtle surface."},"400":{"$value":"#D0B492","$description":"Stone 400 — light warm tone; dark-mode pressed accent."},"450":{"$value":"#BC9D7E","$description":"Stone 450 — medium warm tone; dark-mode hover accent."},"500":{"$value":"#A8896A","$description":"Stone 500 — mid warm tone; dark-mode rest accent."},"600":{"$value":"#8B6F47","$description":"Stone 600 — primary warm stone; light-mode rest accent and CTA surface."},"700":{"$value":"#75593A","$description":"Stone 700 — darker warm stone; light-mode hover accent."},"800":{"$value":"#5C432A","$description":"Stone 800 — deep warm stone; light-mode pressed accent."},"950":{"$value":"#3A2E1F","$description":"Stone 950 — near-black warm tone; dark-mode subtle accent surface."},"$description":"Warm stone/brown palette for Concrete Creations brand accent ramp. PLACEHOLDER values pending final brand identity work."},"projectBrand":{"microsoftGameDev":{"100":{"$value":"#E5E5FC","$description":"Light support tone for the Microsoft Game Dev project brand."},"500":{"$value":"#6d31fb","$description":"Primary accent tone for the Microsoft Game Dev project brand."},"900":{"$value":"oklch(0.22 0.16 304)","$description":"Dark support tone for the Microsoft Game Dev project brand."},"$description":"Project-specific brand colors used in portfolio contexts."},"$description":"Project-specific brand color families reserved for portfolio surfaces."}},"space":{"0":{"$value":{"value":0,"unit":"px"}},"1":{"$value":{"value":4,"unit":"px"}},"2":{"$value":{"value":8,"unit":"px"}},"3":{"$value":{"value":12,"unit":"px"}},"4":{"$value":{"value":16,"unit":"px"}},"5":{"$value":{"value":20,"unit":"px"}},"6":{"$value":{"value":24,"unit":"px"}},"7":{"$value":{"value":28,"unit":"px"}},"8":{"$value":{"value":32,"unit":"px"}},"10":{"$value":{"value":40,"unit":"px"}},"12":{"$value":{"value":48,"unit":"px"}},"16":{"$value":{"value":64,"unit":"px"}},"20":{"$value":{"value":80,"unit":"px"}},"24":{"$value":{"value":96,"unit":"px"}},"32":{"$value":{"value":128,"unit":"px"}},"$type":"dimension","$description":"Dimensional increments within the 4px base-unit spatial system.","px1":{"$value":{"value":1,"unit":"px"}},"px2":{"$value":{"value":2,"unit":"px"}},"px6":{"$value":{"value":6,"unit":"px"}},"px10":{"$value":{"value":10,"unit":"px"}}},"blur":{"8":{"$value":{"value":8,"unit":"px"},"$description":"8px blur step."},"16":{"$value":{"value":16,"unit":"px"},"$description":"Fullscreen backdrop blur for portfolio lightbox overlays."},"$type":"dimension","$description":"Backdrop blur strengths for frosted overlays and fullscreen media treatments."},"radius":{"0":{"$value":{"value":0,"unit":"px"}},"2":{"$value":{"value":2,"unit":"px"}},"4":{"$value":{"value":4,"unit":"px"}},"8":{"$value":{"value":8,"unit":"px"}},"12":{"$value":{"value":12,"unit":"px"}},"$type":"dimension","full":{"$value":{"value":9999,"unit":"px"}}},"typography":{"family":{"$type":"fontFamily","primary":{"$value":["Plus Jakarta Sans","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Self-hosted Plus Jakarta Sans (OFL) body typeface; falls back to system-ui sans-serif stack."},"display":{"$value":["Plus Jakarta Sans","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Display face: Plus Jakarta Sans Bold (OFL), bound to the display and title composites."},"mono":{"$value":["IBM Plex Mono","Courier New","monospace"],"$description":"Monospace face: IBM Plex Mono. Falls back to Courier New, monospace."}},"size":{"$type":"dimension","xs":{"$value":{"value":12,"unit":"px"},"$description":"Tailwind 4 default text-xs (hds#283 ramp)."},"sm":{"$value":{"value":14,"unit":"px"},"$description":"Tailwind 4 default text-sm (hds#283 ramp)."},"base":{"$value":{"value":16,"unit":"px"},"$description":"Tailwind 4 default text-base (hds#283 ramp)."},"lg":{"$value":{"value":18,"unit":"px"},"$description":"Tailwind 4 default text-lg (hds#283 ramp)."},"xl":{"$value":{"value":20,"unit":"px"},"$description":"Tailwind 4 default text-xl (hds#283 ramp)."},"2xl":{"$value":{"value":24,"unit":"px"},"$description":"Tailwind 4 default text-2xl (hds#283 ramp)."},"3xl":{"$value":{"value":30,"unit":"px"},"$description":"Tailwind 4 default text-3xl (hds#283 ramp)."},"4xl":{"$value":{"value":36,"unit":"px"},"$description":"Tailwind 4 default text-4xl (hds#283 ramp)."},"5xl":{"$value":{"value":48,"unit":"px"},"$description":"Tailwind 4 default text-5xl (hds#283 ramp)."},"6xl":{"$value":{"value":60,"unit":"px"},"$description":"Swiss-canon display size (hds#283 ramp). Static desktop value; fluid in theme.css. Tailwind 4 default text-6xl."},"code":{"$value":{"value":13,"unit":"px"},"$description":"13px code size. The mono role (hds#485): one px below ui so code sits level with 14px prose."}},"weight":{"$type":"fontWeight","regular":{"$value":400},"medium":{"$value":500},"bold":{"$value":700}},"lineHeight":{"$type":"number","compact":{"$value":0.95},"none":{"$value":1},"tight":{"$value":1.25},"snug":{"$value":1.375,"$description":"Swiss-canon snug rhythm (10t-5). Used by h2/h3 composites for tight-but-readable heading lines."},"normal":{"$value":1.5},"relaxed":{"$value":1.625,"$description":"Swiss-canon relaxed rhythm (10t-5). Used by body/small/mono composites for long-form prose comfort."},"display":{"$value":1.05,"$description":"Display role leading (hds#485)."},"body":{"$value":1.6,"$description":"Body role leading (hds#485)."}},"letterSpacing":{"$type":"dimension","tight":{"$value":{"value":-0.01,"unit":"em"}},"normal":{"$value":{"value":0,"unit":"em"}},"caps":{"$value":{"value":0.06,"unit":"em"},"$description":"All-caps tracking for eyebrow / kicker labels. Always pairs with text-transform: uppercase."}}},"duration":{"$type":"duration","instant":{"$value":{"value":100,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"short":{"$value":{"value":150,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"medium":{"$value":{"value":250,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"long":{"$value":{"value":400,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."}},"easing":{"$type":"cubicBezier","emphasized":{"$value":[0.4,0,0.2,1],"$description":"Cubic bezier with balanced input and output tangents."},"decelerate":{"$value":[0,0,0.2,1],"$description":"Cubic bezier with steep initial gain and constrained tail velocity."},"accelerate":{"$value":[0.4,0,1,1],"$description":"Cubic bezier with restrained initial gain and steep terminal velocity."},"elastic":{"$value":[0.34,1.56,0.64,1],"$description":"Spring response defined by stiffness, damping, and mass parameters.","$extensions":{"com.hirobius.hds":{"$type":"spring","$value":{"type":"spring","stiffness":300,"damping":20,"mass":1},"bezierSource":"The cubicBezier is easeOutBack (easings.net), chosen as a stand-in for the spring, not fitted to it: both overshoot once, the curve by about 10% and spring(300, 20, 1) by about 11%."}}}},"shadow":{"color":{"$type":"color","$value":"220 13% 18%","$description":"HSL channels for shadow-color alpha compositing. Light: cool neutral; dark: black.","$extensions":{"com.figma.variables":{"modes":{"Light":"220 13% 18%","Dark":"0 0% 0%"}}}}},"breakpoint":{"$description":"Discrete viewport thresholds expressed as dimensions.","xs":{"$type":"dimension","$value":{"value":375,"unit":"px"}},"sm":{"$type":"dimension","$value":{"value":640,"unit":"px"}},"md":{"$type":"dimension","$value":{"value":768,"unit":"px"}},"lg":{"$type":"dimension","$value":{"value":1024,"unit":"px"}},"xl":{"$type":"dimension","$value":{"value":1280,"unit":"px"}}},"size":{"8":{"$type":"dimension","$value":{"value":8,"unit":"px"},"$description":"8px size step."},"10":{"$type":"dimension","$value":{"value":10,"unit":"px"},"$description":"10px size step."},"12":{"$type":"dimension","$value":{"value":12,"unit":"px"},"$description":"12px size step."},"16":{"$type":"dimension","$value":{"value":16,"unit":"px"},"$description":"16px size step."},"20":{"$type":"dimension","$value":{"value":20,"unit":"px"},"$description":"20px size step."},"24":{"$type":"dimension","$value":{"value":24,"unit":"px"},"$description":"24px size step."},"32":{"$type":"dimension","$value":{"value":32,"unit":"px"},"$description":"32px size step."},"40":{"$type":"dimension","$value":{"value":40,"unit":"px"},"$description":"40px size step."},"48":{"$type":"dimension","$value":{"value":48,"unit":"px"},"$description":"48px size step."},"64":{"$type":"dimension","$value":{"value":64,"unit":"px"},"$description":"64px size step."},"80":{"$type":"dimension","$value":{"value":80,"unit":"px"},"$description":"80px size step."},"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px size step."},"120":{"$type":"dimension","$value":{"value":120,"unit":"px"},"$description":"120px size step. Backs semantic.size.tile."},"$description":"Unaliased dimensional values.","interactive":{"$description":"Interactive control size minimums.","min":{"$type":"dimension","$value":{"value":44,"unit":"px"},"$description":"Minimum interactive hit target size."},"minCompact":{"$type":"dimension","$value":{"value":24,"unit":"px"},"$description":"Compact inline control target minimum, e.g. a chip's remove button: WCAG 2.2 AA (2.5.8), not the 44px AAA floor (2.5.5)."}},"width":{"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px width step."},"280":{"$type":"dimension","$value":{"value":280,"unit":"px"},"$description":"Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room."},"760":{"$type":"dimension","$value":{"value":760,"unit":"px"}},"1200":{"$type":"dimension","$value":{"value":1200,"unit":"px"}},"50ch":{"$type":"dimension","$value":{"value":50,"unit":"ch"}}}},"grid":{"columns":{"1":{"$type":"number","$value":1},"2":{"$type":"number","$value":2},"3":{"$type":"number","$value":3}}},"zIndex":{"0":{"$type":"number","$value":0},"10":{"$type":"number","$value":10},"100":{"$type":"number","$value":100},"1000":{"$type":"number","$value":1000},"$description":"Discrete stacking levels along the z axis."},"borderWidth":{"$type":"dimension","xs":{"$value":{"value":1,"unit":"px"}},"sm":{"$value":{"value":2,"unit":"px"}},"md":{"$value":{"value":4,"unit":"px"}}}}`), oa = /* @__PURE__ */ JSON.parse(`{"motion":{"$type":"transition","$extensions":{"com.hirobius.hds":{"$type":"motion"}},"productive":{"$value":{"duration":"{primitive.duration.short}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.decelerate}"},"$description":"For micro-interactions and status changes. No deformation."},"expressive":{"$value":{"duration":"{primitive.duration.medium}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.elastic}"},"$description":"For teaching moments and significant UI entries. Includes physics-based squish."},"spatial":{"$value":{"duration":"{primitive.duration.long}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.emphasized}"},"$description":"For elements traveling long distances across the viewport."},"exit":{"$value":{"duration":"{primitive.duration.instant}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.accelerate}"},"$description":"For elements being removed from the DOM."},"distance":{"$type":"dimension","$value":"{primitive.space.6}","$description":"Scroll-reveal translateY travel distance. Equals semantic.space.scale.md today, but names motion travel, not a spacing tier (hds#242)."}},"color":{"$type":"color","surface":{"page":{"$value":"{primitive.color.neutral.white}","$description":"Main page background","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.white}","Dark":"{primitive.color.neutral.black}"}}}},"raised":{"$value":"{primitive.color.neutral.50}","$description":"Subtle elevated surface (cards, sections)","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.neutral.950}"}}}},"overlay":{"$value":"{primitive.color.neutral.100}","$description":"Deeper surface layer","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.850}"}}}},"scrim":{"$value":"{primitive.color.neutral.900}","$description":"Opaque modal backdrop, near-black in both themes. Apply alpha in the class (bg-scrim/60), not here.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.black}"}}}},"inverse":{"$value":"{primitive.color.neutral.black}","$description":"Inverted background for contrast sections","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.black}","Dark":"{primitive.color.neutral.white}"}}}},"accent":{"$value":"{primitive.color.apple.500}","$description":"Accent-colored background — bright apple green (stays green on dark surfaces; pair with content.onAccent dark text).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.500}","Dark":"{primitive.color.apple.400}"}}}},"accentSubtle":{"$value":"{primitive.color.apple.50}","$description":"Faint accent tint for hover states or highlights","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.50}","Dark":"{primitive.color.apple.900}"}}}},"hover":{"$value":"{primitive.color.neutral.100}","$description":"Background for a hovered interactive surface (menu items, chips, tertiary buttons).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"pressed":{"$value":"{primitive.color.neutral.50}","$description":"Background for an actively pressed interactive surface.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.neutral.950}"}}}},"selected":{"$value":"{primitive.color.neutral.200}","$description":"Background for a persistently selected item (active tab, checked row).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.800}"}}}},"muted":{"$value":"{primitive.color.neutral.100}","$description":"Muted background for low-emphasis content blocks.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"sunken":{"$value":"{primitive.color.neutral.200}","$description":"Recessed background for inset wells (inputs, code blocks, nested panels).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.850}"}}}}},"content":{"primary":{"$value":"{primitive.color.neutral.900}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"secondary":{"$value":"{primitive.color.neutral.600}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.600}","Dark":"{primitive.color.neutral.400}"}}}},"disabled":{"$value":"{primitive.color.neutral.300}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.600}"}}}},"inverse":{"$value":"{primitive.color.neutral.100}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"accent":{"$value":"{primitive.color.apple.700}","$description":"Accent-intent text/icon color — a dark apple green legible on page and card surfaces. Pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.400}"}}}},"onAccent":{"$value":"{primitive.color.neutral.900}","$description":"Text/icon color on accent fills — a dark neutral, since the brand accent fill is a bright apple green in both light and dark mode.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.900}"}}}},"success":{"$value":"{primitive.color.green.700}","$description":"Success-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.700}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$value":"{primitive.color.amber.800}","$description":"Warning-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.800}","Dark":"{primitive.color.amber.400}"}}}},"danger":{"$value":"{primitive.color.red.700}","$description":"Danger-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.700}","Dark":"{primitive.color.red.400}"}}}}},"border":{"default":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.700}"}}}},"interactive":{"$value":"{primitive.color.neutral.500}","$description":"Border for interactive control boundaries (inputs, selects, secondary buttons); meets the WCAG 1.4.11 3:1 non-text contrast floor.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.500}","Dark":"{primitive.color.neutral.500}"}}}},"subdued":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.800}"}}}},"subtle":{"$value":"{primitive.color.neutral.100}","$description":"Lowest-contrast border for resting hairline edges on flat surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.850}"}}}},"strong":{"$value":"{primitive.color.neutral.300}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.600}"}}}},"accent":{"$value":"{primitive.color.apple.600}","$description":"Accent border — apple green, dark enough to read as a boundary on page and card surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.600}","Dark":"{primitive.color.apple.400}"}}}},"success":{"$value":"{primitive.color.green.400}","$description":"Success-toned border for status outlines and success-state inputs.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.400}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$value":"{primitive.color.amber.400}","$description":"Warning-toned border for status outlines and warning-state inputs.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.400}","Dark":"{primitive.color.amber.400}"}}}}},"feedback":{"error":{"$type":"color","$value":"{primitive.color.red.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.700}","Dark":"{primitive.color.red.400}"}}}},"success":{"$type":"color","$value":"{primitive.color.green.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.700}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$type":"color","$value":"{primitive.color.amber.800}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.800}","Dark":"{primitive.color.amber.400}"}}}},"info":{"$type":"color","$value":"{primitive.color.blue.500}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.300}"}}}},"inProgress":{"$type":"color","$value":"{primitive.color.violet.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.violet.700}","Dark":"{primitive.color.violet.400}"}}}},"bg":{"error":{"$type":"color","$value":"{primitive.color.red.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.50}","Dark":"{primitive.color.red.950}"}}}},"success":{"$type":"color","$value":"{primitive.color.green.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.50}","Dark":"{primitive.color.green.950}"}}}},"warning":{"$type":"color","$value":"{primitive.color.amber.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.50}","Dark":"{primitive.color.amber.950}"}}}},"info":{"$type":"color","$value":"{primitive.color.blue.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.50}","Dark":"{primitive.color.blue.900}"}}}},"inProgress":{"$type":"color","$value":"{primitive.color.violet.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.violet.50}","Dark":"{primitive.color.violet.950}"}}}}}},"state":{"pressed":{"overlay":{"$value":"{primitive.color.neutral.black}","$description":"Opaque pressed wash over a control's own fill: black in light, white in dark. Alpha in the class (inset-shadow-pressed-overlay/5).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.black}","Dark":"{primitive.color.neutral.white}"}}}}}}},"space":{"$type":"dimension","$description":"Semantic spacing tiers: subgrid, component, layout, section, scale.","scale":{"$description":"hds#206: the canonical spacing vocabulary, one monotonic t-shirt scale (xs to xl) for padding, margin and gap. Supersedes deprecated names.","xs":{"$value":"{primitive.space.2}","$description":"8px — smallest step. Same value as component.gap (deprecated alias)."},"sm":{"$value":"{primitive.space.4}","$description":"16px — same value as layout.tight (deprecated alias)."},"md":{"$value":"{primitive.space.6}","$description":"24px. Default of the overridable roles surface.padding and region.gutter. The deprecated layout.normal has the same value."},"lg":{"$value":"{primitive.space.8}","$description":"32px — same value as layout.inset (deprecated alias)."},"xl":{"$value":"{primitive.space.12}","$description":"48px — same value as layout.spacious (deprecated alias)."}},"surface":{"$description":"hds#206 surface inset role. Tenants override it per brand and density, always with a scale step.","padding":{"$value":"{semantic.space.scale.md}","$description":"24px (scale.md) inset for cards, forms and panels. Tenants override it per brand and density. Replaces component.padding."}},"region":{"$description":"hds#206 region gutter role. theme.css retunes it per viewport, always with a scale step.","gutter":{"$value":"{semantic.space.scale.md}","$description":"24px (scale.md) column and region gutters; theme.css sets scale.lg (32px), and scale.sm (16px) below 640px. Replaces layout.gutter."}},"subgrid":{"hairline":{"$value":"{primitive.space.px1}","$description":"1px border offset and hairline spacing."},"xs":{"$value":"{primitive.space.px2}","$description":"2px vertical rhythm nudge and baseline adjustment."},"gap":{"$value":"{primitive.space.1}","$description":"4px cap-height and inline cluster spacing."}},"component":{"gap":{"$value":"{primitive.space.2}","$description":"8px label↔input rhythm and closely coupled control spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.xs; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.xs"},"medium":{"$value":"{primitive.space.3}","$description":"12px adjacent form fields and medium intra-component gaps."},"padding":{"$value":"{semantic.space.surface.padding}","$description":"24px inset for cards, forms and panels. DEPRECATED alias (hds#206) — use semantic.space.surface.padding; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.surface.padding"}},"layout":{"tight":{"$value":"{primitive.space.4}","$description":"16px default HdsStack gap and inter-component spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.sm; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.sm"},"normal":{"$value":"{primitive.space.6}","$description":"24px column gutters and sidebar gutter spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.md; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.md"},"gutter":{"$value":"{semantic.space.region.gutter}","$description":"24px column and region gutters. DEPRECATED alias (hds#206) — use semantic.space.region.gutter (responsive in theme.css); kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.region.gutter"},"inset":{"$value":"{primitive.space.8}","$description":"32px major block separation and inset inter-component gaps. DEPRECATED alias (hds#206) — use semantic.space.scale.lg; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.lg"},"spacious":{"$value":"{primitive.space.12}","$description":"48px break between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.xl"}},"section":{"stack":{"$value":"{primitive.space.20}","$description":"80px vertical rhythm between page sections and major editorial blocks."},"inset":{"$value":"{primitive.space.24}","$description":"96px hero and landing-page inset padding."},"heroMax":{"$value":"{primitive.space.32}","$description":"128px maximum hero region padding for extra-large displays."}},"sidebar":{"indent":{"$value":"{primitive.space.3}","$description":"12px indent level for nested sidebar and TOC groups."},"gap":{"$value":"{primitive.space.4}","$description":"16px vertical spacing between items in sidebar and TOC stacks."},"sectionGap":{"$value":"{primitive.space.3}","$description":"12px spacing between sidebar sections and grouped rail blocks."},"railPadding":{"$value":"{primitive.space.5}","$description":"20px outer padding for sidebar and TOC rails."},"railWidth":{"$type":"dimension","$value":"{primitive.size.width.280}","$description":"Docs-shell nav and TOC rail width (hds#280), one token for both rails; 0 below their breakpoint (see HdsDocsShell)."}}},"layout":{"width":{"content":{"$type":"dimension","$value":"{primitive.size.width.760}","$description":"Max width for prose/content (760px). Use with HdsContainer for centered text blocks."},"max":{"$type":"dimension","$value":"{primitive.size.width.1200}","$description":"Max width for full-layout containers (1200px). Use with HdsContainer for page layouts."}},"container":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.1200}"}},"content":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.760}"}},"prose":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.50ch}"}},"section":{"paddingY":{"$type":"dimension","$value":"{primitive.space.20}"}},"grid":{"gap":{"$type":"dimension","$value":"{primitive.space.8}"},"columns":{"mobile":{"$type":"number","$value":"{primitive.grid.columns.1}"},"tablet":{"$type":"number","$value":"{primitive.grid.columns.2}"},"desktop":{"$type":"number","$value":"{primitive.grid.columns.3}"}}}},"typography":{"$type":"typography","$description":"5-role type ramp plus mono (hds#483): display, title, body, ui, caption, mono. h1, h2, h3 and eyebrow are deprecated aliases.","display":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.5xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.display}"},"$description":"One per page, hero only. 48px / 1.05 / 700. Role 1 of 6."},"title":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"Section and card headings. 24px / 1.25 / 700. Role 2 of 6."},"body":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.base}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.body}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Prose. 16px / 1.6 / 400, 60ch measure. Role 3 of 6."},"ui":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.sm}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Controls, nav, table text, values. 14px / 1.5 / 500. Role 4 of 6."},"caption":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}"},"$description":"Metadata, help text and labels, in sentence case. 12px / 1.5 / 500. Role 5 of 6."},"mono":{"$value":{"fontFamily":"{primitive.typography.family.mono}","fontSize":"{primitive.typography.size.code}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Code and ids. 13px / 1.5 / 400. The mono companion, role 6 of 6."},"h1":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"h2":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"h3":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"eyebrow":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}"},"$description":"deprecated: use semantic.typography.caption","$deprecated":"hds#483 — use semantic.typography.caption"},"lineHeight":{"none":{"$type":"number","$value":"{primitive.typography.lineHeight.none}","$description":"Semantic alias for leading-none (1). Display text and badge spans."}}},"docs":{"$description":"Doc-page spacing scale: section, paragraph, inline rhythm.","space":{"$type":"dimension","section":{"$value":"{primitive.space.12}","$description":"48px between H2 sections — generous section break for doc pages."},"paragraph":{"$value":"{primitive.space.6}","$description":"24px between paragraphs — comfortable prose rhythm for long-form doc content."},"inline":{"$value":"{primitive.space.2}","$description":"8px inline cluster spacing — gap between metadata badges, inline icons, doc-page chips."}}},"accent":{"$type":"color","rest":{"$value":"{primitive.color.apple.500}","$description":"Default accent fill for interactive elements at rest — bright apple green. Pair with content.onAccent (a dark neutral).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.500}","Dark":"{primitive.color.apple.400}"}}}},"hover":{"$value":"{primitive.color.apple.600}","$description":"Accent fill on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.600}","Dark":"{primitive.color.apple.500}"}}}},"pressed":{"$value":"{primitive.color.apple.700}","$description":"Accent fill during active press.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.600}"}}}},"inactive":{"$value":"{primitive.color.neutral.400}","$description":"Accent fill for inactive or unselected accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.400}","Dark":"{primitive.color.neutral.600}"}}}},"disabled":{"$value":"{primitive.color.neutral.300}","$description":"Accent fill for disabled accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.700}"}}}},"content":{"$value":"{primitive.color.apple.700}","$description":"Accent-intent text/icon color on neutral surfaces (a dark apple green) — pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.400}"}}}},"contentHover":{"$value":"{primitive.color.apple.800}","$description":"Accent content color on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.800}","Dark":"{primitive.color.apple.300}"}}}},"subtle":{"$value":"{primitive.color.apple.50}","$description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.50}","Dark":"{primitive.color.apple.900}"}}}}},"radius":{"action":{"$type":"dimension","$value":"{primitive.radius.8}","$description":"Corner radius for action elements (buttons, inputs, badges); Tailwind rounded-md resolves here. Override role.radius to reshape the system."},"control":{"$type":"dimension","$value":"{primitive.radius.4}","$description":"Corner radius for small control glyphs such as the checkbox box: not fully round, and distinct from semantic.radius.action (hds#242)."}},"borderWidth":{"default":{"$type":"dimension","$value":"{primitive.borderWidth.xs}","$description":"Default hairline border weight for surfaces and inputs."},"emphasis":{"$type":"dimension","$value":"{primitive.borderWidth.sm}","$description":"Stronger border weight for focus rings and active indicators."}},"shadow":{"$type":"shadow","subtle":{"$value":"0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06)","$description":"Resting elevation shadow for raised surfaces (cards, inline panels)."},"floating":{"$value":"0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08)","$description":"Hover/floating elevation for menus, popovers, and tooltips."},"overlay":{"$value":"0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12)","$description":"Modal/dialog elevation for full-screen overlays."}},"elevation":{"$extensions":{"com.hirobius.hds":{"$type":"elevation"}},"flat":{"$description":"Flat surface (no shadow, hairline border) for embedded panels.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.page}","shadow":null,"border":"{semantic.color.border.subtle}"}}}},"raised":{"$description":"Resting card / panel elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.subtle}","border":null}}}},"floating":{"$description":"Hover, menu, and popover elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.floating}","border":null}}}},"overlay":{"$description":"Modal, dialog, and drawer elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.overlay}","shadow":"{semantic.shadow.overlay}","border":null}}}}},"size":{"$type":"dimension","$description":"Sizing roles for control glyphs, avatars and table rows. Roles sharing a value stay separate so each can change (hds#242).","control":{"$description":"Interactive control glyph/element sizing (checkbox glyph box, radio dot, slider track/fill, code-block copy-button-matched footprint).","sm":{"$value":"{primitive.size.8}","$description":"Small control element — radio dot, slider fill bar height."},"md":{"$value":"{primitive.size.20}","$description":"Medium control element — checkbox glyph box, slider track wrapper height."},"lg":{"$value":"{primitive.size.32}","$description":"Large control footprint — code-block inline-wrapper min-height / copy-button-matched pre padding."}},"icon":{"$description":"Reserved icon-size role, parallel to the existing --hds-icon-* bridge (src/styles/theme.css), for future direct semantic.size.icon consumers.","sm":{"$value":"{primitive.size.16}","$description":"Small icon box — matches --hds-icon-small."},"md":{"$value":"{primitive.size.20}","$description":"Medium icon box — matches --hds-icon-medium."},"lg":{"$value":"{primitive.size.24}","$description":"Large icon box — matches --hds-icon-large."}},"avatar":{"$value":"{primitive.size.40}","$description":"Avatar size (width and height) for activity feeds and identity glyphs. Same pixels as row.compact today, a separate role (hds#242)."},"tile":{"$value":"{primitive.size.120}","$description":"Minimum height of a metric tile, one height for every tile so rows line up (hds#403)."},"row":{"$description":"Table row minimum height by density.","compact":{"$value":"{primitive.size.40}","$description":"Compact-density row minimum height."},"comfortable":{"$value":"{primitive.size.48}","$description":"Comfortable-density row minimum height."}}},"zIndex":{"$type":"number","$description":"Named stacking layers, aliasing the numeric primitive.zIndex scale (hds#242).","control":{"$value":"{primitive.zIndex.10}","$description":"Raises an interactive control (e.g. a native range input) above its visual decoration for hit-testing."},"sticky":{"$value":"{primitive.zIndex.100}","$description":"Sticky-positioned elements, such as a table header row."}}}`), sa = { nav: { bg: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Nav bar background fill." }, bgActive: { $type: "color", $value: "{semantic.accent.subtle}", $description: "Nav item background fill when active or selected." }, borderActive: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Nav item border color when active or selected." }, text: { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Nav item text color at rest." }, textActive: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Nav item text color when active or selected." }, height: { $type: "dimension", $value: "{primitive.space.16}", $description: "Nav bar height." }, paddingX: { $type: "dimension", $value: "{primitive.space.6}", $description: "Horizontal padding inside nav items." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Vertical padding inside nav items." } }, tag: { background: { $type: "color", $value: "{semantic.accent.subtle}", $description: "Base tag surface color." }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Default tag text color." }, border: { $type: "color", $value: "{semantic.color.border.default}", $description: "Default tag border color." }, radius: { $type: "dimension", $value: "{primitive.radius.full}", $description: "Pill radius for the tag surface." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Tag type size." }, fontWeight: { $type: "fontWeight", $value: "{primitive.typography.weight.medium}", $description: "Tag label weight." }, lineHeight: { $type: "number", $value: "{primitive.typography.lineHeight.normal}", $description: "Readable label rhythm for tags." }, minWidth: { $type: "dimension", $value: "{primitive.size.48}", $description: "Minimum tag width." }, minHeight: { $type: "dimension", $value: "{primitive.space.6}", $description: "Minimum tag height." }, paddingX: { $type: "dimension", $value: "{primitive.space.3}", $description: "Horizontal padding inside the pill." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Vertical padding inside the pill." }, activeText: { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Text color when the tag is active." }, activeBackground: { $type: "color", $value: "{semantic.accent.rest}", $description: "Active tag fill color." }, activeBorder: { $type: "color", $value: "{semantic.accent.rest}", $description: "Active tag border color." }, activeHover: { $type: "color", $value: "{semantic.accent.hover}", $description: "Active tag hover fill color." } }, badge: { fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Badge type size." }, fontWeight: { $type: "fontWeight", $value: "{primitive.typography.weight.medium}", $description: "Badge label weight." }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Badge text color." }, bg: { $type: "color", $value: "{semantic.color.feedback.bg.info}", $extensions: { "com.figma.variables": { modes: { Light: "{semantic.color.feedback.bg.info}", Dark: "{semantic.color.feedback.bg.info}" } } }, $description: "Badge background color." }, radius: { $type: "dimension", $value: "{primitive.radius.4}", $description: "Small rounded radius for badges." }, height: { $type: "dimension", $value: "{primitive.size.20}", $description: "Badge height." }, minWidth: { $type: "dimension", $value: "{primitive.size.20}", $description: "Badge minimum width." }, paddingY: { $type: "dimension", $value: "{primitive.space.px2}", $description: "Vertical padding inside the badge." }, paddingX: { $type: "dimension", $value: "{primitive.space.px6}", $description: "Horizontal padding inside the badge." } }, button: { bg: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Primary button fill." }, bgHover: { $type: "color", $value: "{semantic.accent.hover}", $description: "Primary button hover fill." }, text: { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Primary button text color." }, radius: { $type: "dimension", $value: "{semantic.radius.action}", $description: "Button corner radius." }, paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Horizontal button padding." }, paddingY: { $type: "dimension", $value: "{primitive.space.3}", $description: "Vertical button padding." }, size: { sm: { paddingX: { $type: "dimension", $value: "{primitive.space.2}", $description: "Small button horizontal padding (8px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.1}", $description: "Small button vertical padding (4px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Small button label size (12px, hds#283: was 13px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.12}", $description: "Small button icon slot size (12px)." }, height: { $type: "dimension", $value: "{primitive.space.7}", $description: "Small button height (28px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.1}", $description: "Small button icon-to-label gap (4px)." } }, md: { paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Medium button horizontal padding (16px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.3}", $description: "Medium button vertical padding (12px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.sm}", $description: "Medium button label size (14px, hds#283: was 15px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.16}", $description: "Medium button icon slot size (16px)." }, height: { $type: "dimension", $value: "{primitive.size.40}", $description: "Medium button height (40px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Medium button icon-to-label gap (8px)." } }, lg: { paddingX: { $type: "dimension", $value: "{primitive.space.6}", $description: "Large button horizontal padding (24px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.4}", $description: "Large button vertical padding (16px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.base}", $description: "Large button label size (16px, hds#283: was 17px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.20}", $description: "Large button icon slot size (20px)." }, height: { $type: "dimension", $value: "{primitive.size.48}", $description: "Large button height (48px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Large button icon-to-label gap (8px)." } } }, primary: { textDisabled: { $type: "color", $value: "{semantic.color.content.onAccent}", $extensions: { "com.figma.variables": { modes: { Light: "{semantic.color.content.onAccent}", Dark: "{semantic.color.content.disabled}" } } }, $description: "Disabled primary button text color." }, bgDisabled: { $type: "color", $value: "{semantic.color.surface.accentSubtle}", $description: "Disabled primary button fill." } }, secondary: { bg: { rest: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Secondary button fill." }, hover: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Secondary button hover fill." }, pressed: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Secondary button pressed fill." } }, border: { rest: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button border." }, hover: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button hover border." }, pressed: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button pressed border." }, disabled: { $type: "color", $value: "{semantic.color.border.subdued}", $description: "Secondary button disabled border." } }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Secondary button text color." } } }, input: { bg: { $type: "color", $value: "{semantic.color.surface.raised}" }, text: { $type: "color", $value: "{semantic.color.content.primary}" }, border: { $type: "color", $value: "{semantic.color.border.interactive}" }, borderError: { $type: "color", $value: "{semantic.color.feedback.error}" }, radius: { $type: "dimension", $value: "{semantic.radius.action}" }, paddingX: { $type: "dimension", $value: "{primitive.space.4}" }, paddingY: { $type: "dimension", $value: "{primitive.space.3}" } }, card: { bg: { $type: "color", $value: "{semantic.color.surface.raised}" }, border: { $type: "color", $value: "{semantic.color.border.default}" }, radius: { $type: "dimension", $value: "{primitive.radius.8}" }, padding: { $type: "dimension", $value: "{primitive.space.6}" }, gap: { $type: "dimension", $value: "{primitive.space.2}" } }, lightbox: { backdrop: { blur: { $type: "dimension", $value: "{primitive.blur.16}", $description: "Backdrop blur applied behind fullscreen image lightboxes." } } } }, la = { $description: "Shadcn-style role aliases mapping to semantic tokens. Compiled to --role-* CSS vars.", background: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Page background. shadcn role: background." }, foreground: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Default text on background. shadcn role: foreground." }, card: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Card surface. shadcn role: card." }, "card-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on card. shadcn role: card-foreground." }, popover: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Popover/menu surface. shadcn role: popover." }, scrim: { $type: "color", $value: "{semantic.color.surface.scrim}", $description: "Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60." }, "pressed-overlay": { $type: "color", $value: "{semantic.color.state.pressed.overlay}", $description: "Pressed-state overlay colour role. Apply alpha in the class, e.g. inset-shadow-pressed-overlay/5." }, "popover-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on popover. shadcn role: popover-foreground." }, primary: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Primary action surface. shadcn role: primary." }, "primary-foreground": { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Text/icons on primary surface. shadcn role: primary-foreground." }, secondary: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Secondary action surface. shadcn role: secondary." }, "secondary-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on secondary surface. shadcn role: secondary-foreground." }, muted: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Muted/quiet bg (skeletons, disabled inputs). shadcn role: muted." }, "muted-foreground": { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Muted text. shadcn role: muted-foreground." }, accent: { $type: "color", $value: "{semantic.color.surface.accentSubtle}", $description: "Hover/active tinted bg. shadcn role: accent." }, "accent-foreground": { $type: "color", $value: "{semantic.color.content.accent}", $description: "Text on accent surface. shadcn role: accent-foreground." }, destructive: { $type: "color", $value: "{semantic.color.feedback.error}", $description: "Destructive action surface. shadcn role: destructive." }, "destructive-foreground": { $type: "color", $value: "{semantic.color.content.inverse}", $description: "Text on destructive surface. shadcn role: destructive-foreground." }, border: { $type: "color", $value: "{semantic.color.border.default}", $description: "Default border. shadcn role: border." }, input: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Input field border. shadcn role: input." }, ring: { $type: "color", $value: "{semantic.color.border.accent}", $description: "Focus ring color. shadcn role: ring." }, radius: { $type: "dimension", $value: "{semantic.radius.action}", $description: "Default border radius. shadcn role: radius." } }, ca = {
+const aa = "https://www.designtokens.org/schemas/2025.10/format.json", ra = "Adrian Milsap hirobius design tokens - W3C DTCG 2025.10 compliant, Figma SDS architecture", na = /* @__PURE__ */ JSON.parse(`{"$description":"Base values used as inputs to derived token layers.","color":{"$type":"color","neutral":{"50":{"$value":"#fafafa","$description":"Specific value within the neutral range at a defined lightness step."},"100":{"$value":"#f5f5f5","$description":"Specific value within the neutral range at a defined lightness step."},"200":{"$value":"#e5e5e5","$description":"Specific value within the neutral range at a defined lightness step."},"300":{"$value":"#d4d4d4","$description":"Specific value within the neutral range at a defined lightness step."},"400":{"$value":"#a3a3a3","$description":"Specific value within the neutral range at a defined lightness step."},"500":{"$value":"#737373","$description":"Specific value within the neutral range at a defined lightness step."},"600":{"$value":"#525252","$description":"Specific value within the neutral range at a defined lightness step."},"700":{"$value":"#404040","$description":"Specific value within the neutral range at a defined lightness step."},"800":{"$value":"#262626","$description":"Specific value within the neutral range at a defined lightness step."},"850":{"$value":"#1a1a1a","$description":"Specific value within the neutral range at a defined lightness step."},"900":{"$value":"#111111","$description":"Specific value within the neutral range at a defined lightness step."},"950":{"$value":"#0a0a0a","$description":"Specific value within the neutral range at a defined lightness step."},"$description":"Discrete values within the neutral range at defined lightness steps.","white":{"$value":"#ffffff","$description":"Specific value within the neutral range at a defined lightness step."},"black":{"$value":"#000000","$description":"Specific value within the neutral range at a defined lightness step."}},"blue":{"50":{"$value":"oklch(0.96 0.03 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"100":{"$value":"oklch(0.92 0.04 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"200":{"$value":"oklch(0.88 0.07 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"300":{"$value":"oklch(0.70 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"400":{"$value":"oklch(0.65 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"450":{"$value":"oklch(0.56 0.29 266.60)","$description":"Specific value within the blue range at a defined lightness step."},"500":{"$value":"#1E2EFD","$description":"Specific value within the blue range at a defined lightness step."},"600":{"$value":"oklch(0.45 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"700":{"$value":"oklch(0.44 0.2903 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"800":{"$value":"oklch(0.30 0.07 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"900":{"$value":"oklch(0.22 0.05 266.54)","$description":"Specific value within the blue range at a defined lightness step."},"$description":"Discrete values within the blue range at defined lightness steps."},"red":{"50":{"$value":"#fef2f2","$description":"Specific value within the red range at a defined lightness step."},"400":{"$value":"#f87171","$description":"Specific value within the red range at a defined lightness step."},"700":{"$value":"#b91c1c","$description":"Specific value within the red range at a defined lightness step."},"950":{"$value":"#450a0a","$description":"Specific value within the red range at a defined lightness step."},"$description":"Discrete values within the red range at defined lightness steps."},"green":{"50":{"$value":"#ecfdf5","$description":"Specific value within the green range at a defined lightness step."},"400":{"$value":"#34d399","$description":"Specific value within the green range at a defined lightness step."},"700":{"$value":"#047857","$description":"Specific value within the green range at a defined lightness step."},"950":{"$value":"#022c22","$description":"Specific value within the green range at a defined lightness step."},"$description":"Discrete values within the green range at defined lightness steps."},"apple":{"50":{"$value":"#f2faeb","$description":"Apple-green accent tint — faintest step."},"100":{"$value":"#e2f3cf","$description":"Apple-green accent — very light tint."},"200":{"$value":"#c7e7a4","$description":"Apple-green accent — light tint."},"300":{"$value":"#a6d873","$description":"Apple-green accent — soft mid-light step."},"400":{"$value":"#85c84c","$description":"Apple-green accent — bright step; dark-mode rest accent."},"500":{"$value":"#66b239","$description":"Apple-green accent rest — bright, rich apple green; AA for dark (neutral.900) text as a fill."},"600":{"$value":"#54922d","$description":"Apple-green accent — hover / border step."},"700":{"$value":"#416f20","$description":"Apple-green accent — pressed and accent-intent text (AA for text on page and card surfaces)."},"800":{"$value":"#34571b","$description":"Apple-green accent — deep step."},"900":{"$value":"#2b4518","$description":"Apple-green accent — darkest usable step."},"950":{"$value":"#16250c","$description":"Apple-green accent — near-black green substrate."},"$description":"Discrete values within the apple-green (brand accent) range at defined lightness steps. Distinct from the emerald \`green\` feedback/success scale."},"violet":{"50":{"$value":"#f5f3ff","$description":"Specific value within the violet range at a defined lightness step."},"400":{"$value":"#a78bfa","$description":"Specific value within the violet range at a defined lightness step."},"700":{"$value":"#6d28d9","$description":"Specific value within the violet range at a defined lightness step."},"950":{"$value":"#2e1065","$description":"Specific value within the violet range at a defined lightness step."},"$description":"Discrete values within the violet range at defined lightness steps."},"lilac":{"50":{"$value":"#f7f4fe","$description":"Specific value within the lilac range at a defined lightness step."},"100":{"$value":"#efe9fd","$description":"Specific value within the lilac range at a defined lightness step."},"200":{"$value":"#ddd0fb","$description":"Specific value within the lilac range at a defined lightness step."},"300":{"$value":"#c3aef6","$description":"Specific value within the lilac range at a defined lightness step."},"400":{"$value":"#a585ee","$description":"Specific value within the lilac range at a defined lightness step."},"450":{"$value":"#9a6fe8","$description":"Specific value within the lilac range at a defined lightness step."},"500":{"$value":"#6f3fd4","$description":"Lilac accent rest — AA for white text on page and card surfaces."},"600":{"$value":"#5f33c0","$description":"Specific value within the lilac range at a defined lightness step."},"700":{"$value":"#4f2aa3","$description":"Specific value within the lilac range at a defined lightness step."},"800":{"$value":"#3a1f78","$description":"Specific value within the lilac range at a defined lightness step."},"900":{"$value":"#2a1659","$description":"Specific value within the lilac range at a defined lightness step."},"$description":"Lilac ramp at fixed lightness steps. Mirrors the blue ramp's stops; available to brand overlays."},"amber":{"50":{"$value":"#fffbeb","$description":"Specific value within the amber range at a defined lightness step."},"400":{"$value":"#fbbf24","$description":"Specific value within the amber range at a defined lightness step."},"800":{"$value":"#92400e","$description":"Specific value within the amber range at a defined lightness step."},"950":{"$value":"#451a03","$description":"Specific value within the amber range at a defined lightness step."},"$description":"Discrete values within the amber range at defined lightness steps."},"stone":{"100":{"$value":"#F5EFE7","$description":"Stone 100 — near-white warm tint; accent-subtle surface."},"400":{"$value":"#D0B492","$description":"Stone 400 — light warm tone; dark-mode pressed accent."},"450":{"$value":"#BC9D7E","$description":"Stone 450 — medium warm tone; dark-mode hover accent."},"500":{"$value":"#A8896A","$description":"Stone 500 — mid warm tone; dark-mode rest accent."},"600":{"$value":"#8B6F47","$description":"Stone 600 — primary warm stone; light-mode rest accent and CTA surface."},"700":{"$value":"#75593A","$description":"Stone 700 — darker warm stone; light-mode hover accent."},"800":{"$value":"#5C432A","$description":"Stone 800 — deep warm stone; light-mode pressed accent."},"950":{"$value":"#3A2E1F","$description":"Stone 950 — near-black warm tone; dark-mode subtle accent surface."},"$description":"Warm stone/brown palette for Concrete Creations brand accent ramp. PLACEHOLDER values pending final brand identity work."},"projectBrand":{"microsoftGameDev":{"100":{"$value":"#E5E5FC","$description":"Light support tone for the Microsoft Game Dev project brand."},"500":{"$value":"#6d31fb","$description":"Primary accent tone for the Microsoft Game Dev project brand."},"900":{"$value":"oklch(0.22 0.16 304)","$description":"Dark support tone for the Microsoft Game Dev project brand."},"$description":"Project-specific brand colors used in portfolio contexts."},"$description":"Project-specific brand color families reserved for portfolio surfaces."}},"space":{"0":{"$value":{"value":0,"unit":"px"}},"1":{"$value":{"value":4,"unit":"px"}},"2":{"$value":{"value":8,"unit":"px"}},"3":{"$value":{"value":12,"unit":"px"}},"4":{"$value":{"value":16,"unit":"px"}},"5":{"$value":{"value":20,"unit":"px"}},"6":{"$value":{"value":24,"unit":"px"}},"7":{"$value":{"value":28,"unit":"px"}},"8":{"$value":{"value":32,"unit":"px"}},"10":{"$value":{"value":40,"unit":"px"}},"12":{"$value":{"value":48,"unit":"px"}},"16":{"$value":{"value":64,"unit":"px"}},"20":{"$value":{"value":80,"unit":"px"}},"24":{"$value":{"value":96,"unit":"px"}},"32":{"$value":{"value":128,"unit":"px"}},"$type":"dimension","$description":"Dimensional increments within the 4px base-unit spatial system.","px1":{"$value":{"value":1,"unit":"px"}},"px2":{"$value":{"value":2,"unit":"px"}},"px6":{"$value":{"value":6,"unit":"px"}},"px10":{"$value":{"value":10,"unit":"px"}}},"blur":{"8":{"$value":{"value":8,"unit":"px"},"$description":"8px blur step."},"16":{"$value":{"value":16,"unit":"px"},"$description":"Fullscreen backdrop blur for portfolio lightbox overlays."},"$type":"dimension","$description":"Backdrop blur strengths for frosted overlays and fullscreen media treatments."},"radius":{"0":{"$value":{"value":0,"unit":"px"}},"2":{"$value":{"value":2,"unit":"px"}},"4":{"$value":{"value":4,"unit":"px"}},"8":{"$value":{"value":8,"unit":"px"}},"12":{"$value":{"value":12,"unit":"px"}},"$type":"dimension","full":{"$value":{"value":9999,"unit":"px"}}},"typography":{"family":{"$type":"fontFamily","primary":{"$value":["Plus Jakarta Sans","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Self-hosted Plus Jakarta Sans (OFL) body typeface; falls back to system-ui sans-serif stack."},"display":{"$value":["Plus Jakarta Sans","system-ui","-apple-system","BlinkMacSystemFont","Segoe UI","sans-serif"],"$description":"Display face: Plus Jakarta Sans Bold (OFL), bound to the display and title composites."},"mono":{"$value":["IBM Plex Mono","Courier New","monospace"],"$description":"Monospace face: IBM Plex Mono. Falls back to Courier New, monospace."}},"size":{"$type":"dimension","xs":{"$value":{"value":12,"unit":"px"},"$description":"Tailwind 4 default text-xs (hds#283 ramp)."},"sm":{"$value":{"value":14,"unit":"px"},"$description":"Tailwind 4 default text-sm (hds#283 ramp)."},"base":{"$value":{"value":16,"unit":"px"},"$description":"Tailwind 4 default text-base (hds#283 ramp)."},"lg":{"$value":{"value":18,"unit":"px"},"$description":"Tailwind 4 default text-lg (hds#283 ramp)."},"xl":{"$value":{"value":20,"unit":"px"},"$description":"Tailwind 4 default text-xl (hds#283 ramp)."},"2xl":{"$value":{"value":24,"unit":"px"},"$description":"Tailwind 4 default text-2xl (hds#283 ramp)."},"3xl":{"$value":{"value":30,"unit":"px"},"$description":"Tailwind 4 default text-3xl (hds#283 ramp)."},"4xl":{"$value":{"value":36,"unit":"px"},"$description":"Tailwind 4 default text-4xl (hds#283 ramp)."},"5xl":{"$value":{"value":48,"unit":"px"},"$description":"Tailwind 4 default text-5xl (hds#283 ramp)."},"6xl":{"$value":{"value":60,"unit":"px"},"$description":"Swiss-canon display size (hds#283 ramp). Static desktop value; fluid in theme.css. Tailwind 4 default text-6xl."},"code":{"$value":{"value":13,"unit":"px"},"$description":"13px code size. The mono role (hds#485): one px below ui so code sits level with 14px prose."}},"weight":{"$type":"fontWeight","regular":{"$value":400},"medium":{"$value":500},"bold":{"$value":700}},"lineHeight":{"$type":"number","compact":{"$value":0.95},"none":{"$value":1},"tight":{"$value":1.25},"snug":{"$value":1.375,"$description":"Swiss-canon snug rhythm (10t-5). Used by h2/h3 composites for tight-but-readable heading lines."},"normal":{"$value":1.5},"relaxed":{"$value":1.625,"$description":"Swiss-canon relaxed rhythm (10t-5). Used by body/small/mono composites for long-form prose comfort."},"display":{"$value":1.05,"$description":"Display role leading (hds#485)."},"body":{"$value":1.6,"$description":"Body role leading (hds#485)."}},"letterSpacing":{"$type":"dimension","tight":{"$value":{"value":-0.01,"unit":"em"}},"normal":{"$value":{"value":0,"unit":"em"}},"caps":{"$value":{"value":0.06,"unit":"em"},"$description":"All-caps tracking for eyebrow / kicker labels. Always pairs with text-transform: uppercase."}}},"duration":{"$type":"duration","instant":{"$value":{"value":100,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"short":{"$value":{"value":150,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"medium":{"$value":{"value":250,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."},"long":{"$value":{"value":400,"unit":"ms"},"$description":"Fixed elapsed time interval in milliseconds."}},"easing":{"$type":"cubicBezier","emphasized":{"$value":[0.4,0,0.2,1],"$description":"Cubic bezier with balanced input and output tangents."},"decelerate":{"$value":[0,0,0.2,1],"$description":"Cubic bezier with steep initial gain and constrained tail velocity."},"accelerate":{"$value":[0.4,0,1,1],"$description":"Cubic bezier with restrained initial gain and steep terminal velocity."},"elastic":{"$value":[0.34,1.56,0.64,1],"$description":"Spring response defined by stiffness, damping, and mass parameters.","$extensions":{"com.hirobius.hds":{"$type":"spring","$value":{"type":"spring","stiffness":300,"damping":20,"mass":1},"bezierSource":"The cubicBezier is easeOutBack (easings.net), chosen as a stand-in for the spring, not fitted to it: both overshoot once, the curve by about 10% and spring(300, 20, 1) by about 11%."}}}},"shadow":{"color":{"$type":"color","$value":"220 13% 18%","$description":"HSL channels for shadow-color alpha compositing. Light: cool neutral; dark: black.","$extensions":{"com.figma.variables":{"modes":{"Light":"220 13% 18%","Dark":"0 0% 0%"}}}}},"breakpoint":{"$description":"Discrete viewport thresholds expressed as dimensions.","xs":{"$type":"dimension","$value":{"value":375,"unit":"px"}},"sm":{"$type":"dimension","$value":{"value":640,"unit":"px"}},"md":{"$type":"dimension","$value":{"value":768,"unit":"px"}},"lg":{"$type":"dimension","$value":{"value":1024,"unit":"px"}},"xl":{"$type":"dimension","$value":{"value":1280,"unit":"px"}}},"size":{"8":{"$type":"dimension","$value":{"value":8,"unit":"px"},"$description":"8px size step."},"10":{"$type":"dimension","$value":{"value":10,"unit":"px"},"$description":"10px size step."},"12":{"$type":"dimension","$value":{"value":12,"unit":"px"},"$description":"12px size step."},"16":{"$type":"dimension","$value":{"value":16,"unit":"px"},"$description":"16px size step."},"20":{"$type":"dimension","$value":{"value":20,"unit":"px"},"$description":"20px size step."},"24":{"$type":"dimension","$value":{"value":24,"unit":"px"},"$description":"24px size step."},"32":{"$type":"dimension","$value":{"value":32,"unit":"px"},"$description":"32px size step."},"40":{"$type":"dimension","$value":{"value":40,"unit":"px"},"$description":"40px size step."},"48":{"$type":"dimension","$value":{"value":48,"unit":"px"},"$description":"48px size step."},"64":{"$type":"dimension","$value":{"value":64,"unit":"px"},"$description":"64px size step."},"80":{"$type":"dimension","$value":{"value":80,"unit":"px"},"$description":"80px size step."},"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px size step."},"120":{"$type":"dimension","$value":{"value":120,"unit":"px"},"$description":"120px size step. Backs semantic.size.tile."},"$description":"Unaliased dimensional values.","interactive":{"$description":"Interactive control size minimums.","min":{"$type":"dimension","$value":{"value":44,"unit":"px"},"$description":"Minimum interactive hit target size."},"minCompact":{"$type":"dimension","$value":{"value":24,"unit":"px"},"$description":"Compact inline control target minimum, e.g. a chip's remove button: WCAG 2.2 AA (2.5.8), not the 44px AAA floor (2.5.5)."}},"width":{"96":{"$type":"dimension","$value":{"value":96,"unit":"px"},"$description":"96px width step."},"280":{"$type":"dimension","$value":{"value":280,"unit":"px"},"$description":"Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room."},"760":{"$type":"dimension","$value":{"value":760,"unit":"px"}},"1200":{"$type":"dimension","$value":{"value":1200,"unit":"px"}},"50ch":{"$type":"dimension","$value":{"value":50,"unit":"ch"}}}},"grid":{"columns":{"1":{"$type":"number","$value":1},"2":{"$type":"number","$value":2},"3":{"$type":"number","$value":3}}},"zIndex":{"0":{"$type":"number","$value":0},"10":{"$type":"number","$value":10},"100":{"$type":"number","$value":100},"1000":{"$type":"number","$value":1000},"$description":"Discrete stacking levels along the z axis."},"borderWidth":{"$type":"dimension","xs":{"$value":{"value":1,"unit":"px"}},"sm":{"$value":{"value":2,"unit":"px"}},"md":{"$value":{"value":4,"unit":"px"}}}}`), oa = /* @__PURE__ */ JSON.parse(`{"motion":{"$type":"transition","$extensions":{"com.hirobius.hds":{"$type":"motion"}},"productive":{"$value":{"duration":"{primitive.duration.short}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.decelerate}"},"$description":"For micro-interactions and status changes. No deformation."},"expressive":{"$value":{"duration":"{primitive.duration.medium}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.elastic}"},"$description":"For teaching moments and significant UI entries. Includes physics-based squish."},"spatial":{"$value":{"duration":"{primitive.duration.long}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.emphasized}"},"$description":"For elements traveling long distances across the viewport."},"exit":{"$value":{"duration":"{primitive.duration.instant}","delay":{"value":0,"unit":"ms"},"timingFunction":"{primitive.easing.accelerate}"},"$description":"For elements being removed from the DOM."},"distance":{"$type":"dimension","$value":"{primitive.space.6}","$description":"Scroll-reveal translateY travel distance. Equals semantic.space.scale.md today, but names motion travel, not a spacing tier (hds#242)."}},"color":{"$type":"color","surface":{"page":{"$value":"{primitive.color.neutral.white}","$description":"Main page background","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.white}","Dark":"{primitive.color.neutral.black}"}}}},"raised":{"$value":"{primitive.color.neutral.50}","$description":"Subtle elevated surface (cards, sections)","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.neutral.950}"}}}},"overlay":{"$value":"{primitive.color.neutral.100}","$description":"Deeper surface layer","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.850}"}}}},"scrim":{"$value":"{primitive.color.neutral.900}","$description":"Opaque modal backdrop, near-black in both themes. Apply alpha in the class (bg-scrim/60), not here.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.black}"}}}},"inverse":{"$value":"{primitive.color.neutral.black}","$description":"Inverted background for contrast sections","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.black}","Dark":"{primitive.color.neutral.white}"}}}},"accent":{"$value":"{primitive.color.apple.500}","$description":"Accent-colored background — bright apple green (stays green on dark surfaces; pair with content.onAccent dark text).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.500}","Dark":"{primitive.color.apple.400}"}}}},"accentSubtle":{"$value":"{primitive.color.apple.50}","$description":"Faint accent tint for hover states or highlights","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.50}","Dark":"{primitive.color.apple.900}"}}}},"hover":{"$value":"{primitive.color.neutral.100}","$description":"Background for a hovered interactive surface (menu items, chips, tertiary buttons).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"pressed":{"$value":"{primitive.color.neutral.50}","$description":"Background for an actively pressed interactive surface.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.neutral.950}"}}}},"selected":{"$value":"{primitive.color.neutral.200}","$description":"Background for a persistently selected item (active tab, checked row).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.800}"}}}},"muted":{"$value":"{primitive.color.neutral.100}","$description":"Muted background for low-emphasis content blocks.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"sunken":{"$value":"{primitive.color.neutral.200}","$description":"Recessed background for inset wells (inputs, code blocks, nested panels).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.850}"}}}}},"content":{"primary":{"$value":"{primitive.color.neutral.900}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.100}"}}}},"secondary":{"$value":"{primitive.color.neutral.600}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.600}","Dark":"{primitive.color.neutral.400}"}}}},"disabled":{"$value":"{primitive.color.neutral.300}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.600}"}}}},"inverse":{"$value":"{primitive.color.neutral.100}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.900}"}}}},"accent":{"$value":"{primitive.color.apple.700}","$description":"Accent-intent text/icon color — a dark apple green legible on page and card surfaces. Pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.400}"}}}},"onAccent":{"$value":"{primitive.color.neutral.900}","$description":"Text/icon color on accent fills — a dark neutral, since the brand accent fill is a bright apple green in both light and dark mode.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.900}","Dark":"{primitive.color.neutral.900}"}}}},"success":{"$value":"{primitive.color.green.700}","$description":"Success-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.700}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$value":"{primitive.color.amber.800}","$description":"Warning-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.800}","Dark":"{primitive.color.amber.400}"}}}},"danger":{"$value":"{primitive.color.red.700}","$description":"Danger-toned text/icon color, independent of feedback banners.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.700}","Dark":"{primitive.color.red.400}"}}}}},"border":{"default":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.700}"}}}},"interactive":{"$value":"{primitive.color.neutral.500}","$description":"Border for interactive control boundaries (inputs, selects, secondary buttons); meets the WCAG 1.4.11 3:1 non-text contrast floor.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.500}","Dark":"{primitive.color.neutral.500}"}}}},"subdued":{"$value":"{primitive.color.neutral.200}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.200}","Dark":"{primitive.color.neutral.800}"}}}},"subtle":{"$value":"{primitive.color.neutral.100}","$description":"Lowest-contrast border for resting hairline edges on flat surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.100}","Dark":"{primitive.color.neutral.850}"}}}},"strong":{"$value":"{primitive.color.neutral.300}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.600}"}}}},"accent":{"$value":"{primitive.color.apple.600}","$description":"Accent border — apple green, dark enough to read as a boundary on page and card surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.600}","Dark":"{primitive.color.apple.400}"}}}},"success":{"$value":"{primitive.color.green.400}","$description":"Success-toned border for status outlines and success-state inputs.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.400}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$value":"{primitive.color.amber.400}","$description":"Warning-toned border for status outlines and warning-state inputs.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.400}","Dark":"{primitive.color.amber.400}"}}}}},"feedback":{"error":{"$type":"color","$value":"{primitive.color.red.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.700}","Dark":"{primitive.color.red.400}"}}}},"success":{"$type":"color","$value":"{primitive.color.green.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.700}","Dark":"{primitive.color.green.400}"}}}},"warning":{"$type":"color","$value":"{primitive.color.amber.800}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.800}","Dark":"{primitive.color.amber.400}"}}}},"info":{"$type":"color","$value":"{primitive.color.blue.500}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.500}","Dark":"{primitive.color.blue.300}"}}}},"inProgress":{"$type":"color","$value":"{primitive.color.violet.700}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.violet.700}","Dark":"{primitive.color.violet.400}"}}}},"bg":{"error":{"$type":"color","$value":"{primitive.color.red.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.red.50}","Dark":"{primitive.color.red.950}"}}}},"success":{"$type":"color","$value":"{primitive.color.green.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.green.50}","Dark":"{primitive.color.green.950}"}}}},"warning":{"$type":"color","$value":"{primitive.color.amber.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.amber.50}","Dark":"{primitive.color.amber.950}"}}}},"info":{"$type":"color","$value":"{primitive.color.blue.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.blue.50}","Dark":"{primitive.color.blue.900}"}}}},"inProgress":{"$type":"color","$value":"{primitive.color.violet.50}","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.violet.50}","Dark":"{primitive.color.violet.950}"}}}}}},"state":{"pressed":{"overlay":{"$value":"{primitive.color.neutral.black}","$description":"Opaque pressed wash over a control's own fill: black in light, white in dark. Alpha in the class (inset-shadow-pressed-overlay/5).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.black}","Dark":"{primitive.color.neutral.white}"}}}}}}},"space":{"$type":"dimension","$description":"Semantic spacing tiers: subgrid, component, layout, section, scale.","scale":{"$description":"hds#206: the canonical spacing vocabulary, one monotonic t-shirt scale (xs to xl) for padding, margin and gap. Supersedes deprecated names.","xs":{"$value":"{primitive.space.2}","$description":"8px — smallest step. Same value as component.gap (deprecated alias)."},"sm":{"$value":"{primitive.space.4}","$description":"16px — same value as layout.tight (deprecated alias)."},"md":{"$value":"{primitive.space.6}","$description":"24px. Default of the overridable roles surface.padding and region.gutter. The deprecated layout.normal has the same value."},"lg":{"$value":"{primitive.space.8}","$description":"32px — same value as layout.inset (deprecated alias)."},"xl":{"$value":"{primitive.space.12}","$description":"48px — same value as layout.spacious (deprecated alias)."}},"surface":{"$description":"hds#206 surface inset role. Tenants override it per brand and density, always with a scale step.","padding":{"$value":"{semantic.space.scale.md}","$description":"24px (scale.md) inset for cards, forms and panels. Tenants override it per brand and density. Replaces component.padding."}},"region":{"$description":"hds#206 region gutter role. theme.css retunes it per viewport, always with a scale step.","gutter":{"$value":"{semantic.space.scale.md}","$description":"24px (scale.md) column and region gutters; theme.css sets scale.lg (32px), and scale.sm (16px) below 640px. Replaces layout.gutter."}},"subgrid":{"hairline":{"$value":"{primitive.space.px1}","$description":"1px border offset and hairline spacing."},"xs":{"$value":"{primitive.space.px2}","$description":"2px vertical rhythm nudge and baseline adjustment."},"gap":{"$value":"{primitive.space.1}","$description":"4px cap-height and inline cluster spacing."}},"component":{"gap":{"$value":"{primitive.space.2}","$description":"8px label↔input rhythm and closely coupled control spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.xs; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.xs"},"medium":{"$value":"{primitive.space.3}","$description":"12px adjacent form fields and medium intra-component gaps."},"padding":{"$value":"{semantic.space.surface.padding}","$description":"24px inset for cards, forms and panels. DEPRECATED alias (hds#206) — use semantic.space.surface.padding; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.surface.padding"}},"layout":{"tight":{"$value":"{primitive.space.4}","$description":"16px default HdsStack gap and inter-component spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.sm; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.sm"},"normal":{"$value":"{primitive.space.6}","$description":"24px column gutters and sidebar gutter spacing. DEPRECATED alias (hds#206) — use semantic.space.scale.md; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.md"},"gutter":{"$value":"{semantic.space.region.gutter}","$description":"24px column and region gutters. DEPRECATED alias (hds#206) — use semantic.space.region.gutter (responsive in theme.css); kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.region.gutter"},"inset":{"$value":"{primitive.space.8}","$description":"32px major block separation and inset inter-component gaps. DEPRECATED alias (hds#206) — use semantic.space.scale.lg; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.lg"},"spacious":{"$value":"{primitive.space.12}","$description":"48px break between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.","$deprecated":"hds#206 — use semantic.space.scale.xl"}},"section":{"stack":{"$value":"{primitive.space.20}","$description":"80px vertical rhythm between page sections and major editorial blocks."},"inset":{"$value":"{primitive.space.24}","$description":"96px hero and landing-page inset padding."},"heroMax":{"$value":"{primitive.space.32}","$description":"128px maximum hero region padding for extra-large displays."}},"sidebar":{"indent":{"$value":"{primitive.space.3}","$description":"12px indent level for nested sidebar and TOC groups."},"gap":{"$value":"{primitive.space.4}","$description":"16px vertical spacing between items in sidebar and TOC stacks."},"sectionGap":{"$value":"{primitive.space.3}","$description":"12px spacing between sidebar sections and grouped rail blocks."},"railPadding":{"$value":"{primitive.space.5}","$description":"20px outer padding for sidebar and TOC rails."},"railWidth":{"$type":"dimension","$value":"{primitive.size.width.280}","$description":"Docs-shell nav and TOC rail width (hds#280), one token for both rails; 0 below their breakpoint (see HdsDocsShell)."}}},"layout":{"width":{"content":{"$type":"dimension","$value":"{primitive.size.width.760}","$description":"Max width for prose/content (760px). Use with HdsContainer for centered text blocks."},"max":{"$type":"dimension","$value":"{primitive.size.width.1200}","$description":"Max width for full-layout containers (1200px). Use with HdsContainer for page layouts."}},"container":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.1200}"}},"content":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.760}"}},"prose":{"maxWidth":{"$type":"dimension","$value":"{primitive.size.width.50ch}"}},"section":{"paddingY":{"$type":"dimension","$value":"{primitive.space.20}"}},"grid":{"gap":{"$type":"dimension","$value":"{primitive.space.8}"},"columns":{"mobile":{"$type":"number","$value":"{primitive.grid.columns.1}"},"tablet":{"$type":"number","$value":"{primitive.grid.columns.2}"},"desktop":{"$type":"number","$value":"{primitive.grid.columns.3}"}}}},"typography":{"$type":"typography","$description":"5-role type ramp plus mono (hds#483): display, title, body, ui, caption, mono. h1, h2, h3 and eyebrow are deprecated aliases.","display":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.5xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.display}"},"$description":"One per page, hero only. 48px / 1.05 / 700. Role 1 of 6."},"title":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"Section and card headings. 24px / 1.25 / 700. Role 2 of 6."},"body":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.base}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.body}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Prose. 16px / 1.6 / 400, 60ch measure. Role 3 of 6."},"ui":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.sm}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Controls, nav, table text, values. 14px / 1.5 / 500. Role 4 of 6."},"caption":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}"},"$description":"Metadata, help text and labels, in sentence case. 12px / 1.5 / 500. Role 5 of 6."},"mono":{"$value":{"fontFamily":"{primitive.typography.family.mono}","fontSize":"{primitive.typography.size.code}","fontWeight":"{primitive.typography.weight.regular}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}","maxWidth":{"value":60,"unit":"ch"}},"$description":"Code and ids. 13px / 1.5 / 400. The mono companion, role 6 of 6."},"h1":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"h2":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"h3":{"$value":{"fontFamily":"{primitive.typography.family.display}","fontSize":"{primitive.typography.size.2xl}","fontWeight":"{primitive.typography.weight.bold}","letterSpacing":"{primitive.typography.letterSpacing.tight}","lineHeight":"{primitive.typography.lineHeight.tight}"},"$description":"deprecated: use semantic.typography.title","$deprecated":"hds#483 — use semantic.typography.title"},"eyebrow":{"$value":{"fontFamily":"{primitive.typography.family.primary}","fontSize":"{primitive.typography.size.xs}","fontWeight":"{primitive.typography.weight.medium}","letterSpacing":"{primitive.typography.letterSpacing.normal}","lineHeight":"{primitive.typography.lineHeight.normal}"},"$description":"deprecated: use semantic.typography.caption","$deprecated":"hds#483 — use semantic.typography.caption"},"lineHeight":{"none":{"$type":"number","$value":"{primitive.typography.lineHeight.none}","$description":"Semantic alias for leading-none (1). Display text and badge spans."}}},"docs":{"$description":"Doc-page spacing scale: section, paragraph, inline rhythm.","space":{"$type":"dimension","section":{"$value":"{primitive.space.12}","$description":"48px between H2 sections — generous section break for doc pages."},"paragraph":{"$value":"{primitive.space.6}","$description":"24px between paragraphs — comfortable prose rhythm for long-form doc content."},"inline":{"$value":"{primitive.space.2}","$description":"8px inline cluster spacing — gap between metadata badges, inline icons, doc-page chips."}}},"accent":{"$type":"color","rest":{"$value":"{primitive.color.apple.500}","$description":"Default accent fill for interactive elements at rest — bright apple green. Pair with content.onAccent (a dark neutral).","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.500}","Dark":"{primitive.color.apple.400}"}}}},"hover":{"$value":"{primitive.color.apple.600}","$description":"Accent fill on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.600}","Dark":"{primitive.color.apple.500}"}}}},"pressed":{"$value":"{primitive.color.apple.700}","$description":"Accent fill during active press.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.600}"}}}},"inactive":{"$value":"{primitive.color.neutral.400}","$description":"Accent fill for inactive or unselected accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.400}","Dark":"{primitive.color.neutral.600}"}}}},"disabled":{"$value":"{primitive.color.neutral.300}","$description":"Accent fill for disabled accent elements.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.300}","Dark":"{primitive.color.neutral.700}"}}}},"content":{"$value":"{primitive.color.apple.700}","$description":"Accent-intent text/icon color on neutral surfaces (a dark apple green) — pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.700}","Dark":"{primitive.color.apple.400}"}}}},"contentHover":{"$value":"{primitive.color.apple.800}","$description":"Accent content color on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.800}","Dark":"{primitive.color.apple.300}"}}}},"subtle":{"$value":"{primitive.color.apple.50}","$description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.apple.50}","Dark":"{primitive.color.apple.900}"}}}}},"radius":{"action":{"$type":"dimension","$value":"{primitive.radius.8}","$description":"Corner radius for action elements (buttons, inputs, badges); Tailwind rounded-md resolves here. Override role.radius to reshape the system."},"control":{"$type":"dimension","$value":"{primitive.radius.4}","$description":"Corner radius for small control glyphs such as the checkbox box: not fully round, and distinct from semantic.radius.action (hds#242)."}},"borderWidth":{"default":{"$type":"dimension","$value":"{primitive.borderWidth.xs}","$description":"Default hairline border weight for surfaces and inputs."},"emphasis":{"$type":"dimension","$value":"{primitive.borderWidth.sm}","$description":"Stronger border weight for focus rings and active indicators."}},"shadow":{"$type":"shadow","subtle":{"$value":"0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06)","$description":"Resting elevation shadow for raised surfaces (cards, inline panels)."},"floating":{"$value":"0 4px 6px hsl(var(--primitive-shadow-color) / 0.05), 0 10px 15px hsl(var(--primitive-shadow-color) / 0.08)","$description":"Hover/floating elevation for menus, popovers, and tooltips."},"overlay":{"$value":"0 10px 15px hsl(var(--primitive-shadow-color) / 0.08), 0 25px 50px hsl(var(--primitive-shadow-color) / 0.12)","$description":"Modal/dialog elevation for full-screen overlays."}},"elevation":{"$extensions":{"com.hirobius.hds":{"$type":"elevation"}},"flat":{"$description":"Flat surface (no shadow, hairline border) for embedded panels.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.page}","shadow":null,"border":"{semantic.color.border.subtle}"}}}},"raised":{"$description":"Resting card / panel elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.subtle}","border":null}}}},"floating":{"$description":"Hover, menu, and popover elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.raised}","shadow":"{semantic.shadow.floating}","border":null}}}},"overlay":{"$description":"Modal, dialog, and drawer elevation.","$extensions":{"com.hirobius.hds":{"$value":{"surface":"{semantic.color.surface.overlay}","shadow":"{semantic.shadow.overlay}","border":null}}}}},"size":{"$type":"dimension","$description":"Sizing roles for control glyphs, avatars and table rows. Roles sharing a value stay separate so each can change (hds#242).","control":{"$description":"Interactive control glyph/element sizing (checkbox glyph box, radio dot, slider track/fill, code-block copy-button-matched footprint).","sm":{"$value":"{primitive.size.8}","$description":"Small control element — radio dot, slider fill bar height."},"md":{"$value":"{primitive.size.20}","$description":"Medium control element — checkbox glyph box, slider track wrapper height."},"lg":{"$value":"{primitive.size.32}","$description":"Large control footprint — code-block inline-wrapper min-height / copy-button-matched pre padding."}},"icon":{"$description":"Reserved icon-size role, parallel to the existing --hds-icon-* bridge (src/styles/theme.css), for future direct semantic.size.icon consumers.","sm":{"$value":"{primitive.size.16}","$description":"Small icon box — matches --hds-icon-small."},"md":{"$value":"{primitive.size.20}","$description":"Medium icon box — matches --hds-icon-medium."},"lg":{"$value":"{primitive.size.24}","$description":"Large icon box — matches --hds-icon-large."}},"avatar":{"$value":"{primitive.size.40}","$description":"Avatar size (width and height) for activity feeds and identity glyphs. Same pixels as row.compact today, a separate role (hds#242)."},"tile":{"$value":"{primitive.size.120}","$description":"Minimum height of a metric tile, one height for every tile so rows line up (hds#403)."},"row":{"$description":"Table row minimum height by density.","compact":{"$value":"{primitive.size.40}","$description":"Compact-density row minimum height."},"comfortable":{"$value":"{primitive.size.48}","$description":"Comfortable-density row minimum height."}}},"zIndex":{"$type":"number","$description":"Named stacking layers, aliasing the numeric primitive.zIndex scale (hds#242).","control":{"$value":"{primitive.zIndex.10}","$description":"Raises an interactive control (e.g. a native range input) above its visual decoration for hit-testing."},"sticky":{"$value":"{primitive.zIndex.100}","$description":"Sticky-positioned elements, such as a table header row."}}}`), sa = { nav: { bg: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Nav bar background fill." }, bgActive: { $type: "color", $value: "{semantic.accent.subtle}", $description: "Nav item background fill when active or selected." }, borderActive: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Nav item border color when active or selected." }, text: { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Nav item text color at rest." }, textActive: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Nav item text color when active or selected." }, height: { $type: "dimension", $value: "{primitive.space.16}", $description: "Nav bar height." }, paddingX: { $type: "dimension", $value: "{primitive.space.6}", $description: "Horizontal padding inside nav items." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Vertical padding inside nav items." } }, tag: { background: { $type: "color", $value: "{semantic.accent.subtle}", $description: "Base tag surface color." }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Default tag text color." }, border: { $type: "color", $value: "{semantic.color.border.default}", $description: "Default tag border color." }, radius: { $type: "dimension", $value: "{primitive.radius.full}", $description: "Pill radius for the tag surface." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Tag type size." }, fontWeight: { $type: "fontWeight", $value: "{primitive.typography.weight.medium}", $description: "Tag label weight." }, lineHeight: { $type: "number", $value: "{primitive.typography.lineHeight.normal}", $description: "Readable label rhythm for tags." }, minWidth: { $type: "dimension", $value: "{primitive.size.48}", $description: "Minimum tag width." }, minHeight: { $type: "dimension", $value: "{primitive.space.6}", $description: "Minimum tag height." }, paddingX: { $type: "dimension", $value: "{primitive.space.3}", $description: "Horizontal padding inside the pill." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Vertical padding inside the pill." }, activeText: { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Text color when the tag is active." }, activeBackground: { $type: "color", $value: "{semantic.accent.rest}", $description: "Active tag fill color." }, activeBorder: { $type: "color", $value: "{semantic.accent.rest}", $description: "Active tag border color." }, activeHover: { $type: "color", $value: "{semantic.accent.hover}", $description: "Active tag hover fill color." } }, badge: { fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Badge type size." }, fontWeight: { $type: "fontWeight", $value: "{primitive.typography.weight.medium}", $description: "Badge label weight." }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Badge text color." }, bg: { $type: "color", $value: "{semantic.color.feedback.bg.info}", $extensions: { "com.figma.variables": { modes: { Light: "{semantic.color.feedback.bg.info}", Dark: "{semantic.color.feedback.bg.info}" } } }, $description: "Badge background color." }, radius: { $type: "dimension", $value: "{primitive.radius.4}", $description: "Small rounded radius for badges." }, height: { $type: "dimension", $value: "{primitive.size.20}", $description: "Badge height." }, minWidth: { $type: "dimension", $value: "{primitive.size.20}", $description: "Badge minimum width." }, paddingY: { $type: "dimension", $value: "{primitive.space.px2}", $description: "Vertical padding inside the badge." }, paddingX: { $type: "dimension", $value: "{primitive.space.px6}", $description: "Horizontal padding inside the badge." } }, button: { bg: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Primary button fill." }, bgHover: { $type: "color", $value: "{semantic.accent.hover}", $description: "Primary button hover fill." }, text: { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Primary button text color." }, radius: { $type: "dimension", $value: "{semantic.radius.action}", $description: "Button corner radius." }, paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Horizontal button padding." }, paddingY: { $type: "dimension", $value: "{primitive.space.3}", $description: "Vertical button padding." }, size: { sm: { paddingX: { $type: "dimension", $value: "{primitive.space.2}", $description: "Small button horizontal padding (8px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.1}", $description: "Small button vertical padding (4px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.xs}", $description: "Small button label size (12px, hds#283: was 13px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.12}", $description: "Small button icon slot size (12px)." }, height: { $type: "dimension", $value: "{primitive.space.7}", $description: "Small button height (28px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.1}", $description: "Small button icon-to-label gap (4px)." } }, md: { paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Medium button horizontal padding (16px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.3}", $description: "Medium button vertical padding (12px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.sm}", $description: "Medium button label size (14px, hds#283: was 15px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.16}", $description: "Medium button icon slot size (16px)." }, height: { $type: "dimension", $value: "{primitive.size.40}", $description: "Medium button height (40px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Medium button icon-to-label gap (8px)." } }, lg: { paddingX: { $type: "dimension", $value: "{primitive.space.6}", $description: "Large button horizontal padding (24px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.4}", $description: "Large button vertical padding (16px)." }, fontSize: { $type: "dimension", $value: "{primitive.typography.size.base}", $description: "Large button label size (16px, hds#283: was 17px)." }, iconSize: { $type: "dimension", $value: "{primitive.size.20}", $description: "Large button icon slot size (20px)." }, height: { $type: "dimension", $value: "{primitive.size.48}", $description: "Large button height (48px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Large button icon-to-label gap (8px)." } } }, primary: { textDisabled: { $type: "color", $value: "{semantic.color.content.disabled}", $description: "Disabled primary button text color." }, bgDisabled: { $type: "color", $value: "{semantic.color.surface.muted}", $description: "Disabled primary button fill." } }, secondary: { bg: { rest: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Secondary button fill." }, hover: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Secondary button hover fill." }, pressed: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Secondary button pressed fill." } }, border: { rest: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button border." }, hover: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button hover border." }, pressed: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button pressed border." }, disabled: { $type: "color", $value: "{semantic.color.border.subdued}", $description: "Secondary button disabled border." } }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Secondary button text color." } } }, input: { bg: { $type: "color", $value: "{semantic.color.surface.raised}" }, text: { $type: "color", $value: "{semantic.color.content.primary}" }, border: { $type: "color", $value: "{semantic.color.border.interactive}" }, borderError: { $type: "color", $value: "{semantic.color.feedback.error}" }, radius: { $type: "dimension", $value: "{semantic.radius.action}" }, paddingX: { $type: "dimension", $value: "{primitive.space.4}" }, paddingY: { $type: "dimension", $value: "{primitive.space.3}" } }, card: { bg: { $type: "color", $value: "{semantic.color.surface.raised}" }, border: { $type: "color", $value: "{semantic.color.border.default}" }, radius: { $type: "dimension", $value: "{primitive.radius.8}" }, padding: { $type: "dimension", $value: "{primitive.space.6}" }, gap: { $type: "dimension", $value: "{primitive.space.2}" } }, lightbox: { backdrop: { blur: { $type: "dimension", $value: "{primitive.blur.16}", $description: "Backdrop blur applied behind fullscreen image lightboxes." } } } }, la = { $description: "Shadcn-style role aliases mapping to semantic tokens. Compiled to --role-* CSS vars.", background: { $type: "color", $value: "{semantic.color.surface.page}", $description: "Page background. shadcn role: background." }, foreground: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Default text on background. shadcn role: foreground." }, card: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Card surface. shadcn role: card." }, "card-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on card. shadcn role: card-foreground." }, popover: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Popover/menu surface. shadcn role: popover." }, scrim: { $type: "color", $value: "{semantic.color.surface.scrim}", $description: "Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60." }, "pressed-overlay": { $type: "color", $value: "{semantic.color.state.pressed.overlay}", $description: "Pressed-state overlay colour role. Apply alpha in the class, e.g. inset-shadow-pressed-overlay/5." }, "popover-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on popover. shadcn role: popover-foreground." }, primary: { $type: "color", $value: "{semantic.color.surface.accent}", $description: "Primary action surface. shadcn role: primary." }, "primary-foreground": { $type: "color", $value: "{semantic.color.content.onAccent}", $description: "Text/icons on primary surface. shadcn role: primary-foreground." }, secondary: { $type: "color", $value: "{semantic.color.surface.raised}", $description: "Secondary action surface. shadcn role: secondary." }, "secondary-foreground": { $type: "color", $value: "{semantic.color.content.primary}", $description: "Text on secondary surface. shadcn role: secondary-foreground." }, muted: { $type: "color", $value: "{semantic.color.surface.overlay}", $description: "Muted/quiet bg (skeletons, disabled inputs). shadcn role: muted." }, "muted-foreground": { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Muted text. shadcn role: muted-foreground." }, accent: { $type: "color", $value: "{semantic.color.surface.accentSubtle}", $description: "Hover/active tinted bg. shadcn role: accent." }, "accent-foreground": { $type: "color", $value: "{semantic.color.content.accent}", $description: "Text on accent surface. shadcn role: accent-foreground." }, destructive: { $type: "color", $value: "{semantic.color.feedback.error}", $description: "Destructive action surface. shadcn role: destructive." }, "destructive-foreground": { $type: "color", $value: "{semantic.color.content.inverse}", $description: "Text on destructive surface. shadcn role: destructive-foreground." }, border: { $type: "color", $value: "{semantic.color.border.default}", $description: "Default border. shadcn role: border." }, input: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Input field border. shadcn role: input." }, ring: { $type: "color", $value: "{semantic.color.border.accent}", $description: "Focus ring color. shadcn role: ring." }, radius: { $type: "dimension", $value: "{semantic.radius.action}", $description: "Default border radius. shadcn role: radius." } }, ca = {
   $schema: aa,
   $description: ra,
   primitive: na,
@@ -3170,13 +3170,13 @@ export {
   $r as CardMetric,
   yr as CardProgress,
   xr as CardTitle,
-  Ia as Checkbox,
+  Aa as Checkbox,
   nr as Combobox,
   wr as Container,
   Ca as Dialog,
   Tt as DialogClose,
   Pt as DialogContent,
-  At as DialogDescription,
+  It as DialogDescription,
   Lt as DialogFooter,
   Rt as DialogHeader,
   Ke as DialogOverlay,
@@ -3190,7 +3190,7 @@ export {
   Sr as Grid,
   Tr as HdsRouterProvider,
   Nr as HdsThemeProvider,
-  I as Icon,
+  A as Icon,
   Ra as InlineCode,
   La as InlineLink,
   Va as Input,
@@ -3208,7 +3208,7 @@ export {
   Wa as Skeleton,
   Ea as Slider,
   Fa as Spinner,
-  Ae as Stack,
+  Ie as Stack,
   Na as Stat,
   za as StatusListItem,
   gt as Surface,
@@ -3220,7 +3220,7 @@ export {
   ir as TabsTrigger,
   Ga as Tag,
   Ue as Text,
-  Aa as Textarea,
+  Ia as Textarea,
   Ua as Timestamp,
   cr as ToastProvider,
   Ha as Toggle,