@trinityui/design-system 2.11.1 → 2.13.0

package/dist/theme.js

@@ -1,95 +1,258 @@
-import { createTheme as M, useTheme as C } from "@mui/material/styles";
-import { t as p, c as i, d as f, e as w, s as m, a as y } from "./app-shell.js";
-import { g as X, j as Z, f as q, o as J, m as K, p as Q, n as Y, h as _, k, i as S, l as rr } from "./app-shell.js";
-import { useMemo as R } from "react";
-function O(...r) {
-  return `--trinity-${r.join("-").replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+'use client';
+import { createTheme as X, useTheme as ir } from "@mui/material/styles";
+import { i as f, Z as T, _ as W, n as cr, $ as D, a0 as K, r as F, j as H, s as z, m as N, a1 as l, a2 as lr, a3 as nr, a4 as Q, a5 as tr, a6 as dr, a7 as br, a8 as ur, a9 as gr, aa as J, z as $, ab as pr, ac as hr, g as j, ad as yr, ae as vr, af as fr } from "./foundation.js";
+import { ag as _r, ah as Ur, ai as Zr, aj as qr, ak as Xr, al as Kr, am as Qr, an as Jr, ao as Yr, ap as Sr, aq as ro } from "./foundation.js";
+import { c as Y } from "./accessibility.js";
+import { useMemo as mr } from "react";
+function xr(...r) {
+  return yr(r);
 }
-function l(r, a = []) {
-  const o = [];
-  for (const [s, e] of Object.entries(r)) {
-    const g = [...a, s];
-    if (e != null)
-      if (typeof e == "object" && !Array.isArray(e))
-        o.push(...l(e, g));
+function d(r, o, s, a = []) {
+  const e = [];
+  for (const [c, i] of Object.entries(r)) {
+    const g = [...o, c], y = [...a, c];
+    if (i != null)
+      if (typeof i == "object" && !Array.isArray(i))
+        e.push(
+          ...d(
+            i,
+            g,
+            s,
+            y
+          )
+        );
       else {
-        const u = typeof e == "number" && !s.includes("opacity") && !s.includes("weight") && !s.includes("Height") ? `${e}px` : String(e);
-        o.push({ name: O(...g), value: u });
+        const p = typeof s == "function" ? s(y, i) : s, n = hr(
+          i,
+          p,
+          y.join(".")
+        );
+        e.push({ name: xr(...g), value: n });
       }
   }
-  return o;
+  return e;
 }
-function z(r = p) {
-  const a = [];
-  return a.push(...l(r.base.colors, ["color"])), a.push(...l(r.base.spacing, ["spacing"])), a.push(...l(r.base.fontSize, ["font-size"])), a.push(...l(r.base.fontWeight, ["font-weight"])), a.push(...l(r.base.lineHeight, ["line-height"])), a.push(...l(r.base.letterSpacing, ["letter-spacing"])), a.push(...l(r.base.borderRadius, ["radius"])), a.push(...l(r.base.borderWidth, ["border-width"])), a.push(...l(r.base.shadows, ["shadow"])), a.push(...l(r.base.zIndex, ["z-index"])), a.push(...l(r.base.duration, ["duration"])), a.push(...l(r.base.easing, ["easing"])), a.push(...l(r.base.opacity, ["opacity"])), a.push(...l(r.base.breakpoints, ["breakpoint"])), a.push(...l(r.semantic.colors, ["semantic"])), a.push(...l(r.semantic.spacing, ["semantic-spacing"])), a.push(...l(r.semantic.borders, ["semantic-border"])), a.push(...l(r.semantic.shadows, ["semantic-shadow"])), a.push(...l(r.semantic.motion, ["motion"])), a.push(...l(r.component, ["component"])), a.map((o) => `  ${o.name}: ${o.value};`).join(`
-`);
+function Mr(r = T) {
+  return A(S(W(r)));
 }
-function $(r = p) {
-  const a = [];
-  return a.push(...l(r.darkMode.colors.text, ["semantic", "text"])), a.push(...l(r.darkMode.colors.background, ["semantic", "background"])), a.push(...l(r.darkMode.colors.border, ["semantic", "border"])), r.darkMode.colors.interactive && a.push(...l(r.darkMode.colors.interactive, ["semantic", "interactive"])), r.darkMode.colors.status && a.push(...l(r.darkMode.colors.status, ["semantic", "status"])), a.map((o) => `  ${o.name}: ${o.value};`).join(`
+function A(r) {
+  return r.map(([o, s]) => `  ${o}: ${s};`).join(`
 `);
 }
-function P(r = p) {
+function S(r) {
+  const o = [];
+  o.push(...d(r.base.colors, ["color"], "raw")), o.push(...d(r.base.spacing, ["spacing"], "dimension")), o.push(...d(r.base.fontSize, ["font-size"], "dimension")), o.push(...d(r.base.fontWeight, ["font-weight"], "fontWeight")), o.push(...d(r.base.lineHeight, ["line-height"], "lineHeight")), o.push(...d(r.base.letterSpacing, ["letter-spacing"], "dimension")), o.push(...d(r.base.borderRadius, ["radius"], "dimension")), o.push(...d(r.base.borderWidth, ["border-width"], "dimension")), o.push(...d(r.base.shadows, ["shadow"], "raw")), r.darkMode.shadows?.glow && o.push(
+    ...d(r.darkMode.shadows.glow, ["shadow", "glow"], "raw")
+  ), o.push(...d(r.base.zIndex, ["z-index"], "zIndex")), o.push(...d(r.base.duration, ["duration"], "duration")), o.push(...d(r.base.easing, ["easing"], "raw")), o.push(...d(r.base.opacity, ["opacity"], "opacity")), o.push(...d(r.base.breakpoints, ["breakpoint"], "dimension")), o.push(...d(r.semantic.colors, ["semantic"], "raw")), o.push(...d(nr(r.semantic.spacing), ["semantic-spacing"], "dimension")), o.push(...d(r.semantic.borders, ["semantic-border"], "dimension")), o.push(...d(r.semantic.shadows, ["semantic-shadow"], "raw")), o.push(
+    ...d(r.semantic.effects, ["semantic-effect"], "raw")
+  ), o.push(...d(r.semantic.motion, ["motion"], vr)), o.push(...d(r.component, ["component"], fr));
+  const s = new Map(o.map(({ name: c, value: i }) => [c, i]));
+  Q(s, tr(), {
+    onMismatch: "literal",
+    onMissing: "skip",
+    context: ""
+  });
+  const a = dr(
+    s,
+    br(r.semantic.colors),
+    { onMismatch: "literal", context: "" }
+  ), e = ur();
+  for (const [c, i] of e) s.set(c, i);
+  return [...o.map(({ name: c }) => c), ...a, ...e.map(([c]) => c)].map(
+    (c) => [c, s.get(c)]
+  );
+}
+function Wr(r = T) {
+  return A(E(W(r)).block);
+}
+function E(r) {
+  const o = [], s = r.darkMode.colors, a = /* @__PURE__ */ new Set(["button", "switch"]);
+  for (const [n, b] of Object.entries(s)) {
+    if (typeof b == "string") {
+      o.push(...d({ [n]: b }, ["semantic"], "raw"));
+      continue;
+    }
+    if (!b || typeof b != "object") continue;
+    const t = a.has(n) ? ["component", n] : ["semantic", n];
+    o.push(...d(b, t, "raw"));
+  }
+  const e = r.darkMode.shadows;
+  e && (o.push(...d(e.scale, ["shadow"], "raw")), o.push(
+    ...d(e.semantic, ["semantic-shadow"], "raw")
+  ), o.push(
+    { name: "--trinity-component-card-shadow", value: e.semantic.card },
+    { name: "--trinity-component-modal-shadow", value: e.semantic.modal }
+  )), r.darkMode.effects && o.push(
+    ...d(r.darkMode.effects, ["semantic-effect"], "raw")
+  );
+  const c = new Map(o.map(({ name: n, value: b }) => [n, b]));
+  Q(c, gr(), {
+    onMismatch: "literal",
+    onMissing: "skip",
+    context: ""
+  });
+  for (const n of o) n.value = c.get(n.name);
+  const i = new Set(o.map(({ name: n }) => n)), g = S(r), y = new Map(g), p = o.map(({ name: n, value: b }) => [n, b]);
+  for (const n of J(g.map(([b]) => b), y, i))
+    i.has(n) || p.push([n, y.get(n)]);
+  return { block: p, overridden: i, light: g };
+}
+function wr(r) {
+  const { overridden: o, light: s } = E(r), a = new Map(s), e = [...o].map(
+    (c) => [c, a.get(c) ?? "initial"]
+  );
+  for (const c of J(s.map(([i]) => i), a, o))
+    o.has(c) || e.push([c, a.get(c)]);
+  return e;
+}
+function Ir(r = T) {
   if (typeof window > "u") return;
-  const a = z(r), o = document.createElement("style");
-  o.id = "trinity-css-variables", o.textContent = `:root {
-${a}
+  const o = Mr(r), s = document.createElement("style");
+  s.id = "trinity-css-variables", s.textContent = `:root {
+${o}
 }`;
-  const s = document.getElementById("trinity-css-variables");
-  s && s.remove(), document.head.appendChild(o);
+  const a = document.getElementById("trinity-css-variables");
+  a && a.remove(), document.head.appendChild(s);
 }
-function D(r = p) {
+function Dr(r = T) {
   if (typeof window > "u") return;
-  const a = $(r), o = document.createElement("style");
-  o.id = "trinity-dark-mode-variables", o.textContent = `
+  const o = W(r), s = A(E(o).block), a = A(wr(o)), e = document.createElement("style");
+  e.id = "trinity-dark-mode-variables", e.textContent = `
 [data-theme="dark"],
 .dark-mode,
 :root.dark {
+${s}
+}
+
+[data-theme="light"] {
 ${a}
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-${a}
+${s}
   }
 }`;
-  const s = document.getElementById("trinity-dark-mode-variables");
-  s && s.remove(), document.head.appendChild(o);
+  const c = document.getElementById("trinity-dark-mode-variables");
+  c && c.remove(), document.head.appendChild(e);
 }
-function W(r, a) {
-  function o(u) {
-    let n = u.replace("#", "");
-    n.length === 3 && (n = n.split("").map((c) => c + c).join(""));
-    const t = parseInt(n, 16);
-    return [t >> 16 & 255, t >> 8 & 255, t & 255];
-  }
-  function s([u, n, t]) {
-    const c = [u, n, t].map((b) => (b /= 255, b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)));
-    return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-  }
-  const e = s(o(r)), g = s(o(a));
-  return (Math.max(e, g) + 0.05) / (Math.min(e, g) + 0.05);
+function Cr(r, o, s) {
+  return cr(r, o, s);
+}
+function Pr(r, o, s = 4.5, a) {
+  const e = Cr(r, o, a);
+  return Number.isNaN(e) ? !1 : (e < s && typeof window < "u" && console.warn(`[Trinity] Low contrast ratio ${e.toFixed(2)} for ${r} on ${o}`), e >= s);
 }
-function L(r, a, o = 4.5) {
-  const s = W(r, a);
-  return s < o && typeof window < "u" && console.warn(`[Trinity] Low contrast ratio ${s.toFixed(2)} for ${r} on ${a}`), s >= o;
+const C = '[aria-disabled="true"]', B = `&.Mui-disabled, &${C}, &${C}:hover, &${C}:active`, Rr = `:not(.Mui-disabled):not(${C}):not([aria-pressed="true"])`, O = (r) => r.map((o) => `&:where(.MuiButton-color${o}${Rr})`).join(", "), P = ["Error", "Warning", "Success", "Info"], G = `&:where(${P.map((r) => `:not(.MuiButton-color${r})`).join("")}, .Mui-disabled, ${C}, [aria-pressed="true"])`, _ = ({ variant: r }) => r === void 0 || r === "indeterminate" || r === "query", I = (r) => typeof r == "object" && r !== null;
+function Or(r, o) {
+  if (o == null || o === "") return { color: "inherit" };
+  if (typeof o != "string") return null;
+  const s = (r.vars ?? r).palette, a = s[o];
+  if (I(a) && typeof a.main == "string") return null;
+  const e = /^text[A-Z]/.test(o) ? o.charAt(4).toLowerCase() + o.slice(5) : void 0;
+  if (e && I(s.text) && typeof s.text[e] == "string") return null;
+  const c = o.split(".").reduce((i, g) => I(i) ? i[g] : void 0, s);
+  return { color: typeof c == "string" ? c : o };
 }
-function T(r = p, a = "light") {
-  const o = a === "dark" ? "rgba(255, 255, 255, 0.12)" : r.base.colors.gray[200], s = a === "dark" ? "rgba(255, 255, 255, 0.2)" : r.base.colors.gray[300];
+function rr(r) {
+  const o = { ...j.button.onBrand, ...r.component.button.onBrand }, s = { ...j.button.onBrandOutlined, ...r.component.button.onBrandOutlined };
   return {
-    MuiCssBaseline: {
-      styleOverrides: {
-        body: {
-          backgroundColor: a === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[50],
-          color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+    filled: { border: o.background, borderHover: o.backgroundHover, borderActive: o.backgroundActive, borderDisabled: o.backgroundDisabled, ...o },
+    outlined: { ...s }
+  };
+}
+function U(r) {
+  const { filled: o } = rr(r);
+  return {
+    main: o.background,
+    light: o.background,
+    dark: o.backgroundActive,
+    contrastText: o.text
+  };
+}
+function $r(r) {
+  const { filled: o, outlined: s } = rr(r), a = "&:where(.MuiButton-colorOnBrand)", e = (i) => ({
+    "&:focus-visible, &.Mui-focusVisible": {
+      outline: `${r.semantic.borders.width.focus}px solid ${i}`,
+      outlineOffset: r.base.spacing[0.5]
+    }
+  }), c = (i) => ({
+    '&[aria-pressed="true"]': {
+      backgroundColor: i.backgroundActive,
+      borderColor: i.borderActive,
+      color: i.textActive,
+      boxShadow: `inset 0 0 0 ${r.semantic.borders.width.focus}px ${i.textActive}`,
+      "&:hover": { backgroundColor: i.backgroundActive }
+    }
+  });
+  return {
+    contained: {
+      [O(["OnBrand"])]: {
+        "--variant-containedBg": o.background,
+        "--variant-containedColor": o.text,
+        "&:hover": { backgroundColor: o.backgroundHover, color: o.textHover },
+        "&:active": { backgroundColor: o.backgroundActive, color: o.textActive }
+      },
+      [a]: {
+        ...e(o.focusOutline),
+        ...c(o),
+        [B]: { backgroundColor: o.backgroundDisabled, color: o.textDisabled }
+      }
+    },
+    outlined: {
+      [O(["OnBrand"])]: {
+        "--variant-outlinedBorder": s.border,
+        "--variant-outlinedColor": s.text,
+        "&:hover": { backgroundColor: s.backgroundHover, borderColor: s.borderHover, color: s.textHover },
+        "&:active": { backgroundColor: s.backgroundActive, borderColor: s.borderActive, color: s.textActive }
+      },
+      [a]: {
+        ...e(s.focusOutline),
+        ...c(s),
+        [B]: {
+          backgroundColor: s.backgroundDisabled,
+          borderColor: s.borderDisabled,
+          color: s.textDisabled
         }
       }
+    }
+  };
+}
+function Br(r, o, s) {
+  const a = $r(r), e = o === "dark" ? "rgba(255, 255, 255, 0.12)" : r.base.colors.gray[200], c = o === "dark" ? "rgba(255, 255, 255, 0.2)" : r.base.colors.gray[300], i = (u) => o === "dark" ? r.darkMode.shadows?.scale[u] ?? D[u] : r.base.shadows[u], g = o === "dark" ? r.darkMode.colors.border.subtle : r.semantic.colors.border.subtle, y = o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900], p = {
+    outlineStyle: "solid",
+    outlineWidth: r.semantic.borders.width.focus,
+    outlineColor: y,
+    outlineOffset: r.base.spacing[0.5]
+  }, n = "@media (forced-colors: active)", b = { outlineColor: "Highlight" }, t = {
+    backgroundColor: s.selected,
+    color: s.textBrand,
+    boxShadow: `inset 0 0 0 ${r.semantic.borders.width.focus}px ${s.interactive}`,
+    "&:hover": {
+      backgroundColor: s.selected
+    }
+  }, h = {
+    [n]: {
+      "&:not(:focus-visible):not(.Mui-focusVisible)": {
+        outline: `${r.semantic.borders.width.focus}px solid Highlight`,
+        outlineOffset: -r.semantic.borders.width.focus
+      }
+    }
+  };
+  return {
+    // No MuiCssBaseline body override: MUI's CssBaseline paints the body with
+    // palette.background.default and palette.text.primary, so the dark page, presets and palette
+    // overrides all reach it. (An override here used to paint gray[800] in dark mode.)
+    // The only CssBaseline rule is the reduced-motion backstop (E-44+, OD-B14 (a)): under
+    // prefers-reduced-motion every transition and animation collapses to 0.01ms, except on
+    // elements with ESSENTIAL_MOTION_CLASS. Components still guard their own motion.
+    MuiCssBaseline: {
+      styleOverrides: pr()
     },
+    // E-52+: inherit only without a colour prop, so a colour prop reaches the text.
     MuiTypography: {
       styleOverrides: {
-        root: {
-          color: "inherit"
-        }
+        root: ({ ownerState: u, theme: m }) => Or(m, u.color)
       }
     },
     MuiButton: {
@@ -101,116 +264,198 @@ function T(r = p, a = "light") {
           padding: `${r.base.spacing[2]}px ${r.base.spacing[5]}px`,
           borderRadius: r.base.borderRadius.full,
           fontWeight: r.base.fontWeight.semibold,
-          // Disabled state (all variants)
-          "&.Mui-disabled": {
-            backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[200],
-            color: a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
-          }
+          // Disabled state (all variants); a pending control (aria-disabled) looks the same and
+          // keeps its pointer events, so a tooltip can say why (C-20 (4)).
+          [B]: {
+            backgroundColor: o === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[200],
+            color: o === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
+          },
+          [`&${C}`]: {
+            cursor: "not-allowed"
+          },
+          // C-27: a toggle Button's pressed state (every variant); C-20 (5): it survives forced colors.
+          '&[aria-pressed="true"]': { ...t, ...h }
         },
         // ── Text buttons ──
         text: {
-          color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.navy[900],
+          // MUI's text variant reads --variant-textColor; this restates it after MUI's colorInherit
+          // `color: inherit`, and the rule below sets it, so a plain `sx` colour still wins.
+          color: "var(--variant-textColor)",
           "&:hover": {
-            backgroundColor: a === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hover
+            backgroundColor: o === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hover
           },
           "&:active": {
-            backgroundColor: a === "dark" ? r.semantic.effects.onDark.tint : r.semantic.effects.overlay.pressed
+            backgroundColor: o === "dark" ? r.semantic.effects.onDark.tint : r.semantic.effects.overlay.pressed
           },
-          "&.Mui-disabled": {
+          [B]: {
             backgroundColor: "transparent"
+          },
+          // Primary, secondary and inherit text is navy (grey in dark mode). C-15: an enabled
+          // status colour keeps MUI's own --variant-textColor and MUI's tint of it on hover.
+          [G]: {
+            "--variant-textColor": o === "dark" ? r.base.colors.gray[100] : r.base.colors.navy[900]
+          },
+          [O(P)]: {
+            "&:hover, &:active": {
+              backgroundColor: "var(--variant-textBg)"
+            }
           }
         },
         textPrimary: {
-          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          color: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
           "&:hover": {
-            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
+            backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
           },
           "&:active": {
-            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.20)" : r.semantic.effects.overlay.pressed
+            backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.20)" : r.semantic.effects.overlay.pressed
           }
         },
         textSecondary: {
-          color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800],
+          color: o === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800],
           "&:hover": {
-            backgroundColor: a === "dark" ? "rgba(120, 65, 201, 0.12)" : r.semantic.effects.overlay.hover
+            backgroundColor: o === "dark" ? "rgba(120, 65, 201, 0.12)" : r.semantic.effects.overlay.hover
           },
           "&:active": {
-            backgroundColor: a === "dark" ? "rgba(120, 65, 201, 0.20)" : r.semantic.effects.overlay.pressed
+            backgroundColor: o === "dark" ? "rgba(120, 65, 201, 0.20)" : r.semantic.effects.overlay.pressed
           }
         },
         // ── Contained buttons ──
         contained: {
-          color: r.base.colors.gray[0]
+          // Status colors take their palette pair (ADR-03-R7): MUI sets --variant-containedColor
+          // to palette.<status>.contrastText, the on-fill color of the status role, and its
+          // contained variant reads it. This restates that read after MUI's colorInherit
+          // `color: inherit`, so the inherit rule below can set the label through the property.
+          // Disabled buttons keep the root's disabled colors.
+          color: "var(--variant-containedColor)",
+          // C-15: primary and secondary take the component button tokens in both modes, the
+          // values the CSS package ships as --trinity-button-<primary|secondary>-*; the dead
+          // containedPrimary and containedSecondary keys below meant the same. Without them the
+          // white label sat on palette.primary (dark coral, 2.69:1) and palette.secondary (light
+          // coral, 2.97:1). A contained inherit button sits on the theme's grey fill (grey[300]
+          // light, grey[800] dark), so its label is the theme's text.primary, not the parent's
+          // colour (the white label was 1.3:1 on the light grey).
+          [O(["Primary"])]: {
+            "--variant-containedBg": o === "dark" ? r.darkMode.colors.button?.primary?.background ?? r.base.colors.indigo[400] : r.component.button.primary.background,
+            "--variant-containedColor": r.component.button.primary.text,
+            "&:hover": {
+              backgroundColor: r.component.button.primary.backgroundHover,
+              color: r.component.button.primary.textHover
+            },
+            "&:active": {
+              backgroundColor: r.component.button.primary.backgroundActive,
+              color: r.component.button.primary.textActive
+            }
+          },
+          [O(["Inherit"])]: {
+            "--variant-containedColor": s.textPrimary
+          },
+          [O(["Secondary"])]: {
+            "--variant-containedBg": o === "dark" ? r.darkMode.colors.button?.secondary?.background ?? r.base.colors.purple[600] : r.component.button.secondary.background,
+            "--variant-containedColor": r.component.button.secondary.text,
+            "&:hover": {
+              backgroundColor: r.component.button.secondary.backgroundHover,
+              color: r.component.button.secondary.textHover
+            },
+            "&:active": {
+              backgroundColor: r.component.button.secondary.backgroundActive,
+              color: r.component.button.secondary.textActive
+            }
+          },
+          // On-brand buttons for navy surfaces (color="onBrand"), last: see onBrandButtonRules.
+          ...a.contained
         },
         containedPrimary: {
-          backgroundColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.navy[900],
-          color: r.base.colors.gray[0],
+          backgroundColor: o === "dark" ? r.darkMode.colors.button?.primary?.background ?? r.base.colors.indigo[400] : r.component.button.primary.background,
+          color: r.component.button.primary.text,
           "&:hover": {
-            backgroundColor: a === "dark" ? r.base.colors.coral[500] : r.base.colors.coral[800]
+            backgroundColor: r.component.button.primary.backgroundHover,
+            color: r.component.button.primary.textHover
           },
           "&:active": {
-            backgroundColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800]
+            backgroundColor: r.component.button.primary.backgroundActive,
+            color: r.component.button.primary.textActive
           }
         },
         containedSecondary: {
-          backgroundColor: a === "dark" ? r.base.colors.purple[500] : r.base.colors.indigo[900],
-          color: r.base.colors.gray[0],
+          backgroundColor: o === "dark" ? r.darkMode.colors.button?.secondary?.background ?? r.base.colors.purple[600] : r.component.button.secondary.background,
+          color: r.component.button.secondary.text,
           "&:hover": {
-            backgroundColor: a === "dark" ? r.base.colors.purple[400] : r.base.colors.indigo[800]
+            backgroundColor: r.component.button.secondary.backgroundHover,
+            color: r.component.button.secondary.textHover
           },
           "&:active": {
-            backgroundColor: a === "dark" ? r.base.colors.purple[600] : r.base.colors.indigo[700]
+            backgroundColor: r.component.button.secondary.backgroundActive,
+            color: r.component.button.secondary.textActive
           }
         },
         // ── Outlined buttons ──
         outlined: {
           borderWidth: 2,
-          borderColor: a === "dark" ? r.base.colors.gray[500] : r.base.colors.navy[900],
-          color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.navy[900],
+          // MUI's outlined variant reads these two properties; they are restated after MUI's
+          // colorInherit rule, and the rules below set them, so a plain `sx` colour still wins.
+          borderColor: "var(--variant-outlinedBorder)",
+          color: "var(--variant-outlinedColor)",
           "&:hover": {
             borderWidth: 2,
-            backgroundColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.coral[800],
-            borderColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.coral[800],
-            color: r.base.colors.gray[0]
+            backgroundColor: r.component.button.outlined.backgroundHover,
+            borderColor: r.component.button.outlined.backgroundHover,
+            color: r.component.button.outlined.textHover
           },
           "&:active": {
             borderWidth: 2,
-            backgroundColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800],
-            borderColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800],
-            color: r.base.colors.gray[0]
+            backgroundColor: r.component.button.outlined.backgroundActive,
+            borderColor: r.component.button.outlined.backgroundActive,
+            color: r.component.button.outlined.textActive
           },
-          "&.Mui-disabled": {
+          [B]: {
             borderWidth: 2,
-            borderColor: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300],
+            borderColor: o === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300],
             backgroundColor: "transparent",
-            color: a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
-          }
+            color: o === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
+          },
+          // Primary, secondary and inherit take the outlined button tokens.
+          [G]: {
+            "--variant-outlinedBorder": o === "dark" ? r.darkMode.colors.button?.outlined?.border ?? r.base.colors.purple[400] : r.component.button.outlined.border,
+            "--variant-outlinedColor": o === "dark" ? r.darkMode.colors.button?.outlined?.text ?? r.base.colors.purple[400] : r.component.button.outlined.text
+          },
+          // C-15: a status colour draws its label and its 2px border in its own colour, with
+          // MUI's tint of it on hover, instead of the navy/purple fill above.
+          [O(P)]: {
+            "--variant-outlinedBorder": "var(--variant-outlinedColor)",
+            "&:hover, &:active": {
+              color: "var(--variant-outlinedColor)",
+              borderColor: "var(--variant-outlinedColor)",
+              backgroundColor: "var(--variant-outlinedBg)"
+            }
+          },
+          // On-brand buttons for navy surfaces (color="onBrand"), last: see onBrandButtonRules.
+          ...a.outlined
         },
         outlinedPrimary: {
-          borderColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
-          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          borderColor: o === "dark" ? r.darkMode.colors.button?.outlined?.border ?? r.base.colors.purple[400] : r.component.button.outlined.border,
+          color: o === "dark" ? r.darkMode.colors.button?.outlined?.text ?? r.base.colors.purple[400] : r.component.button.outlined.text,
           "&:hover": {
-            backgroundColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.coral[800],
-            borderColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.coral[800],
-            color: r.base.colors.gray[0]
+            backgroundColor: r.component.button.outlined.backgroundHover,
+            borderColor: r.component.button.outlined.backgroundHover,
+            color: r.component.button.outlined.textHover
           },
           "&:active": {
-            backgroundColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800],
-            borderColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800],
-            color: r.base.colors.gray[0]
+            backgroundColor: r.component.button.outlined.backgroundActive,
+            borderColor: r.component.button.outlined.backgroundActive,
+            color: r.component.button.outlined.textActive
           }
         },
         outlinedSecondary: {
-          borderColor: a === "dark" ? r.base.colors.purple[400] : r.base.colors.indigo[900],
-          color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.indigo[900],
+          borderColor: o === "dark" ? r.base.colors.purple[400] : r.base.colors.indigo[900],
+          color: o === "dark" ? r.base.colors.purple[400] : r.base.colors.indigo[900],
           "&:hover": {
-            backgroundColor: a === "dark" ? r.base.colors.purple[500] : r.base.colors.indigo[800],
-            borderColor: a === "dark" ? r.base.colors.purple[500] : r.base.colors.indigo[800],
+            backgroundColor: o === "dark" ? r.base.colors.purple[500] : r.base.colors.indigo[800],
+            borderColor: o === "dark" ? r.base.colors.purple[500] : r.base.colors.indigo[800],
             color: r.base.colors.gray[0]
           },
           "&:active": {
-            backgroundColor: a === "dark" ? r.base.colors.purple[600] : r.base.colors.indigo[700],
-            borderColor: a === "dark" ? r.base.colors.purple[600] : r.base.colors.indigo[700],
+            backgroundColor: o === "dark" ? r.base.colors.purple[600] : r.base.colors.indigo[700],
+            borderColor: o === "dark" ? r.base.colors.purple[600] : r.base.colors.indigo[700],
             color: r.base.colors.gray[0]
           }
         },
@@ -233,12 +478,12 @@ function T(r = p, a = "light") {
         root: {
           borderRadius: r.base.borderRadius.lg,
           // 12px — matches component tokens
-          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
-          border: `1px solid ${o}`,
-          boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.base,
+          backgroundColor: o === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
+          border: `1px solid ${e}`,
+          boxShadow: i("base"),
           transition: "box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out",
           "&:hover": {
-            boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.md
+            boxShadow: i("md")
           }
         }
       }
@@ -251,31 +496,31 @@ function T(r = p, a = "light") {
         root: {
           borderRadius: r.base.borderRadius.lg,
           // 12px — consistent with cards
-          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
-          border: `1px solid ${o}`,
-          boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.sm
+          backgroundColor: o === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
+          border: `1px solid ${e}`,
+          boxShadow: i("sm")
         },
         rounded: {
           borderRadius: r.base.borderRadius.lg
         },
         elevation0: {
-          border: `1px solid ${o}`,
-          boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.sm
+          border: `1px solid ${e}`,
+          boxShadow: i("sm")
         },
         elevation1: {
-          border: `1px solid ${o}`,
-          boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.base
+          border: `1px solid ${e}`,
+          boxShadow: i("base")
         },
         elevation2: {
-          border: `1px solid ${o}`,
-          boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.md
+          border: `1px solid ${e}`,
+          boxShadow: i("md")
         },
         elevation3: {
-          border: `1px solid ${o}`,
-          boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.lg
+          border: `1px solid ${e}`,
+          boxShadow: i("lg")
         },
         outlined: {
-          border: `1px solid ${s}`,
+          border: `1px solid ${c}`,
           boxShadow: "none"
         }
       }
@@ -283,25 +528,34 @@ function T(r = p, a = "light") {
     MuiIconButton: {
       styleOverrides: {
         root: {
-          color: a === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[600],
+          color: o === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[600],
           "&:hover": {
-            backgroundColor: a === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hoverSubtle
+            backgroundColor: o === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hoverSubtle
             // 4% black
           },
           "&:active": {
-            backgroundColor: a === "dark" ? r.semantic.effects.onDark.tint : r.semantic.effects.overlay.pressed
-          }
+            backgroundColor: o === "dark" ? r.semantic.effects.onDark.tint : r.semantic.effects.overlay.pressed
+          },
+          // A pending icon button (aria-disabled) looks like MUI's .Mui-disabled one and keeps its
+          // pointer events (C-20 (4)).
+          [`&${C}, &${C}:hover, &${C}:active`]: {
+            backgroundColor: "transparent",
+            color: o === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[400],
+            cursor: "not-allowed"
+          },
+          // C-27: a toggle icon button's pressed state; C-20 (5): it survives forced colors.
+          '&[aria-pressed="true"]': { ...t, ...h }
         },
         colorPrimary: {
-          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          color: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
           "&:hover": {
-            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
+            backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
           }
         },
         colorSecondary: {
-          color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800],
+          color: o === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800],
           "&:hover": {
-            backgroundColor: a === "dark" ? "rgba(120, 65, 201, 0.12)" : r.semantic.effects.overlay.hover
+            backgroundColor: o === "dark" ? "rgba(120, 65, 201, 0.12)" : r.semantic.effects.overlay.hover
           }
         }
       }
@@ -320,9 +574,9 @@ function T(r = p, a = "light") {
         paper: {
           borderRadius: r.base.borderRadius.xl,
           // 16px — allows nested cards with lg:12px
-          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
-          border: `1px solid ${o}`,
-          boxShadow: a === "dark" ? "0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1)" : r.base.shadows["2xl"]
+          backgroundColor: o === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
+          border: `1px solid ${e}`,
+          boxShadow: i("2xl")
         }
       }
     },
@@ -333,7 +587,7 @@ function T(r = p, a = "light") {
           fontWeight: r.base.fontWeight.semibold,
           padding: `${r.base.spacing[5]}px ${r.base.spacing[6]}px`,
           paddingBottom: r.base.spacing[3],
-          color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+          color: o === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
         }
       }
     },
@@ -341,7 +595,7 @@ function T(r = p, a = "light") {
       styleOverrides: {
         root: {
           padding: `${r.base.spacing[3]}px ${r.base.spacing[6]}px`,
-          color: a === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[600]
+          color: o === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[600]
         }
       }
     },
@@ -364,11 +618,11 @@ function T(r = p, a = "light") {
     MuiLink: {
       styleOverrides: {
         root: {
-          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
-          textDecorationColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          color: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          textDecorationColor: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
           "&:hover": {
-            color: a === "dark" ? r.base.colors.coral[300] : r.base.colors.coral[800],
-            textDecorationColor: a === "dark" ? r.base.colors.coral[300] : r.base.colors.coral[800]
+            color: o === "dark" ? r.base.colors.coral[300] : r.base.colors.coral[800],
+            textDecorationColor: o === "dark" ? r.base.colors.coral[300] : r.base.colors.coral[800]
           }
         }
       }
@@ -376,17 +630,28 @@ function T(r = p, a = "light") {
     MuiChip: {
       styleOverrides: {
         root: {
-          borderRadius: r.base.borderRadius.sm
+          borderRadius: r.base.borderRadius.sm,
           // 6px for chip elements
+          // C-20 (5): a pressed or checked chip keeps its state in forced colors.
+          '&[aria-pressed="true"], &[aria-checked="true"]': h
+        }
+      }
+    },
+    // C-27: ToggleButton's selected state takes the pressed recipe (MUI's own is a 0.16 or
+    // 0.08 tint of text.primary with no other indicator); C-20 (5): it survives forced colors.
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          "&.Mui-selected": { ...t, ...h }
         }
       }
     },
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+          color: o === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
           "&.Mui-focused": {
-            color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+            color: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
           }
         }
       }
@@ -403,10 +668,10 @@ function T(r = p, a = "light") {
             // 6px for small inputs
           },
           "& .MuiInputBase-input": {
-            color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+            color: o === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
           },
           "& .MuiInputBase-input::placeholder": {
-            color: a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400],
+            color: o === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400],
             opacity: 1
           }
         }
@@ -422,45 +687,53 @@ function T(r = p, a = "light") {
             // 6px for small inputs
           },
           "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: a === "dark" ? "rgba(255, 255, 255, 0.23)" : r.base.colors.gray[300]
+            borderColor: o === "dark" ? "rgba(255, 255, 255, 0.23)" : r.base.colors.gray[300]
             // @intentional-color: MUI standard border
           },
           "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: a === "dark" ? r.semantic.effects.onDark.tertiary : r.base.colors.gray[400]
+            borderColor: o === "dark" ? r.semantic.effects.onDark.tertiary : r.base.colors.gray[400]
             // 50% white
           },
           "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+            borderColor: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+          },
+          // C-15: an input in error keeps the border.error outline at rest, on hover and while
+          // focused (the two rules above used to replace it), the value the CSS package ships as
+          // --trinity-border-error (dark #F87171; palette.error.main #FCA5A5 stays the text colour).
+          // MUI's own error rule has this shape and weight; it beats the hover and focus rules
+          // above by coming after them, so an `sx` or app override of the same shape still wins.
+          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+            borderColor: o === "dark" ? r.darkMode.colors.border.error ?? (r.darkMode.colors.status ?? r.semantic.colors.status).error.text : r.semantic.colors.border.error
           }
         },
         input: {
-          color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+          color: o === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
         }
       }
     },
     MuiFilledInput: {
       styleOverrides: {
         root: {
-          backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.09)" : r.semantic.effects.overlay.hover,
+          backgroundColor: o === "dark" ? "rgba(255, 255, 255, 0.09)" : r.semantic.effects.overlay.hover,
           // 8%
           "&:hover": {
-            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.13)" : r.semantic.effects.overlay.pressed
+            backgroundColor: o === "dark" ? "rgba(255, 255, 255, 0.13)" : r.semantic.effects.overlay.pressed
             // 12%
           },
           "&.Mui-focused": {
-            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.09)" : r.semantic.effects.overlay.hover
+            backgroundColor: o === "dark" ? "rgba(255, 255, 255, 0.09)" : r.semantic.effects.overlay.hover
             // 8%
           }
         },
         input: {
-          color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+          color: o === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
         }
       }
     },
     MuiFormHelperText: {
       styleOverrides: {
         root: {
-          color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600]
+          color: o === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600]
         }
       }
     },
@@ -531,7 +804,7 @@ function T(r = p, a = "light") {
           borderRadius: r.semantic.borders.radius.badge,
           // 12px for day cells
           "&.Mui-selected": {
-            backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+            backgroundColor: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
           }
         }
       }
@@ -566,7 +839,7 @@ function T(r = p, a = "light") {
         paper: {
           borderRadius: r.base.borderRadius.lg,
           // 12px for popup
-          boxShadow: r.base.shadows.lg
+          boxShadow: i("lg")
         }
       }
     },
@@ -592,6 +865,8 @@ function T(r = p, a = "light") {
           width: 52,
           height: 32,
           padding: 0,
+          // The track fills the root, so the root must not clip the focus ring drawn around it.
+          overflow: "visible",
           "& .MuiSwitch-switchBase": {
             padding: 0,
             margin: 4,
@@ -600,7 +875,7 @@ function T(r = p, a = "light") {
               transform: "translateX(20px)",
               color: r.base.colors.gray[0],
               "& + .MuiSwitch-track": {
-                backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+                backgroundColor: o === "dark" ? r.darkMode.colors.switch?.track.on ?? r.base.colors.indigo[400] : r.base.colors.navy[900],
                 opacity: 1,
                 border: 0
               },
@@ -617,7 +892,7 @@ function T(r = p, a = "light") {
                   top: 0,
                   backgroundRepeat: "no-repeat",
                   backgroundPosition: "center",
-                  backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900])}" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`
+                  backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(o === "dark" ? r.darkMode.colors.switch?.track.on ?? r.base.colors.indigo[400] : r.base.colors.navy[900])}" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`
                 }
               },
               "&.Mui-disabled + .MuiSwitch-track": {
@@ -625,14 +900,20 @@ function T(r = p, a = "light") {
               }
             },
             "&.Mui-focusVisible .MuiSwitch-thumb": {
-              color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+              color: o === "dark" ? r.darkMode.colors.switch?.track.on ?? r.base.colors.indigo[400] : r.base.colors.navy[900],
               border: `6px solid ${r.base.colors.gray[0]}`
             },
+            // The ring goes on the track: MUI 9 sets .Mui-focusVisible on the switchBase when its
+            // inner input has keyboard focus, and the track is the visible control.
+            "&.Mui-focusVisible + .MuiSwitch-track": {
+              ...p,
+              [n]: b
+            },
             "&.Mui-disabled .MuiSwitch-thumb": {
-              color: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300]
+              color: o === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300]
             },
             "&.Mui-disabled + .MuiSwitch-track": {
-              opacity: a === "dark" ? 0.3 : 0.5
+              opacity: o === "dark" ? 0.3 : 0.5
             }
           },
           "& .MuiSwitch-thumb": {
@@ -641,13 +922,13 @@ function T(r = p, a = "light") {
             height: 16,
             margin: 4,
             position: "relative",
-            boxShadow: r.base.shadows.sm,
+            boxShadow: i("sm"),
             transition: "all 200ms ease-in-out"
           },
           "& .MuiSwitch-track": {
             borderRadius: 32 / 2,
-            backgroundColor: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[200],
-            border: `2px solid ${a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[300]}`,
+            backgroundColor: o === "dark" ? r.darkMode.colors.switch?.track.off ?? r.base.colors.gray[500] : r.base.colors.gray[200],
+            border: `2px solid ${o === "dark" ? r.darkMode.colors.switch?.track.border ?? r.base.colors.gray[500] : r.component.switch.track.border ?? r.base.colors.gray[300]}`,
             opacity: 1,
             transition: "background-color 300ms, border-color 300ms",
             boxSizing: "border-box"
@@ -674,7 +955,7 @@ function T(r = p, a = "light") {
                   top: 0,
                   backgroundRepeat: "no-repeat",
                   backgroundPosition: "center",
-                  backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 24 24"><path fill="${encodeURIComponent(a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900])}" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`
+                  backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 24 24"><path fill="${encodeURIComponent(o === "dark" ? r.darkMode.colors.switch?.track.on ?? r.base.colors.indigo[400] : r.base.colors.navy[900])}" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`
                 }
               }
             }
@@ -690,6 +971,34 @@ function T(r = p, a = "light") {
         }
       }
     },
+    // ============================================
+    // CHECKBOX AND RADIO FOCUS
+    // ============================================
+    // MUI 9 focuses the hidden input inside the ButtonBase root, so the root's :focus-visible
+    // (MuiButtonBase below) never matches. MUI marks the root .Mui-focusVisible instead; the
+    // ring goes on the icon, as MUI's own theme.focusVisible option places it.
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          "&.Mui-focusVisible svg:first-of-type": {
+            ...p,
+            borderRadius: r.base.borderRadius.xs,
+            [n]: b
+          }
+        }
+      }
+    },
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          "&.Mui-focusVisible svg:first-of-type": {
+            ...p,
+            borderRadius: r.base.borderRadius.full,
+            [n]: b
+          }
+        }
+      }
+    },
     MuiFormControlLabel: {
       styleOverrides: {
         root: {
@@ -727,7 +1036,7 @@ function T(r = p, a = "light") {
       styleOverrides: {
         root: {
           minHeight: 48,
-          borderBottom: `1px solid ${r.base.colors.gray[100]}`,
+          borderBottom: `${r.base.borderWidth[1]}px solid ${g}`,
           "&.Mui-expanded": {
             minHeight: 48
           }
@@ -754,7 +1063,7 @@ function T(r = p, a = "light") {
     MuiTableHead: {
       styleOverrides: {
         root: {
-          backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.05)" : r.base.colors.gray[50]
+          backgroundColor: o === "dark" ? "rgba(255, 255, 255, 0.05)" : r.base.colors.gray[50]
         }
       }
     },
@@ -765,17 +1074,17 @@ function T(r = p, a = "light") {
             borderBottom: 0
           },
           "&.Mui-selected": {
-            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.08)" : r.semantic.effects.overlay.hoverSubtle
+            backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.08)" : r.semantic.effects.overlay.hoverSubtle
             // 4%
           },
           "&.Mui-selected:hover": {
-            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
+            backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
             // 8%
           }
         },
         hover: {
           "&:hover": {
-            backgroundColor: a === "dark" ? r.semantic.effects.overlay.hoverSubtle : "rgba(0, 0, 0, 0.02)"
+            backgroundColor: o === "dark" ? r.semantic.effects.overlay.hoverSubtle : "rgba(0, 0, 0, 0.02)"
             // @intentional-color: subtle table row hover
           }
         }
@@ -784,18 +1093,18 @@ function T(r = p, a = "light") {
     MuiTableCell: {
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${o}`,
+          borderBottom: `1px solid ${e}`,
           padding: `${r.base.spacing[3]}px ${r.base.spacing[4]}px`
         },
         head: {
           fontWeight: r.base.fontWeight.semibold,
-          color: a === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[700],
+          color: o === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[700],
           fontSize: r.base.fontSize.sm,
           textTransform: "uppercase",
           letterSpacing: "0.05em"
         },
         body: {
-          color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[900]
+          color: o === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[900]
         },
         sizeSmall: {
           padding: `${r.base.spacing[2]}px ${r.base.spacing[3]}px`
@@ -805,12 +1114,12 @@ function T(r = p, a = "light") {
     MuiTableSortLabel: {
       styleOverrides: {
         root: {
-          color: a === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[700],
+          color: o === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[700],
           "&:hover": {
-            color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[900]
+            color: o === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[900]
           },
           "&.Mui-active": {
-            color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+            color: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
           }
         },
         icon: {
@@ -825,8 +1134,8 @@ function T(r = p, a = "light") {
       styleOverrides: {
         paper: {
           borderRadius: r.base.borderRadius.md,
-          boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5)" : "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-          border: `1px solid ${o}`,
+          boxShadow: i("lg"),
+          border: `1px solid ${e}`,
           marginTop: r.base.spacing[1]
         },
         list: {
@@ -842,12 +1151,12 @@ function T(r = p, a = "light") {
           padding: `${r.base.spacing[2]}px ${r.base.spacing[3]}px`,
           fontSize: r.base.fontSize.sm,
           "&:hover": {
-            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)"
+            backgroundColor: o === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)"
           },
           "&.Mui-selected": {
-            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : "rgba(5, 7, 66, 0.08)",
+            backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.12)" : "rgba(5, 7, 66, 0.08)",
             "&:hover": {
-              backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.16)" : "rgba(5, 7, 66, 0.12)"
+              backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.16)" : "rgba(5, 7, 66, 0.12)"
             }
           }
         }
@@ -857,8 +1166,8 @@ function T(r = p, a = "light") {
       styleOverrides: {
         paper: {
           borderRadius: r.base.borderRadius.md,
-          boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5)" : "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-          border: `1px solid ${o}`
+          boxShadow: i("lg"),
+          border: `1px solid ${e}`
         }
       }
     },
@@ -888,12 +1197,12 @@ function T(r = p, a = "light") {
         root: {
           borderRadius: r.base.borderRadius.sm,
           "&:hover": {
-            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)"
+            backgroundColor: o === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)"
           },
           "&.Mui-selected": {
-            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : "rgba(5, 7, 66, 0.08)",
+            backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.12)" : "rgba(5, 7, 66, 0.08)",
             "&:hover": {
-              backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.16)" : "rgba(5, 7, 66, 0.12)"
+              backgroundColor: o === "dark" ? "rgba(255, 97, 80, 0.16)" : "rgba(5, 7, 66, 0.12)"
             }
           }
         }
@@ -902,7 +1211,7 @@ function T(r = p, a = "light") {
     MuiListItemIcon: {
       styleOverrides: {
         root: {
-          color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+          color: o === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
           minWidth: 40
         }
       }
@@ -923,8 +1232,8 @@ function T(r = p, a = "light") {
     MuiDrawer: {
       styleOverrides: {
         paper: {
-          backgroundColor: a === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[0],
-          borderRight: `1px solid ${o}`
+          backgroundColor: o === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[0],
+          borderRight: `1px solid ${e}`
         }
       }
     },
@@ -937,7 +1246,7 @@ function T(r = p, a = "light") {
           minHeight: 40
         },
         indicator: {
-          backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          backgroundColor: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
           height: 3,
           borderRadius: 2
         }
@@ -952,18 +1261,18 @@ function T(r = p, a = "light") {
           minHeight: 40,
           padding: `${r.base.spacing[2]}px ${r.base.spacing[4]}px`,
           borderRadius: r.base.borderRadius.xs,
-          color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+          color: o === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
           transition: "color 0.2s ease, background-color 0.2s ease",
           "&:hover": {
-            color: a === "dark" ? r.base.colors.gray[200] : r.base.colors.gray[900],
-            backgroundColor: a === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hoverSubtle
+            color: o === "dark" ? r.base.colors.gray[200] : r.base.colors.gray[900],
+            backgroundColor: o === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hoverSubtle
           },
           "&.Mui-selected": {
-            color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+            color: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
             fontWeight: r.base.fontWeight.semibold
           },
           "&:focus-visible": {
-            outline: `2px solid ${a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]}`,
+            outline: `2px solid ${o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]}`,
             outlineOffset: -2
           }
         }
@@ -982,17 +1291,16 @@ function T(r = p, a = "light") {
           padding: "0 4px"
         },
         colorPrimary: {
-          backgroundColor: a === "dark" ? r.base.colors.coral[500] : r.base.colors.navy[900]
+          backgroundColor: o === "dark" ? r.base.colors.coral[500] : r.base.colors.navy[900]
         },
-        colorSecondary: {
+        // C-15: light keeps the coral fill (its palette label, gray 900, is 7:1 or more); dark
+        // takes palette.secondary and its white label (white on coral[500] was 2.55:1).
+        colorSecondary: o === "dark" ? {} : {
           backgroundColor: r.base.colors.coral[500]
-        },
-        colorError: {
-          backgroundColor: r.base.colors.coral[600]
-        },
-        colorSuccess: {
-          backgroundColor: r.semantic.colors.status.success.text
         }
+        // C-15: error and success badges draw MUI's status pair (palette.<status>.main and
+        // contrastText, ADR-03-R7), so no override: coral[600] with white was 2.69:1, and the
+        // fixed light success fill took the dark label in dark mode.
       }
     },
     // ============================================
@@ -1007,8 +1315,8 @@ function T(r = p, a = "light") {
         colorDefault: {
           // Use navy background in light mode, gray in dark mode
           // Always ensure accessible text contrast
-          backgroundColor: a === "dark" ? r.base.colors.gray[600] : r.base.colors.navy[900],
-          color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[0]
+          backgroundColor: o === "dark" ? r.base.colors.gray[600] : r.base.colors.navy[900],
+          color: o === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[0]
           // White text on navy for accessibility
         }
       }
@@ -1017,7 +1325,7 @@ function T(r = p, a = "light") {
       styleOverrides: {
         root: {
           "& .MuiAvatar-root": {
-            borderColor: a === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[0],
+            borderColor: o === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[0],
             borderWidth: 2
           }
         }
@@ -1049,9 +1357,9 @@ function T(r = p, a = "light") {
     MuiStepIcon: {
       styleOverrides: {
         root: {
-          color: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300],
+          color: o === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300],
           "&.Mui-active": {
-            color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+            color: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
           },
           "&.Mui-completed": {
             color: r.semantic.colors.status.success.text
@@ -1076,10 +1384,10 @@ function T(r = p, a = "light") {
         root: {
           fontWeight: r.base.fontWeight.medium,
           "&.Mui-selected": {
-            backgroundColor: a === "dark" ? r.base.colors.coral[500] : r.base.colors.navy[900],
+            backgroundColor: o === "dark" ? r.base.colors.coral[500] : r.base.colors.navy[900],
             color: r.base.colors.gray[0],
             "&:hover": {
-              backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.coral[800]
+              backgroundColor: o === "dark" ? r.base.colors.coral[400] : r.base.colors.coral[800]
             }
           }
         }
@@ -1095,17 +1403,47 @@ function T(r = p, a = "light") {
           // @intentional-color: rating star gold — no token equivalent
         },
         iconEmpty: {
-          color: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300]
+          color: o === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300]
         }
       }
     },
     // ============================================
+    // PROGRESS (C-20 (1), (2))
+    // ============================================
+    // The LinearProgress track is the neutral border.default role for every palette colour, so a
+    // bar meets 3:1 against it (MUI tints the track from the bar colour, which left the light
+    // error, warning and success bars at 2.62-2.89:1). `inherit` keeps MUI's currentColor track
+    // and `buffer` its dashes. Under reduced motion the indeterminate bar stands still at the
+    // inline start, the second bar hides and value changes jump; the circular spinner shows a
+    // static arc. The CssBaseline backstop (E-44+) would only shorten these loops to their last
+    // frame, which for both progress loops is an empty track.
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: ({ ownerState: u, theme: m }) => u.color === "inherit" || u.variant === "buffer" ? null : { backgroundColor: m.palette.trinity?.border.default ?? m.palette.divider },
+        bar1: ({ ownerState: u }) => $(
+          _(u) ? { animation: "none", left: 0, right: "auto", width: "40%" } : { transition: "none" }
+        ),
+        bar2: ({ ownerState: u }) => $(_(u) ? { animation: "none", display: "none" } : { transition: "none" }),
+        dashed: $({ animation: "none" })
+      }
+    },
+    MuiCircularProgress: {
+      styleOverrides: {
+        root: $({ animation: "none", transition: "none" }),
+        circle: ({ ownerState: u }) => $(
+          u.variant === "determinate" ? { transition: "none" } : { animation: "none", strokeDasharray: "80px, 200px", strokeDashoffset: 0 }
+        )
+      }
+    },
+    // ============================================
     // SKELETON
     // ============================================
     MuiSkeleton: {
       styleOverrides: {
         root: {
-          backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.11)" : "rgba(0, 0, 0, 0.08)"
+          backgroundColor: o === "dark" ? "rgba(255, 255, 255, 0.11)" : "rgba(0, 0, 0, 0.08)",
+          // C-20 (3): under reduced motion the pulse and the wave stop; the placeholder stays.
+          ...$({ animation: "none", "&::after": { animation: "none", display: "none" } })
         },
         rounded: {
           borderRadius: r.base.borderRadius.md
@@ -1127,7 +1465,7 @@ function T(r = p, a = "light") {
     MuiSnackbarContent: {
       styleOverrides: {
         root: {
-          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900],
+          backgroundColor: o === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900],
           color: r.base.colors.gray[0],
           borderRadius: r.base.borderRadius.md,
           boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2)"
@@ -1140,17 +1478,17 @@ function T(r = p, a = "light") {
     MuiBreadcrumbs: {
       styleOverrides: {
         separator: {
-          color: a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
+          color: o === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
         },
         li: {
           "& .MuiLink-root": {
-            color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+            color: o === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
             "&:hover": {
-              color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+              color: o === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
             }
           },
           "& .MuiTypography-root": {
-            color: a === "dark" ? r.base.colors.gray[200] : r.base.colors.gray[900]
+            color: o === "dark" ? r.base.colors.gray[200] : r.base.colors.gray[900]
           }
         }
       }
@@ -1161,7 +1499,7 @@ function T(r = p, a = "light") {
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900],
+          backgroundColor: o === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900],
           color: r.base.colors.gray[0],
           fontSize: r.base.fontSize.xs,
           fontWeight: r.base.fontWeight.medium,
@@ -1169,7 +1507,7 @@ function T(r = p, a = "light") {
           borderRadius: r.base.borderRadius.sm
         },
         arrow: {
-          color: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900]
+          color: o === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900]
         }
       }
     },
@@ -1180,70 +1518,112 @@ function T(r = p, a = "light") {
       styleOverrides: {
         root: {
           "&:focus-visible": {
-            outline: `2px solid ${a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]}`,
-            outlineOffset: 2
+            outline: `${p.outlineWidth}px ${p.outlineStyle} ${p.outlineColor}`,
+            outlineOffset: p.outlineOffset
           }
         }
       }
     }
   };
 }
-function F(r) {
+function Er(r) {
   const {
-    mode: a,
-    direction: o = "ltr",
-    name: s = "custom",
+    mode: o,
+    direction: s = "ltr",
+    name: a = "custom",
     tokens: e,
-    palette: g,
-    components: u,
-    typography: n,
-    shape: t,
-    config: c = {}
-  } = r, b = v(a, e, o);
+    palette: c,
+    components: i,
+    typography: g,
+    shape: y,
+    config: p = {}
+  } = r, n = ar(o, e, s), b = X(n, {
+    ...c && { palette: c },
+    ...i && {
+      components: i
+    },
+    ...g && { typography: g },
+    ...y && { shape: y }
+  });
   return {
-    theme: M(b, {
-      direction: o,
-      palette: g,
-      components: u,
-      typography: n,
-      shape: t
-    }),
-    name: s,
-    mode: a,
-    config: c
+    theme: Y(b),
+    name: a,
+    mode: o,
+    config: p
   };
 }
-function v(r, a, o = "ltr") {
-  const s = { ...p, ...a }, e = s.darkMode.colors.status ?? s.semantic.colors.status, g = r === "dark" ? {
+function or(r, o, s = "ltr") {
+  return Y(X(ar(r, o, s)));
+}
+function ar(r, o, s = "ltr") {
+  const a = W(o), e = a.darkMode.colors.status ?? a.semantic.colors.status, c = a.semantic.colors.surface, i = a.darkMode.effects ?? K, g = a.darkMode.colors.interactive ?? {
+    default: a.base.colors.purple[400],
+    hover: a.base.colors.coral[400],
+    active: a.base.colors.indigo[400],
+    disabled: a.base.colors.gray[600],
+    focus: a.base.colors.purple[400]
+  }, y = F(a.semantic.colors), p = H.colors.ai, n = (x, M) => {
+    const R = x ?? M;
+    return {
+      ...R,
+      presence: { ...R.presence ?? M.presence },
+      avatarFill: { ...R.avatarFill ?? M.avatarFill },
+      progress: R.progress ?? M.progress,
+      canvasFill: { ...R.canvasFill ?? M.canvasFill }
+    };
+  }, b = F({ status: e }), t = (x, M) => ({
+    error: { main: x.error.text, contrastText: M.error },
+    warning: { main: x.warning.text, contrastText: M.warning },
+    success: { main: x.success.text, contrastText: M.success },
+    info: { main: x.info.text, contrastText: M.info }
+  }), h = (x) => ({
+    hover: x.hover,
+    hoverSubtle: x.hoverSubtle,
+    pressed: x.pressed,
+    selected: x.selected
+  }), u = a.semantic.colors.indicator ?? z.colors.indicator, m = r === "dark" ? N(u, a.darkMode.colors.indicator ?? H.colors.indicator, {
+    error: e.error.text,
+    warning: e.warning.text,
+    success: e.success.text,
+    info: e.info.text,
+    neutral: a.darkMode.colors.text.secondary,
+    progress: a.darkMode.colors.text.brand ?? a.base.colors.navy[100],
+    beta: a.base.colors.indigo[200]
+  }) : N(u), w = (x, M) => {
+    const [R, L] = x.split("."), V = a.semantic.colors[R][L], er = z.colors[R][L];
+    return V !== er ? V : M;
+  }, k = r === "dark" ? {
     mode: "dark",
-    primary: { main: s.base.colors.coral[600], ...s.base.colors.coral },
-    secondary: { main: s.base.colors.purple[500], ...s.base.colors.purple },
+    primary: { main: a.base.colors.coral[600], ...a.base.colors.coral },
+    secondary: { main: a.base.colors.purple[500], ...a.base.colors.purple },
+    // Buttons on navy brand surfaces (color="onBrand"): the same values as light mode.
+    onBrand: U(a),
+    ...t(
+      e,
+      a.darkMode.colors.onStatus ?? H.colors.onStatus
+    ),
     background: {
-      default: s.base.colors.gray[800],
-      paper: s.base.colors.gray[700]
+      default: a.darkMode.colors.background.primary,
+      paper: a.darkMode.colors.surface?.elevated ?? a.darkMode.colors.background.secondary
     },
     text: {
-      primary: s.base.colors.gray[50],
-      secondary: s.base.colors.gray[400],
-      disabled: s.base.colors.gray[500]
+      primary: a.darkMode.colors.text.primary,
+      secondary: a.darkMode.colors.text.secondary,
+      disabled: a.darkMode.colors.text.disabled
     },
     divider: "rgba(255, 255, 255, 0.12)",
     action: {
-      active: s.base.colors.gray[100],
+      active: a.base.colors.gray[100],
       hover: "rgba(255, 255, 255, 0.08)",
-      selected: "rgba(255, 255, 255, 0.16)",
-      disabled: s.base.colors.gray[600],
+      // The overlay.selected token (C-27, M5 decision 15 (a)): React and the CSS package
+      // (--trinity-overlay-selected) draw the same selected background; was a 0.16 literal.
+      selected: i.overlay.selected,
+      disabled: a.base.colors.gray[600],
       disabledBackground: "rgba(255, 255, 255, 0.12)"
     },
     // Trinity-specific semantic colors (dark mode)
     trinity: {
-      interactive: {
-        default: s.base.colors.coral[400],
-        hover: s.base.colors.coral[300],
-        active: s.base.colors.coral[500],
-        disabled: s.base.colors.gray[600],
-        focus: s.base.colors.purple[400]
-      },
+      interactive: g,
       status: {
         success: { text: e.success.text, background: e.success.background, border: e.success.border },
         warning: { text: e.warning.text, background: e.warning.background, border: e.warning.border },
@@ -1251,245 +1631,320 @@ function v(r, a, o = "ltr") {
         info: { text: e.info.text, background: e.info.background, border: e.info.border }
       },
       border: {
-        default: s.darkMode.colors.border.default,
-        subtle: s.darkMode.colors.border.subtle,
-        strong: s.darkMode.colors.border.strong
-      }
+        default: a.darkMode.colors.border.default,
+        subtle: a.darkMode.colors.border.subtle,
+        strong: a.darkMode.colors.border.strong,
+        focus: a.darkMode.colors.border.focus ?? g.focus
+      },
+      surface: {
+        elevated: a.darkMode.colors.surface?.elevated ?? a.darkMode.colors.background.secondary,
+        sunken: a.darkMode.colors.surface?.sunken ?? a.darkMode.colors.background.primary,
+        subtle: a.darkMode.colors.background.secondary,
+        neutralFill: a.darkMode.colors.surface?.neutralFill ?? H.colors.surface?.neutralFill ?? a.base.colors.gray[600]
+      },
+      overlay: h(i.overlay),
+      state: { ...i.state },
+      confidence: b.confidence,
+      verification: b.verification,
+      ai: n(a.darkMode.colors.ai, p),
+      indicator: m,
+      // ADR-03-R10: resolveTrinityTokens keeps the dark favorite equal to the dark
+      // status.warning.text unless it is overridden.
+      favorite: a.darkMode.colors.favorite ?? e.warning.text
     }
   } : {
     mode: "light",
-    primary: { main: s.base.colors.navy[900], ...s.base.colors.navy },
-    secondary: { main: s.base.colors.coral[800], ...s.base.colors.coral },
+    primary: { main: a.base.colors.navy[900], ...a.base.colors.navy },
+    secondary: { main: a.base.colors.coral[800], ...a.base.colors.coral },
+    // Buttons on navy brand surfaces (color="onBrand"): the same values as dark mode.
+    onBrand: U(a),
+    ...t(
+      a.semantic.colors.status,
+      a.semantic.colors.onStatus ?? z.colors.onStatus
+    ),
     background: {
-      default: s.base.colors.gray[50],
-      paper: s.base.colors.gray[0]
+      default: a.base.colors.gray[50],
+      paper: a.base.colors.gray[0]
     },
     text: {
-      primary: s.base.colors.gray[900],
-      secondary: s.base.colors.gray[600],
-      disabled: s.base.colors.gray[400]
+      primary: a.base.colors.gray[900],
+      secondary: a.base.colors.gray[600],
+      disabled: a.base.colors.gray[400]
     },
-    divider: s.base.colors.gray[200],
+    divider: a.base.colors.gray[200],
     action: {
-      active: s.base.colors.gray[700],
+      active: a.base.colors.gray[700],
       hover: "rgba(0, 0, 0, 0.04)",
-      selected: "rgba(0, 0, 0, 0.08)",
-      disabled: s.base.colors.gray[400],
-      disabledBackground: s.base.colors.gray[200]
+      selected: a.semantic.effects.overlay.selected,
+      // C-27: the token (same value)
+      disabled: a.base.colors.gray[400],
+      disabledBackground: a.base.colors.gray[200]
     },
     // Trinity-specific semantic colors (light mode)
     trinity: {
+      // The semantic interactive and border roles (E-43+, M4 lane-1 finding 3): a semantic
+      // override wins, and a role left at its default reads its base source, so a base
+      // override still reaches it. Interactive is value-neutral; the borders move from gray
+      // 200/100/400 to the semantic 300/200/500, the values the CSS package already ships.
       interactive: {
-        default: s.base.colors.navy[900],
-        hover: s.base.colors.coral[800],
-        active: s.base.colors.indigo[900],
-        disabled: s.base.colors.gray[300],
-        focus: s.base.colors.purple[700]
+        default: w("interactive.default", a.base.colors.navy[900]),
+        hover: w("interactive.hover", a.base.colors.coral[800]),
+        active: w("interactive.active", a.base.colors.indigo[900]),
+        disabled: w("interactive.disabled", a.base.colors.gray[300]),
+        focus: w("interactive.focus", a.base.colors.purple[700])
       },
       status: {
-        success: { text: s.semantic.colors.status.success.text, background: s.semantic.colors.status.success.background, border: s.semantic.colors.status.success.border },
-        warning: { text: s.semantic.colors.status.warning.text, background: s.semantic.colors.status.warning.background, border: s.semantic.colors.status.warning.border },
-        error: { text: s.semantic.colors.status.error.text, background: s.semantic.colors.status.error.background, border: s.semantic.colors.status.error.border },
-        info: { text: s.semantic.colors.status.info.text, background: s.semantic.colors.status.info.background, border: s.semantic.colors.status.info.border }
+        success: { text: a.semantic.colors.status.success.text, background: a.semantic.colors.status.success.background, border: a.semantic.colors.status.success.border },
+        warning: { text: a.semantic.colors.status.warning.text, background: a.semantic.colors.status.warning.background, border: a.semantic.colors.status.warning.border },
+        error: { text: a.semantic.colors.status.error.text, background: a.semantic.colors.status.error.background, border: a.semantic.colors.status.error.border },
+        info: { text: a.semantic.colors.status.info.text, background: a.semantic.colors.status.info.background, border: a.semantic.colors.status.info.border }
       },
       border: {
-        default: s.base.colors.gray[200],
-        subtle: s.base.colors.gray[100],
-        strong: s.base.colors.gray[400]
-      }
+        default: w("border.default", a.base.colors.gray[300]),
+        subtle: w("border.subtle", a.base.colors.gray[200]),
+        strong: w("border.strong", a.base.colors.gray[500]),
+        focus: a.semantic.colors.border.focus
+      },
+      surface: {
+        elevated: c.elevated,
+        sunken: c.sunken,
+        subtle: a.semantic.colors.background.secondary,
+        neutralFill: c.neutralFill
+      },
+      overlay: h(a.semantic.effects.overlay),
+      state: { ...a.semantic.effects.state },
+      confidence: y.confidence,
+      verification: y.verification,
+      ai: n(a.semantic.colors.ai, z.colors.ai),
+      indicator: m,
+      // ADR-03-R10: resolveTrinityTokens keeps it equal to status.warning.text unless it is
+      // overridden; a token set without it falls back to that role.
+      favorite: a.semantic.colors.favorite ?? a.semantic.colors.status.warning.text
     }
-  }, u = {
+  }, sr = {
     fontFamily: '"Montserrat", sans-serif',
     // Button text style
     button: {
       textTransform: "none",
-      fontWeight: s.base.fontWeight.semibold
+      fontWeight: a.base.fontWeight.semibold
     },
     // Hierarchy-based typography variants
     // Display variants (Level 1 - Hero/Marketing)
     h1: {
-      fontSize: i.heading.scale.h1.size,
-      fontWeight: i.heading.scale.h1.weight,
-      lineHeight: i.heading.scale.h1.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+      fontSize: l.heading.scale.h1.size,
+      fontWeight: l.heading.scale.h1.weight,
+      lineHeight: l.heading.scale.h1.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.primary : a.semantic.colors.text.primary
     },
     h2: {
-      fontSize: i.heading.scale.h2.size,
-      fontWeight: i.heading.scale.h2.weight,
-      lineHeight: i.heading.scale.h2.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+      fontSize: l.heading.scale.h2.size,
+      fontWeight: l.heading.scale.h2.weight,
+      lineHeight: l.heading.scale.h2.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.primary : a.semantic.colors.text.primary
     },
     h3: {
-      fontSize: i.heading.scale.h3.size,
-      fontWeight: i.heading.scale.h3.weight,
-      lineHeight: i.heading.scale.h3.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+      fontSize: l.heading.scale.h3.size,
+      fontWeight: l.heading.scale.h3.weight,
+      lineHeight: l.heading.scale.h3.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.primary : a.semantic.colors.text.primary
     },
     h4: {
-      fontSize: i.heading.scale.h4.size,
-      fontWeight: i.heading.scale.h4.weight,
-      lineHeight: i.heading.scale.h4.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.secondary
+      fontSize: l.heading.scale.h4.size,
+      fontWeight: l.heading.scale.h4.weight,
+      lineHeight: l.heading.scale.h4.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.primary : a.semantic.colors.text.secondary
     },
     h5: {
-      fontSize: i.heading.scale.h5.size,
-      fontWeight: i.heading.scale.h5.weight,
-      lineHeight: i.heading.scale.h5.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.secondary : s.semantic.colors.text.secondary
+      fontSize: l.heading.scale.h5.size,
+      fontWeight: l.heading.scale.h5.weight,
+      lineHeight: l.heading.scale.h5.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.secondary : a.semantic.colors.text.secondary
     },
     h6: {
-      fontSize: i.heading.scale.h6.size,
-      fontWeight: i.heading.scale.h6.weight,
-      lineHeight: i.heading.scale.h6.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.secondary : s.semantic.colors.text.secondary
+      fontSize: l.heading.scale.h6.size,
+      fontWeight: l.heading.scale.h6.weight,
+      lineHeight: l.heading.scale.h6.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.secondary : a.semantic.colors.text.secondary
     },
     // Body variants (Level 3 - Content)
     body1: {
-      fontSize: i.body.scale.medium.size,
-      fontWeight: i.body.scale.medium.weight,
-      lineHeight: i.body.scale.medium.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+      fontSize: l.body.scale.medium.size,
+      fontWeight: l.body.scale.medium.weight,
+      lineHeight: l.body.scale.medium.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.primary : a.semantic.colors.text.primary
     },
     body2: {
-      fontSize: i.body.scale.small.size,
-      fontWeight: i.body.scale.small.weight,
-      lineHeight: i.body.scale.small.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.secondary : s.semantic.colors.text.secondary
+      fontSize: l.body.scale.small.size,
+      fontWeight: l.body.scale.small.weight,
+      lineHeight: l.body.scale.small.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.secondary : a.semantic.colors.text.secondary
     },
     // Supporting text variants
     subtitle1: {
-      fontSize: i.label.scale.large.size,
-      fontWeight: i.label.scale.large.weight,
-      lineHeight: i.label.scale.large.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+      fontSize: l.label.scale.large.size,
+      fontWeight: l.label.scale.large.weight,
+      lineHeight: l.label.scale.large.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.primary : a.semantic.colors.text.primary
     },
     subtitle2: {
-      fontSize: i.label.scale.medium.size,
-      fontWeight: i.label.scale.medium.weight,
-      lineHeight: i.label.scale.medium.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.secondary : s.semantic.colors.text.secondary
+      fontSize: l.label.scale.medium.size,
+      fontWeight: l.label.scale.medium.weight,
+      lineHeight: l.label.scale.medium.lineHeight,
+      color: r === "dark" ? a.darkMode.colors.text.secondary : a.semantic.colors.text.secondary
     },
     caption: {
-      fontSize: i.caption.scale.default.size,
-      fontWeight: i.caption.scale.default.weight,
-      lineHeight: i.caption.scale.default.lineHeight,
-      color: r === "dark" ? s.darkMode.colors.text.tertiary : s.semantic.colors.text.tertiary
+      fontSize: l.caption.scale.default.size,
+      fontWeight: l.caption.scale.default.weight,
+      lineHeight: l.caption.scale.default.lineHeight,
+      // Light reads text.secondary, not text.tertiary (2.54:1 on white): E-35, OD-E12 option A.
+      // text.tertiary stays a disabled or decorative role until Step 7 re-derives it (L-01).
+      color: r === "dark" ? a.darkMode.colors.text.tertiary : a.semantic.colors.text.secondary
     },
     overline: {
-      fontSize: i.overline.scale.default.size,
-      fontWeight: i.overline.scale.default.weight,
-      lineHeight: i.overline.scale.default.lineHeight,
-      letterSpacing: i.overline.scale.default.tracking,
+      fontSize: l.overline.scale.default.size,
+      fontWeight: l.overline.scale.default.weight,
+      lineHeight: l.overline.scale.default.lineHeight,
+      letterSpacing: l.overline.scale.default.tracking,
       textTransform: "uppercase",
-      color: r === "dark" ? s.darkMode.colors.text.tertiary : s.semantic.colors.text.tertiary
+      // As caption (E-35).
+      color: r === "dark" ? a.darkMode.colors.text.tertiary : a.semantic.colors.text.secondary
     }
   };
-  return M({
-    direction: o,
-    palette: g,
-    typography: u,
+  return {
+    direction: s,
+    palette: k,
+    typography: sr,
     shape: {
-      borderRadius: s.base.borderRadius.md
+      borderRadius: a.base.borderRadius.md
       // 8px base - components override as needed
     },
-    components: T(s, r)
-  });
+    // theme.transitions read the motion tokens where MUI's default equals one (E-44+); the
+    // other MUI values stay (themeTransitions in src/components/shared/motion.ts lists them).
+    transitions: lr(a.semantic.motion),
+    components: Br(a, r, {
+      interactive: k.trinity.interactive.default,
+      selected: k.action.selected,
+      textBrand: r === "dark" ? a.darkMode.colors.text.brand ?? a.base.colors.navy[100] : a.semantic.colors.text.brand,
+      textPrimary: k.text.primary
+    }),
+    // The resolved token set, kept on the theme as theme.trinityTokens (OD-E16): the token hook
+    // and the runtime CSS functions read the same values as the palette.
+    trinityTokens: a
+  };
 }
-const d = {
+const v = {
   primary: {
-    main: "#050742",
-    // Deep Navy
-    light: "#7841C9",
-    // Light Violet/Purple
-    dark: "#3816A0"
-    // Deep Indigo
+    main: f.colors.navy[900],
+    light: f.colors.purple[700],
+    dark: f.colors.indigo[900]
   },
   secondary: {
-    main: "#FF6150",
-    // Coral
-    light: "#27AAE1",
-    // Azure
-    dark: "#6B12ED"
-    // Electric Indigo
+    main: f.colors.coral[800],
+    light: f.colors.azure[500],
+    dark: f.colors.indigo.electric
   },
   neutral: {
-    white: "#FFFFFF",
-    lightGray: "#FAFAFA",
-    gray100: "#E5E7EB",
-    gray400: "#9CA3AF",
-    gray500: "#6B7280",
-    gray600: "#374151",
-    darkBg: "#18181B",
-    darkPaper: "#27272A"
+    white: f.colors.gray[0],
+    lightGray: f.colors.gray[50],
+    gray100: f.colors.gray[200],
+    gray400: f.colors.gray[400],
+    gray500: f.colors.gray[500],
+    gray600: f.colors.gray[600],
+    darkBg: f.colors.gray[800],
+    darkPaper: f.colors.gray[700]
   }
-}, E = {
+}, Lr = {
   // White text on colored backgrounds
-  whiteOnNavy: { text: d.neutral.white, bg: d.primary.main },
-  whiteOnPurple: { text: d.neutral.white, bg: d.primary.light },
+  whiteOnNavy: { text: v.neutral.white, bg: v.primary.main },
+  whiteOnPurple: { text: v.neutral.white, bg: v.primary.light },
   // Navy text on light backgrounds
-  navyOnWhite: { text: d.primary.main, bg: d.neutral.white },
-  navyOnCoral: { text: d.primary.main, bg: d.secondary.main },
-  navyOnAzure: { text: d.primary.main, bg: d.secondary.light },
+  navyOnWhite: { text: v.primary.main, bg: v.neutral.white },
+  navyOnCoral: { text: v.primary.main, bg: v.secondary.main },
+  navyOnAzure: { text: v.primary.main, bg: v.secondary.light },
   // Purple text on white background
-  purpleOnWhite: { text: d.primary.light, bg: d.neutral.white },
+  purpleOnWhite: { text: v.primary.light, bg: v.neutral.white },
   // Accent colors on navy background
-  coralOnNavy: { text: d.secondary.main, bg: d.primary.main },
-  azureOnNavy: { text: d.secondary.light, bg: d.primary.main }
-}, V = v("light"), j = v("dark");
-function N() {
-  const a = C().palette.mode, o = a === "dark";
-  return R(() => ({
-    tokens: p,
-    base: y,
-    semantic: m,
-    component: w,
-    darkMode: f,
-    mode: a,
-    isDarkMode: o,
-    getColor: (c, b) => o && b ? b : c,
-    getSemanticColor: (c, b) => {
-      const h = m.colors[c]?.[b];
-      if (o) {
-        const x = f.colors[c]?.[b];
-        if (x) return x;
-      }
-      return typeof h == "string" ? h : "";
-    },
-    spacing: (c) => y.spacing[c],
-    spacingCss: (c) => `${y.spacing[c]}px`,
-    radius: (c) => y.borderRadius[c],
-    shadow: (c) => y.shadows[c]
-  }), [o, a]);
+  coralOnNavy: { text: v.secondary.main, bg: v.primary.main },
+  azureOnNavy: { text: v.secondary.light, bg: v.primary.main }
+}, Vr = /* @__PURE__ */ or("light"), Fr = /* @__PURE__ */ or("dark"), Z = /* @__PURE__ */ new Set();
+function Tr(r) {
+  process.env.NODE_ENV !== "production" && (Z.has(r) || (Z.add(r), console.warn(`[Trinity] useTrinityTokens().getSemanticColor: no semantic color at "${r}".`)));
+}
+function q(r, o, s) {
+  return [o, ...s].reduce(
+    (a, e) => a && typeof a == "object" ? a[e] : void 0,
+    r
+  );
+}
+function Nr() {
+  const r = ir(), o = r.palette.mode, s = o === "dark", a = r.trinityTokens ?? T;
+  return mr(() => {
+    const e = (t, h) => s && h ? h : t, c = (t, h) => {
+      const u = h.split(".");
+      if (s) {
+        const w = q(a.darkMode.colors, t, u);
+        if (typeof w == "string") return w;
+      }
+      const m = q(a.semantic.colors, t, u);
+      return typeof m == "string" ? m : (Tr(`${t}.${h}`), "");
+    }, i = (t) => a.base.spacing[t], g = (t) => `${a.base.spacing[t]}px`, y = (t) => a.base.borderRadius[t], p = (t) => s ? (a.darkMode.shadows?.scale ?? D)[t] : a.base.shadows[t], n = (t) => (a.darkMode.shadows?.glow ?? D.glow)[t], b = (t, h) => {
+      if (s) {
+        const m = (a.darkMode.effects ?? K)[t];
+        if (m[h] !== void 0) return m[h];
+      }
+      return a.semantic.effects[t][h] ?? "";
+    };
+    return {
+      tokens: a,
+      base: a.base,
+      semantic: a.semantic,
+      component: a.component,
+      darkMode: a.darkMode,
+      mode: o,
+      isDarkMode: s,
+      getColor: e,
+      getSemanticColor: c,
+      spacing: i,
+      spacingCss: g,
+      radius: y,
+      shadow: p,
+      glow: n,
+      effect: b
+    };
+  }, [s, o, a]);
 }
 export {
-  E as accessibleCombinations,
-  X as attentionHierarchy,
-  y as baseTokens,
-  d as brandColors,
-  w as componentTokens,
-  Z as contrastHierarchy,
-  v as createTrinityTheme,
-  F as createTrinityThemePreset,
-  f as darkModeTokens,
-  j as darkTheme,
-  q as elevationHierarchy,
-  z as generateCssVariables,
-  $ as generateDarkModeCssVariables,
-  J as getAttentionColor,
-  W as getContrastRatio,
-  K as getElevation,
-  Q as getHierarchySpacing,
-  Y as getTypography,
-  _ as hierarchy,
-  D as injectDarkModeCssVariables,
-  P as injectTrinityCssVariables,
-  k as interactiveHierarchy,
-  V as lightTheme,
-  S as scaleHierarchy,
-  m as semanticTokens,
-  rr as spacingHierarchy,
-  p as tokens,
-  i as typographicHierarchy,
-  N as useTrinityTokens,
-  L as validateAccessibility
+  Lr as accessibleCombinations,
+  _r as attentionHierarchy,
+  f as baseTokens,
+  v as brandColors,
+  j as componentTokens,
+  Ur as contrastHierarchy,
+  or as createTrinityTheme,
+  Er as createTrinityThemePreset,
+  K as darkModeEffects,
+  D as darkModeShadows,
+  H as darkModeTokens,
+  Fr as darkTheme,
+  Zr as elevationHierarchy,
+  Mr as generateCssVariables,
+  Wr as generateDarkModeCssVariables,
+  qr as getAttentionColor,
+  Cr as getContrastRatio,
+  Xr as getElevation,
+  Kr as getHierarchySpacing,
+  Qr as getTypography,
+  Jr as hierarchy,
+  Dr as injectDarkModeCssVariables,
+  Ir as injectTrinityCssVariables,
+  Yr as interactiveHierarchy,
+  Vr as lightTheme,
+  W as resolveTrinityTokens,
+  Sr as scaleHierarchy,
+  z as semanticTokens,
+  ro as spacingHierarchy,
+  T as tokens,
+  l as typographicHierarchy,
+  Nr as useTrinityTokens,
+  Pr as validateAccessibility
 };