@moderneinc/design-system-components 6.1.0-alpha.f3c8fa → 7.0.0-next.4ff15f

package/dist/index.esm.js

@@ -1,14 +1,15 @@
 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';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
-import React, { useContext, createContext, forwardRef, createElement, useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
+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, 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';
@@ -23,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';
@@ -36,10 +39,10 @@ import { pickersCalendarHeaderClasses } from '@mui/x-date-pickers/PickersCalenda
 import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { dateRangePickerDayClasses } from '@mui/x-date-pickers-pro/DateRangePickerDay';
+import { startOfDay, endOfDay, subDays, startOfMonth, subMonths, endOfMonth, startOfYear } from 'date-fns';
 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';
@@ -78,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,
         },
     },
 ]));
@@ -174,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',
 };
 
@@ -182,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, {
@@ -199,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,
         },
     };
 });
@@ -320,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',
@@ -357,7 +371,7 @@ const ActivityDot = styled('div')(({ color }) => ({
  *   field: 'activity',
  *   headerName: '',
  *   width: 34,
- *   renderHeader: () => <ModActivityHeader size="condensed" color="commitJob" />,
+ *   renderHeader: () => <ModActivityHeader size="compact" color="commitJob" />,
  *   renderCell: (params) => (
  *     <ModActivityIndicatorCell
  *       event={params.row.eventType}
@@ -428,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) {
@@ -455,506 +469,19 @@ const ModActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 };
 ModActivityIndicatorCell.displayName = 'ModActivityIndicatorCell';
 
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-const mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-const toCamelCase = (string) => string.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const toPascalCase = (string) => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-const hasA11yProp = (props) => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
-    }
-  }
-  return false;
-};
-
-const LucideContext = createContext({});
-const useLucideContext = () => useContext(LucideContext);
-
-const Icon = forwardRef(
-  ({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
-    const {
-      size: contextSize = 24,
-      strokeWidth: contextStrokeWidth = 2,
-      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
-      color: contextColor = "currentColor",
-      className: contextClass = ""
-    } = useLucideContext() ?? {};
-    const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
-    return createElement(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes,
-        width: size ?? contextSize ?? defaultAttributes.width,
-        height: size ?? contextSize ?? defaultAttributes.height,
-        stroke: color ?? contextColor,
-        strokeWidth: calculatedStrokeWidth,
-        className: mergeClasses("lucide", contextClass, className),
-        ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
-        ...rest
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
-  }
-);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef(
-    ({ className, ...props }, ref) => createElement(Icon, {
-      ref,
-      iconNode,
-      className: mergeClasses(
-        `lucide-${toKebabCase(toPascalCase(iconName))}`,
-        `lucide-${iconName}`,
-        className
-      ),
-      ...props
-    })
-  );
-  Component.displayName = toPascalCase(iconName);
-  return Component;
-};
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$n = [
-  ["path", { d: "M12 5v14", key: "s699le" }],
-  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
-];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$n);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$m = [
-  ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
-  ["path", { d: "M12 19V5", key: "x0mq9r" }]
-];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$m);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$l = [
-  [
-    "path",
-    {
-      d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",
-      key: "3c2336"
-    }
-  ],
-  ["line", { x1: "12", x2: "12", y1: "16", y2: "12", key: "1y1yb1" }],
-  ["line", { x1: "12", x2: "12.01", y1: "8", y2: "8", key: "110wyk" }]
-];
-const BadgeInfo = createLucideIcon("badge-info", __iconNode$l);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$k = [
-  ["path", { d: "M8 2v3", key: "1ioesn" }],
-  ["path", { d: "M16 2v3", key: "otl347" }],
-  ["rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", key: "h1oib" }],
-  ["path", { d: "M3 9h18", key: "1pudct" }],
-  ["path", { d: "M8 13h.01", key: "1sbv64" }],
-  ["path", { d: "M12 13h.01", key: "y0uutt" }],
-  ["path", { d: "M16 13h.01", key: "wip0gl" }],
-  ["path", { d: "M8 17h.01", key: "p3bg7i" }],
-  ["path", { d: "M12 17h.01", key: "p32p05" }],
-  ["path", { d: "M16 17h.01", key: "ql8jdd" }]
-];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$k);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$j = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$j);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$i = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$g = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$g);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$f = [
-  ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
-  ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
-];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$f);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$e = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
-  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
-];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$e);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$d = [
-  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
-  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
-];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$d);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$c = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
-  ["path", { d: "M12 17h.01", key: "p32p05" }]
-];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$c);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$b = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "M15 3v18", key: "14nvp0" }]
-];
-const Columns3 = createLucideIcon("columns-3", __iconNode$b);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$a = [
-  ["path", { d: "M2 5h20", key: "1fs1ex" }],
-  ["path", { d: "M6 12h12", key: "8npq4p" }],
-  ["path", { d: "M9 19h6", key: "456am0" }]
-];
-const ListFilter = createLucideIcon("list-filter", __iconNode$a);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$9 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$9);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$8 = [
-  ["path", { d: "M5 12h14", key: "1ays0h" }],
-  ["path", { d: "M12 5v14", key: "s699le" }]
-];
-const Plus = createLucideIcon("plus", __iconNode$8);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$7 = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-];
-const Search = createLucideIcon("search", __iconNode$7);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$6 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
-];
-const SquareCheck = createLucideIcon("square-check", __iconNode$6);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$5 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M8 12h8", key: "1wcyev" }]
-];
-const SquareMinus = createLucideIcon("square-minus", __iconNode$5);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$4 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
-];
-const Square = createLucideIcon("square", __iconNode$4);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$3 = [
-  ["path", { d: "M10 11v6", key: "nco0om" }],
-  ["path", { d: "M14 11v6", key: "outv1u" }],
-  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
-  ["path", { d: "M3 6h18", key: "d0wm0j" }],
-  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
-];
-const Trash2 = createLucideIcon("trash-2", __iconNode$3);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$2 = [
-  [
-    "path",
-    {
-      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
-      key: "wmoenq"
-    }
-  ],
-  ["path", { d: "M12 9v4", key: "juzpu7" }],
-  ["path", { d: "M12 17h.01", key: "p32p05" }]
-];
-const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$1 = [
-  ["path", { d: "M12 20h.01", key: "zekei9" }],
-  ["path", { d: "M8.5 16.429a5 5 0 0 1 7 0", key: "1bycff" }],
-  ["path", { d: "M5 12.859a10 10 0 0 1 5.17-2.69", key: "1dl1wf" }],
-  ["path", { d: "M19 12.859a10 10 0 0 0-2.007-1.523", key: "4k23kn" }],
-  ["path", { d: "M2 8.82a15 15 0 0 1 4.177-2.643", key: "1grhjp" }],
-  ["path", { d: "M22 8.82a15 15 0 0 0-11.288-3.764", key: "z3jwby" }],
-  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
-];
-const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
-
-/**
- * @license lucide-react v1.28.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-const X = createLucideIcon("x", __iconNode);
-
 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, {
@@ -963,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 }
@@ -983,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,
@@ -1003,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,
             },
         },
@@ -1013,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' },
             }),
         },
@@ -1035,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, {
@@ -1049,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%',
@@ -1103,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': {
@@ -1131,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';
@@ -1139,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,
@@ -1152,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,
     },
 }));
@@ -1198,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)
@@ -1250,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,
                     },
                 }),
         },
@@ -1348,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],
@@ -1369,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`,
@@ -1379,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',
     },
@@ -1449,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}`]: {
@@ -1462,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,
             },
@@ -1498,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',
             },
@@ -1544,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 && {
@@ -1580,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')(() => ({
@@ -1594,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 }) => ({
@@ -1602,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,
@@ -1619,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,
@@ -1634,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',
@@ -1689,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', {
@@ -1699,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',
@@ -1748,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'
@@ -1758,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;
@@ -1786,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
@@ -1812,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,
         },
@@ -1860,14 +1395,7 @@ const StyledCheckbox = styled(Checkbox, {
  */
 const ModCheckbox = ({ size = 'medium', label, helperText, disabled, icon, checkedIcon, indeterminateIcon, className, ...props }) => {
     // Identifies ModCheckbox instances to consumer stylesheets.
-    //
-    // `neo-checkbox` ships alongside for one major. Consumers select on these
-    // names from their own CSS, where nothing type-checks the string — moderne-ui
-    // has `'&:not(.neo-checkbox)'`, which on a bare rename would stop excluding
-    // anything and silently start overriding every checkbox. Remove the legacy
-    // name once consumers have migrated.
-    const ownClassNames = 'mod-checkbox neo-checkbox';
-    const combinedClassName = className ? `${ownClassNames} ${className}` : ownClassNames;
+    const combinedClassName = className ? `mod-checkbox ${className}` : 'mod-checkbox';
     // Default icons (sized via CSS on the SVG); overridable per instance
     const defaultIcon = icon || jsx(Square, {});
     const defaultCheckedIcon = checkedIcon || jsx(SquareCheck, {});
@@ -1950,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',
         },
     };
@@ -2005,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`,
@@ -2023,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
@@ -2033,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}`]: {
@@ -2074,7 +1602,7 @@ const getDataGridHeaderStyles = () => {
                 '& svg': {
                     width: 16,
                     height: 16,
-                    color: semanticColors.icons.utility,
+                    color: semanticColors.color.icon.utility,
                 },
             },
         },
@@ -2082,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,
     },
 });
 
@@ -2120,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,
@@ -2132,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,
@@ -2170,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')(() => ({
@@ -2185,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',
@@ -2197,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, 
@@ -2270,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,
@@ -2279,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')({
@@ -2306,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,
@@ -2316,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
@@ -2352,7 +1880,7 @@ const Shortcut = styled('span')(({ theme }) => ({
  * // Disabled state
  * <ModMenuItem disabled>Disabled item</ModMenuItem>
  *
- * // As an anchor — middle-click/right-click open in a new tab
+ * // As an anchor — `href` alone is enough
  * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
  *
  * // External link
@@ -2360,12 +1888,17 @@ const Shortcut = styled('span')(({ theme }) => ({
  *   Documentation
  * </ModMenuItem>
  *
- * // Client-side routing (Next.js)
+ * // Client-side routing (Next.js) — an explicit `component` wins over the anchor default
  * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
  * ```
  */
-function ModMenuItem({ icon, shortcut, secondaryText, children, ...rest }) {
-    return (jsx(StyledMenuItem, { ...rest, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
+function ModMenuItem({ icon, shortcut, secondaryText, children, component, href, ...rest }) {
+    // MUI roots MenuItem at `li`, and ButtonBase only swaps in a link component when the
+    // root is `button` (as of @mui/material 9.2) — so an `href` on the default root lands as
+    // an attribute on the `<li>` and never navigates (#722). Root at an anchor instead,
+    // unless the caller named a component (e.g. a router link) themselves.
+    const rootProps = { ...rest, href, component: component ?? (href ? 'a' : undefined) };
+    return (jsx(StyledMenuItem, { ...rootProps, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
 }
 ModMenuItem.displayName = 'ModMenuItem';
 
@@ -2373,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',
@@ -2403,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,
@@ -2425,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
@@ -2504,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',
@@ -2532,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,
         },
     },
@@ -2549,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',
@@ -2557,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': {
@@ -2590,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)`]: {
@@ -2608,27 +2142,88 @@ 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';
+/**
+ * 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 = 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
+ *
+ * A styled version of MUI's GridFilterPanel that applies design system tokens.
+ * The per-row delete icon uses Lucide Trash2 internally.
+ *
+ * For footer button icons ("Add filter" and "Remove all"), you must also pass the icon components
+ * to the DataGrid's slots prop.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   ModDataGridFilterPanel,
+ *   FilterPanelAddIcon,
+ *   FilterPanelDeleteIcon,
+ *   FilterPanelRemoveAllIcon
+ * } from '@moderneinc/design-system-components'
+ *
+ * <DataGridPro
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{
+ *     filterPanel: ModDataGridFilterPanel,
+ *     filterPanelAddIcon: FilterPanelAddIcon,
+ *     filterPanelDeleteIcon: FilterPanelDeleteIcon,
+ *     filterPanelRemoveAllIcon: FilterPanelRemoveAllIcon,
+ *   }}
+ * />
+ * ```
+ */
 const ModDataGridFilterPanel = (props) => {
     return jsx(StyledGridFilterPanel, { ...props });
 };
@@ -2640,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 });
 }
 
 /**
@@ -2657,7 +2252,7 @@ function UnsortedIcon() {
  */
 const ModGridPanel = styled(GridPanel)({
     [`& .${gridPanelClasses.paper}`]: {
-        backgroundColor: semanticColors.surfaces.white,
+        backgroundColor: semanticColors.color.surface.raised,
     },
 });
 /**
@@ -2733,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
@@ -2808,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';
 
@@ -2834,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, {
@@ -2950,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';
 
@@ -2985,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')({
@@ -3005,476 +2600,11 @@ const IconWrapper = styled('div')({
     '& svg': {
         width: 16,
         height: 16,
-        color: semanticColors.icons.utility,
+        color: semanticColors.color.icon.utility,
     },
 });
 function ModDataGridHeaderLabel({ children, helpTooltip, className, }) {
-    return (jsxs(LabelContainer$2, { className: className, "data-mod-header-label": true, children: [children && jsx(LabelText$1, { children: children }), helpTooltip && (jsx(Tooltip, { title: helpTooltip, placement: "top", children: jsx(IconWrapper, { children: jsx(CircleQuestionMark, {}) }) }))] }));
-}
-
-/**
- * @module constants
- * @summary Useful constants
- * @description
- * Collection of useful date constants.
- *
- * The constants could be imported from `date-fns/constants`:
- *
- * ```ts
- * import { maxTime, minTime } from "./constants/date-fns/constants";
- *
- * function isAllowedTime(time) {
- *   return time <= maxTime && time >= minTime;
- * }
- * ```
- */
-
-
-/**
- * @constant
- * @name constructFromSymbol
- * @summary Symbol enabling Date extensions to inherit properties from the reference date.
- *
- * The symbol is used to enable the `constructFrom` function to construct a date
- * using a reference date and a value. It allows to transfer extra properties
- * from the reference date to the new date. It's useful for extensions like
- * [`TZDate`](https://github.com/date-fns/tz) that accept a time zone as
- * a constructor argument.
- */
-const constructFromSymbol = Symbol.for("constructDateFrom");
-
-/**
- * @name constructFrom
- * @category Generic Helpers
- * @summary Constructs a date using the reference date and the value
- *
- * @description
- * The function constructs a new date using the constructor from the reference
- * date and the given value. It helps to build generic functions that accept
- * date extensions.
- *
- * It defaults to `Date` if the passed reference date is a number or a string.
- *
- * Starting from v3.7.0, it allows to construct a date using `[Symbol.for("constructDateFrom")]`
- * enabling to transfer extra properties from the reference date to the new date.
- * It's useful for extensions like [`TZDate`](https://github.com/date-fns/tz)
- * that accept a time zone as a constructor argument.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- *
- * @param date - The reference date to take constructor from
- * @param value - The value to create the date
- *
- * @returns Date initialized using the given date and value
- *
- * @example
- * import { constructFrom } from "./constructFrom/date-fns";
- *
- * // A function that clones a date preserving the original type
- * function cloneDate<DateType extends Date>(date: DateType): DateType {
- *   return constructFrom(
- *     date, // Use constructor from the given date
- *     date.getTime() // Use the date value to create a new date
- *   );
- * }
- */
-function constructFrom(date, value) {
-  if (typeof date === "function") return date(value);
-
-  if (date && typeof date === "object" && constructFromSymbol in date)
-    return date[constructFromSymbol](value);
-
-  if (date instanceof Date) return new date.constructor(value);
-
-  return new Date(value);
-}
-
-/**
- * @name toDate
- * @category Common Helpers
- * @summary Convert the given argument to an instance of Date.
- *
- * @description
- * Convert the given argument to an instance of Date.
- *
- * If the argument is an instance of Date, the function returns its clone.
- *
- * If the argument is a number, it is treated as a timestamp.
- *
- * If the argument is none of the above, the function returns Invalid Date.
- *
- * Starting from v3.7.0, it clones a date using `[Symbol.for("constructDateFrom")]`
- * enabling to transfer extra properties from the reference date to the new date.
- * It's useful for extensions like [`TZDate`](https://github.com/date-fns/tz)
- * that accept a time zone as a constructor argument.
- *
- * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param argument - The value to convert
- *
- * @returns The parsed date in the local time zone
- *
- * @example
- * // Clone the date:
- * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
- * //=> Tue Feb 11 2014 11:30:30
- *
- * @example
- * // Convert the timestamp to date:
- * const result = toDate(1392098430000)
- * //=> Tue Feb 11 2014 11:30:30
- */
-function toDate(argument, context) {
-  // [TODO] Get rid of `toDate` or `constructFrom`?
-  return constructFrom(argument, argument);
-}
-
-/**
- * The {@link addDays} function options.
- */
-
-/**
- * @name addDays
- * @category Day Helpers
- * @summary Add the specified number of days to the given date.
- *
- * @description
- * Add the specified number of days to the given date.
- *
- * **You don't need date-fns\***:
- *
- * Temporal has a built-in `add` method on all its classes:
- *
- * - [`Temporal.Instant.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/Instant/add)
- * - [`Temporal.PlainDate.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainDate/add)
- * - [`Temporal.PlainDateTime.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainDateTime/add)
- * - [`Temporal.PlainTime.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainTime/add)
- * - [`Temporal.PlainYearMonth.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/PlainYearMonth/add)
- * - [`Temporal.ZonedDateTime.prototype.add()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal/ZonedDateTime/add)
- *
- * \* **Not really**, see: https://date-fns.org/you-dont-need-date-fns
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The date to be changed
- * @param amount - The amount of days to be added.
- * @param options - An object with options
- *
- * @returns The new date with the days added
- *
- * @example
- * // Add 10 days to 1 September 2014:
- * const result = addDays(new Date(2014, 8, 1), 10)
- * //=> Thu Sep 11 2014 00:00:00
- *
- * @example
- * // Using Temporal:
- * // Add 10 days to 1 September 2014:
- * Temporal.PlainDate.from("2014-09-01").add({ days: 10 }).toString();
- * //=> "2014-09-11"
- */
-function addDays(date, amount, options) {
-  const _date = toDate(date);
-  if (isNaN(amount)) return constructFrom(date, NaN);
-
-  // If 0 days, no-op to avoid changing times in the hour before end of DST
-  if (!amount) return _date;
-
-  _date.setDate(_date.getDate() + amount);
-  return _date;
-}
-
-/**
- * The {@link addMonths} function options.
- */
-
-/**
- * @name addMonths
- * @category Month Helpers
- * @summary Add the specified number of months to the given date.
- *
- * @description
- * Add the specified number of months to the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The date to be changed
- * @param amount - The amount of months to be added.
- * @param options - The options object
- *
- * @returns The new date with the months added
- *
- * @example
- * // Add 5 months to 1 September 2014:
- * const result = addMonths(new Date(2014, 8, 1), 5)
- * //=> Sun Feb 01 2015 00:00:00
- *
- * // Add one month to 30 January 2023:
- * const result = addMonths(new Date(2023, 0, 30), 1)
- * //=> Tue Feb 28 2023 00:00:00
- */
-function addMonths(date, amount, options) {
-  const _date = toDate(date);
-  if (isNaN(amount)) return constructFrom(date, NaN);
-  const dayOfMonth = _date.getDate();
-
-  // The JS Date object supports date math by accepting out-of-bounds values for
-  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
-  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
-  // want except that dates will wrap around the end of a month, meaning that
-  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
-  // we'll default to the end of the desired month by adding 1 to the desired
-  // month and using a date of 0 to back up one day to the end of the desired
-  // month.
-  const endOfDesiredMonth = constructFrom(date, _date.getTime());
-  endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0);
-  const daysInMonth = endOfDesiredMonth.getDate();
-  if (dayOfMonth >= daysInMonth) {
-    // If we're already at the end of the month, then this is the correct date
-    // and we're done.
-    return endOfDesiredMonth;
-  } else {
-    // Otherwise, we now know that setting the original day-of-month value won't
-    // cause an overflow, so set the desired day-of-month. Note that we can't
-    // just set the date of `endOfDesiredMonth` because that object may have had
-    // its time changed in the unusual case where where a DST transition was on
-    // the last day of the month and its local time was in the hour skipped or
-    // repeated next to a DST transition.  So we use `date` instead which is
-    // guaranteed to still have the original time.
-    _date.setFullYear(
-      endOfDesiredMonth.getFullYear(),
-      endOfDesiredMonth.getMonth(),
-      dayOfMonth,
-    );
-    return _date;
-  }
-}
-
-/**
- * The {@link startOfDay} function options.
- */
-
-/**
- * @name startOfDay
- * @category Day Helpers
- * @summary Return the start of a day for the given date.
- *
- * @description
- * Return the start of a day for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - The options
- *
- * @returns The start of a day
- *
- * @example
- * // The start of a day for 2 September 2014 11:55:00:
- * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 00:00:00
- */
-function startOfDay(date, options) {
-  const _date = toDate(date);
-  _date.setHours(0, 0, 0, 0);
-  return _date;
-}
-
-/**
- * The {@link endOfDay} function options.
- */
-
-/**
- * @name endOfDay
- * @category Day Helpers
- * @summary Return the end of a day for the given date.
- *
- * @description
- * Return the end of a day for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - An object with options
- *
- * @returns The end of a day
- *
- * @example
- * // The end of a day for 2 September 2014 11:55:00:
- * const result = endOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 23:59:59.999
- */
-function endOfDay(date, options) {
-  const _date = toDate(date);
-  _date.setHours(23, 59, 59, 999);
-  return _date;
-}
-
-/**
- * The {@link endOfMonth} function options.
- */
-
-/**
- * @name endOfMonth
- * @category Month Helpers
- * @summary Return the end of a month for the given date.
- *
- * @description
- * Return the end of a month for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - An object with options
- *
- * @returns The end of a month
- *
- * @example
- * // The end of a month for 2 September 2014 11:55:00:
- * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 30 2014 23:59:59.999
- */
-function endOfMonth(date, options) {
-  const _date = toDate(date);
-  const month = _date.getMonth();
-  _date.setFullYear(_date.getFullYear(), month + 1, 0);
-  _date.setHours(23, 59, 59, 999);
-  return _date;
-}
-
-/**
- * The {@link startOfMonth} function options.
- */
-
-/**
- * @name startOfMonth
- * @category Month Helpers
- * @summary Return the start of a month for the given date.
- *
- * @description
- * Return the start of a month for the given date. The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments.
- * Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed,
- * or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - An object with options
- *
- * @returns The start of a month
- *
- * @example
- * // The start of a month for 2 September 2014 11:55:00:
- * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Mon Sep 01 2014 00:00:00
- */
-function startOfMonth(date, options) {
-  const _date = toDate(date);
-  _date.setDate(1);
-  _date.setHours(0, 0, 0, 0);
-  return _date;
-}
-
-/**
- * The {@link startOfYear} function options.
- */
-
-/**
- * @name startOfYear
- * @category Year Helpers
- * @summary Return the start of a year for the given date.
- *
- * @description
- * Return the start of a year for the given date.
- * The result will be in the local timezone.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The original date
- * @param options - The options
- *
- * @returns The start of a year
- *
- * @example
- * // The start of a year for 2 September 2014 11:55:00:
- * const result = startOfYear(new Date(2014, 8, 2, 11, 55, 00))
- * //=> Wed Jan 01 2014 00:00:00
- */
-function startOfYear(date, options) {
-  const date_ = toDate(date);
-  date_.setFullYear(date_.getFullYear(), 0, 1);
-  date_.setHours(0, 0, 0, 0);
-  return date_;
-}
-
-/**
- * The {@link subDays} function options.
- */
-
-/**
- * @name subDays
- * @category Day Helpers
- * @summary Subtract the specified number of days from the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The date to be changed
- * @param amount - The amount of days to be subtracted.
- * @param options - An object with options
- *
- * @returns The new date with the days subtracted
- *
- * @example
- * // Subtract 10 days from 1 September 2014:
- * const result = subDays(new Date(2014, 8, 1), 10)
- * //=> Fri Aug 22 2014 00:00:00
- */
-function subDays(date, amount, options) {
-  return addDays(date, -amount);
-}
-
-/**
- * The subMonths function options.
- */
-
-/**
- * @name subMonths
- * @category Month Helpers
- * @summary Subtract the specified number of months from the given date.
- *
- * @description
- * Subtract the specified number of months from the given date.
- *
- * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
- * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
- *
- * @param date - The date to be changed
- * @param amount - The amount of months to be subtracted.
- * @param options - An object with options
- *
- * @returns The new date with the months subtracted
- *
- * @example
- * // Subtract 5 months from 1 February 2015:
- * const result = subMonths(new Date(2015, 1, 1), 5)
- * //=> Mon Sep 01 2014 00:00:00
- */
-function subMonths(date, amount, options) {
-  return addMonths(date, -1);
+    return (jsxs(LabelContainer$2, { className: className, "data-mod-header-label": true, children: [children && jsx(LabelText$1, { children: children }), helpTooltip && (jsx(Tooltip, { title: helpTooltip, placement: "top", children: jsx(IconWrapper, { children: jsx(HelpCircle, {}) }) }))] }));
 }
 
 // Cast ModButton to a simpler type for styled() compatibility (avoids generic inference issues)
@@ -3509,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,
@@ -3522,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 : {}),
@@ -3602,7 +2732,7 @@ const defaultRangeShortcuts = [
         label: 'Last month',
         getValue: () => {
             const today = new Date();
-            const lastMonth = subMonths(today);
+            const lastMonth = subMonths(today, 1);
             return [startOfMonth(lastMonth), endOfMonth(lastMonth)];
         },
     },
@@ -3617,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
@@ -3699,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',
@@ -3712,7 +2842,7 @@ const shortcutChipStyles = {
             padding: 0,
         },
         '&:hover': {
-            backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+            backgroundColor: semanticColors.button.secondary.bgHover,
         },
     },
 };
@@ -3805,18 +2935,8 @@ const ModDatePicker = ({ type = 'single', open, label, value, rangeValue, onChan
 };
 ModDatePicker.displayName = 'ModDatePicker';
 
-/**
- * ModDatePickerListItem
- */
-const ModDatePickerListItem = styled('div')({});
-
-/**
- * ModDatePickerMenu
- */
-const ModDatePickerMenu = styled('div')({});
-
 const StyledDivider = styled(Divider)(() => ({
-    borderColor: semanticColors.border.secondary,
+    borderColor: semanticColors.color.border.primary,
     marginTop: spacing.spacing_1,
     marginBottom: spacing.spacing_1,
 }));
@@ -3857,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',
@@ -3868,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%',
@@ -3890,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',
@@ -3903,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',
@@ -3921,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`,
     },
 });
@@ -3938,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',
     },
@@ -3970,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" })] })),
 });
@@ -4023,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',
@@ -4041,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')({
@@ -4076,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',
@@ -4092,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,
@@ -4137,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';
@@ -4145,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',
@@ -4174,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',
 }));
@@ -4183,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,
@@ -4193,7 +3317,7 @@ const LoadMoreButton = styled('button')(({ theme }) => ({
         textDecoration: 'underline',
     },
     '&:disabled': {
-        color: semanticColors.typography.button.disabled,
+        color: semanticColors.button.fgDisabled,
         cursor: 'not-allowed',
     },
 }));
@@ -4202,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',
 }));
@@ -4216,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 }) => ({
@@ -4232,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',
 }));
@@ -4491,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',
@@ -4539,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,
         },
     };
 });
@@ -4594,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,
         },
     };
 });
@@ -4609,7 +3735,7 @@ const StyledFormHelperText = styled(FormHelperText, {
 const ModInputField = ({ size = 'medium', destructive = false, label, required = false, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }) => {
     const inputId = id || `mod-input-${Math.random().toString(36).substring(7)}`;
     const helperTextId = helperText || errorMessage ? `${inputId}-helper-text` : undefined;
-    return (jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, shrink: true, children: [label, required && jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsx(InfoIconWrapper, { children: infoIcon })] })), jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", style: { paddingLeft: size === 'small' ? spacing.spacing_1_1_2 : spacing.spacing_2 }, children: startIcon })) : undefined, endAdornment: destructive ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: jsx(CircleAlert, { size: 20 }) })) : endIcon ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
+    return (jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, shrink: true, children: [label, required && jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsx(InfoIconWrapper, { children: infoIcon })] })), jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", style: { paddingLeft: size === 'small' ? spacing.spacing_1_1_2 : spacing.spacing_2 }, children: startIcon })) : undefined, endAdornment: destructive ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: jsx(AlertCircle, { size: 20 }) })) : endIcon ? (jsx(InputAdornment, { position: "end", style: { paddingRight: spacing.spacing_1_1_2 }, children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
 };
 ModInputField.displayName = 'ModInputField';
 
@@ -4707,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',
@@ -4719,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,
             }),
@@ -4736,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',
@@ -4758,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' && {
@@ -4778,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'
@@ -4810,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,
             },
         },
     };
@@ -4880,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,
         },
     };
@@ -4916,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,
             },
         },
     };
@@ -5025,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,
@@ -5083,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', {
@@ -5097,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.
@@ -5115,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}`]: {
@@ -5177,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,
@@ -5185,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',
     },
 };
@@ -5198,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,
@@ -5211,7 +4335,7 @@ const StyledCloseButton = styled(IconButton)({
     flexShrink: 0,
     '&:hover': {
         backgroundColor: 'transparent',
-        color: semanticColors.icons.utility,
+        color: semanticColors.color.icon.utility,
     },
 });
 /**
@@ -5245,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,
@@ -5300,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.
@@ -5323,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,
@@ -5362,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,
         },
     },
 }));
@@ -5397,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,
@@ -5431,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',
 }));
 /**
@@ -5444,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',
@@ -5462,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,
@@ -5489,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,
@@ -5497,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,
     },
 });
 /**
@@ -5511,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: '—' }));
@@ -5532,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,
     },
 });
 /**
@@ -5559,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,
     },
 };
 /**
@@ -5581,29 +4709,19 @@ const variantConfig = {
 // `.MuiTooltip-tooltip` selectors below actually reach the portaled tooltip
 // (styled(Tooltip) alone applies to the anchor, not the popped content).
 const StyledTooltip = styled(({ className, ...props }) => jsx(Tooltip, { ...props, classes: { popper: className } }), {
-    shouldForwardProp: prop => prop !== 'variant' && prop !== 'description',
-})(({ variant = 'light', description }) => {
-    const hasDescription = Boolean(description);
+    shouldForwardProp: prop => prop !== 'variant',
+})(({ variant = 'light' }) => {
     const variantStyles = variantConfig[variant];
     return {
-        // Style the tooltip content
+        // Style the tooltip content. Padding/line-height/radius are uniform
+        // regardless of whether a description is present — Figma defines a
+        // single tooltip treatment (title + optional content), not two.
         [`& .${tooltipClasses.tooltip}`]: {
             backgroundColor: variantStyles.backgroundColor,
             color: variantStyles.color,
-            fontSize: typography.fontSize.xs,
-            fontWeight: typography.fontWeight.medium,
-            lineHeight: hasDescription ? 1.5 : 1,
-            borderRadius: hasDescription ? borderRadius.s : borderRadius.xS,
-            padding: hasDescription ? spacing.spacing_1_1_2 : `0 ${spacing.spacing_1}px`,
-            ...(hasDescription && {
-                maxWidth: 296,
-            }),
-            ...(!hasDescription && {
-                height: spacing.spacing_3_1_4,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }),
+            ...semanticTypography.tooltip,
+            borderRadius: borderRadius.s,
+            padding: `${spacing.spacing_1}px ${spacing.spacing_1_1_2}px`,
             boxShadow: `${shadows.neutral.medium.x}px ${shadows.neutral.medium.y}px ${shadows.neutral.medium.blur}px ${shadows.neutral.medium.spread}px ${shadows.neutral.medium.shadow}`,
         },
         // Style the arrow
@@ -5623,18 +4741,17 @@ const StyledTooltip = styled(({ className, ...props }) => jsx(Tooltip, { ...prop
  * - Dark: surfaces.white, typography.body
  * - Brand: surfaces.snackbarBrand, typography.linkWhite (both fixed across modes)
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
- * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
+ * - Typography: semanticTypography.tooltip (12px/1.5 line-height), fontWeight.semiBold (600) for the title
  */
 const ModTooltip = ({ variant = 'light', title, description, children, arrow = false, placement, ...props }) => {
-    // Build the title content
-    // If description is provided, create a structured layout with title + description
-    // Otherwise, just show the title text
-    const titleContent = description ? (jsxs(Stack, { sx: { gap: 0.5 }, children: [jsx(Typography, { sx: { fontSize: typography.fontSize.caption, fontWeight: typography.fontWeight.semiBold }, children: title }), jsx(Typography, { sx: {
-                    fontSize: typography.fontSize.xs,
-                    fontWeight: typography.fontWeight.medium,
-                    opacity: 0.75,
-                }, children: description })] })) : (title);
-    return (jsx(StyledTooltip, { variant: variant, description: description, title: titleContent, arrow: arrow, placement: placement, ...props, children: children }));
+    // variant="inherit" stops Typography from applying MUI's own body1 font
+    // styles (which would otherwise win over the container's tooltip typography
+    // — a directly-set style beats an inherited one regardless of specificity),
+    // letting it inherit fontSize/lineHeight/fontFamily from `.MuiTooltip-tooltip`.
+    // Title is always semibold; description (when present) inherits the
+    // container's regular weight, distinguishing it from the title above it.
+    const titleContent = description ? (jsxs(Stack, { sx: { gap: `${spacing.spacing_1_4}px` }, children: [jsx(Typography, { variant: "inherit", sx: { fontWeight: typography.fontWeight.semiBold }, children: title }), jsx(Typography, { variant: "inherit", children: description })] })) : (jsx(Typography, { variant: "inherit", sx: { fontWeight: typography.fontWeight.semiBold }, children: title }));
+    return (jsx(StyledTooltip, { variant: variant, title: titleContent, arrow: arrow, placement: placement, ...props, children: children }));
 };
 ModTooltip.displayName = 'ModTooltip';
 
@@ -5655,11 +4772,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}`]: {
@@ -5670,16 +4787,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,
         },
     }),
 }));
@@ -5689,7 +4806,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;
@@ -5699,7 +4816,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',
 }));
@@ -5711,7 +4828,7 @@ function ModNavigationItem({ icon, label, selected = false, tag, tooltip, slotPr
     // When collapsed the label is hidden, so fall back to it for the tooltip and
     // accessible name — otherwise an icon-only button has no name (WCAG 4.1.2).
     const collapsedTooltip = tooltip ?? label;
-    const item = (jsxs(StyledRoot, { selected: selected, "aria-label": collapsed && typeof label === 'string' ? label : undefined, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "mod-nav-icon-padding neo-nav-icon-padding", children: icon }), !collapsed && label && jsx(Label$2, { className: "mod-nav-label neo-nav-label", children: label }), !collapsed && tag && (jsx(ModTag, { size: "medium", variant: "filled", intent: "beta", shape: "rounded", label: tag, ...slotProps?.badge })), children] }));
+    const item = (jsxs(StyledRoot, { selected: selected, "aria-label": collapsed && typeof label === 'string' ? label : undefined, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "mod-nav-icon-padding", children: icon }), !collapsed && label && jsx(Label$2, { className: "mod-nav-label", children: label }), !collapsed && tag && (jsx(ModTag, { size: "medium", variant: "filled", intent: "beta", shape: "rounded", label: tag, ...slotProps?.badge })), children] }));
     if (collapsed && collapsedTooltip) {
         return (jsx(ModTooltip, { title: collapsedTooltip, placement: "right", arrow: true, children: item }));
     }
@@ -5726,7 +4843,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,
 }));
 /**
@@ -5735,14 +4852,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
@@ -5837,8 +4954,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',
@@ -5881,10 +4998,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 }) }) }) }))] }));
 }
@@ -5941,8 +5058,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,
@@ -5953,26 +5070,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,
@@ -5982,10 +5099,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,
@@ -6032,14 +5149,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',
@@ -6065,13 +5182,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',
@@ -6084,9 +5201,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',
@@ -6099,7 +5216,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',
@@ -6107,9 +5224,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,
             },
         },
     };
@@ -6159,11 +5276,6 @@ const ModRadio = ({ size = 'medium', label, helperText, disabled, ...props }) =>
 };
 ModRadio.displayName = 'ModRadio';
 
-/**
- * ModRadioButtonWithText
- */
-const ModRadioButtonWithText = styled('div')({});
-
 // Box-breathing rhythm: appear (inhale) → hold → expand+fade (exhale) → rest.
 // Max scale is capped so the ring fits within a parent row's line-height.
 const ripple = keyframes `
@@ -6208,15 +5320,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'], {
@@ -6227,7 +5339,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)
@@ -6236,22 +5348,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)({
@@ -6264,11 +5376,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,
     },
 });
 /**
@@ -6279,7 +5391,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';
 
@@ -6313,7 +5425,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', {
@@ -6424,12 +5536,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,
     },
 }));
 /**
@@ -6516,7 +5628,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)`,
         },
@@ -6563,23 +5675,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.
@@ -6591,10 +5703,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' });
 /**
@@ -6622,7 +5734,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).
@@ -6660,7 +5772,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}`]: {
@@ -6675,14 +5787,21 @@ 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
+    // The count stays a step quieter than the label, but on secondary text ink
+    // rather than ModTag's neutral status ink. That one is tuned for standalone
+    // badges and is a warm grey: in dark mode it lands #aca598 beside an #f1f0ea
+    // label and reads as disabled rather than as secondary.
+    [`& .${chipClasses.root}`]: {
+        color: semanticColors.color.text.secondary,
+    },
     [`&.${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',
@@ -6690,23 +5809,26 @@ 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',
+        [`& .${chipClasses.root}`]: {
+            color: semanticColors.color.text.tabDisabled,
+        },
         '&:hover': {
             backgroundColor: 'transparent',
         },
         [`&.${tabClasses.selected}`]: {
-            color: semanticColors.typography.button.disabled,
+            color: semanticColors.button.fgDisabled,
             '&::after': {
                 content: '""',
                 position: 'absolute',
@@ -6714,7 +5836,7 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
                 left: 0,
                 right: 0,
                 height: 2,
-                backgroundColor: semanticColors.buttons.tertiary.disabled,
+                backgroundColor: semanticColors.button.tertiary.fgDisabled,
             },
         },
     },
@@ -6735,34 +5857,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;
@@ -6837,7 +5959,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
@@ -6864,13 +5986,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',
@@ -6903,23 +6025,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',
                 },
@@ -6927,18 +6049,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
@@ -6955,12 +6077,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,
             }),
@@ -7021,7 +6143,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.
@@ -7031,22 +6153,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',
         },
@@ -7070,7 +6192,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,
@@ -7078,7 +6200,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
@@ -7111,13 +6233,8 @@ const ModToggleButtonGroup = ({ size = 'medium', variant = 'default', children,
 };
 ModToggleButtonGroup.displayName = 'ModToggleButtonGroup';
 
-/**
- * ModToggleButtonWithText
- */
-const ModToggleButtonWithText = styled('div')({});
-
 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)
@@ -7173,16 +6290,6 @@ const ModToolbar = ({ children, ...props }) => {
 };
 ModToolbar.displayName = 'ModToolbar';
 
-/**
- * ModTopNav
- */
-const ModTopNav = styled('div')({});
-
-/**
- * ModTourModal
- */
-const ModTourModal = styled('div')({});
-
 /**
  * Custom label component that reads extra slot data from the item model.
  * Used as `slots.label` on the TreeItem.
@@ -7220,7 +6327,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,
@@ -7238,13 +6345,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,
@@ -7280,36 +6387,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,
     },
 });
@@ -7317,7 +6424,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,
@@ -7337,7 +6444,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,
@@ -7347,10 +6454,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,
         },
     },
 }));
@@ -7410,5 +6517,5 @@ ModVibratingDot.displayName = 'ModVibratingDot';
 
 const version = '0.0.0-development';
 
-export { ActivityScene, CIRCLE_RADIUS, ModActionsCell, ModActivityHeader, ModActivityIndicatorCell, ModAlert, ModAvatarCell, ModBadge, ModBanner, ModBreadcrumbLink, ModBreadcrumbs, ModButton, ModButtonTab, ModButtonTabGroup, ModCanceledIcon, ModCard, ModCheckbox, ModCheckboxWithText, ModCodeSnippet, ModDataGrid, ModDataGridCellContent, ModDataGridColumnsButton, ModDataGridColumnsPanel, ModDataGridFilterPanel, ModDataGridFilterPanelAddIcon, ModDataGridFilterPanelDeleteIcon, ModDataGridFilterPanelRemoveAllIcon, ModDataGridFiltersButton, ModDataGridHeaderLabel, ModSelect as ModDataGridSelect, ModDatePicker, ModDatePickerListItem, ModDatePickerMenu, ModDivider, ModDot, ModDownloadToast, ModSelect as ModDropdown, ModMenu as ModDropdownMenu, ModMenuItem as ModDropdownMenuItem, ModMenuItem as ModDropdownOption, ModFilledCanceled, ModFilledError, ModFilledInfo, ModFilledNeutral, ModFilledQueued, ModFilledSuccess, ModFilledWarning, ModFilterChip, ModFooter, ModGeneralAvatar, ModIconButton, ModIconCell, ModIconWrapper, ModInfiniteScrollGrid, ModInputField, ModListItem, ModListItemButton, ModLoadingSpinner, ModLogoCell, ModMenu, ModMenuItem, ModModal, ModModalContent, ModModalFooter, ModModalHeader, ModMultiBadgesCell, ModNavigationAvatar, ModNavigationItem, ModPageContent, ModPaginatedGrid, ModProgressCell, ModProgressbar, ModQuickFilter, ModRadio, ModRadioButtonWithText, ModRipplingDot, ModSearchChip, ModSelect, ModSelectField, ModMenuItem as ModSelectOption, ModSideNav, ModSkeleton, ModStatusBadgeCell, ModStatusCell, ModTab, ModTabPanel, ModTable, ModTabs, ModTag, ModToast, ModToastButton, ModToggle, ModToggleButton, ModToggleButtonGroup, ModToggleButtonWithText, ModToolbar, ModTooltip, ModTopNav, ModTourModal, ModTreeItem, ModTreeView, StyledToggleButton as ModTypologyButton, ModTypologyControl, ModUserAvatarCell, ModVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, modRowHeights, version };
+export { ActivityScene, CIRCLE_RADIUS, ModActionsCell, ModActivityHeader, ModActivityIndicatorCell, ModAlert, ModAvatarCell, ModBadge, ModBanner, ModBreadcrumbLink, ModBreadcrumbs, ModButton, ModButtonTab, ModButtonTabGroup, ModCanceledIcon, ModCard, ModCheckbox, ModCheckboxWithText, ModCodeSnippet, ModDataGrid, ModDataGridCellContent, ModDataGridColumnsButton, ModDataGridColumnsPanel, ModDataGridFilterPanel, ModDataGridFilterPanelAddIcon, ModDataGridFilterPanelDeleteIcon, ModDataGridFilterPanelRemoveAllIcon, ModDataGridFiltersButton, ModDataGridHeaderLabel, ModDataGridSelect, ModDatePicker, ModDivider, ModDot, ModDownloadToast, ModSelect as ModDropdown, ModMenu as ModDropdownMenu, ModMenuItem as ModDropdownMenuItem, ModMenuItem as ModDropdownOption, ModFilledCanceled, ModFilledError, ModFilledInfo, ModFilledNeutral, ModFilledQueued, ModFilledSuccess, ModFilledWarning, ModFilterChip, ModFooter, ModGeneralAvatar, ModIconButton, ModIconCell, ModIconWrapper, ModInfiniteScrollGrid, ModInputField, ModListItem, ModListItemButton, ModLoadingSpinner, ModLogoCell, ModMenu, ModMenuItem, ModModal, ModModalContent, ModModalFooter, ModModalHeader, ModMultiBadgesCell, ModNavigationAvatar, ModNavigationItem, ModPageContent, ModPaginatedGrid, ModProgressCell, ModProgressbar, ModQuickFilter, ModRadio, ModRipplingDot, ModSearchChip, ModSelect, ModSelectField, ModMenuItem as ModSelectOption, ModSideNav, ModSkeleton, ModStatusBadgeCell, ModStatusCell, ModTab, ModTabPanel, ModTable, ModTabs, ModTag, ModToast, ModToastButton, ModToggle, ModToggleButton, ModToggleButtonGroup, ModToolbar, ModTooltip, ModTreeItem, ModTreeView, StyledToggleButton as ModTypologyButton, ModTypologyControl, ModUserAvatarCell, ModVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, modRowHeights, version };
 //# sourceMappingURL=index.esm.js.map