@moderneinc/design-system-components 6.0.1-next.d0f7d0 → 6.1.0-alpha.034d53

package/dist/index.js

@@ -26,9 +26,11 @@ var Divider = require('@mui/material/Divider');
 var InputAdornment = require('@mui/material/InputAdornment');
 var InputBase = require('@mui/material/InputBase');
 var TextField = require('@mui/material/TextField');
+var FormControl = require('@mui/material/FormControl');
 var FormLabel = require('@mui/material/FormLabel');
-var InputLabel = require('@mui/material/InputLabel');
+var MuiInputLabel = require('@mui/material/InputLabel');
 var MuiSelect = require('@mui/material/Select');
+var utils = require('@mui/material/utils');
 var MenuItem = require('@mui/material/MenuItem');
 var Tooltip = require('@mui/material/Tooltip');
 var DateCalendar = require('@mui/x-date-pickers/DateCalendar');
@@ -43,7 +45,6 @@ var dateFns = require('date-fns');
 var LinearProgress = require('@mui/material/LinearProgress');
 var Paper = require('@mui/material/Paper');
 var Stack = require('@mui/material/Stack');
-var FormControl = require('@mui/material/FormControl');
 var FormHelperText = require('@mui/material/FormHelperText');
 var ListItemButton = require('@mui/material/ListItemButton');
 var ListItemIcon = require('@mui/material/ListItemIcon');
@@ -82,29 +83,35 @@ var RichTreeViewPro = require('@mui/x-tree-view-pro/RichTreeViewPro');
 const MUI_INTERNAL_PROPS = ['ownerState', 'theme', 'sx', 'as'];
 const isMuiInternalProp = (prop) => MUI_INTERNAL_PROPS.includes(prop);
 
+// semanticColors.status.<name> feeds `palette` below, read with
+// .light/.dark/.transparent, so the phase-2 token restructure's codemod
+// (driven from literal TOKEN_MAP paths) cannot reach either — fixed by hand,
+// mirroring ModStatusCell/Dot. See
+// docs/superpowers/plans/2026-08-05-semantic-restructure.md
+// "Dynamic access — the codemod cannot see these".
 const STATUS_COLOR_CLASSES = [
-    [Chip.chipClasses.colorDefault, designSystemTokens.semanticColors.status.neutral],
-    [Chip.chipClasses.colorError, designSystemTokens.semanticColors.status.error],
-    [Chip.chipClasses.colorWarning, designSystemTokens.semanticColors.status.warning],
-    [Chip.chipClasses.colorSuccess, designSystemTokens.semanticColors.status.success],
-    [Chip.chipClasses.colorInfo, designSystemTokens.semanticColors.status.info],
+    [Chip.chipClasses.colorDefault, designSystemTokens.semanticColors.color.status.neutral],
+    [Chip.chipClasses.colorError, designSystemTokens.semanticColors.color.status.error],
+    [Chip.chipClasses.colorWarning, designSystemTokens.semanticColors.color.status.warning],
+    [Chip.chipClasses.colorSuccess, designSystemTokens.semanticColors.color.status.success],
+    [Chip.chipClasses.colorInfo, designSystemTokens.semanticColors.color.status.info],
 ];
 const outlinedColorOverrides = {
     backgroundColor: 'transparent',
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
-    border: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+    color: designSystemTokens.semanticColors.color.text.secondary,
+    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
     [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
     },
 };
 const filledColorRules = Object.fromEntries(STATUS_COLOR_CLASSES.map(([className, palette]) => [
     `&.${className}`,
     {
-        backgroundColor: palette.light,
-        color: palette.dark,
-        border: `1px solid ${palette.transparent}`,
+        backgroundColor: palette.bg,
+        color: palette.fg,
+        border: `1px solid ${palette.tint}`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
-            color: palette.dark,
+            color: palette.fg,
         },
     },
 ]));
@@ -178,7 +185,7 @@ const avatarIndexFromSeed = (seed) => seed ? ((djb2Hash(seed) % 7) + 1) : undefi
  * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
  */
 const focusRingStyles = {
-    outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+    outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
     outlineOffset: '2px',
 };
 
@@ -186,9 +193,14 @@ const sizeConfig$1 = {
     small: { size: designSystemTokens.spacing.spacing_2_1_2, fontSize: designSystemTokens.typography.fontSize.xs },
     medium: { size: designSystemTokens.spacing.spacing_4, fontSize: designSystemTokens.typography.fontSize.xs },
 };
+// semanticColors.avatar.initials[...] is a computed member access, so the
+// phase-2 token restructure's codemod (driven from literal TOKEN_MAP paths)
+// cannot reach it — fixed by hand, mirroring ModStatusCell/Dot. See
+// docs/superpowers/plans/2026-08-05-semantic-restructure.md
+// "Dynamic access — the codemod cannot see these".
 const indexedColors = (colorIndex) => ({
-    color: designSystemTokens.semanticColors.avatar.initials[`text${colorIndex}`],
-    backgroundColor: designSystemTokens.semanticColors.avatar.initials[`background${colorIndex}`],
+    color: designSystemTokens.semanticColors.avatar.initials[`fg${colorIndex}`],
+    backgroundColor: designSystemTokens.semanticColors.avatar.initials[`bg${colorIndex}`],
     borderColor: designSystemTokens.semanticColors.avatar.initials[`border${colorIndex}`],
 });
 const StyledAvatar = styles.styled(MuiAvatar, {
@@ -203,13 +215,13 @@ const StyledAvatar = styles.styled(MuiAvatar, {
         fontFamily: designSystemTokens.typography.fontFamily.body,
         fontWeight: designSystemTokens.typography.fontWeight.regular,
         lineHeight: 1,
-        color: designSystemTokens.semanticColors.avatar.userDefaultText,
-        backgroundColor: designSystemTokens.semanticColors.avatar.userDefaultBg,
-        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+        color: designSystemTokens.semanticColors.avatar.user.fg,
+        backgroundColor: designSystemTokens.semanticColors.avatar.user.bg,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         ...(avatarColorIndex && indexedColors(avatarColorIndex)),
         '&:focus-visible': {
             ...focusRingStyles,
-            borderColor: designSystemTokens.semanticColors.border.focus,
+            borderColor: designSystemTokens.semanticColors.color.border.focus,
         },
     };
 });
@@ -324,7 +336,7 @@ const HeaderContainer = styles.styled(Box)(({ size }) => {
     return {
         width: '34px',
         height: `${modRowHeights[size]}px`,
-        borderBottom: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+        borderBottom: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         boxSizing: 'border-box',
         display: 'flex',
         alignItems: 'center',
@@ -432,7 +444,7 @@ const ModActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
     if (scene === exports.ActivityScene.BLANK) {
         return null;
     }
-    const color = event !== 'none' ? ACTIVITY_COLORS[event] : designSystemTokens.semanticColors.border.secondary;
+    const color = event !== 'none' ? ACTIVITY_COLORS[event] : designSystemTokens.semanticColors.color.border.primary;
     // Use secondary color for paths if specified, otherwise use primary color
     const pathColor = secondaryEvent && secondaryEvent !== 'none' ? ACTIVITY_COLORS[secondaryEvent] : color;
     switch (scene) {
@@ -460,12 +472,18 @@ const ModActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 ModActivityIndicatorCell.displayName = 'ModActivityIndicatorCell';
 
 const neutralSmallShadow = `${designSystemTokens.shadows.neutral.small.x}px ${designSystemTokens.shadows.neutral.small.y}px ${designSystemTokens.shadows.neutral.small.blur}px ${designSystemTokens.shadows.neutral.small.spread}px ${designSystemTokens.shadows.neutral.small.shadow}`;
+// semanticColors.status[intent] is read dynamically below, so the phase-2
+// token restructure's codemod (driven from literal TOKEN_MAP paths) cannot
+// reach these group references or the .default/.dark/.light/.transparent
+// reads on `palette` — fixed by hand, mirroring ModStatusCell/Dot. See
+// docs/superpowers/plans/2026-08-05-semantic-restructure.md
+// "Dynamic access — the codemod cannot see these".
 const intentColors$1 = {
-    success: designSystemTokens.semanticColors.status.success,
-    error: designSystemTokens.semanticColors.status.error,
-    warning: designSystemTokens.semanticColors.status.warning,
-    offline: designSystemTokens.semanticColors.status.neutral,
-    info: designSystemTokens.semanticColors.status.info,
+    success: designSystemTokens.semanticColors.color.status.success,
+    error: designSystemTokens.semanticColors.color.status.error,
+    warning: designSystemTokens.semanticColors.color.status.warning,
+    offline: designSystemTokens.semanticColors.color.status.neutral,
+    info: designSystemTokens.semanticColors.color.status.info,
 };
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert$2 = styles.styled(Alert, {
@@ -474,10 +492,10 @@ const StyledAlert$2 = styles.styled(Alert, {
     const palette = intentColors$1[intent];
     const isFilled = alertType === 'filled';
     const isCompact = alertSize === 'compact';
-    const iconColor = isFilled ? designSystemTokens.semanticColors.typography.tooltip.default : palette.default;
+    const iconColor = isFilled ? designSystemTokens.semanticColors.color.text.tooltip : palette.solid;
     const messageColor = isFilled
-        ? designSystemTokens.semanticColors.typography.tooltip.default
-        : designSystemTokens.semanticColors.typography.body;
+        ? designSystemTokens.semanticColors.color.text.tooltip
+        : designSystemTokens.semanticColors.color.text.primary;
     return {
         ...(isCompact
             ? { minHeight: designSystemTokens.spacing.spacing_5 }
@@ -494,9 +512,9 @@ const StyledAlert$2 = styles.styled(Alert, {
         padding: hasChildren
             ? `${designSystemTokens.spacing.spacing_1_1_2}px ${designSystemTokens.spacing.spacing_2}px`
             : `0 ${designSystemTokens.spacing.spacing_2}px`,
-        backgroundColor: isFilled ? palette.dark : palette.light,
-        border: isFilled ? 'none' : `1px solid ${palette.transparent}`,
-        color: isFilled ? designSystemTokens.semanticColors.typography.tooltip.default : designSystemTokens.semanticColors.typography.body,
+        backgroundColor: isFilled ? palette.fg : palette.bg,
+        border: isFilled ? 'none' : `1px solid ${palette.tint}`,
+        color: isFilled ? designSystemTokens.semanticColors.color.text.tooltip : designSystemTokens.semanticColors.color.text.primary,
         boxShadow: isFilled ? neutralSmallShadow : undefined,
         [`& .${Alert.alertClasses.icon}`]: {
             color: iconColor,
@@ -514,9 +532,7 @@ const StyledAlert$2 = styles.styled(Alert, {
             '& span:last-child': {
                 fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
                 fontWeight: designSystemTokens.typography.fontWeight.medium,
-                color: isFilled
-                    ? designSystemTokens.semanticColors.typography.tooltip.default
-                    : designSystemTokens.semanticColors.typography.bodySecondary,
+                color: isFilled ? designSystemTokens.semanticColors.color.text.tooltip : designSystemTokens.semanticColors.color.text.secondary,
                 lineHeight: 1.4,
             },
         },
@@ -524,7 +540,7 @@ const StyledAlert$2 = styles.styled(Alert, {
             padding: 0,
             marginRight: 0,
             ...(isFilled && {
-                color: designSystemTokens.semanticColors.typography.tooltip.default,
+                color: designSystemTokens.semanticColors.color.text.tooltip,
                 [`& .${ButtonBase.buttonBaseClasses.root}`]: { color: 'inherit' },
             }),
         },
@@ -546,12 +562,18 @@ const ModAlert = ({ intent = 'success', type = 'outlined', size = 'default', tit
 };
 ModAlert.displayName = 'ModAlert';
 
+// semanticColors.status[intent] is read dynamically below, so the phase-2
+// token restructure's codemod (driven from literal TOKEN_MAP paths) cannot
+// reach these group references or the .default/.dark/.light reads on
+// `palette` — fixed by hand, mirroring ModStatusCell/Dot. See
+// docs/superpowers/plans/2026-08-05-semantic-restructure.md
+// "Dynamic access — the codemod cannot see these".
 const intentColors = {
-    info: designSystemTokens.semanticColors.status.info,
-    success: designSystemTokens.semanticColors.status.success,
-    error: designSystemTokens.semanticColors.status.error,
-    warning: designSystemTokens.semanticColors.status.warning,
-    neutral: designSystemTokens.semanticColors.status.neutral,
+    info: designSystemTokens.semanticColors.color.status.info,
+    success: designSystemTokens.semanticColors.color.status.success,
+    error: designSystemTokens.semanticColors.color.status.error,
+    warning: designSystemTokens.semanticColors.color.status.warning,
+    neutral: designSystemTokens.semanticColors.color.status.neutral,
 };
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert$1 = styles.styled(Alert, {
@@ -560,12 +582,12 @@ const StyledAlert$1 = styles.styled(Alert, {
     const palette = intentColors[intent];
     const typeStyles = bannerType === 'filled'
         ? {
-            backgroundColor: palette.dark,
-            color: designSystemTokens.semanticColors.surfaces.white,
+            backgroundColor: palette.fg,
+            color: designSystemTokens.semanticColors.color.surface.raised,
         }
         : {
-            backgroundColor: palette.light,
-            color: designSystemTokens.semanticColors.typography.body,
+            backgroundColor: palette.bg,
+            color: designSystemTokens.semanticColors.color.text.primary,
         };
     return {
         width: '100%',
@@ -614,8 +636,8 @@ const LinkText = styles.styled('span')(({ bannerType = 'outlined' }) => ({
     marginLeft: 'auto',
     fontWeight: designSystemTokens.typography.fontWeight.semiBold,
     color: bannerType === 'filled'
-        ? designSystemTokens.semanticColors.typography.link.white
-        : designSystemTokens.semanticColors.typography.link.primary,
+        ? designSystemTokens.semanticColors.color.text.linkOnBrand
+        : designSystemTokens.semanticColors.color.text.link,
     cursor: 'pointer',
     whiteSpace: 'nowrap',
     '&:hover': {
@@ -642,7 +664,7 @@ const ModBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
     if (dismissed) {
         return null;
     }
-    const closeIconColor = type === 'filled' ? designSystemTokens.semanticColors.surfaces.white : intentColors[intent].default;
+    const closeIconColor = type === 'filled' ? designSystemTokens.semanticColors.color.surface.raised : intentColors[intent].solid;
     return (jsxRuntime.jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 ModBanner.displayName = 'ModBanner';
@@ -650,7 +672,7 @@ ModBanner.displayName = 'ModBanner';
 const StyledBreadcrumbs = styles.styled(Breadcrumbs)(() => ({
     [`& .${Breadcrumbs.breadcrumbsClasses.separator}`]: {
         margin: 0,
-        color: designSystemTokens.semanticColors.icons.utility,
+        color: designSystemTokens.semanticColors.color.icon.utility,
     },
     [`& .${Breadcrumbs.breadcrumbsClasses.ol}`]: {
         gap: designSystemTokens.spacing.spacing_1,
@@ -663,15 +685,15 @@ const StyledBreadcrumbLink = styles.styled(Link, {
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: 1,
     textDecoration: 'none',
-    color: current ? designSystemTokens.semanticColors.typography.bodySecondary : designSystemTokens.semanticColors.typography.link.primary,
+    color: current ? designSystemTokens.semanticColors.color.text.secondary : designSystemTokens.semanticColors.color.text.link,
     cursor: current ? 'default' : 'pointer',
     borderRadius: designSystemTokens.borderRadius.xS,
     transition: 'color 0.2s ease-in-out',
     '&:hover': {
-        color: current ? designSystemTokens.semanticColors.icons.hover : designSystemTokens.semanticColors.buttons.tertiary.hover,
+        color: current ? designSystemTokens.semanticColors.color.icon.hover : designSystemTokens.semanticColors.button.tertiary.fgHover,
     },
     '&:focus-visible': {
-        outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+        outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
         outlineOffset: 2,
     },
 }));
@@ -709,7 +731,7 @@ function ModBreadcrumbLink({ current = false, children, component, ...props }) {
  * ```
  */
 function ModBreadcrumbs({ children, className }) {
-    return (jsxRuntime.jsx(StyledBreadcrumbs, { separator: jsxRuntime.jsx(lucideReact.ChevronRight, { size: 10.67, color: designSystemTokens.semanticColors.icons.utility }), className: className, "aria-label": "breadcrumb", children: children }));
+    return (jsxRuntime.jsx(StyledBreadcrumbs, { separator: jsxRuntime.jsx(lucideReact.ChevronRight, { size: 10.67, color: designSystemTokens.semanticColors.color.icon.utility }), className: className, "aria-label": "breadcrumb", children: children }));
 }
 
 // Props that should not be forwarded to ButtonBase (Button-specific props that ButtonBase doesn't support)
@@ -761,90 +783,90 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
         },
         // Focus visible for keyboard navigation
         [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+            outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
             outlineOffset: 2,
         },
     };
     // Variant-specific styles
     const variantStyles = {
         primary: {
-            backgroundColor: designSystemTokens.semanticColors.buttons.primary.default,
-            color: designSystemTokens.semanticColors.surfaces.white,
+            backgroundColor: designSystemTokens.semanticColors.button.primary.bg,
+            color: designSystemTokens.semanticColors.color.surface.raised,
             border: 'none',
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.buttons.primary.hover,
+                backgroundColor: designSystemTokens.semanticColors.button.primary.bgHover,
             },
             '&:active': {
-                backgroundColor: designSystemTokens.semanticColors.buttons.primary.pressed,
+                backgroundColor: designSystemTokens.semanticColors.button.primary.bgPressed,
             },
             ...(loading
                 ? {}
                 : {
                     [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: designSystemTokens.semanticColors.buttons.primary.disabled,
-                        color: designSystemTokens.semanticColors.typography.button.disabled,
+                        backgroundColor: designSystemTokens.semanticColors.button.primary.bgDisabled,
+                        color: designSystemTokens.semanticColors.button.fgDisabled,
                     },
                 }),
         },
         secondary: {
-            backgroundColor: designSystemTokens.semanticColors.buttons.secondary.defaultBackground,
-            color: designSystemTokens.semanticColors.buttons.secondary.default,
-            border: `1px solid ${designSystemTokens.semanticColors.buttons.secondary.defaultBorder}`,
+            backgroundColor: designSystemTokens.semanticColors.button.secondary.bg,
+            color: designSystemTokens.semanticColors.button.secondary.fg,
+            border: `1px solid ${designSystemTokens.semanticColors.button.secondary.border}`,
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
+                backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
             },
             '&:active': {
-                backgroundColor: designSystemTokens.semanticColors.buttons.secondary.pressedBackground,
+                backgroundColor: designSystemTokens.semanticColors.button.secondary.bgPressed,
             },
             ...(loading
                 ? {}
                 : {
                     [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: designSystemTokens.semanticColors.buttons.secondary.disabledBackground,
-                        borderColor: designSystemTokens.semanticColors.border.secondary,
-                        color: designSystemTokens.semanticColors.typography.button.disabled,
+                        backgroundColor: designSystemTokens.semanticColors.button.secondary.bgDisabled,
+                        borderColor: designSystemTokens.semanticColors.color.border.primary,
+                        color: designSystemTokens.semanticColors.button.fgDisabled,
                     },
                 }),
         },
         destructive: {
-            backgroundColor: designSystemTokens.semanticColors.buttons.destructive,
-            color: designSystemTokens.semanticColors.surfaces.white,
+            backgroundColor: designSystemTokens.semanticColors.button.destructive.bg,
+            color: designSystemTokens.semanticColors.color.surface.raised,
             border: 'none',
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.status.error.dark,
+                backgroundColor: designSystemTokens.semanticColors.color.status.error.fg,
             },
             '&:active': {
-                backgroundColor: designSystemTokens.semanticColors.status.error.dark,
+                backgroundColor: designSystemTokens.semanticColors.color.status.error.fg,
                 filter: 'brightness(0.9)',
             },
             ...(loading
                 ? {}
                 : {
                     [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
-                        backgroundColor: designSystemTokens.semanticColors.buttons.primary.disabled,
-                        color: designSystemTokens.semanticColors.typography.button.disabled,
+                        backgroundColor: designSystemTokens.semanticColors.button.primary.bgDisabled,
+                        color: designSystemTokens.semanticColors.button.fgDisabled,
                     },
                 }),
         },
         tertiary: {
             backgroundColor: 'transparent',
-            color: designSystemTokens.semanticColors.typography.input.default,
+            color: designSystemTokens.semanticColors.color.text.input,
             border: 'none',
             padding: 0,
             lineHeight: 1,
             '&:hover': {
                 backgroundColor: 'transparent',
-                color: designSystemTokens.semanticColors.buttons.tertiary.hover,
+                color: designSystemTokens.semanticColors.button.tertiary.fgHover,
             },
             '&:active': {
-                color: designSystemTokens.semanticColors.buttons.tertiary.pressed,
+                color: designSystemTokens.semanticColors.button.tertiary.fgPressed,
             },
             ...(loading
                 ? {}
                 : {
                     [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
                         backgroundColor: 'transparent',
-                        color: designSystemTokens.semanticColors.buttons.tertiary.disabled,
+                        color: designSystemTokens.semanticColors.button.tertiary.fgDisabled,
                     },
                 }),
         },
@@ -859,10 +881,10 @@ const LoadingSpinner = styles.styled(CircularProgress, {
 })(({ $variant }) => {
     // Use appropriate spinner color for each variant to ensure visibility
     const spinnerColors = {
-        primary: designSystemTokens.semanticColors.surfaces.white,
-        secondary: designSystemTokens.semanticColors.buttons.primary.default,
-        destructive: designSystemTokens.semanticColors.surfaces.white,
-        tertiary: designSystemTokens.semanticColors.buttons.tertiary.default,
+        primary: designSystemTokens.semanticColors.color.surface.raised,
+        secondary: designSystemTokens.semanticColors.button.primary.bg,
+        destructive: designSystemTokens.semanticColors.color.surface.raised,
+        tertiary: designSystemTokens.semanticColors.button.tertiary.fg,
     };
     return {
         color: spinnerColors[$variant],
@@ -880,7 +902,7 @@ const StyledButtonTab = styles.styled(MuiToggleButton)(({ theme }) => ({
     fontFamily: designSystemTokens.typography.fontFamily.body,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     lineHeight: 1,
-    color: designSystemTokens.semanticColors.typography.tab.inactive,
+    color: designSystemTokens.semanticColors.color.text.tabInactive,
     backgroundColor: 'transparent',
     border: 'none',
     padding: `${designSystemTokens.spacing.spacing_1}px ${designSystemTokens.spacing.spacing_1_1_2}px`,
@@ -890,15 +912,15 @@ const StyledButtonTab = styles.styled(MuiToggleButton)(({ theme }) => ({
         duration: theme.transitions.duration.short,
     }),
     '&:hover': {
-        color: designSystemTokens.semanticColors.typography.tab.active,
+        color: designSystemTokens.semanticColors.color.text.tabActive,
     },
     '&.Mui-focusVisible': {
-        outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+        outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
         outlineOffset: -2,
         borderRadius: designSystemTokens.borderRadius.xXS,
     },
     '&.Mui-disabled': {
-        color: designSystemTokens.semanticColors.typography.button.disabled,
+        color: designSystemTokens.semanticColors.button.fgDisabled,
         cursor: 'default',
         pointerEvents: 'none',
     },
@@ -960,7 +982,7 @@ const StyledButtonTabGroup = styles.styled(MuiToggleButtonGroup)(({ theme, size
     };
     return {
         borderRadius: designSystemTokens.borderRadius.button,
-        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         overflow: 'hidden',
         // Style all grouped children
         [`& .${MuiToggleButtonGroup.toggleButtonGroupClasses.grouped}`]: {
@@ -973,26 +995,26 @@ const StyledButtonTabGroup = styles.styled(MuiToggleButtonGroup)(({ theme, size
             lineHeight: 1,
             textTransform: 'none',
             border: 'none',
-            borderRight: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+            borderRight: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
             borderRadius: 0,
-            color: designSystemTokens.semanticColors.typography.tab.inactive,
-            backgroundColor: designSystemTokens.semanticColors.buttons.secondary.disabledBackground,
+            color: designSystemTokens.semanticColors.color.text.tabInactive,
+            backgroundColor: designSystemTokens.semanticColors.button.secondary.bgDisabled,
             transition: theme.transitions.create(['background-color', 'color', 'border-color'], {
                 duration: theme.transitions.duration.short,
             }),
             // Selected state — double selector for specificity over MUI ToggleButton defaults
             [`&.${MuiToggleButton.toggleButtonClasses.selected}.${MuiToggleButton.toggleButtonClasses.selected}`]: {
-                backgroundColor: designSystemTokens.semanticColors.surfaces.white,
-                color: designSystemTokens.semanticColors.buttons.tertiary.default,
+                backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+                color: designSystemTokens.semanticColors.button.tertiary.fg,
                 fontWeight: designSystemTokens.typography.fontWeight.semiBold,
             },
             // Hover state
             [`&:hover, &.${MuiToggleButton.toggleButtonClasses.selected}:hover`]: {
-                backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
+                backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
             },
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
-                outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+                outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
                 outlineOffset: -2,
                 zIndex: 1,
             },
@@ -1009,8 +1031,8 @@ const StyledButtonTabGroup = styles.styled(MuiToggleButtonGroup)(({ theme, size
             },
             // Disabled state
             [`&.${MuiToggleButton.toggleButtonClasses.disabled}`]: {
-                backgroundColor: designSystemTokens.semanticColors.buttons.secondary.disabledBackground,
-                color: designSystemTokens.semanticColors.typography.button.disabled,
+                backgroundColor: designSystemTokens.semanticColors.button.secondary.bgDisabled,
+                color: designSystemTokens.semanticColors.button.fgDisabled,
                 cursor: 'not-allowed',
                 pointerEvents: 'auto',
             },
@@ -1055,18 +1077,18 @@ const SmallStyledCard = styles.styled(MuiCard, {
     display: 'flex',
     flexDirection: 'column',
     gap: designSystemTokens.spacing.spacing_2, // 16px
-    backgroundColor: designSystemTokens.semanticColors.surfaces.card,
-    border: `1px solid ${selected ? designSystemTokens.semanticColors.buttons.primary.default : designSystemTokens.semanticColors.border.primary}`,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+    border: `1px solid ${selected ? designSystemTokens.semanticColors.button.primary.bg : designSystemTokens.semanticColors.color.border.primary}`,
     borderRadius: designSystemTokens.borderRadius.card,
     boxShadow: selected ? activeShadow : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: designSystemTokens.semanticColors.buttons.primary.default,
+        borderColor: designSystemTokens.semanticColors.button.primary.bg,
         boxShadow: activeShadow,
     },
     '&:focus-visible': {
-        borderColor: designSystemTokens.semanticColors.buttons.primary.default,
+        borderColor: designSystemTokens.semanticColors.button.primary.bg,
         ...focusRingStyles,
     },
     ...(disabled && {
@@ -1091,7 +1113,7 @@ const SmallRecipeCount = styles.styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.xxs), // 10px
     fontWeight: designSystemTokens.typography.fontWeight.semiBold, // 600
     lineHeight: 1.2,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     whiteSpace: 'nowrap',
 }));
 const SmallCardContent = styles.styled('div')(() => ({
@@ -1105,7 +1127,7 @@ const SmallTitle = styles.styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.h6), // 16px
     fontWeight: designSystemTokens.typography.fontWeight.semiBold, // 600
     lineHeight: 1.4,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     width: '100%',
 }));
 const SmallDescription = styles.styled('p')(({ theme }) => ({
@@ -1113,7 +1135,7 @@ const SmallDescription = styles.styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.xs), // 12px
     fontWeight: designSystemTokens.typography.fontWeight.regular, // 400
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     width: '100%',
     display: '-webkit-box',
     WebkitLineClamp: 2,
@@ -1130,12 +1152,10 @@ const LargeStyledCard = styles.styled(MuiCard, {
     // sourcing one side from `semanticColors` (which flips) and the other from a
     // primitive (which doesn't) puts light-mode text on a dark surface in dark
     // mode. `semanticColorsDark` is the literal-hex escape hatch for exactly this.
-    const activeBorderColor = isLight
-        ? designSystemTokens.semanticColors.buttons.primary.default
-        : designSystemTokens.colors.digitalGreen[300];
+    const activeBorderColor = isLight ? designSystemTokens.semanticColors.button.primary.bg : designSystemTokens.colors.digitalGreen[300];
     const defaultBorderColor = isLight
-        ? designSystemTokens.semanticColors.border.primary
-        : designSystemTokens.semanticColorsDark.border.primary;
+        ? designSystemTokens.semanticColors.color.border.primary
+        : designSystemTokens.semanticColorsDark.color.border.primary;
     return {
         width: 340,
         height: 162,
@@ -1145,7 +1165,9 @@ const LargeStyledCard = styles.styled(MuiCard, {
         alignItems: 'flex-start',
         padding: designSystemTokens.spacing.spacing_2,
         borderRadius: designSystemTokens.borderRadius.card,
-        backgroundColor: isLight ? designSystemTokens.semanticColors.surfaces.card : designSystemTokens.semanticColorsDark.surfaces.card,
+        backgroundColor: isLight
+            ? designSystemTokens.semanticColors.color.surface.raised
+            : designSystemTokens.semanticColorsDark.color.surface.raised,
         border: `1px solid ${defaultBorderColor}`,
         boxShadow: 'none',
         overflow: 'hidden',
@@ -1200,7 +1222,9 @@ const LargeHeaderTitle = styles.styled('span', {
     fontWeight: designSystemTokens.typography.fontWeight.semiBold,
     fontSize: designSystemTokens.typography.fontSize.h6,
     lineHeight: 1.4,
-    color: cardTheme === 'light' ? designSystemTokens.semanticColors.typography.body : designSystemTokens.semanticColorsDark.typography.body,
+    color: cardTheme === 'light'
+        ? designSystemTokens.semanticColors.color.text.primary
+        : designSystemTokens.semanticColorsDark.color.text.primary,
     flexShrink: 0,
 }));
 const LargeDescription = styles.styled('p', {
@@ -1210,7 +1234,9 @@ const LargeDescription = styles.styled('p', {
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     fontSize: designSystemTokens.typography.fontSize.xs,
     lineHeight: 1.5,
-    color: cardTheme === 'light' ? designSystemTokens.semanticColors.typography.body : designSystemTokens.semanticColorsDark.typography.body,
+    color: cardTheme === 'light'
+        ? designSystemTokens.semanticColors.color.text.primary
+        : designSystemTokens.semanticColorsDark.color.text.primary,
     margin: 0,
     minWidth: '100%',
     wordWrap: 'break-word',
@@ -1259,7 +1285,7 @@ const Label$4 = styles.styled('span')(({ theme, size = 'medium' }) => ({
             : designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
-    color: designSystemTokens.semanticColors.typography.input.default,
+    color: designSystemTokens.semanticColors.color.text.input,
 }));
 const HelperText$2 = styles.styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'xs'
@@ -1269,7 +1295,7 @@ const HelperText$2 = styles.styled('span')(({ theme, size = 'medium' }) => ({
             : designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
 }));
 // xs focus-ring radius — no matching design token (box corner comes from the icon)
 const FIGMA_XS_BORDER_RADIUS = 1;
@@ -1297,7 +1323,7 @@ const StyledCheckbox = styles.styled(Checkbox, {
         height: config.size,
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
-        color: designSystemTokens.semanticColors.border.strong,
+        color: designSystemTokens.semanticColors.color.border.strong,
         borderRadius: config.borderRadius,
         flexShrink: 0,
         // Suppress MUI's grey hover background
@@ -1323,11 +1349,11 @@ const StyledCheckbox = styles.styled(Checkbox, {
             cursor: 'not-allowed',
         },
         [`&.${Checkbox.checkboxClasses.disabled}:not(.${Checkbox.checkboxClasses.checked}):not(.${Checkbox.checkboxClasses.indeterminate})`]: {
-            color: designSystemTokens.semanticColors.border.primary,
+            color: designSystemTokens.semanticColors.color.border.primary,
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
-            outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+            outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
@@ -1454,20 +1480,20 @@ const StyledButtonBase = styles.styled(ButtonBase, {
         cursor: 'text',
         // Focus visible for keyboard navigation
         [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+            outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
             outlineOffset: 2,
         },
     };
     // Variant-specific styles
     const variantStyles = {
         outlined: {
-            backgroundColor: designSystemTokens.semanticColors.code.background,
-            color: designSystemTokens.semanticColors.typography.code.primary,
+            backgroundColor: designSystemTokens.semanticColors.code.bg,
+            color: designSystemTokens.semanticColors.color.text.code,
             border: 'none',
         },
         filled: {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.tooltip,
-            color: designSystemTokens.semanticColors.typography.tooltip.default,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.tooltip,
+            color: designSystemTokens.semanticColors.color.text.tooltip,
             border: 'none',
         },
     };
@@ -1509,15 +1535,15 @@ ModCodeSnippet.displayName = 'ModCodeSnippet';
  * they carry this surface themselves.
  */
 const panelSurfaceStyles = {
-    backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
 };
 const getDataGridHeaderStyles = () => {
     return {
         // Header cell container styles - from Figma: bg, border, padding
         // Height is set via density-specific selectors in DataGrid.tsx
         [`& .${xDataGrid.gridClasses.columnHeader}`]: {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.header,
-            borderBottom: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.header,
+            borderBottom: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
             paddingTop: `${designSystemTokens.spacing.spacing_1_1_2}px`,
             paddingBottom: `${designSystemTokens.spacing.spacing_1_1_2}px`,
             paddingLeft: `${designSystemTokens.spacing.spacing_2}px`,
@@ -1527,8 +1553,8 @@ const getDataGridHeaderStyles = () => {
         // Style the filler element to match header
         // Height is set via density-specific selectors in DataGrid.tsx
         [`& .${xDataGrid.gridClasses.filler}`]: {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.header,
-            borderBottom: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.header,
+            borderBottom: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
             boxSizing: 'border-box',
         },
         // Style the default MUI column header title text to match Figma
@@ -1537,14 +1563,14 @@ const getDataGridHeaderStyles = () => {
             fontSize: designSystemTokens.typography.fontSize.sm,
             fontWeight: designSystemTokens.typography.fontWeight.semiBold, // Always semiBold (600)
             lineHeight: 'normal',
-            color: designSystemTokens.semanticColors.typography.bodySecondary, // #6b7280 by default
+            color: designSystemTokens.semanticColors.color.text.secondary, // #6b7280 by default
             transition: 'color 0.2s',
             textOverflow: 'clip',
             whiteSpace: 'break-spaces',
         },
         // Change text color on hover
         [`& .${xDataGrid.gridClasses.columnHeader}:hover .${xDataGrid.gridClasses.columnHeaderTitle}`]: {
-            color: designSystemTokens.semanticColors.icons.default, // #1f2937 on hover
+            color: designSystemTokens.semanticColors.color.icon.default, // #1f2937 on hover
         },
         // Style the checkbox in header to match design system (16x16 from Figma)
         [`& .${xDataGrid.gridClasses.columnHeaderCheckbox}`]: {
@@ -1578,7 +1604,7 @@ const getDataGridHeaderStyles = () => {
                 '& svg': {
                     width: 16,
                     height: 16,
-                    color: designSystemTokens.semanticColors.icons.utility,
+                    color: designSystemTokens.semanticColors.color.icon.utility,
                 },
             },
         },
@@ -1586,16 +1612,16 @@ const getDataGridHeaderStyles = () => {
 };
 const getDataGridRowStyles = () => ({
     [`& .${xDataGrid.gridClasses.row}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.default,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.default,
     },
     [`& .${xDataGrid.gridClasses.row}:hover`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.hover,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.hover,
     },
     [`& .${xDataGrid.gridClasses.row}.Mui-selected`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.selected,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.selected,
     },
     [`& .${xDataGrid.gridClasses.row}.Mui-selected:hover`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.selectedHover,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.selectedHover,
     },
 });
 
@@ -1624,8 +1650,8 @@ const StyledSearchField = styles.styled(TextField)(({ theme }) => ({
         height: designSystemTokens.spacing.spacing_5,
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
         borderRadius: designSystemTokens.borderRadius.input,
-        backgroundColor: designSystemTokens.semanticColors.input.background,
-        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+        backgroundColor: designSystemTokens.semanticColors.input.bg,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         paddingTop: designSystemTokens.spacing.spacing_1,
         paddingBottom: designSystemTokens.spacing.spacing_1,
         paddingLeft: designSystemTokens.spacing.spacing_1_1_2,
@@ -1636,22 +1662,22 @@ const StyledSearchField = styles.styled(TextField)(({ theme }) => ({
         },
         [`& .${InputBase.inputBaseClasses.input}`]: {
             padding: 0,
-            color: designSystemTokens.semanticColors.typography.input.default,
+            color: designSystemTokens.semanticColors.color.text.input,
             '&::placeholder': {
-                color: designSystemTokens.semanticColors.typography.input.placeholder,
+                color: designSystemTokens.semanticColors.color.text.inputPlaceholder,
                 opacity: 1,
             },
         },
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.input.hoverBackground,
+            backgroundColor: designSystemTokens.semanticColors.input.bgHover,
         },
         [`&.${InputBase.inputBaseClasses.focused}`]: {
-            backgroundColor: designSystemTokens.semanticColors.input.background,
-            borderColor: designSystemTokens.semanticColors.buttons.primary.default,
+            backgroundColor: designSystemTokens.semanticColors.input.bg,
+            borderColor: designSystemTokens.semanticColors.button.primary.bg,
         },
     },
     [`& .${InputAdornment.inputAdornmentClasses.root}`]: {
-        color: designSystemTokens.semanticColors.icons.placeholder,
+        color: designSystemTokens.semanticColors.color.icon.placeholder,
         '& svg': {
             width: 20,
             height: 20,
@@ -1674,14 +1700,14 @@ const MenuItemContent$1 = styles.styled('div')(() => ({
     borderRadius: MENU_ITEM_BORDER_RADIUS,
     width: '100%',
     '&:hover': {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
     },
 }));
 const MenuItemLabel = styles.styled('span')(({ theme, fontWeight = 500 }) => ({
     fontSize: theme.typography.pxToRem(16),
     fontWeight,
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     whiteSpace: 'nowrap',
 }));
 const DividerContainer = styles.styled('div')(() => ({
@@ -1689,7 +1715,7 @@ const DividerContainer = styles.styled('div')(() => ({
     paddingBottom: designSystemTokens.spacing.spacing_1_2,
 }));
 const StyledDivider$1 = styles.styled(Divider)(() => ({
-    borderColor: designSystemTokens.semanticColors.border.primary,
+    borderColor: designSystemTokens.semanticColors.color.border.primary,
 }));
 const FooterRow = styles.styled(Box)(() => ({
     display: 'flex',
@@ -1701,16 +1727,16 @@ const FooterRow = styles.styled(Box)(() => ({
 const ResetButton = styles.styled(Button)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(16),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
-    color: designSystemTokens.semanticColors.buttons.primary.default,
+    color: designSystemTokens.semanticColors.button.primary.bg,
     textTransform: 'none',
     padding: designSystemTokens.spacing.spacing_1,
     minWidth: 'auto',
     '&:hover': {
         backgroundColor: 'transparent',
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
     },
     '&:disabled': {
-        color: designSystemTokens.semanticColors.typography.button.disabled,
+        color: designSystemTokens.semanticColors.button.fgDisabled,
     },
 }));
 const ModDataGridColumnsPanel = ({ showSearch = false, 
@@ -1774,7 +1800,7 @@ const StyledMenuItem = styles.styled(MenuItem)(({ theme }) => ({
     minHeight: designSystemTokens.spacing.spacing_5,
     gap: designSystemTokens.spacing.spacing_2,
     borderRadius: 0,
-    color: designSystemTokens.semanticColors.icons.default,
+    color: designSystemTokens.semanticColors.color.icon.default,
     textDecoration: 'none',
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
@@ -1783,19 +1809,19 @@ const StyledMenuItem = styles.styled(MenuItem)(({ theme }) => ({
         duration: theme.transitions.duration.shortest,
     }),
     '&:hover': {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
     },
     [`&.${MenuItem.menuItemClasses.selected}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
         },
     },
     [`&.${MenuItem.menuItemClasses.disabled}`]: {
         opacity: 0.5,
     },
     [`&.${MenuItem.menuItemClasses.focusVisible}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
     },
 }));
 const MenuItemContent = styles.styled('div')({
@@ -1810,7 +1836,7 @@ const IconWrapper$1 = styles.styled('span')(({ theme }) => ({
     justifyContent: 'center',
     flexShrink: 0,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.h4),
-    color: designSystemTokens.semanticColors.icons.default,
+    color: designSystemTokens.semanticColors.color.icon.default,
 }));
 const LabelContainer$3 = styles.styled('div')({
     flex: 1,
@@ -1820,24 +1846,24 @@ const LabelContainer$3 = styles.styled('div')({
     minWidth: 0,
 });
 const Label$3 = styles.styled('span')({
-    color: designSystemTokens.semanticColors.icons.default,
+    color: designSystemTokens.semanticColors.color.icon.default,
     flexShrink: 0,
 });
 const SecondaryLabel = styles.styled('span')({
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     flexShrink: 0,
 });
 const Shortcut = styles.styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.xs),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
     marginLeft: 'auto',
     flexShrink: 0,
-    border: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
     borderRadius: designSystemTokens.borderRadius.xS,
     padding: `${designSystemTokens.spacing.spacing_1_4}px ${designSystemTokens.spacing.spacing_3_4}px`,
-    backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
 }));
 /**
  * ModMenuItem - Menu item component based on MUI MenuItem
@@ -1882,22 +1908,22 @@ ModMenuItem.displayName = 'ModMenuItem';
  * Custom chevron icon for select
  * Must accept props from MUI Select to work correctly
  */
-const ChevronDownIcon = (props) => (jsxRuntime.jsx(lucideReact.ChevronDown, { ...props, size: designSystemTokens.spacing.spacing_2_1_2, color: designSystemTokens.semanticColors.typography.input.default, style: { ...props.style } }));
+const ChevronDownIcon = (props) => (jsxRuntime.jsx(lucideReact.ChevronDown, { ...props, size: designSystemTokens.spacing.spacing_2_1_2, color: designSystemTokens.semanticColors.color.text.input, style: { ...props.style } }));
 /**
  * Styled Select component with design system styling
  */
 const StyledSelect = styles.styled(MuiSelect)({
     minHeight: designSystemTokens.spacing.spacing_5,
-    backgroundColor: designSystemTokens.semanticColors.input.background,
-    border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+    backgroundColor: designSystemTokens.semanticColors.input.bg,
+    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
     borderRadius: `${designSystemTokens.borderRadius.input}px`,
     '&:hover': {
-        backgroundColor: designSystemTokens.semanticColors.input.hoverBackground,
-        borderColor: designSystemTokens.semanticColors.border.primary,
+        backgroundColor: designSystemTokens.semanticColors.input.bgHover,
+        borderColor: designSystemTokens.semanticColors.color.border.primary,
     },
     '&.Mui-focused': {
-        backgroundColor: designSystemTokens.semanticColors.input.background,
-        borderColor: designSystemTokens.semanticColors.buttons.primary.default,
+        backgroundColor: designSystemTokens.semanticColors.input.bg,
+        borderColor: designSystemTokens.semanticColors.button.primary.bg,
     },
     '&::before': {
         display: 'none',
@@ -1912,7 +1938,7 @@ const StyledSelect = styles.styled(MuiSelect)({
         paddingRight: designSystemTokens.spacing.spacing_5,
         fontSize: designSystemTokens.typography.fontSize.sm,
         fontWeight: designSystemTokens.typography.fontWeight.regular,
-        color: designSystemTokens.semanticColors.typography.input.default,
+        color: designSystemTokens.semanticColors.color.text.input,
     },
     [`& .${MuiSelect.selectClasses.icon}`]: {
         right: designSystemTokens.spacing.spacing_1_1_2,
@@ -1934,37 +1960,34 @@ const StyledSelect = styles.styled(MuiSelect)({
  * </ModSelect>
  * ```
  */
-const ModSelect = (props) => {
-    const paperSlotProps = props.MenuProps?.slotProps?.paper;
-    const incomingPaperSx = typeof paperSlotProps === 'function' ? undefined : paperSlotProps?.sx;
-    return (jsxRuntime.jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
-            ...props.MenuProps,
-            slotProps: {
-                ...props.MenuProps?.slotProps,
-                paper: {
-                    sx: {
-                        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
-                        borderRadius: `${designSystemTokens.borderRadius.s}px`,
-                        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
-                        boxShadow: `${designSystemTokens.shadows.dropdown.x}px ${designSystemTokens.shadows.dropdown.y}px ${designSystemTokens.shadows.dropdown.blur}px ${designSystemTokens.shadows.dropdown.spread}px ${designSystemTokens.shadows.dropdown.shadow}`,
-                        marginTop: 1,
-                        ...incomingPaperSx,
-                    },
+const ModSelect = (props) => (jsxRuntime.jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
+        ...props.MenuProps,
+        slotProps: {
+            ...props.MenuProps?.slotProps,
+            // Caller wins, caller `sx` last — and unlike a spread, handles `sx` arrays and the
+            // callback form of `slotProps.paper`.
+            paper: utils.mergeSlotProps(props.MenuProps?.slotProps?.paper, {
+                sx: {
+                    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+                    borderRadius: `${designSystemTokens.borderRadius.s}px`,
+                    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
+                    boxShadow: `${designSystemTokens.shadows.dropdown.x}px ${designSystemTokens.shadows.dropdown.y}px ${designSystemTokens.shadows.dropdown.blur}px ${designSystemTokens.shadows.dropdown.spread}px ${designSystemTokens.shadows.dropdown.shadow}`,
+                    marginTop: 1,
                 },
-            },
-        } }));
-};
+            }),
+        },
+    } }));
 ModSelect.displayName = 'ModSelect';
 
 /**
  * Icon components for DataGrid filter panel slots
  * These must be passed to the DataGrid's slots prop
  */
-const ModDataGridFilterPanelAddIcon = () => (jsxRuntime.jsx(lucideReact.Plus, { size: designSystemTokens.spacing.spacing_2, color: designSystemTokens.semanticColors.buttons.tertiary.default }));
+const ModDataGridFilterPanelAddIcon = () => (jsxRuntime.jsx(lucideReact.Plus, { size: designSystemTokens.spacing.spacing_2, color: designSystemTokens.semanticColors.button.tertiary.fg }));
 ModDataGridFilterPanelAddIcon.displayName = 'ModDataGridFilterPanelAddIcon';
-const ModDataGridFilterPanelDeleteIcon = () => (jsxRuntime.jsx(lucideReact.X, { size: designSystemTokens.spacing.spacing_2_1_2, color: designSystemTokens.semanticColors.icons.default }));
+const ModDataGridFilterPanelDeleteIcon = () => (jsxRuntime.jsx(lucideReact.X, { size: designSystemTokens.spacing.spacing_2_1_2, color: designSystemTokens.semanticColors.color.icon.default }));
 ModDataGridFilterPanelDeleteIcon.displayName = 'ModDataGridFilterPanelDeleteIcon';
-const ModDataGridFilterPanelRemoveAllIcon = () => (jsxRuntime.jsx(lucideReact.Trash2, { size: designSystemTokens.spacing.spacing_2, color: designSystemTokens.semanticColors.buttons.tertiary.default }));
+const ModDataGridFilterPanelRemoveAllIcon = () => (jsxRuntime.jsx(lucideReact.Trash2, { size: designSystemTokens.spacing.spacing_2, color: designSystemTokens.semanticColors.button.tertiary.fg }));
 ModDataGridFilterPanelRemoveAllIcon.displayName = 'ModDataGridFilterPanelRemoveAllIcon';
 /**
  * Base styled GridFilterPanel with design system styling
@@ -2013,20 +2036,20 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}`]: {
         position: 'relative',
         minHeight: designSystemTokens.spacing.spacing_5,
-        backgroundColor: designSystemTokens.semanticColors.input.background,
-        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+        backgroundColor: designSystemTokens.semanticColors.input.bg,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         borderRadius: `${designSystemTokens.borderRadius.input}px`,
         fontSize: designSystemTokens.typography.fontSize.default,
         fontWeight: designSystemTokens.typography.fontWeight.regular,
-        color: designSystemTokens.semanticColors.typography.input.default,
+        color: designSystemTokens.semanticColors.color.text.input,
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}:hover`]: {
-        backgroundColor: designSystemTokens.semanticColors.input.hoverBackground,
-        borderColor: designSystemTokens.semanticColors.border.primary,
+        backgroundColor: designSystemTokens.semanticColors.input.bgHover,
+        borderColor: designSystemTokens.semanticColors.color.border.primary,
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}.${InputBase.inputBaseClasses.focused}`]: {
-        backgroundColor: designSystemTokens.semanticColors.input.background,
-        borderColor: designSystemTokens.semanticColors.border.primary,
+        backgroundColor: designSystemTokens.semanticColors.input.bg,
+        borderColor: designSystemTokens.semanticColors.color.border.primary,
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}::before`]: {
         display: 'none',
@@ -2041,9 +2064,9 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
         paddingRight: designSystemTokens.spacing.spacing_1_1_2,
         fontSize: designSystemTokens.typography.fontSize.default,
         fontWeight: designSystemTokens.typography.fontWeight.regular,
-        color: designSystemTokens.semanticColors.typography.input.default,
+        color: designSystemTokens.semanticColors.color.text.input,
         '&::placeholder': {
-            color: designSystemTokens.semanticColors.typography.input.placeholder,
+            color: designSystemTokens.semanticColors.color.text.inputPlaceholder,
             opacity: 1,
         },
     },
@@ -2058,24 +2081,28 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
     [`& .${xDataGrid.gridClasses.filterForm} .${FormLabel.formLabelClasses.root}`]: {
         fontSize: designSystemTokens.typography.fontSize.sm,
         fontWeight: designSystemTokens.typography.fontWeight.medium,
-        color: designSystemTokens.semanticColors.typography.input.label,
+        color: designSystemTokens.semanticColors.color.text.inputLabel,
         marginBottom: designSystemTokens.spacing.spacing_1_2,
         position: 'static',
         transform: 'none',
     },
-    [`& .${xDataGrid.gridClasses.filterForm} .${InputLabel.inputLabelClasses.root}`]: {
+    [`& .${xDataGrid.gridClasses.filterForm} .${MuiInputLabel.inputLabelClasses.root}`]: {
         fontSize: designSystemTokens.typography.fontSize.sm,
         fontWeight: designSystemTokens.typography.fontWeight.medium,
-        color: designSystemTokens.semanticColors.typography.input.label,
+        color: designSystemTokens.semanticColors.color.text.inputLabel,
         marginBottom: designSystemTokens.spacing.spacing_1_2,
         position: 'static',
         transform: 'none',
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${FormLabel.formLabelClasses.root}.${FormLabel.formLabelClasses.focused}`]: {
-        color: designSystemTokens.semanticColors.typography.input.label,
+        color: designSystemTokens.semanticColors.color.text.inputLabel,
+    },
+    [`& .${xDataGrid.gridClasses.filterForm} .${MuiInputLabel.inputLabelClasses.root}.${MuiInputLabel.inputLabelClasses.focused}`]: {
+        color: designSystemTokens.semanticColors.color.text.inputLabel,
     },
-    [`& .${xDataGrid.gridClasses.filterForm} .${InputLabel.inputLabelClasses.root}.${InputLabel.inputLabelClasses.focused}`]: {
-        color: designSystemTokens.semanticColors.typography.input.label,
+    // Reclaim the 16px MUI's standard Input reserves for a floating label; these sit statically.
+    [`& .${xDataGrid.gridClasses.filterForm} label + .${InputBase.inputBaseClasses.root}`]: {
+        marginTop: 0,
     },
     // Remove fieldset/legend
     '& fieldset': {
@@ -2099,13 +2126,13 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
         minHeight: 'auto',
         height: 'auto',
         gap: designSystemTokens.spacing.spacing_1_2,
-        backgroundColor: designSystemTokens.semanticColors.buttons.secondary.defaultBackground,
-        color: designSystemTokens.semanticColors.typography.input.default,
-        border: `1px solid ${designSystemTokens.semanticColors.buttons.secondary.defaultBorder}`,
+        backgroundColor: designSystemTokens.semanticColors.button.secondary.bg,
+        color: designSystemTokens.semanticColors.color.text.input,
+        border: `1px solid ${designSystemTokens.semanticColors.button.secondary.border}`,
     },
     [`& .${xDataGrid.gridClasses.panelFooter} .${Button.buttonClasses.root}:first-child:hover`]: {
-        backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
-        borderColor: designSystemTokens.semanticColors.buttons.secondary.defaultBorder,
+        backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
+        borderColor: designSystemTokens.semanticColors.button.secondary.border,
     },
     // Clear all button (second button) - styled to match ModButton link variant
     [`& .${xDataGrid.gridClasses.panelFooter} .${Button.buttonClasses.root}:nth-child(2)`]: {
@@ -2117,39 +2144,58 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
         textTransform: 'none',
         minHeight: 'auto',
         backgroundColor: 'transparent',
-        color: designSystemTokens.semanticColors.buttons.tertiary.default,
+        color: designSystemTokens.semanticColors.button.tertiary.fg,
         border: 'none',
         [`& .${Button.buttonClasses.startIcon}`]: {
             display: 'none', // Hide the trash icon
         },
         '&:hover': {
             backgroundColor: 'transparent',
-            color: designSystemTokens.semanticColors.buttons.tertiary.hover,
+            color: designSystemTokens.semanticColors.button.tertiary.fgHover,
         },
     },
     // Icon buttons (delete/trash icon)
     [`& .${xDataGrid.gridClasses.filterForm} .${IconButton.iconButtonClasses.root}`]: {
         width: designSystemTokens.spacing.spacing_5_1_2,
         height: designSystemTokens.spacing.spacing_5_1_2,
-        color: designSystemTokens.semanticColors.icons.default,
+        color: designSystemTokens.semanticColors.color.icon.default,
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${IconButton.iconButtonClasses.root}:hover`]: {
-        backgroundColor: designSystemTokens.semanticColors.input.hoverBackground,
+        backgroundColor: designSystemTokens.semanticColors.input.bgHover,
     },
 });
 StyledGridFilterPanel.displayName = 'StyledGridFilterPanel';
 /**
- * ModSelect, typed for the DataGrid `baseSelect` slot.
- *
- * The grid's own `SelectProps` shares MUI's prop names and semantics, but types
- * `onChange` as a bare `ChangeEventHandler` and adds `aria-*`/`data-*` index
- * signatures — structurally incompatible, behaviourally identical. Asserted
- * once here rather than at every call site; #721 tracks replacing the assertion
- * with a real adapter. Intersected rather than replaced so direct consumers keep
- * `ModSelectProps` — casting to the slot type alone drops `variant`, `MenuProps`
- * and the `SelectChangeEvent` signature.
+ * ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
+ *
+ * Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
+ * can be diffed on upgrade.
+ *
+ * @example
+ * ```tsx
+ * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
+ * ```
  */
-const ModDataGridSelect = ModSelect;
+const ModDataGridSelect = React.forwardRef(function ModDataGridSelect({ id, label, labelId, disabled, fullWidth, size, style, slotProps, material, onChange, onClose, onKeyDown, ...rest }, ref) {
+    const theme = styles.useTheme();
+    const hasLabel = label !== undefined;
+    // The grid omits `size` in edit cells, where MUI's adapter falls back to the theme's TextField
+    // default — without this the select renders medium beside small fields.
+    const computedSize = size ?? theme.components?.MuiTextField?.defaultProps?.size;
+    return (jsxRuntime.jsxs(FormControl
+    // Bridges Ref<HTMLElement> to FormControl's Ref<HTMLDivElement>; neither direct form typechecks.
+    , { 
+        // Bridges Ref<HTMLElement> to FormControl's Ref<HTMLDivElement>; neither direct form typechecks.
+        ref: utils.useForkRef(ref), disabled: disabled, fullWidth: fullWidth, size: computedSize, style: style, children: [hasLabel && (jsxRuntime.jsx(MuiInputLabel, { id: labelId, htmlFor: id, variant: "standard", shrink: true, children: label })), jsxRuntime.jsx(ModSelect, { ...rest, id: id, label: label, labelId: hasLabel ? labelId : undefined, size: computedSize, displayEmpty: true, inputProps: slotProps?.htmlInput, 
+                // The grid types this as a ChangeEventHandler; MUI emits a SelectChangeEvent. MUI's own
+                // adapter forwards it unchanged, so the divergence is only in the type.
+                onChange: onChange, MenuProps: {
+                    // Must stay absent when absent: MUI spreads MenuProps over its own `onClose: handleClose`,
+                    // so an explicit `undefined` stops Escape and backdrop click closing the menu.
+                    ...(onClose && { onClose }),
+                    slotProps: { paper: { onKeyDown } },
+                }, ...material })] }));
+});
 /**
  * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
  *
@@ -2191,13 +2237,13 @@ ModDataGridFilterPanel.displayName = 'ModDataGridFilterPanel';
  * Use these with DataGrid's slots API to replace default sort indicators.
  */
 function SortedDescendingIcon() {
-    return jsxRuntime.jsx(lucideReact.ArrowDown, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
+    return jsxRuntime.jsx(lucideReact.ArrowDown, { size: 16, color: designSystemTokens.semanticColors.color.icon.utility });
 }
 function SortedAscendingIcon() {
-    return jsxRuntime.jsx(lucideReact.ArrowUp, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
+    return jsxRuntime.jsx(lucideReact.ArrowUp, { size: 16, color: designSystemTokens.semanticColors.color.icon.utility });
 }
 function UnsortedIcon() {
-    return jsxRuntime.jsx(lucideReact.ChevronsUpDown, { size: 16, color: designSystemTokens.semanticColors.icons.utility });
+    return jsxRuntime.jsx(lucideReact.ChevronsUpDown, { size: 16, color: designSystemTokens.semanticColors.color.icon.utility });
 }
 
 /**
@@ -2208,7 +2254,7 @@ function UnsortedIcon() {
  */
 const ModGridPanel = styles.styled(xDataGrid.GridPanel)({
     [`& .${xDataGrid.gridPanelClasses.paper}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
     },
 });
 /**
@@ -2284,27 +2330,27 @@ function ModDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         // See: https://github.com/mui/mui-x/issues/20107
         // This must be set to prevent scroll shadow artifacts
         [`& .${xDataGrid.gridClasses.main}`]: {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.background,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.default,
         },
         // White background for empty/loading overlays
         [`& .${xDataGrid.gridClasses.overlay}`]: {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.background,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.default,
         },
         // The root keeps MUI's background.paper (#fff), which the note above
         // requires us to leave alone. Everything outside `main` therefore showed
         // white under [data-theme="dark"] — the footer, and the filler strips
         // beyond the last column and next to the scrollbar.
         [`& .${xDataGrid.gridClasses.footerContainer}`]: {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.background,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.default,
         },
         // `&&` doubles specificity: MUI paints the filler strips itself, so a
         // single-class rule loses to its own.
         [`&& .${xDataGrid.gridClasses.filler}, && .${xDataGrid.gridClasses.scrollbarFiller}`]: {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.background,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.default,
         },
         ...getDataGridHeaderStyles(),
         ...getDataGridRowStyles(),
-        border: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         // Target `& svg` (not `.MuiSvgIcon-root`) to match the lucide icons
         // ModCheckbox renders, mirroring the header rule below.
         // flexShrink: 0 stops the icon collapsing to 0 width when the checkbox
@@ -2359,7 +2405,7 @@ ModDataGrid.displayName = 'ModDataGrid';
  * ```
  */
 function ModDataGridColumnsButton() {
-    return (jsxRuntime.jsx(xDataGrid.ColumnsPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { render: jsxRuntime.jsxs(ModButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(lucideReact.Columns3, { size: 16, color: designSystemTokens.semanticColors.buttons.primary.default }), "Columns"] }) }) }));
+    return (jsxRuntime.jsx(xDataGrid.ColumnsPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { render: jsxRuntime.jsxs(ModButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(lucideReact.Columns3, { size: 16, color: designSystemTokens.semanticColors.button.primary.bg }), "Columns"] }) }) }));
 }
 ModDataGridColumnsButton.displayName = 'ModDataGridColumnsButton';
 
@@ -2385,69 +2431,69 @@ const sizeStyles$1 = {
 };
 const outlinedColorStyles = {
     default: {
-        backgroundColor: designSystemTokens.semanticColors.status.neutral.light,
-        color: designSystemTokens.semanticColors.status.neutral.dark,
-        borderColor: designSystemTokens.semanticColors.status.neutral.transparent,
+        backgroundColor: designSystemTokens.semanticColors.color.status.neutral.bg,
+        color: designSystemTokens.semanticColors.color.status.neutral.fg,
+        borderColor: designSystemTokens.semanticColors.color.status.neutral.tint,
     },
     error: {
-        backgroundColor: designSystemTokens.semanticColors.status.error.light,
-        color: designSystemTokens.semanticColors.status.error.dark,
-        borderColor: designSystemTokens.semanticColors.status.error.transparent,
+        backgroundColor: designSystemTokens.semanticColors.color.status.error.bg,
+        color: designSystemTokens.semanticColors.color.status.error.fg,
+        borderColor: designSystemTokens.semanticColors.color.status.error.tint,
     },
     warning: {
-        backgroundColor: designSystemTokens.semanticColors.status.warning.light,
-        color: designSystemTokens.semanticColors.status.warning.dark,
-        borderColor: designSystemTokens.semanticColors.status.warning.transparent,
+        backgroundColor: designSystemTokens.semanticColors.color.status.warning.bg,
+        color: designSystemTokens.semanticColors.color.status.warning.fg,
+        borderColor: designSystemTokens.semanticColors.color.status.warning.tint,
     },
     success: {
-        backgroundColor: designSystemTokens.semanticColors.status.success.light,
-        color: designSystemTokens.semanticColors.status.success.dark,
-        borderColor: designSystemTokens.semanticColors.status.success.transparent,
+        backgroundColor: designSystemTokens.semanticColors.color.status.success.bg,
+        color: designSystemTokens.semanticColors.color.status.success.fg,
+        borderColor: designSystemTokens.semanticColors.color.status.success.tint,
     },
     info: {
-        backgroundColor: designSystemTokens.semanticColors.status.info.light,
-        color: designSystemTokens.semanticColors.status.info.dark,
-        borderColor: designSystemTokens.semanticColors.status.info.transparent,
+        backgroundColor: designSystemTokens.semanticColors.color.status.info.bg,
+        color: designSystemTokens.semanticColors.color.status.info.fg,
+        borderColor: designSystemTokens.semanticColors.color.status.info.tint,
     },
     violet: {
-        backgroundColor: designSystemTokens.semanticColors.status.active.light,
-        color: designSystemTokens.semanticColors.status.active.dark,
-        borderColor: designSystemTokens.semanticColors.status.active.transparent,
+        backgroundColor: designSystemTokens.semanticColors.color.status.active.bg,
+        color: designSystemTokens.semanticColors.color.status.active.fg,
+        borderColor: designSystemTokens.semanticColors.color.status.active.tint,
     },
     beta: {
         backgroundColor: 'transparent',
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
         borderColor: 'transparent',
     },
 };
 const filledColorStyles = {
     default: {
-        backgroundColor: designSystemTokens.semanticColors.status.neutral.dark,
-        color: designSystemTokens.semanticColors.status.neutral.light,
+        backgroundColor: designSystemTokens.semanticColors.color.status.neutral.fg,
+        color: designSystemTokens.semanticColors.color.status.neutral.bg,
     },
     error: {
-        backgroundColor: designSystemTokens.semanticColors.status.error.dark,
-        color: designSystemTokens.semanticColors.status.error.light,
+        backgroundColor: designSystemTokens.semanticColors.color.status.error.fg,
+        color: designSystemTokens.semanticColors.color.status.error.bg,
     },
     warning: {
-        backgroundColor: designSystemTokens.semanticColors.status.warning.dark,
-        color: designSystemTokens.semanticColors.status.warning.light,
+        backgroundColor: designSystemTokens.semanticColors.color.status.warning.fg,
+        color: designSystemTokens.semanticColors.color.status.warning.bg,
     },
     success: {
-        backgroundColor: designSystemTokens.semanticColors.status.success.dark,
-        color: designSystemTokens.semanticColors.status.success.light,
+        backgroundColor: designSystemTokens.semanticColors.color.status.success.fg,
+        color: designSystemTokens.semanticColors.color.status.success.bg,
     },
     info: {
-        backgroundColor: designSystemTokens.semanticColors.status.info.dark,
-        color: designSystemTokens.semanticColors.status.info.light,
+        backgroundColor: designSystemTokens.semanticColors.color.status.info.fg,
+        color: designSystemTokens.semanticColors.color.status.info.bg,
     },
     violet: {
-        backgroundColor: designSystemTokens.semanticColors.status.active.dark,
-        color: designSystemTokens.semanticColors.status.active.light,
+        backgroundColor: designSystemTokens.semanticColors.color.status.active.fg,
+        color: designSystemTokens.semanticColors.color.status.active.bg,
     },
     beta: {
         backgroundColor: 'transparent',
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
     },
 };
 const StyledChip$2 = styles.styled(Chip, {
@@ -2501,7 +2547,7 @@ function ModDataGridFiltersButton() {
     const filterModel = xDataGrid.useGridSelector(apiRef, xDataGrid.gridFilterModelSelector);
     const activeFilters = filterModel.items.filter(item => item.value != null && item.value !== '');
     const filterCount = activeFilters.length;
-    return (jsxRuntime.jsx(xDataGrid.FilterPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { render: jsxRuntime.jsxs(ModButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(lucideReact.ListFilter, { size: 16, color: designSystemTokens.semanticColors.buttons.primary.default }), "Filters", filterCount > 0 && (jsxRuntime.jsx(ModTag, { size: "medium", variant: "filled", intent: "info", label: String(filterCount) }))] }) }) }));
+    return (jsxRuntime.jsx(xDataGrid.FilterPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { render: jsxRuntime.jsxs(ModButton, { variant: "secondary", size: "small", children: [jsxRuntime.jsx(lucideReact.ListFilter, { size: 16, color: designSystemTokens.semanticColors.button.primary.bg }), "Filters", filterCount > 0 && (jsxRuntime.jsx(ModTag, { size: "medium", variant: "filled", intent: "info", label: String(filterCount) }))] }) }) }));
 }
 ModDataGridFiltersButton.displayName = 'ModDataGridFiltersButton';
 
@@ -2536,14 +2582,14 @@ const LabelText$1 = styles.styled('p')({
     fontSize: designSystemTokens.typography.fontSize.sm,
     fontWeight: designSystemTokens.typography.fontWeight.semiBold, // Always semiBold (600)
     lineHeight: 'normal',
-    color: designSystemTokens.semanticColors.typography.bodySecondary, // #6b7280 by default
+    color: designSystemTokens.semanticColors.color.text.secondary, // #6b7280 by default
     whiteSpace: 'nowrap',
     margin: 0,
     padding: 0,
     transition: 'color 0.2s',
     // Hover state - changes to primary text color
     '&:hover': {
-        color: designSystemTokens.semanticColors.icons.default, // #1f2937 on hover
+        color: designSystemTokens.semanticColors.color.icon.default, // #1f2937 on hover
     },
 });
 const IconWrapper = styles.styled('div')({
@@ -2556,7 +2602,7 @@ const IconWrapper = styles.styled('div')({
     '& svg': {
         width: 16,
         height: 16,
-        color: designSystemTokens.semanticColors.icons.utility,
+        color: designSystemTokens.semanticColors.color.icon.utility,
     },
 });
 function ModDataGridHeaderLabel({ children, helpTooltip, className, }) {
@@ -2595,9 +2641,9 @@ const StyledNavButton = styles.styled(IconButton, {
     };
     const sizeStyles = sizeConfig[size];
     const activeNavStyles = {
-        backgroundColor: designSystemTokens.semanticColors.icons.pressedBackground,
+        backgroundColor: designSystemTokens.semanticColors.color.icon.bgPressed,
         borderColor: 'transparent',
-        color: designSystemTokens.semanticColors.buttons.primary.pressed,
+        color: designSystemTokens.semanticColors.button.primary.bgPressed,
     };
     return {
         width: sizeStyles.width,
@@ -2608,25 +2654,25 @@ const StyledNavButton = styles.styled(IconButton, {
             duration: theme.transitions.duration.short,
         }),
         '&:focus-visible': {
-            outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+            outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
             outlineOffset: 2,
         },
         // Nav styles
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
-        color: designSystemTokens.semanticColors.icons.default,
-        border: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+        color: designSystemTokens.semanticColors.color.icon.default,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.input.hoverBackground,
-            borderColor: designSystemTokens.semanticColors.border.primary,
-            color: designSystemTokens.semanticColors.icons.default,
+            backgroundColor: designSystemTokens.semanticColors.input.bgHover,
+            borderColor: designSystemTokens.semanticColors.color.border.primary,
+            color: designSystemTokens.semanticColors.color.icon.default,
         },
         '&:active': activeNavStyles,
         [`&.${IconButton.iconButtonClasses.disabled}`]: {
             cursor: 'not-allowed',
             pointerEvents: 'auto',
-            backgroundColor: designSystemTokens.semanticColors.surfaces.white,
-            borderColor: designSystemTokens.semanticColors.border.secondary,
-            color: designSystemTokens.semanticColors.icons.disabled,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+            borderColor: designSystemTokens.semanticColors.color.border.primary,
+            color: designSystemTokens.semanticColors.color.icon.disabled,
             opacity: 0.5,
         },
         ...(active ? activeNavStyles : {}),
@@ -2703,80 +2749,80 @@ const defaultRangeShortcuts = [
 // Styled DatePicker with design system tokens
 const StyledDatePicker = styles.styled(DatePicker.DatePicker)(({ theme }) => ({
     [`& .${internals.pickerPopperClasses.paper}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.card,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
         boxShadow: `${designSystemTokens.shadows.dropdown.x}px ${designSystemTokens.shadows.dropdown.y}px ${designSystemTokens.shadows.dropdown.blur}px ${designSystemTokens.shadows.dropdown.spread}px ${designSystemTokens.shadows.dropdown.shadow}`,
         borderRadius: `${designSystemTokens.borderRadius.s}px`,
     },
     [`& .${DateCalendar.dayCalendarClasses.weekDayLabel}`]: {
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
         fontWeight: designSystemTokens.typography.fontWeight.medium,
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
     },
     [`& .${PickerDay.pickerDayClasses.root}`]: {
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
         borderRadius: designSystemTokens.borderRadius.l,
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.icons.hoverBackground,
+            backgroundColor: designSystemTokens.semanticColors.color.icon.bgHover,
         },
         '&.Mui-selected': {
-            backgroundColor: designSystemTokens.semanticColors.icons.active,
-            color: designSystemTokens.semanticColors.surfaces.white,
+            backgroundColor: designSystemTokens.semanticColors.color.icon.active,
+            color: designSystemTokens.semanticColors.color.surface.raised,
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.icons.active,
+                backgroundColor: designSystemTokens.semanticColors.color.icon.active,
             },
         },
         [`&.${PickerDay.pickerDayClasses.today}`]: {
-            border: `2px solid ${designSystemTokens.semanticColors.border.strong}`,
+            border: `2px solid ${designSystemTokens.semanticColors.color.border.strong}`,
             backgroundColor: 'transparent',
         },
     },
     [`& .${PickersCalendarHeader.pickersCalendarHeaderClasses.label}`]: {
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
         fontWeight: designSystemTokens.typography.fontWeight.semiBold,
-        color: designSystemTokens.semanticColors.typography.body,
+        color: designSystemTokens.semanticColors.color.text.primary,
     },
 }));
 // Styled DateRangePicker with design system tokens
 const StyledDateRangePicker = styles.styled(DateRangePicker.DateRangePicker)(({ theme }) => ({
     [`& .${internals.pickerPopperClasses.paper}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.card,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
         boxShadow: `${designSystemTokens.shadows.dropdown.x}px ${designSystemTokens.shadows.dropdown.y}px ${designSystemTokens.shadows.dropdown.blur}px ${designSystemTokens.shadows.dropdown.spread}px ${designSystemTokens.shadows.dropdown.shadow}`,
         borderRadius: `${designSystemTokens.borderRadius.s}px`,
     },
     [`& .${DateCalendar.dayCalendarClasses.weekDayLabel}`]: {
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
         fontWeight: designSystemTokens.typography.fontWeight.medium,
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
     },
     [`& .${DateRangePickerDay.dateRangePickerDayClasses.root}`]: {
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
         borderRadius: designSystemTokens.borderRadius.l,
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.icons.hoverBackground,
+            backgroundColor: designSystemTokens.semanticColors.color.icon.bgHover,
         },
         '&.Mui-selected': {
-            backgroundColor: designSystemTokens.semanticColors.icons.active,
-            color: designSystemTokens.semanticColors.surfaces.white,
+            backgroundColor: designSystemTokens.semanticColors.color.icon.active,
+            color: designSystemTokens.semanticColors.color.surface.raised,
         },
     },
     [`& .${DateRangePickerDay.dateRangePickerDayClasses.insideSelection}`]: {
-        backgroundColor: designSystemTokens.semanticColors.icons.hoverBackground,
-        color: designSystemTokens.semanticColors.typography.input.default,
+        backgroundColor: designSystemTokens.semanticColors.color.icon.bgHover,
+        color: designSystemTokens.semanticColors.color.text.input,
     },
     [`& .${DateRangePickerDay.dateRangePickerDayClasses.selectionStart}, & .${DateRangePickerDay.dateRangePickerDayClasses.selectionEnd}`]: {
-        backgroundColor: designSystemTokens.semanticColors.icons.active,
+        backgroundColor: designSystemTokens.semanticColors.color.icon.active,
     },
     [`& .${PickersCalendarHeader.pickersCalendarHeaderClasses.label}`]: {
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
         fontWeight: designSystemTokens.typography.fontWeight.semiBold,
-        color: designSystemTokens.semanticColors.typography.body,
+        color: designSystemTokens.semanticColors.color.text.primary,
     },
 }));
-const ClearIcon = () => jsxRuntime.jsx(lucideReact.X, { size: 20, color: designSystemTokens.semanticColors.icons.placeholder });
+const ClearIcon = () => jsxRuntime.jsx(lucideReact.X, { size: 20, color: designSystemTokens.semanticColors.color.icon.placeholder });
 // Custom calendar icon component
-const CalendarIcon = () => jsxRuntime.jsx(lucideReact.CalendarDays, { size: 20, color: designSystemTokens.semanticColors.icons.placeholder });
+const CalendarIcon = () => jsxRuntime.jsx(lucideReact.CalendarDays, { size: 20, color: designSystemTokens.semanticColors.color.icon.placeholder });
 // Shortcut styles to match Figma list item design (no borders, plain text)
 const shortcutChipStyles = {
     // Container (MuiList) styles
@@ -2785,7 +2831,7 @@ const shortcutChipStyles = {
     [`& .${Chip.chipClasses.root}`]: {
         fontSize: designSystemTokens.typography.fontSize.sm,
         fontWeight: designSystemTokens.typography.fontWeight.medium,
-        color: designSystemTokens.semanticColors.typography.input.default,
+        color: designSystemTokens.semanticColors.color.text.input,
         backgroundColor: 'transparent',
         borderRadius: `${designSystemTokens.spacing.spacing_3_4}px`,
         border: 'none',
@@ -2798,7 +2844,7 @@ const shortcutChipStyles = {
             padding: 0,
         },
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
+            backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
         },
     },
 };
@@ -2892,7 +2938,7 @@ const ModDatePicker = ({ type = 'single', open, label, value, rangeValue, onChan
 ModDatePicker.displayName = 'ModDatePicker';
 
 const StyledDivider = styles.styled(Divider)(() => ({
-    borderColor: designSystemTokens.semanticColors.border.secondary,
+    borderColor: designSystemTokens.semanticColors.color.border.primary,
     marginTop: designSystemTokens.spacing.spacing_1,
     marginBottom: designSystemTokens.spacing.spacing_1,
 }));
@@ -2933,7 +2979,11 @@ const StyledDot = styles.styled('span', {
     shouldForwardProp: prop => prop !== 'ownerState',
 })(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const palette = designSystemTokens.semanticColors.status[ownerState.color];
+    // Computed member access — the phase-2 restructure's codemod (driven from
+    // literal TOKEN_MAP paths) cannot reach this. Fixed by hand. See
+    // docs/superpowers/plans/2026-08-05-semantic-restructure.md
+    // "Dynamic access — the codemod cannot see these".
+    const palette = designSystemTokens.semanticColors.color.status[ownerState.color];
     return {
         display: 'inline-flex',
         alignItems: 'center',
@@ -2944,10 +2994,10 @@ const StyledDot = styles.styled('span', {
         borderRadius: '50%',
         flexShrink: 0,
         boxSizing: 'border-box',
-        backgroundColor: palette.default,
-        color: designSystemTokens.semanticColors.typography.tooltip.default,
+        backgroundColor: palette.solid,
+        color: designSystemTokens.semanticColors.color.text.tooltip,
         ...(ownerState.variant === 'outline' && {
-            border: `3px solid ${palette.light}`,
+            border: `3px solid ${palette.bg}`,
         }),
         '& > svg': {
             width: '70%',
@@ -2966,9 +3016,9 @@ ModDot.displayName = 'ModDot';
 const StyledRoot$1 = styles.styled(Paper)({
     padding: designSystemTokens.spacing.spacing_2,
     borderRadius: designSystemTokens.borderRadius.s,
-    backgroundColor: designSystemTokens.semanticColors.surfaces.card,
-    color: designSystemTokens.semanticColors.typography.body,
-    border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+    color: designSystemTokens.semanticColors.color.text.primary,
+    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
     boxShadow: `${designSystemTokens.shadows.neutral.regular.x}px ${designSystemTokens.shadows.neutral.regular.y}px ${designSystemTokens.shadows.neutral.regular.blur}px ${designSystemTokens.shadows.neutral.regular.spread}px ${designSystemTokens.shadows.neutral.regular.shadow}`,
     display: 'flex',
     flexDirection: 'column',
@@ -2979,14 +3029,14 @@ const Title = styles.styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     fontWeight: designSystemTokens.typography.fontWeight.semiBold,
     lineHeight: 1.4,
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
 }));
 const FileName = styles.styled('p')(({ theme }) => ({
     margin: 0,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.xs),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
@@ -2997,16 +3047,16 @@ const ProgressLabel$1 = styles.styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.xs),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     flexShrink: 0,
 }));
 const StyledLinearProgress$1 = styles.styled(LinearProgress)({
     width: '100%',
     height: designSystemTokens.spacing.spacing_1,
     borderRadius: designSystemTokens.borderRadius.s,
-    backgroundColor: designSystemTokens.semanticColors.border.secondary,
+    backgroundColor: designSystemTokens.semanticColors.color.border.primary,
     [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-        backgroundColor: designSystemTokens.semanticColors.buttons.primary.default,
+        backgroundColor: designSystemTokens.semanticColors.button.primary.bg,
         borderRadius: `${designSystemTokens.borderRadius.xS}px 0 0 ${designSystemTokens.borderRadius.xS}px`,
     },
 });
@@ -3014,7 +3064,7 @@ const ActionButton = styles.styled(IconButton)({
     padding: 0,
     width: designSystemTokens.spacing.spacing_2,
     height: designSystemTokens.spacing.spacing_2,
-    color: designSystemTokens.semanticColors.icons.utility,
+    color: designSystemTokens.semanticColors.color.icon.utility,
     '&:hover': {
         backgroundColor: 'transparent',
     },
@@ -3046,50 +3096,50 @@ const ModDownloadToast = ({ title, fileName, progress, showClose = true, showPau
 ModDownloadToast.displayName = 'ModDownloadToast';
 
 const buildFilledIcon = ({ displayName, fillColor, body, knockout }) => {
-    const Component = (props) => (jsxRuntime.jsxs(SvgIcon, { viewBox: "0 0 16 16", ...props, children: [jsxRuntime.jsx("g", { fill: fillColor, children: body }), jsxRuntime.jsx("g", { stroke: designSystemTokens.semanticColors.surfaces.white, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", children: knockout })] }));
+    const Component = (props) => (jsxRuntime.jsxs(SvgIcon, { viewBox: "0 0 16 16", ...props, children: [jsxRuntime.jsx("g", { fill: fillColor, children: body }), jsxRuntime.jsx("g", { stroke: designSystemTokens.semanticColors.color.surface.raised, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", children: knockout })] }));
     Component.displayName = displayName;
     return Component;
 };
 const CIRCLE_BODY = (jsxRuntime.jsx("path", { d: "M8.00001 14.6666C11.6819 14.6666 14.6667 11.6818 14.6667 7.99992C14.6667 4.31802 11.6819 1.33325 8.00001 1.33325C4.31811 1.33325 1.33334 4.31802 1.33334 7.99992C1.33334 11.6818 4.31811 14.6666 8.00001 14.6666Z" }));
 const ModFilledSuccess = buildFilledIcon({
     displayName: 'ModFilledSuccess',
-    fillColor: designSystemTokens.semanticColors.status.success.default,
+    fillColor: designSystemTokens.semanticColors.color.status.success.solid,
     body: CIRCLE_BODY,
     knockout: jsxRuntime.jsx("path", { d: "M6 8.00008L7.33333 9.33341L10 6.66675" }),
 });
 const ModFilledQueued = buildFilledIcon({
     displayName: 'ModFilledQueued',
-    fillColor: designSystemTokens.semanticColors.status.active.default,
+    fillColor: designSystemTokens.semanticColors.color.status.active.solid,
     body: CIRCLE_BODY,
     knockout: jsxRuntime.jsx("path", { d: "M8 4V8L10.6667 9.33333" }),
 });
 const ModFilledInfo = buildFilledIcon({
     displayName: 'ModFilledInfo',
-    fillColor: designSystemTokens.semanticColors.status.info.default,
+    fillColor: designSystemTokens.semanticColors.color.status.info.solid,
     body: CIRCLE_BODY,
     knockout: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M8 10.6667V8" }), jsxRuntime.jsx("path", { d: "M8 5.33325H8.00667" })] })),
 });
 const ModFilledWarning = buildFilledIcon({
     displayName: 'ModFilledWarning',
-    fillColor: designSystemTokens.semanticColors.status.warning.default,
+    fillColor: designSystemTokens.semanticColors.color.status.warning.solid,
     body: (jsxRuntime.jsx("path", { d: "M14.4867 12L9.15335 2.66665C9.03706 2.46146 8.86842 2.29078 8.66463 2.17203C8.46084 2.05329 8.22921 1.99072 7.99335 1.99072C7.75749 1.99072 7.52585 2.05329 7.32206 2.17203C7.11828 2.29078 6.94964 2.46146 6.83335 2.66665L1.50001 12C1.38247 12.2036 1.32083 12.4346 1.32135 12.6697C1.32187 12.9047 1.38453 13.1355 1.50298 13.3385C1.62142 13.5416 1.79145 13.7097 1.99581 13.8259C2.20018 13.942 2.43162 14.0021 2.66668 14H13.3333C13.5673 13.9997 13.797 13.938 13.9995 13.8208C14.202 13.7037 14.3702 13.5354 14.487 13.3327C14.6039 13.1301 14.6654 12.9002 14.6653 12.6663C14.6653 12.4324 14.6036 12.2026 14.4867 12Z" })),
     knockout: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M8 6V8.66667" }), jsxRuntime.jsx("path", { d: "M8 11.3333H8.00667" })] })),
 });
 const ModFilledError = buildFilledIcon({
     displayName: 'ModFilledError',
-    fillColor: designSystemTokens.semanticColors.status.error.default,
+    fillColor: designSystemTokens.semanticColors.color.status.error.solid,
     body: (jsxRuntime.jsx("path", { d: "M10.208 1.33325C10.5616 1.33333 10.9007 1.47385 11.1507 1.72392L14.276 4.84925C14.5261 5.09924 14.6666 5.43832 14.6667 5.79192V10.2079C14.6666 10.5615 14.5261 10.9006 14.276 11.1506L11.1507 14.2759C10.9007 14.526 10.5616 14.6665 10.208 14.6666H5.79201C5.43842 14.6665 5.09933 14.526 4.84934 14.2759L1.72401 11.1506C1.47394 10.9006 1.33342 10.5615 1.33334 10.2079V5.79192C1.33342 5.43832 1.47394 5.09924 1.72401 4.84925L4.84934 1.72392C5.09933 1.47385 5.43842 1.33333 5.79201 1.33325H10.208Z" })),
     knockout: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M8 5.33325V7.99992" }), jsxRuntime.jsx("path", { d: "M8 10.6667H8.00667" })] })),
 });
 const ModFilledNeutral = buildFilledIcon({
     displayName: 'ModFilledNeutral',
-    fillColor: designSystemTokens.semanticColors.status.neutral.default,
+    fillColor: designSystemTokens.semanticColors.color.status.neutral.solid,
     body: CIRCLE_BODY,
     knockout: jsxRuntime.jsx("path", { d: "M5.33334 8H10.6667" }),
 });
 const ModFilledCanceled = buildFilledIcon({
     displayName: 'ModFilledCanceled',
-    fillColor: designSystemTokens.semanticColors.status.canceled.default,
+    fillColor: designSystemTokens.semanticColors.color.status.canceled.solid,
     body: CIRCLE_BODY,
     knockout: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M10 6L6 10" }), jsxRuntime.jsx("path", { d: "M6 6L10 10" })] })),
 });
@@ -3099,17 +3149,17 @@ const StyledChip$1 = styles.styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
 })(({ theme, selected }) => ({
     borderRadius: designSystemTokens.borderRadius.full,
-    border: `1px solid ${designSystemTokens.semanticColors.buttons.secondary.defaultBorder}`,
+    border: `1px solid ${designSystemTokens.semanticColors.button.secondary.border}`,
     backgroundColor: selected
-        ? designSystemTokens.semanticColors.buttons.secondary.pressedBackground
-        : designSystemTokens.semanticColors.surfaces.white,
+        ? designSystemTokens.semanticColors.button.secondary.bgPressed
+        : designSystemTokens.semanticColors.color.surface.raised,
     minHeight: 40,
     padding: `${designSystemTokens.spacing.spacing_3_4}px ${designSystemTokens.spacing.spacing_1_1_2}px`,
     gap: designSystemTokens.spacing.spacing_1,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: 1,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     [`& .${Chip.chipClasses.label}`]: {
         padding: 0,
         overflow: 'visible',
@@ -3117,23 +3167,23 @@ const StyledChip$1 = styles.styled(Chip, {
         alignItems: 'center',
     },
     [`& .${Chip.chipClasses.deleteIcon}`]: {
-        color: designSystemTokens.semanticColors.icons.default,
+        color: designSystemTokens.semanticColors.color.icon.default,
         width: 24,
         height: 24,
         margin: 0,
         flexShrink: 0,
         '&:hover': {
-            color: designSystemTokens.semanticColors.icons.default,
+            color: designSystemTokens.semanticColors.color.icon.default,
         },
     },
     '&:hover': {
-        backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
+        backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
     },
     [`&.${Chip.chipClasses.focusVisible}`]: {
         ...focusRingStyles,
         backgroundColor: selected
-            ? designSystemTokens.semanticColors.buttons.secondary.pressedBackground
-            : designSystemTokens.semanticColors.surfaces.white,
+            ? designSystemTokens.semanticColors.button.secondary.bgPressed
+            : designSystemTokens.semanticColors.color.surface.raised,
     },
 }));
 const LabelContent = styles.styled('span')({
@@ -3152,13 +3202,13 @@ const HeaderLabel = styles.styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.xxs),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: '120%',
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
 }));
 const SelectedLabel = styles.styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: 1,
-    color: designSystemTokens.semanticColors.buttons.secondary.default,
+    color: designSystemTokens.semanticColors.button.secondary.fg,
 }));
 const CountBadge = styles.styled('span')(({ theme }) => ({
     display: 'inline-flex',
@@ -3168,8 +3218,8 @@ const CountBadge = styles.styled('span')(({ theme }) => ({
     height: 16,
     padding: `0 ${designSystemTokens.spacing.spacing_1_2}px`,
     borderRadius: designSystemTokens.borderRadius.full,
-    backgroundColor: designSystemTokens.semanticColors.brand,
-    color: designSystemTokens.semanticColors.surfaces.white,
+    backgroundColor: designSystemTokens.semanticColors.color.action.brand,
+    color: designSystemTokens.semanticColors.color.surface.raised,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.xs),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: 1,
@@ -3213,7 +3263,7 @@ const SpinnerWrapper = styles.styled('div')({
  * @example
  * <ModLoadingSpinner size={32} color="#ff0000" />
  */
-const ModLoadingSpinner = ({ size = 24, color = designSystemTokens.semanticColors.buttons.primary.default, }) => {
+const ModLoadingSpinner = ({ size = 24, color = designSystemTokens.semanticColors.button.primary.bg, }) => {
     return (jsxRuntime.jsx(SpinnerWrapper, { style: { width: size, height: size }, children: jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("title", { children: "Loading Spinner" }), jsxRuntime.jsx("g", { opacity: "0.2", children: jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2.1" }) }), jsxRuntime.jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12", stroke: color, strokeWidth: "2.1", strokeLinecap: "round" })] }) }));
 };
 ModLoadingSpinner.displayName = 'ModLoadingSpinner';
@@ -3221,8 +3271,8 @@ ModLoadingSpinner.displayName = 'ModLoadingSpinner';
 const StyledFooter = styles.styled(Box, {
     shouldForwardProp: prop => prop !== 'showShadow',
 })(({ theme, showShadow = false }) => ({
-    backgroundColor: designSystemTokens.semanticColors.surfaces.white,
-    borderTop: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+    borderTop: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -3250,7 +3300,7 @@ const ResultText = styles.styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.body, // typography/body: #232342
+    color: designSystemTokens.semanticColors.color.text.primary, // typography/body: #232342
     margin: 0,
     whiteSpace: 'pre',
 }));
@@ -3259,7 +3309,7 @@ const LoadMoreButton = styles.styled('button')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: 'normal',
-    color: designSystemTokens.semanticColors.typography.link.primary,
+    color: designSystemTokens.semanticColors.color.text.link,
     background: 'none',
     border: 'none',
     padding: 0,
@@ -3269,7 +3319,7 @@ const LoadMoreButton = styles.styled('button')(({ theme }) => ({
         textDecoration: 'underline',
     },
     '&:disabled': {
-        color: designSystemTokens.semanticColors.typography.button.disabled,
+        color: designSystemTokens.semanticColors.button.fgDisabled,
         cursor: 'not-allowed',
     },
 }));
@@ -3278,7 +3328,7 @@ const SelectedText = styles.styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     margin: 0,
     whiteSpace: 'pre',
 }));
@@ -3292,15 +3342,15 @@ const PaginationButton = styles.styled(IconButton)(({ disabled }) => ({
     width: designSystemTokens.spacing.spacing_5_1_2,
     height: designSystemTokens.spacing.spacing_5_1_2,
     padding: designSystemTokens.spacing.spacing_1,
-    backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
     borderRadius: designSystemTokens.borderRadius.full,
     '&:hover': {
-        backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
+        backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
     },
     '& svg': {
         width: 24,
         height: 24,
-        color: disabled ? designSystemTokens.semanticColors.icons.disabled : designSystemTokens.semanticColors.icons.default,
+        color: disabled ? designSystemTokens.semanticColors.color.icon.disabled : designSystemTokens.semanticColors.color.icon.default,
     },
 }));
 const PaginationText = styles.styled('p')(({ theme }) => ({
@@ -3308,7 +3358,7 @@ const PaginationText = styles.styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.body, // typography/body: #232342
+    color: designSystemTokens.semanticColors.color.text.primary, // typography/body: #232342
     margin: 0,
     whiteSpace: 'pre',
 }));
@@ -3567,31 +3617,31 @@ const StyledFormControl = styles.styled(FormControl, {
         width: '100%',
     };
 });
-const StyledInputLabel = styles.styled(InputLabel, {
+const StyledInputLabel = styles.styled(MuiInputLabel, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'infoIcon',
 })(({ theme }) => ({
     position: 'static',
     transform: 'none',
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
-    color: designSystemTokens.semanticColors.typography.input.label,
+    color: designSystemTokens.semanticColors.color.text.inputLabel,
     display: 'flex',
     alignItems: 'center',
     gap: designSystemTokens.spacing.spacing_1_4,
-    [`&.${InputLabel.inputLabelClasses.focused}`]: {
-        color: designSystemTokens.semanticColors.typography.input.label,
+    [`&.${MuiInputLabel.inputLabelClasses.focused}`]: {
+        color: designSystemTokens.semanticColors.color.text.inputLabel,
     },
-    [`&.${InputLabel.inputLabelClasses.disabled}`]: {
-        color: designSystemTokens.semanticColors.typography.button.disabled,
+    [`&.${MuiInputLabel.inputLabelClasses.disabled}`]: {
+        color: designSystemTokens.semanticColors.button.fgDisabled,
     },
-    [`&.${InputLabel.inputLabelClasses.error}`]: {
-        color: designSystemTokens.semanticColors.typography.input.label,
+    [`&.${MuiInputLabel.inputLabelClasses.error}`]: {
+        color: designSystemTokens.semanticColors.color.text.inputLabel,
     },
 }));
 const InfoIconWrapper = styles.styled('span')({
     display: 'inline-flex',
     alignItems: 'center',
-    color: designSystemTokens.semanticColors.icons.placeholder,
+    color: designSystemTokens.semanticColors.color.icon.placeholder,
 });
 const StyledInputBase = styles.styled(InputBase, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'destructive',
@@ -3615,50 +3665,52 @@ const StyledInputBase = styles.styled(InputBase, {
         height: multiline ? 'auto' : sizeStyles.height,
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
-        backgroundColor: designSystemTokens.semanticColors.input.background,
-        border: `1px solid ${destructive ? designSystemTokens.semanticColors.status.error.default : designSystemTokens.semanticColors.border.primary}`,
+        backgroundColor: designSystemTokens.semanticColors.input.bg,
+        border: `1px solid ${destructive ? designSystemTokens.semanticColors.color.status.error.solid : designSystemTokens.semanticColors.color.border.primary}`,
         transition: theme.transitions.create(['border-color', 'background-color'], {
             duration: theme.transitions.duration.short,
         }),
         [`& .${InputBase.inputBaseClasses.input}`]: {
             padding: sizeStyles.padding,
-            color: designSystemTokens.semanticColors.typography.input.default,
+            color: designSystemTokens.semanticColors.color.text.input,
             // Tabular figures, no tracking — see Badge.tsx.
             fontVariantNumeric: 'tabular-nums',
             '&::placeholder': {
-                color: designSystemTokens.semanticColors.typography.input.placeholder,
+                color: designSystemTokens.semanticColors.color.text.inputPlaceholder,
             },
         },
         // Hover state
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.input.hoverBackground,
+            backgroundColor: designSystemTokens.semanticColors.input.bgHover,
             borderColor: destructive
-                ? designSystemTokens.semanticColors.status.error.default
-                : designSystemTokens.semanticColors.border.primary,
+                ? designSystemTokens.semanticColors.color.status.error.solid
+                : designSystemTokens.semanticColors.color.border.primary,
         },
         // Focused state
         [`&.${InputBase.inputBaseClasses.focused}`]: {
-            backgroundColor: designSystemTokens.semanticColors.input.background,
+            backgroundColor: designSystemTokens.semanticColors.input.bg,
             borderColor: destructive
-                ? designSystemTokens.semanticColors.status.error.default
-                : designSystemTokens.semanticColors.buttons.primary.default,
+                ? designSystemTokens.semanticColors.color.status.error.solid
+                : designSystemTokens.semanticColors.button.primary.bg,
         },
         // Disabled state
         [`&.${InputBase.inputBaseClasses.disabled}`]: {
-            backgroundColor: designSystemTokens.semanticColors.input.disabledBackground,
-            borderColor: designSystemTokens.semanticColors.border.primary,
-            color: designSystemTokens.semanticColors.typography.button.disabled,
+            backgroundColor: designSystemTokens.semanticColors.input.bgDisabled,
+            borderColor: designSystemTokens.semanticColors.color.border.primary,
+            color: designSystemTokens.semanticColors.button.fgDisabled,
             [`& .${InputBase.inputBaseClasses.input}`]: {
-                WebkitTextFillColor: designSystemTokens.semanticColors.typography.button.disabled,
+                WebkitTextFillColor: designSystemTokens.semanticColors.button.fgDisabled,
             },
         },
         // Error state
         [`&.${InputBase.inputBaseClasses.error}`]: {
-            borderColor: designSystemTokens.semanticColors.status.error.default,
+            borderColor: designSystemTokens.semanticColors.color.status.error.solid,
         },
         // Adornment styling
         [`& .${InputAdornment.inputAdornmentClasses.root}`]: {
-            color: destructive ? designSystemTokens.semanticColors.status.error.default : designSystemTokens.semanticColors.icons.placeholder,
+            color: destructive
+                ? designSystemTokens.semanticColors.color.status.error.solid
+                : designSystemTokens.semanticColors.color.icon.placeholder,
         },
     };
 });
@@ -3670,12 +3722,12 @@ const StyledFormHelperText = styles.styled(FormHelperText, {
         marginRight: 0,
         // Figma specifies 14px for helper text
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
-        color: designSystemTokens.semanticColors.typography.input.helper,
+        color: designSystemTokens.semanticColors.color.text.inputHelper,
         [`&.${FormHelperText.formHelperTextClasses.error}`]: {
-            color: designSystemTokens.semanticColors.status.error.default,
+            color: designSystemTokens.semanticColors.color.status.error.solid,
         },
         [`&.${FormHelperText.formHelperTextClasses.disabled}`]: {
-            color: designSystemTokens.semanticColors.typography.button.disabled,
+            color: designSystemTokens.semanticColors.button.fgDisabled,
         },
     };
 });
@@ -3783,7 +3835,7 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
         paddingBottom: config.paddingBottom,
         paddingLeft: config.paddingLeft,
         borderRadius: designSystemTokens.spacing.spacing_3_4, // 6px
-        backgroundColor: designSystemTokens.semanticColors.input.background,
+        backgroundColor: designSystemTokens.semanticColors.input.bg,
         gap: config.gap,
         // Icon is always centered vertically per Figma design
         alignItems: 'center',
@@ -3795,7 +3847,7 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
             minWidth: config.iconSize, // Override MUI's default 56px
             width: config.iconSize,
             height: config.iconSize,
-            color: designSystemTokens.semanticColors.icons.placeholder,
+            color: designSystemTokens.semanticColors.color.icon.placeholder,
             transition: theme.transitions.create(['color'], {
                 duration: theme.transitions.duration.short,
             }),
@@ -3812,9 +3864,7 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
                 : size === 'small' || size === 'medium'
                     ? designSystemTokens.typography.fontWeight.regular
                     : designSystemTokens.typography.fontWeight.medium,
-            color: isLink
-                ? designSystemTokens.semanticColors.typography.link.primary
-                : designSystemTokens.semanticColors.typography.navigation.default,
+            color: isLink ? designSystemTokens.semanticColors.color.text.link : designSystemTokens.semanticColors.color.text.nav,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
@@ -3834,14 +3884,14 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
                 : 12),
             lineHeight: 1.5,
             fontWeight: designSystemTokens.typography.fontWeight.regular,
-            color: designSystemTokens.semanticColors.typography.bodySecondary,
+            color: designSystemTokens.semanticColors.color.text.secondary,
         },
         // Secondary text styling - wraps with word break
         '& .list-item-secondary': {
             fontSize: theme.typography.pxToRem('secondaryFontSize' in config ? config.secondaryFontSize : config.fontSize),
             lineHeight: size === 'large' ? 1.5 : 1.4,
             fontWeight: designSystemTokens.typography.fontWeight.regular,
-            color: designSystemTokens.semanticColors.typography.bodySecondary,
+            color: designSystemTokens.semanticColors.color.text.secondary,
             wordBreak: 'break-word',
             whiteSpace: 'normal',
             ...(size === 'large' && {
@@ -3854,29 +3904,29 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
             alignItems: 'center',
             flexShrink: 0,
             marginLeft: designSystemTokens.spacing.spacing_1,
-            color: designSystemTokens.semanticColors.icons.default,
+            color: designSystemTokens.semanticColors.color.icon.default,
         },
         // Hover state
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.input.background,
+            backgroundColor: designSystemTokens.semanticColors.input.bg,
         },
         // Selected/Active state
         // Font weights per Figma:
         // - Primary: small/medium/xxlarge use 500, large/xlarge use 600
         // - Secondary: large/xlarge use 500, xxlarge uses 400
         [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
-            backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
+            backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
+                backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
             },
             [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-                color: designSystemTokens.semanticColors.icons.pressed,
+                color: designSystemTokens.semanticColors.color.icon.pressed,
             },
             '& .list-item-primary': {
                 fontWeight: size === 'large' || size === 'xlarge'
                     ? designSystemTokens.typography.fontWeight.semiBold
                     : designSystemTokens.typography.fontWeight.medium,
-                color: designSystemTokens.semanticColors.typography.navigation.default,
+                color: designSystemTokens.semanticColors.color.text.nav,
             },
             '& .list-item-secondary': {
                 fontWeight: size === 'large' || size === 'xlarge'
@@ -3886,22 +3936,22 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
         },
         // Disabled state
         [`&.${ListItemButton.listItemButtonClasses.disabled}`]: {
-            backgroundColor: designSystemTokens.semanticColors.input.disabledBackground,
+            backgroundColor: designSystemTokens.semanticColors.input.bgDisabled,
             opacity: 1,
             [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-                color: designSystemTokens.semanticColors.icons.disabled,
+                color: designSystemTokens.semanticColors.color.icon.disabled,
             },
             '& .list-item-primary': {
-                color: designSystemTokens.semanticColors.buttons.tertiary.disabled,
+                color: designSystemTokens.semanticColors.button.tertiary.fgDisabled,
             },
             '& .list-item-secondary': {
-                color: designSystemTokens.semanticColors.buttons.tertiary.disabled,
+                color: designSystemTokens.semanticColors.button.tertiary.fgDisabled,
             },
             '& .list-item-badge': {
-                color: designSystemTokens.semanticColors.buttons.tertiary.disabled,
+                color: designSystemTokens.semanticColors.button.tertiary.fgDisabled,
             },
             '& .list-item-trailing': {
-                color: designSystemTokens.semanticColors.icons.disabled,
+                color: designSystemTokens.semanticColors.color.icon.disabled,
             },
         },
     };
@@ -3956,28 +4006,28 @@ function navVariantStyles(theme) {
         paddingLeft: designSystemTokens.spacing.spacing_2,
         paddingRight: designSystemTokens.spacing.spacing_2,
         border: 'none',
-        color: designSystemTokens.semanticColors.typography.bodySecondary,
+        color: designSystemTokens.semanticColors.color.text.secondary,
         backgroundColor: 'transparent',
         transition: theme.transitions.create(['background-color', 'color']),
         [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
-            backgroundColor: designSystemTokens.semanticColors.surfaces.activeHighlight,
-            color: designSystemTokens.semanticColors.typography.body,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.highlightActive,
+            color: designSystemTokens.semanticColors.color.text.primary,
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.surfaces.activeHighlight,
+                backgroundColor: designSystemTokens.semanticColors.color.surface.highlightActive,
             },
         },
         [`&:not(.${ListItemButton.listItemButtonClasses.selected}):not(.${ListItemButton.listItemButtonClasses.disabled})`]: {
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
-                color: designSystemTokens.semanticColors.typography.body,
+                backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
+                color: designSystemTokens.semanticColors.color.text.primary,
             },
         },
         [`&.${ListItemButton.listItemButtonClasses.focusVisible}`]: {
-            outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+            outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
             outlineOffset: -2,
         },
         [`&.${ListItemButton.listItemButtonClasses.disabled}`]: {
-            color: designSystemTokens.semanticColors.typography.button.disabled,
+            color: designSystemTokens.semanticColors.button.fgDisabled,
             opacity: 1,
         },
     };
@@ -3992,71 +4042,71 @@ function cardVariantStyles(theme) {
         paddingBottom: designSystemTokens.spacing.spacing_1,
         paddingLeft: designSystemTokens.spacing.spacing_3_4,
         paddingRight: designSystemTokens.spacing.spacing_3_4,
-        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
         transition: theme.transitions.create(['border', 'background-color']),
         // Active (selected) state
         [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
-            border: `2px solid ${designSystemTokens.semanticColors.buttons.primary.default}`,
-            backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+            border: `2px solid ${designSystemTokens.semanticColors.button.primary.bg}`,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+                backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
             },
             // Icon color in selected state
             [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-                color: designSystemTokens.semanticColors.icons.default,
+                color: designSystemTokens.semanticColors.color.icon.default,
             },
             // Text colors in selected state
             [`& .${ListItemText.listItemTextClasses.primary}`]: {
-                color: designSystemTokens.semanticColors.typography.body,
+                color: designSystemTokens.semanticColors.color.text.primary,
             },
             [`& .${ListItemText.listItemTextClasses.secondary}`]: {
-                color: designSystemTokens.semanticColors.typography.bodySecondary,
+                color: designSystemTokens.semanticColors.color.text.secondary,
             },
         },
         // Deselected (default) state
         [`&:not(.${ListItemButton.listItemButtonClasses.selected}):not(.${ListItemButton.listItemButtonClasses.disabled})`]: {
             '&:hover': {
-                backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
+                backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
             },
             [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-                color: designSystemTokens.semanticColors.icons.disabled,
+                color: designSystemTokens.semanticColors.color.icon.disabled,
             },
             [`& .${ListItemText.listItemTextClasses.primary}`]: {
-                color: designSystemTokens.semanticColors.buttons.tertiary.disabled,
+                color: designSystemTokens.semanticColors.button.tertiary.fgDisabled,
             },
             [`& .${ListItemText.listItemTextClasses.secondary}`]: {
-                color: designSystemTokens.semanticColors.typography.button.disabled,
+                color: designSystemTokens.semanticColors.button.fgDisabled,
             },
         },
         // Focus state
         [`&.${ListItemButton.listItemButtonClasses.focusVisible}`]: {
-            outline: `2px solid ${designSystemTokens.semanticColors.buttons.primary.default}`,
+            outline: `2px solid ${designSystemTokens.semanticColors.button.primary.bg}`,
             outlineOffset: 2,
-            border: `2px solid ${designSystemTokens.semanticColors.buttons.primary.default}`,
-            backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+            border: `2px solid ${designSystemTokens.semanticColors.button.primary.bg}`,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
             [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-                color: designSystemTokens.semanticColors.icons.default,
+                color: designSystemTokens.semanticColors.color.icon.default,
             },
             [`& .${ListItemText.listItemTextClasses.primary}`]: {
-                color: designSystemTokens.semanticColors.typography.body,
+                color: designSystemTokens.semanticColors.color.text.primary,
             },
             [`& .${ListItemText.listItemTextClasses.secondary}`]: {
-                color: designSystemTokens.semanticColors.typography.bodySecondary,
+                color: designSystemTokens.semanticColors.color.text.secondary,
             },
         },
         // Disabled state
         [`&.${ListItemButton.listItemButtonClasses.disabled}`]: {
-            backgroundColor: designSystemTokens.semanticColors.surface.sunken,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.sunken,
             opacity: 1, // Override MUI default opacity
             [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-                color: designSystemTokens.semanticColors.icons.disabled,
+                color: designSystemTokens.semanticColors.color.icon.disabled,
             },
             [`& .${ListItemText.listItemTextClasses.primary}`]: {
-                color: designSystemTokens.semanticColors.typography.button.disabled,
+                color: designSystemTokens.semanticColors.button.fgDisabled,
             },
             [`& .${ListItemText.listItemTextClasses.secondary}`]: {
-                color: designSystemTokens.semanticColors.typography.button.disabled,
+                color: designSystemTokens.semanticColors.button.fgDisabled,
             },
         },
     };
@@ -4101,9 +4151,9 @@ ModListItemButton.displayName = 'ModListItemButton';
 
 const StyledMenu = styles.styled(Menu)(() => ({
     [`& .${Paper.paperClasses.root}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
         borderRadius: designSystemTokens.borderRadius.s,
-        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         boxShadow: `${designSystemTokens.shadows.dropdown.x}px ${designSystemTokens.shadows.dropdown.y}px ${designSystemTokens.shadows.dropdown.blur}px ${designSystemTokens.shadows.dropdown.spread}px ${designSystemTokens.shadows.dropdown.shadow}`,
         marginTop: designSystemTokens.spacing.spacing_1,
         paddingTop: designSystemTokens.spacing.spacing_1,
@@ -4159,8 +4209,8 @@ const StyledCell$1 = styles.styled('div', {
     paddingTop: designSystemTokens.spacing.spacing_1_2, // 4px — input-vertical
     paddingBottom: designSystemTokens.spacing.spacing_1_2,
     backgroundColor: disabled
-        ? designSystemTokens.semanticColors.surfaces.dataGrid.disabled
-        : designSystemTokens.semanticColors.surfaces.dataGrid.default,
+        ? designSystemTokens.semanticColors.color.surface.dataGrid.disabled
+        : designSystemTokens.semanticColors.color.surface.dataGrid.default,
     boxSizing: 'border-box',
 }));
 const LabelText = styles.styled('span', {
@@ -4173,7 +4223,7 @@ const LabelText = styles.styled('span', {
     fontSize: designSystemTokens.typography.fontSize.xs,
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: disabled ? designSystemTokens.semanticColors.typography.bodySecondary : designSystemTokens.semanticColors.typography.body,
+    color: disabled ? designSystemTokens.semanticColors.color.text.secondary : designSystemTokens.semanticColors.color.text.primary,
 }));
 /**
  * ModAvatarCell — DataGrid cell displaying a user avatar with optional label.
@@ -4191,9 +4241,9 @@ ModAvatarCell.displayName = 'ModAvatarCell';
 // ============================================================================
 const StyledDialog = styles.styled(Dialog)({
     [`& .${Dialog.dialogClasses.paper}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
         borderRadius: designSystemTokens.borderRadius.card,
-        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         boxShadow: 'none',
     },
     [`& .${Dialog.dialogClasses.container}`]: {
@@ -4253,7 +4303,7 @@ const ModalHeaderTitle = styles.styled('h2')(({ theme }) => ({
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.h3),
     lineHeight: 1.4,
-    color: designSystemTokens.semanticColors.typography.navigation.default,
+    color: designSystemTokens.semanticColors.color.text.nav,
 }));
 const modalHeaderTitleLinkStyles = {
     margin: 0,
@@ -4261,10 +4311,10 @@ const modalHeaderTitleLinkStyles = {
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     fontSize: designSystemTokens.typography.fontSize.h3,
     lineHeight: 1.4,
-    color: designSystemTokens.semanticColors.typography.link.primary,
+    color: designSystemTokens.semanticColors.color.text.link,
     textDecoration: 'none',
     '&:hover': {
-        color: designSystemTokens.semanticColors.buttons.tertiary.hover,
+        color: designSystemTokens.semanticColors.button.tertiary.fgHover,
         textDecoration: 'underline',
     },
 };
@@ -4274,10 +4324,10 @@ const ModalHeaderSubtitle = styles.styled('p')(({ theme }) => ({
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     lineHeight: 1.4,
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
 }));
 const StyledCloseButton = styles.styled(IconButton)({
-    color: designSystemTokens.semanticColors.icons.utility,
+    color: designSystemTokens.semanticColors.color.icon.utility,
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
@@ -4287,7 +4337,7 @@ const StyledCloseButton = styles.styled(IconButton)({
     flexShrink: 0,
     '&:hover': {
         backgroundColor: 'transparent',
-        color: designSystemTokens.semanticColors.icons.utility,
+        color: designSystemTokens.semanticColors.color.icon.utility,
     },
 });
 /**
@@ -4321,7 +4371,7 @@ const StyledDialogContent = styles.styled(DialogContent)(({ theme }) => ({
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.navigation.default,
+    color: designSystemTokens.semanticColors.color.text.nav,
     [`&.${DialogContent.dialogContentClasses.root}`]: {
         paddingTop: 0,
         paddingRight: designSystemTokens.spacing.spacing_4,
@@ -4376,7 +4426,7 @@ const CellRoot = styles.styled('div', {
     justifyContent: 'center',
     width: '100%',
     height: '100%',
-    color: disabled ? designSystemTokens.semanticColors.icons.disabled : designSystemTokens.semanticColors.icons.default,
+    color: disabled ? designSystemTokens.semanticColors.color.icon.disabled : designSystemTokens.semanticColors.color.icon.default,
 }));
 /**
  * ModIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
@@ -4399,8 +4449,8 @@ const CellWrapper = styles.styled('div', {
     paddingLeft: designSystemTokens.spacing.spacing_1,
     paddingRight: designSystemTokens.spacing.spacing_1,
     backgroundColor: disabled
-        ? designSystemTokens.semanticColors.surfaces.dataGrid.disabled
-        : designSystemTokens.semanticColors.surfaces.dataGrid.default,
+        ? designSystemTokens.semanticColors.color.surface.dataGrid.disabled
+        : designSystemTokens.semanticColors.color.surface.dataGrid.default,
     '& img': {
         display: 'block',
         maxHeight: 32,
@@ -4438,13 +4488,13 @@ const StyledLinearProgress = styles.styled(LinearProgress, {
     [`&.${LinearProgress.linearProgressClasses.colorPrimary}`]: {
         backgroundColor: designSystemTokens.semanticColors.progress.track,
         [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-            backgroundColor: designSystemTokens.semanticColors.status.active.default,
+            backgroundColor: designSystemTokens.semanticColors.color.status.active.solid,
         },
     },
     // Cancelled variant uses warning color
     '&[data-variant="cancelled"]': {
         [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-            backgroundColor: designSystemTokens.semanticColors.status.warning.default,
+            backgroundColor: designSystemTokens.semanticColors.color.status.warning.solid,
         },
     },
 }));
@@ -4473,7 +4523,7 @@ const ProgressWrapper = styles.styled('div')(({ labelPosition }) => ({
 const ProgressLabel = styles.styled(Typography)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
     lineHeight: 1.4,
     whiteSpace: 'nowrap',
     flexShrink: 0,
@@ -4507,8 +4557,8 @@ const StyledCell = styles.styled('div', {
     paddingLeft: designSystemTokens.spacing.spacing_1_1_2, // 12px input-horizontal
     paddingRight: designSystemTokens.spacing.spacing_1_1_2,
     backgroundColor: disabled
-        ? designSystemTokens.semanticColors.surfaces.dataGrid.disabled
-        : designSystemTokens.semanticColors.surfaces.dataGrid.default,
+        ? designSystemTokens.semanticColors.color.surface.dataGrid.disabled
+        : designSystemTokens.semanticColors.color.surface.dataGrid.default,
     boxSizing: 'border-box',
 }));
 /**
@@ -4520,10 +4570,14 @@ const ModProgressCell = ({ value = 0, disabled = false, empty = false, }) => {
 };
 ModProgressCell.displayName = 'ModProgressCell';
 
+// semanticColors.status[variant] is a computed member access, so the phase-2
+// token restructure's codemod (driven from literal TOKEN_MAP paths) cannot
+// reach it — fixed by hand. See docs/superpowers/plans/2026-08-05-semantic-restructure.md
+// "Dynamic access — the codemod cannot see these".
 const variantColors = (variant) => ({
-    bg: designSystemTokens.semanticColors.status[variant].light,
-    fg: designSystemTokens.semanticColors.status[variant].dark,
-    border: designSystemTokens.semanticColors.status[variant].transparent,
+    bg: designSystemTokens.semanticColors.color.status[variant].bg,
+    fg: designSystemTokens.semanticColors.color.status[variant].fg,
+    border: designSystemTokens.semanticColors.color.status[variant].tint,
 });
 const StyledChip = styles.styled('div', {
     shouldForwardProp: prop => prop !== 'disabled' && prop !== 'variant',
@@ -4538,9 +4592,9 @@ const StyledChip = styles.styled('div', {
         paddingLeft: designSystemTokens.spacing.spacing_1_1_2,
         paddingRight: designSystemTokens.spacing.spacing_1_1_2,
         borderRadius: designSystemTokens.borderRadius.full,
-        border: `1px solid ${disabled ? designSystemTokens.semanticColors.border.secondary : colors.border}`,
-        backgroundColor: disabled ? designSystemTokens.semanticColors.surfaces.dataGrid.disabled : colors.bg,
-        color: disabled ? designSystemTokens.semanticColors.icons.disabled : colors.fg,
+        border: `1px solid ${disabled ? designSystemTokens.semanticColors.color.border.primary : colors.border}`,
+        backgroundColor: disabled ? designSystemTokens.semanticColors.color.surface.dataGrid.disabled : colors.bg,
+        color: disabled ? designSystemTokens.semanticColors.color.icon.disabled : colors.fg,
         fontFamily: designSystemTokens.typography.fontFamily.body,
         fontSize: designSystemTokens.typography.fontSize.xs,
         fontWeight: designSystemTokens.typography.fontWeight.medium,
@@ -4565,7 +4619,7 @@ const TooltipErrorPre = styles.styled('pre')({
     fontSize: designSystemTokens.typography.fontSize.sm,
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: designSystemTokens.semanticColors.typography.tooltip.default,
+    color: designSystemTokens.semanticColors.color.text.tooltip,
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-all',
     maxHeight: 200,
@@ -4573,12 +4627,12 @@ const TooltipErrorPre = styles.styled('pre')({
 });
 const StyledTooltip$1 = styles.styled(Tooltip)({
     [`& .${Tooltip.tooltipClasses.tooltip}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.tooltip,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.tooltip,
         maxWidth: 400,
         padding: `${designSystemTokens.spacing.spacing_1}px ${designSystemTokens.spacing.spacing_1_1_2}px`,
     },
     [`& .${Tooltip.tooltipClasses.arrow}`]: {
-        color: designSystemTokens.semanticColors.surfaces.tooltip,
+        color: designSystemTokens.semanticColors.color.surface.tooltip,
     },
 });
 /**
@@ -4587,7 +4641,7 @@ const StyledTooltip$1 = styles.styled(Tooltip)({
 const ModStatusCell = ({ icon, label, details, disabled = false, variant = 'success', empty = false, }) => {
     if (empty) {
         return (jsxRuntime.jsx(Box, { component: "span", sx: {
-                color: designSystemTokens.semanticColors.typography.body,
+                color: designSystemTokens.semanticColors.color.text.primary,
                 fontSize: designSystemTokens.typography.fontSize.sm,
                 lineHeight: 1,
             }, children: '—' }));
@@ -4608,10 +4662,10 @@ const NavigationAvatarContainer = styles.styled('div')({
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: '50%',
-    border: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
-    backgroundColor: designSystemTokens.semanticColors.buttons.secondary.defaultBackground,
+    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
+    backgroundColor: designSystemTokens.semanticColors.button.secondary.bg,
     '&:focus-within': {
-        borderColor: designSystemTokens.semanticColors.border.focus,
+        borderColor: designSystemTokens.semanticColors.color.border.focus,
     },
 });
 /**
@@ -4635,19 +4689,19 @@ const useModSideNav = () => React.useContext(ModSideNavContext);
  */
 const variantConfig = {
     light: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.tooltip, // #4b5563 - medium gray
-        color: designSystemTokens.semanticColors.typography.tooltip.default, // #ffffff - white
+        backgroundColor: designSystemTokens.semanticColors.color.surface.tooltip, // #4b5563 - medium gray
+        color: designSystemTokens.semanticColors.color.text.tooltip, // #ffffff - white
     },
     dark: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
-        color: designSystemTokens.semanticColors.typography.body,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+        color: designSystemTokens.semanticColors.color.text.primary,
     },
     brand: {
         // snackbarBrand is one of the few tokens Figma fixes across both modes, so
         // its foreground must be fixed too. typography.tooltip.default flips
         // (#ffffff -> #232342), which would put dark navy on dark blue in dark mode.
-        backgroundColor: designSystemTokens.semanticColors.surfaces.snackbarBrand,
-        color: designSystemTokens.semanticColors.typography.linkWhite,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.snackbarBrand,
+        color: designSystemTokens.semanticColors.color.text.linkOnDark,
     },
 };
 /**
@@ -4731,11 +4785,11 @@ const StyledRoot = styles.styled(ButtonBase, {
     cursor: 'pointer',
     textDecoration: 'none',
     '&:hover .mod-nav-icon-padding': {
-        backgroundColor: designSystemTokens.semanticColors.accent.tint,
-        borderColor: designSystemTokens.semanticColors.accent.border,
+        backgroundColor: designSystemTokens.semanticColors.color.action.tint,
+        borderColor: designSystemTokens.semanticColors.color.action.border,
     },
     '&:hover .mod-nav-label': {
-        color: designSystemTokens.semanticColors.text.primary,
+        color: designSystemTokens.semanticColors.color.text.primary,
         fontWeight: designSystemTokens.typography.fontWeight.semiBold,
     },
     [`& .${Chip.chipClasses.root}`]: {
@@ -4746,16 +4800,16 @@ const StyledRoot = styles.styled(ButtonBase, {
     },
     ...(selected && {
         '& .mod-nav-icon-padding': {
-            backgroundColor: designSystemTokens.semanticColors.accent.tint,
-            borderColor: designSystemTokens.semanticColors.accent.border,
-            color: designSystemTokens.semanticColors.accent.deep,
+            backgroundColor: designSystemTokens.semanticColors.color.action.tint,
+            borderColor: designSystemTokens.semanticColors.color.action.border,
+            color: designSystemTokens.semanticColors.color.action.navy,
         },
         '& .mod-nav-label': {
-            color: designSystemTokens.semanticColors.accent.deep,
+            color: designSystemTokens.semanticColors.color.action.navy,
             fontWeight: designSystemTokens.typography.fontWeight.semiBold,
         },
         '&:hover .mod-nav-label': {
-            color: designSystemTokens.semanticColors.accent.deep,
+            color: designSystemTokens.semanticColors.color.action.navy,
         },
     }),
 }));
@@ -4765,7 +4819,7 @@ const IconPadding = styles.styled('span')({
     padding: designSystemTokens.spacing.spacing_1, // 8px
     borderRadius: designSystemTokens.borderRadius.xS, // 4px
     border: '1px solid transparent',
-    color: designSystemTokens.semanticColors.icons.default,
+    color: designSystemTokens.semanticColors.color.icon.default,
     transition: 'background-color 150ms, border-color 150ms, color 150ms',
 });
 const navLabel = designSystemTokens.semanticTypography.navigationLabel.default;
@@ -4775,7 +4829,7 @@ const Label$2 = styles.styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(navLabel.fontSize),
     lineHeight: navLabel.lineHeight,
     textAlign: 'center',
-    color: designSystemTokens.semanticColors.text.primary,
+    color: designSystemTokens.semanticColors.color.text.primary,
     width: '100%',
     transition: 'color 150ms',
 }));
@@ -4802,7 +4856,7 @@ const StickyHeader = styles.styled(Box)(({ theme }) => ({
     position: 'sticky',
     top: 0,
     zIndex: theme.zIndex.appBar,
-    backgroundColor: designSystemTokens.semanticColors.surface.canvasContent,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.canvas,
     flexShrink: 0,
 }));
 /**
@@ -4811,14 +4865,14 @@ const StickyHeader = styles.styled(Box)(({ theme }) => ({
 const PageTitle = styles.styled(Typography)(() => ({
     ...designSystemTokens.semanticTypography.titles.pageHeader,
     lineHeight: 1.4,
-    color: designSystemTokens.semanticColors.typography.body,
+    color: designSystemTokens.semanticColors.color.text.primary,
 }));
 /**
  * Subtitle typography
  */
 const Subtitle = styles.styled(Typography)(() => ({
     fontSize: designSystemTokens.typography.fontSize.sm,
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
 }));
 /**
  * ModPageContent - Page content surface from the Moderne Design System
@@ -4913,8 +4967,8 @@ function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
             minHeight: '50vh',
         }, children: jsxRuntime.jsx(ModLoadingSpinner, {}) })) : (children);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Box, { sx: {
-                    backgroundColor: designSystemTokens.semanticColors.surface.canvasContent,
-                    border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+                    backgroundColor: designSystemTokens.semanticColors.color.surface.canvas,
+                    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
                     borderRadius: `${designSystemTokens.borderRadius.input}px`,
                     height: '100%',
                     display: 'flex',
@@ -4957,10 +5011,10 @@ function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
                         right: designSystemTokens.spacing.spacing_4,
                         zIndex: 1000,
                     }, children: jsxRuntime.jsx(Fab, { sx: {
-                            backgroundColor: `color-mix(in srgb, ${designSystemTokens.semanticColors.buttons.primary.default} 12.5%, transparent)`,
-                            color: designSystemTokens.semanticColors.buttons.primary.default,
+                            backgroundColor: `color-mix(in srgb, ${designSystemTokens.semanticColors.button.primary.bg} 12.5%, transparent)`,
+                            color: designSystemTokens.semanticColors.button.primary.bg,
                             '&:hover': {
-                                backgroundColor: `color-mix(in srgb, ${designSystemTokens.semanticColors.buttons.primary.default} 18.8%, transparent)`,
+                                backgroundColor: `color-mix(in srgb, ${designSystemTokens.semanticColors.button.primary.bg} 18.8%, transparent)`,
                             },
                         }, title: "Back to top", size: "small", onClick: handleScrollToTop, children: jsxRuntime.jsx(lucideReact.ChevronUp, { size: 20 }) }) }) }))] }));
 }
@@ -5017,8 +5071,8 @@ const StyledTextField = styles.styled(TextField)(({ theme }) => ({
         height: designSystemTokens.spacing.spacing_5,
         fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.default),
         borderRadius: designSystemTokens.borderRadius.input,
-        backgroundColor: designSystemTokens.semanticColors.input.background,
-        border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+        backgroundColor: designSystemTokens.semanticColors.input.bg,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         paddingTop: designSystemTokens.spacing.spacing_1,
         paddingBottom: designSystemTokens.spacing.spacing_1,
         paddingLeft: designSystemTokens.spacing.spacing_1_1_2,
@@ -5029,26 +5083,26 @@ const StyledTextField = styles.styled(TextField)(({ theme }) => ({
         },
         [`& .${InputBase.inputBaseClasses.input}`]: {
             padding: 0,
-            color: designSystemTokens.semanticColors.typography.input.default,
+            color: designSystemTokens.semanticColors.color.text.input,
             '&::placeholder': {
-                color: designSystemTokens.semanticColors.typography.input.placeholder,
+                color: designSystemTokens.semanticColors.color.text.inputPlaceholder,
                 opacity: 1,
             },
         },
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.input.hoverBackground,
+            backgroundColor: designSystemTokens.semanticColors.input.bgHover,
         },
         [`&.${InputBase.inputBaseClasses.focused}`]: {
-            backgroundColor: designSystemTokens.semanticColors.input.background,
-            borderColor: designSystemTokens.semanticColors.buttons.primary.default,
+            backgroundColor: designSystemTokens.semanticColors.input.bg,
+            borderColor: designSystemTokens.semanticColors.button.primary.bg,
         },
         [`&.${InputBase.inputBaseClasses.disabled}`]: {
-            backgroundColor: designSystemTokens.semanticColors.input.disabledBackground,
-            color: designSystemTokens.semanticColors.typography.button.disabled,
+            backgroundColor: designSystemTokens.semanticColors.input.bgDisabled,
+            color: designSystemTokens.semanticColors.button.fgDisabled,
         },
     },
     [`& .${InputAdornment.inputAdornmentClasses.root}`]: {
-        color: designSystemTokens.semanticColors.icons.placeholder,
+        color: designSystemTokens.semanticColors.color.icon.placeholder,
         '& svg': {
             width: 14,
             height: 14,
@@ -5058,10 +5112,10 @@ const StyledTextField = styles.styled(TextField)(({ theme }) => ({
         marginRight: 0,
     },
     [`& .${IconButton.iconButtonClasses.root}`]: {
-        color: designSystemTokens.semanticColors.icons.placeholder,
+        color: designSystemTokens.semanticColors.color.icon.placeholder,
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.icons.hoverBackground,
-            color: designSystemTokens.semanticColors.icons.utility,
+            backgroundColor: designSystemTokens.semanticColors.color.icon.bgHover,
+            color: designSystemTokens.semanticColors.color.icon.utility,
         },
         '& svg': {
             width: 16,
@@ -5108,14 +5162,14 @@ ModQuickFilter.displayName = 'ModQuickFilter';
 const UncheckedIcon = ({ size, disabled }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
-    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Unchecked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: designSystemTokens.semanticColors.border.strong, strokeWidth: "1", fill: disabled ? designSystemTokens.semanticColors.buttons.primary.disabled : 'transparent' })] }));
+    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Unchecked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: designSystemTokens.semanticColors.color.border.strong, strokeWidth: "1", fill: disabled ? designSystemTokens.semanticColors.button.primary.bgDisabled : 'transparent' })] }));
 };
 const CheckedIcon = ({ size, disabled }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
     const inset = size === 'small' ? 0.3125 : 0.3; // 31.25% or 30%
     const innerRadius = radius * (1 - 2 * inset);
-    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Checked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, fill: disabled ? designSystemTokens.semanticColors.buttons.primary.disabled : designSystemTokens.semanticColors.icons.active, stroke: disabled ? designSystemTokens.semanticColors.border.primary : designSystemTokens.semanticColors.icons.active, strokeWidth: "1" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: innerRadius, fill: disabled ? designSystemTokens.semanticColors.icons.disabled : designSystemTokens.semanticColors.surfaces.white })] }));
+    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Checked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, fill: disabled ? designSystemTokens.semanticColors.button.primary.bgDisabled : designSystemTokens.semanticColors.color.icon.active, stroke: disabled ? designSystemTokens.semanticColors.color.border.primary : designSystemTokens.semanticColors.color.icon.active, strokeWidth: "1" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: innerRadius, fill: disabled ? designSystemTokens.semanticColors.color.icon.disabled : designSystemTokens.semanticColors.color.surface.raised })] }));
 };
 const RadioContainer = styles.styled('label')(({ disabled }) => ({
     display: 'inline-flex',
@@ -5141,13 +5195,13 @@ const Label$1 = styles.styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? designSystemTokens.typography.fontSize.sm : designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: size === 'small' ? 1.4 : 1.5,
-    color: designSystemTokens.semanticColors.typography.input.default,
+    color: designSystemTokens.semanticColors.color.text.input,
 }));
 const HelperText$1 = styles.styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? designSystemTokens.typography.fontSize.sm : designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: size === 'small' ? 1.4 : 1.5,
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
 }));
 const StyledRadio = styles.styled(Radio, {
     shouldForwardProp: prop => prop !== 'size',
@@ -5160,9 +5214,9 @@ const StyledRadio = styles.styled(Radio, {
         height: dimensions,
         flexShrink: 0,
         borderRadius: radius,
-        color: designSystemTokens.semanticColors.border.strong,
+        color: designSystemTokens.semanticColors.color.border.strong,
         [`&.${Radio.radioClasses.checked}`]: {
-            color: designSystemTokens.semanticColors.icons.active,
+            color: designSystemTokens.semanticColors.color.icon.active,
         },
         '&:hover': {
             backgroundColor: 'transparent',
@@ -5175,7 +5229,7 @@ const StyledRadio = styles.styled(Radio, {
         // Focus state for keyboard navigation
         [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
             // Unchecked focus state: white background
-            backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
             // Checked focus state: keep the blue circle visible
             [`&.${Radio.radioClasses.checked}`]: {
                 backgroundColor: 'transparent',
@@ -5183,9 +5237,9 @@ const StyledRadio = styles.styled(Radio, {
         },
         // Disabled state — icons handle their own disabled colors
         [`&.${Radio.radioClasses.disabled}`]: {
-            color: designSystemTokens.semanticColors.border.primary,
+            color: designSystemTokens.semanticColors.color.border.primary,
             [`&.${Radio.radioClasses.checked}`]: {
-                color: designSystemTokens.semanticColors.border.primary,
+                color: designSystemTokens.semanticColors.color.border.primary,
             },
         },
     };
@@ -5279,15 +5333,15 @@ ModRipplingDot.displayName = 'ModRipplingDot';
 
 const StyledSearchChip = styles.styled(InputBase)(({ theme }) => ({
     borderRadius: designSystemTokens.borderRadius.button,
-    border: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
-    backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
     height: 40,
     padding: `0 ${designSystemTokens.spacing.spacing_1_1_2}px`,
     gap: designSystemTokens.spacing.spacing_1_2,
     fontSize: theme.typography.pxToRem(designSystemTokens.typography.fontSize.sm),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: 1,
-    color: designSystemTokens.semanticColors.typography.input.default,
+    color: designSystemTokens.semanticColors.color.text.input,
     cursor: 'text',
     boxSizing: 'border-box',
     transition: theme.transitions.create(['border-color', 'background-color'], {
@@ -5298,7 +5352,7 @@ const StyledSearchChip = styles.styled(InputBase)(({ theme }) => ({
         height: 'auto',
         lineHeight: 1,
         '&::placeholder': {
-            color: designSystemTokens.semanticColors.typography.input.placeholder,
+            color: designSystemTokens.semanticColors.color.text.inputPlaceholder,
             opacity: 1,
         },
         // Hide native browser clear button for type="search" (we provide our own)
@@ -5307,22 +5361,22 @@ const StyledSearchChip = styles.styled(InputBase)(({ theme }) => ({
         },
     },
     '&:hover': {
-        backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
-        borderColor: designSystemTokens.semanticColors.accent.border,
+        backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
+        borderColor: designSystemTokens.semanticColors.color.action.border,
     },
     // After `&:hover` so a disabled chip takes no hover feedback -- MUI leaves pointer-events
     // live on the disabled root, so `&:hover` matches it too.
     [`&.${InputBase.inputBaseClasses.disabled}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
-        borderColor: designSystemTokens.semanticColors.border.primary,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+        borderColor: designSystemTokens.semanticColors.color.border.primary,
     },
     // A tint hugging the border, not focusRingStyles' detached ring: even :focus-visible matches a
     // clicked text input, so this has to stay calm. Keep below `&:hover` -- equal specificity, so
     // source order is what keeps a hovered+focused chip white.
     [`&.${InputBase.inputBaseClasses.focused}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
-        borderColor: designSystemTokens.semanticColors.border.focus,
-        outline: `3px solid ${designSystemTokens.semanticColors.accent.tint}`,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
+        borderColor: designSystemTokens.semanticColors.color.border.focus,
+        outline: `3px solid ${designSystemTokens.semanticColors.color.action.tint}`,
     },
 }));
 const ClearButton = styles.styled(ButtonBase)({
@@ -5335,11 +5389,11 @@ const ClearButton = styles.styled(ButtonBase)({
     border: 'none',
     backgroundColor: 'transparent',
     cursor: 'pointer',
-    color: designSystemTokens.semanticColors.icons.default,
+    color: designSystemTokens.semanticColors.color.icon.default,
     flexShrink: 0,
     borderRadius: designSystemTokens.borderRadius.button,
     '&:hover': {
-        backgroundColor: designSystemTokens.semanticColors.buttons.secondary.hoverBackground,
+        backgroundColor: designSystemTokens.semanticColors.button.secondary.bgHover,
     },
 });
 /**
@@ -5350,7 +5404,7 @@ const ClearButton = styles.styled(ButtonBase)({
  */
 const ModSearchChip = ({ onClear, value, ...props }) => {
     const hasValue = Boolean(value && String(value).length > 0);
-    return (jsxRuntime.jsx(StyledSearchChip, { type: "search", value: value, startAdornment: jsxRuntime.jsx(lucideReact.Search, { size: 16, color: designSystemTokens.semanticColors.icons.placeholder, style: { flexShrink: 0 } }), endAdornment: hasValue && onClear ? (jsxRuntime.jsx(ClearButton, { type: "button", onClick: onClear, "aria-label": "Clear search", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })) : undefined, ...props }));
+    return (jsxRuntime.jsx(StyledSearchChip, { type: "search", value: value, startAdornment: jsxRuntime.jsx(lucideReact.Search, { size: 16, color: designSystemTokens.semanticColors.color.icon.placeholder, style: { flexShrink: 0 } }), endAdornment: hasValue && onClear ? (jsxRuntime.jsx(ClearButton, { type: "button", onClick: onClear, "aria-label": "Clear search", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })) : undefined, ...props }));
 };
 ModSearchChip.displayName = 'ModSearchChip';
 
@@ -5384,7 +5438,7 @@ const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffec
 const EXPANDED_WIDTH = 98;
 const COLLAPSED_WIDTH = 68;
 // The fade overlay must end on the same color as the rail to blend cleanly.
-const RAIL_BACKGROUND = designSystemTokens.semanticColors.surfaces.page;
+const RAIL_BACKGROUND = designSystemTokens.semanticColors.color.surface.page;
 // Unclipped positioning context so the edge handle can straddle the rail's
 // trailing edge (Root itself clips its overflow during the width transition).
 const Frame = styles.styled('div', {
@@ -5495,12 +5549,12 @@ const Handle = styles.styled(ButtonBase)(({ theme }) => ({
     height: designSystemTokens.spacing.spacing_5,
     borderRadius: designSystemTokens.borderRadius.s,
     backgroundColor: RAIL_BACKGROUND,
-    border: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
+    color: designSystemTokens.semanticColors.color.text.secondary,
     transition: theme.transitions.create(['color', 'border-color']),
     '&:hover': {
-        color: designSystemTokens.semanticColors.typography.body,
-        borderColor: designSystemTokens.semanticColors.border.primary,
+        color: designSystemTokens.semanticColors.color.text.primary,
+        borderColor: designSystemTokens.semanticColors.color.border.primary,
     },
 }));
 /**
@@ -5587,7 +5641,7 @@ const StyledSkeleton = styles.styled(Skeleton, {
     transform: 'none',
     // Light theme colors
     ...(colorTheme === 'light' && {
-        backgroundColor: designSystemTokens.semanticColors.skeleton.background,
+        backgroundColor: designSystemTokens.semanticColors.skeleton.bg,
         '&::after': {
             background: `linear-gradient(90deg, transparent, ${designSystemTokens.semanticColors.skeleton.wave}, transparent)`,
         },
@@ -5634,23 +5688,23 @@ const StyledTable = styles.styled(MuiTable, {
     borderCollapse: 'separate',
     borderSpacing: 0,
     [`& .${TableCell.tableCellClasses.head}`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.dataGrid.header,
-        color: designSystemTokens.semanticColors.typography.body,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.dataGrid.header,
+        color: designSystemTokens.semanticColors.color.text.primary,
         fontFamily: designSystemTokens.typography.fontFamily.body,
         fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
         fontWeight: designSystemTokens.typography.fontWeight.semiBold,
         lineHeight: 1.4,
         padding: sizePadding[tableSize],
-        borderBottom: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+        borderBottom: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
     },
     [`& .${TableCell.tableCellClasses.body}`]: {
-        color: designSystemTokens.semanticColors.typography.body,
+        color: designSystemTokens.semanticColors.color.text.primary,
         fontFamily: designSystemTokens.typography.fontFamily.body,
         fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
         fontWeight: designSystemTokens.typography.fontWeight.regular,
         lineHeight: 1.4,
         padding: sizePadding[tableSize],
-        borderBottom: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+        borderBottom: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
     },
     // Drop the trailing row's bottom border so the container border (if
     // any) is the visual edge.
@@ -5662,10 +5716,10 @@ const StyledContainer = styles.styled('div', {
     shouldForwardProp: prop => prop !== 'tableVariant',
 })(({ tableVariant = 'bordered' }) => tableVariant === 'bordered'
     ? {
-        border: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+        border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         borderRadius: designSystemTokens.borderRadius.card,
         overflow: 'hidden',
-        backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
     }
     : { backgroundColor: 'transparent' });
 /**
@@ -5693,7 +5747,7 @@ ModTable.displayName = 'ModTable';
 const StyledTabPanel = styles.styled(Box, {
     shouldForwardProp: prop => prop !== 'tabPanelVariant',
 })(({ tabPanelVariant = 'default' }) => ({
-    backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
     // default: 16px top padding for content-driven pages.
     // flush: zero padding so content sits directly against the tab bar's
     // bottom border (sidebars, panels, builders, canvases).
@@ -5731,7 +5785,7 @@ ModTabPanel.displayName = 'ModTabPanel';
 const ModTabs = styles.styled(MuiTabs)(() => ({
     minHeight: designSystemTokens.spacing.spacing_5,
     [`& .${MuiTabs.tabsClasses.indicator}`]: {
-        backgroundColor: designSystemTokens.semanticColors.buttons.navigation.activeBorder,
+        backgroundColor: designSystemTokens.semanticColors.button.nav.borderActive,
         height: 2,
     },
     [`& .${MuiTabs.tabsClasses.list}`]: {
@@ -5746,14 +5800,14 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     fontSize: theme.typography.pxToRem(14),
     lineHeight: '1.5rem',
-    color: designSystemTokens.semanticColors.typography.tab.inactive,
+    color: designSystemTokens.semanticColors.color.text.tabInactive,
     transition: 'none', // Remove animation
     [`&.${MuiTab.tabClasses.selected}`]: {
-        color: designSystemTokens.semanticColors.typography.tab.active,
+        color: designSystemTokens.semanticColors.color.text.tabActive,
         fontWeight: designSystemTokens.typography.fontWeight.semiBold,
     },
     '&:hover': {
-        color: designSystemTokens.semanticColors.typography.tab.active,
+        color: designSystemTokens.semanticColors.color.text.tabActive,
         [`&.${MuiTab.tabClasses.selected}::after`]: {
             content: '""',
             position: 'absolute',
@@ -5761,23 +5815,23 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
             left: 0,
             right: 0,
             height: 2,
-            backgroundColor: designSystemTokens.semanticColors.buttons.navigation.activeBorder,
+            backgroundColor: designSystemTokens.semanticColors.button.nav.borderActive,
         },
     },
     [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-        color: designSystemTokens.semanticColors.typography.tab.active,
-        outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+        color: designSystemTokens.semanticColors.color.text.tabActive,
+        outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
         outlineOffset: -2,
     },
     [`&.${MuiTab.tabClasses.disabled}`]: {
-        color: designSystemTokens.semanticColors.typography.button.disabled,
+        color: designSystemTokens.semanticColors.button.fgDisabled,
         cursor: 'not-allowed',
         pointerEvents: 'auto',
         '&:hover': {
             backgroundColor: 'transparent',
         },
         [`&.${MuiTab.tabClasses.selected}`]: {
-            color: designSystemTokens.semanticColors.typography.button.disabled,
+            color: designSystemTokens.semanticColors.button.fgDisabled,
             '&::after': {
                 content: '""',
                 position: 'absolute',
@@ -5785,7 +5839,7 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
                 left: 0,
                 right: 0,
                 height: 2,
-                backgroundColor: designSystemTokens.semanticColors.buttons.tertiary.disabled,
+                backgroundColor: designSystemTokens.semanticColors.button.tertiary.fgDisabled,
             },
         },
     },
@@ -5806,34 +5860,34 @@ ModTab.displayName = 'ModTab';
 
 const intentStyles = {
     neutral: {
-        background: designSystemTokens.semanticColors.status.neutral.light,
-        border: designSystemTokens.semanticColors.border.primary,
-        text: designSystemTokens.semanticColors.status.neutral.dark,
-        action: designSystemTokens.semanticColors.typography.link.default,
+        background: designSystemTokens.semanticColors.color.status.neutral.bg,
+        border: designSystemTokens.semanticColors.color.border.primary,
+        text: designSystemTokens.semanticColors.color.status.neutral.fg,
+        action: designSystemTokens.semanticColors.color.text.link,
     },
     info: {
-        background: designSystemTokens.semanticColors.toast.infoBg,
-        border: designSystemTokens.semanticColors.toast.infoBorder,
-        text: designSystemTokens.semanticColors.toast.infoText,
-        action: designSystemTokens.semanticColors.toast.infoText,
+        background: designSystemTokens.semanticColors.toast.info.bg,
+        border: designSystemTokens.semanticColors.toast.info.border,
+        text: designSystemTokens.semanticColors.toast.info.fg,
+        action: designSystemTokens.semanticColors.toast.info.fg,
     },
     success: {
-        background: designSystemTokens.semanticColors.toast.successBg,
-        border: designSystemTokens.semanticColors.toast.successBorder,
-        text: designSystemTokens.semanticColors.toast.successText,
-        action: designSystemTokens.semanticColors.toast.successText,
+        background: designSystemTokens.semanticColors.toast.success.bg,
+        border: designSystemTokens.semanticColors.toast.success.border,
+        text: designSystemTokens.semanticColors.toast.success.fg,
+        action: designSystemTokens.semanticColors.toast.success.fg,
     },
     error: {
-        background: designSystemTokens.semanticColors.toast.errorBg,
-        border: designSystemTokens.semanticColors.toast.errorBorder,
-        text: designSystemTokens.semanticColors.toast.errorText,
-        action: designSystemTokens.semanticColors.toast.errorText,
+        background: designSystemTokens.semanticColors.toast.error.bg,
+        border: designSystemTokens.semanticColors.toast.error.border,
+        text: designSystemTokens.semanticColors.toast.error.fg,
+        action: designSystemTokens.semanticColors.toast.error.fg,
     },
     warning: {
-        background: designSystemTokens.semanticColors.toast.warningBg,
-        border: designSystemTokens.semanticColors.toast.warningBorder,
-        text: designSystemTokens.semanticColors.toast.warningText,
-        action: designSystemTokens.semanticColors.toast.warningText,
+        background: designSystemTokens.semanticColors.toast.warning.bg,
+        border: designSystemTokens.semanticColors.toast.warning.border,
+        text: designSystemTokens.semanticColors.toast.warning.fg,
+        action: designSystemTokens.semanticColors.toast.warning.fg,
     },
 };
 const shadowRegular = designSystemTokens.shadows.neutral.regular;
@@ -5908,7 +5962,7 @@ const ToastButton = styles.styled(Button, {
  * ModToast - Notification/Toast component based on MUI Alert
  */
 const ModToast = ({ intent = 'neutral', type: _type, title, message, showClose = false, actions, onClose, ...props }) => {
-    return (jsxRuntime.jsxs(StyledAlert, { ...props, intent: intent, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: designSystemTokens.semanticColors.icons.utility }, children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${designSystemTokens.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { intent: intent, children: title }), message && jsxRuntime.jsx(ToastMessage, { intent: intent, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
+    return (jsxRuntime.jsxs(StyledAlert, { ...props, intent: intent, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: designSystemTokens.semanticColors.color.icon.utility }, children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${designSystemTokens.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { intent: intent, children: title }), message && jsxRuntime.jsx(ToastMessage, { intent: intent, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
@@ -5935,13 +5989,13 @@ const Label = styles.styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? designSystemTokens.typography.fontSize.sm : designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.medium,
     lineHeight: size === 'small' ? 1.4 : 1.5,
-    color: designSystemTokens.semanticColors.typography.input.default,
+    color: designSystemTokens.semanticColors.color.text.input,
 }));
 const HelperText = styles.styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? designSystemTokens.typography.fontSize.sm : designSystemTokens.typography.fontSize.default),
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     lineHeight: size === 'small' ? 1.4 : 1.5,
-    color: designSystemTokens.semanticColors.typography.bodySecondary,
+    color: designSystemTokens.semanticColors.color.text.secondary,
 }));
 const StyledSwitch = styles.styled(Switch, {
     shouldForwardProp: prop => prop !== 'size',
@@ -5974,23 +6028,23 @@ const StyledSwitch = styles.styled(Switch, {
         // Root element
         [`& .${Switch.switchClasses.switchBase}`]: {
             padding: config.trackPadding,
-            color: designSystemTokens.semanticColors.surfaces.toggleKnob,
+            color: designSystemTokens.semanticColors.control.knob,
             transition: theme.transitions.create(['transform'], {
                 duration: theme.transitions.duration.shortest,
             }),
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
                 [`& + .${Switch.switchClasses.track}`]: {
-                    outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+                    outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
                     outlineOffset: 2,
                 },
             },
             // Checked state
             [`&.${Switch.switchClasses.checked}`]: {
                 transform: `translateX(${thumbTranslate}px)`,
-                color: designSystemTokens.semanticColors.surfaces.toggleKnob,
+                color: designSystemTokens.semanticColors.control.knob,
                 [`& + .${Switch.switchClasses.track}`]: {
-                    backgroundColor: designSystemTokens.semanticColors.buttons.primary.default,
+                    backgroundColor: designSystemTokens.semanticColors.button.primary.bg,
                     opacity: 1,
                     border: 'none',
                 },
@@ -5998,18 +6052,18 @@ const StyledSwitch = styles.styled(Switch, {
             // Disabled state
             [`&.${Switch.switchClasses.disabled}`]: {
                 // Thumb changes to disabled background color for both checked and unchecked
-                color: designSystemTokens.semanticColors.input.disabledBackground,
+                color: designSystemTokens.semanticColors.input.bgDisabled,
                 cursor: 'not-allowed',
                 // Both checked and unchecked use the same grey track when disabled
                 [`& + .${Switch.switchClasses.track}`]: {
-                    backgroundColor: designSystemTokens.semanticColors.border.secondary,
+                    backgroundColor: designSystemTokens.semanticColors.color.border.primary,
                     opacity: 1,
                     border: 'none',
                 },
             },
             // More specific selector for disabled+checked to override checked color
             [`&.${Switch.switchClasses.disabled}.${Switch.switchClasses.checked}`]: {
-                color: designSystemTokens.semanticColors.input.disabledBackground,
+                color: designSystemTokens.semanticColors.input.bgDisabled,
             },
         },
         // Thumb
@@ -6026,12 +6080,12 @@ const StyledSwitch = styles.styled(Switch, {
             width: config.width,
             height: config.height,
             borderRadius: config.height / 2,
-            backgroundColor: designSystemTokens.semanticColors.surface.sunken2,
+            backgroundColor: designSystemTokens.semanticColors.color.surface.sunkenDeep,
             opacity: 1,
             // Off track carries a border; box-sizing keeps the 1px inside the
             // configured width/height. Checked/disabled states reset it below.
             boxSizing: 'border-box',
-            border: `1px solid ${designSystemTokens.semanticColors.border.strong}`,
+            border: `1px solid ${designSystemTokens.semanticColors.color.border.strong}`,
             transition: theme.transitions.create(['background-color'], {
                 duration: theme.transitions.duration.short,
             }),
@@ -6092,7 +6146,7 @@ const StyledToggleButton$1 = styles.styled(MuiToggleButton, {
         fontSize: theme.typography.pxToRem(sizeStyles[toggleSize].fontSize),
         fontWeight: designSystemTokens.typography.fontWeight.regular,
         lineHeight: 1,
-        color: segmented ? designSystemTokens.semanticColors.typography.body : designSystemTokens.semanticColors.typography.bodySecondary,
+        color: segmented ? designSystemTokens.semanticColors.color.text.primary : designSystemTokens.semanticColors.color.text.secondary,
         backgroundColor: 'transparent',
         border: 'none',
         // Segmented buttons are independent rounded pills on the group's track.
@@ -6102,22 +6156,22 @@ const StyledToggleButton$1 = styles.styled(MuiToggleButton, {
             duration: theme.transitions.duration.short,
         }),
         '&:hover': {
-            backgroundColor: segmented ? 'transparent' : designSystemTokens.semanticColors.surfaces.tabActive,
-            color: designSystemTokens.semanticColors.typography.body,
+            backgroundColor: segmented ? 'transparent' : designSystemTokens.semanticColors.color.surface.tabActive,
+            color: designSystemTokens.semanticColors.color.text.primary,
         },
         '&.Mui-selected, &.Mui-selected:hover': {
             backgroundColor: segmented
-                ? designSystemTokens.semanticColors.surfaces.card
-                : designSystemTokens.semanticColors.surfaces.tabActive,
-            color: segmented ? designSystemTokens.semanticColors.accent.default : designSystemTokens.semanticColors.typography.body,
+                ? designSystemTokens.semanticColors.color.surface.raised
+                : designSystemTokens.semanticColors.color.surface.tabActive,
+            color: segmented ? designSystemTokens.semanticColors.color.action.default : designSystemTokens.semanticColors.color.text.primary,
             fontWeight: designSystemTokens.typography.fontWeight.semiBold,
         },
         '&.Mui-focusVisible': {
-            outline: `2px solid ${designSystemTokens.semanticColors.border.focus}`,
+            outline: `2px solid ${designSystemTokens.semanticColors.color.border.focus}`,
             outlineOffset: -2,
         },
         '&.Mui-disabled': {
-            color: designSystemTokens.semanticColors.typography.button.disabled,
+            color: designSystemTokens.semanticColors.button.fgDisabled,
             cursor: 'default',
             pointerEvents: 'none',
         },
@@ -6141,7 +6195,7 @@ const StyledToggleButtonGroup$1 = styles.styled(MuiToggleButtonGroup, {
         ...(segmented
             ? {
                 // Sunken track holding raised pills (the Morpheus `.seg` control).
-                backgroundColor: designSystemTokens.semanticColors.surface.sunken2,
+                backgroundColor: designSystemTokens.semanticColors.color.surface.sunkenDeep,
                 borderRadius: designSystemTokens.borderRadius.input,
                 border: 'none',
                 padding: designSystemTokens.spacing.spacing_1_2,
@@ -6149,7 +6203,7 @@ const StyledToggleButtonGroup$1 = styles.styled(MuiToggleButtonGroup, {
             }
             : {
                 borderRadius: designSystemTokens.borderRadius.button,
-                border: `1px solid ${designSystemTokens.semanticColors.border.secondary}`,
+                border: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
                 overflow: 'hidden',
             }),
         // Default fuses the children (square inner corners, no gap); segmented
@@ -6183,7 +6237,7 @@ const ModToggleButtonGroup = ({ size = 'medium', variant = 'default', children,
 ModToggleButtonGroup.displayName = 'ModToggleButtonGroup';
 
 const StyledToolbar = styles.styled(xDataGrid.Toolbar)(({ theme }) => ({
-    backgroundColor: designSystemTokens.semanticColors.surfaces.white,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
     minHeight: 'auto',
     justifyContent: 'space-between',
     // Apply padding directly to match Figma design (16px horizontal, 12px vertical)
@@ -6276,7 +6330,7 @@ const ItemIcon = styles.styled('span')({
     width: 16,
     height: 16,
     flexShrink: 0,
-    color: designSystemTokens.semanticColors.icons.default,
+    color: designSystemTokens.semanticColors.color.icon.default,
     '& svg': {
         width: 16,
         height: 16,
@@ -6294,13 +6348,13 @@ const ItemSecondaryLabel = styles.styled('span')({
     fontSize: designSystemTokens.typography.fontSize.xs,
     fontWeight: designSystemTokens.typography.fontWeight.regular,
     fontFamily: designSystemTokens.typography.fontFamily.body,
-    color: designSystemTokens.semanticColors.typography.link.primary,
+    color: designSystemTokens.semanticColors.color.text.link,
 });
 const ItemEndAction = styles.styled('span')({
     display: 'inline-flex',
     alignItems: 'center',
     flexShrink: 0,
-    color: designSystemTokens.semanticColors.icons.utility,
+    color: designSystemTokens.semanticColors.color.icon.utility,
     '& svg': {
         width: 16,
         height: 16,
@@ -6336,36 +6390,36 @@ const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
         borderRadius: 0,
     },
     [`& .${TreeItem.treeItemClasses.content}:hover`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
     },
     [`& .${TreeItem.treeItemClasses.content}[data-focused]`]: {
-        boxShadow: `inset 0 0 0 2px ${designSystemTokens.semanticColors.border.focus}`,
+        boxShadow: `inset 0 0 0 2px ${designSystemTokens.semanticColors.color.border.focus}`,
         backgroundColor: 'transparent',
     },
     [`& .${TreeItem.treeItemClasses.content}[data-selected]`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
     },
     [`& .${TreeItem.treeItemClasses.content}[data-selected][data-focused]`]: {
-        backgroundColor: designSystemTokens.semanticColors.surfaces.listHover,
-        boxShadow: `inset 0 0 0 2px ${designSystemTokens.semanticColors.border.focus}`,
+        backgroundColor: designSystemTokens.semanticColors.color.surface.rowHover,
+        boxShadow: `inset 0 0 0 2px ${designSystemTokens.semanticColors.color.border.focus}`,
     },
     [`& .${TreeItem.treeItemClasses.label}`]: {
         fontSize: designSystemTokens.typography.fontSize.xs,
         fontWeight: designSystemTokens.typography.fontWeight.regular,
         fontFamily: designSystemTokens.typography.fontFamily.body,
-        color: designSystemTokens.semanticColors.typography.body,
+        color: designSystemTokens.semanticColors.color.text.primary,
         padding: 0,
     },
     [`& .${TreeItem.treeItemClasses.iconContainer}`]: {
         width: 16,
-        color: designSystemTokens.semanticColors.icons.default,
+        color: designSystemTokens.semanticColors.color.icon.default,
         '& svg': {
             width: 16,
             height: 16,
         },
     },
     [`& .${TreeItem.treeItemClasses.groupTransition}`]: {
-        borderLeft: `1px solid ${designSystemTokens.semanticColors.border.primary}`,
+        borderLeft: `1px solid ${designSystemTokens.semanticColors.color.border.primary}`,
         marginLeft: designSystemTokens.spacing.spacing_1_1_4,
     },
 });
@@ -6373,7 +6427,7 @@ const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
 // Figma-exact border radius for toggle buttons — no matching design token
 const TOGGLE_BUTTON_BORDER_RADIUS = 14;
 const StyledToggleButtonGroup = styles.styled(MuiToggleButtonGroup)(({ theme }) => ({
-    backgroundColor: designSystemTokens.semanticColors.surfaces.card,
+    backgroundColor: designSystemTokens.semanticColors.color.surface.raised,
     padding: theme.spacing(0.625, 0.875),
     borderRadius: designSystemTokens.borderRadius.m,
     gap: 0,
@@ -6393,7 +6447,7 @@ const StyledToggleButtonGroup = styles.styled(MuiToggleButtonGroup)(({ theme })
 const StyledToggleButton = styles.styled(MuiToggleButton)(({ theme }) => ({
     padding: theme.spacing(0.625),
     minWidth: 'auto',
-    color: designSystemTokens.semanticColors.icons.default,
+    color: designSystemTokens.semanticColors.color.icon.default,
     border: 'none',
     '& svg': {
         width: 20,
@@ -6403,10 +6457,10 @@ const StyledToggleButton = styles.styled(MuiToggleButton)(({ theme }) => ({
         backgroundColor: 'transparent',
     },
     [`&.${MuiToggleButton.toggleButtonClasses.selected}`]: {
-        backgroundColor: designSystemTokens.semanticColors.buttons.navigation.pressedBackground,
-        color: designSystemTokens.semanticColors.icons.active,
+        backgroundColor: designSystemTokens.semanticColors.button.nav.bgPressed,
+        color: designSystemTokens.semanticColors.color.icon.active,
         '&:hover': {
-            backgroundColor: designSystemTokens.semanticColors.buttons.navigation.pressedBackground,
+            backgroundColor: designSystemTokens.semanticColors.button.nav.bgPressed,
         },
     },
 }));