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

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticColorsDark, semanticTypography } from '@moderneinc/design-system-tokens';
 import Box from '@mui/material/Box';
-import { styled, alpha } from '@mui/material/styles';
+import { styled, useTheme, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
 import MuiAvatar from '@mui/material/Avatar';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -9,7 +9,7 @@ import Alert, { alertClasses } from '@mui/material/Alert';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { BadgeInfo, WifiOff, TriangleAlert, CircleAlert, CircleCheckBig, X, ChevronRight, Square, SquareCheck, SquareMinus, Search, ChevronDown, Plus, Trash2, ArrowUp, ArrowDown, ChevronsUpDown, Columns3, ListFilter, HelpCircle, CalendarDays, Minus, ChevronLeft, AlertCircle, ChevronUp } from 'lucide-react';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import React, { useState, useRef, useCallback, useMemo, useEffect, createContext, useContext, useLayoutEffect, Children, isValidElement, cloneElement, forwardRef } from 'react';
+import React, { useState, useRef, useCallback, useMemo, forwardRef, useEffect, createContext, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -24,9 +24,11 @@ import Divider from '@mui/material/Divider';
 import InputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment';
 import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
 import TextField from '@mui/material/TextField';
+import FormControl from '@mui/material/FormControl';
 import { formLabelClasses } from '@mui/material/FormLabel';
-import InputLabel, { inputLabelClasses } from '@mui/material/InputLabel';
+import MuiInputLabel, { inputLabelClasses } from '@mui/material/InputLabel';
 import MuiSelect, { selectClasses } from '@mui/material/Select';
+import { mergeSlotProps, useForkRef } from '@mui/material/utils';
 import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
@@ -41,7 +43,6 @@ import { startOfDay, endOfDay, subDays, startOfMonth, subMonths, endOfMonth, sta
 import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Paper, { paperClasses } from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
-import FormControl from '@mui/material/FormControl';
 import FormHelperText, { formHelperTextClasses } from '@mui/material/FormHelperText';
 import ListItemButton, { listItemButtonClasses } from '@mui/material/ListItemButton';
 import ListItemIcon, { listItemIconClasses } from '@mui/material/ListItemIcon';
@@ -80,29 +81,35 @@ import { RichTreeViewPro } from '@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 = [
-    [chipClasses.colorDefault, semanticColors.status.neutral],
-    [chipClasses.colorError, semanticColors.status.error],
-    [chipClasses.colorWarning, semanticColors.status.warning],
-    [chipClasses.colorSuccess, semanticColors.status.success],
-    [chipClasses.colorInfo, semanticColors.status.info],
+    [chipClasses.colorDefault, semanticColors.color.status.neutral],
+    [chipClasses.colorError, semanticColors.color.status.error],
+    [chipClasses.colorWarning, semanticColors.color.status.warning],
+    [chipClasses.colorSuccess, semanticColors.color.status.success],
+    [chipClasses.colorInfo, semanticColors.color.status.info],
 ];
 const outlinedColorOverrides = {
     backgroundColor: 'transparent',
-    color: semanticColors.typography.bodySecondary,
-    border: `1px solid ${semanticColors.border.secondary}`,
+    color: semanticColors.color.text.secondary,
+    border: `1px solid ${semanticColors.color.border.primary}`,
     [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
-        color: semanticColors.typography.bodySecondary,
+        color: 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}`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
-            color: palette.dark,
+            color: palette.fg,
         },
     },
 ]));
@@ -176,7 +183,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 ${semanticColors.border.focus}`,
+    outline: `2px solid ${semanticColors.color.border.focus}`,
     outlineOffset: '2px',
 };
 
@@ -184,9 +191,14 @@ const sizeConfig$1 = {
     small: { size: spacing.spacing_2_1_2, fontSize: typography.fontSize.xs },
     medium: { size: spacing.spacing_4, fontSize: 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: semanticColors.avatar.initials[`text${colorIndex}`],
-    backgroundColor: semanticColors.avatar.initials[`background${colorIndex}`],
+    color: semanticColors.avatar.initials[`fg${colorIndex}`],
+    backgroundColor: semanticColors.avatar.initials[`bg${colorIndex}`],
     borderColor: semanticColors.avatar.initials[`border${colorIndex}`],
 });
 const StyledAvatar = styled(MuiAvatar, {
@@ -201,13 +213,13 @@ const StyledAvatar = styled(MuiAvatar, {
         fontFamily: typography.fontFamily.body,
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1,
-        color: semanticColors.avatar.userDefaultText,
-        backgroundColor: semanticColors.avatar.userDefaultBg,
-        border: `1px solid ${semanticColors.border.primary}`,
+        color: semanticColors.avatar.user.fg,
+        backgroundColor: semanticColors.avatar.user.bg,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         ...(avatarColorIndex && indexedColors(avatarColorIndex)),
         '&:focus-visible': {
             ...focusRingStyles,
-            borderColor: semanticColors.border.focus,
+            borderColor: semanticColors.color.border.focus,
         },
     };
 });
@@ -322,7 +334,7 @@ const HeaderContainer = styled(Box)(({ size }) => {
     return {
         width: '34px',
         height: `${modRowHeights[size]}px`,
-        borderBottom: `1px solid ${semanticColors.border.secondary}`,
+        borderBottom: `1px solid ${semanticColors.color.border.primary}`,
         boxSizing: 'border-box',
         display: 'flex',
         alignItems: 'center',
@@ -430,7 +442,7 @@ const ModActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
     if (scene === ActivityScene.BLANK) {
         return null;
     }
-    const color = event !== 'none' ? ACTIVITY_COLORS[event] : semanticColors.border.secondary;
+    const color = event !== 'none' ? ACTIVITY_COLORS[event] : 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) {
@@ -458,12 +470,18 @@ const ModActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 ModActivityIndicatorCell.displayName = 'ModActivityIndicatorCell';
 
 const neutralSmallShadow = `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${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: semanticColors.status.success,
-    error: semanticColors.status.error,
-    warning: semanticColors.status.warning,
-    offline: semanticColors.status.neutral,
-    info: semanticColors.status.info,
+    success: semanticColors.color.status.success,
+    error: semanticColors.color.status.error,
+    warning: semanticColors.color.status.warning,
+    offline: semanticColors.color.status.neutral,
+    info: semanticColors.color.status.info,
 };
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert$2 = styled(Alert, {
@@ -472,10 +490,10 @@ const StyledAlert$2 = styled(Alert, {
     const palette = intentColors$1[intent];
     const isFilled = alertType === 'filled';
     const isCompact = alertSize === 'compact';
-    const iconColor = isFilled ? semanticColors.typography.tooltip.default : palette.default;
+    const iconColor = isFilled ? semanticColors.color.text.tooltip : palette.solid;
     const messageColor = isFilled
-        ? semanticColors.typography.tooltip.default
-        : semanticColors.typography.body;
+        ? semanticColors.color.text.tooltip
+        : semanticColors.color.text.primary;
     return {
         ...(isCompact
             ? { minHeight: spacing.spacing_5 }
@@ -492,9 +510,9 @@ const StyledAlert$2 = styled(Alert, {
         padding: hasChildren
             ? `${spacing.spacing_1_1_2}px ${spacing.spacing_2}px`
             : `0 ${spacing.spacing_2}px`,
-        backgroundColor: isFilled ? palette.dark : palette.light,
-        border: isFilled ? 'none' : `1px solid ${palette.transparent}`,
-        color: isFilled ? semanticColors.typography.tooltip.default : semanticColors.typography.body,
+        backgroundColor: isFilled ? palette.fg : palette.bg,
+        border: isFilled ? 'none' : `1px solid ${palette.tint}`,
+        color: isFilled ? semanticColors.color.text.tooltip : semanticColors.color.text.primary,
         boxShadow: isFilled ? neutralSmallShadow : undefined,
         [`& .${alertClasses.icon}`]: {
             color: iconColor,
@@ -512,9 +530,7 @@ const StyledAlert$2 = styled(Alert, {
             '& span:last-child': {
                 fontSize: theme.typography.pxToRem(typography.fontSize.sm),
                 fontWeight: typography.fontWeight.medium,
-                color: isFilled
-                    ? semanticColors.typography.tooltip.default
-                    : semanticColors.typography.bodySecondary,
+                color: isFilled ? semanticColors.color.text.tooltip : semanticColors.color.text.secondary,
                 lineHeight: 1.4,
             },
         },
@@ -522,7 +538,7 @@ const StyledAlert$2 = styled(Alert, {
             padding: 0,
             marginRight: 0,
             ...(isFilled && {
-                color: semanticColors.typography.tooltip.default,
+                color: semanticColors.color.text.tooltip,
                 [`& .${buttonBaseClasses.root}`]: { color: 'inherit' },
             }),
         },
@@ -544,12 +560,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: semanticColors.status.info,
-    success: semanticColors.status.success,
-    error: semanticColors.status.error,
-    warning: semanticColors.status.warning,
-    neutral: semanticColors.status.neutral,
+    info: semanticColors.color.status.info,
+    success: semanticColors.color.status.success,
+    error: semanticColors.color.status.error,
+    warning: semanticColors.color.status.warning,
+    neutral: semanticColors.color.status.neutral,
 };
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert$1 = styled(Alert, {
@@ -558,12 +580,12 @@ const StyledAlert$1 = styled(Alert, {
     const palette = intentColors[intent];
     const typeStyles = bannerType === 'filled'
         ? {
-            backgroundColor: palette.dark,
-            color: semanticColors.surfaces.white,
+            backgroundColor: palette.fg,
+            color: semanticColors.color.surface.raised,
         }
         : {
-            backgroundColor: palette.light,
-            color: semanticColors.typography.body,
+            backgroundColor: palette.bg,
+            color: semanticColors.color.text.primary,
         };
     return {
         width: '100%',
@@ -612,8 +634,8 @@ const LinkText = styled('span')(({ bannerType = 'outlined' }) => ({
     marginLeft: 'auto',
     fontWeight: typography.fontWeight.semiBold,
     color: bannerType === 'filled'
-        ? semanticColors.typography.link.white
-        : semanticColors.typography.link.primary,
+        ? semanticColors.color.text.linkOnBrand
+        : semanticColors.color.text.link,
     cursor: 'pointer',
     whiteSpace: 'nowrap',
     '&:hover': {
@@ -640,7 +662,7 @@ const ModBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
     if (dismissed) {
         return null;
     }
-    const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors[intent].default;
+    const closeIconColor = type === 'filled' ? semanticColors.color.surface.raised : intentColors[intent].solid;
     return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 16 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 ModBanner.displayName = 'ModBanner';
@@ -648,7 +670,7 @@ ModBanner.displayName = 'ModBanner';
 const StyledBreadcrumbs = styled(Breadcrumbs)(() => ({
     [`& .${breadcrumbsClasses.separator}`]: {
         margin: 0,
-        color: semanticColors.icons.utility,
+        color: semanticColors.color.icon.utility,
     },
     [`& .${breadcrumbsClasses.ol}`]: {
         gap: spacing.spacing_1,
@@ -661,15 +683,15 @@ const StyledBreadcrumbLink = styled(Link, {
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1,
     textDecoration: 'none',
-    color: current ? semanticColors.typography.bodySecondary : semanticColors.typography.link.primary,
+    color: current ? semanticColors.color.text.secondary : semanticColors.color.text.link,
     cursor: current ? 'default' : 'pointer',
     borderRadius: borderRadius.xS,
     transition: 'color 0.2s ease-in-out',
     '&:hover': {
-        color: current ? semanticColors.icons.hover : semanticColors.buttons.tertiary.hover,
+        color: current ? semanticColors.color.icon.hover : semanticColors.button.tertiary.fgHover,
     },
     '&:focus-visible': {
-        outline: `2px solid ${semanticColors.border.focus}`,
+        outline: `2px solid ${semanticColors.color.border.focus}`,
         outlineOffset: 2,
     },
 }));
@@ -707,7 +729,7 @@ function ModBreadcrumbLink({ current = false, children, component, ...props }) {
  * ```
  */
 function ModBreadcrumbs({ children, className }) {
-    return (jsx(StyledBreadcrumbs, { separator: jsx(ChevronRight, { size: 10.67, color: semanticColors.icons.utility }), className: className, "aria-label": "breadcrumb", children: children }));
+    return (jsx(StyledBreadcrumbs, { separator: jsx(ChevronRight, { size: 10.67, color: 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)
@@ -759,90 +781,90 @@ const StyledButtonBase$1 = styled(ButtonBase, {
         },
         // Focus visible for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.border.focus}`,
+            outline: `2px solid ${semanticColors.color.border.focus}`,
             outlineOffset: 2,
         },
     };
     // Variant-specific styles
     const variantStyles = {
         primary: {
-            backgroundColor: semanticColors.buttons.primary.default,
-            color: semanticColors.surfaces.white,
+            backgroundColor: semanticColors.button.primary.bg,
+            color: semanticColors.color.surface.raised,
             border: 'none',
             '&:hover': {
-                backgroundColor: semanticColors.buttons.primary.hover,
+                backgroundColor: semanticColors.button.primary.bgHover,
             },
             '&:active': {
-                backgroundColor: semanticColors.buttons.primary.pressed,
+                backgroundColor: semanticColors.button.primary.bgPressed,
             },
             ...(loading
                 ? {}
                 : {
                     [`&.${buttonBaseClasses.disabled}`]: {
-                        backgroundColor: semanticColors.buttons.primary.disabled,
-                        color: semanticColors.typography.button.disabled,
+                        backgroundColor: semanticColors.button.primary.bgDisabled,
+                        color: semanticColors.button.fgDisabled,
                     },
                 }),
         },
         secondary: {
-            backgroundColor: semanticColors.buttons.secondary.defaultBackground,
-            color: semanticColors.buttons.secondary.default,
-            border: `1px solid ${semanticColors.buttons.secondary.defaultBorder}`,
+            backgroundColor: semanticColors.button.secondary.bg,
+            color: semanticColors.button.secondary.fg,
+            border: `1px solid ${semanticColors.button.secondary.border}`,
             '&:hover': {
-                backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+                backgroundColor: semanticColors.button.secondary.bgHover,
             },
             '&:active': {
-                backgroundColor: semanticColors.buttons.secondary.pressedBackground,
+                backgroundColor: semanticColors.button.secondary.bgPressed,
             },
             ...(loading
                 ? {}
                 : {
                     [`&.${buttonBaseClasses.disabled}`]: {
-                        backgroundColor: semanticColors.buttons.secondary.disabledBackground,
-                        borderColor: semanticColors.border.secondary,
-                        color: semanticColors.typography.button.disabled,
+                        backgroundColor: semanticColors.button.secondary.bgDisabled,
+                        borderColor: semanticColors.color.border.primary,
+                        color: semanticColors.button.fgDisabled,
                     },
                 }),
         },
         destructive: {
-            backgroundColor: semanticColors.buttons.destructive,
-            color: semanticColors.surfaces.white,
+            backgroundColor: semanticColors.button.destructive.bg,
+            color: semanticColors.color.surface.raised,
             border: 'none',
             '&:hover': {
-                backgroundColor: semanticColors.status.error.dark,
+                backgroundColor: semanticColors.color.status.error.fg,
             },
             '&:active': {
-                backgroundColor: semanticColors.status.error.dark,
+                backgroundColor: semanticColors.color.status.error.fg,
                 filter: 'brightness(0.9)',
             },
             ...(loading
                 ? {}
                 : {
                     [`&.${buttonBaseClasses.disabled}`]: {
-                        backgroundColor: semanticColors.buttons.primary.disabled,
-                        color: semanticColors.typography.button.disabled,
+                        backgroundColor: semanticColors.button.primary.bgDisabled,
+                        color: semanticColors.button.fgDisabled,
                     },
                 }),
         },
         tertiary: {
             backgroundColor: 'transparent',
-            color: semanticColors.typography.input.default,
+            color: semanticColors.color.text.input,
             border: 'none',
             padding: 0,
             lineHeight: 1,
             '&:hover': {
                 backgroundColor: 'transparent',
-                color: semanticColors.buttons.tertiary.hover,
+                color: semanticColors.button.tertiary.fgHover,
             },
             '&:active': {
-                color: semanticColors.buttons.tertiary.pressed,
+                color: semanticColors.button.tertiary.fgPressed,
             },
             ...(loading
                 ? {}
                 : {
                     [`&.${buttonBaseClasses.disabled}`]: {
                         backgroundColor: 'transparent',
-                        color: semanticColors.buttons.tertiary.disabled,
+                        color: semanticColors.button.tertiary.fgDisabled,
                     },
                 }),
         },
@@ -857,10 +879,10 @@ const LoadingSpinner = styled(CircularProgress, {
 })(({ $variant }) => {
     // Use appropriate spinner color for each variant to ensure visibility
     const spinnerColors = {
-        primary: semanticColors.surfaces.white,
-        secondary: semanticColors.buttons.primary.default,
-        destructive: semanticColors.surfaces.white,
-        tertiary: semanticColors.buttons.tertiary.default,
+        primary: semanticColors.color.surface.raised,
+        secondary: semanticColors.button.primary.bg,
+        destructive: semanticColors.color.surface.raised,
+        tertiary: semanticColors.button.tertiary.fg,
     };
     return {
         color: spinnerColors[$variant],
@@ -878,7 +900,7 @@ const StyledButtonTab = styled(MuiToggleButton)(({ theme }) => ({
     fontFamily: typography.fontFamily.body,
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     lineHeight: 1,
-    color: semanticColors.typography.tab.inactive,
+    color: semanticColors.color.text.tabInactive,
     backgroundColor: 'transparent',
     border: 'none',
     padding: `${spacing.spacing_1}px ${spacing.spacing_1_1_2}px`,
@@ -888,15 +910,15 @@ const StyledButtonTab = styled(MuiToggleButton)(({ theme }) => ({
         duration: theme.transitions.duration.short,
     }),
     '&:hover': {
-        color: semanticColors.typography.tab.active,
+        color: semanticColors.color.text.tabActive,
     },
     '&.Mui-focusVisible': {
-        outline: `2px solid ${semanticColors.border.focus}`,
+        outline: `2px solid ${semanticColors.color.border.focus}`,
         outlineOffset: -2,
         borderRadius: borderRadius.xXS,
     },
     '&.Mui-disabled': {
-        color: semanticColors.typography.button.disabled,
+        color: semanticColors.button.fgDisabled,
         cursor: 'default',
         pointerEvents: 'none',
     },
@@ -958,7 +980,7 @@ const StyledButtonTabGroup = styled(MuiToggleButtonGroup)(({ theme, size = 'medi
     };
     return {
         borderRadius: borderRadius.button,
-        border: `1px solid ${semanticColors.border.primary}`,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         overflow: 'hidden',
         // Style all grouped children
         [`& .${toggleButtonGroupClasses.grouped}`]: {
@@ -971,26 +993,26 @@ const StyledButtonTabGroup = styled(MuiToggleButtonGroup)(({ theme, size = 'medi
             lineHeight: 1,
             textTransform: 'none',
             border: 'none',
-            borderRight: `1px solid ${semanticColors.border.primary}`,
+            borderRight: `1px solid ${semanticColors.color.border.primary}`,
             borderRadius: 0,
-            color: semanticColors.typography.tab.inactive,
-            backgroundColor: semanticColors.buttons.secondary.disabledBackground,
+            color: semanticColors.color.text.tabInactive,
+            backgroundColor: 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
             [`&.${toggleButtonClasses.selected}.${toggleButtonClasses.selected}`]: {
-                backgroundColor: semanticColors.surfaces.white,
-                color: semanticColors.buttons.tertiary.default,
+                backgroundColor: semanticColors.color.surface.raised,
+                color: semanticColors.button.tertiary.fg,
                 fontWeight: typography.fontWeight.semiBold,
             },
             // Hover state
             [`&:hover, &.${toggleButtonClasses.selected}:hover`]: {
-                backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+                backgroundColor: semanticColors.button.secondary.bgHover,
             },
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
-                outline: `2px solid ${semanticColors.border.focus}`,
+                outline: `2px solid ${semanticColors.color.border.focus}`,
                 outlineOffset: -2,
                 zIndex: 1,
             },
@@ -1007,8 +1029,8 @@ const StyledButtonTabGroup = styled(MuiToggleButtonGroup)(({ theme, size = 'medi
             },
             // Disabled state
             [`&.${toggleButtonClasses.disabled}`]: {
-                backgroundColor: semanticColors.buttons.secondary.disabledBackground,
-                color: semanticColors.typography.button.disabled,
+                backgroundColor: semanticColors.button.secondary.bgDisabled,
+                color: semanticColors.button.fgDisabled,
                 cursor: 'not-allowed',
                 pointerEvents: 'auto',
             },
@@ -1053,18 +1075,18 @@ const SmallStyledCard = styled(MuiCard, {
     display: 'flex',
     flexDirection: 'column',
     gap: spacing.spacing_2, // 16px
-    backgroundColor: semanticColors.surfaces.card,
-    border: `1px solid ${selected ? semanticColors.buttons.primary.default : semanticColors.border.primary}`,
+    backgroundColor: semanticColors.color.surface.raised,
+    border: `1px solid ${selected ? semanticColors.button.primary.bg : semanticColors.color.border.primary}`,
     borderRadius: borderRadius.card,
     boxShadow: selected ? activeShadow : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: semanticColors.buttons.primary.default,
+        borderColor: semanticColors.button.primary.bg,
         boxShadow: activeShadow,
     },
     '&:focus-visible': {
-        borderColor: semanticColors.buttons.primary.default,
+        borderColor: semanticColors.button.primary.bg,
         ...focusRingStyles,
     },
     ...(disabled && {
@@ -1089,7 +1111,7 @@ const SmallRecipeCount = styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.xxs), // 10px
     fontWeight: typography.fontWeight.semiBold, // 600
     lineHeight: 1.2,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     whiteSpace: 'nowrap',
 }));
 const SmallCardContent = styled('div')(() => ({
@@ -1103,7 +1125,7 @@ const SmallTitle = styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.h6), // 16px
     fontWeight: typography.fontWeight.semiBold, // 600
     lineHeight: 1.4,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     width: '100%',
 }));
 const SmallDescription = styled('p')(({ theme }) => ({
@@ -1111,7 +1133,7 @@ const SmallDescription = styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.xs), // 12px
     fontWeight: typography.fontWeight.regular, // 400
     lineHeight: 1.5,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     width: '100%',
     display: '-webkit-box',
     WebkitLineClamp: 2,
@@ -1128,12 +1150,10 @@ const LargeStyledCard = 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
-        ? semanticColors.buttons.primary.default
-        : colors.digitalGreen[300];
+    const activeBorderColor = isLight ? semanticColors.button.primary.bg : colors.digitalGreen[300];
     const defaultBorderColor = isLight
-        ? semanticColors.border.primary
-        : semanticColorsDark.border.primary;
+        ? semanticColors.color.border.primary
+        : semanticColorsDark.color.border.primary;
     return {
         width: 340,
         height: 162,
@@ -1143,7 +1163,9 @@ const LargeStyledCard = styled(MuiCard, {
         alignItems: 'flex-start',
         padding: spacing.spacing_2,
         borderRadius: borderRadius.card,
-        backgroundColor: isLight ? semanticColors.surfaces.card : semanticColorsDark.surfaces.card,
+        backgroundColor: isLight
+            ? semanticColors.color.surface.raised
+            : semanticColorsDark.color.surface.raised,
         border: `1px solid ${defaultBorderColor}`,
         boxShadow: 'none',
         overflow: 'hidden',
@@ -1198,7 +1220,9 @@ const LargeHeaderTitle = styled('span', {
     fontWeight: typography.fontWeight.semiBold,
     fontSize: typography.fontSize.h6,
     lineHeight: 1.4,
-    color: cardTheme === 'light' ? semanticColors.typography.body : semanticColorsDark.typography.body,
+    color: cardTheme === 'light'
+        ? semanticColors.color.text.primary
+        : semanticColorsDark.color.text.primary,
     flexShrink: 0,
 }));
 const LargeDescription = styled('p', {
@@ -1208,7 +1232,9 @@ const LargeDescription = styled('p', {
     fontWeight: typography.fontWeight.regular,
     fontSize: typography.fontSize.xs,
     lineHeight: 1.5,
-    color: cardTheme === 'light' ? semanticColors.typography.body : semanticColorsDark.typography.body,
+    color: cardTheme === 'light'
+        ? semanticColors.color.text.primary
+        : semanticColorsDark.color.text.primary,
     margin: 0,
     minWidth: '100%',
     wordWrap: 'break-word',
@@ -1257,7 +1283,7 @@ const Label$4 = styled('span')(({ theme, size = 'medium' }) => ({
             : typography.fontSize.default),
     fontWeight: typography.fontWeight.medium,
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
-    color: semanticColors.typography.input.default,
+    color: semanticColors.color.text.input,
 }));
 const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'xs'
@@ -1267,7 +1293,7 @@ const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
             : typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
 }));
 // xs focus-ring radius — no matching design token (box corner comes from the icon)
 const FIGMA_XS_BORDER_RADIUS = 1;
@@ -1295,7 +1321,7 @@ const StyledCheckbox = styled(Checkbox, {
         height: config.size,
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
-        color: semanticColors.border.strong,
+        color: semanticColors.color.border.strong,
         borderRadius: config.borderRadius,
         flexShrink: 0,
         // Suppress MUI's grey hover background
@@ -1321,11 +1347,11 @@ const StyledCheckbox = styled(Checkbox, {
             cursor: 'not-allowed',
         },
         [`&.${checkboxClasses.disabled}:not(.${checkboxClasses.checked}):not(.${checkboxClasses.indeterminate})`]: {
-            color: semanticColors.border.primary,
+            color: semanticColors.color.border.primary,
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
-            outline: `2px solid ${semanticColors.border.focus}`,
+            outline: `2px solid ${semanticColors.color.border.focus}`,
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
@@ -1452,20 +1478,20 @@ const StyledButtonBase = styled(ButtonBase, {
         cursor: 'text',
         // Focus visible for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.border.focus}`,
+            outline: `2px solid ${semanticColors.color.border.focus}`,
             outlineOffset: 2,
         },
     };
     // Variant-specific styles
     const variantStyles = {
         outlined: {
-            backgroundColor: semanticColors.code.background,
-            color: semanticColors.typography.code.primary,
+            backgroundColor: semanticColors.code.bg,
+            color: semanticColors.color.text.code,
             border: 'none',
         },
         filled: {
-            backgroundColor: semanticColors.surfaces.tooltip,
-            color: semanticColors.typography.tooltip.default,
+            backgroundColor: semanticColors.color.surface.tooltip,
+            color: semanticColors.color.text.tooltip,
             border: 'none',
         },
     };
@@ -1507,15 +1533,15 @@ ModCodeSnippet.displayName = 'ModCodeSnippet';
  * they carry this surface themselves.
  */
 const panelSurfaceStyles = {
-    backgroundColor: semanticColors.surfaces.white,
+    backgroundColor: 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
         [`& .${gridClasses.columnHeader}`]: {
-            backgroundColor: semanticColors.surfaces.dataGrid.header,
-            borderBottom: `1px solid ${semanticColors.border.primary}`,
+            backgroundColor: semanticColors.color.surface.dataGrid.header,
+            borderBottom: `1px solid ${semanticColors.color.border.primary}`,
             paddingTop: `${spacing.spacing_1_1_2}px`,
             paddingBottom: `${spacing.spacing_1_1_2}px`,
             paddingLeft: `${spacing.spacing_2}px`,
@@ -1525,8 +1551,8 @@ const getDataGridHeaderStyles = () => {
         // Style the filler element to match header
         // Height is set via density-specific selectors in DataGrid.tsx
         [`& .${gridClasses.filler}`]: {
-            backgroundColor: semanticColors.surfaces.dataGrid.header,
-            borderBottom: `1px solid ${semanticColors.border.primary}`,
+            backgroundColor: semanticColors.color.surface.dataGrid.header,
+            borderBottom: `1px solid ${semanticColors.color.border.primary}`,
             boxSizing: 'border-box',
         },
         // Style the default MUI column header title text to match Figma
@@ -1535,14 +1561,14 @@ const getDataGridHeaderStyles = () => {
             fontSize: typography.fontSize.sm,
             fontWeight: typography.fontWeight.semiBold, // Always semiBold (600)
             lineHeight: 'normal',
-            color: semanticColors.typography.bodySecondary, // #6b7280 by default
+            color: semanticColors.color.text.secondary, // #6b7280 by default
             transition: 'color 0.2s',
             textOverflow: 'clip',
             whiteSpace: 'break-spaces',
         },
         // Change text color on hover
         [`& .${gridClasses.columnHeader}:hover .${gridClasses.columnHeaderTitle}`]: {
-            color: semanticColors.icons.default, // #1f2937 on hover
+            color: semanticColors.color.icon.default, // #1f2937 on hover
         },
         // Style the checkbox in header to match design system (16x16 from Figma)
         [`& .${gridClasses.columnHeaderCheckbox}`]: {
@@ -1576,7 +1602,7 @@ const getDataGridHeaderStyles = () => {
                 '& svg': {
                     width: 16,
                     height: 16,
-                    color: semanticColors.icons.utility,
+                    color: semanticColors.color.icon.utility,
                 },
             },
         },
@@ -1584,16 +1610,16 @@ const getDataGridHeaderStyles = () => {
 };
 const getDataGridRowStyles = () => ({
     [`& .${gridClasses.row}`]: {
-        backgroundColor: semanticColors.surfaces.dataGrid.default,
+        backgroundColor: semanticColors.color.surface.dataGrid.default,
     },
     [`& .${gridClasses.row}:hover`]: {
-        backgroundColor: semanticColors.surfaces.dataGrid.hover,
+        backgroundColor: semanticColors.color.surface.dataGrid.hover,
     },
     [`& .${gridClasses.row}.Mui-selected`]: {
-        backgroundColor: semanticColors.surfaces.dataGrid.selected,
+        backgroundColor: semanticColors.color.surface.dataGrid.selected,
     },
     [`& .${gridClasses.row}.Mui-selected:hover`]: {
-        backgroundColor: semanticColors.surfaces.dataGrid.selectedHover,
+        backgroundColor: semanticColors.color.surface.dataGrid.selectedHover,
     },
 });
 
@@ -1622,8 +1648,8 @@ const StyledSearchField = styled(TextField)(({ theme }) => ({
         height: spacing.spacing_5,
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         borderRadius: borderRadius.input,
-        backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.primary}`,
+        backgroundColor: semanticColors.input.bg,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         paddingTop: spacing.spacing_1,
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
@@ -1634,22 +1660,22 @@ const StyledSearchField = styled(TextField)(({ theme }) => ({
         },
         [`& .${inputBaseClasses.input}`]: {
             padding: 0,
-            color: semanticColors.typography.input.default,
+            color: semanticColors.color.text.input,
             '&::placeholder': {
-                color: semanticColors.typography.input.placeholder,
+                color: semanticColors.color.text.inputPlaceholder,
                 opacity: 1,
             },
         },
         '&:hover': {
-            backgroundColor: semanticColors.input.hoverBackground,
+            backgroundColor: semanticColors.input.bgHover,
         },
         [`&.${inputBaseClasses.focused}`]: {
-            backgroundColor: semanticColors.input.background,
-            borderColor: semanticColors.buttons.primary.default,
+            backgroundColor: semanticColors.input.bg,
+            borderColor: semanticColors.button.primary.bg,
         },
     },
     [`& .${inputAdornmentClasses.root}`]: {
-        color: semanticColors.icons.placeholder,
+        color: semanticColors.color.icon.placeholder,
         '& svg': {
             width: 20,
             height: 20,
@@ -1672,14 +1698,14 @@ const MenuItemContent$1 = styled('div')(() => ({
     borderRadius: MENU_ITEM_BORDER_RADIUS,
     width: '100%',
     '&:hover': {
-        backgroundColor: semanticColors.surfaces.listHover,
+        backgroundColor: semanticColors.color.surface.rowHover,
     },
 }));
 const MenuItemLabel = styled('span')(({ theme, fontWeight = 500 }) => ({
     fontSize: theme.typography.pxToRem(16),
     fontWeight,
     lineHeight: 1.5,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     whiteSpace: 'nowrap',
 }));
 const DividerContainer = styled('div')(() => ({
@@ -1687,7 +1713,7 @@ const DividerContainer = styled('div')(() => ({
     paddingBottom: spacing.spacing_1_2,
 }));
 const StyledDivider$1 = styled(Divider)(() => ({
-    borderColor: semanticColors.border.primary,
+    borderColor: semanticColors.color.border.primary,
 }));
 const FooterRow = styled(Box)(() => ({
     display: 'flex',
@@ -1699,16 +1725,16 @@ const FooterRow = styled(Box)(() => ({
 const ResetButton = styled(Button)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(16),
     fontWeight: typography.fontWeight.regular,
-    color: semanticColors.buttons.primary.default,
+    color: semanticColors.button.primary.bg,
     textTransform: 'none',
     padding: spacing.spacing_1,
     minWidth: 'auto',
     '&:hover': {
         backgroundColor: 'transparent',
-        color: semanticColors.typography.bodySecondary,
+        color: semanticColors.color.text.secondary,
     },
     '&:disabled': {
-        color: semanticColors.typography.button.disabled,
+        color: semanticColors.button.fgDisabled,
     },
 }));
 const ModDataGridColumnsPanel = ({ showSearch = false, 
@@ -1772,7 +1798,7 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
     minHeight: spacing.spacing_5,
     gap: spacing.spacing_2,
     borderRadius: 0,
-    color: semanticColors.icons.default,
+    color: semanticColors.color.icon.default,
     textDecoration: 'none',
     fontSize: theme.typography.pxToRem(typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
@@ -1781,19 +1807,19 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
         duration: theme.transitions.duration.shortest,
     }),
     '&:hover': {
-        backgroundColor: semanticColors.surfaces.listHover,
+        backgroundColor: semanticColors.color.surface.rowHover,
     },
     [`&.${menuItemClasses.selected}`]: {
-        backgroundColor: semanticColors.surfaces.listHover,
+        backgroundColor: semanticColors.color.surface.rowHover,
         '&:hover': {
-            backgroundColor: semanticColors.surfaces.listHover,
+            backgroundColor: semanticColors.color.surface.rowHover,
         },
     },
     [`&.${menuItemClasses.disabled}`]: {
         opacity: 0.5,
     },
     [`&.${menuItemClasses.focusVisible}`]: {
-        backgroundColor: semanticColors.surfaces.listHover,
+        backgroundColor: semanticColors.color.surface.rowHover,
     },
 }));
 const MenuItemContent = styled('div')({
@@ -1808,7 +1834,7 @@ const IconWrapper$1 = styled('span')(({ theme }) => ({
     justifyContent: 'center',
     flexShrink: 0,
     fontSize: theme.typography.pxToRem(typography.fontSize.h4),
-    color: semanticColors.icons.default,
+    color: semanticColors.color.icon.default,
 }));
 const LabelContainer$3 = styled('div')({
     flex: 1,
@@ -1818,24 +1844,24 @@ const LabelContainer$3 = styled('div')({
     minWidth: 0,
 });
 const Label$3 = styled('span')({
-    color: semanticColors.icons.default,
+    color: semanticColors.color.icon.default,
     flexShrink: 0,
 });
 const SecondaryLabel = styled('span')({
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
     fontWeight: typography.fontWeight.regular,
     flexShrink: 0,
 });
 const Shortcut = styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     fontWeight: typography.fontWeight.medium,
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
     marginLeft: 'auto',
     flexShrink: 0,
-    border: `1px solid ${semanticColors.border.secondary}`,
+    border: `1px solid ${semanticColors.color.border.primary}`,
     borderRadius: borderRadius.xS,
     padding: `${spacing.spacing_1_4}px ${spacing.spacing_3_4}px`,
-    backgroundColor: semanticColors.surfaces.white,
+    backgroundColor: semanticColors.color.surface.raised,
 }));
 /**
  * ModMenuItem - Menu item component based on MUI MenuItem
@@ -1880,22 +1906,22 @@ ModMenuItem.displayName = 'ModMenuItem';
  * Custom chevron icon for select
  * Must accept props from MUI Select to work correctly
  */
-const ChevronDownIcon = (props) => (jsx(ChevronDown, { ...props, size: spacing.spacing_2_1_2, color: semanticColors.typography.input.default, style: { ...props.style } }));
+const ChevronDownIcon = (props) => (jsx(ChevronDown, { ...props, size: spacing.spacing_2_1_2, color: semanticColors.color.text.input, style: { ...props.style } }));
 /**
  * Styled Select component with design system styling
  */
 const StyledSelect = styled(MuiSelect)({
     minHeight: spacing.spacing_5,
-    backgroundColor: semanticColors.input.background,
-    border: `1px solid ${semanticColors.border.primary}`,
+    backgroundColor: semanticColors.input.bg,
+    border: `1px solid ${semanticColors.color.border.primary}`,
     borderRadius: `${borderRadius.input}px`,
     '&:hover': {
-        backgroundColor: semanticColors.input.hoverBackground,
-        borderColor: semanticColors.border.primary,
+        backgroundColor: semanticColors.input.bgHover,
+        borderColor: semanticColors.color.border.primary,
     },
     '&.Mui-focused': {
-        backgroundColor: semanticColors.input.background,
-        borderColor: semanticColors.buttons.primary.default,
+        backgroundColor: semanticColors.input.bg,
+        borderColor: semanticColors.button.primary.bg,
     },
     '&::before': {
         display: 'none',
@@ -1910,7 +1936,7 @@ const StyledSelect = styled(MuiSelect)({
         paddingRight: spacing.spacing_5,
         fontSize: typography.fontSize.sm,
         fontWeight: typography.fontWeight.regular,
-        color: semanticColors.typography.input.default,
+        color: semanticColors.color.text.input,
     },
     [`& .${selectClasses.icon}`]: {
         right: spacing.spacing_1_1_2,
@@ -1932,37 +1958,34 @@ const StyledSelect = styled(MuiSelect)({
  * </ModSelect>
  * ```
  */
-const ModSelect = (props) => {
-    const paperSlotProps = props.MenuProps?.slotProps?.paper;
-    const incomingPaperSx = typeof paperSlotProps === 'function' ? undefined : paperSlotProps?.sx;
-    return (jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
-            ...props.MenuProps,
-            slotProps: {
-                ...props.MenuProps?.slotProps,
-                paper: {
-                    sx: {
-                        backgroundColor: semanticColors.surfaces.white,
-                        borderRadius: `${borderRadius.s}px`,
-                        border: `1px solid ${semanticColors.border.primary}`,
-                        boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
-                        marginTop: 1,
-                        ...incomingPaperSx,
-                    },
+const ModSelect = (props) => (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: mergeSlotProps(props.MenuProps?.slotProps?.paper, {
+                sx: {
+                    backgroundColor: semanticColors.color.surface.raised,
+                    borderRadius: `${borderRadius.s}px`,
+                    border: `1px solid ${semanticColors.color.border.primary}`,
+                    boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${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 = () => (jsx(Plus, { size: spacing.spacing_2, color: semanticColors.buttons.tertiary.default }));
+const ModDataGridFilterPanelAddIcon = () => (jsx(Plus, { size: spacing.spacing_2, color: semanticColors.button.tertiary.fg }));
 ModDataGridFilterPanelAddIcon.displayName = 'ModDataGridFilterPanelAddIcon';
-const ModDataGridFilterPanelDeleteIcon = () => (jsx(X, { size: spacing.spacing_2_1_2, color: semanticColors.icons.default }));
+const ModDataGridFilterPanelDeleteIcon = () => (jsx(X, { size: spacing.spacing_2_1_2, color: semanticColors.color.icon.default }));
 ModDataGridFilterPanelDeleteIcon.displayName = 'ModDataGridFilterPanelDeleteIcon';
-const ModDataGridFilterPanelRemoveAllIcon = () => (jsx(Trash2, { size: spacing.spacing_2, color: semanticColors.buttons.tertiary.default }));
+const ModDataGridFilterPanelRemoveAllIcon = () => (jsx(Trash2, { size: spacing.spacing_2, color: semanticColors.button.tertiary.fg }));
 ModDataGridFilterPanelRemoveAllIcon.displayName = 'ModDataGridFilterPanelRemoveAllIcon';
 /**
  * Base styled GridFilterPanel with design system styling
@@ -2011,20 +2034,20 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}`]: {
         position: 'relative',
         minHeight: spacing.spacing_5,
-        backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.primary}`,
+        backgroundColor: semanticColors.input.bg,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         borderRadius: `${borderRadius.input}px`,
         fontSize: typography.fontSize.default,
         fontWeight: typography.fontWeight.regular,
-        color: semanticColors.typography.input.default,
+        color: semanticColors.color.text.input,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}:hover`]: {
-        backgroundColor: semanticColors.input.hoverBackground,
-        borderColor: semanticColors.border.primary,
+        backgroundColor: semanticColors.input.bgHover,
+        borderColor: semanticColors.color.border.primary,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}.${inputBaseClasses.focused}`]: {
-        backgroundColor: semanticColors.input.background,
-        borderColor: semanticColors.border.primary,
+        backgroundColor: semanticColors.input.bg,
+        borderColor: semanticColors.color.border.primary,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}::before`]: {
         display: 'none',
@@ -2039,9 +2062,9 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
         paddingRight: spacing.spacing_1_1_2,
         fontSize: typography.fontSize.default,
         fontWeight: typography.fontWeight.regular,
-        color: semanticColors.typography.input.default,
+        color: semanticColors.color.text.input,
         '&::placeholder': {
-            color: semanticColors.typography.input.placeholder,
+            color: semanticColors.color.text.inputPlaceholder,
             opacity: 1,
         },
     },
@@ -2056,7 +2079,7 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     [`& .${gridClasses.filterForm} .${formLabelClasses.root}`]: {
         fontSize: typography.fontSize.sm,
         fontWeight: typography.fontWeight.medium,
-        color: semanticColors.typography.input.label,
+        color: semanticColors.color.text.inputLabel,
         marginBottom: spacing.spacing_1_2,
         position: 'static',
         transform: 'none',
@@ -2064,16 +2087,20 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     [`& .${gridClasses.filterForm} .${inputLabelClasses.root}`]: {
         fontSize: typography.fontSize.sm,
         fontWeight: typography.fontWeight.medium,
-        color: semanticColors.typography.input.label,
+        color: semanticColors.color.text.inputLabel,
         marginBottom: spacing.spacing_1_2,
         position: 'static',
         transform: 'none',
     },
     [`& .${gridClasses.filterForm} .${formLabelClasses.root}.${formLabelClasses.focused}`]: {
-        color: semanticColors.typography.input.label,
+        color: semanticColors.color.text.inputLabel,
     },
     [`& .${gridClasses.filterForm} .${inputLabelClasses.root}.${inputLabelClasses.focused}`]: {
-        color: semanticColors.typography.input.label,
+        color: semanticColors.color.text.inputLabel,
+    },
+    // Reclaim the 16px MUI's standard Input reserves for a floating label; these sit statically.
+    [`& .${gridClasses.filterForm} label + .${inputBaseClasses.root}`]: {
+        marginTop: 0,
     },
     // Remove fieldset/legend
     '& fieldset': {
@@ -2097,13 +2124,13 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
         minHeight: 'auto',
         height: 'auto',
         gap: spacing.spacing_1_2,
-        backgroundColor: semanticColors.buttons.secondary.defaultBackground,
-        color: semanticColors.typography.input.default,
-        border: `1px solid ${semanticColors.buttons.secondary.defaultBorder}`,
+        backgroundColor: semanticColors.button.secondary.bg,
+        color: semanticColors.color.text.input,
+        border: `1px solid ${semanticColors.button.secondary.border}`,
     },
     [`& .${gridClasses.panelFooter} .${buttonClasses.root}:first-child:hover`]: {
-        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
-        borderColor: semanticColors.buttons.secondary.defaultBorder,
+        backgroundColor: semanticColors.button.secondary.bgHover,
+        borderColor: semanticColors.button.secondary.border,
     },
     // Clear all button (second button) - styled to match ModButton link variant
     [`& .${gridClasses.panelFooter} .${buttonClasses.root}:nth-child(2)`]: {
@@ -2115,39 +2142,58 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
         textTransform: 'none',
         minHeight: 'auto',
         backgroundColor: 'transparent',
-        color: semanticColors.buttons.tertiary.default,
+        color: semanticColors.button.tertiary.fg,
         border: 'none',
         [`& .${buttonClasses.startIcon}`]: {
             display: 'none', // Hide the trash icon
         },
         '&:hover': {
             backgroundColor: 'transparent',
-            color: semanticColors.buttons.tertiary.hover,
+            color: semanticColors.button.tertiary.fgHover,
         },
     },
     // Icon buttons (delete/trash icon)
     [`& .${gridClasses.filterForm} .${iconButtonClasses.root}`]: {
         width: spacing.spacing_5_1_2,
         height: spacing.spacing_5_1_2,
-        color: semanticColors.icons.default,
+        color: semanticColors.color.icon.default,
     },
     [`& .${gridClasses.filterForm} .${iconButtonClasses.root}:hover`]: {
-        backgroundColor: semanticColors.input.hoverBackground,
+        backgroundColor: 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 = forwardRef(function ModDataGridSelect({ id, label, labelId, disabled, fullWidth, size, style, slotProps, material, onChange, onClose, onKeyDown, ...rest }, ref) {
+    const theme = 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 (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: useForkRef(ref), disabled: disabled, fullWidth: fullWidth, size: computedSize, style: style, children: [hasLabel && (jsx(MuiInputLabel, { id: labelId, htmlFor: id, variant: "standard", shrink: true, children: label })), 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
  *
@@ -2189,13 +2235,13 @@ ModDataGridFilterPanel.displayName = 'ModDataGridFilterPanel';
  * Use these with DataGrid's slots API to replace default sort indicators.
  */
 function SortedDescendingIcon() {
-    return jsx(ArrowDown, { size: 16, color: semanticColors.icons.utility });
+    return jsx(ArrowDown, { size: 16, color: semanticColors.color.icon.utility });
 }
 function SortedAscendingIcon() {
-    return jsx(ArrowUp, { size: 16, color: semanticColors.icons.utility });
+    return jsx(ArrowUp, { size: 16, color: semanticColors.color.icon.utility });
 }
 function UnsortedIcon() {
-    return jsx(ChevronsUpDown, { size: 16, color: semanticColors.icons.utility });
+    return jsx(ChevronsUpDown, { size: 16, color: semanticColors.color.icon.utility });
 }
 
 /**
@@ -2206,7 +2252,7 @@ function UnsortedIcon() {
  */
 const ModGridPanel = styled(GridPanel)({
     [`& .${gridPanelClasses.paper}`]: {
-        backgroundColor: semanticColors.surfaces.white,
+        backgroundColor: semanticColors.color.surface.raised,
     },
 });
 /**
@@ -2282,27 +2328,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
         [`& .${gridClasses.main}`]: {
-            backgroundColor: semanticColors.surfaces.dataGrid.background,
+            backgroundColor: semanticColors.color.surface.dataGrid.default,
         },
         // White background for empty/loading overlays
         [`& .${gridClasses.overlay}`]: {
-            backgroundColor: semanticColors.surfaces.dataGrid.background,
+            backgroundColor: 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.
         [`& .${gridClasses.footerContainer}`]: {
-            backgroundColor: semanticColors.surfaces.dataGrid.background,
+            backgroundColor: semanticColors.color.surface.dataGrid.default,
         },
         // `&&` doubles specificity: MUI paints the filler strips itself, so a
         // single-class rule loses to its own.
         [`&& .${gridClasses.filler}, && .${gridClasses.scrollbarFiller}`]: {
-            backgroundColor: semanticColors.surfaces.dataGrid.background,
+            backgroundColor: semanticColors.color.surface.dataGrid.default,
         },
         ...getDataGridHeaderStyles(),
         ...getDataGridRowStyles(),
-        border: `1px solid ${semanticColors.border.secondary}`,
+        border: `1px solid ${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
@@ -2357,7 +2403,7 @@ ModDataGrid.displayName = 'ModDataGrid';
  * ```
  */
 function ModDataGridColumnsButton() {
-    return (jsx(ColumnsPanelTrigger, { render: jsx(ToolbarButton, { render: jsxs(ModButton, { variant: "secondary", size: "small", children: [jsx(Columns3, { size: 16, color: semanticColors.buttons.primary.default }), "Columns"] }) }) }));
+    return (jsx(ColumnsPanelTrigger, { render: jsx(ToolbarButton, { render: jsxs(ModButton, { variant: "secondary", size: "small", children: [jsx(Columns3, { size: 16, color: semanticColors.button.primary.bg }), "Columns"] }) }) }));
 }
 ModDataGridColumnsButton.displayName = 'ModDataGridColumnsButton';
 
@@ -2383,69 +2429,69 @@ const sizeStyles$1 = {
 };
 const outlinedColorStyles = {
     default: {
-        backgroundColor: semanticColors.status.neutral.light,
-        color: semanticColors.status.neutral.dark,
-        borderColor: semanticColors.status.neutral.transparent,
+        backgroundColor: semanticColors.color.status.neutral.bg,
+        color: semanticColors.color.status.neutral.fg,
+        borderColor: semanticColors.color.status.neutral.tint,
     },
     error: {
-        backgroundColor: semanticColors.status.error.light,
-        color: semanticColors.status.error.dark,
-        borderColor: semanticColors.status.error.transparent,
+        backgroundColor: semanticColors.color.status.error.bg,
+        color: semanticColors.color.status.error.fg,
+        borderColor: semanticColors.color.status.error.tint,
     },
     warning: {
-        backgroundColor: semanticColors.status.warning.light,
-        color: semanticColors.status.warning.dark,
-        borderColor: semanticColors.status.warning.transparent,
+        backgroundColor: semanticColors.color.status.warning.bg,
+        color: semanticColors.color.status.warning.fg,
+        borderColor: semanticColors.color.status.warning.tint,
     },
     success: {
-        backgroundColor: semanticColors.status.success.light,
-        color: semanticColors.status.success.dark,
-        borderColor: semanticColors.status.success.transparent,
+        backgroundColor: semanticColors.color.status.success.bg,
+        color: semanticColors.color.status.success.fg,
+        borderColor: semanticColors.color.status.success.tint,
     },
     info: {
-        backgroundColor: semanticColors.status.info.light,
-        color: semanticColors.status.info.dark,
-        borderColor: semanticColors.status.info.transparent,
+        backgroundColor: semanticColors.color.status.info.bg,
+        color: semanticColors.color.status.info.fg,
+        borderColor: semanticColors.color.status.info.tint,
     },
     violet: {
-        backgroundColor: semanticColors.status.active.light,
-        color: semanticColors.status.active.dark,
-        borderColor: semanticColors.status.active.transparent,
+        backgroundColor: semanticColors.color.status.active.bg,
+        color: semanticColors.color.status.active.fg,
+        borderColor: semanticColors.color.status.active.tint,
     },
     beta: {
         backgroundColor: 'transparent',
-        color: semanticColors.typography.bodySecondary,
+        color: semanticColors.color.text.secondary,
         borderColor: 'transparent',
     },
 };
 const filledColorStyles = {
     default: {
-        backgroundColor: semanticColors.status.neutral.dark,
-        color: semanticColors.status.neutral.light,
+        backgroundColor: semanticColors.color.status.neutral.fg,
+        color: semanticColors.color.status.neutral.bg,
     },
     error: {
-        backgroundColor: semanticColors.status.error.dark,
-        color: semanticColors.status.error.light,
+        backgroundColor: semanticColors.color.status.error.fg,
+        color: semanticColors.color.status.error.bg,
     },
     warning: {
-        backgroundColor: semanticColors.status.warning.dark,
-        color: semanticColors.status.warning.light,
+        backgroundColor: semanticColors.color.status.warning.fg,
+        color: semanticColors.color.status.warning.bg,
     },
     success: {
-        backgroundColor: semanticColors.status.success.dark,
-        color: semanticColors.status.success.light,
+        backgroundColor: semanticColors.color.status.success.fg,
+        color: semanticColors.color.status.success.bg,
     },
     info: {
-        backgroundColor: semanticColors.status.info.dark,
-        color: semanticColors.status.info.light,
+        backgroundColor: semanticColors.color.status.info.fg,
+        color: semanticColors.color.status.info.bg,
     },
     violet: {
-        backgroundColor: semanticColors.status.active.dark,
-        color: semanticColors.status.active.light,
+        backgroundColor: semanticColors.color.status.active.fg,
+        color: semanticColors.color.status.active.bg,
     },
     beta: {
         backgroundColor: 'transparent',
-        color: semanticColors.typography.bodySecondary,
+        color: semanticColors.color.text.secondary,
     },
 };
 const StyledChip$2 = styled(Chip, {
@@ -2499,7 +2545,7 @@ function ModDataGridFiltersButton() {
     const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
     const activeFilters = filterModel.items.filter(item => item.value != null && item.value !== '');
     const filterCount = activeFilters.length;
-    return (jsx(FilterPanelTrigger, { render: jsx(ToolbarButton, { render: jsxs(ModButton, { variant: "secondary", size: "small", children: [jsx(ListFilter, { size: 16, color: semanticColors.buttons.primary.default }), "Filters", filterCount > 0 && (jsx(ModTag, { size: "medium", variant: "filled", intent: "info", label: String(filterCount) }))] }) }) }));
+    return (jsx(FilterPanelTrigger, { render: jsx(ToolbarButton, { render: jsxs(ModButton, { variant: "secondary", size: "small", children: [jsx(ListFilter, { size: 16, color: semanticColors.button.primary.bg }), "Filters", filterCount > 0 && (jsx(ModTag, { size: "medium", variant: "filled", intent: "info", label: String(filterCount) }))] }) }) }));
 }
 ModDataGridFiltersButton.displayName = 'ModDataGridFiltersButton';
 
@@ -2534,14 +2580,14 @@ const LabelText$1 = styled('p')({
     fontSize: typography.fontSize.sm,
     fontWeight: typography.fontWeight.semiBold, // Always semiBold (600)
     lineHeight: 'normal',
-    color: semanticColors.typography.bodySecondary, // #6b7280 by default
+    color: 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: semanticColors.icons.default, // #1f2937 on hover
+        color: semanticColors.color.icon.default, // #1f2937 on hover
     },
 });
 const IconWrapper = styled('div')({
@@ -2554,7 +2600,7 @@ const IconWrapper = styled('div')({
     '& svg': {
         width: 16,
         height: 16,
-        color: semanticColors.icons.utility,
+        color: semanticColors.color.icon.utility,
     },
 });
 function ModDataGridHeaderLabel({ children, helpTooltip, className, }) {
@@ -2593,9 +2639,9 @@ const StyledNavButton = styled(IconButton, {
     };
     const sizeStyles = sizeConfig[size];
     const activeNavStyles = {
-        backgroundColor: semanticColors.icons.pressedBackground,
+        backgroundColor: semanticColors.color.icon.bgPressed,
         borderColor: 'transparent',
-        color: semanticColors.buttons.primary.pressed,
+        color: semanticColors.button.primary.bgPressed,
     };
     return {
         width: sizeStyles.width,
@@ -2606,25 +2652,25 @@ const StyledNavButton = styled(IconButton, {
             duration: theme.transitions.duration.short,
         }),
         '&:focus-visible': {
-            outline: `2px solid ${semanticColors.border.focus}`,
+            outline: `2px solid ${semanticColors.color.border.focus}`,
             outlineOffset: 2,
         },
         // Nav styles
-        backgroundColor: semanticColors.surfaces.white,
-        color: semanticColors.icons.default,
-        border: `1px solid ${semanticColors.border.secondary}`,
+        backgroundColor: semanticColors.color.surface.raised,
+        color: semanticColors.color.icon.default,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         '&:hover': {
-            backgroundColor: semanticColors.input.hoverBackground,
-            borderColor: semanticColors.border.primary,
-            color: semanticColors.icons.default,
+            backgroundColor: semanticColors.input.bgHover,
+            borderColor: semanticColors.color.border.primary,
+            color: semanticColors.color.icon.default,
         },
         '&:active': activeNavStyles,
         [`&.${iconButtonClasses.disabled}`]: {
             cursor: 'not-allowed',
             pointerEvents: 'auto',
-            backgroundColor: semanticColors.surfaces.white,
-            borderColor: semanticColors.border.secondary,
-            color: semanticColors.icons.disabled,
+            backgroundColor: semanticColors.color.surface.raised,
+            borderColor: semanticColors.color.border.primary,
+            color: semanticColors.color.icon.disabled,
             opacity: 0.5,
         },
         ...(active ? activeNavStyles : {}),
@@ -2701,80 +2747,80 @@ const defaultRangeShortcuts = [
 // Styled DatePicker with design system tokens
 const StyledDatePicker = styled(DatePicker)(({ theme }) => ({
     [`& .${pickerPopperClasses.paper}`]: {
-        backgroundColor: semanticColors.surfaces.card,
+        backgroundColor: semanticColors.color.surface.raised,
         boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
         borderRadius: `${borderRadius.s}px`,
     },
     [`& .${dayCalendarClasses.weekDayLabel}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.medium,
-        color: semanticColors.typography.bodySecondary,
+        color: semanticColors.color.text.secondary,
     },
     [`& .${pickerDayClasses.root}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-        color: semanticColors.typography.bodySecondary,
+        color: semanticColors.color.text.secondary,
         borderRadius: borderRadius.l,
         '&:hover': {
-            backgroundColor: semanticColors.icons.hoverBackground,
+            backgroundColor: semanticColors.color.icon.bgHover,
         },
         '&.Mui-selected': {
-            backgroundColor: semanticColors.icons.active,
-            color: semanticColors.surfaces.white,
+            backgroundColor: semanticColors.color.icon.active,
+            color: semanticColors.color.surface.raised,
             '&:hover': {
-                backgroundColor: semanticColors.icons.active,
+                backgroundColor: semanticColors.color.icon.active,
             },
         },
         [`&.${pickerDayClasses.today}`]: {
-            border: `2px solid ${semanticColors.border.strong}`,
+            border: `2px solid ${semanticColors.color.border.strong}`,
             backgroundColor: 'transparent',
         },
     },
     [`& .${pickersCalendarHeaderClasses.label}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.semiBold,
-        color: semanticColors.typography.body,
+        color: semanticColors.color.text.primary,
     },
 }));
 // Styled DateRangePicker with design system tokens
 const StyledDateRangePicker = styled(DateRangePicker)(({ theme }) => ({
     [`& .${pickerPopperClasses.paper}`]: {
-        backgroundColor: semanticColors.surfaces.card,
+        backgroundColor: semanticColors.color.surface.raised,
         boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
         borderRadius: `${borderRadius.s}px`,
     },
     [`& .${dayCalendarClasses.weekDayLabel}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.medium,
-        color: semanticColors.typography.bodySecondary,
+        color: semanticColors.color.text.secondary,
     },
     [`& .${dateRangePickerDayClasses.root}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-        color: semanticColors.typography.bodySecondary,
+        color: semanticColors.color.text.secondary,
         borderRadius: borderRadius.l,
         '&:hover': {
-            backgroundColor: semanticColors.icons.hoverBackground,
+            backgroundColor: semanticColors.color.icon.bgHover,
         },
         '&.Mui-selected': {
-            backgroundColor: semanticColors.icons.active,
-            color: semanticColors.surfaces.white,
+            backgroundColor: semanticColors.color.icon.active,
+            color: semanticColors.color.surface.raised,
         },
     },
     [`& .${dateRangePickerDayClasses.insideSelection}`]: {
-        backgroundColor: semanticColors.icons.hoverBackground,
-        color: semanticColors.typography.input.default,
+        backgroundColor: semanticColors.color.icon.bgHover,
+        color: semanticColors.color.text.input,
     },
     [`& .${dateRangePickerDayClasses.selectionStart}, & .${dateRangePickerDayClasses.selectionEnd}`]: {
-        backgroundColor: semanticColors.icons.active,
+        backgroundColor: semanticColors.color.icon.active,
     },
     [`& .${pickersCalendarHeaderClasses.label}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.semiBold,
-        color: semanticColors.typography.body,
+        color: semanticColors.color.text.primary,
     },
 }));
-const ClearIcon = () => jsx(X, { size: 20, color: semanticColors.icons.placeholder });
+const ClearIcon = () => jsx(X, { size: 20, color: semanticColors.color.icon.placeholder });
 // Custom calendar icon component
-const CalendarIcon = () => jsx(CalendarDays, { size: 20, color: semanticColors.icons.placeholder });
+const CalendarIcon = () => jsx(CalendarDays, { size: 20, color: semanticColors.color.icon.placeholder });
 // Shortcut styles to match Figma list item design (no borders, plain text)
 const shortcutChipStyles = {
     // Container (MuiList) styles
@@ -2783,7 +2829,7 @@ const shortcutChipStyles = {
     [`& .${chipClasses.root}`]: {
         fontSize: typography.fontSize.sm,
         fontWeight: typography.fontWeight.medium,
-        color: semanticColors.typography.input.default,
+        color: semanticColors.color.text.input,
         backgroundColor: 'transparent',
         borderRadius: `${spacing.spacing_3_4}px`,
         border: 'none',
@@ -2796,7 +2842,7 @@ const shortcutChipStyles = {
             padding: 0,
         },
         '&:hover': {
-            backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+            backgroundColor: semanticColors.button.secondary.bgHover,
         },
     },
 };
@@ -2890,7 +2936,7 @@ const ModDatePicker = ({ type = 'single', open, label, value, rangeValue, onChan
 ModDatePicker.displayName = 'ModDatePicker';
 
 const StyledDivider = styled(Divider)(() => ({
-    borderColor: semanticColors.border.secondary,
+    borderColor: semanticColors.color.border.primary,
     marginTop: spacing.spacing_1,
     marginBottom: spacing.spacing_1,
 }));
@@ -2931,7 +2977,11 @@ const StyledDot = styled('span', {
     shouldForwardProp: prop => prop !== 'ownerState',
 })(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const palette = 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 = semanticColors.color.status[ownerState.color];
     return {
         display: 'inline-flex',
         alignItems: 'center',
@@ -2942,10 +2992,10 @@ const StyledDot = styled('span', {
         borderRadius: '50%',
         flexShrink: 0,
         boxSizing: 'border-box',
-        backgroundColor: palette.default,
-        color: semanticColors.typography.tooltip.default,
+        backgroundColor: palette.solid,
+        color: semanticColors.color.text.tooltip,
         ...(ownerState.variant === 'outline' && {
-            border: `3px solid ${palette.light}`,
+            border: `3px solid ${palette.bg}`,
         }),
         '& > svg': {
             width: '70%',
@@ -2964,9 +3014,9 @@ ModDot.displayName = 'ModDot';
 const StyledRoot$1 = styled(Paper)({
     padding: spacing.spacing_2,
     borderRadius: borderRadius.s,
-    backgroundColor: semanticColors.surfaces.card,
-    color: semanticColors.typography.body,
-    border: `1px solid ${semanticColors.border.primary}`,
+    backgroundColor: semanticColors.color.surface.raised,
+    color: semanticColors.color.text.primary,
+    border: `1px solid ${semanticColors.color.border.primary}`,
     boxShadow: `${shadows.neutral.regular.x}px ${shadows.neutral.regular.y}px ${shadows.neutral.regular.blur}px ${shadows.neutral.regular.spread}px ${shadows.neutral.regular.shadow}`,
     display: 'flex',
     flexDirection: 'column',
@@ -2977,14 +3027,14 @@ const Title = styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     fontWeight: typography.fontWeight.semiBold,
     lineHeight: 1.4,
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
 }));
 const FileName = styled('p')(({ theme }) => ({
     margin: 0,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1.5,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
@@ -2995,16 +3045,16 @@ const ProgressLabel$1 = styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1.5,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     flexShrink: 0,
 }));
 const StyledLinearProgress$1 = styled(LinearProgress)({
     width: '100%',
     height: spacing.spacing_1,
     borderRadius: borderRadius.s,
-    backgroundColor: semanticColors.border.secondary,
+    backgroundColor: semanticColors.color.border.primary,
     [`& .${linearProgressClasses.bar}`]: {
-        backgroundColor: semanticColors.buttons.primary.default,
+        backgroundColor: semanticColors.button.primary.bg,
         borderRadius: `${borderRadius.xS}px 0 0 ${borderRadius.xS}px`,
     },
 });
@@ -3012,7 +3062,7 @@ const ActionButton = styled(IconButton)({
     padding: 0,
     width: spacing.spacing_2,
     height: spacing.spacing_2,
-    color: semanticColors.icons.utility,
+    color: semanticColors.color.icon.utility,
     '&:hover': {
         backgroundColor: 'transparent',
     },
@@ -3044,50 +3094,50 @@ const ModDownloadToast = ({ title, fileName, progress, showClose = true, showPau
 ModDownloadToast.displayName = 'ModDownloadToast';
 
 const buildFilledIcon = ({ displayName, fillColor, body, knockout }) => {
-    const Component = (props) => (jsxs(SvgIcon, { viewBox: "0 0 16 16", ...props, children: [jsx("g", { fill: fillColor, children: body }), jsx("g", { stroke: semanticColors.surfaces.white, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", children: knockout })] }));
+    const Component = (props) => (jsxs(SvgIcon, { viewBox: "0 0 16 16", ...props, children: [jsx("g", { fill: fillColor, children: body }), jsx("g", { stroke: semanticColors.color.surface.raised, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", children: knockout })] }));
     Component.displayName = displayName;
     return Component;
 };
 const CIRCLE_BODY = (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: semanticColors.status.success.default,
+    fillColor: semanticColors.color.status.success.solid,
     body: CIRCLE_BODY,
     knockout: jsx("path", { d: "M6 8.00008L7.33333 9.33341L10 6.66675" }),
 });
 const ModFilledQueued = buildFilledIcon({
     displayName: 'ModFilledQueued',
-    fillColor: semanticColors.status.active.default,
+    fillColor: semanticColors.color.status.active.solid,
     body: CIRCLE_BODY,
     knockout: jsx("path", { d: "M8 4V8L10.6667 9.33333" }),
 });
 const ModFilledInfo = buildFilledIcon({
     displayName: 'ModFilledInfo',
-    fillColor: semanticColors.status.info.default,
+    fillColor: semanticColors.color.status.info.solid,
     body: CIRCLE_BODY,
     knockout: (jsxs(Fragment, { children: [jsx("path", { d: "M8 10.6667V8" }), jsx("path", { d: "M8 5.33325H8.00667" })] })),
 });
 const ModFilledWarning = buildFilledIcon({
     displayName: 'ModFilledWarning',
-    fillColor: semanticColors.status.warning.default,
+    fillColor: semanticColors.color.status.warning.solid,
     body: (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: (jsxs(Fragment, { children: [jsx("path", { d: "M8 6V8.66667" }), jsx("path", { d: "M8 11.3333H8.00667" })] })),
 });
 const ModFilledError = buildFilledIcon({
     displayName: 'ModFilledError',
-    fillColor: semanticColors.status.error.default,
+    fillColor: semanticColors.color.status.error.solid,
     body: (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: (jsxs(Fragment, { children: [jsx("path", { d: "M8 5.33325V7.99992" }), jsx("path", { d: "M8 10.6667H8.00667" })] })),
 });
 const ModFilledNeutral = buildFilledIcon({
     displayName: 'ModFilledNeutral',
-    fillColor: semanticColors.status.neutral.default,
+    fillColor: semanticColors.color.status.neutral.solid,
     body: CIRCLE_BODY,
     knockout: jsx("path", { d: "M5.33334 8H10.6667" }),
 });
 const ModFilledCanceled = buildFilledIcon({
     displayName: 'ModFilledCanceled',
-    fillColor: semanticColors.status.canceled.default,
+    fillColor: semanticColors.color.status.canceled.solid,
     body: CIRCLE_BODY,
     knockout: (jsxs(Fragment, { children: [jsx("path", { d: "M10 6L6 10" }), jsx("path", { d: "M6 6L10 10" })] })),
 });
@@ -3097,17 +3147,17 @@ const StyledChip$1 = styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
 })(({ theme, selected }) => ({
     borderRadius: borderRadius.full,
-    border: `1px solid ${semanticColors.buttons.secondary.defaultBorder}`,
+    border: `1px solid ${semanticColors.button.secondary.border}`,
     backgroundColor: selected
-        ? semanticColors.buttons.secondary.pressedBackground
-        : semanticColors.surfaces.white,
+        ? semanticColors.button.secondary.bgPressed
+        : semanticColors.color.surface.raised,
     minHeight: 40,
     padding: `${spacing.spacing_3_4}px ${spacing.spacing_1_1_2}px`,
     gap: spacing.spacing_1,
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     [`& .${chipClasses.label}`]: {
         padding: 0,
         overflow: 'visible',
@@ -3115,23 +3165,23 @@ const StyledChip$1 = styled(Chip, {
         alignItems: 'center',
     },
     [`& .${chipClasses.deleteIcon}`]: {
-        color: semanticColors.icons.default,
+        color: semanticColors.color.icon.default,
         width: 24,
         height: 24,
         margin: 0,
         flexShrink: 0,
         '&:hover': {
-            color: semanticColors.icons.default,
+            color: semanticColors.color.icon.default,
         },
     },
     '&:hover': {
-        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+        backgroundColor: semanticColors.button.secondary.bgHover,
     },
     [`&.${chipClasses.focusVisible}`]: {
         ...focusRingStyles,
         backgroundColor: selected
-            ? semanticColors.buttons.secondary.pressedBackground
-            : semanticColors.surfaces.white,
+            ? semanticColors.button.secondary.bgPressed
+            : semanticColors.color.surface.raised,
     },
 }));
 const LabelContent = styled('span')({
@@ -3150,13 +3200,13 @@ const HeaderLabel = styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.xxs),
     fontWeight: typography.fontWeight.regular,
     lineHeight: '120%',
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
 }));
 const SelectedLabel = styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1,
-    color: semanticColors.buttons.secondary.default,
+    color: semanticColors.button.secondary.fg,
 }));
 const CountBadge = styled('span')(({ theme }) => ({
     display: 'inline-flex',
@@ -3166,8 +3216,8 @@ const CountBadge = styled('span')(({ theme }) => ({
     height: 16,
     padding: `0 ${spacing.spacing_1_2}px`,
     borderRadius: borderRadius.full,
-    backgroundColor: semanticColors.brand,
-    color: semanticColors.surfaces.white,
+    backgroundColor: semanticColors.color.action.brand,
+    color: semanticColors.color.surface.raised,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1,
@@ -3211,7 +3261,7 @@ const SpinnerWrapper = styled('div')({
  * @example
  * <ModLoadingSpinner size={32} color="#ff0000" />
  */
-const ModLoadingSpinner = ({ size = 24, color = semanticColors.buttons.primary.default, }) => {
+const ModLoadingSpinner = ({ size = 24, color = semanticColors.button.primary.bg, }) => {
     return (jsx(SpinnerWrapper, { style: { width: size, height: size }, children: jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Loading Spinner" }), jsx("g", { opacity: "0.2", children: jsx("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2.1" }) }), jsx("path", { d: "M12 2C6.477 2 2 6.477 2 12", stroke: color, strokeWidth: "2.1", strokeLinecap: "round" })] }) }));
 };
 ModLoadingSpinner.displayName = 'ModLoadingSpinner';
@@ -3219,8 +3269,8 @@ ModLoadingSpinner.displayName = 'ModLoadingSpinner';
 const StyledFooter = styled(Box, {
     shouldForwardProp: prop => prop !== 'showShadow',
 })(({ theme, showShadow = false }) => ({
-    backgroundColor: semanticColors.surfaces.white,
-    borderTop: `1px solid ${semanticColors.border.primary}`,
+    backgroundColor: semanticColors.color.surface.raised,
+    borderTop: `1px solid ${semanticColors.color.border.primary}`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -3248,7 +3298,7 @@ const ResultText = styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: semanticColors.typography.body, // typography/body: #232342
+    color: semanticColors.color.text.primary, // typography/body: #232342
     margin: 0,
     whiteSpace: 'pre',
 }));
@@ -3257,7 +3307,7 @@ const LoadMoreButton = styled('button')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: 'normal',
-    color: semanticColors.typography.link.primary,
+    color: semanticColors.color.text.link,
     background: 'none',
     border: 'none',
     padding: 0,
@@ -3267,7 +3317,7 @@ const LoadMoreButton = styled('button')(({ theme }) => ({
         textDecoration: 'underline',
     },
     '&:disabled': {
-        color: semanticColors.typography.button.disabled,
+        color: semanticColors.button.fgDisabled,
         cursor: 'not-allowed',
     },
 }));
@@ -3276,7 +3326,7 @@ const SelectedText = styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     margin: 0,
     whiteSpace: 'pre',
 }));
@@ -3290,15 +3340,15 @@ const PaginationButton = styled(IconButton)(({ disabled }) => ({
     width: spacing.spacing_5_1_2,
     height: spacing.spacing_5_1_2,
     padding: spacing.spacing_1,
-    backgroundColor: semanticColors.surfaces.white,
+    backgroundColor: semanticColors.color.surface.raised,
     borderRadius: borderRadius.full,
     '&:hover': {
-        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+        backgroundColor: semanticColors.button.secondary.bgHover,
     },
     '& svg': {
         width: 24,
         height: 24,
-        color: disabled ? semanticColors.icons.disabled : semanticColors.icons.default,
+        color: disabled ? semanticColors.color.icon.disabled : semanticColors.color.icon.default,
     },
 }));
 const PaginationText = styled('p')(({ theme }) => ({
@@ -3306,7 +3356,7 @@ const PaginationText = styled('p')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: semanticColors.typography.body, // typography/body: #232342
+    color: semanticColors.color.text.primary, // typography/body: #232342
     margin: 0,
     whiteSpace: 'pre',
 }));
@@ -3565,31 +3615,31 @@ const StyledFormControl = styled(FormControl, {
         width: '100%',
     };
 });
-const StyledInputLabel = styled(InputLabel, {
+const StyledInputLabel = styled(MuiInputLabel, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'infoIcon',
 })(({ theme }) => ({
     position: 'static',
     transform: 'none',
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     fontWeight: typography.fontWeight.medium,
-    color: semanticColors.typography.input.label,
+    color: semanticColors.color.text.inputLabel,
     display: 'flex',
     alignItems: 'center',
     gap: spacing.spacing_1_4,
     [`&.${inputLabelClasses.focused}`]: {
-        color: semanticColors.typography.input.label,
+        color: semanticColors.color.text.inputLabel,
     },
     [`&.${inputLabelClasses.disabled}`]: {
-        color: semanticColors.typography.button.disabled,
+        color: semanticColors.button.fgDisabled,
     },
     [`&.${inputLabelClasses.error}`]: {
-        color: semanticColors.typography.input.label,
+        color: semanticColors.color.text.inputLabel,
     },
 }));
 const InfoIconWrapper = styled('span')({
     display: 'inline-flex',
     alignItems: 'center',
-    color: semanticColors.icons.placeholder,
+    color: semanticColors.color.icon.placeholder,
 });
 const StyledInputBase = styled(InputBase, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'destructive',
@@ -3613,50 +3663,52 @@ const StyledInputBase = styled(InputBase, {
         height: multiline ? 'auto' : sizeStyles.height,
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
-        backgroundColor: semanticColors.input.background,
-        border: `1px solid ${destructive ? semanticColors.status.error.default : semanticColors.border.primary}`,
+        backgroundColor: semanticColors.input.bg,
+        border: `1px solid ${destructive ? semanticColors.color.status.error.solid : semanticColors.color.border.primary}`,
         transition: theme.transitions.create(['border-color', 'background-color'], {
             duration: theme.transitions.duration.short,
         }),
         [`& .${inputBaseClasses.input}`]: {
             padding: sizeStyles.padding,
-            color: semanticColors.typography.input.default,
+            color: semanticColors.color.text.input,
             // Tabular figures, no tracking — see Badge.tsx.
             fontVariantNumeric: 'tabular-nums',
             '&::placeholder': {
-                color: semanticColors.typography.input.placeholder,
+                color: semanticColors.color.text.inputPlaceholder,
             },
         },
         // Hover state
         '&:hover': {
-            backgroundColor: semanticColors.input.hoverBackground,
+            backgroundColor: semanticColors.input.bgHover,
             borderColor: destructive
-                ? semanticColors.status.error.default
-                : semanticColors.border.primary,
+                ? semanticColors.color.status.error.solid
+                : semanticColors.color.border.primary,
         },
         // Focused state
         [`&.${inputBaseClasses.focused}`]: {
-            backgroundColor: semanticColors.input.background,
+            backgroundColor: semanticColors.input.bg,
             borderColor: destructive
-                ? semanticColors.status.error.default
-                : semanticColors.buttons.primary.default,
+                ? semanticColors.color.status.error.solid
+                : semanticColors.button.primary.bg,
         },
         // Disabled state
         [`&.${inputBaseClasses.disabled}`]: {
-            backgroundColor: semanticColors.input.disabledBackground,
-            borderColor: semanticColors.border.primary,
-            color: semanticColors.typography.button.disabled,
+            backgroundColor: semanticColors.input.bgDisabled,
+            borderColor: semanticColors.color.border.primary,
+            color: semanticColors.button.fgDisabled,
             [`& .${inputBaseClasses.input}`]: {
-                WebkitTextFillColor: semanticColors.typography.button.disabled,
+                WebkitTextFillColor: semanticColors.button.fgDisabled,
             },
         },
         // Error state
         [`&.${inputBaseClasses.error}`]: {
-            borderColor: semanticColors.status.error.default,
+            borderColor: semanticColors.color.status.error.solid,
         },
         // Adornment styling
         [`& .${inputAdornmentClasses.root}`]: {
-            color: destructive ? semanticColors.status.error.default : semanticColors.icons.placeholder,
+            color: destructive
+                ? semanticColors.color.status.error.solid
+                : semanticColors.color.icon.placeholder,
         },
     };
 });
@@ -3668,12 +3720,12 @@ const StyledFormHelperText = styled(FormHelperText, {
         marginRight: 0,
         // Figma specifies 14px for helper text
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-        color: semanticColors.typography.input.helper,
+        color: semanticColors.color.text.inputHelper,
         [`&.${formHelperTextClasses.error}`]: {
-            color: semanticColors.status.error.default,
+            color: semanticColors.color.status.error.solid,
         },
         [`&.${formHelperTextClasses.disabled}`]: {
-            color: semanticColors.typography.button.disabled,
+            color: semanticColors.button.fgDisabled,
         },
     };
 });
@@ -3781,7 +3833,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         paddingBottom: config.paddingBottom,
         paddingLeft: config.paddingLeft,
         borderRadius: spacing.spacing_3_4, // 6px
-        backgroundColor: semanticColors.input.background,
+        backgroundColor: semanticColors.input.bg,
         gap: config.gap,
         // Icon is always centered vertically per Figma design
         alignItems: 'center',
@@ -3793,7 +3845,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             minWidth: config.iconSize, // Override MUI's default 56px
             width: config.iconSize,
             height: config.iconSize,
-            color: semanticColors.icons.placeholder,
+            color: semanticColors.color.icon.placeholder,
             transition: theme.transitions.create(['color'], {
                 duration: theme.transitions.duration.short,
             }),
@@ -3810,9 +3862,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
                 : size === 'small' || size === 'medium'
                     ? typography.fontWeight.regular
                     : typography.fontWeight.medium,
-            color: isLink
-                ? semanticColors.typography.link.primary
-                : semanticColors.typography.navigation.default,
+            color: isLink ? semanticColors.color.text.link : semanticColors.color.text.nav,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
@@ -3832,14 +3882,14 @@ const StyledListItemButton$1 = styled(ListItemButton, {
                 : 12),
             lineHeight: 1.5,
             fontWeight: typography.fontWeight.regular,
-            color: semanticColors.typography.bodySecondary,
+            color: 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: typography.fontWeight.regular,
-            color: semanticColors.typography.bodySecondary,
+            color: semanticColors.color.text.secondary,
             wordBreak: 'break-word',
             whiteSpace: 'normal',
             ...(size === 'large' && {
@@ -3852,29 +3902,29 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             alignItems: 'center',
             flexShrink: 0,
             marginLeft: spacing.spacing_1,
-            color: semanticColors.icons.default,
+            color: semanticColors.color.icon.default,
         },
         // Hover state
         '&:hover': {
-            backgroundColor: semanticColors.input.background,
+            backgroundColor: 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
         [`&.${listItemButtonClasses.selected}`]: {
-            backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+            backgroundColor: semanticColors.button.secondary.bgHover,
             '&:hover': {
-                backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+                backgroundColor: semanticColors.button.secondary.bgHover,
             },
             [`& .${listItemIconClasses.root}`]: {
-                color: semanticColors.icons.pressed,
+                color: semanticColors.color.icon.pressed,
             },
             '& .list-item-primary': {
                 fontWeight: size === 'large' || size === 'xlarge'
                     ? typography.fontWeight.semiBold
                     : typography.fontWeight.medium,
-                color: semanticColors.typography.navigation.default,
+                color: semanticColors.color.text.nav,
             },
             '& .list-item-secondary': {
                 fontWeight: size === 'large' || size === 'xlarge'
@@ -3884,22 +3934,22 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         },
         // Disabled state
         [`&.${listItemButtonClasses.disabled}`]: {
-            backgroundColor: semanticColors.input.disabledBackground,
+            backgroundColor: semanticColors.input.bgDisabled,
             opacity: 1,
             [`& .${listItemIconClasses.root}`]: {
-                color: semanticColors.icons.disabled,
+                color: semanticColors.color.icon.disabled,
             },
             '& .list-item-primary': {
-                color: semanticColors.buttons.tertiary.disabled,
+                color: semanticColors.button.tertiary.fgDisabled,
             },
             '& .list-item-secondary': {
-                color: semanticColors.buttons.tertiary.disabled,
+                color: semanticColors.button.tertiary.fgDisabled,
             },
             '& .list-item-badge': {
-                color: semanticColors.buttons.tertiary.disabled,
+                color: semanticColors.button.tertiary.fgDisabled,
             },
             '& .list-item-trailing': {
-                color: semanticColors.icons.disabled,
+                color: semanticColors.color.icon.disabled,
             },
         },
     };
@@ -3954,28 +4004,28 @@ function navVariantStyles(theme) {
         paddingLeft: spacing.spacing_2,
         paddingRight: spacing.spacing_2,
         border: 'none',
-        color: semanticColors.typography.bodySecondary,
+        color: semanticColors.color.text.secondary,
         backgroundColor: 'transparent',
         transition: theme.transitions.create(['background-color', 'color']),
         [`&.${listItemButtonClasses.selected}`]: {
-            backgroundColor: semanticColors.surfaces.activeHighlight,
-            color: semanticColors.typography.body,
+            backgroundColor: semanticColors.color.surface.highlightActive,
+            color: semanticColors.color.text.primary,
             '&:hover': {
-                backgroundColor: semanticColors.surfaces.activeHighlight,
+                backgroundColor: semanticColors.color.surface.highlightActive,
             },
         },
         [`&:not(.${listItemButtonClasses.selected}):not(.${listItemButtonClasses.disabled})`]: {
             '&:hover': {
-                backgroundColor: semanticColors.surfaces.listHover,
-                color: semanticColors.typography.body,
+                backgroundColor: semanticColors.color.surface.rowHover,
+                color: semanticColors.color.text.primary,
             },
         },
         [`&.${listItemButtonClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.border.focus}`,
+            outline: `2px solid ${semanticColors.color.border.focus}`,
             outlineOffset: -2,
         },
         [`&.${listItemButtonClasses.disabled}`]: {
-            color: semanticColors.typography.button.disabled,
+            color: semanticColors.button.fgDisabled,
             opacity: 1,
         },
     };
@@ -3990,71 +4040,71 @@ function cardVariantStyles(theme) {
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_3_4,
         paddingRight: spacing.spacing_3_4,
-        border: `1px solid ${semanticColors.border.primary}`,
-        backgroundColor: semanticColors.surfaces.white,
+        border: `1px solid ${semanticColors.color.border.primary}`,
+        backgroundColor: semanticColors.color.surface.raised,
         transition: theme.transitions.create(['border', 'background-color']),
         // Active (selected) state
         [`&.${listItemButtonClasses.selected}`]: {
-            border: `2px solid ${semanticColors.buttons.primary.default}`,
-            backgroundColor: semanticColors.surfaces.white,
+            border: `2px solid ${semanticColors.button.primary.bg}`,
+            backgroundColor: semanticColors.color.surface.raised,
             '&:hover': {
-                backgroundColor: semanticColors.surfaces.white,
+                backgroundColor: semanticColors.color.surface.raised,
             },
             // Icon color in selected state
             [`& .${listItemIconClasses.root}`]: {
-                color: semanticColors.icons.default,
+                color: semanticColors.color.icon.default,
             },
             // Text colors in selected state
             [`& .${listItemTextClasses.primary}`]: {
-                color: semanticColors.typography.body,
+                color: semanticColors.color.text.primary,
             },
             [`& .${listItemTextClasses.secondary}`]: {
-                color: semanticColors.typography.bodySecondary,
+                color: semanticColors.color.text.secondary,
             },
         },
         // Deselected (default) state
         [`&:not(.${listItemButtonClasses.selected}):not(.${listItemButtonClasses.disabled})`]: {
             '&:hover': {
-                backgroundColor: semanticColors.surfaces.listHover,
+                backgroundColor: semanticColors.color.surface.rowHover,
             },
             [`& .${listItemIconClasses.root}`]: {
-                color: semanticColors.icons.disabled,
+                color: semanticColors.color.icon.disabled,
             },
             [`& .${listItemTextClasses.primary}`]: {
-                color: semanticColors.buttons.tertiary.disabled,
+                color: semanticColors.button.tertiary.fgDisabled,
             },
             [`& .${listItemTextClasses.secondary}`]: {
-                color: semanticColors.typography.button.disabled,
+                color: semanticColors.button.fgDisabled,
             },
         },
         // Focus state
         [`&.${listItemButtonClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.buttons.primary.default}`,
+            outline: `2px solid ${semanticColors.button.primary.bg}`,
             outlineOffset: 2,
-            border: `2px solid ${semanticColors.buttons.primary.default}`,
-            backgroundColor: semanticColors.surfaces.white,
+            border: `2px solid ${semanticColors.button.primary.bg}`,
+            backgroundColor: semanticColors.color.surface.raised,
             [`& .${listItemIconClasses.root}`]: {
-                color: semanticColors.icons.default,
+                color: semanticColors.color.icon.default,
             },
             [`& .${listItemTextClasses.primary}`]: {
-                color: semanticColors.typography.body,
+                color: semanticColors.color.text.primary,
             },
             [`& .${listItemTextClasses.secondary}`]: {
-                color: semanticColors.typography.bodySecondary,
+                color: semanticColors.color.text.secondary,
             },
         },
         // Disabled state
         [`&.${listItemButtonClasses.disabled}`]: {
-            backgroundColor: semanticColors.surface.sunken,
+            backgroundColor: semanticColors.color.surface.sunken,
             opacity: 1, // Override MUI default opacity
             [`& .${listItemIconClasses.root}`]: {
-                color: semanticColors.icons.disabled,
+                color: semanticColors.color.icon.disabled,
             },
             [`& .${listItemTextClasses.primary}`]: {
-                color: semanticColors.typography.button.disabled,
+                color: semanticColors.button.fgDisabled,
             },
             [`& .${listItemTextClasses.secondary}`]: {
-                color: semanticColors.typography.button.disabled,
+                color: semanticColors.button.fgDisabled,
             },
         },
     };
@@ -4099,9 +4149,9 @@ ModListItemButton.displayName = 'ModListItemButton';
 
 const StyledMenu = styled(Menu)(() => ({
     [`& .${paperClasses.root}`]: {
-        backgroundColor: semanticColors.surfaces.white,
+        backgroundColor: semanticColors.color.surface.raised,
         borderRadius: borderRadius.s,
-        border: `1px solid ${semanticColors.border.primary}`,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
         marginTop: spacing.spacing_1,
         paddingTop: spacing.spacing_1,
@@ -4157,8 +4207,8 @@ const StyledCell$1 = styled('div', {
     paddingTop: spacing.spacing_1_2, // 4px — input-vertical
     paddingBottom: spacing.spacing_1_2,
     backgroundColor: disabled
-        ? semanticColors.surfaces.dataGrid.disabled
-        : semanticColors.surfaces.dataGrid.default,
+        ? semanticColors.color.surface.dataGrid.disabled
+        : semanticColors.color.surface.dataGrid.default,
     boxSizing: 'border-box',
 }));
 const LabelText = styled('span', {
@@ -4171,7 +4221,7 @@ const LabelText = styled('span', {
     fontSize: typography.fontSize.xs,
     fontWeight: typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: disabled ? semanticColors.typography.bodySecondary : semanticColors.typography.body,
+    color: disabled ? semanticColors.color.text.secondary : semanticColors.color.text.primary,
 }));
 /**
  * ModAvatarCell — DataGrid cell displaying a user avatar with optional label.
@@ -4189,9 +4239,9 @@ ModAvatarCell.displayName = 'ModAvatarCell';
 // ============================================================================
 const StyledDialog = styled(Dialog)({
     [`& .${dialogClasses.paper}`]: {
-        backgroundColor: semanticColors.surfaces.white,
+        backgroundColor: semanticColors.color.surface.raised,
         borderRadius: borderRadius.card,
-        border: `1px solid ${semanticColors.border.primary}`,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         boxShadow: 'none',
     },
     [`& .${dialogClasses.container}`]: {
@@ -4251,7 +4301,7 @@ const ModalHeaderTitle = styled('h2')(({ theme }) => ({
     fontWeight: typography.fontWeight.medium,
     fontSize: theme.typography.pxToRem(typography.fontSize.h3),
     lineHeight: 1.4,
-    color: semanticColors.typography.navigation.default,
+    color: semanticColors.color.text.nav,
 }));
 const modalHeaderTitleLinkStyles = {
     margin: 0,
@@ -4259,10 +4309,10 @@ const modalHeaderTitleLinkStyles = {
     fontWeight: typography.fontWeight.medium,
     fontSize: typography.fontSize.h3,
     lineHeight: 1.4,
-    color: semanticColors.typography.link.primary,
+    color: semanticColors.color.text.link,
     textDecoration: 'none',
     '&:hover': {
-        color: semanticColors.buttons.tertiary.hover,
+        color: semanticColors.button.tertiary.fgHover,
         textDecoration: 'underline',
     },
 };
@@ -4272,10 +4322,10 @@ const ModalHeaderSubtitle = styled('p')(({ theme }) => ({
     fontWeight: typography.fontWeight.regular,
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     lineHeight: 1.4,
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
 }));
 const StyledCloseButton = styled(IconButton)({
-    color: semanticColors.icons.utility,
+    color: semanticColors.color.icon.utility,
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
@@ -4285,7 +4335,7 @@ const StyledCloseButton = styled(IconButton)({
     flexShrink: 0,
     '&:hover': {
         backgroundColor: 'transparent',
-        color: semanticColors.icons.utility,
+        color: semanticColors.color.icon.utility,
     },
 });
 /**
@@ -4319,7 +4369,7 @@ const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
     fontWeight: typography.fontWeight.regular,
     fontSize: theme.typography.pxToRem(typography.fontSize.default),
     lineHeight: 1.5,
-    color: semanticColors.typography.navigation.default,
+    color: semanticColors.color.text.nav,
     [`&.${dialogContentClasses.root}`]: {
         paddingTop: 0,
         paddingRight: spacing.spacing_4,
@@ -4374,7 +4424,7 @@ const CellRoot = styled('div', {
     justifyContent: 'center',
     width: '100%',
     height: '100%',
-    color: disabled ? semanticColors.icons.disabled : semanticColors.icons.default,
+    color: disabled ? semanticColors.color.icon.disabled : semanticColors.color.icon.default,
 }));
 /**
  * ModIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
@@ -4397,8 +4447,8 @@ const CellWrapper = styled('div', {
     paddingLeft: spacing.spacing_1,
     paddingRight: spacing.spacing_1,
     backgroundColor: disabled
-        ? semanticColors.surfaces.dataGrid.disabled
-        : semanticColors.surfaces.dataGrid.default,
+        ? semanticColors.color.surface.dataGrid.disabled
+        : semanticColors.color.surface.dataGrid.default,
     '& img': {
         display: 'block',
         maxHeight: 32,
@@ -4436,13 +4486,13 @@ const StyledLinearProgress = styled(LinearProgress, {
     [`&.${linearProgressClasses.colorPrimary}`]: {
         backgroundColor: semanticColors.progress.track,
         [`& .${linearProgressClasses.bar}`]: {
-            backgroundColor: semanticColors.status.active.default,
+            backgroundColor: semanticColors.color.status.active.solid,
         },
     },
     // Cancelled variant uses warning color
     '&[data-variant="cancelled"]': {
         [`& .${linearProgressClasses.bar}`]: {
-            backgroundColor: semanticColors.status.warning.default,
+            backgroundColor: semanticColors.color.status.warning.solid,
         },
     },
 }));
@@ -4471,7 +4521,7 @@ const ProgressWrapper = styled('div')(({ labelPosition }) => ({
 const ProgressLabel = styled(Typography)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     fontWeight: typography.fontWeight.medium,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
     lineHeight: 1.4,
     whiteSpace: 'nowrap',
     flexShrink: 0,
@@ -4505,8 +4555,8 @@ const StyledCell = styled('div', {
     paddingLeft: spacing.spacing_1_1_2, // 12px input-horizontal
     paddingRight: spacing.spacing_1_1_2,
     backgroundColor: disabled
-        ? semanticColors.surfaces.dataGrid.disabled
-        : semanticColors.surfaces.dataGrid.default,
+        ? semanticColors.color.surface.dataGrid.disabled
+        : semanticColors.color.surface.dataGrid.default,
     boxSizing: 'border-box',
 }));
 /**
@@ -4518,10 +4568,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: semanticColors.status[variant].light,
-    fg: semanticColors.status[variant].dark,
-    border: semanticColors.status[variant].transparent,
+    bg: semanticColors.color.status[variant].bg,
+    fg: semanticColors.color.status[variant].fg,
+    border: semanticColors.color.status[variant].tint,
 });
 const StyledChip = styled('div', {
     shouldForwardProp: prop => prop !== 'disabled' && prop !== 'variant',
@@ -4536,9 +4590,9 @@ const StyledChip = styled('div', {
         paddingLeft: spacing.spacing_1_1_2,
         paddingRight: spacing.spacing_1_1_2,
         borderRadius: borderRadius.full,
-        border: `1px solid ${disabled ? semanticColors.border.secondary : colors.border}`,
-        backgroundColor: disabled ? semanticColors.surfaces.dataGrid.disabled : colors.bg,
-        color: disabled ? semanticColors.icons.disabled : colors.fg,
+        border: `1px solid ${disabled ? semanticColors.color.border.primary : colors.border}`,
+        backgroundColor: disabled ? semanticColors.color.surface.dataGrid.disabled : colors.bg,
+        color: disabled ? semanticColors.color.icon.disabled : colors.fg,
         fontFamily: typography.fontFamily.body,
         fontSize: typography.fontSize.xs,
         fontWeight: typography.fontWeight.medium,
@@ -4563,7 +4617,7 @@ const TooltipErrorPre = styled('pre')({
     fontSize: typography.fontSize.sm,
     fontWeight: typography.fontWeight.regular,
     lineHeight: 1.5,
-    color: semanticColors.typography.tooltip.default,
+    color: semanticColors.color.text.tooltip,
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-all',
     maxHeight: 200,
@@ -4571,12 +4625,12 @@ const TooltipErrorPre = styled('pre')({
 });
 const StyledTooltip$1 = styled(Tooltip)({
     [`& .${tooltipClasses.tooltip}`]: {
-        backgroundColor: semanticColors.surfaces.tooltip,
+        backgroundColor: semanticColors.color.surface.tooltip,
         maxWidth: 400,
         padding: `${spacing.spacing_1}px ${spacing.spacing_1_1_2}px`,
     },
     [`& .${tooltipClasses.arrow}`]: {
-        color: semanticColors.surfaces.tooltip,
+        color: semanticColors.color.surface.tooltip,
     },
 });
 /**
@@ -4585,7 +4639,7 @@ const StyledTooltip$1 = styled(Tooltip)({
 const ModStatusCell = ({ icon, label, details, disabled = false, variant = 'success', empty = false, }) => {
     if (empty) {
         return (jsx(Box, { component: "span", sx: {
-                color: semanticColors.typography.body,
+                color: semanticColors.color.text.primary,
                 fontSize: typography.fontSize.sm,
                 lineHeight: 1,
             }, children: '—' }));
@@ -4606,10 +4660,10 @@ const NavigationAvatarContainer = styled('div')({
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: '50%',
-    border: `1px solid ${semanticColors.border.secondary}`,
-    backgroundColor: semanticColors.buttons.secondary.defaultBackground,
+    border: `1px solid ${semanticColors.color.border.primary}`,
+    backgroundColor: semanticColors.button.secondary.bg,
     '&:focus-within': {
-        borderColor: semanticColors.border.focus,
+        borderColor: semanticColors.color.border.focus,
     },
 });
 /**
@@ -4633,19 +4687,19 @@ const useModSideNav = () => useContext(ModSideNavContext);
  */
 const variantConfig = {
     light: {
-        backgroundColor: semanticColors.surfaces.tooltip, // #4b5563 - medium gray
-        color: semanticColors.typography.tooltip.default, // #ffffff - white
+        backgroundColor: semanticColors.color.surface.tooltip, // #4b5563 - medium gray
+        color: semanticColors.color.text.tooltip, // #ffffff - white
     },
     dark: {
-        backgroundColor: semanticColors.surfaces.white,
-        color: semanticColors.typography.body,
+        backgroundColor: semanticColors.color.surface.raised,
+        color: 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: semanticColors.surfaces.snackbarBrand,
-        color: semanticColors.typography.linkWhite,
+        backgroundColor: semanticColors.color.surface.snackbarBrand,
+        color: semanticColors.color.text.linkOnDark,
     },
 };
 /**
@@ -4729,11 +4783,11 @@ const StyledRoot = styled(ButtonBase, {
     cursor: 'pointer',
     textDecoration: 'none',
     '&:hover .mod-nav-icon-padding': {
-        backgroundColor: semanticColors.accent.tint,
-        borderColor: semanticColors.accent.border,
+        backgroundColor: semanticColors.color.action.tint,
+        borderColor: semanticColors.color.action.border,
     },
     '&:hover .mod-nav-label': {
-        color: semanticColors.text.primary,
+        color: semanticColors.color.text.primary,
         fontWeight: typography.fontWeight.semiBold,
     },
     [`& .${chipClasses.root}`]: {
@@ -4744,16 +4798,16 @@ const StyledRoot = styled(ButtonBase, {
     },
     ...(selected && {
         '& .mod-nav-icon-padding': {
-            backgroundColor: semanticColors.accent.tint,
-            borderColor: semanticColors.accent.border,
-            color: semanticColors.accent.deep,
+            backgroundColor: semanticColors.color.action.tint,
+            borderColor: semanticColors.color.action.border,
+            color: semanticColors.color.action.navy,
         },
         '& .mod-nav-label': {
-            color: semanticColors.accent.deep,
+            color: semanticColors.color.action.navy,
             fontWeight: typography.fontWeight.semiBold,
         },
         '&:hover .mod-nav-label': {
-            color: semanticColors.accent.deep,
+            color: semanticColors.color.action.navy,
         },
     }),
 }));
@@ -4763,7 +4817,7 @@ const IconPadding = styled('span')({
     padding: spacing.spacing_1, // 8px
     borderRadius: borderRadius.xS, // 4px
     border: '1px solid transparent',
-    color: semanticColors.icons.default,
+    color: semanticColors.color.icon.default,
     transition: 'background-color 150ms, border-color 150ms, color 150ms',
 });
 const navLabel = semanticTypography.navigationLabel.default;
@@ -4773,7 +4827,7 @@ const Label$2 = styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(navLabel.fontSize),
     lineHeight: navLabel.lineHeight,
     textAlign: 'center',
-    color: semanticColors.text.primary,
+    color: semanticColors.color.text.primary,
     width: '100%',
     transition: 'color 150ms',
 }));
@@ -4800,7 +4854,7 @@ const StickyHeader = styled(Box)(({ theme }) => ({
     position: 'sticky',
     top: 0,
     zIndex: theme.zIndex.appBar,
-    backgroundColor: semanticColors.surface.canvasContent,
+    backgroundColor: semanticColors.color.surface.canvas,
     flexShrink: 0,
 }));
 /**
@@ -4809,14 +4863,14 @@ const StickyHeader = styled(Box)(({ theme }) => ({
 const PageTitle = styled(Typography)(() => ({
     ...semanticTypography.titles.pageHeader,
     lineHeight: 1.4,
-    color: semanticColors.typography.body,
+    color: semanticColors.color.text.primary,
 }));
 /**
  * Subtitle typography
  */
 const Subtitle = styled(Typography)(() => ({
     fontSize: typography.fontSize.sm,
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
 }));
 /**
  * ModPageContent - Page content surface from the Moderne Design System
@@ -4911,8 +4965,8 @@ function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
             minHeight: '50vh',
         }, children: jsx(ModLoadingSpinner, {}) })) : (children);
     return (jsxs(Fragment, { children: [jsx(Box, { sx: {
-                    backgroundColor: semanticColors.surface.canvasContent,
-                    border: `1px solid ${semanticColors.border.primary}`,
+                    backgroundColor: semanticColors.color.surface.canvas,
+                    border: `1px solid ${semanticColors.color.border.primary}`,
                     borderRadius: `${borderRadius.input}px`,
                     height: '100%',
                     display: 'flex',
@@ -4955,10 +5009,10 @@ function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
                         right: spacing.spacing_4,
                         zIndex: 1000,
                     }, children: jsx(Fab, { sx: {
-                            backgroundColor: `color-mix(in srgb, ${semanticColors.buttons.primary.default} 12.5%, transparent)`,
-                            color: semanticColors.buttons.primary.default,
+                            backgroundColor: `color-mix(in srgb, ${semanticColors.button.primary.bg} 12.5%, transparent)`,
+                            color: semanticColors.button.primary.bg,
                             '&:hover': {
-                                backgroundColor: `color-mix(in srgb, ${semanticColors.buttons.primary.default} 18.8%, transparent)`,
+                                backgroundColor: `color-mix(in srgb, ${semanticColors.button.primary.bg} 18.8%, transparent)`,
                             },
                         }, title: "Back to top", size: "small", onClick: handleScrollToTop, children: jsx(ChevronUp, { size: 20 }) }) }) }))] }));
 }
@@ -5015,8 +5069,8 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
         height: spacing.spacing_5,
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         borderRadius: borderRadius.input,
-        backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.primary}`,
+        backgroundColor: semanticColors.input.bg,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         paddingTop: spacing.spacing_1,
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
@@ -5027,26 +5081,26 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
         },
         [`& .${inputBaseClasses.input}`]: {
             padding: 0,
-            color: semanticColors.typography.input.default,
+            color: semanticColors.color.text.input,
             '&::placeholder': {
-                color: semanticColors.typography.input.placeholder,
+                color: semanticColors.color.text.inputPlaceholder,
                 opacity: 1,
             },
         },
         '&:hover': {
-            backgroundColor: semanticColors.input.hoverBackground,
+            backgroundColor: semanticColors.input.bgHover,
         },
         [`&.${inputBaseClasses.focused}`]: {
-            backgroundColor: semanticColors.input.background,
-            borderColor: semanticColors.buttons.primary.default,
+            backgroundColor: semanticColors.input.bg,
+            borderColor: semanticColors.button.primary.bg,
         },
         [`&.${inputBaseClasses.disabled}`]: {
-            backgroundColor: semanticColors.input.disabledBackground,
-            color: semanticColors.typography.button.disabled,
+            backgroundColor: semanticColors.input.bgDisabled,
+            color: semanticColors.button.fgDisabled,
         },
     },
     [`& .${inputAdornmentClasses.root}`]: {
-        color: semanticColors.icons.placeholder,
+        color: semanticColors.color.icon.placeholder,
         '& svg': {
             width: 14,
             height: 14,
@@ -5056,10 +5110,10 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
         marginRight: 0,
     },
     [`& .${iconButtonClasses.root}`]: {
-        color: semanticColors.icons.placeholder,
+        color: semanticColors.color.icon.placeholder,
         '&:hover': {
-            backgroundColor: semanticColors.icons.hoverBackground,
-            color: semanticColors.icons.utility,
+            backgroundColor: semanticColors.color.icon.bgHover,
+            color: semanticColors.color.icon.utility,
         },
         '& svg': {
             width: 16,
@@ -5106,14 +5160,14 @@ ModQuickFilter.displayName = 'ModQuickFilter';
 const UncheckedIcon = ({ size, disabled }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
-    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Unchecked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: semanticColors.border.strong, strokeWidth: "1", fill: disabled ? semanticColors.buttons.primary.disabled : 'transparent' })] }));
+    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Unchecked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: semanticColors.color.border.strong, strokeWidth: "1", fill: disabled ? 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 (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Checked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, fill: disabled ? semanticColors.buttons.primary.disabled : semanticColors.icons.active, stroke: disabled ? semanticColors.border.primary : semanticColors.icons.active, strokeWidth: "1" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: innerRadius, fill: disabled ? semanticColors.icons.disabled : semanticColors.surfaces.white })] }));
+    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Checked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, fill: disabled ? semanticColors.button.primary.bgDisabled : semanticColors.color.icon.active, stroke: disabled ? semanticColors.color.border.primary : semanticColors.color.icon.active, strokeWidth: "1" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: innerRadius, fill: disabled ? semanticColors.color.icon.disabled : semanticColors.color.surface.raised })] }));
 };
 const RadioContainer = styled('label')(({ disabled }) => ({
     display: 'inline-flex',
@@ -5139,13 +5193,13 @@ const Label$1 = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? typography.fontSize.sm : typography.fontSize.default),
     fontWeight: typography.fontWeight.medium,
     lineHeight: size === 'small' ? 1.4 : 1.5,
-    color: semanticColors.typography.input.default,
+    color: semanticColors.color.text.input,
 }));
 const HelperText$1 = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? typography.fontSize.sm : typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: size === 'small' ? 1.4 : 1.5,
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
 }));
 const StyledRadio = styled(Radio, {
     shouldForwardProp: prop => prop !== 'size',
@@ -5158,9 +5212,9 @@ const StyledRadio = styled(Radio, {
         height: dimensions,
         flexShrink: 0,
         borderRadius: radius,
-        color: semanticColors.border.strong,
+        color: semanticColors.color.border.strong,
         [`&.${radioClasses.checked}`]: {
-            color: semanticColors.icons.active,
+            color: semanticColors.color.icon.active,
         },
         '&:hover': {
             backgroundColor: 'transparent',
@@ -5173,7 +5227,7 @@ const StyledRadio = styled(Radio, {
         // Focus state for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
             // Unchecked focus state: white background
-            backgroundColor: semanticColors.surfaces.white,
+            backgroundColor: semanticColors.color.surface.raised,
             // Checked focus state: keep the blue circle visible
             [`&.${radioClasses.checked}`]: {
                 backgroundColor: 'transparent',
@@ -5181,9 +5235,9 @@ const StyledRadio = styled(Radio, {
         },
         // Disabled state — icons handle their own disabled colors
         [`&.${radioClasses.disabled}`]: {
-            color: semanticColors.border.primary,
+            color: semanticColors.color.border.primary,
             [`&.${radioClasses.checked}`]: {
-                color: semanticColors.border.primary,
+                color: semanticColors.color.border.primary,
             },
         },
     };
@@ -5277,15 +5331,15 @@ ModRipplingDot.displayName = 'ModRipplingDot';
 
 const StyledSearchChip = styled(InputBase)(({ theme }) => ({
     borderRadius: borderRadius.button,
-    border: `1px solid ${semanticColors.border.primary}`,
-    backgroundColor: semanticColors.surfaces.white,
+    border: `1px solid ${semanticColors.color.border.primary}`,
+    backgroundColor: semanticColors.color.surface.raised,
     height: 40,
     padding: `0 ${spacing.spacing_1_1_2}px`,
     gap: spacing.spacing_1_2,
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1,
-    color: semanticColors.typography.input.default,
+    color: semanticColors.color.text.input,
     cursor: 'text',
     boxSizing: 'border-box',
     transition: theme.transitions.create(['border-color', 'background-color'], {
@@ -5296,7 +5350,7 @@ const StyledSearchChip = styled(InputBase)(({ theme }) => ({
         height: 'auto',
         lineHeight: 1,
         '&::placeholder': {
-            color: semanticColors.typography.input.placeholder,
+            color: semanticColors.color.text.inputPlaceholder,
             opacity: 1,
         },
         // Hide native browser clear button for type="search" (we provide our own)
@@ -5305,22 +5359,22 @@ const StyledSearchChip = styled(InputBase)(({ theme }) => ({
         },
     },
     '&:hover': {
-        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
-        borderColor: semanticColors.accent.border,
+        backgroundColor: semanticColors.button.secondary.bgHover,
+        borderColor: 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.
     [`&.${inputBaseClasses.disabled}`]: {
-        backgroundColor: semanticColors.surfaces.white,
-        borderColor: semanticColors.border.primary,
+        backgroundColor: semanticColors.color.surface.raised,
+        borderColor: 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.
     [`&.${inputBaseClasses.focused}`]: {
-        backgroundColor: semanticColors.surfaces.white,
-        borderColor: semanticColors.border.focus,
-        outline: `3px solid ${semanticColors.accent.tint}`,
+        backgroundColor: semanticColors.color.surface.raised,
+        borderColor: semanticColors.color.border.focus,
+        outline: `3px solid ${semanticColors.color.action.tint}`,
     },
 }));
 const ClearButton = styled(ButtonBase)({
@@ -5333,11 +5387,11 @@ const ClearButton = styled(ButtonBase)({
     border: 'none',
     backgroundColor: 'transparent',
     cursor: 'pointer',
-    color: semanticColors.icons.default,
+    color: semanticColors.color.icon.default,
     flexShrink: 0,
     borderRadius: borderRadius.button,
     '&:hover': {
-        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+        backgroundColor: semanticColors.button.secondary.bgHover,
     },
 });
 /**
@@ -5348,7 +5402,7 @@ const ClearButton = styled(ButtonBase)({
  */
 const ModSearchChip = ({ onClear, value, ...props }) => {
     const hasValue = Boolean(value && String(value).length > 0);
-    return (jsx(StyledSearchChip, { type: "search", value: value, startAdornment: jsx(Search, { size: 16, color: semanticColors.icons.placeholder, style: { flexShrink: 0 } }), endAdornment: hasValue && onClear ? (jsx(ClearButton, { type: "button", onClick: onClear, "aria-label": "Clear search", children: jsx(X, { size: 16 }) })) : undefined, ...props }));
+    return (jsx(StyledSearchChip, { type: "search", value: value, startAdornment: jsx(Search, { size: 16, color: semanticColors.color.icon.placeholder, style: { flexShrink: 0 } }), endAdornment: hasValue && onClear ? (jsx(ClearButton, { type: "button", onClick: onClear, "aria-label": "Clear search", children: jsx(X, { size: 16 }) })) : undefined, ...props }));
 };
 ModSearchChip.displayName = 'ModSearchChip';
 
@@ -5382,7 +5436,7 @@ const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : us
 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 = semanticColors.surfaces.page;
+const RAIL_BACKGROUND = 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 = styled('div', {
@@ -5493,12 +5547,12 @@ const Handle = styled(ButtonBase)(({ theme }) => ({
     height: spacing.spacing_5,
     borderRadius: borderRadius.s,
     backgroundColor: RAIL_BACKGROUND,
-    border: `1px solid ${semanticColors.border.secondary}`,
-    color: semanticColors.typography.bodySecondary,
+    border: `1px solid ${semanticColors.color.border.primary}`,
+    color: semanticColors.color.text.secondary,
     transition: theme.transitions.create(['color', 'border-color']),
     '&:hover': {
-        color: semanticColors.typography.body,
-        borderColor: semanticColors.border.primary,
+        color: semanticColors.color.text.primary,
+        borderColor: semanticColors.color.border.primary,
     },
 }));
 /**
@@ -5585,7 +5639,7 @@ const StyledSkeleton = styled(Skeleton, {
     transform: 'none',
     // Light theme colors
     ...(colorTheme === 'light' && {
-        backgroundColor: semanticColors.skeleton.background,
+        backgroundColor: semanticColors.skeleton.bg,
         '&::after': {
             background: `linear-gradient(90deg, transparent, ${semanticColors.skeleton.wave}, transparent)`,
         },
@@ -5632,23 +5686,23 @@ const StyledTable = styled(MuiTable, {
     borderCollapse: 'separate',
     borderSpacing: 0,
     [`& .${tableCellClasses.head}`]: {
-        backgroundColor: semanticColors.surfaces.dataGrid.header,
-        color: semanticColors.typography.body,
+        backgroundColor: semanticColors.color.surface.dataGrid.header,
+        color: semanticColors.color.text.primary,
         fontFamily: typography.fontFamily.body,
         fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
         fontWeight: typography.fontWeight.semiBold,
         lineHeight: 1.4,
         padding: sizePadding[tableSize],
-        borderBottom: `1px solid ${semanticColors.border.secondary}`,
+        borderBottom: `1px solid ${semanticColors.color.border.primary}`,
     },
     [`& .${tableCellClasses.body}`]: {
-        color: semanticColors.typography.body,
+        color: semanticColors.color.text.primary,
         fontFamily: typography.fontFamily.body,
         fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1.4,
         padding: sizePadding[tableSize],
-        borderBottom: `1px solid ${semanticColors.border.secondary}`,
+        borderBottom: `1px solid ${semanticColors.color.border.primary}`,
     },
     // Drop the trailing row's bottom border so the container border (if
     // any) is the visual edge.
@@ -5660,10 +5714,10 @@ const StyledContainer = styled('div', {
     shouldForwardProp: prop => prop !== 'tableVariant',
 })(({ tableVariant = 'bordered' }) => tableVariant === 'bordered'
     ? {
-        border: `1px solid ${semanticColors.border.secondary}`,
+        border: `1px solid ${semanticColors.color.border.primary}`,
         borderRadius: borderRadius.card,
         overflow: 'hidden',
-        backgroundColor: semanticColors.surfaces.white,
+        backgroundColor: semanticColors.color.surface.raised,
     }
     : { backgroundColor: 'transparent' });
 /**
@@ -5691,7 +5745,7 @@ ModTable.displayName = 'ModTable';
 const StyledTabPanel = styled(Box, {
     shouldForwardProp: prop => prop !== 'tabPanelVariant',
 })(({ tabPanelVariant = 'default' }) => ({
-    backgroundColor: semanticColors.surfaces.white,
+    backgroundColor: 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).
@@ -5729,7 +5783,7 @@ ModTabPanel.displayName = 'ModTabPanel';
 const ModTabs = styled(MuiTabs)(() => ({
     minHeight: spacing.spacing_5,
     [`& .${tabsClasses.indicator}`]: {
-        backgroundColor: semanticColors.buttons.navigation.activeBorder,
+        backgroundColor: semanticColors.button.nav.borderActive,
         height: 2,
     },
     [`& .${tabsClasses.list}`]: {
@@ -5744,14 +5798,14 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
     fontWeight: typography.fontWeight.regular,
     fontSize: theme.typography.pxToRem(14),
     lineHeight: '1.5rem',
-    color: semanticColors.typography.tab.inactive,
+    color: semanticColors.color.text.tabInactive,
     transition: 'none', // Remove animation
     [`&.${tabClasses.selected}`]: {
-        color: semanticColors.typography.tab.active,
+        color: semanticColors.color.text.tabActive,
         fontWeight: typography.fontWeight.semiBold,
     },
     '&:hover': {
-        color: semanticColors.typography.tab.active,
+        color: semanticColors.color.text.tabActive,
         [`&.${tabClasses.selected}::after`]: {
             content: '""',
             position: 'absolute',
@@ -5759,23 +5813,23 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
             left: 0,
             right: 0,
             height: 2,
-            backgroundColor: semanticColors.buttons.navigation.activeBorder,
+            backgroundColor: semanticColors.button.nav.borderActive,
         },
     },
     [`&.${buttonBaseClasses.focusVisible}`]: {
-        color: semanticColors.typography.tab.active,
-        outline: `2px solid ${semanticColors.border.focus}`,
+        color: semanticColors.color.text.tabActive,
+        outline: `2px solid ${semanticColors.color.border.focus}`,
         outlineOffset: -2,
     },
     [`&.${tabClasses.disabled}`]: {
-        color: semanticColors.typography.button.disabled,
+        color: semanticColors.button.fgDisabled,
         cursor: 'not-allowed',
         pointerEvents: 'auto',
         '&:hover': {
             backgroundColor: 'transparent',
         },
         [`&.${tabClasses.selected}`]: {
-            color: semanticColors.typography.button.disabled,
+            color: semanticColors.button.fgDisabled,
             '&::after': {
                 content: '""',
                 position: 'absolute',
@@ -5783,7 +5837,7 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
                 left: 0,
                 right: 0,
                 height: 2,
-                backgroundColor: semanticColors.buttons.tertiary.disabled,
+                backgroundColor: semanticColors.button.tertiary.fgDisabled,
             },
         },
     },
@@ -5804,34 +5858,34 @@ ModTab.displayName = 'ModTab';
 
 const intentStyles = {
     neutral: {
-        background: semanticColors.status.neutral.light,
-        border: semanticColors.border.primary,
-        text: semanticColors.status.neutral.dark,
-        action: semanticColors.typography.link.default,
+        background: semanticColors.color.status.neutral.bg,
+        border: semanticColors.color.border.primary,
+        text: semanticColors.color.status.neutral.fg,
+        action: semanticColors.color.text.link,
     },
     info: {
-        background: semanticColors.toast.infoBg,
-        border: semanticColors.toast.infoBorder,
-        text: semanticColors.toast.infoText,
-        action: semanticColors.toast.infoText,
+        background: semanticColors.toast.info.bg,
+        border: semanticColors.toast.info.border,
+        text: semanticColors.toast.info.fg,
+        action: semanticColors.toast.info.fg,
     },
     success: {
-        background: semanticColors.toast.successBg,
-        border: semanticColors.toast.successBorder,
-        text: semanticColors.toast.successText,
-        action: semanticColors.toast.successText,
+        background: semanticColors.toast.success.bg,
+        border: semanticColors.toast.success.border,
+        text: semanticColors.toast.success.fg,
+        action: semanticColors.toast.success.fg,
     },
     error: {
-        background: semanticColors.toast.errorBg,
-        border: semanticColors.toast.errorBorder,
-        text: semanticColors.toast.errorText,
-        action: semanticColors.toast.errorText,
+        background: semanticColors.toast.error.bg,
+        border: semanticColors.toast.error.border,
+        text: semanticColors.toast.error.fg,
+        action: semanticColors.toast.error.fg,
     },
     warning: {
-        background: semanticColors.toast.warningBg,
-        border: semanticColors.toast.warningBorder,
-        text: semanticColors.toast.warningText,
-        action: semanticColors.toast.warningText,
+        background: semanticColors.toast.warning.bg,
+        border: semanticColors.toast.warning.border,
+        text: semanticColors.toast.warning.fg,
+        action: semanticColors.toast.warning.fg,
     },
 };
 const shadowRegular = shadows.neutral.regular;
@@ -5906,7 +5960,7 @@ const ToastButton = styled(Button, {
  * ModToast - Notification/Toast component based on MUI Alert
  */
 const ModToast = ({ intent = 'neutral', type: _type, title, message, showClose = false, actions, onClose, ...props }) => {
-    return (jsxs(StyledAlert, { ...props, intent: intent, action: showClose ? (jsx(IconButton, { size: "small", onClick: onClose, sx: { color: semanticColors.icons.utility }, children: jsx(X, { size: 16 }) })) : undefined, children: [jsxs(Stack, { sx: { gap: `${spacing.spacing_1}px`, width: '100%' }, children: [title && jsx(ToastTitle, { intent: intent, children: title }), message && jsx(ToastMessage, { intent: intent, children: message })] }), actions && jsx(ToastActions, { direction: "row", children: actions })] }));
+    return (jsxs(StyledAlert, { ...props, intent: intent, action: showClose ? (jsx(IconButton, { size: "small", onClick: onClose, sx: { color: semanticColors.color.icon.utility }, children: jsx(X, { size: 16 }) })) : undefined, children: [jsxs(Stack, { sx: { gap: `${spacing.spacing_1}px`, width: '100%' }, children: [title && jsx(ToastTitle, { intent: intent, children: title }), message && jsx(ToastMessage, { intent: intent, children: message })] }), actions && jsx(ToastActions, { direction: "row", children: actions })] }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
@@ -5933,13 +5987,13 @@ const Label = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? typography.fontSize.sm : typography.fontSize.default),
     fontWeight: typography.fontWeight.medium,
     lineHeight: size === 'small' ? 1.4 : 1.5,
-    color: semanticColors.typography.input.default,
+    color: semanticColors.color.text.input,
 }));
 const HelperText = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? typography.fontSize.sm : typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: size === 'small' ? 1.4 : 1.5,
-    color: semanticColors.typography.bodySecondary,
+    color: semanticColors.color.text.secondary,
 }));
 const StyledSwitch = styled(Switch, {
     shouldForwardProp: prop => prop !== 'size',
@@ -5972,23 +6026,23 @@ const StyledSwitch = styled(Switch, {
         // Root element
         [`& .${switchClasses.switchBase}`]: {
             padding: config.trackPadding,
-            color: semanticColors.surfaces.toggleKnob,
+            color: semanticColors.control.knob,
             transition: theme.transitions.create(['transform'], {
                 duration: theme.transitions.duration.shortest,
             }),
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
                 [`& + .${switchClasses.track}`]: {
-                    outline: `2px solid ${semanticColors.border.focus}`,
+                    outline: `2px solid ${semanticColors.color.border.focus}`,
                     outlineOffset: 2,
                 },
             },
             // Checked state
             [`&.${switchClasses.checked}`]: {
                 transform: `translateX(${thumbTranslate}px)`,
-                color: semanticColors.surfaces.toggleKnob,
+                color: semanticColors.control.knob,
                 [`& + .${switchClasses.track}`]: {
-                    backgroundColor: semanticColors.buttons.primary.default,
+                    backgroundColor: semanticColors.button.primary.bg,
                     opacity: 1,
                     border: 'none',
                 },
@@ -5996,18 +6050,18 @@ const StyledSwitch = styled(Switch, {
             // Disabled state
             [`&.${switchClasses.disabled}`]: {
                 // Thumb changes to disabled background color for both checked and unchecked
-                color: semanticColors.input.disabledBackground,
+                color: semanticColors.input.bgDisabled,
                 cursor: 'not-allowed',
                 // Both checked and unchecked use the same grey track when disabled
                 [`& + .${switchClasses.track}`]: {
-                    backgroundColor: semanticColors.border.secondary,
+                    backgroundColor: semanticColors.color.border.primary,
                     opacity: 1,
                     border: 'none',
                 },
             },
             // More specific selector for disabled+checked to override checked color
             [`&.${switchClasses.disabled}.${switchClasses.checked}`]: {
-                color: semanticColors.input.disabledBackground,
+                color: semanticColors.input.bgDisabled,
             },
         },
         // Thumb
@@ -6024,12 +6078,12 @@ const StyledSwitch = styled(Switch, {
             width: config.width,
             height: config.height,
             borderRadius: config.height / 2,
-            backgroundColor: semanticColors.surface.sunken2,
+            backgroundColor: 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 ${semanticColors.border.strong}`,
+            border: `1px solid ${semanticColors.color.border.strong}`,
             transition: theme.transitions.create(['background-color'], {
                 duration: theme.transitions.duration.short,
             }),
@@ -6090,7 +6144,7 @@ const StyledToggleButton$1 = styled(MuiToggleButton, {
         fontSize: theme.typography.pxToRem(sizeStyles[toggleSize].fontSize),
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1,
-        color: segmented ? semanticColors.typography.body : semanticColors.typography.bodySecondary,
+        color: segmented ? semanticColors.color.text.primary : semanticColors.color.text.secondary,
         backgroundColor: 'transparent',
         border: 'none',
         // Segmented buttons are independent rounded pills on the group's track.
@@ -6100,22 +6154,22 @@ const StyledToggleButton$1 = styled(MuiToggleButton, {
             duration: theme.transitions.duration.short,
         }),
         '&:hover': {
-            backgroundColor: segmented ? 'transparent' : semanticColors.surfaces.tabActive,
-            color: semanticColors.typography.body,
+            backgroundColor: segmented ? 'transparent' : semanticColors.color.surface.tabActive,
+            color: semanticColors.color.text.primary,
         },
         '&.Mui-selected, &.Mui-selected:hover': {
             backgroundColor: segmented
-                ? semanticColors.surfaces.card
-                : semanticColors.surfaces.tabActive,
-            color: segmented ? semanticColors.accent.default : semanticColors.typography.body,
+                ? semanticColors.color.surface.raised
+                : semanticColors.color.surface.tabActive,
+            color: segmented ? semanticColors.color.action.default : semanticColors.color.text.primary,
             fontWeight: typography.fontWeight.semiBold,
         },
         '&.Mui-focusVisible': {
-            outline: `2px solid ${semanticColors.border.focus}`,
+            outline: `2px solid ${semanticColors.color.border.focus}`,
             outlineOffset: -2,
         },
         '&.Mui-disabled': {
-            color: semanticColors.typography.button.disabled,
+            color: semanticColors.button.fgDisabled,
             cursor: 'default',
             pointerEvents: 'none',
         },
@@ -6139,7 +6193,7 @@ const StyledToggleButtonGroup$1 = styled(MuiToggleButtonGroup, {
         ...(segmented
             ? {
                 // Sunken track holding raised pills (the Morpheus `.seg` control).
-                backgroundColor: semanticColors.surface.sunken2,
+                backgroundColor: semanticColors.color.surface.sunkenDeep,
                 borderRadius: borderRadius.input,
                 border: 'none',
                 padding: spacing.spacing_1_2,
@@ -6147,7 +6201,7 @@ const StyledToggleButtonGroup$1 = styled(MuiToggleButtonGroup, {
             }
             : {
                 borderRadius: borderRadius.button,
-                border: `1px solid ${semanticColors.border.secondary}`,
+                border: `1px solid ${semanticColors.color.border.primary}`,
                 overflow: 'hidden',
             }),
         // Default fuses the children (square inner corners, no gap); segmented
@@ -6181,7 +6235,7 @@ const ModToggleButtonGroup = ({ size = 'medium', variant = 'default', children,
 ModToggleButtonGroup.displayName = 'ModToggleButtonGroup';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
-    backgroundColor: semanticColors.surfaces.white,
+    backgroundColor: semanticColors.color.surface.raised,
     minHeight: 'auto',
     justifyContent: 'space-between',
     // Apply padding directly to match Figma design (16px horizontal, 12px vertical)
@@ -6274,7 +6328,7 @@ const ItemIcon = styled('span')({
     width: 16,
     height: 16,
     flexShrink: 0,
-    color: semanticColors.icons.default,
+    color: semanticColors.color.icon.default,
     '& svg': {
         width: 16,
         height: 16,
@@ -6292,13 +6346,13 @@ const ItemSecondaryLabel = styled('span')({
     fontSize: typography.fontSize.xs,
     fontWeight: typography.fontWeight.regular,
     fontFamily: typography.fontFamily.body,
-    color: semanticColors.typography.link.primary,
+    color: semanticColors.color.text.link,
 });
 const ItemEndAction = styled('span')({
     display: 'inline-flex',
     alignItems: 'center',
     flexShrink: 0,
-    color: semanticColors.icons.utility,
+    color: semanticColors.color.icon.utility,
     '& svg': {
         width: 16,
         height: 16,
@@ -6334,36 +6388,36 @@ const StyledTreeView = styled(RichTreeViewPro)({
         borderRadius: 0,
     },
     [`& .${treeItemClasses.content}:hover`]: {
-        backgroundColor: semanticColors.surfaces.listHover,
+        backgroundColor: semanticColors.color.surface.rowHover,
     },
     [`& .${treeItemClasses.content}[data-focused]`]: {
-        boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.color.border.focus}`,
         backgroundColor: 'transparent',
     },
     [`& .${treeItemClasses.content}[data-selected]`]: {
-        backgroundColor: semanticColors.surfaces.listHover,
+        backgroundColor: semanticColors.color.surface.rowHover,
     },
     [`& .${treeItemClasses.content}[data-selected][data-focused]`]: {
-        backgroundColor: semanticColors.surfaces.listHover,
-        boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
+        backgroundColor: semanticColors.color.surface.rowHover,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.color.border.focus}`,
     },
     [`& .${treeItemClasses.label}`]: {
         fontSize: typography.fontSize.xs,
         fontWeight: typography.fontWeight.regular,
         fontFamily: typography.fontFamily.body,
-        color: semanticColors.typography.body,
+        color: semanticColors.color.text.primary,
         padding: 0,
     },
     [`& .${treeItemClasses.iconContainer}`]: {
         width: 16,
-        color: semanticColors.icons.default,
+        color: semanticColors.color.icon.default,
         '& svg': {
             width: 16,
             height: 16,
         },
     },
     [`& .${treeItemClasses.groupTransition}`]: {
-        borderLeft: `1px solid ${semanticColors.border.primary}`,
+        borderLeft: `1px solid ${semanticColors.color.border.primary}`,
         marginLeft: spacing.spacing_1_1_4,
     },
 });
@@ -6371,7 +6425,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
 // Figma-exact border radius for toggle buttons — no matching design token
 const TOGGLE_BUTTON_BORDER_RADIUS = 14;
 const StyledToggleButtonGroup = styled(MuiToggleButtonGroup)(({ theme }) => ({
-    backgroundColor: semanticColors.surfaces.card,
+    backgroundColor: semanticColors.color.surface.raised,
     padding: theme.spacing(0.625, 0.875),
     borderRadius: borderRadius.m,
     gap: 0,
@@ -6391,7 +6445,7 @@ const StyledToggleButtonGroup = styled(MuiToggleButtonGroup)(({ theme }) => ({
 const StyledToggleButton = styled(MuiToggleButton)(({ theme }) => ({
     padding: theme.spacing(0.625),
     minWidth: 'auto',
-    color: semanticColors.icons.default,
+    color: semanticColors.color.icon.default,
     border: 'none',
     '& svg': {
         width: 20,
@@ -6401,10 +6455,10 @@ const StyledToggleButton = styled(MuiToggleButton)(({ theme }) => ({
         backgroundColor: 'transparent',
     },
     [`&.${toggleButtonClasses.selected}`]: {
-        backgroundColor: semanticColors.buttons.navigation.pressedBackground,
-        color: semanticColors.icons.active,
+        backgroundColor: semanticColors.button.nav.bgPressed,
+        color: semanticColors.color.icon.active,
         '&:hover': {
-            backgroundColor: semanticColors.buttons.navigation.pressedBackground,
+            backgroundColor: semanticColors.button.nav.bgPressed,
         },
     },
 }));