@pcoi/tokens 0.1.0 → 0.1.1

package/build/index.d.ts

@@ -228,6 +228,7 @@ declare const tokens: {
   readonly semanticFocusBorder: string;
   readonly semanticFocusGlow: string;
   readonly semanticSpacingSectionY: string;
+  readonly semanticSpacingSectionYMd: string;
   readonly semanticSpacingSectionYLg: string;
   readonly semanticSpacingComponentGap: string;
   readonly semanticSpacingCardPadding: string;
@@ -235,17 +236,40 @@ declare const tokens: {
   readonly semanticSpacingFormGap: string;
   readonly semanticSpacingFormPadding: string;
   readonly semanticSpacingInputX: string;
+  readonly semanticSpacingInputXCompact: string;
   readonly semanticSpacingInputY: string;
   readonly semanticSpacingBtnX: string;
+  readonly semanticSpacingBtnXComfortable: string;
+  readonly semanticSpacingBtnXNav: string;
   readonly semanticSpacingBtnY: string;
+  readonly semanticSpacingBtnYComfortable: string;
   readonly semanticSpacingBtnXLg: string;
   readonly semanticSpacingBtnYLg: string;
+  readonly semanticSpacingPanelPadding: string;
+  readonly semanticSpacingPanelPaddingSm: string;
+  readonly semanticSpacingPanelGap: string;
+  readonly semanticSpacingControlPadding2xs: string;
+  readonly semanticSpacingControlPaddingXs: string;
+  readonly semanticSpacingControlPaddingSm: string;
+  readonly semanticSpacingToggleThumbInset: string;
+  readonly semanticSpacingToggleThumbTravel: string;
+  readonly semanticSpacingHamburgerBarOffset: string;
+  readonly semanticSpacingHamburgerGap: string;
+  readonly semanticSpacingInline2xs: string;
+  readonly semanticSpacingFormGapCompact: string;
+  readonly semanticSpacingTextGapSm: string;
   readonly semanticSpacingNavHeight: string;
   readonly semanticSpacingStackSm: string;
   readonly semanticSpacingStackMd: string;
   readonly semanticSpacingStackLg: string;
+  readonly semanticSpacingStackCompact: string;
+  readonly semanticSpacingStackXl: string;
   readonly semanticSpacingInlineSm: string;
   readonly semanticSpacingInlineMd: string;
+  readonly semanticSpacingInlineLg: string;
+  readonly semanticSpacingInlineXl: string;
+  readonly semanticSpacingChipX: string;
+  readonly semanticSpacingSectionHeaderMargin: string;
   readonly semanticRadiusBtn: string;
   readonly semanticRadiusInput: string;
   readonly semanticRadiusCard: string;
@@ -294,6 +318,13 @@ declare const tokens: {
   readonly semanticTypeSectionLabelLetterSpacing: string;
   readonly semanticTypeBadgeLetterSpacing: string;
   readonly semanticTypeLogoLetterSpacing: string;
+  readonly semanticLayoutZBase: string;
+  readonly semanticLayoutZContent: string;
+  readonly semanticLayoutZMobileMenu: string;
+  readonly semanticLayoutZDropdown: string;
+  readonly semanticLayoutZModal: string;
+  readonly semanticLayoutZToast: string;
+  readonly semanticLayoutZNav: string;
   readonly semanticSizingInputHeight: string;
   readonly semanticSizingBtnHeight: string;
   readonly semanticSizingBtnHeightLg: string;
@@ -302,6 +333,27 @@ declare const tokens: {
   readonly semanticSizingBadgeHeight: string;
   readonly semanticSizingStepNumber: string;
   readonly semanticSizingIconBox: string;
+  readonly semanticSizingToggleTrackWidth: string;
+  readonly semanticSizingToggleTrackHeight: string;
+  readonly semanticSizingToggleThumbSize: string;
+  readonly semanticSizingToggleCheckWidth: string;
+  readonly semanticSizingToggleCheckHeight: string;
+  readonly semanticSizingToggleCheckStroke: string;
+  readonly semanticSizingHamburgerSize: string;
+  readonly semanticSizingContainerMax: string;
+  readonly semanticSizingContainerNarrow: string;
+  readonly semanticSizingToastWidthMin: string;
+  readonly semanticSizingToastWidthMax: string;
+  readonly semanticSizingComparisonWidth: string;
+  readonly semanticSizingComparisonScrollWidth: string;
+  readonly semanticSizingModalWidth: string;
+  readonly semanticSizingDocumentWidth: string;
+  readonly semanticSizingCalloutWidth: string;
+  readonly semanticSizingControlBoxSize: string;
+  readonly semanticSizingRadioDotSize: string;
+  readonly semanticSizingBulletSize: string;
+  readonly semanticSizingAccentBorderWidth: string;
+  readonly semanticSizingAccentLineWidth: string;
 };
 
 export default tokens;

package/build/index.js

@@ -1,6 +1,6 @@
 "use strict";
 // @pcoi/tokens — CommonJS
-// Generated 2026-03-03
+// Generated 2026-03-07
 
 const tokens = {
   "colorBg": "#0C0C14",
@@ -230,6 +230,7 @@ const tokens = {
   "semanticFocusBorder": "{color.focus-border}",
   "semanticFocusGlow": "{color.focus-glow}",
   "semanticSpacingSectionY": "{spacing.80}",
+  "semanticSpacingSectionYMd": "{spacing.60}",
   "semanticSpacingSectionYLg": "{spacing.120}",
   "semanticSpacingComponentGap": "{spacing.40}",
   "semanticSpacingCardPadding": "{spacing.36}",
@@ -237,17 +238,40 @@ const tokens = {
   "semanticSpacingFormGap": "{spacing.20}",
   "semanticSpacingFormPadding": "{spacing.40}",
   "semanticSpacingInputX": "{spacing.16}",
+  "semanticSpacingInputXCompact": "{spacing.14}",
   "semanticSpacingInputY": "{spacing.12}",
   "semanticSpacingBtnX": "{spacing.24}",
+  "semanticSpacingBtnXComfortable": "{spacing.28}",
+  "semanticSpacingBtnXNav": "{spacing.22}",
   "semanticSpacingBtnY": "{spacing.10}",
+  "semanticSpacingBtnYComfortable": "{spacing.14}",
   "semanticSpacingBtnXLg": "{spacing.36}",
   "semanticSpacingBtnYLg": "{spacing.16}",
+  "semanticSpacingPanelPadding": "{spacing.24}",
+  "semanticSpacingPanelPaddingSm": "{spacing.16}",
+  "semanticSpacingPanelGap": "{spacing.12}",
+  "semanticSpacingControlPadding2xs": "{spacing.4}",
+  "semanticSpacingControlPaddingXs": "{spacing.6}",
+  "semanticSpacingControlPaddingSm": "{spacing.8}",
+  "semanticSpacingToggleThumbInset": "3px",
+  "semanticSpacingToggleThumbTravel": "18px",
+  "semanticSpacingHamburgerBarOffset": "7px",
+  "semanticSpacingHamburgerGap": "5px",
+  "semanticSpacingInline2xs": "{spacing.4}",
+  "semanticSpacingFormGapCompact": "{spacing.6}",
+  "semanticSpacingTextGapSm": "{spacing.10}",
   "semanticSpacingNavHeight": "{spacing.72}",
   "semanticSpacingStackSm": "{spacing.8}",
   "semanticSpacingStackMd": "{spacing.16}",
   "semanticSpacingStackLg": "{spacing.32}",
+  "semanticSpacingStackCompact": "{spacing.14}",
+  "semanticSpacingStackXl": "{spacing.48}",
   "semanticSpacingInlineSm": "{spacing.8}",
   "semanticSpacingInlineMd": "{spacing.16}",
+  "semanticSpacingInlineLg": "{spacing.28}",
+  "semanticSpacingInlineXl": "{spacing.48}",
+  "semanticSpacingChipX": "{spacing.10}",
+  "semanticSpacingSectionHeaderMargin": "{spacing.64}",
   "semanticRadiusBtn": "{radius.sm}",
   "semanticRadiusInput": "{radius.sm}",
   "semanticRadiusCard": "{radius.md}",
@@ -296,6 +320,13 @@ const tokens = {
   "semanticTypeSectionLabelLetterSpacing": "{font.letterSpacing.section}",
   "semanticTypeBadgeLetterSpacing": "{font.letterSpacing.badge}",
   "semanticTypeLogoLetterSpacing": "{font.letterSpacing.logo}",
+  "semanticLayoutZBase": "{layout.zIndex.base}",
+  "semanticLayoutZContent": "{layout.zIndex.content}",
+  "semanticLayoutZMobileMenu": "{layout.zIndex.mobile-menu}",
+  "semanticLayoutZDropdown": "{layout.zIndex.dropdown}",
+  "semanticLayoutZModal": "{layout.zIndex.modal}",
+  "semanticLayoutZToast": "{layout.zIndex.toast}",
+  "semanticLayoutZNav": "{layout.zIndex.nav}",
   "semanticSizingInputHeight": "{sizing.height.md}",
   "semanticSizingBtnHeight": "{sizing.height.md}",
   "semanticSizingBtnHeightLg": "{sizing.height.lg}",
@@ -303,7 +334,28 @@ const tokens = {
   "semanticSizingTextareaMinHeight": "{sizing.height.2xl}",
   "semanticSizingBadgeHeight": "{sizing.height.xs}",
   "semanticSizingStepNumber": "{sizing.height.lg}",
-  "semanticSizingIconBox": "52px"
+  "semanticSizingIconBox": "52px",
+  "semanticSizingToggleTrackWidth": "40px",
+  "semanticSizingToggleTrackHeight": "22px",
+  "semanticSizingToggleThumbSize": "16px",
+  "semanticSizingToggleCheckWidth": "4px",
+  "semanticSizingToggleCheckHeight": "7px",
+  "semanticSizingToggleCheckStroke": "1.5px",
+  "semanticSizingHamburgerSize": "28px",
+  "semanticSizingContainerMax": "1200px",
+  "semanticSizingContainerNarrow": "800px",
+  "semanticSizingToastWidthMin": "280px",
+  "semanticSizingToastWidthMax": "420px",
+  "semanticSizingComparisonWidth": "900px",
+  "semanticSizingComparisonScrollWidth": "500px",
+  "semanticSizingModalWidth": "520px",
+  "semanticSizingDocumentWidth": "900px",
+  "semanticSizingCalloutWidth": "640px",
+  "semanticSizingControlBoxSize": "18px",
+  "semanticSizingRadioDotSize": "8px",
+  "semanticSizingBulletSize": "8px",
+  "semanticSizingAccentBorderWidth": "3px",
+  "semanticSizingAccentLineWidth": "60px"
 };
 
 module.exports = tokens;

package/build/index.mjs

@@ -1,5 +1,5 @@
 // @pcoi/tokens — ES Module
-// Generated 2026-03-03
+// Generated 2026-03-07
 
 const tokens = {
   "colorBg": "#0C0C14",
@@ -229,6 +229,7 @@ const tokens = {
   "semanticFocusBorder": "{color.focus-border}",
   "semanticFocusGlow": "{color.focus-glow}",
   "semanticSpacingSectionY": "{spacing.80}",
+  "semanticSpacingSectionYMd": "{spacing.60}",
   "semanticSpacingSectionYLg": "{spacing.120}",
   "semanticSpacingComponentGap": "{spacing.40}",
   "semanticSpacingCardPadding": "{spacing.36}",
@@ -236,17 +237,40 @@ const tokens = {
   "semanticSpacingFormGap": "{spacing.20}",
   "semanticSpacingFormPadding": "{spacing.40}",
   "semanticSpacingInputX": "{spacing.16}",
+  "semanticSpacingInputXCompact": "{spacing.14}",
   "semanticSpacingInputY": "{spacing.12}",
   "semanticSpacingBtnX": "{spacing.24}",
+  "semanticSpacingBtnXComfortable": "{spacing.28}",
+  "semanticSpacingBtnXNav": "{spacing.22}",
   "semanticSpacingBtnY": "{spacing.10}",
+  "semanticSpacingBtnYComfortable": "{spacing.14}",
   "semanticSpacingBtnXLg": "{spacing.36}",
   "semanticSpacingBtnYLg": "{spacing.16}",
+  "semanticSpacingPanelPadding": "{spacing.24}",
+  "semanticSpacingPanelPaddingSm": "{spacing.16}",
+  "semanticSpacingPanelGap": "{spacing.12}",
+  "semanticSpacingControlPadding2xs": "{spacing.4}",
+  "semanticSpacingControlPaddingXs": "{spacing.6}",
+  "semanticSpacingControlPaddingSm": "{spacing.8}",
+  "semanticSpacingToggleThumbInset": "3px",
+  "semanticSpacingToggleThumbTravel": "18px",
+  "semanticSpacingHamburgerBarOffset": "7px",
+  "semanticSpacingHamburgerGap": "5px",
+  "semanticSpacingInline2xs": "{spacing.4}",
+  "semanticSpacingFormGapCompact": "{spacing.6}",
+  "semanticSpacingTextGapSm": "{spacing.10}",
   "semanticSpacingNavHeight": "{spacing.72}",
   "semanticSpacingStackSm": "{spacing.8}",
   "semanticSpacingStackMd": "{spacing.16}",
   "semanticSpacingStackLg": "{spacing.32}",
+  "semanticSpacingStackCompact": "{spacing.14}",
+  "semanticSpacingStackXl": "{spacing.48}",
   "semanticSpacingInlineSm": "{spacing.8}",
   "semanticSpacingInlineMd": "{spacing.16}",
+  "semanticSpacingInlineLg": "{spacing.28}",
+  "semanticSpacingInlineXl": "{spacing.48}",
+  "semanticSpacingChipX": "{spacing.10}",
+  "semanticSpacingSectionHeaderMargin": "{spacing.64}",
   "semanticRadiusBtn": "{radius.sm}",
   "semanticRadiusInput": "{radius.sm}",
   "semanticRadiusCard": "{radius.md}",
@@ -295,6 +319,13 @@ const tokens = {
   "semanticTypeSectionLabelLetterSpacing": "{font.letterSpacing.section}",
   "semanticTypeBadgeLetterSpacing": "{font.letterSpacing.badge}",
   "semanticTypeLogoLetterSpacing": "{font.letterSpacing.logo}",
+  "semanticLayoutZBase": "{layout.zIndex.base}",
+  "semanticLayoutZContent": "{layout.zIndex.content}",
+  "semanticLayoutZMobileMenu": "{layout.zIndex.mobile-menu}",
+  "semanticLayoutZDropdown": "{layout.zIndex.dropdown}",
+  "semanticLayoutZModal": "{layout.zIndex.modal}",
+  "semanticLayoutZToast": "{layout.zIndex.toast}",
+  "semanticLayoutZNav": "{layout.zIndex.nav}",
   "semanticSizingInputHeight": "{sizing.height.md}",
   "semanticSizingBtnHeight": "{sizing.height.md}",
   "semanticSizingBtnHeightLg": "{sizing.height.lg}",
@@ -302,7 +333,28 @@ const tokens = {
   "semanticSizingTextareaMinHeight": "{sizing.height.2xl}",
   "semanticSizingBadgeHeight": "{sizing.height.xs}",
   "semanticSizingStepNumber": "{sizing.height.lg}",
-  "semanticSizingIconBox": "52px"
+  "semanticSizingIconBox": "52px",
+  "semanticSizingToggleTrackWidth": "40px",
+  "semanticSizingToggleTrackHeight": "22px",
+  "semanticSizingToggleThumbSize": "16px",
+  "semanticSizingToggleCheckWidth": "4px",
+  "semanticSizingToggleCheckHeight": "7px",
+  "semanticSizingToggleCheckStroke": "1.5px",
+  "semanticSizingHamburgerSize": "28px",
+  "semanticSizingContainerMax": "1200px",
+  "semanticSizingContainerNarrow": "800px",
+  "semanticSizingToastWidthMin": "280px",
+  "semanticSizingToastWidthMax": "420px",
+  "semanticSizingComparisonWidth": "900px",
+  "semanticSizingComparisonScrollWidth": "500px",
+  "semanticSizingModalWidth": "520px",
+  "semanticSizingDocumentWidth": "900px",
+  "semanticSizingCalloutWidth": "640px",
+  "semanticSizingControlBoxSize": "18px",
+  "semanticSizingRadioDotSize": "8px",
+  "semanticSizingBulletSize": "8px",
+  "semanticSizingAccentBorderWidth": "3px",
+  "semanticSizingAccentLineWidth": "60px"
 };
 
 export default tokens;

package/build/tokens.css

@@ -1,6 +1,6 @@
 /* ============================================
    @pcoi/tokens — CSS Custom Properties
-   Generated 2026-03-03
+   Generated 2026-03-07
 
    Three-Tier Hierarchy:
      Tier 1: Primitives (--pcoi-color-*, --pcoi-spacing-*, etc.)
@@ -256,6 +256,7 @@
 
   /* ── Tier 3: Semantic Spacing Tokens ── */
   --pcoi-semantic-spacing-section-y: var(--pcoi-spacing-80); /* Vertical padding for page sections */
+  --pcoi-semantic-spacing-section-y-md: var(--pcoi-spacing-60); /* Medium vertical section padding for compact long-form sections */
   --pcoi-semantic-spacing-section-y-lg: var(--pcoi-spacing-120); /* Vertical padding for large/hero sections */
   --pcoi-semantic-spacing-component-gap: var(--pcoi-spacing-40); /* Default gap between stacked components */
   --pcoi-semantic-spacing-card-padding: var(--pcoi-spacing-36); /* Internal padding for cards and panels */
@@ -263,17 +264,40 @@
   --pcoi-semantic-spacing-form-gap: var(--pcoi-spacing-20); /* Gap between form fields */
   --pcoi-semantic-spacing-form-padding: var(--pcoi-spacing-40); /* Internal padding for form containers */
   --pcoi-semantic-spacing-input-x: var(--pcoi-spacing-16); /* Horizontal padding inside inputs */
+  --pcoi-semantic-spacing-input-x-compact: var(--pcoi-spacing-14); /* Compact horizontal padding inside dense inputs and fields */
   --pcoi-semantic-spacing-input-y: var(--pcoi-spacing-12); /* Vertical padding inside inputs */
   --pcoi-semantic-spacing-btn-x: var(--pcoi-spacing-24); /* Horizontal padding for default buttons */
+  --pcoi-semantic-spacing-btn-x-comfortable: var(--pcoi-spacing-28); /* Horizontal padding for comfortable primary button sizing */
+  --pcoi-semantic-spacing-btn-x-nav: var(--pcoi-spacing-22); /* Horizontal padding for compact navigation CTA buttons */
   --pcoi-semantic-spacing-btn-y: var(--pcoi-spacing-10); /* Vertical padding for default buttons */
+  --pcoi-semantic-spacing-btn-y-comfortable: var(--pcoi-spacing-14); /* Vertical padding for comfortable primary button sizing */
   --pcoi-semantic-spacing-btn-x-lg: var(--pcoi-spacing-36); /* Horizontal padding for large buttons */
   --pcoi-semantic-spacing-btn-y-lg: var(--pcoi-spacing-16); /* Vertical padding for large buttons */
+  --pcoi-semantic-spacing-panel-padding: var(--pcoi-spacing-24); /* Default internal padding for modal and overlay panels */
+  --pcoi-semantic-spacing-panel-padding-sm: var(--pcoi-spacing-16); /* Compact internal padding for panel footers and dense panel regions */
+  --pcoi-semantic-spacing-panel-gap: var(--pcoi-spacing-12); /* Inline or row gap for panel action groups */
+  --pcoi-semantic-spacing-control-padding-2xs: var(--pcoi-spacing-4); /* Extra-compact control padding for icon-only affordances */
+  --pcoi-semantic-spacing-control-padding-xs: var(--pcoi-spacing-6); /* Compact control padding for dense icon buttons */
+  --pcoi-semantic-spacing-control-padding-sm: var(--pcoi-spacing-8); /* Small control/container padding for narrow viewports */
+  --pcoi-semantic-spacing-toggle-thumb-inset: 3px; /* Inset from toggle track edge to toggle thumb origin */
+  --pcoi-semantic-spacing-toggle-thumb-travel: 18px; /* Horizontal travel distance for toggle thumb in checked state */
+  --pcoi-semantic-spacing-hamburger-bar-offset: 7px; /* Vertical offset used when morphing hamburger bars into an X */
+  --pcoi-semantic-spacing-hamburger-gap: 5px; /* Vertical gap between hamburger bars */
+  --pcoi-semantic-spacing-inline-2xs: var(--pcoi-spacing-4); /* Extra-small inline spacing for compact adornments */
+  --pcoi-semantic-spacing-form-gap-compact: var(--pcoi-spacing-6); /* Compact gap between form label, control, and messages */
+  --pcoi-semantic-spacing-text-gap-sm: var(--pcoi-spacing-10); /* Small vertical text gap between titles and supporting content */
   --pcoi-semantic-spacing-nav-height: var(--pcoi-spacing-72); /* Navigation bar height */
   --pcoi-semantic-spacing-stack-sm: var(--pcoi-spacing-8); /* Small vertical stack spacing (labels, badges) */
   --pcoi-semantic-spacing-stack-md: var(--pcoi-spacing-16); /* Medium vertical stack spacing (headings, paragraphs) */
   --pcoi-semantic-spacing-stack-lg: var(--pcoi-spacing-32); /* Large vertical stack spacing (content blocks) */
+  --pcoi-semantic-spacing-stack-compact: var(--pcoi-spacing-14); /* Compact vertical stack spacing between closely related content rows */
+  --pcoi-semantic-spacing-stack-xl: var(--pcoi-spacing-48); /* Extra-large vertical stack spacing between major content groups */
   --pcoi-semantic-spacing-inline-sm: var(--pcoi-spacing-8); /* Small inline spacing (icon + text) */
   --pcoi-semantic-spacing-inline-md: var(--pcoi-spacing-16); /* Medium inline spacing (nav links) */
+  --pcoi-semantic-spacing-inline-lg: var(--pcoi-spacing-28); /* Large inline spacing for sparse horizontal groups */
+  --pcoi-semantic-spacing-inline-xl: var(--pcoi-spacing-48); /* Extra-large inline spacing for desktop message offsets and wide gutters */
+  --pcoi-semantic-spacing-chip-x: var(--pcoi-spacing-10); /* Horizontal padding for compact chips and citation marks */
+  --pcoi-semantic-spacing-section-header-margin: var(--pcoi-spacing-64); /* Bottom margin between section headers and subsequent section content */
 
   /* ── Tier 3: Semantic Radius Tokens ── */
   --pcoi-semantic-radius-btn: var(--pcoi-radius-sm); /* Border radius for buttons */
@@ -336,6 +360,36 @@
   --pcoi-semantic-sizing-badge-height: var(--pcoi-sizing-height-xs); /* Badge and tag height */
   --pcoi-semantic-sizing-step-number: var(--pcoi-sizing-height-lg); /* HowStep number circle diameter (48px) */
   --pcoi-semantic-sizing-icon-box: 52px; /* Card icon container size (custom — between lg and xl) */
+  --pcoi-semantic-sizing-toggle-track-width: 40px; /* Toggle track width */
+  --pcoi-semantic-sizing-toggle-track-height: 22px; /* Toggle track height */
+  --pcoi-semantic-sizing-toggle-thumb-size: 16px; /* Toggle thumb diameter */
+  --pcoi-semantic-sizing-toggle-check-width: 4px; /* Toggle checkmark width */
+  --pcoi-semantic-sizing-toggle-check-height: 7px; /* Toggle checkmark height */
+  --pcoi-semantic-sizing-toggle-check-stroke: 1.5px; /* Toggle checkmark stroke width */
+  --pcoi-semantic-sizing-hamburger-size: 28px; /* Hamburger button width and height */
+  --pcoi-semantic-sizing-container-max: 1200px; /* Maximum width for wide containers such as global navigation */
+  --pcoi-semantic-sizing-container-narrow: 800px; /* Maximum width for narrow content containers */
+  --pcoi-semantic-sizing-toast-width-min: 280px; /* Minimum width for toast notifications */
+  --pcoi-semantic-sizing-toast-width-max: 420px; /* Maximum width for toast notifications */
+  --pcoi-semantic-sizing-comparison-width: 900px; /* Maximum width for comparison tables */
+  --pcoi-semantic-sizing-comparison-scroll-width: 500px; /* Minimum table width before horizontal scrolling on mobile */
+  --pcoi-semantic-sizing-modal-width: 520px; /* Default modal dialog width */
+  --pcoi-semantic-sizing-document-width: 900px; /* Wide dialog/document overlay width */
+  --pcoi-semantic-sizing-callout-width: 640px; /* Maximum width for callout quote blocks */
+  --pcoi-semantic-sizing-control-box-size: 18px; /* Checkbox/radio control box size */
+  --pcoi-semantic-sizing-radio-dot-size: 8px; /* Radio selected-state dot size */
+  --pcoi-semantic-sizing-bullet-size: 8px; /* Bullet indicator size in compact signal lists */
+  --pcoi-semantic-sizing-accent-border-width: 3px; /* Accent border width for status callouts and toast variants */
+  --pcoi-semantic-sizing-accent-line-width: 60px; /* Decorative accent line width used in callouts */
+
+  /* ── Tier 3: Semantic Layout Tokens ── */
+  --pcoi-semantic-layout-z-base: var(--pcoi-layout-zIndex-base); /* Base layer for regular document flow */
+  --pcoi-semantic-layout-z-content: var(--pcoi-layout-zIndex-content); /* Content layer above decorative backgrounds */
+  --pcoi-semantic-layout-z-mobile-menu: var(--pcoi-layout-zIndex-mobile-menu); /* Mobile menu layer */
+  --pcoi-semantic-layout-z-dropdown: var(--pcoi-layout-zIndex-dropdown); /* Dropdown and popover layer */
+  --pcoi-semantic-layout-z-modal: var(--pcoi-layout-zIndex-modal); /* Modal and dialog layer */
+  --pcoi-semantic-layout-z-toast: var(--pcoi-layout-zIndex-toast); /* Toast/notification layer */
+  --pcoi-semantic-layout-z-nav: var(--pcoi-layout-zIndex-nav); /* Fixed navigation layer */
 
   /* ── Legacy Compatibility (matches original CSS vars from pcoi.ai) ── */
   --color-bg: var(--pcoi-color-bg);

package/build/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://design-tokens.org/schema.json",
   "$description": "PCOI Design System Tokens — Complete merged output",
-  "$generated": "2026-03-03T05:56:04.038Z",
+  "$generated": "2026-03-07T17:32:03.590Z",
   "color": {
     "$type": "color",
     "$description": "Tier 1: Primitive color values. Never apply directly to designs.",
@@ -480,6 +480,10 @@
       "$value": "{spacing.80}",
       "$description": "Vertical padding for page sections"
     },
+    "section-y-md": {
+      "$value": "{spacing.60}",
+      "$description": "Medium vertical section padding for compact long-form sections"
+    },
     "section-y-lg": {
       "$value": "{spacing.120}",
       "$description": "Vertical padding for large/hero sections"
@@ -508,6 +512,10 @@
       "$value": "{spacing.16}",
       "$description": "Horizontal padding inside inputs"
     },
+    "input-x-compact": {
+      "$value": "{spacing.14}",
+      "$description": "Compact horizontal padding inside dense inputs and fields"
+    },
     "input-y": {
       "$value": "{spacing.12}",
       "$description": "Vertical padding inside inputs"
@@ -516,10 +524,22 @@
       "$value": "{spacing.24}",
       "$description": "Horizontal padding for default buttons"
     },
+    "btn-x-comfortable": {
+      "$value": "{spacing.28}",
+      "$description": "Horizontal padding for comfortable primary button sizing"
+    },
+    "btn-x-nav": {
+      "$value": "{spacing.22}",
+      "$description": "Horizontal padding for compact navigation CTA buttons"
+    },
     "btn-y": {
       "$value": "{spacing.10}",
       "$description": "Vertical padding for default buttons"
     },
+    "btn-y-comfortable": {
+      "$value": "{spacing.14}",
+      "$description": "Vertical padding for comfortable primary button sizing"
+    },
     "btn-x-lg": {
       "$value": "{spacing.36}",
       "$description": "Horizontal padding for large buttons"
@@ -528,6 +548,58 @@
       "$value": "{spacing.16}",
       "$description": "Vertical padding for large buttons"
     },
+    "panel-padding": {
+      "$value": "{spacing.24}",
+      "$description": "Default internal padding for modal and overlay panels"
+    },
+    "panel-padding-sm": {
+      "$value": "{spacing.16}",
+      "$description": "Compact internal padding for panel footers and dense panel regions"
+    },
+    "panel-gap": {
+      "$value": "{spacing.12}",
+      "$description": "Inline or row gap for panel action groups"
+    },
+    "control-padding-2xs": {
+      "$value": "{spacing.4}",
+      "$description": "Extra-compact control padding for icon-only affordances"
+    },
+    "control-padding-xs": {
+      "$value": "{spacing.6}",
+      "$description": "Compact control padding for dense icon buttons"
+    },
+    "control-padding-sm": {
+      "$value": "{spacing.8}",
+      "$description": "Small control/container padding for narrow viewports"
+    },
+    "toggle-thumb-inset": {
+      "$value": "3px",
+      "$description": "Inset from toggle track edge to toggle thumb origin"
+    },
+    "toggle-thumb-travel": {
+      "$value": "18px",
+      "$description": "Horizontal travel distance for toggle thumb in checked state"
+    },
+    "hamburger-bar-offset": {
+      "$value": "7px",
+      "$description": "Vertical offset used when morphing hamburger bars into an X"
+    },
+    "hamburger-gap": {
+      "$value": "5px",
+      "$description": "Vertical gap between hamburger bars"
+    },
+    "inline-2xs": {
+      "$value": "{spacing.4}",
+      "$description": "Extra-small inline spacing for compact adornments"
+    },
+    "form-gap-compact": {
+      "$value": "{spacing.6}",
+      "$description": "Compact gap between form label, control, and messages"
+    },
+    "text-gap-sm": {
+      "$value": "{spacing.10}",
+      "$description": "Small vertical text gap between titles and supporting content"
+    },
     "nav-height": {
       "$value": "{spacing.72}",
       "$description": "Navigation bar height"
@@ -544,6 +616,14 @@
       "$value": "{spacing.32}",
       "$description": "Large vertical stack spacing (content blocks)"
     },
+    "stack-compact": {
+      "$value": "{spacing.14}",
+      "$description": "Compact vertical stack spacing between closely related content rows"
+    },
+    "stack-xl": {
+      "$value": "{spacing.48}",
+      "$description": "Extra-large vertical stack spacing between major content groups"
+    },
     "inline-sm": {
       "$value": "{spacing.8}",
       "$description": "Small inline spacing (icon + text)"
@@ -551,6 +631,22 @@
     "inline-md": {
       "$value": "{spacing.16}",
       "$description": "Medium inline spacing (nav links)"
+    },
+    "inline-lg": {
+      "$value": "{spacing.28}",
+      "$description": "Large inline spacing for sparse horizontal groups"
+    },
+    "inline-xl": {
+      "$value": "{spacing.48}",
+      "$description": "Extra-large inline spacing for desktop message offsets and wide gutters"
+    },
+    "chip-x": {
+      "$value": "{spacing.10}",
+      "$description": "Horizontal padding for compact chips and citation marks"
+    },
+    "section-header-margin": {
+      "$value": "{spacing.64}",
+      "$description": "Bottom margin between section headers and subsequent section content"
     }
   },
   "radius": {
@@ -1353,6 +1449,37 @@
       }
     }
   },
+  "semantic-layout": {
+    "$description": "Semantic layout tokens. Map layout primitives to component-level layout intent.",
+    "z-base": {
+      "$value": "{layout.zIndex.base}",
+      "$description": "Base layer for regular document flow"
+    },
+    "z-content": {
+      "$value": "{layout.zIndex.content}",
+      "$description": "Content layer above decorative backgrounds"
+    },
+    "z-mobile-menu": {
+      "$value": "{layout.zIndex.mobile-menu}",
+      "$description": "Mobile menu layer"
+    },
+    "z-dropdown": {
+      "$value": "{layout.zIndex.dropdown}",
+      "$description": "Dropdown and popover layer"
+    },
+    "z-modal": {
+      "$value": "{layout.zIndex.modal}",
+      "$description": "Modal and dialog layer"
+    },
+    "z-toast": {
+      "$value": "{layout.zIndex.toast}",
+      "$description": "Toast/notification layer"
+    },
+    "z-nav": {
+      "$value": "{layout.zIndex.nav}",
+      "$description": "Fixed navigation layer"
+    }
+  },
   "sizing": {
     "$type": "dimension",
     "$description": "Tier 1: Sizing primitives — standardized height scale for component constraints. Based on 8px grid. Separate from spacing (padding/margin/gap).",
@@ -1418,6 +1545,90 @@
     "icon-box": {
       "$value": "52px",
       "$description": "Card icon container size (custom — between lg and xl)"
+    },
+    "toggle-track-width": {
+      "$value": "40px",
+      "$description": "Toggle track width"
+    },
+    "toggle-track-height": {
+      "$value": "22px",
+      "$description": "Toggle track height"
+    },
+    "toggle-thumb-size": {
+      "$value": "16px",
+      "$description": "Toggle thumb diameter"
+    },
+    "toggle-check-width": {
+      "$value": "4px",
+      "$description": "Toggle checkmark width"
+    },
+    "toggle-check-height": {
+      "$value": "7px",
+      "$description": "Toggle checkmark height"
+    },
+    "toggle-check-stroke": {
+      "$value": "1.5px",
+      "$description": "Toggle checkmark stroke width"
+    },
+    "hamburger-size": {
+      "$value": "28px",
+      "$description": "Hamburger button width and height"
+    },
+    "container-max": {
+      "$value": "1200px",
+      "$description": "Maximum width for wide containers such as global navigation"
+    },
+    "container-narrow": {
+      "$value": "800px",
+      "$description": "Maximum width for narrow content containers"
+    },
+    "toast-width-min": {
+      "$value": "280px",
+      "$description": "Minimum width for toast notifications"
+    },
+    "toast-width-max": {
+      "$value": "420px",
+      "$description": "Maximum width for toast notifications"
+    },
+    "comparison-width": {
+      "$value": "900px",
+      "$description": "Maximum width for comparison tables"
+    },
+    "comparison-scroll-width": {
+      "$value": "500px",
+      "$description": "Minimum table width before horizontal scrolling on mobile"
+    },
+    "modal-width": {
+      "$value": "520px",
+      "$description": "Default modal dialog width"
+    },
+    "document-width": {
+      "$value": "900px",
+      "$description": "Wide dialog/document overlay width"
+    },
+    "callout-width": {
+      "$value": "640px",
+      "$description": "Maximum width for callout quote blocks"
+    },
+    "control-box-size": {
+      "$value": "18px",
+      "$description": "Checkbox/radio control box size"
+    },
+    "radio-dot-size": {
+      "$value": "8px",
+      "$description": "Radio selected-state dot size"
+    },
+    "bullet-size": {
+      "$value": "8px",
+      "$description": "Bullet indicator size in compact signal lists"
+    },
+    "accent-border-width": {
+      "$value": "3px",
+      "$description": "Accent border width for status callouts and toast variants"
+    },
+    "accent-line-width": {
+      "$value": "60px",
+      "$description": "Decorative accent line width used in callouts"
     }
   }
 }

package/build/tokens.scss

@@ -1,5 +1,5 @@
 // @pcoi/tokens — SCSS Variables
-// Generated 2026-03-03
+// Generated 2026-03-07
 
 // Color Primitives
 $pcoi-color-bg: #0C0C14;
@@ -188,6 +188,7 @@ $pcoi-sizing-height-2xl: 80px;
 
 // Semantic Spacing
 $pcoi-semantic-spacing-section-y: {spacing.80};
+$pcoi-semantic-spacing-section-y-md: {spacing.60};
 $pcoi-semantic-spacing-section-y-lg: {spacing.120};
 $pcoi-semantic-spacing-component-gap: {spacing.40};
 $pcoi-semantic-spacing-card-padding: {spacing.36};
@@ -195,17 +196,40 @@ $pcoi-semantic-spacing-card-gap: {spacing.20};
 $pcoi-semantic-spacing-form-gap: {spacing.20};
 $pcoi-semantic-spacing-form-padding: {spacing.40};
 $pcoi-semantic-spacing-input-x: {spacing.16};
+$pcoi-semantic-spacing-input-x-compact: {spacing.14};
 $pcoi-semantic-spacing-input-y: {spacing.12};
 $pcoi-semantic-spacing-btn-x: {spacing.24};
+$pcoi-semantic-spacing-btn-x-comfortable: {spacing.28};
+$pcoi-semantic-spacing-btn-x-nav: {spacing.22};
 $pcoi-semantic-spacing-btn-y: {spacing.10};
+$pcoi-semantic-spacing-btn-y-comfortable: {spacing.14};
 $pcoi-semantic-spacing-btn-x-lg: {spacing.36};
 $pcoi-semantic-spacing-btn-y-lg: {spacing.16};
+$pcoi-semantic-spacing-panel-padding: {spacing.24};
+$pcoi-semantic-spacing-panel-padding-sm: {spacing.16};
+$pcoi-semantic-spacing-panel-gap: {spacing.12};
+$pcoi-semantic-spacing-control-padding-2xs: {spacing.4};
+$pcoi-semantic-spacing-control-padding-xs: {spacing.6};
+$pcoi-semantic-spacing-control-padding-sm: {spacing.8};
+$pcoi-semantic-spacing-toggle-thumb-inset: 3px;
+$pcoi-semantic-spacing-toggle-thumb-travel: 18px;
+$pcoi-semantic-spacing-hamburger-bar-offset: 7px;
+$pcoi-semantic-spacing-hamburger-gap: 5px;
+$pcoi-semantic-spacing-inline-2xs: {spacing.4};
+$pcoi-semantic-spacing-form-gap-compact: {spacing.6};
+$pcoi-semantic-spacing-text-gap-sm: {spacing.10};
 $pcoi-semantic-spacing-nav-height: {spacing.72};
 $pcoi-semantic-spacing-stack-sm: {spacing.8};
 $pcoi-semantic-spacing-stack-md: {spacing.16};
 $pcoi-semantic-spacing-stack-lg: {spacing.32};
+$pcoi-semantic-spacing-stack-compact: {spacing.14};
+$pcoi-semantic-spacing-stack-xl: {spacing.48};
 $pcoi-semantic-spacing-inline-sm: {spacing.8};
 $pcoi-semantic-spacing-inline-md: {spacing.16};
+$pcoi-semantic-spacing-inline-lg: {spacing.28};
+$pcoi-semantic-spacing-inline-xl: {spacing.48};
+$pcoi-semantic-spacing-chip-x: {spacing.10};
+$pcoi-semantic-spacing-section-header-margin: {spacing.64};
 
 // Semantic Radius
 $pcoi-semantic-radius-btn: {radius.sm};
@@ -224,6 +248,36 @@ $pcoi-semantic-sizing-textarea-min-height: {sizing.height.2xl};
 $pcoi-semantic-sizing-badge-height: {sizing.height.xs};
 $pcoi-semantic-sizing-step-number: {sizing.height.lg};
 $pcoi-semantic-sizing-icon-box: 52px;
+$pcoi-semantic-sizing-toggle-track-width: 40px;
+$pcoi-semantic-sizing-toggle-track-height: 22px;
+$pcoi-semantic-sizing-toggle-thumb-size: 16px;
+$pcoi-semantic-sizing-toggle-check-width: 4px;
+$pcoi-semantic-sizing-toggle-check-height: 7px;
+$pcoi-semantic-sizing-toggle-check-stroke: 1.5px;
+$pcoi-semantic-sizing-hamburger-size: 28px;
+$pcoi-semantic-sizing-container-max: 1200px;
+$pcoi-semantic-sizing-container-narrow: 800px;
+$pcoi-semantic-sizing-toast-width-min: 280px;
+$pcoi-semantic-sizing-toast-width-max: 420px;
+$pcoi-semantic-sizing-comparison-width: 900px;
+$pcoi-semantic-sizing-comparison-scroll-width: 500px;
+$pcoi-semantic-sizing-modal-width: 520px;
+$pcoi-semantic-sizing-document-width: 900px;
+$pcoi-semantic-sizing-callout-width: 640px;
+$pcoi-semantic-sizing-control-box-size: 18px;
+$pcoi-semantic-sizing-radio-dot-size: 8px;
+$pcoi-semantic-sizing-bullet-size: 8px;
+$pcoi-semantic-sizing-accent-border-width: 3px;
+$pcoi-semantic-sizing-accent-line-width: 60px;
+
+// Semantic Layout
+$pcoi-semantic-layout-z-base: {layout.zIndex.base};
+$pcoi-semantic-layout-z-content: {layout.zIndex.content};
+$pcoi-semantic-layout-z-mobile-menu: {layout.zIndex.mobile-menu};
+$pcoi-semantic-layout-z-dropdown: {layout.zIndex.dropdown};
+$pcoi-semantic-layout-z-modal: {layout.zIndex.modal};
+$pcoi-semantic-layout-z-toast: {layout.zIndex.toast};
+$pcoi-semantic-layout-z-nav: {layout.zIndex.nav};
 
 // Semantic Typography
 $pcoi-semantic-type-heading-font: {font.family.sans};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pcoi/tokens",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "PCOI Design System — Foundation tokens (colors, spacing, typography, effects)",
   "main": "build/index.js",
   "module": "build/index.mjs",
@@ -23,7 +23,11 @@
     "build": "node build-tokens.js",
     "clean": "rm -rf build"
   },
-  "keywords": ["design-tokens", "pcoi", "design-system"],
+  "keywords": [
+    "design-tokens",
+    "pcoi",
+    "design-system"
+  ],
   "license": "MIT",
   "sideEffects": false
 }

package/src/layout/semantics.json

@@ -0,0 +1,33 @@
+{
+  "semantic-layout": {
+    "$description": "Semantic layout tokens. Map layout primitives to component-level layout intent.",
+    "z-base": {
+      "$value": "{layout.zIndex.base}",
+      "$description": "Base layer for regular document flow"
+    },
+    "z-content": {
+      "$value": "{layout.zIndex.content}",
+      "$description": "Content layer above decorative backgrounds"
+    },
+    "z-mobile-menu": {
+      "$value": "{layout.zIndex.mobile-menu}",
+      "$description": "Mobile menu layer"
+    },
+    "z-dropdown": {
+      "$value": "{layout.zIndex.dropdown}",
+      "$description": "Dropdown and popover layer"
+    },
+    "z-modal": {
+      "$value": "{layout.zIndex.modal}",
+      "$description": "Modal and dialog layer"
+    },
+    "z-toast": {
+      "$value": "{layout.zIndex.toast}",
+      "$description": "Toast/notification layer"
+    },
+    "z-nav": {
+      "$value": "{layout.zIndex.nav}",
+      "$description": "Fixed navigation layer"
+    }
+  }
+}

package/src/sizing/semantics.json

@@ -9,6 +9,27 @@
     "textarea-min-height": { "$value": "{sizing.height.2xl}", "$description": "Textarea minimum height" },
     "badge-height":        { "$value": "{sizing.height.xs}",  "$description": "Badge and tag height" },
     "step-number":         { "$value": "{sizing.height.lg}",  "$description": "HowStep number circle diameter (48px)" },
-    "icon-box":            { "$value": "52px",                "$description": "Card icon container size (custom — between lg and xl)" }
+    "icon-box":            { "$value": "52px",                "$description": "Card icon container size (custom — between lg and xl)" },
+    "toggle-track-width":  { "$value": "40px",                "$description": "Toggle track width" },
+    "toggle-track-height": { "$value": "22px",                "$description": "Toggle track height" },
+    "toggle-thumb-size":   { "$value": "16px",                "$description": "Toggle thumb diameter" },
+    "toggle-check-width":  { "$value": "4px",                 "$description": "Toggle checkmark width" },
+    "toggle-check-height": { "$value": "7px",                 "$description": "Toggle checkmark height" },
+    "toggle-check-stroke": { "$value": "1.5px",               "$description": "Toggle checkmark stroke width" },
+    "hamburger-size":      { "$value": "28px",                "$description": "Hamburger button width and height" },
+    "container-max":       { "$value": "1200px",              "$description": "Maximum width for wide containers such as global navigation" },
+    "container-narrow":    { "$value": "800px",               "$description": "Maximum width for narrow content containers" },
+    "toast-width-min":     { "$value": "280px",               "$description": "Minimum width for toast notifications" },
+    "toast-width-max":     { "$value": "420px",               "$description": "Maximum width for toast notifications" },
+    "comparison-width":    { "$value": "900px",               "$description": "Maximum width for comparison tables" },
+    "comparison-scroll-width": { "$value": "500px",           "$description": "Minimum table width before horizontal scrolling on mobile" },
+    "modal-width":         { "$value": "520px",               "$description": "Default modal dialog width" },
+    "document-width":      { "$value": "900px",               "$description": "Wide dialog/document overlay width" },
+    "callout-width":       { "$value": "640px",               "$description": "Maximum width for callout quote blocks" },
+    "control-box-size":    { "$value": "18px",                "$description": "Checkbox/radio control box size" },
+    "radio-dot-size":      { "$value": "8px",                 "$description": "Radio selected-state dot size" },
+    "bullet-size":         { "$value": "8px",                 "$description": "Bullet indicator size in compact signal lists" },
+    "accent-border-width": { "$value": "3px",                 "$description": "Accent border width for status callouts and toast variants" },
+    "accent-line-width":   { "$value": "60px",                "$description": "Decorative accent line width used in callouts" }
   }
 }

package/src/spacing/semantics.json

@@ -7,6 +7,10 @@
       "$value": "{spacing.80}",
       "$description": "Vertical padding for page sections"
     },
+    "section-y-md": {
+      "$value": "{spacing.60}",
+      "$description": "Medium vertical section padding for compact long-form sections"
+    },
     "section-y-lg": {
       "$value": "{spacing.120}",
       "$description": "Vertical padding for large/hero sections"
@@ -35,6 +39,10 @@
       "$value": "{spacing.16}",
       "$description": "Horizontal padding inside inputs"
     },
+    "input-x-compact": {
+      "$value": "{spacing.14}",
+      "$description": "Compact horizontal padding inside dense inputs and fields"
+    },
     "input-y": {
       "$value": "{spacing.12}",
       "$description": "Vertical padding inside inputs"
@@ -43,10 +51,22 @@
       "$value": "{spacing.24}",
       "$description": "Horizontal padding for default buttons"
     },
+    "btn-x-comfortable": {
+      "$value": "{spacing.28}",
+      "$description": "Horizontal padding for comfortable primary button sizing"
+    },
+    "btn-x-nav": {
+      "$value": "{spacing.22}",
+      "$description": "Horizontal padding for compact navigation CTA buttons"
+    },
     "btn-y": {
       "$value": "{spacing.10}",
       "$description": "Vertical padding for default buttons"
     },
+    "btn-y-comfortable": {
+      "$value": "{spacing.14}",
+      "$description": "Vertical padding for comfortable primary button sizing"
+    },
     "btn-x-lg": {
       "$value": "{spacing.36}",
       "$description": "Horizontal padding for large buttons"
@@ -55,6 +75,58 @@
       "$value": "{spacing.16}",
       "$description": "Vertical padding for large buttons"
     },
+    "panel-padding": {
+      "$value": "{spacing.24}",
+      "$description": "Default internal padding for modal and overlay panels"
+    },
+    "panel-padding-sm": {
+      "$value": "{spacing.16}",
+      "$description": "Compact internal padding for panel footers and dense panel regions"
+    },
+    "panel-gap": {
+      "$value": "{spacing.12}",
+      "$description": "Inline or row gap for panel action groups"
+    },
+    "control-padding-2xs": {
+      "$value": "{spacing.4}",
+      "$description": "Extra-compact control padding for icon-only affordances"
+    },
+    "control-padding-xs": {
+      "$value": "{spacing.6}",
+      "$description": "Compact control padding for dense icon buttons"
+    },
+    "control-padding-sm": {
+      "$value": "{spacing.8}",
+      "$description": "Small control/container padding for narrow viewports"
+    },
+    "toggle-thumb-inset": {
+      "$value": "3px",
+      "$description": "Inset from toggle track edge to toggle thumb origin"
+    },
+    "toggle-thumb-travel": {
+      "$value": "18px",
+      "$description": "Horizontal travel distance for toggle thumb in checked state"
+    },
+    "hamburger-bar-offset": {
+      "$value": "7px",
+      "$description": "Vertical offset used when morphing hamburger bars into an X"
+    },
+    "hamburger-gap": {
+      "$value": "5px",
+      "$description": "Vertical gap between hamburger bars"
+    },
+    "inline-2xs": {
+      "$value": "{spacing.4}",
+      "$description": "Extra-small inline spacing for compact adornments"
+    },
+    "form-gap-compact": {
+      "$value": "{spacing.6}",
+      "$description": "Compact gap between form label, control, and messages"
+    },
+    "text-gap-sm": {
+      "$value": "{spacing.10}",
+      "$description": "Small vertical text gap between titles and supporting content"
+    },
     "nav-height": {
       "$value": "{spacing.72}",
       "$description": "Navigation bar height"
@@ -71,6 +143,14 @@
       "$value": "{spacing.32}",
       "$description": "Large vertical stack spacing (content blocks)"
     },
+    "stack-compact": {
+      "$value": "{spacing.14}",
+      "$description": "Compact vertical stack spacing between closely related content rows"
+    },
+    "stack-xl": {
+      "$value": "{spacing.48}",
+      "$description": "Extra-large vertical stack spacing between major content groups"
+    },
     "inline-sm": {
       "$value": "{spacing.8}",
       "$description": "Small inline spacing (icon + text)"
@@ -78,6 +158,22 @@
     "inline-md": {
       "$value": "{spacing.16}",
       "$description": "Medium inline spacing (nav links)"
+    },
+    "inline-lg": {
+      "$value": "{spacing.28}",
+      "$description": "Large inline spacing for sparse horizontal groups"
+    },
+    "inline-xl": {
+      "$value": "{spacing.48}",
+      "$description": "Extra-large inline spacing for desktop message offsets and wide gutters"
+    },
+    "chip-x": {
+      "$value": "{spacing.10}",
+      "$description": "Horizontal padding for compact chips and citation marks"
+    },
+    "section-header-margin": {
+      "$value": "{spacing.64}",
+      "$description": "Bottom margin between section headers and subsequent section content"
     }
   }
 }