npm - @hirobius/design-system - Versions diffs - 0.24.0 → 0.24.1 - Mend

@hirobius/design-system 0.24.0 → 0.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +18 -0
package/UPGRADING.md +24 -1
package/dist/css-contract.json +1 -1
package/dist/hirobius-ui.js +1 -1
package/dist/manifest.js +1 -1
package/dist/styles.css +1 -1
package/dist/tokens.css +1 -1
package/dist/types/src/index.d.ts +6 -6
package/dist/variables.css +23 -23
package/hirobius.tokens.json +36 -36
package/package.json +1 -1
package/public/hds-manifest.json +43 -43
package/src/app/data/component-api.json +1 -1
package/upgrade/index.json +8 -1
package/upgrade/releases/0.24.1.json +311 -0

package/dist/hirobius-ui.js CHANGED Viewed

@@ -3144,7 +3144,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."},"graphite":{"50":{"$value":"#f5f4f4","$description":"Graphite accent tint — faintest step."},"100":{"$value":"#e9e7e8","$description":"Graphite accent — very light warm tint."},"200":{"$value":"#d4d0d2","$description":"Graphite accent — light warm-grey; dark-mode rest accent fill."},"300":{"$value":"#b2abae","$description":"Graphite accent — soft mid-light step; dark-mode hover/link."},"400":{"$value":"#8b8488","$description":"Graphite accent — mid warm-grey step."},"500":{"$value":"#655e62","$description":"Graphite accent — mid step."},"600":{"$value":"#544d51","$description":"Graphite accent — mid-dark step."},"700":{"$value":"#433a3f","$description":"Graphite accent rest — the warm charcoal brand accent; white text as a fill (AA)."},"800":{"$value":"#352e32","$description":"Graphite accent — deep step; light-mode hover."},"900":{"$value":"#2a2428","$description":"Graphite accent — darkest usable step; light-mode pressed, dark-mode on-accent text."},"950":{"$value":"#19161a","$description":"Graphite accent — near-black warm substrate."},"$description":"Graphite, the warm-charcoal brand accent scale. Feedback colors keep their own scales."},"mauve":{"50":{"$value":"#fff0f6","$description":"Mauve tint, faintest step."},"100":{"$value":"#f4e2ea","$description":"Mauve step 100, lightness-matched to graphite 100."},"200":{"$value":"#e1cad4","$description":"Mauve step 200, lightness-matched to graphite 200."},"300":{"$value":"#c0a4b1","$description":"Mauve step 300, lightness-matched to graphite 300."},"400":{"$value":"#9d7b8a","$description":"Mauve step 400, lightness-matched to graphite 400."},"500":{"$value":"#734b5e","$description":"Mauve anchor (#734B5E). Reserved; not mapped to any semantic token yet."},"600":{"$value":"#674254","$description":"Mauve step 600, lightness-matched to graphite 600."},"700":{"$value":"#523141","$description":"Mauve step 700, lightness-matched to graphite 700."},"800":{"$value":"#432634","$description":"Mauve step 800, lightness-matched to graphite 800."},"900":{"$value":"#361d29","$description":"Mauve step 900, lightness-matched to graphite 900."},"950":{"$value":"#240f1a","$description":"Mauve, near-black substrate."},"$description":"Mauve, a reserved secondary scale lightness-matched to graphite. Defined for exploration; no semantic token uses it yet."},"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.graphite.700}","$description":"Accent fill, warm graphite. Dark in light mode, light warm-grey in dark mode; pair with content.onAccent.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.200}"}}}},"accentSubtle":{"$value":"{primitive.color.graphite.50}","$description":"Faint accent tint for hover states or highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.50}","Dark":"{primitive.color.graphite.800}"}}}},"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.graphite.700}","$description":"Accent-intent text/icon color — graphite, legible on page and card surfaces. Pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.300}"}}}},"onAccent":{"$value":"{primitive.color.neutral.50}","$description":"Text and icons on accent fills: near-white in light mode, dark graphite in dark mode.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.graphite.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.graphite.700}","$description":"Accent border — graphite, dark enough to read as a boundary on page and card surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.300}"}}}},"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.graphite.700}","$description":"Default accent fill for interactive elements at rest — warm graphite. Inverts per theme; pair with content.onAccent.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.200}"}}}},"hover":{"$value":"{primitive.color.graphite.800}","$description":"Accent fill on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.800}","Dark":"{primitive.color.graphite.300}"}}}},"pressed":{"$value":"{primitive.color.graphite.900}","$description":"Accent fill during active press.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.900}","Dark":"{primitive.color.graphite.400}"}}}},"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.graphite.700}","$description":"Accent-intent text/icon color on neutral surfaces (graphite) — pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.300}"}}}},"contentHover":{"$value":"{primitive.color.graphite.800}","$description":"Accent content color on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.800}","Dark":"{primitive.color.graphite.200}"}}}},"subtle":{"$value":"{primitive.color.graphite.50}","$description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.50}","Dark":"{primitive.color.graphite.800}"}}}}},"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 = {
+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."},"graphite":{"50":{"$value":"#f5f4f4","$description":"Graphite accent tint — faintest step."},"100":{"$value":"#e9e7e8","$description":"Graphite accent — very light warm tint."},"200":{"$value":"#d4d0d2","$description":"Graphite accent — light warm-grey; dark-mode rest accent fill."},"300":{"$value":"#b2abae","$description":"Graphite accent — soft mid-light step; dark-mode hover/link."},"400":{"$value":"#8b8488","$description":"Graphite accent — mid warm-grey step."},"500":{"$value":"#655e62","$description":"Graphite accent — mid step."},"600":{"$value":"#544d51","$description":"Graphite accent — mid-dark step."},"700":{"$value":"#433a3f","$description":"Graphite accent rest — the warm charcoal brand accent; white text as a fill (AA)."},"800":{"$value":"#352e32","$description":"Graphite accent — deep step; light-mode hover."},"900":{"$value":"#2a2428","$description":"Graphite accent — darkest usable step; light-mode pressed, dark-mode on-accent text."},"950":{"$value":"#19161a","$description":"Graphite accent — near-black warm substrate."},"$description":"Graphite, the warm-charcoal brand accent scale. Feedback colors keep their own scales."},"mauve":{"50":{"$value":"#fff0f6","$description":"Mauve tint, faintest step."},"100":{"$value":"#f4e2ea","$description":"Mauve step 100, lightness-matched to graphite 100."},"200":{"$value":"#e1cad4","$description":"Mauve step 200, lightness-matched to graphite 200."},"300":{"$value":"#c0a4b1","$description":"Mauve step 300, lightness-matched to graphite 300."},"400":{"$value":"#9d7b8a","$description":"Mauve step 400, lightness-matched to graphite 400."},"500":{"$value":"#734b5e","$description":"Mauve anchor (#734B5E). Reserved; not mapped to any semantic token yet."},"600":{"$value":"#674254","$description":"Mauve step 600, lightness-matched to graphite 600."},"700":{"$value":"#523141","$description":"Mauve step 700, lightness-matched to graphite 700."},"800":{"$value":"#432634","$description":"Mauve step 800, lightness-matched to graphite 800."},"900":{"$value":"#361d29","$description":"Mauve step 900, lightness-matched to graphite 900."},"950":{"$value":"#240f1a","$description":"Mauve, near-black substrate."},"$description":"Mauve, a reserved secondary scale lightness-matched to graphite. Defined for exploration; no semantic token uses it yet."},"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.graphite.700}","$description":"Accent fill, warm graphite. Dark in light mode, light warm-grey in dark mode; pair with content.onAccent.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.200}"}}}},"accentSubtle":{"$value":"{primitive.color.graphite.50}","$description":"Faint accent tint for hover states or highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.50}","Dark":"{primitive.color.graphite.800}"}}}},"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.graphite.700}","$description":"Accent-intent text/icon color — graphite, legible on page and card surfaces. Pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.300}"}}}},"onAccent":{"$value":"{primitive.color.neutral.50}","$description":"Text and icons on accent fills: near-white in light mode, dark graphite in dark mode.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.neutral.50}","Dark":"{primitive.color.graphite.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.graphite.700}","$description":"Accent border — graphite, dark enough to read as a boundary on page and card surfaces.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.300}"}}}},"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.graphite.700}","$description":"Default accent fill for interactive elements at rest — warm graphite. Inverts per theme; pair with content.onAccent.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.200}"}}}},"hover":{"$value":"{primitive.color.graphite.800}","$description":"Accent fill on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.800}","Dark":"{primitive.color.graphite.300}"}}}},"pressed":{"$value":"{primitive.color.graphite.900}","$description":"Accent fill during active press.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.900}","Dark":"{primitive.color.graphite.400}"}}}},"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.graphite.700}","$description":"Accent-intent text/icon color on neutral surfaces (graphite) — pair with underline/weight for link affordance.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.700}","Dark":"{primitive.color.graphite.300}"}}}},"contentHover":{"$value":"{primitive.color.graphite.800}","$description":"Accent content color on pointer hover.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.800}","Dark":"{primitive.color.graphite.200}"}}}},"subtle":{"$value":"{primitive.color.graphite.50}","$description":"Low-emphasis accent tint for hover backgrounds and selection highlights.","$extensions":{"com.figma.variables":{"modes":{"Light":"{primitive.color.graphite.50}","Dark":"{primitive.color.graphite.800}"}}}}},"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.color.surface.raised}", $description: "Unselected tag surface color (matches the rendered pill; the active fill is activeBackground)." }, text: { $type: "color", $value: "{semantic.color.content.secondary}", $description: "Unselected tag text color (the active label uses activeText)." }, 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.2}", $description: "Vertical button padding (8px, the md size; legacy flat alias of size.md.paddingY)." }, size: { sm: { paddingX: { $type: "dimension", $value: "{primitive.space.3}", $description: "Small button horizontal padding (12px)." }, 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.size.32}", $description: "Small button height (32px)." }, itemSpacing: { $type: "dimension", $value: "{primitive.space.2}", $description: "Small button icon-to-label gap (8px)." } }, md: { paddingX: { $type: "dimension", $value: "{primitive.space.4}", $description: "Medium button horizontal padding (16px)." }, paddingY: { $type: "dimension", $value: "{primitive.space.2}", $description: "Medium button vertical padding (8px; the 40px height drives the box)." }, 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.sm}", $description: "Large button label size (14px, the same hds-type-ui role as md)." }, 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.accentSubtle}", $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.accent}", $description: "Secondary button hover border." }, pressed: { $type: "color", $value: "{semantic.color.border.accent}", $description: "Secondary button pressed border (the hover border still applies while pressed)." }, disabled: { $type: "color", $value: "{semantic.color.border.interactive}", $description: "Secondary button disabled border (no disabled border class: the rest border stays)." } }, text: { $type: "color", $value: "{semantic.color.content.primary}", $description: "Secondary button text color." } } }, input: { bg: { $type: "color", $value: "{semantic.color.surface.page}" }, 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.3}" }, 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.12}" }, padding: { $type: "dimension", $value: "{primitive.space.6}" }, gap: { $type: "dimension", $value: "{semantic.space.scale.sm}" } }, 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,