@matteoaliano/forest-ui 0.8.9 → 1.1.0

package/dist/theme.js

@@ -39,10 +39,7 @@ __export(theme_exports, {
   fontFamilyMono: () => fontFamilyMono,
   fontSize: () => fontSize,
   fontWeight: () => fontWeight,
-  forestAgencyPreset: () => forestAgencyPreset,
   forestAlkemyPlusPreset: () => forestAlkemyPlusPreset,
-  forestExternalPreset: () => forestExternalPreset,
-  forestInternalPreset: () => forestInternalPreset,
   forestTheme: () => forestTheme,
   forestThemeOptions: () => forestThemeOptions,
   getAvailablePresets: () => getAvailablePresets,
@@ -72,703 +69,87 @@ module.exports = __toCommonJS(theme_exports);
 // src/theme/buildTheme.ts
 var import_styles = require("@mui/material/styles");
 
-// src/theme/tokens.ts
-var violet = {
-  25: "#faf8ff",
-  50: "#f5f0ff",
-  100: "#ebe0ff",
-  200: "#d6c0ff",
-  300: "#b090ff",
-  400: "#9D5FFF",
-  500: "#7c4de6",
-  600: "#5b3acc",
-  700: "#3a1aad",
-  800: "#190a8a",
-  900: "#000066",
-  950: "#000033"
-};
-var magenta = {
-  25: "#fff8fd",
-  50: "#fff0fa",
-  100: "#ffe0f5",
-  200: "#ffc0eb",
-  300: "#ff90d8",
-  400: "#FF78F3",
-  500: "#e650d4",
-  600: "#cc28b5",
-  700: "#a3008c",
-  800: "#7a0066",
-  900: "#520044",
-  950: "#290022"
-};
-var gray = {
-  25: "#fdfcfc",
-  50: "#faf9f8",
-  100: "#f5f3f1",
-  200: "#e8e5e3",
-  300: "#d8d8dc",
-  400: "#a0a0a6",
-  500: "#71717a",
-  600: "#52525b",
-  700: "#3f3f46",
-  800: "#27272a",
-  900: "#18181b",
-  950: "#09090b"
-};
-var red = {
-  25: "#fff8f7",
-  50: "#fff0ee",
-  100: "#ffe0dd",
-  200: "#ffc0bb",
-  300: "#ff9090",
-  400: "#FF2821",
-  500: "#e61a1a",
-  600: "#cc1010",
-  700: "#a30808",
-  800: "#7a0000",
-  900: "#520000",
-  950: "#290000"
-};
-var misc = {
-  teal: {
-    25: "#f6fefc",
-    50: "#f0fdf9",
-    100: "#ccfbef",
-    200: "#99f6e0",
-    300: "#5fe9d0",
-    400: "#2ed3b7",
-    500: "#15b79e",
-    600: "#0e9384",
-    700: "#107569",
-    800: "#125d56",
-    900: "#134e48",
-    950: "#0a2926"
-  },
-  orange: {
-    25: "#fefaf5",
-    50: "#fef6ee",
-    100: "#fdead7",
-    200: "#f9dbaf",
-    300: "#f7b27a",
-    400: "#f38744",
-    500: "#ef6820",
-    600: "#e04f16",
-    700: "#b93815",
-    800: "#932f19",
-    900: "#772917",
-    950: "#511c10"
-  },
-  purple: {
-    25: "#fafaff",
-    50: "#f4f3ff",
-    100: "#ebe9fe",
-    200: "#d9d6fe",
-    300: "#bdb4fe",
-    400: "#9b8afb",
-    500: "#7a5af8",
-    600: "#6938ef",
-    700: "#5925dc",
-    800: "#4a1fb8",
-    900: "#3e1c96",
-    950: "#27115f"
-  },
-  pink: {
-    25: "#fef6fb",
-    50: "#fdf2fa",
-    100: "#fce7f6",
-    200: "#fcceee",
-    300: "#faa7e0",
-    400: "#f670c7",
-    500: "#ee46bc",
-    600: "#dd2590",
-    700: "#c11574",
-    800: "#9e165f",
-    900: "#851651",
-    950: "#4e0d30"
-  },
-  fuchsia: {
-    25: "#fefaff",
-    50: "#fdf4ff",
-    100: "#fbe8ff",
-    200: "#f6d0fe",
-    300: "#eeaafd",
-    400: "#e478fa",
-    500: "#d444f1",
-    600: "#ba24d5",
-    700: "#9f1ab1",
-    800: "#821890",
-    900: "#6f1877",
-    950: "#47104c"
-  },
-  orangeDark: {
-    25: "#fff9f5",
-    50: "#fff4ed",
-    100: "#ffe6d5",
-    200: "#ffd6ae",
-    300: "#ff9c66",
-    400: "#ff692e",
-    500: "#ff4405",
-    600: "#e62e05",
-    700: "#bc1b06",
-    800: "#97180c",
-    900: "#771a0d",
-    950: "#57130a"
-  },
-  green: {
-    25: "#f6fef9",
-    50: "#edfcf2",
-    100: "#d3f8df",
-    200: "#aaf0c4",
-    300: "#73e2a3",
-    400: "#3ccb7f",
-    500: "#16b364",
-    600: "#099250",
-    700: "#087443",
-    800: "#095c37",
-    900: "#084c2e",
-    950: "#052e1c"
-  },
-  indigo: {
-    25: "#f5f8ff",
-    50: "#eef4ff",
-    100: "#e0eaff",
-    200: "#c7d7fe",
-    300: "#a4bcfd",
-    400: "#8098f9",
-    500: "#6172f3",
-    600: "#444ce7",
-    700: "#3538cd",
-    800: "#2d31a6",
-    900: "#2d3282",
-    950: "#1f235b"
-  },
-  rose: {
-    25: "#fff5f6",
-    50: "#fff1f3",
-    100: "#ffe4e8",
-    200: "#fecdd6",
-    300: "#fea3b4",
-    400: "#fd6f8e",
-    500: "#f63d68",
-    600: "#e31b54",
-    700: "#c01048",
-    800: "#a11043",
-    900: "#89123e",
-    950: "#510b24"
-  },
-  blueLight: {
-    25: "#f5fbff",
-    50: "#f0f9ff",
-    100: "#e0f2fe",
-    200: "#b9e6fe",
-    300: "#7cd4fd",
-    400: "#36bffa",
-    500: "#0ba5ec",
-    600: "#0086c9",
-    700: "#026aa2",
-    800: "#065986",
-    900: "#0b4a6f",
-    950: "#062c41"
-  },
-  cyan: {
-    25: "#f5feff",
-    50: "#ecfdff",
-    100: "#cff9fe",
-    200: "#a5f0fc",
-    300: "#67e3f9",
-    400: "#22ccee",
-    500: "#06aed4",
-    600: "#088ab2",
-    700: "#0e7090",
-    800: "#155b75",
-    900: "#164c63",
-    950: "#0d2d3a"
-  }
-};
-var base = {
-  white: "#ffffff",
-  black: "#000000",
-  transparent: "#ffffff00"
-};
-var error = {
-  25: "#fffbfa",
-  50: "#fef3f2",
-  100: "#fee4e2",
-  200: "#fecdca",
-  300: "#fda29b",
-  400: "#f97066",
-  500: "#f04438",
-  600: "#d92d20",
-  700: "#b42318",
-  800: "#912018",
-  900: "#7a271a",
-  950: "#55160c"
-};
-var warning = {
-  25: "#fffcf5",
-  50: "#fffaeb",
-  100: "#fef0c7",
-  200: "#fedf89",
-  300: "#fec84b",
-  400: "#fdb022",
-  500: "#f79009",
-  600: "#dc6803",
-  700: "#b54708",
-  800: "#93370d",
-  900: "#7a2e0e",
-  950: "#4e1d09"
-};
-var success = {
-  25: "#f6fef9",
-  50: "#ecfdf3",
-  100: "#dcfae6",
-  200: "#abefc6",
-  300: "#75e0a7",
-  400: "#47cd89",
-  500: "#17b26a",
-  600: "#079455",
-  700: "#067647",
-  800: "#085d3a",
-  900: "#074d31",
-  950: "#053321"
-};
-var info = {
-  25: "#f5faff",
-  50: "#eff8ff",
-  100: "#d1e9ff",
-  200: "#b2ddff",
-  300: "#84caff",
-  400: "#53b1fd",
-  500: "#2e90fa",
-  600: "#1570ef",
-  700: "#175cd3",
-  800: "#1849a9",
-  900: "#194185",
-  950: "#102a56"
-};
-var spacing = {
-  none: 0,
-  xxs: 2,
-  xs: 4,
-  sm: 6,
-  md: 8,
-  lg: 12,
-  xl: 16,
-  "2xl": 20,
-  "3xl": 24,
-  "4xl": 32,
-  "5xl": 40,
-  "6xl": 48,
-  "7xl": 64,
-  "8xl": 80,
-  "9xl": 96,
-  "10xl": 128,
-  "11xl": 160
-};
-var radius = {
-  none: 0,
-  xxs: 2,
-  xs: 4,
-  sm: 6,
-  md: 8,
-  lg: 10,
-  xl: 12,
-  "2xl": 16,
-  "3xl": 20,
-  "4xl": 24,
-  full: 9999
-};
-var shadows = {
-  xs: "0px 1px 2px 0px #1018280d",
-  sm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f",
-  md: "0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f",
-  lg: "0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808",
-  xl: "0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808",
-  "2xl": "0px 24px 48px -12px #1018282e",
-  "3xl": "0px 32px 64px -12px #10182824"
-};
-var focusRings = {
-  brand: "0px 0px 0px 4px #7c4de63d",
-  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #7c4de63d",
-  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #7c4de63d",
-  gray: "0px 0px 0px 4px #a0a0a624",
-  grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
-  grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
-  error: "0px 0px 0px 4px #f044383d",
-  errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
-};
-var fontFamily = '"Aeonik", sans-serif';
-var fontFamilyMono = '"Aeonik Mono", monospace';
-var fontSize = {
-  xxs: 11,
-  xs: 12,
-  sm: 14,
-  md: 16,
-  lg: 18,
-  xl: 20
-};
-var lineHeight = {
-  xxs: "16px",
-  xs: "18px",
-  sm: "20px",
-  md: "24px",
-  lg: "28px",
-  xl: "30px"
-};
-var fontWeight = {
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
-var display = {
-  "2xl": { fontSize: 72, lineHeight: "90px", letterSpacing: "-0.02em" },
-  xl: { fontSize: 60, lineHeight: "72px", letterSpacing: "-0.02em" },
-  lg: { fontSize: 48, lineHeight: "60px", letterSpacing: "-0.02em" },
-  md: { fontSize: 36, lineHeight: "44px", letterSpacing: "-0.02em" },
-  sm: { fontSize: 30, lineHeight: "38px" },
-  xs: { fontSize: 24, lineHeight: "32px" }
-};
-var container = {
-  maxWidthDesktop: 1280,
-  paddingDesktop: 32,
-  paddingMobile: 16
-};
-var widths = {
-  xxs: 320,
-  xs: 384,
-  sm: 480,
-  md: 560,
-  lg: 640,
-  xl: 768,
-  "2xl": 1024,
-  "3xl": 1280,
-  "4xl": 1440,
-  "5xl": 1600,
-  "6xl": 1920
-};
-var text = {
-  primary: gray[900],
-  secondary: gray[700],
-  secondaryHover: gray[800],
-  tertiary: gray[600],
-  tertiaryHover: gray[700],
-  quaternary: gray[500],
-  disabled: gray[500],
-  placeholder: gray[500],
-  placeholderSubtle: gray[300],
-  white: base.white,
-  brandPrimary: violet[900],
-  brandSecondary: violet[700],
-  brandTertiary: violet[600],
-  brandTertiaryAlt: violet[600],
-  primaryOnBrand: base.white,
-  secondaryOnBrand: violet[200],
-  tertiaryOnBrand: violet[200],
-  quaternaryOnBrand: violet[300],
-  errorPrimary: error[600],
-  warningPrimary: warning[600],
-  successPrimary: success[600]
-};
-var bg = {
-  primary: gray[50],
-  primaryAlt: gray[50],
-  primaryHover: gray[100],
-  primarySolid: gray[950],
-  secondary: base.white,
-  secondaryAlt: base.white,
-  secondarySubtle: gray[25],
-  secondaryHover: gray[50],
-  secondarySolid: gray[600],
-  tertiary: gray[100],
-  quaternary: gray[200],
-  active: gray[200],
-  disabled: gray[100],
-  disabledSubtle: gray[50],
-  overlay: gray[950],
-  brandPrimary: violet[50],
-  brandPrimaryAlt: violet[50],
-  brandSecondary: violet[100],
-  brandSolid: violet[600],
-  brandSolidHover: violet[700],
-  brandSection: violet[800],
-  brandSectionSubtle: violet[700],
-  errorPrimary: error[50],
-  errorSecondary: error[100],
-  errorSolid: error[600],
-  warningPrimary: warning[50],
-  warningSecondary: warning[100],
-  warningSolid: warning[600],
-  successPrimary: success[50],
-  successSecondary: success[100],
-  successSolid: success[600]
-};
-var fg = {
-  primary: gray[900],
-  secondary: gray[700],
-  secondaryHover: gray[800],
-  tertiary: gray[600],
-  tertiaryHover: gray[700],
-  quaternary: gray[500],
-  quaternaryHover: gray[600],
-  quinary: gray[400],
-  quinaryHover: gray[500],
-  senary: gray[300],
-  white: base.white,
-  disabled: gray[400],
-  disabledSubtle: gray[300],
-  brandPrimary: violet[600],
-  brandPrimaryAlt: violet[600],
-  brandSecondary: violet[500],
-  errorPrimary: error[600],
-  errorSecondary: error[500],
-  warningPrimary: warning[600],
-  warningSecondary: warning[500],
-  successPrimary: success[600],
-  successSecondary: success[500]
-};
-var border = {
-  primary: gray[300],
-  secondary: gray[200],
-  tertiary: gray[100],
-  disabled: gray[300],
-  disabledSubtle: gray[200],
-  brand: violet[300],
-  brandSolid: violet[600],
-  brandSolidAlt: violet[600],
-  error: error[300],
-  errorSolid: error[600]
-};
-var buttonColors = {
-  primary: {
-    bg: violet[600],
-    bgHover: violet[700],
-    fg: base.white,
-    fgHover: base.white,
-    border: violet[600],
-    borderHover: violet[700]
-  },
-  secondary: {
-    bg: gray[900],
-    bgHover: gray[950],
-    fg: base.white,
-    fgHover: base.white,
-    border: gray[900],
-    borderHover: gray[950]
-  },
-  secondaryColor: {
-    bg: base.white,
-    bgHover: violet[50],
-    fg: violet[700],
-    fgHover: violet[800],
-    border: violet[300],
-    borderHover: violet[300]
-  },
-  tertiary: {
-    fg: gray[600],
-    fgHover: gray[700],
-    bgHover: gray[50]
-  },
-  tertiaryColor: {
-    fg: violet[700],
-    fgHover: violet[800],
-    bgHover: violet[50]
-  },
-  primaryError: {
-    bg: error[600],
-    bgHover: error[700],
-    fg: base.white,
-    fgHover: base.white,
-    border: error[600],
-    borderHover: error[700]
-  },
-  secondaryError: {
-    bg: base.white,
-    bgHover: error[50],
-    fg: error[700],
-    fgHover: error[800],
-    border: error[300],
-    borderHover: error[300]
-  },
-  tertiaryError: {
-    fg: error[700],
-    fgHover: error[800],
-    bgHover: error[50]
-  }
-};
-var avatarColors = {
-  bg: gray[100],
-  contrastBorder: "#00000014",
-  profilePhotoBorder: base.white,
-  focusBorder: "#a0a0a624"
-};
-var breadcrumbColors = {
-  fg: gray[600],
-  fgHover: gray[700],
-  bgHover: gray[50],
-  brandBgHover: violet[50],
-  brandFgHover: violet[700],
-  iconFg: gray[500],
-  iconFgHover: gray[700],
-  brandIconFgHover: violet[700]
-};
-var iconColors = {
-  fgBrand: violet[600],
-  fgBrandOnBrand: violet[200],
-  featuredModernBorder: gray[200],
-  featuredLightFgBrand: violet[600],
-  featuredLightFgGray: gray[500],
-  featuredLightFgError: error[600],
-  featuredLightFgWarning: warning[600],
-  featuredLightFgSuccess: success[600],
-  featuredDarkFgBrand: base.white,
-  featuredDarkFgGray: base.white,
-  featuredDarkFgError: base.white,
-  featuredDarkFgWarning: base.white,
-  featuredDarkFgSuccess: base.white
-};
-var navColors = {
-  itemIconFg: gray[500],
-  itemIconFgActive: gray[700],
-  itemButtonIconFg: gray[500],
-  itemButtonIconFgActive: gray[700]
-};
-var sliderColors = {
-  handleBorder: violet[600],
-  handleBg: base.white
-};
-var toggleColors = {
-  buttonFgDisabled: gray[50]
-};
-var chartColors = {
-  axisFg: gray[100],
-  gridlineFg: gray[100],
-  labelFg: gray[600],
-  labelFgEmphasis: gray[700],
-  bg: base.white,
-  bgAlt: gray[50],
-  tooltipBg: gray[950],
-  tooltipFg: base.white,
-  crosshairFg: gray[500],
-  legendFg: text.tertiary,
-  series: [
-    { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
-    { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
-    { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
-    { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
-    { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
-    { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
-    { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
-    { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
-    { fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
-    { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
-    { fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
-    { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
-  ]
-};
-var alpha = {
-  white: {
-    10: "#ffffff1a",
-    20: "#ffffff33",
-    30: "#ffffff4d",
-    40: "#ffffff66",
-    50: "#ffffff80",
-    60: "#ffffff99",
-    70: "#ffffffb3",
-    80: "#ffffffcc",
-    90: "#ffffffe6",
-    100: "#ffffff"
-  },
-  black: {
-    10: "#0000001a",
-    20: "#00000033",
-    30: "#0000004d",
-    40: "#00000066",
-    50: "#00000080",
-    60: "#00000099",
-    70: "#000000b3",
-    80: "#000000cc",
-    90: "#000000e6",
-    100: "#000000"
-  }
-};
-
 // src/theme/palette.ts
-function buildPalette(tokens) {
-  var _a;
-  const { base: base2, error: error2, warning: warning2, success: success2, info: info3, text: text6, bg: bg6, fg: fg6, border: border6 } = tokens;
+function buildPalette(tokens2, mode = "light") {
+  const { base: base2, error: error2, warning: warning2, success: success2, info: info2, text: text4, bg: bg4, fg: fg4, border: border4 } = tokens2;
   return {
+    mode,
     primary: {
-      main: tokens.bg.brandSolid,
-      light: tokens.fg.brandPrimary,
-      dark: tokens.bg.brandSolidHover,
-      contrastText: tokens.base.white
+      main: tokens2.bg.brandSolid,
+      light: tokens2.fg.brandPrimary,
+      dark: tokens2.bg.brandSolidHover,
+      contrastText: tokens2.base.white
     },
     secondary: {
-      main: tokens.bg.secondarySolid,
-      light: tokens.fg.secondary,
-      dark: tokens.text.secondaryHover,
-      contrastText: tokens.base.white
+      main: tokens2.bg.secondarySolid,
+      light: tokens2.fg.secondary,
+      dark: tokens2.text.secondaryHover,
+      contrastText: tokens2.base.white
     },
     error: {
-      main: tokens.error[600],
-      light: tokens.error[300],
-      dark: tokens.error[700],
-      contrastText: tokens.base.white
+      main: tokens2.error[600],
+      light: tokens2.error[300],
+      dark: tokens2.error[700],
+      contrastText: tokens2.base.white
     },
     warning: {
-      main: tokens.warning[600],
-      light: tokens.warning[300],
-      dark: tokens.warning[700],
-      contrastText: tokens.base.white
+      main: tokens2.warning[600],
+      light: tokens2.warning[300],
+      dark: tokens2.warning[700],
+      contrastText: tokens2.base.white
     },
     success: {
-      main: tokens.success[600],
-      light: tokens.success[300],
-      dark: tokens.success[700],
-      contrastText: tokens.base.white
+      main: tokens2.success[600],
+      light: tokens2.success[300],
+      dark: tokens2.success[700],
+      contrastText: tokens2.base.white
     },
     info: {
-      main: tokens.info[600],
-      light: tokens.info[300],
-      dark: tokens.info[700],
-      contrastText: tokens.base.white
+      main: tokens2.info[600],
+      light: tokens2.info[300],
+      dark: tokens2.info[700],
+      contrastText: tokens2.base.white
     },
     background: {
-      default: bg6.primary,
-      paper: bg6.secondary
+      default: bg4.primary,
+      paper: bg4.secondary
     },
-    text: {
-      primary: text6.primary,
-      secondary: text6.secondary,
-      disabled: text6.disabled,
-      placeholder: text6.placeholder
-    },
-    divider: border6.secondary,
+    // Spread the full forest text scale so every key gets a CSS var; MUI's
+    // own components still read primary/secondary/disabled from here.
+    text: { ...text4 },
+    divider: border4.secondary,
     action: {
-      active: fg6.tertiary,
-      hover: bg6.primaryHover,
-      selected: bg6.brandPrimary,
-      disabled: fg6.disabled,
-      disabledBackground: bg6.disabled
-    },
-    chart: (_a = tokens.chartColors) != null ? _a : chartColors,
-    ...tokens.highlight && {
+      active: fg4.tertiary,
+      hover: bg4.primaryHover,
+      selected: bg4.brandPrimary,
+      disabled: fg4.disabled,
+      disabledBackground: bg4.disabled
+    },
+    chart: tokens2.chartColors,
+    bg: tokens2.bg,
+    fg: tokens2.fg,
+    border: tokens2.border,
+    buttonColors: tokens2.buttonColors,
+    sliderColors: tokens2.sliderColors,
+    avatarColors: tokens2.avatarColors,
+    breadcrumbColors: tokens2.breadcrumbColors,
+    navColors: tokens2.navColors,
+    ...tokens2.highlight && {
       highlight: {
-        main: tokens.highlight[600],
-        light: tokens.highlight[300],
-        dark: tokens.highlight[700],
-        contrastText: tokens.base.white
+        main: tokens2.highlight[600],
+        light: tokens2.highlight[300],
+        dark: tokens2.highlight[700],
+        contrastText: tokens2.base.white
       }
     }
   };
 }
 
 // src/theme/typography.ts
-function buildTypography(tokens) {
+function buildTypography(tokens2) {
   var _a, _b, _c, _d;
-  const { fontFamily: fontFamily2, display: display2, fontSize: fontSize2, lineHeight: lineHeight2, fontWeight: fontWeight2, letterSpacing: letterSpacing2 } = tokens;
-  const ls = letterSpacing2 != null ? letterSpacing2 : {};
+  const { fontFamily: fontFamily2, display: display2, fontSize: fontSize2, lineHeight: lineHeight2, fontWeight: fontWeight2, letterSpacing: letterSpacing3 } = tokens2;
+  const ls = letterSpacing3 != null ? letterSpacing3 : {};
   return {
     fontFamily: fontFamily2,
     fontWeightRegular: fontWeight2.regular,
@@ -859,8 +240,8 @@ function buildTypography(tokens) {
 }
 
 // src/theme/shadows.ts
-function buildShadows(tokens) {
-  const tokenShadows = tokens.shadows;
+function buildShadows(tokens2) {
+  const tokenShadows = tokens2.shadows;
   return [
     "none",
     // 0
@@ -916,46 +297,110 @@ function buildShadows(tokens) {
 }
 
 // src/theme/components.ts
-function buildComponents(tokens) {
+function buildComponents(tokens2) {
   const {
     base: base2,
     error: error2,
     warning: warning2,
     success: success2,
-    info: info3,
-    highlight: highlight2,
-    radius: radius6,
-    focusRings: focusRings6,
+    info: info2,
+    highlight: highlight3,
+    radius: radius4,
+    focusRings: focusRings4,
     shadows: tokenShadows,
-    text: text6,
-    bg: bg6,
-    fg: fg6,
-    border: border6,
-    buttonColors: buttonColors6,
-    sliderColors: sliderColors6,
-    avatarColors: avatarColors6,
-    breadcrumbColors: breadcrumbColors6
-  } = tokens;
+    text: text4,
+    bg: bg4,
+    fg: fg4,
+    border: border4,
+    buttonColors: buttonColors4,
+    sliderColors: sliderColors4,
+    avatarColors: avatarColors3,
+    breadcrumbColors: breadcrumbColors4
+  } = tokens2;
   const containedFill = {
-    backgroundColor: buttonColors6.primary.bg,
-    color: buttonColors6.primary.fg,
+    backgroundColor: buttonColors4.primary.bg,
+    color: buttonColors4.primary.fg,
     "&:hover": {
-      backgroundColor: buttonColors6.primary.bgHover
+      backgroundColor: buttonColors4.primary.bgHover
     }
   };
   const outlinedFill = {
-    borderColor: buttonColors6.secondaryColor.border,
-    color: buttonColors6.secondaryColor.fg,
+    borderColor: buttonColors4.secondaryColor.border,
+    color: buttonColors4.secondaryColor.fg,
     "&:hover": {
       // Darken the whole outlined button on hover via brightness (< 1) — single
       // mechanism, no separate border-color change. 0.97 is a barely-there darken.
+      // No-tint is the spec: suppress MUI's ~4% --variant-outlinedBg hover tint
+      // so the ButtonGroup/IconButton outlined replicas match exactly.
+      backgroundColor: "transparent",
       filter: "brightness(0.97)"
     }
   };
+  const fabFill = {
+    ...containedFill,
+    "&:hover": {
+      backgroundColor: buttonColors4.primary.bgHover,
+      color: buttonColors4.primary.fgHover
+    }
+  };
   const textFill = {
-    color: buttonColors6.tertiaryColor.fg,
+    color: buttonColors4.tertiaryColor.fg,
     "&:hover": {
-      backgroundColor: buttonColors6.tertiaryColor.bgHover
+      backgroundColor: buttonColors4.tertiaryColor.bgHover
+    }
+  };
+  const bevelHover = {
+    borderTopWidth: 4,
+    borderBottomWidth: 1,
+    borderTopLeftRadius: radius4.lg,
+    borderTopRightRadius: radius4.lg,
+    borderBottomLeftRadius: radius4.md,
+    borderBottomRightRadius: radius4.md
+  };
+  const bevelPress = {
+    // Snap the press faster than the 300ms hover flip so it feels tactile.
+    transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
+    borderTopWidth: 1,
+    borderTopLeftRadius: radius4.md,
+    borderTopRightRadius: radius4.md,
+    opacity: 0.75
+  };
+  const bevel3D = {
+    position: "relative",
+    overflow: "hidden",
+    transition: "filter 300ms ease, border-width 300ms ease, border-radius 300ms ease, opacity 300ms ease, background-color 300ms ease",
+    borderStyle: "solid",
+    borderTopWidth: 1,
+    borderRightWidth: 1,
+    borderLeftWidth: 1,
+    borderBottomWidth: 4,
+    borderBottomLeftRadius: radius4.lg,
+    borderBottomRightRadius: radius4.lg,
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      left: 0,
+      top: "-150%",
+      width: "100%",
+      height: 5,
+      borderRadius: 4,
+      backgroundColor: "currentColor",
+      boxShadow: "0 0 24px 4px currentColor",
+      // 0.3 matches MuiButton's contained sweep exactly — the consts and the
+      // Button/Fab inline copies must not drift.
+      opacity: 0.3,
+      filter: "blur(2px)",
+      pointerEvents: "none",
+      transition: "top 500ms ease-in-out"
+    },
+    "&:hover": bevelHover,
+    "&:hover::before": {
+      top: "150%"
+    },
+    "&:active": bevelPress,
+    "@media (prefers-reduced-motion: reduce)": {
+      transition: "none",
+      "&::before": { display: "none" }
     }
   };
   return {
@@ -978,15 +423,15 @@ function buildComponents(tokens) {
         // mirrors the forest-web Button. Colors are untouched — the bevel and
         // sweep use translucent `currentColor` so they adapt per variant.
         // Applied to `contained` + `outlined`; `text` keeps its flat styling.
-        root: ({ ownerState }) => {
+        root: ({ ownerState, theme }) => {
           const interactive = ownerState.variant !== "text";
           const isContained = ownerState.variant === "contained";
           const isOutlined = ownerState.variant === "outlined";
           const sweepColor = isOutlined ? "color-mix(in srgb, currentColor 45%, #fff)" : "currentColor";
-          const colorScales = { error: error2, warning: warning2, success: success2, info: info3 };
+          const colorScales = { error: error2, warning: warning2, success: success2, info: info2 };
           const faceScale = ownerState.color ? colorScales[ownerState.color] : void 0;
           return {
-            borderRadius: radius6.md,
+            borderRadius: radius4.md,
             fontWeight: 600,
             boxShadow: tokenShadows.xs,
             height: 32,
@@ -994,7 +439,7 @@ function buildComponents(tokens) {
             fontSize: 14,
             lineHeight: "20px",
             "&:focus-visible": {
-              boxShadow: focusRings6.brandShadowXs
+              boxShadow: focusRings4.brandShadowXs
             },
             ...interactive && {
               position: "relative",
@@ -1008,15 +453,15 @@ function buildComponents(tokens) {
               // Round the thick-bevel side more than the rest so the inner
               // surface isn't squared off. Follows the bevel: bottom at rest,
               // top on hover.
-              borderBottomLeftRadius: radius6.lg,
-              borderBottomRightRadius: radius6.lg,
+              borderBottomLeftRadius: radius4.lg,
+              borderBottomRightRadius: radius4.lg,
               // Contained buttons have no border of their own — give them a
               // translucent bevel. Outlined keeps its own border color.
               ...isContained && {
                 // Greyscale bevel — visible on both the charcoal face and a
                 // light page (white washed out on hover). Semantic colors keep
                 // their in-hue bevel.
-                borderColor: faceScale ? faceScale[700] : gray[600]
+                borderColor: faceScale ? faceScale[700] : fg4.tertiary
               },
               "&::before": {
                 content: '""',
@@ -1036,18 +481,23 @@ function buildComponents(tokens) {
               "&:hover": {
                 borderTopWidth: 4,
                 borderBottomWidth: 1,
-                borderTopLeftRadius: radius6.lg,
-                borderTopRightRadius: radius6.lg,
-                borderBottomLeftRadius: radius6.md,
-                borderBottomRightRadius: radius6.md,
+                borderTopLeftRadius: radius4.lg,
+                borderTopRightRadius: radius4.lg,
+                borderBottomLeftRadius: radius4.md,
+                borderBottomRightRadius: radius4.md,
                 // One step lighter than the default bevel (60% → 70%) so it
                 // stays visible against the brightened face on hover.
                 ...isContained && {
+                  // Light mode: the face is dark (charcoal/vivid), so a
+                  // brightness lift reads as a hover. Dark mode: the face is
+                  // already light — brightness(1.5) blows it out to near-white
+                  // and swallows the top bevel, so drop the lift and let the
+                  // bgHover darken provide the feedback instead.
                   filter: "brightness(1.5)",
-                  // Charcoal (non-semantic) keeps its default gray[600] border —
-                  // the brightness lift lightens it on hover. Semantic colors
-                  // darken to [900] so their bevel survives the brightness.
-                  ...faceScale && { borderColor: faceScale[900] }
+                  ...faceScale && { borderColor: faceScale[900] },
+                  ...theme.applyStyles("dark", {
+                    filter: "brightness(1)"
+                  })
                 }
               },
               "&:hover::before": {
@@ -1061,8 +511,8 @@ function buildComponents(tokens) {
                 // like a tactile click rather than a slow settle.
                 transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
                 borderTopWidth: 1,
-                borderTopLeftRadius: radius6.md,
-                borderTopRightRadius: radius6.md,
+                borderTopLeftRadius: radius4.md,
+                borderTopRightRadius: radius4.md,
                 opacity: 0.75
               },
               "@media (prefers-reduced-motion: reduce)": {
@@ -1085,51 +535,214 @@ function buildComponents(tokens) {
       }
     },
     // ─── Button Group ───────────────────────────────────────────────
+    // Variant alignment: each group variant renders its children EXACTLY like
+    // the standalone <Button> of the same variant (contained = charcoal fill /
+    // light-grey in dark; outlined = transparent + grey border; text = quiet).
+    // Forest <Button> children force variant="contained", so the outlined and
+    // text groups must repaint the face at group level; contained needs no
+    // repaint. Two group classes out-specify MuiButton's single variant class,
+    // and the `:not(.Mui-disabled)` guard keeps MUI's disabled styling winning.
     MuiButtonGroup: {
       defaultProps: {
         disableElevation: true
       },
       styleOverrides: {
         root: {
-          borderRadius: radius6.md
-        },
-        grouped: {
-          "&:not(:last-of-type)": {
-            borderRight: `1px solid ${buttonColors6.primary.borderHover}`
+          borderRadius: radius4.md,
+          // contained group → children already render as contained Buttons; only
+          // re-pin the bevel border color, which MUI's own grouped-contained
+          // default (palette grey) otherwise overrides away from the standalone
+          // Button's greyscale bevel.
+          "&.MuiButtonGroup-contained .MuiButtonGroup-grouped:not(.Mui-disabled)": {
+            borderColor: fg4.tertiary
+          },
+          // outlined group → the outlined-Button look (outlinedFill), including
+          // its lightened hover sweep (the forced-contained children would
+          // otherwise sweep at full currentColor strength).
+          "&.MuiButtonGroup-outlined .MuiButtonGroup-grouped:not(.Mui-disabled)": {
+            backgroundColor: "transparent",
+            color: buttonColors4.secondaryColor.fg,
+            borderColor: buttonColors4.secondaryColor.border,
+            "&::before": {
+              backgroundColor: "color-mix(in srgb, currentColor 45%, #fff)",
+              boxShadow: "0 0 24px 4px color-mix(in srgb, currentColor 45%, #fff)",
+              opacity: 0.2,
+              filter: "blur(3px)"
+            },
+            "&:hover": {
+              backgroundColor: "transparent",
+              filter: "brightness(0.97)"
+            }
+          },
+          // text group → the quiet text-Button look: flatten the inherited
+          // bevel/sweep (incl. the contained hover brightness + radius flips),
+          // kill the :active press-dim, keep the brand focus ring reachable.
+          "&.MuiButtonGroup-text .MuiButtonGroup-grouped:not(.Mui-disabled)": {
+            backgroundColor: "transparent",
+            color: buttonColors4.tertiaryColor.fg,
+            borderWidth: 0,
+            borderRadius: radius4.md,
+            boxShadow: "none",
+            "&::before": { display: "none" },
+            "&:active": { opacity: 1 },
+            "&:hover": {
+              backgroundColor: buttonColors4.tertiaryColor.bgHover,
+              filter: "none"
+            },
+            "&:focus-visible": {
+              boxShadow: focusRings4.brandShadowXs
+            }
+          },
+          // Text-group divider, painted per orientation (child borders are 0).
+          "&.MuiButtonGroup-text.MuiButtonGroup-horizontal .MuiButtonGroup-grouped:not(.Mui-disabled):not(:last-of-type)": {
+            borderRight: `1px solid ${border4.secondary}`
+          },
+          "&.MuiButtonGroup-text.MuiButtonGroup-vertical .MuiButtonGroup-grouped:not(.Mui-disabled):not(:last-of-type)": {
+            borderBottom: `1px solid ${border4.secondary}`
           }
         }
+        // No `grouped` divider override: contained/outlined separation comes
+        // from the children's own (re-pinned) borders, same as standalone
+        // Buttons sitting side by side; the text group paints its own divider.
       }
     },
     // ─── IconButton ─────────────────────────────────────────────────
+    // Default (text) icon buttons stay bare. The forest IconButton wrapper can
+    // opt into `variant="contained" | "outlined"`, which adds the ForestIconButton
+    // class(es) — those get the same faux-3D bevel + press as <Button>.
     MuiIconButton: {
       styleOverrides: {
-        root: {
-          borderRadius: radius6.md,
+        root: ({ theme }) => ({
+          borderRadius: radius4.md,
           padding: 6,
           "& .MuiSvgIcon-root": {
             fontSize: 20
+          },
+          "&.ForestIconButton": {
+            ...bevel3D,
+            boxShadow: tokenShadows.xs,
+            "&:focus-visible": {
+              boxShadow: focusRings4.brandShadowXs
+            }
+          },
+          "&.ForestIconButton-contained": {
+            backgroundColor: buttonColors4.primary.bg,
+            color: buttonColors4.primary.fg,
+            borderColor: fg4.tertiary,
+            "&:hover": {
+              backgroundColor: buttonColors4.primary.bgHover,
+              // Light mode: dark face, brightness lift reads as hover. Dark
+              // mode: the face is already light — a lift blows out the top
+              // bevel, so drop it and let bgHover provide the feedback.
+              filter: "brightness(1.5)",
+              ...theme.applyStyles("dark", {
+                filter: "brightness(1)"
+              })
+            }
+          },
+          "&.ForestIconButton-outlined": {
+            backgroundColor: "transparent",
+            color: buttonColors4.secondaryColor.fg,
+            borderColor: buttonColors4.secondaryColor.border,
+            // Same lightened sweep as the outlined Button — full currentColor
+            // reads too dark on the light outlined face.
+            "&::before": {
+              backgroundColor: "color-mix(in srgb, currentColor 45%, #fff)",
+              boxShadow: "0 0 24px 4px color-mix(in srgb, currentColor 45%, #fff)",
+              opacity: 0.2,
+              filter: "blur(3px)"
+            },
+            "&:hover": {
+              backgroundColor: "transparent",
+              filter: "brightness(0.97)"
+            }
+          },
+          // Disabled parity with the Button variants: MUI IconButton's own
+          // .Mui-disabled (transparent bg + action.disabled icon) ties with the
+          // variant faces at (0,2,0) and loses on insertion order — pin the
+          // disabled treatment one class higher.
+          "&.ForestIconButton-contained.Mui-disabled": {
+            backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
+            color: (theme.vars || theme).palette.action.disabled
+          },
+          "&.ForestIconButton-outlined.Mui-disabled": {
+            color: (theme.vars || theme).palette.action.disabled,
+            borderColor: border4.disabled
           }
-        }
+        })
       }
     },
     // ─── FAB ────────────────────────────────────────────────────────
+    // A Fab is a round contained Button: same faux-3D bevel, light sweep,
+    // brightness lift, and press. The border radii are left untouched so the
+    // circular / extended silhouettes survive the bevel flip (no radius swap
+    // like Button/IconButton do on their rounded corners).
     MuiFab: {
       styleOverrides: {
-        root: {
-          boxShadow: tokenShadows.md,
+        root: ({ theme, ownerState }) => ({
+          // `default` has no dedicated slot class, so fold it into root —
+          // it renders the same contained fill as primary/secondary.
+          ...(!ownerState.color || ownerState.color === "default") && fabFill,
+          position: "relative",
+          overflow: "hidden",
+          boxShadow: tokenShadows.xs,
+          transition: "filter 300ms ease, border-width 300ms ease, opacity 300ms ease, background-color 300ms ease",
+          borderStyle: "solid",
+          borderColor: fg4.tertiary,
+          borderTopWidth: 1,
+          borderRightWidth: 1,
+          borderLeftWidth: 1,
+          borderBottomWidth: 4,
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            top: "-150%",
+            width: "100%",
+            height: 5,
+            borderRadius: 4,
+            backgroundColor: "currentColor",
+            boxShadow: "0 0 24px 4px currentColor",
+            opacity: 0.3,
+            filter: "blur(2px)",
+            pointerEvents: "none",
+            transition: "top 500ms ease-in-out"
+          },
           "&:hover": {
-            boxShadow: tokenShadows.lg
+            boxShadow: tokenShadows.xs,
+            borderTopWidth: 4,
+            borderBottomWidth: 1,
+            // Light mode: dark face, brightness lift reads as hover. Dark
+            // mode: the face is already light — a lift blows out the top
+            // bevel, so drop it and let bgHover provide the feedback.
+            filter: "brightness(1.5)",
+            ...theme.applyStyles("dark", {
+              filter: "brightness(1)"
+            })
+          },
+          "&:hover::before": {
+            top: "150%"
+          },
+          "&:active": {
+            transition: "border-width 120ms ease, opacity 120ms ease",
+            boxShadow: tokenShadows.xs,
+            borderTopWidth: 1,
+            opacity: 0.75
           },
           "&:focus-visible": {
-            boxShadow: focusRings6.brandShadowSm
-          }
-        },
-        primary: {
-          backgroundColor: buttonColors6.primary.bg,
-          "&:hover": {
-            backgroundColor: buttonColors6.primary.bgHover
+            boxShadow: focusRings4.brandShadowSm
+          },
+          "@media (prefers-reduced-motion: reduce)": {
+            transition: "none",
+            "&::before": { display: "none" }
           }
-        }
+        }),
+        // Greyscale parity with Button: primary and secondary both render the
+        // contained charcoal fill. MUI defaults the icon color to
+        // contrastText (always white); in dark the Fab face is light, so pin
+        // the mode-aware fg (dark icon).
+        primary: fabFill,
+        secondary: fabFill
       }
     },
     // ─── TextField / Input ──────────────────────────────────────────
@@ -1151,8 +764,8 @@ function buildComponents(tokens) {
       styleOverrides: {
         input: {
           "&::placeholder": {
-            color: text6.placeholder,
-            WebkitTextFillColor: text6.placeholder,
+            color: text4.placeholder,
+            WebkitTextFillColor: text4.placeholder,
             fontWeight: 400,
             opacity: 1
           }
@@ -1162,33 +775,33 @@ function buildComponents(tokens) {
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          borderRadius: radius6.md,
+          borderRadius: radius4.md,
           boxShadow: tokenShadows.xs,
           "&&:hover:not(.Mui-focused):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline": {
-            borderColor: border6.brand
+            borderColor: border4.brand
           },
           "&&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: border6.brandSolid,
+            borderColor: border4.brandSolid,
             borderWidth: 1,
             boxShadow: "none"
           },
           "&&.Mui-error:not(.Mui-focused) .MuiOutlinedInput-notchedOutline": {
-            borderColor: border6.error
+            borderColor: border4.error
           },
           "&&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: border6.errorSolid,
+            borderColor: border4.errorSolid,
             boxShadow: "none"
           },
           "& .MuiInputAdornment-root .MuiIconButton-root": {
-            color: fg6.quaternary,
+            color: fg4.quaternary,
             "&:hover": {
-              backgroundColor: bg6.primaryHover,
-              color: fg6.brandPrimary
+              backgroundColor: bg4.primaryHover,
+              color: fg4.brandPrimary
             }
           }
         },
         notchedOutline: {
-          borderColor: border6.primary
+          borderColor: border4.primary
         },
         input: {
           padding: "6px 12px",
@@ -1200,12 +813,12 @@ function buildComponents(tokens) {
     MuiFormLabel: {
       styleOverrides: {
         root: {
-          color: text6.placeholder,
+          color: text4.placeholder,
           "&.Mui-focused": {
-            color: text6.placeholder
+            color: text4.placeholder
           },
           "&.Mui-error": {
-            color: text6.errorPrimary
+            color: text4.errorPrimary
           }
         }
       }
@@ -1215,12 +828,12 @@ function buildComponents(tokens) {
         root: {
           fontSize: 14,
           fontWeight: 500,
-          color: text6.placeholder,
+          color: text4.placeholder,
           "&.Mui-focused": {
-            color: text6.placeholder
+            color: text4.placeholder
           },
           "&.Mui-error": {
-            color: text6.errorPrimary
+            color: text4.errorPrimary
           }
         },
         outlined: {
@@ -1239,7 +852,7 @@ function buildComponents(tokens) {
           marginTop: 6,
           marginLeft: 0,
           "&.Mui-error": {
-            color: text6.errorPrimary
+            color: text4.errorPrimary
           }
         }
       }
@@ -1269,43 +882,45 @@ function buildComponents(tokens) {
           }
         },
         icon: {
-          color: text6.placeholder,
+          color: text4.placeholder,
           right: 8
         }
       }
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: {
-          borderRadius: radius6.md,
+        root: ({ theme }) => ({
+          borderRadius: radius4.md,
           padding: "6px 8px",
           gap: 4,
           "&:hover": {
-            backgroundColor: bg6.primaryHover
+            backgroundColor: bg4.primaryHover,
+            ...theme.applyStyles("dark", { backgroundColor: bg4.active })
           },
+          // Selected: keep the label color, mark it with weight + a neutral
+          // (non-violet) background. bg.active adapts per scheme.
           "&.Mui-selected": {
-            backgroundColor: info3[50],
-            color: info3[700],
-            // ListItemText primary hardcodes its own color (text.secondary),
-            // which beats the inherited MenuItem color — re-point it here so
-            // selected labels actually take the info color (e.g. MultiSelect).
+            backgroundColor: bg4.active,
+            fontWeight: 600,
+            // ListItemText primary hardcodes its own color/weight — re-point
+            // weight here so selected labels bold (e.g. MultiSelect).
             "& .MuiListItemText-primary": {
-              color: info3[700]
+              fontWeight: 600
             },
             "&:hover": {
-              backgroundColor: info3[100]
+              backgroundColor: bg4.active
             }
           }
-        }
+        })
       }
     },
     // ─── Autocomplete ───────────────────────────────────────────────
     MuiAutocomplete: {
       styleOverrides: {
         paper: {
-          borderRadius: radius6.md,
+          borderRadius: radius4.md,
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${border6.secondary}`,
+          border: `1px solid ${border4.secondary}`,
           marginTop: 4
         },
         inputRoot: {
@@ -1321,15 +936,12 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           padding: "6px 12px",
-          "&.Mui-focused": {
-            backgroundColor: bg6.primaryHover
-          },
+          // Hover + selected backgrounds come from MUI's theme-aware action
+          // overlays (a light overlay on dark, so they stay visible — a solid
+          // dark-grey tier here reads as "no hover"). Selected keeps the text
+          // color (no violet) and is marked with weight only.
           '&[aria-selected="true"]': {
-            backgroundColor: info3[50],
-            color: info3[700]
-          },
-          '&[aria-selected="true"].Mui-focused': {
-            backgroundColor: info3[100]
+            fontWeight: 600
           }
         },
         listbox: {
@@ -1344,28 +956,28 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          color: border6.primary,
-          borderRadius: radius6.xs,
+          color: border4.primary,
+          borderRadius: radius4.xs,
           padding: 0,
           width: 20,
           height: 20,
           "&:hover": {
             backgroundColor: "transparent",
-            color: fg6.brandPrimary
+            color: fg4.brandPrimary
           },
           "&.Mui-checked": {
-            color: fg6.brandPrimary
+            color: fg4.brandPrimary
           },
           "&.Mui-checked:hover": {
-            color: buttonColors6.primary.bgHover
+            color: buttonColors4.primary.bgHover
           },
           "&.Mui-focusVisible": {
             outline: "none",
-            boxShadow: focusRings6.brand,
-            borderRadius: radius6.xs
+            boxShadow: focusRings4.brand,
+            borderRadius: radius4.xs
           },
           "&.Mui-disabled": {
-            color: border6.primary
+            color: border4.primary
           }
         }
       }
@@ -1377,25 +989,25 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          color: border6.primary,
+          color: border4.primary,
           padding: 0,
           "&:hover": {
             backgroundColor: "transparent",
-            color: fg6.brandPrimary
+            color: fg4.brandPrimary
           },
           "&.Mui-checked": {
-            color: fg6.brandPrimary
+            color: fg4.brandPrimary
           },
           "&.Mui-checked:hover": {
-            color: buttonColors6.primary.bgHover
+            color: buttonColors4.primary.bgHover
           },
           "&.Mui-focusVisible": {
             outline: "none",
-            boxShadow: focusRings6.brand,
-            borderRadius: radius6.full
+            boxShadow: focusRings4.brand,
+            borderRadius: radius4.full
           },
           "&.Mui-disabled": {
-            color: border6.primary
+            color: border4.primary
           }
         }
       }
@@ -1415,20 +1027,23 @@ function buildComponents(tokens) {
           padding: 2,
           "&.Mui-checked": {
             transform: "translateX(20px)",
-            color: fg6.white,
+            // Thumb sits on the brand track. In dark the track is light-grey, so
+            // a white thumb vanished — use the mode-aware on-brand fg (dark in
+            // dark, white in light).
+            color: buttonColors4.primary.fg,
             "& + .MuiSwitch-track": {
-              backgroundColor: fg6.brandPrimary,
+              backgroundColor: fg4.brandPrimary,
               opacity: 1
             }
           },
           "&.Mui-checked:hover + .MuiSwitch-track": {
-            backgroundColor: buttonColors6.primary.bgHover
+            backgroundColor: buttonColors4.primary.bgHover
           },
           "&.Mui-focusVisible .MuiSwitch-thumb": {
-            boxShadow: focusRings6.brand
+            boxShadow: focusRings4.brand
           },
           "&.Mui-disabled .MuiSwitch-thumb": {
-            color: bg6.disabled
+            color: bg4.disabled
           },
           "&.Mui-disabled + .MuiSwitch-track": {
             opacity: 0.5
@@ -1440,60 +1055,122 @@ function buildComponents(tokens) {
           boxShadow: "0px 1px 2px 0px #1018280d"
         },
         track: {
-          borderRadius: radius6.full,
-          backgroundColor: border6.secondary,
-          opacity: 1
+          borderRadius: radius4.full,
+          backgroundColor: border4.secondary,
+          opacity: 1,
+          // Faux-3D bottom edge (button-family cue), adapted for a pill: an
+          // inset bottom shadow instead of a real border, so the sliding thumb
+          // never collides with it. Reads on both light and dark tracks.
+          boxShadow: "inset 0 -3px 0 0 rgba(0,0,0,0.18)"
         }
       }
     },
     // ─── Toggle Button ─────────────────────────────────────────────
+    // Aligned with the contained <Button>: same face, same faux-3D bevel and
+    // hover flip. Selected = the pressed Button held down — bevel collapsed,
+    // dimmed, slightly inset. A toggle is a button that stays pushed in.
     MuiToggleButton: {
       styleOverrides: {
-        root: {
-          borderColor: border6.primary,
-          color: text6.secondary,
+        root: ({ theme }) => ({
+          ...bevel3D,
+          ...containedFill,
+          borderColor: fg4.tertiary,
           fontSize: 14,
           fontWeight: 600,
           lineHeight: "20px",
           height: 32,
           padding: "6px 12px",
           textTransform: "none",
+          boxShadow: tokenShadows.xs,
           "&:hover": {
-            backgroundColor: bg6.primaryHover,
-            borderColor: border6.primary
+            ...bevelHover,
+            backgroundColor: buttonColors4.primary.bgHover,
+            // Same mode split as the contained Button: the brightness lift
+            // reads on the dark light-mode face but blows out the light
+            // dark-mode face.
+            filter: "brightness(1.5)",
+            ...theme.applyStyles("dark", {
+              filter: "brightness(1)"
+            })
           },
           "&.Mui-selected": {
-            backgroundColor: bg6.brandPrimary,
-            color: buttonColors6.secondaryColor.fg,
-            borderColor: border6.brandSolid,
+            backgroundColor: buttonColors4.primary.bg,
+            color: buttonColors4.primary.fg,
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            borderTopLeftRadius: radius4.md,
+            borderTopRightRadius: radius4.md,
+            borderBottomLeftRadius: radius4.md,
+            borderBottomRightRadius: radius4.md,
+            opacity: 0.75,
+            boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.3)",
+            "&::before": { display: "none" },
+            // Stays pressed on hover — no bevel re-raise, no brightness lift.
             "&:hover": {
-              backgroundColor: bg6.brandSecondary
+              backgroundColor: buttonColors4.primary.bg,
+              filter: "none",
+              borderTopWidth: 1,
+              borderBottomWidth: 1,
+              borderTopLeftRadius: radius4.md,
+              borderTopRightRadius: radius4.md
+            }
+          },
+          // Disabled parity with the disabled contained Button: greyed face +
+          // disabled fg, bevel geometry retained. MUI's own .Mui-disabled rule
+          // only swaps color and border-shorthands the bevel away — and ties
+          // with .Mui-selected at (0,2,0) — so this block sits AFTER selected
+          // to win both.
+          "&.Mui-disabled": {
+            backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
+            color: (theme.vars || theme).palette.action.disabled,
+            borderStyle: "solid",
+            borderColor: fg4.tertiary,
+            borderTopWidth: 1,
+            borderRightWidth: 1,
+            borderLeftWidth: 1,
+            borderBottomWidth: 4,
+            "&::before": { display: "none" },
+            // selected+disabled keeps the pressed-in cue, greyed.
+            "&.Mui-selected": {
+              borderBottomWidth: 1,
+              boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.15)"
             }
           },
           "&:focus-visible": {
-            boxShadow: focusRings6.brandShadowXs
+            boxShadow: focusRings4.brandShadowXs
           }
-        }
+        })
       }
     },
     MuiToggleButtonGroup: {
       styleOverrides: {
         root: {
-          borderRadius: radius6.md,
+          borderRadius: radius4.md,
           overflow: "hidden"
         },
+        // The child ToggleButton's selected/hover/active rules set per-corner
+        // radii and win insertion-order ties at (0,2,0), which would round the
+        // internal seam corners of a segmented control. Re-pin every state at
+        // higher specificity: seams stay square, only outer corners round.
         grouped: {
           borderRadius: 0,
+          "&:hover, &:active, &.Mui-selected": {
+            borderRadius: 0
+          },
           "&:not(:first-of-type)": {
             marginLeft: -1
           },
           "&:first-of-type": {
-            borderTopLeftRadius: radius6.md,
-            borderBottomLeftRadius: radius6.md
+            "&, &:hover, &:active, &.Mui-selected": {
+              borderTopLeftRadius: radius4.md,
+              borderBottomLeftRadius: radius4.md
+            }
           },
           "&:last-of-type": {
-            borderTopRightRadius: radius6.md,
-            borderBottomRightRadius: radius6.md
+            "&, &:hover, &:active, &.Mui-selected": {
+              borderTopRightRadius: radius4.md,
+              borderBottomRightRadius: radius4.md
+            }
           }
         }
       }
@@ -1502,8 +1179,8 @@ function buildComponents(tokens) {
     MuiDrawer: {
       styleOverrides: {
         paper: {
-          backgroundColor: bg6.primary,
-          borderRight: `1px solid ${border6.secondary}`
+          backgroundColor: bg4.primary,
+          borderRight: `1px solid ${border4.secondary}`
         }
       }
     },
@@ -1514,9 +1191,9 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius6.xl,
-          border: `1px solid ${border6.secondary}`,
-          backgroundColor: bg6.primary,
+          borderRadius: radius4.xl,
+          border: `1px solid ${border4.secondary}`,
+          backgroundColor: bg4.primary,
           boxShadow: tokenShadows.xs,
           overflow: "hidden"
         }
@@ -1563,35 +1240,35 @@ function buildComponents(tokens) {
           backgroundImage: "none"
         },
         rounded: {
-          borderRadius: radius6.lg
+          borderRadius: radius4.lg
         },
         elevation1: {
           boxShadow: tokenShadows.xs,
-          border: `1px solid ${border6.secondary}`
+          border: `1px solid ${border4.secondary}`
         },
         elevation2: {
           boxShadow: tokenShadows.sm,
-          border: `1px solid ${border6.secondary}`
+          border: `1px solid ${border4.secondary}`
         },
         elevation3: {
           boxShadow: tokenShadows.md,
-          border: `1px solid ${border6.secondary}`
+          border: `1px solid ${border4.secondary}`
         },
         elevation4: {
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${border6.secondary}`
+          border: `1px solid ${border4.secondary}`
         },
         elevation8: {
           boxShadow: tokenShadows.xl,
-          border: `1px solid ${border6.secondary}`
+          border: `1px solid ${border4.secondary}`
         },
         elevation16: {
           boxShadow: tokenShadows["2xl"],
-          border: `1px solid ${border6.secondary}`
+          border: `1px solid ${border4.secondary}`
         },
         elevation24: {
           boxShadow: tokenShadows["3xl"],
-          border: `1px solid ${border6.secondary}`
+          border: `1px solid ${border4.secondary}`
         }
       }
     },
@@ -1603,8 +1280,8 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          border: `1px solid ${border6.secondary}`,
-          borderRadius: radius6.lg,
+          border: `1px solid ${border4.secondary}`,
+          borderRadius: radius4.lg,
           "&:not(:last-child)": {
             marginBottom: 8
           },
@@ -1614,7 +1291,7 @@ function buildComponents(tokens) {
           "&.Mui-expanded": {
             margin: 0,
             marginBottom: 8,
-            borderRadius: radius6.lg
+            borderRadius: radius4.lg
           }
         }
       }
@@ -1626,7 +1303,7 @@ function buildComponents(tokens) {
           minHeight: 56,
           "&.Mui-expanded": {
             minHeight: 56,
-            borderBottom: `1px solid ${border6.secondary}`
+            borderBottom: `1px solid ${border4.secondary}`
           }
         },
         content: {
@@ -1652,8 +1329,8 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${border6.secondary}`,
-          backgroundColor: bg6.primary
+          borderBottom: `1px solid ${border4.secondary}`,
+          backgroundColor: bg4.primary
         }
       }
     },
@@ -1679,8 +1356,10 @@ function buildComponents(tokens) {
         root: {
           minHeight: 48
         },
+        // Primary (brand) scale via varified tokens so it adapts per scheme:
+        // charcoal on light, light-grey on dark.
         indicator: {
-          backgroundColor: info3[600],
+          backgroundColor: bg4.brandSolid,
           height: 2
         }
       }
@@ -1695,14 +1374,16 @@ function buildComponents(tokens) {
           fontWeight: 600,
           lineHeight: "20px",
           textTransform: "none",
-          color: text6.tertiary,
-          borderRadius: `${radius6.md}px ${radius6.md}px 0 0`,
+          color: text4.tertiary,
+          borderRadius: `${radius4.md}px ${radius4.md}px 0 0`,
           "&:hover": {
-            backgroundColor: bg6.primaryHover
+            backgroundColor: bg4.primaryHover
           },
+          // Selected face uses brand bg/text tokens — light brand tint + dark
+          // text on light; dark-grey face + light text on dark.
           "&.Mui-selected": {
-            color: info3[700],
-            backgroundColor: info3[50]
+            color: text4.brandPrimary,
+            backgroundColor: bg4.brandPrimary
           }
         }
       }
@@ -1710,60 +1391,67 @@ function buildComponents(tokens) {
     // ─── Chip ───────────────────────────────────────────────────────
     MuiChip: {
       variants: [
-        ...highlight2 ? [
+        ...highlight3 ? [
           {
             props: { color: "highlight" },
             style: {
               "&.MuiChip-filled": {
-                backgroundColor: highlight2[600],
+                backgroundColor: highlight3[600],
                 color: base2.white,
-                "& .MuiChip-deleteIcon": { color: highlight2[200] }
+                "& .MuiChip-deleteIcon": { color: highlight3[200] }
               },
               "&.MuiChip-outlined": {
-                borderColor: highlight2[300],
-                color: highlight2[700],
-                "& .MuiChip-deleteIcon": { color: highlight2[400] }
+                borderColor: highlight3[300],
+                color: highlight3[700],
+                "& .MuiChip-deleteIcon": { color: highlight3[400] }
               }
             }
           }
         ] : []
       ],
       styleOverrides: {
+        // ponytail: single 20px chip size — sizeSmall/sizeMedium render identically
         root: {
-          borderRadius: radius6.md
+          borderRadius: radius4.md,
+          height: 20,
+          fontSize: 14,
+          lineHeight: "20px"
         },
         label: {
-          fontWeight: 500
+          fontWeight: 500,
+          paddingLeft: 6,
+          paddingRight: 6
         },
-        sizeSmall: {
-          fontSize: 12,
-          height: 20
+        icon: {
+          marginLeft: 6,
+          marginRight: -2
+          // 4px gap to label (label pads 6)
         },
-        sizeMedium: {
+        deleteIcon: {
           fontSize: 14,
-          height: 24,
-          "& .MuiChip-deleteIcon": { fontSize: 16 }
+          marginRight: 6,
+          marginLeft: -2
         },
         colorDefault: {
           "&.MuiChip-filled": {
-            backgroundColor: tokens.bg.secondaryHover,
-            color: tokens.fg.secondary,
-            "& .MuiChip-deleteIcon": { color: tokens.fg.quinary }
+            backgroundColor: tokens2.bg.secondaryHover,
+            color: tokens2.fg.secondary,
+            "& .MuiChip-deleteIcon": { color: tokens2.fg.quinary }
           }
         },
         colorPrimary: {
           "&.MuiChip-filled": {
-            backgroundColor: tokens.bg.brandPrimary,
-            color: tokens.fg.brandPrimary,
-            "& .MuiChip-deleteIcon": { color: tokens.fg.brandPrimary }
+            backgroundColor: tokens2.bg.brandPrimary,
+            color: tokens2.fg.brandPrimary,
+            "& .MuiChip-deleteIcon": { color: tokens2.fg.brandPrimary }
           }
         },
         colorSecondary: {
           "&.MuiChip-filled": {
-            backgroundColor: highlight2 ? highlight2[50] : tokens.bg.secondarySubtle,
-            color: highlight2 ? highlight2[700] : tokens.text.secondary,
+            backgroundColor: highlight3 ? highlight3[50] : tokens2.bg.secondarySubtle,
+            color: highlight3 ? highlight3[700] : tokens2.text.secondary,
             "& .MuiChip-deleteIcon": {
-              color: highlight2 ? highlight2[500] : tokens.fg.secondary
+              color: highlight3 ? highlight3[500] : tokens2.fg.secondary
             }
           }
         },
@@ -1790,9 +1478,9 @@ function buildComponents(tokens) {
         },
         colorInfo: {
           "&.MuiChip-filled": {
-            backgroundColor: info3[50],
-            color: info3[700],
-            "& .MuiChip-deleteIcon": { color: info3[400] }
+            backgroundColor: info2[50],
+            color: info2[700],
+            "& .MuiChip-deleteIcon": { color: info2[400] }
           }
         }
       }
@@ -1808,7 +1496,7 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: text6.secondary
+          color: text4.secondary
         }
       }
     },
@@ -1824,30 +1512,30 @@ function buildComponents(tokens) {
     MuiTableCell: {
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${border6.secondary}`,
+          borderBottom: `1px solid ${border4.secondary}`,
           padding: "16px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: fg6.tertiary
+          color: fg4.tertiary
         },
         head: {
-          backgroundColor: bg6.secondary,
-          color: fg6.tertiary,
+          backgroundColor: bg4.secondary,
+          color: fg4.tertiary,
           fontWeight: 500,
           fontSize: 12,
           lineHeight: "18px"
         },
         body: {
-          color: fg6.tertiary
+          color: fg4.tertiary
         }
       }
     },
     MuiTableHead: {
       styleOverrides: {
         root: {
-          backgroundColor: bg6.secondary,
+          backgroundColor: bg4.secondary,
           "& .MuiTableRow-root:last-child .MuiTableCell-root": {
-            borderBottom: `1px solid ${border6.secondary}`
+            borderBottom: `1px solid ${border4.secondary}`
           }
         }
       }
@@ -1855,17 +1543,17 @@ function buildComponents(tokens) {
     MuiTableRow: {
       styleOverrides: {
         root: {
-          backgroundColor: bg6.secondary,
+          backgroundColor: bg4.secondary,
           "&:last-child td, &:last-child th": {
             border: 0
           },
           "&:hover": {
-            backgroundColor: bg6.primaryHover
+            backgroundColor: bg4.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: info3[50],
+            backgroundColor: info2[50],
             "&:hover": {
-              backgroundColor: info3[100]
+              backgroundColor: info2[100]
             }
           }
         }
@@ -1874,8 +1562,8 @@ function buildComponents(tokens) {
     MuiTableContainer: {
       styleOverrides: {
         root: {
-          borderRadius: radius6.xl,
-          border: `1px solid ${border6.secondary}`,
+          borderRadius: radius4.xl,
+          border: `1px solid ${border4.secondary}`,
           boxShadow: "none"
         }
       }
@@ -1889,27 +1577,37 @@ function buildComponents(tokens) {
           lineHeight: "18px",
           minWidth: 20,
           height: 20,
-          borderRadius: radius6.full
+          borderRadius: radius4.full
         },
         colorPrimary: {
-          backgroundColor: bg6.brandSolid
+          backgroundColor: bg4.brandSolid,
+          // brandSolid is a dark charcoal in light mode but a LIGHT grey in
+          // dark; MUI's default white contrastText then vanishes on it. Pin the
+          // on-brand fg (white in light / dark in dark) so the count stays legible.
+          color: buttonColors4.primary.fg
+        },
+        colorSecondary: {
+          // secondarySolid inverts to a LIGHT grey in dark; the raw MUI
+          // contrastText stays white and is unreadable. Pin a mode-aware fg.
+          backgroundColor: bg4.secondarySolid,
+          color: buttonColors4.secondary.fg
         },
         colorError: {
-          backgroundColor: bg6.errorSolid
+          backgroundColor: bg4.errorSolid
         },
         colorSuccess: {
-          backgroundColor: bg6.successSolid
+          backgroundColor: bg4.successSolid
         },
         colorWarning: {
-          backgroundColor: bg6.warningSolid
+          backgroundColor: bg4.warningSolid
         },
         dot: {
           minWidth: 8,
           height: 8,
-          borderRadius: radius6.full,
-          ...highlight2 && {
+          borderRadius: radius4.full,
+          ...highlight3 && {
             "&.MuiBadge-colorDefault, &.MuiBadge-colorPrimary": {
-              backgroundColor: highlight2[500]
+              backgroundColor: highlight3[500]
             }
           }
         }
@@ -1919,7 +1617,7 @@ function buildComponents(tokens) {
     MuiDivider: {
       styleOverrides: {
         root: {
-          borderColor: border6.secondary
+          borderColor: border4.secondary
         }
       }
     },
@@ -1934,16 +1632,16 @@ function buildComponents(tokens) {
     MuiListItemButton: {
       styleOverrides: {
         root: {
-          borderRadius: radius6.sm,
+          borderRadius: radius4.sm,
           padding: "8px 12px",
           "&:hover": {
-            backgroundColor: bg6.primaryHover
+            backgroundColor: bg4.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: info3[50],
-            color: info3[700],
+            backgroundColor: info2[50],
+            color: info2[700],
             "&:hover": {
-              backgroundColor: info3[100]
+              backgroundColor: info2[100]
             }
           }
         }
@@ -1953,7 +1651,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           minWidth: 36,
-          color: fg6.quaternary
+          color: fg4.quaternary
         }
       }
     },
@@ -1963,12 +1661,12 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: text6.secondary
+          color: text4.secondary
         },
         secondary: {
           fontSize: 14,
           lineHeight: "20px",
-          color: text6.quaternary
+          color: text4.quaternary
         }
       }
     },
@@ -1976,17 +1674,21 @@ function buildComponents(tokens) {
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          backgroundColor: bg6.primarySolid,
-          color: text6.white,
+          // Inverted surface: charcoal in light mode, near-white in dark. The
+          // text must invert WITH the face (text.white is mode-invariant and
+          // vanished on the dark-mode light face) — primary.fg is the on-solid
+          // fg: white in light, near-black in dark.
+          backgroundColor: bg4.primarySolid,
+          color: buttonColors4.primary.fg,
           fontSize: 12,
           lineHeight: "18px",
           fontWeight: 600,
           padding: "8px 12px",
-          borderRadius: radius6.md,
+          borderRadius: radius4.md,
           boxShadow: tokenShadows.lg
         },
         arrow: {
-          color: bg6.primarySolid
+          color: bg4.primarySolid
         }
       }
     },
@@ -1996,25 +1698,25 @@ function buildComponents(tokens) {
         variant: "standard"
       },
       variants: [
-        ...highlight2 ? [
+        ...highlight3 ? [
           {
             props: { variant: "featured" },
             style: {
-              borderRadius: radius6.xl,
+              borderRadius: radius4.xl,
               fontSize: 14,
               lineHeight: "20px",
               padding: "12px 16px",
               alignItems: "center",
-              backgroundColor: highlight2[50],
-              color: highlight2[700],
-              border: `1px solid ${highlight2[200]}`,
+              backgroundColor: highlight3[50],
+              color: highlight3[700],
+              border: `1px solid ${highlight3[200]}`,
               "& .MuiAlert-icon": {
-                color: highlight2[600],
+                color: highlight3[600],
                 padding: 0,
                 marginRight: 12
               },
               "& .MuiAlertTitle-root": {
-                color: highlight2[800]
+                color: highlight3[800]
               }
             }
           }
@@ -2022,44 +1724,66 @@ function buildComponents(tokens) {
       ],
       styleOverrides: {
         root: {
-          borderRadius: radius6.xl,
+          borderRadius: radius4.xl,
           fontSize: 14,
           lineHeight: "20px",
           padding: "12px 16px",
           alignItems: "center"
         },
-        standardError: {
-          backgroundColor: bg6.errorPrimary,
+        // All four severities share one scheme so they read consistently:
+        //   light → bg [50], text [700], border [300], icon [600]
+        //   dark  → bg [950], text [200], border [800], icon [400]
+        // Light is unchanged; dark uses a deep tinted bg with a LIGHT text tint
+        // (the previous [700] text sat too dark on the deep dark bg), and info
+        // now goes dark like the rest instead of staying light.
+        standardError: ({ theme }) => ({
+          backgroundColor: error2[50],
           color: error2[700],
-          border: `1px solid ${border6.error}`,
-          "& .MuiAlert-icon": {
-            color: fg6.errorPrimary
-          }
-        },
-        standardWarning: {
-          backgroundColor: bg6.warningPrimary,
+          border: `1px solid ${error2[300]}`,
+          "& .MuiAlert-icon": { color: error2[600] },
+          ...theme.applyStyles("dark", {
+            backgroundColor: error2[950],
+            color: error2[200],
+            border: `1px solid ${error2[800]}`,
+            "& .MuiAlert-icon": { color: error2[400] }
+          })
+        }),
+        standardWarning: ({ theme }) => ({
+          backgroundColor: warning2[50],
           color: warning2[700],
           border: `1px solid ${warning2[300]}`,
-          "& .MuiAlert-icon": {
-            color: fg6.warningPrimary
-          }
-        },
-        standardSuccess: {
-          backgroundColor: bg6.successPrimary,
+          "& .MuiAlert-icon": { color: warning2[600] },
+          ...theme.applyStyles("dark", {
+            backgroundColor: warning2[950],
+            color: warning2[200],
+            border: `1px solid ${warning2[800]}`,
+            "& .MuiAlert-icon": { color: warning2[400] }
+          })
+        }),
+        standardSuccess: ({ theme }) => ({
+          backgroundColor: success2[50],
           color: success2[700],
           border: `1px solid ${success2[300]}`,
-          "& .MuiAlert-icon": {
-            color: fg6.successPrimary
-          }
-        },
-        standardInfo: {
-          backgroundColor: info3[50],
-          color: info3[700],
-          border: `1px solid ${info3[300]}`,
-          "& .MuiAlert-icon": {
-            color: info3[600]
-          }
-        },
+          "& .MuiAlert-icon": { color: success2[600] },
+          ...theme.applyStyles("dark", {
+            backgroundColor: success2[950],
+            color: success2[200],
+            border: `1px solid ${success2[800]}`,
+            "& .MuiAlert-icon": { color: success2[400] }
+          })
+        }),
+        standardInfo: ({ theme }) => ({
+          backgroundColor: info2[50],
+          color: info2[700],
+          border: `1px solid ${info2[300]}`,
+          "& .MuiAlert-icon": { color: info2[600] },
+          ...theme.applyStyles("dark", {
+            backgroundColor: info2[950],
+            color: info2[200],
+            border: `1px solid ${info2[800]}`,
+            "& .MuiAlert-icon": { color: info2[400] }
+          })
+        }),
         icon: {
           padding: 0,
           marginRight: 12
@@ -2079,8 +1803,10 @@ function buildComponents(tokens) {
     // ─── Backdrop ───────────────────────────────────────────────────
     MuiBackdrop: {
       styleOverrides: {
+        // Neutral greyscale scrim (was a blue-tinted #101828). gray[950] with
+        // alpha reads as a true-neutral dim in both light and dark.
         root: {
-          backgroundColor: "rgba(16, 24, 40, 0.7)"
+          backgroundColor: "rgba(9, 9, 11, 0.7)"
         }
       }
     },
@@ -2088,7 +1814,7 @@ function buildComponents(tokens) {
     MuiDialog: {
       styleOverrides: {
         paper: {
-          borderRadius: radius6.xl,
+          borderRadius: radius4.xl,
           boxShadow: tokenShadows.xl,
           padding: 0
         }
@@ -2100,7 +1826,7 @@ function buildComponents(tokens) {
           fontSize: 18,
           lineHeight: "28px",
           fontWeight: 600,
-          color: text6.primary,
+          color: text4.primary,
           padding: "24px 24px 0"
         }
       }
@@ -2111,7 +1837,7 @@ function buildComponents(tokens) {
           padding: "20px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: text6.tertiary
+          color: text4.tertiary
         }
       }
     },
@@ -2127,27 +1853,27 @@ function buildComponents(tokens) {
     MuiLinearProgress: {
       styleOverrides: {
         root: {
-          borderRadius: radius6.full,
+          borderRadius: radius4.full,
           height: 8,
-          backgroundColor: border6.secondary
+          backgroundColor: border4.secondary
         },
         barColorPrimary: {
-          backgroundColor: fg6.brandPrimary,
-          borderRadius: radius6.full
+          backgroundColor: fg4.brandPrimary,
+          borderRadius: radius4.full
         },
         barColorSecondary: {
-          backgroundColor: bg6.secondarySolid,
-          borderRadius: radius6.full
+          backgroundColor: bg4.secondarySolid,
+          borderRadius: radius4.full
         }
       }
     },
     MuiCircularProgress: {
       styleOverrides: {
         colorPrimary: {
-          color: fg6.brandPrimary
+          color: fg4.brandPrimary
         },
         colorSecondary: {
-          color: bg6.secondarySolid
+          color: bg4.secondarySolid
         }
       }
     },
@@ -2158,29 +1884,36 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          backgroundColor: bg6.tertiary
+          backgroundColor: bg4.tertiary
         },
         rounded: {
-          borderRadius: radius6.md
+          borderRadius: radius4.md
         },
         circular: {
-          borderRadius: radius6.full
+          borderRadius: radius4.full
         }
       }
     },
     // ─── Snackbar ───────────────────────────────────────────────────
     MuiSnackbarContent: {
       styleOverrides: {
-        root: {
-          backgroundColor: bg6.primarySolid,
-          color: text6.white,
-          borderRadius: radius6.xl,
+        // A toast is an inverse surface: charcoal in light. bg.primarySolid
+        // inverts to a light value in dark (white-on-white), so pin the dark
+        // scheme to a dark grey with light text instead.
+        root: ({ theme }) => ({
+          backgroundColor: bg4.primarySolid,
+          color: text4.white,
+          borderRadius: radius4.xl,
           boxShadow: tokenShadows.lg,
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          padding: "6px 16px"
-        }
+          padding: "6px 16px",
+          ...theme.applyStyles("dark", {
+            backgroundColor: bg4.tertiary,
+            color: text4.primary
+          })
+        })
       }
     },
     // ─── Typography ─────────────────────────────────────────────────
@@ -2206,53 +1939,53 @@ function buildComponents(tokens) {
     MuiSlider: {
       styleOverrides: {
         root: {
-          color: fg6.brandPrimary,
+          color: fg4.brandPrimary,
           height: 8,
           "&.Mui-disabled": {
-            color: border6.secondary
+            color: border4.secondary
           }
         },
         thumb: {
           width: 20,
           height: 20,
-          backgroundColor: sliderColors6.handleBg,
-          border: `2px solid ${sliderColors6.handleBorder}`,
+          backgroundColor: sliderColors4.handleBg,
+          border: `2px solid ${sliderColors4.handleBorder}`,
           boxShadow: tokenShadows.xs,
           "&:hover, &.Mui-focusVisible": {
-            boxShadow: focusRings6.brandShadowXs
+            boxShadow: focusRings4.brandShadowXs
           },
           "&.Mui-active": {
-            boxShadow: focusRings6.brandShadowSm
+            boxShadow: focusRings4.brandShadowSm
           }
         },
         track: {
-          borderRadius: radius6.full,
+          borderRadius: radius4.full,
           border: "none"
         },
         rail: {
-          backgroundColor: border6.secondary,
-          borderRadius: radius6.full,
+          backgroundColor: border4.secondary,
+          borderRadius: radius4.full,
           opacity: 1
         },
         valueLabel: {
-          backgroundColor: bg6.primarySolid,
-          borderRadius: radius6.md,
+          backgroundColor: bg4.primarySolid,
+          borderRadius: radius4.md,
           fontSize: 12,
           fontWeight: 600,
           padding: "4px 8px"
         },
         mark: {
-          backgroundColor: border6.secondary,
+          backgroundColor: border4.secondary,
           width: 4,
           height: 4,
-          borderRadius: radius6.full
+          borderRadius: radius4.full
         },
         markActive: {
-          backgroundColor: fg6.brandPrimary
+          backgroundColor: fg4.brandPrimary
         },
         markLabel: {
           fontSize: 12,
-          color: text6.tertiary
+          color: text4.tertiary
         }
       }
     },
@@ -2260,17 +1993,17 @@ function buildComponents(tokens) {
     MuiRating: {
       styleOverrides: {
         root: {
-          color: fg6.brandPrimary,
+          color: fg4.brandPrimary,
           gap: 4
         },
         iconEmpty: {
-          color: border6.secondary
+          color: border4.secondary
         },
         iconFilled: {
-          color: fg6.brandPrimary
+          color: fg4.brandPrimary
         },
         iconHover: {
-          color: buttonColors6.primary.bgHover
+          color: buttonColors4.primary.bgHover
         }
       }
     },
@@ -2283,30 +2016,33 @@ function buildComponents(tokens) {
     MuiPaginationItem: {
       styleOverrides: {
         root: {
-          borderRadius: radius6.md,
+          borderRadius: radius4.md,
           fontSize: 14,
           fontWeight: 500,
-          color: text6.secondary,
+          color: text4.secondary,
           "&:hover": {
-            backgroundColor: bg6.primaryHover
+            backgroundColor: bg4.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: fg6.brandPrimary,
-            color: base2.white,
+            backgroundColor: fg4.brandPrimary,
+            // fg.brandPrimary is charcoal in light but a LIGHT grey in dark, so
+            // a hardcoded white number vanished. primary.fg is the on-solid fg
+            // (white in light / near-black in dark) — inverts with the face.
+            color: buttonColors4.primary.fg,
             "&:hover": {
-              backgroundColor: buttonColors6.primary.bgHover
+              backgroundColor: buttonColors4.primary.bgHover
             }
           },
           "&.Mui-focusVisible": {
-            boxShadow: focusRings6.brandShadowXs
+            boxShadow: focusRings4.brandShadowXs
           }
         },
         outlined: {
-          border: `1px solid ${border6.primary}`,
+          border: `1px solid ${border4.primary}`,
           "&.Mui-selected": {
-            backgroundColor: fg6.brandPrimary,
-            color: base2.white,
-            borderColor: fg6.brandPrimary
+            backgroundColor: fg4.brandPrimary,
+            color: buttonColors4.primary.fg,
+            borderColor: fg4.brandPrimary
           }
         }
       }
@@ -2315,20 +2051,24 @@ function buildComponents(tokens) {
     MuiAvatar: {
       styleOverrides: {
         root: {
-          backgroundColor: avatarColors6.bg,
+          backgroundColor: avatarColors3.bg,
+          // MUI defaults letter/initials color to palette.background.default
+          // (near-invisible on the avatar bg, esp. in dark). Set it explicitly;
+          // avatarColors.fg is a palette var so it swaps per scheme.
+          color: avatarColors3.fg,
           fontSize: 14,
           fontWeight: 600,
-          border: `1.5px solid ${avatarColors6.contrastBorder}`
+          border: `1.5px solid ${avatarColors3.contrastBorder}`
         },
         rounded: {
-          borderRadius: radius6.md
+          borderRadius: radius4.md
         }
       }
     },
     MuiAvatarGroup: {
       styleOverrides: {
         avatar: {
-          border: `2px solid ${avatarColors6.profilePhotoBorder}`,
+          border: `2px solid ${avatarColors3.profilePhotoBorder}`,
           width: 32,
           height: 32,
           fontSize: 13,
@@ -2340,17 +2080,17 @@ function buildComponents(tokens) {
     MuiBottomNavigation: {
       styleOverrides: {
         root: {
-          backgroundColor: bg6.primary,
-          borderTop: `1px solid ${border6.secondary}`
+          backgroundColor: bg4.primary,
+          borderTop: `1px solid ${border4.secondary}`
         }
       }
     },
     MuiBottomNavigationAction: {
       styleOverrides: {
         root: {
-          color: fg6.quaternary,
+          color: fg4.quaternary,
           "&.Mui-selected": {
-            color: fg6.brandPrimary
+            color: fg4.brandPrimary
           }
         },
         label: {
@@ -2364,35 +2104,26 @@ function buildComponents(tokens) {
       }
     },
     // ─── SpeedDial ──────────────────────────────────────────────────
-    MuiSpeedDial: {
-      styleOverrides: {
-        fab: {
-          backgroundColor: fg6.brandPrimary,
-          color: base2.white,
-          boxShadow: tokenShadows.md,
-          "&:hover": {
-            backgroundColor: buttonColors6.primary.bgHover
-          }
-        }
-      }
-    },
+    // The main FAB renders a MuiFab internally, so it inherits the full
+    // faux-3D Fab styling (bevel, light sweep, hover lift) with no override
+    // here. Only the smaller action buttons get their own flat treatment.
     MuiSpeedDialAction: {
       styleOverrides: {
         fab: {
-          backgroundColor: bg6.primary,
-          color: fg6.secondary,
+          backgroundColor: bg4.primary,
+          color: fg4.secondary,
           boxShadow: tokenShadows.sm,
-          border: `1px solid ${border6.secondary}`,
+          border: `1px solid ${border4.secondary}`,
           "&:hover": {
-            backgroundColor: bg6.primaryHover
+            backgroundColor: bg4.primaryHover
           }
         },
         staticTooltipLabel: {
-          backgroundColor: bg6.primarySolid,
-          color: text6.white,
+          backgroundColor: bg4.primarySolid,
+          color: text4.white,
           fontSize: 12,
           fontWeight: 600,
-          borderRadius: radius6.md,
+          borderRadius: radius4.md,
           whiteSpace: "nowrap"
         }
       }
@@ -2410,13 +2141,13 @@ function buildComponents(tokens) {
         label: {
           fontSize: 14,
           fontWeight: 500,
-          color: text6.tertiary,
+          color: text4.tertiary,
           "&.Mui-active": {
-            color: text6.primary,
+            color: text4.primary,
             fontWeight: 600
           },
           "&.Mui-completed": {
-            color: text6.primary,
+            color: text4.primary,
             fontWeight: 500
           }
         }
@@ -2425,12 +2156,18 @@ function buildComponents(tokens) {
     MuiStepIcon: {
       styleOverrides: {
         root: {
-          color: border6.secondary,
+          color: border4.secondary,
+          // Use the brand-solid button pairing so the number's fill always
+          // contrasts its circle — fg.brandPrimary is near-white in dark mode,
+          // which collided with MUI's default white text (white-on-white).
           "&.Mui-active": {
-            color: fg6.brandPrimary
+            color: buttonColors4.primary.bg,
+            "& .MuiStepIcon-text": {
+              fill: buttonColors4.primary.fg
+            }
           },
           "&.Mui-completed": {
-            color: fg6.brandPrimary
+            color: buttonColors4.primary.bg
           }
         },
         text: {
@@ -2442,7 +2179,7 @@ function buildComponents(tokens) {
     MuiStepConnector: {
       styleOverrides: {
         line: {
-          borderColor: border6.secondary
+          borderColor: border4.secondary
         },
         lineHorizontal: {
           borderTopWidth: 2
@@ -2460,20 +2197,20 @@ function buildComponents(tokens) {
           padding: "8px 0"
         },
         dot: {
-          backgroundColor: border6.secondary,
+          backgroundColor: border4.secondary,
           width: 8,
           height: 8
         },
         dotActive: {
-          backgroundColor: fg6.brandPrimary
+          backgroundColor: fg4.brandPrimary
         },
         progress: {
           width: "100%",
-          backgroundColor: border6.secondary,
-          borderRadius: radius6.full,
+          backgroundColor: border4.secondary,
+          borderRadius: radius4.full,
           "& .MuiLinearProgress-bar": {
-            backgroundColor: fg6.brandPrimary,
-            borderRadius: radius6.full
+            backgroundColor: fg4.brandPrimary,
+            borderRadius: radius4.full
           }
         }
       }
@@ -2486,18 +2223,27 @@ function buildComponents(tokens) {
           lineHeight: "20px"
         },
         separator: {
-          color: breadcrumbColors6.iconFg,
+          color: breadcrumbColors4.iconFg,
           marginLeft: 4,
           marginRight: 4
         },
         li: {
+          fontSize: 14,
+          lineHeight: "20px",
           "& a": {
-            color: breadcrumbColors6.fg,
+            color: breadcrumbColors4.fg,
             textDecoration: "none",
             fontWeight: 500,
             "&:hover": {
-              color: breadcrumbColors6.fgHover
+              color: breadcrumbColors4.fgHover
             }
+          },
+          // Current-page item (a non-link <Typography>) must match the link
+          // size/weight — only its color sets it apart, no bigger/lighter text.
+          "& .MuiTypography-root": {
+            fontSize: 14,
+            lineHeight: "20px",
+            fontWeight: 500
           }
         }
       }
@@ -2505,24 +2251,35 @@ function buildComponents(tokens) {
     // ─── Link ───────────────────────────────────────────────────────
     MuiLink: {
       styleOverrides: {
-        root: {
-          color: info3[600],
+        // info is a raw hue scale (not varified), so the dark link color must be
+        // set explicitly. info[600] is too dark on the near-black dark bg — step
+        // up to lighter tiers for legible contrast.
+        root: ({ theme }) => ({
+          color: info2[600],
           fontWeight: 500,
-          textDecorationColor: info3[600],
+          textDecorationColor: info2[600],
           "&:hover": {
-            color: info3[700],
-            textDecorationColor: info3[700]
-          }
-        }
+            color: info2[700],
+            textDecorationColor: info2[700]
+          },
+          ...theme.applyStyles("dark", {
+            color: info2[400],
+            textDecorationColor: info2[400],
+            "&:hover": {
+              color: info2[300],
+              textDecorationColor: info2[300]
+            }
+          })
+        })
       }
     },
     // ─── Popover ────────────────────────────────────────────────────
     MuiPopover: {
       styleOverrides: {
         paper: {
-          borderRadius: radius6.lg,
+          borderRadius: radius4.lg,
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${border6.secondary}`
+          border: `1px solid ${border4.secondary}`
         }
       }
     },
@@ -2533,14 +2290,74 @@ function buildComponents(tokens) {
       }
     },
     // ─── CardActionArea ─────────────────────────────────────────────
+    // Clickable-card affordance: mirrors the Button's faux-3D bevel (thick edge
+    // that flips bottom->top on hover), light glaze sweep, border-color shift,
+    // and press-to-sink. This is what visually marks a card as clickable — use
+    // <Card><CardActionArea>…</CardActionArea></Card> for any interactive card.
     MuiCardActionArea: {
       styleOverrides: {
         root: {
+          position: "relative",
+          overflow: "hidden",
+          borderRadius: radius4.xl,
+          borderStyle: "solid",
+          borderColor: border4.primary,
+          borderTopWidth: 1,
+          borderRightWidth: 1,
+          borderLeftWidth: 1,
+          borderBottomWidth: 4,
+          borderBottomLeftRadius: radius4["2xl"],
+          borderBottomRightRadius: radius4["2xl"],
+          boxShadow: tokenShadows.xs,
+          transition: "box-shadow 300ms ease, border-width 300ms ease, border-radius 300ms ease, border-color 300ms ease, opacity 300ms ease",
+          // Moving glaze — a soft light streak that sweeps top->bottom on hover.
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            top: "-150%",
+            width: "100%",
+            height: 6,
+            borderRadius: 4,
+            backgroundColor: "color-mix(in srgb, currentColor 40%, #fff)",
+            boxShadow: "0 0 28px 6px color-mix(in srgb, currentColor 40%, #fff)",
+            opacity: 0.35,
+            filter: "blur(3px)",
+            pointerEvents: "none",
+            transition: "top 600ms ease-in-out",
+            zIndex: 1
+          },
+          "&:hover": {
+            borderColor: border4.brand,
+            borderTopWidth: 4,
+            borderBottomWidth: 1,
+            borderTopLeftRadius: radius4["2xl"],
+            borderTopRightRadius: radius4["2xl"],
+            borderBottomLeftRadius: radius4.xl,
+            borderBottomRightRadius: radius4.xl,
+            boxShadow: tokenShadows.lg
+          },
+          "&:hover::before": {
+            top: "150%"
+          },
+          // Press: collapse the raised top edge so the card sinks (snappier than
+          // the hover flip), matching the Button's tactile press.
+          "&:active": {
+            transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
+            borderTopWidth: 1,
+            borderTopLeftRadius: radius4.xl,
+            borderTopRightRadius: radius4.xl,
+            opacity: 0.85
+          },
           "&:hover .MuiCardActionArea-focusHighlight": {
             opacity: 0.04
           },
           "&.Mui-focusVisible .MuiCardActionArea-focusHighlight": {
             opacity: 0.08
+          },
+          "@media (prefers-reduced-motion: reduce)": {
+            transition: "none",
+            "&::before": { display: "none" }
           }
         }
       }
@@ -2549,16 +2366,16 @@ function buildComponents(tokens) {
     MuiFilledInput: {
       styleOverrides: {
         root: {
-          borderRadius: `${radius6.md}px ${radius6.md}px 0 0`,
-          backgroundColor: bg6.secondary,
+          borderRadius: `${radius4.md}px ${radius4.md}px 0 0`,
+          backgroundColor: bg4.secondary,
           "&:hover": {
-            backgroundColor: bg6.secondaryHover
+            backgroundColor: bg4.secondaryHover
           },
           "&.Mui-focused": {
-            backgroundColor: bg6.secondary
+            backgroundColor: bg4.secondary
           },
           "&:after": {
-            borderBottomColor: fg6.brandPrimary
+            borderBottomColor: fg4.brandPrimary
           }
         },
         input: {
@@ -2573,25 +2390,25 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           fontSize: 14,
-          color: text6.tertiary
+          color: text4.tertiary
         },
         selectLabel: {
           fontSize: 14,
-          color: text6.tertiary
+          color: text4.tertiary
         },
         displayedRows: {
           fontSize: 14,
-          color: text6.tertiary
+          color: text4.tertiary
         },
         select: {
           fontSize: 14
         },
         actions: {
           "& .MuiIconButton-root": {
-            color: fg6.quaternary,
+            color: fg4.quaternary,
             "&:hover": {
-              backgroundColor: bg6.primaryHover,
-              color: fg6.brandPrimary
+              backgroundColor: bg4.primaryHover,
+              color: fg4.brandPrimary
             }
           }
         }
@@ -2602,12 +2419,12 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           "&:hover": {
-            color: fg6.secondary
+            color: fg4.secondary
           },
           "&.Mui-active": {
-            color: fg6.secondary,
+            color: fg4.secondary,
             "& .MuiTableSortLabel-icon": {
-              color: fg6.brandPrimary
+              color: fg4.brandPrimary
             }
           }
         }
@@ -2617,9 +2434,9 @@ function buildComponents(tokens) {
     MuiTabScrollButton: {
       styleOverrides: {
         root: {
-          color: fg6.quaternary,
+          color: fg4.quaternary,
           "&:hover": {
-            color: fg6.brandPrimary
+            color: fg4.brandPrimary
           }
         }
       }
@@ -2630,21 +2447,21 @@ function buildComponents(tokens) {
       MuiDataGrid: {
         styleOverrides: {
           root: {
-            border: `1px solid ${border6.secondary}`,
-            borderRadius: radius6.xl,
+            border: `1px solid ${border4.secondary}`,
+            borderRadius: radius4.xl,
             fontFamily: "inherit",
             "& .MuiDataGrid-withBorderColor": {
-              borderColor: border6.secondary
+              borderColor: border4.secondary
             }
           },
           columnHeaders: {
-            backgroundColor: bg6.secondary
+            backgroundColor: bg4.secondary
           },
           columnHeader: {
             fontSize: 12,
             lineHeight: "18px",
             fontWeight: 500,
-            color: fg6.tertiary,
+            color: fg4.tertiary,
             "&:focus, &:focus-within": {
               outline: "none"
             }
@@ -2657,28 +2474,28 @@ function buildComponents(tokens) {
             alignItems: "center",
             fontSize: 14,
             lineHeight: "20px",
-            color: fg6.tertiary,
+            color: fg4.tertiary,
             "&:focus, &:focus-within": {
               outline: "none"
             }
           },
           row: {
-            backgroundColor: bg6.secondary,
+            backgroundColor: bg4.secondary,
             "&:hover": {
-              backgroundColor: bg6.primaryHover
+              backgroundColor: bg4.primaryHover
             },
             "&.Mui-selected": {
-              backgroundColor: bg6.brandPrimary,
+              backgroundColor: bg4.brandPrimary,
               "&:hover": {
-                backgroundColor: bg6.brandPrimary
+                backgroundColor: bg4.brandPrimary
               }
             }
           },
           footerContainer: {
-            borderTop: `1px solid ${border6.secondary}`
+            borderTop: `1px solid ${border4.secondary}`
           },
           columnSeparator: {
-            color: border6.secondary
+            color: border4.secondary
           }
         }
       }
@@ -2687,40 +2504,53 @@ function buildComponents(tokens) {
     // MUI X uses its own sub-components that are separate from MuiOutlinedInput,
     // so height/padding and brand colours must be set here independently.
     ...{
-      // Input field — mirrors MuiOutlinedInput sizing
-      MuiPickersTextField: {
+      // Input field — 32px to match MuiOutlinedInput. MUI X's PickersTextField
+      // renders its OWN tree (MuiPickersInputBase / MuiPickersOutlinedInput),
+      // not classic MuiInputBase/MuiOutlinedInput, so the height/padding/border
+      // must target those keys. sectionsContainer padding 6px 0 + 20px
+      // line-height = 32px, mirroring MuiOutlinedInput.input.
+      MuiPickersInputBase: {
+        styleOverrides: {
+          root: {
+            borderRadius: radius4.md,
+            boxShadow: tokenShadows.xs,
+            fontSize: 14,
+            lineHeight: "20px"
+          }
+        }
+      },
+      MuiPickersOutlinedInput: {
         styleOverrides: {
+          // The sections container carries the default 16.5px vertical padding
+          // (mirrors MuiOutlinedInput). 6px + 20px line-height = 32px, matching
+          // the other inputs. Must live here, not on MuiPickersInputBase — the
+          // OutlinedInput slot is the more specific one that actually paints it.
+          sectionsContainer: {
+            padding: "6px 0"
+          },
           root: {
-            "& .MuiInputBase-root": {
-              height: 32,
-              borderRadius: radius6.md,
-              boxShadow: tokenShadows.xs,
-              fontSize: 14,
-              lineHeight: "20px"
-            },
-            "& .MuiInputBase-input": {
-              padding: "6px 12px",
-              fontSize: 14,
-              lineHeight: "20px"
+            padding: "0 12px",
+            "&:hover:not(.Mui-disabled) .MuiPickersOutlinedInput-notchedOutline": {
+              borderColor: border4.brand
             },
-            "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: border6.primary
-            },
-            "&:hover:not(:has(.Mui-disabled)) .MuiOutlinedInput-notchedOutline": {
-              borderColor: border6.brand
-            },
-            "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: border6.brandSolid,
+            "&.Mui-focused .MuiPickersOutlinedInput-notchedOutline": {
+              borderColor: border4.brandSolid,
               borderWidth: 1,
               boxShadow: "none"
             },
+            "&.Mui-error .MuiPickersOutlinedInput-notchedOutline": {
+              borderColor: border4.error
+            },
             "& .MuiInputAdornment-root .MuiIconButton-root": {
-              color: fg6.quaternary,
+              color: fg4.quaternary,
               "&:hover": {
-                backgroundColor: bg6.primaryHover,
-                color: fg6.brandPrimary
+                backgroundColor: bg4.primaryHover,
+                color: fg4.brandPrimary
               }
             }
+          },
+          notchedOutline: {
+            borderColor: border4.primary
           }
         }
       },
@@ -2728,9 +2558,9 @@ function buildComponents(tokens) {
       MuiPickersPopper: {
         styleOverrides: {
           paper: {
-            borderRadius: radius6.xl,
+            borderRadius: radius4.xl,
             boxShadow: tokenShadows.lg,
-            border: `1px solid ${border6.secondary}`,
+            border: `1px solid ${border4.secondary}`,
             marginTop: 4
           }
         }
@@ -2755,19 +2585,19 @@ function buildComponents(tokens) {
           label: {
             fontSize: 14,
             fontWeight: 600,
-            color: text6.primary
+            color: text4.primary
           },
           switchViewButton: {
-            color: fg6.quaternary,
-            "&:hover": { backgroundColor: bg6.primaryHover, color: fg6.brandPrimary }
+            color: fg4.quaternary,
+            "&:hover": { backgroundColor: bg4.primaryHover, color: fg4.brandPrimary }
           }
         }
       },
       MuiPickersArrowSwitcher: {
         styleOverrides: {
           button: {
-            color: fg6.quaternary,
-            "&:hover": { backgroundColor: bg6.primaryHover, color: fg6.brandPrimary }
+            color: fg4.quaternary,
+            "&:hover": { backgroundColor: bg4.primaryHover, color: fg4.brandPrimary }
           }
         }
       },
@@ -2777,7 +2607,7 @@ function buildComponents(tokens) {
           weekDayLabel: {
             fontSize: 12,
             fontWeight: 500,
-            color: text6.tertiary,
+            color: text4.tertiary,
             width: 32,
             height: 32
           },
@@ -2797,39 +2627,39 @@ function buildComponents(tokens) {
             fontWeight: 400,
             width: 32,
             height: 32,
-            borderRadius: radius6.md,
-            color: text6.primary,
+            borderRadius: radius4.md,
+            color: text4.primary,
             backgroundColor: "transparent",
             "&:hover": {
-              backgroundColor: bg6.primaryHover
+              backgroundColor: bg4.primaryHover
             },
             "&.Mui-selected": {
-              backgroundColor: info3[600],
-              color: base2.white,
+              backgroundColor: buttonColors4.primary.bg,
+              color: buttonColors4.primary.fg,
               fontWeight: 600,
               "&:hover": {
-                backgroundColor: info3[700]
+                backgroundColor: buttonColors4.primary.bgHover
               },
               "&:focus": {
-                backgroundColor: info3[600]
+                backgroundColor: buttonColors4.primary.bg
               }
             },
             "&.MuiPickersDay-today": {
-              border: `1px solid ${info3[600]}`,
-              color: info3[700],
+              border: `1px solid ${fg4.brandPrimary}`,
+              color: text4.brandPrimary,
               backgroundColor: "transparent",
               fontWeight: 600,
               "&.Mui-selected": {
-                backgroundColor: info3[600],
-                color: base2.white,
+                backgroundColor: buttonColors4.primary.bg,
+                color: buttonColors4.primary.fg,
                 border: "none"
               }
             },
             "&.Mui-focusVisible": {
-              boxShadow: focusRings6.brand
+              boxShadow: focusRings4.brand
             },
             "&.Mui-disabled": {
-              color: text6.disabled
+              color: text4.disabled
             }
           }
         }
@@ -2839,12 +2669,12 @@ function buildComponents(tokens) {
         styleOverrides: {
           yearButton: {
             fontSize: 13,
-            borderRadius: radius6.md,
-            "&:hover": { backgroundColor: bg6.primaryHover },
+            borderRadius: radius4.md,
+            "&:hover": { backgroundColor: bg4.primaryHover },
             "&.Mui-selected": {
-              backgroundColor: fg6.brandPrimary,
-              color: base2.white,
-              "&:hover": { backgroundColor: buttonColors6.primary.bgHover }
+              backgroundColor: buttonColors4.primary.bg,
+              color: buttonColors4.primary.fg,
+              "&:hover": { backgroundColor: buttonColors4.primary.bgHover }
             }
           }
         }
@@ -2854,12 +2684,12 @@ function buildComponents(tokens) {
         styleOverrides: {
           monthButton: {
             fontSize: 13,
-            borderRadius: radius6.md,
-            "&:hover": { backgroundColor: bg6.primaryHover },
+            borderRadius: radius4.md,
+            "&:hover": { backgroundColor: bg4.primaryHover },
             "&.Mui-selected": {
-              backgroundColor: fg6.brandPrimary,
-              color: base2.white,
-              "&:hover": { backgroundColor: buttonColors6.primary.bgHover }
+              backgroundColor: buttonColors4.primary.bg,
+              color: buttonColors4.primary.fg,
+              "&:hover": { backgroundColor: buttonColors4.primary.bgHover }
             }
           }
         }
@@ -2869,344 +2699,431 @@ function buildComponents(tokens) {
 }
 
 // src/theme/buildTheme.ts
-function buildThemeOptions(tokens) {
+function toVars(value, path) {
+  if (typeof value === "string") {
+    return `var(--mui-palette-${path}, ${value})`;
+  }
+  const out = {};
+  for (const key of Object.keys(value)) {
+    out[key] = toVars(value[key], `${path}-${key}`);
+  }
+  return out;
+}
+function varifyColorTokens(tokens2) {
   return {
-    palette: buildPalette(tokens),
-    typography: buildTypography(tokens),
-    components: buildComponents(tokens),
-    shadows: buildShadows(tokens),
+    ...tokens2,
+    text: toVars(tokens2.text, "text"),
+    bg: toVars(tokens2.bg, "bg"),
+    fg: toVars(tokens2.fg, "fg"),
+    border: toVars(tokens2.border, "border"),
+    buttonColors: toVars(tokens2.buttonColors, "buttonColors"),
+    sliderColors: toVars(tokens2.sliderColors, "sliderColors"),
+    avatarColors: toVars(tokens2.avatarColors, "avatarColors"),
+    breadcrumbColors: toVars(tokens2.breadcrumbColors, "breadcrumbColors")
+  };
+}
+function buildThemeOptions(tokens2, tokensDark2) {
+  const componentTokens = tokensDark2 ? varifyColorTokens(tokens2) : tokens2;
+  const shared = {
+    typography: buildTypography(tokens2),
+    components: buildComponents(componentTokens),
+    shadows: buildShadows(tokens2),
     shape: {
-      borderRadius: tokens.radius.md
+      borderRadius: tokens2.radius.md
+    }
+  };
+  if (!tokensDark2) {
+    return { ...shared, palette: buildPalette(tokens2, "light") };
+  }
+  return {
+    ...shared,
+    cssVariables: { colorSchemeSelector: "class" },
+    colorSchemes: {
+      light: { palette: buildPalette(tokens2, "light") },
+      dark: { palette: buildPalette(tokensDark2, "dark") }
     }
   };
 }
-function buildTheme(tokens) {
-  return (0, import_styles.createTheme)(buildThemeOptions(tokens));
+function buildTheme(tokens2, tokensDark2) {
+  return (0, import_styles.createTheme)(buildThemeOptions(tokens2, tokensDark2));
 }
 
-// src/theme/presets/forest-external.ts
-var radius2 = {
-  ...radius,
-  xxs: 1,
-  xs: 2,
-  sm: 3,
-  md: 4,
-  lg: 5,
-  xl: 6,
-  "2xl": 8,
-  "3xl": 10,
-  "4xl": 12
-};
-var text2 = {
-  primary: gray[900],
-  secondary: gray[700],
-  secondaryHover: gray[800],
-  tertiary: gray[600],
-  tertiaryHover: gray[700],
-  quaternary: gray[500],
-  disabled: gray[500],
-  placeholder: gray[500],
-  placeholderSubtle: gray[300],
-  white: base.white,
-  brandPrimary: violet[900],
-  brandSecondary: violet[700],
-  brandTertiary: violet[600],
-  brandTertiaryAlt: violet[600],
-  primaryOnBrand: base.white,
-  secondaryOnBrand: violet[200],
-  tertiaryOnBrand: violet[200],
-  quaternaryOnBrand: violet[300],
-  errorPrimary: error[600],
-  warningPrimary: warning[600],
-  successPrimary: success[600]
+// src/theme/tokens.ts
+var violet = {
+  25: "#faf8ff",
+  50: "#f5f0ff",
+  100: "#ebe0ff",
+  200: "#d6c0ff",
+  300: "#b090ff",
+  400: "#9D5FFF",
+  500: "#7c4de6",
+  600: "#5b3acc",
+  700: "#3a1aad",
+  800: "#190a8a",
+  900: "#000066",
+  950: "#000033"
 };
-var bg2 = {
-  primary: gray[50],
-  primaryAlt: gray[50],
-  primaryHover: gray[100],
-  primarySolid: gray[950],
-  secondary: base.white,
-  secondaryAlt: base.white,
-  secondarySubtle: gray[25],
-  secondaryHover: gray[50],
-  secondarySolid: gray[600],
-  tertiary: gray[100],
-  quaternary: gray[200],
-  active: gray[200],
-  disabled: gray[100],
-  disabledSubtle: gray[50],
-  overlay: gray[950],
-  brandPrimary: violet[50],
-  brandPrimaryAlt: violet[50],
-  brandSecondary: violet[100],
-  brandSolid: violet[400],
-  brandSolidHover: violet[500],
-  brandSection: violet[800],
-  brandSectionSubtle: violet[700],
-  errorPrimary: error[50],
-  errorSecondary: error[100],
-  errorSolid: error[600],
-  warningPrimary: warning[50],
-  warningSecondary: warning[100],
-  warningSolid: warning[600],
-  successPrimary: success[50],
-  successSecondary: success[100],
-  successSolid: success[600]
+var magenta = {
+  25: "#fff8fd",
+  50: "#fff0fa",
+  100: "#ffe0f5",
+  200: "#ffc0eb",
+  300: "#ff90d8",
+  400: "#FF78F3",
+  500: "#e650d4",
+  600: "#cc28b5",
+  700: "#a3008c",
+  800: "#7a0066",
+  900: "#520044",
+  950: "#290022"
 };
-var fg2 = {
-  primary: gray[900],
-  secondary: gray[700],
-  secondaryHover: gray[800],
-  tertiary: gray[600],
-  tertiaryHover: gray[700],
-  quaternary: gray[500],
-  quaternaryHover: gray[600],
-  quinary: gray[400],
-  quinaryHover: gray[500],
-  senary: gray[300],
-  white: base.white,
-  disabled: gray[400],
-  disabledSubtle: gray[300],
-  brandPrimary: violet[400],
-  brandPrimaryAlt: violet[400],
-  brandSecondary: violet[400],
-  errorPrimary: error[600],
-  errorSecondary: error[500],
-  warningPrimary: warning[600],
-  warningSecondary: warning[500],
-  successPrimary: success[600],
-  successSecondary: success[500]
+var gray = {
+  25: "#fdfcfc",
+  50: "#faf9f8",
+  100: "#f5f3f1",
+  200: "#e8e5e3",
+  300: "#d8d8dc",
+  400: "#a0a0a6",
+  500: "#71717a",
+  600: "#52525b",
+  700: "#3f3f46",
+  800: "#27272a",
+  900: "#18181b",
+  950: "#09090b"
 };
-var border2 = {
-  primary: gray[300],
-  secondary: gray[200],
-  tertiary: gray[100],
-  disabled: gray[300],
-  disabledSubtle: gray[200],
-  brand: violet[300],
-  brandSolid: violet[400],
-  brandSolidAlt: violet[400],
-  error: error[300],
-  errorSolid: error[600]
+var red = {
+  25: "#fff8f7",
+  50: "#fff0ee",
+  100: "#ffe0dd",
+  200: "#ffc0bb",
+  300: "#ff9090",
+  400: "#FF2821",
+  500: "#e61a1a",
+  600: "#cc1010",
+  700: "#a30808",
+  800: "#7a0000",
+  900: "#520000",
+  950: "#290000"
 };
-var buttonColors2 = {
-  primary: {
-    bg: violet[400],
-    bgHover: violet[500],
-    fg: base.white,
-    fgHover: base.white,
-    border: violet[400],
-    borderHover: violet[500]
+var misc = {
+  teal: {
+    25: "#f6fefc",
+    50: "#f0fdf9",
+    100: "#ccfbef",
+    200: "#99f6e0",
+    300: "#5fe9d0",
+    400: "#2ed3b7",
+    500: "#15b79e",
+    600: "#0e9384",
+    700: "#107569",
+    800: "#125d56",
+    900: "#134e48",
+    950: "#0a2926"
   },
-  secondary: {
-    bg: gray[900],
-    bgHover: gray[950],
-    fg: base.white,
-    fgHover: base.white,
-    border: gray[900],
-    borderHover: gray[950]
+  orange: {
+    25: "#fefaf5",
+    50: "#fef6ee",
+    100: "#fdead7",
+    200: "#f9dbaf",
+    300: "#f7b27a",
+    400: "#f38744",
+    500: "#ef6820",
+    600: "#e04f16",
+    700: "#b93815",
+    800: "#932f19",
+    900: "#772917",
+    950: "#511c10"
   },
-  secondaryColor: {
-    bg: base.white,
-    bgHover: violet[50],
-    fg: violet[400],
-    fgHover: violet[500],
-    border: violet[300],
-    borderHover: violet[300]
+  purple: {
+    25: "#fafaff",
+    50: "#f4f3ff",
+    100: "#ebe9fe",
+    200: "#d9d6fe",
+    300: "#bdb4fe",
+    400: "#9b8afb",
+    500: "#7a5af8",
+    600: "#6938ef",
+    700: "#5925dc",
+    800: "#4a1fb8",
+    900: "#3e1c96",
+    950: "#27115f"
+  },
+  pink: {
+    25: "#fef6fb",
+    50: "#fdf2fa",
+    100: "#fce7f6",
+    200: "#fcceee",
+    300: "#faa7e0",
+    400: "#f670c7",
+    500: "#ee46bc",
+    600: "#dd2590",
+    700: "#c11574",
+    800: "#9e165f",
+    900: "#851651",
+    950: "#4e0d30"
+  },
+  fuchsia: {
+    25: "#fefaff",
+    50: "#fdf4ff",
+    100: "#fbe8ff",
+    200: "#f6d0fe",
+    300: "#eeaafd",
+    400: "#e478fa",
+    500: "#d444f1",
+    600: "#ba24d5",
+    700: "#9f1ab1",
+    800: "#821890",
+    900: "#6f1877",
+    950: "#47104c"
+  },
+  orangeDark: {
+    25: "#fff9f5",
+    50: "#fff4ed",
+    100: "#ffe6d5",
+    200: "#ffd6ae",
+    300: "#ff9c66",
+    400: "#ff692e",
+    500: "#ff4405",
+    600: "#e62e05",
+    700: "#bc1b06",
+    800: "#97180c",
+    900: "#771a0d",
+    950: "#57130a"
   },
-  tertiary: {
-    fg: gray[600],
-    fgHover: gray[700],
-    bgHover: gray[50]
+  green: {
+    25: "#f6fef9",
+    50: "#edfcf2",
+    100: "#d3f8df",
+    200: "#aaf0c4",
+    300: "#73e2a3",
+    400: "#3ccb7f",
+    500: "#16b364",
+    600: "#099250",
+    700: "#087443",
+    800: "#095c37",
+    900: "#084c2e",
+    950: "#052e1c"
   },
-  tertiaryColor: {
-    fg: violet[400],
-    fgHover: violet[500],
-    bgHover: violet[50]
+  indigo: {
+    25: "#f5f8ff",
+    50: "#eef4ff",
+    100: "#e0eaff",
+    200: "#c7d7fe",
+    300: "#a4bcfd",
+    400: "#8098f9",
+    500: "#6172f3",
+    600: "#444ce7",
+    700: "#3538cd",
+    800: "#2d31a6",
+    900: "#2d3282",
+    950: "#1f235b"
   },
-  primaryError: {
-    bg: error[600],
-    bgHover: error[700],
-    fg: base.white,
-    fgHover: base.white,
-    border: error[600],
-    borderHover: error[700]
+  rose: {
+    25: "#fff5f6",
+    50: "#fff1f3",
+    100: "#ffe4e8",
+    200: "#fecdd6",
+    300: "#fea3b4",
+    400: "#fd6f8e",
+    500: "#f63d68",
+    600: "#e31b54",
+    700: "#c01048",
+    800: "#a11043",
+    900: "#89123e",
+    950: "#510b24"
   },
-  secondaryError: {
-    bg: base.white,
-    bgHover: error[50],
-    fg: error[700],
-    fgHover: error[800],
-    border: error[300],
-    borderHover: error[300]
+  blueLight: {
+    25: "#f5fbff",
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#b9e6fe",
+    300: "#7cd4fd",
+    400: "#36bffa",
+    500: "#0ba5ec",
+    600: "#0086c9",
+    700: "#026aa2",
+    800: "#065986",
+    900: "#0b4a6f",
+    950: "#062c41"
   },
-  tertiaryError: {
-    fg: error[700],
-    fgHover: error[800],
-    bgHover: error[50]
+  cyan: {
+    25: "#f5feff",
+    50: "#ecfdff",
+    100: "#cff9fe",
+    200: "#a5f0fc",
+    300: "#67e3f9",
+    400: "#22ccee",
+    500: "#06aed4",
+    600: "#088ab2",
+    700: "#0e7090",
+    800: "#155b75",
+    900: "#164c63",
+    950: "#0d2d3a"
   }
 };
-var avatarColors2 = {
-  bg: gray[100],
-  contrastBorder: "#00000014",
-  profilePhotoBorder: base.white,
-  focusBorder: "#a0a0a624"
-  // gray[400] + 14% alpha
+var base = {
+  white: "#ffffff",
+  black: "#000000",
+  transparent: "#ffffff00"
 };
-var breadcrumbColors2 = {
-  fg: gray[600],
-  fgHover: gray[700],
-  bgHover: gray[50],
-  brandBgHover: violet[50],
-  brandFgHover: violet[700],
-  iconFg: gray[500],
-  iconFgHover: gray[700],
-  brandIconFgHover: violet[700]
+var error = {
+  25: "#fffbfa",
+  50: "#fef3f2",
+  100: "#fee4e2",
+  200: "#fecdca",
+  300: "#fda29b",
+  400: "#f97066",
+  500: "#f04438",
+  600: "#d92d20",
+  700: "#b42318",
+  800: "#912018",
+  900: "#7a271a",
+  950: "#55160c"
 };
-var iconColors2 = {
-  fgBrand: violet[400],
-  fgBrandOnBrand: violet[200],
-  featuredModernBorder: gray[200],
-  featuredLightFgBrand: violet[400],
-  featuredLightFgGray: gray[500],
-  featuredLightFgError: error[600],
-  featuredLightFgWarning: warning[600],
-  featuredLightFgSuccess: success[600],
-  featuredDarkFgBrand: base.white,
-  featuredDarkFgGray: base.white,
-  featuredDarkFgError: base.white,
-  featuredDarkFgWarning: base.white,
-  featuredDarkFgSuccess: base.white
+var warning = {
+  25: "#fffcf5",
+  50: "#fffaeb",
+  100: "#fef0c7",
+  200: "#fedf89",
+  300: "#fec84b",
+  400: "#fdb022",
+  500: "#f79009",
+  600: "#dc6803",
+  700: "#b54708",
+  800: "#93370d",
+  900: "#7a2e0e",
+  950: "#4e1d09"
 };
-var navColors2 = {
-  itemIconFg: gray[500],
-  itemIconFgActive: gray[700],
-  itemButtonIconFg: gray[500],
-  itemButtonIconFgActive: gray[700]
+var success = {
+  25: "#f6fef9",
+  50: "#ecfdf3",
+  100: "#dcfae6",
+  200: "#abefc6",
+  300: "#75e0a7",
+  400: "#47cd89",
+  500: "#17b26a",
+  600: "#079455",
+  700: "#067647",
+  800: "#085d3a",
+  900: "#074d31",
+  950: "#053321"
 };
-var sliderColors2 = {
-  handleBorder: violet[400],
-  handleBg: base.white
+var info = {
+  25: "#f5faff",
+  50: "#eff8ff",
+  100: "#d1e9ff",
+  200: "#b2ddff",
+  300: "#84caff",
+  400: "#53b1fd",
+  500: "#2e90fa",
+  600: "#1570ef",
+  700: "#175cd3",
+  800: "#1849a9",
+  900: "#194185",
+  950: "#102a56"
 };
-var toggleColors2 = {
-  buttonFgDisabled: gray[50]
+var spacing = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  "2xl": 20,
+  "3xl": 24,
+  "4xl": 32,
+  "5xl": 40,
+  "6xl": 48,
+  "7xl": 64,
+  "8xl": 80,
+  "9xl": 96,
+  "10xl": 128,
+  "11xl": 160
 };
-var chartColors2 = {
-  axisFg: gray[100],
-  gridlineFg: gray[100],
-  labelFg: gray[600],
-  labelFgEmphasis: gray[700],
-  bg: base.white,
-  bgAlt: gray[50],
-  tooltipBg: gray[950],
-  tooltipFg: base.white,
-  crosshairFg: gray[500],
-  legendFg: text2.tertiary,
-  series: [
-    { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
-    { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
-    { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
-    { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
-    { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
-    { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
-    { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
-    { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
-    { fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
-    { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
-    { fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
-    { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
-  ]
+var radius = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 10,
+  xl: 12,
+  "2xl": 16,
+  "3xl": 20,
+  "4xl": 24,
+  full: 9999
 };
-var focusRings2 = {
-  brand: "0px 0px 0px 4px #9D5FFF3d",
-  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #9D5FFF3d",
-  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #9D5FFF3d",
+var shadows = {
+  xs: "0px 1px 2px 0px #1018280d",
+  sm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f",
+  md: "0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f",
+  lg: "0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808",
+  xl: "0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808",
+  "2xl": "0px 24px 48px -12px #1018282e",
+  "3xl": "0px 32px 64px -12px #10182824"
+};
+var focusRings = {
+  brand: "0px 0px 0px 4px #7c4de63d",
+  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #7c4de63d",
+  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #7c4de63d",
   gray: "0px 0px 0px 4px #a0a0a624",
   grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
   grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
   error: "0px 0px 0px 4px #f044383d",
   errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
 };
-var forestExternalPreset = {
-  name: "forest-external",
-  defaultVariant: "light",
-  variants: {
-    light: {
-      tokens: {
-        base,
-        error,
-        warning,
-        success,
-        info,
-        spacing,
-        radius: radius2,
-        shadows,
-        focusRings: focusRings2,
-        fontFamily: '"Aeonik", sans-serif',
-        fontFamilyMono: '"Aeonik Mono", monospace',
-        fontSize,
-        lineHeight,
-        fontWeight,
-        display,
-        container,
-        widths,
-        text: text2,
-        bg: bg2,
-        fg: fg2,
-        border: border2,
-        buttonColors: buttonColors2,
-        avatarColors: avatarColors2,
-        breadcrumbColors: breadcrumbColors2,
-        iconColors: iconColors2,
-        navColors: navColors2,
-        sliderColors: sliderColors2,
-        toggleColors: toggleColors2,
-        chartColors: chartColors2,
-        alpha
-      }
-    }
-  }
+var fontFamily = '"Aeonik", sans-serif';
+var fontFamilyMono = '"Aeonik Mono", monospace';
+var fontSize = {
+  xxs: 11,
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20
 };
-
-// src/theme/presets/forest-agency.ts
-var colors = {
-  base,
-  error,
-  warning,
-  success,
-  info,
-  brand: {
-    25: gray[25],
-    50: gray[50],
-    100: gray[100],
-    200: gray[200],
-    300: gray[300],
-    400: gray[400],
-    500: gray[500],
-    600: gray[900],
-    // #18181b - dark brand
-    700: gray[950],
-    // #09090b - primary brand
-    800: gray[950],
-    900: gray[950],
-    950: gray[950]
-  },
-  accent: red,
-  gray
+var lineHeight = {
+  xxs: "16px",
+  xs: "18px",
+  sm: "20px",
+  md: "24px",
+  lg: "28px",
+  xl: "30px"
 };
-var radius3 = {
-  ...radius,
-  xxs: 1,
-  xs: 2,
-  sm: 3,
-  md: 4,
-  lg: 5,
-  xl: 6,
-  "2xl": 8,
-  "3xl": 10,
-  "4xl": 12
+var fontWeight = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
 };
-var text3 = {
+var display = {
+  "2xl": { fontSize: 72, lineHeight: "90px", letterSpacing: "-0.02em" },
+  xl: { fontSize: 60, lineHeight: "72px", letterSpacing: "-0.02em" },
+  lg: { fontSize: 48, lineHeight: "60px", letterSpacing: "-0.02em" },
+  md: { fontSize: 36, lineHeight: "44px", letterSpacing: "-0.02em" },
+  sm: { fontSize: 30, lineHeight: "38px" },
+  xs: { fontSize: 24, lineHeight: "32px" }
+};
+var container = {
+  maxWidthDesktop: 1280,
+  paddingDesktop: 32,
+  paddingMobile: 16
+};
+var widths = {
+  xxs: 320,
+  xs: 384,
+  sm: 480,
+  md: 560,
+  lg: 640,
+  xl: 768,
+  "2xl": 1024,
+  "3xl": 1280,
+  "4xl": 1440,
+  "5xl": 1600,
+  "6xl": 1920
+};
+var text = {
   primary: gray[900],
   secondary: gray[700],
   secondaryHover: gray[800],
@@ -3217,19 +3134,19 @@ var text3 = {
   placeholder: gray[500],
   placeholderSubtle: gray[300],
   white: base.white,
-  brandPrimary: colors.brand[900],
-  brandSecondary: colors.brand[700],
-  brandTertiary: colors.brand[600],
-  brandTertiaryAlt: colors.brand[600],
+  brandPrimary: violet[900],
+  brandSecondary: violet[700],
+  brandTertiary: violet[600],
+  brandTertiaryAlt: violet[600],
   primaryOnBrand: base.white,
-  secondaryOnBrand: colors.brand[200],
-  tertiaryOnBrand: colors.brand[200],
-  quaternaryOnBrand: colors.brand[300],
+  secondaryOnBrand: violet[200],
+  tertiaryOnBrand: violet[200],
+  quaternaryOnBrand: violet[300],
   errorPrimary: error[600],
   warningPrimary: warning[600],
   successPrimary: success[600]
 };
-var bg3 = {
+var bg = {
   primary: gray[50],
   primaryAlt: gray[50],
   primaryHover: gray[100],
@@ -3245,13 +3162,13 @@ var bg3 = {
   disabled: gray[100],
   disabledSubtle: gray[50],
   overlay: gray[950],
-  brandPrimary: colors.brand[50],
-  brandPrimaryAlt: colors.brand[50],
-  brandSecondary: colors.brand[100],
-  brandSolid: colors.brand[600],
-  brandSolidHover: colors.brand[700],
-  brandSection: colors.brand[800],
-  brandSectionSubtle: colors.brand[700],
+  brandPrimary: violet[50],
+  brandPrimaryAlt: violet[50],
+  brandSecondary: violet[100],
+  brandSolid: violet[600],
+  brandSolidHover: violet[700],
+  brandSection: violet[800],
+  brandSectionSubtle: violet[700],
   errorPrimary: error[50],
   errorSecondary: error[100],
   errorSolid: error[600],
@@ -3262,7 +3179,7 @@ var bg3 = {
   successSecondary: success[100],
   successSolid: success[600]
 };
-var fg3 = {
+var fg = {
   primary: gray[900],
   secondary: gray[700],
   secondaryHover: gray[800],
@@ -3276,9 +3193,9 @@ var fg3 = {
   white: base.white,
   disabled: gray[400],
   disabledSubtle: gray[300],
-  brandPrimary: colors.brand[600],
-  brandPrimaryAlt: colors.brand[600],
-  brandSecondary: colors.brand[500],
+  brandPrimary: violet[600],
+  brandPrimaryAlt: violet[600],
+  brandSecondary: violet[500],
   errorPrimary: error[600],
   errorSecondary: error[500],
   warningPrimary: warning[600],
@@ -3286,26 +3203,26 @@ var fg3 = {
   successPrimary: success[600],
   successSecondary: success[500]
 };
-var border3 = {
+var border = {
   primary: gray[300],
   secondary: gray[200],
   tertiary: gray[100],
   disabled: gray[300],
   disabledSubtle: gray[200],
-  brand: gray[400],
-  brandSolid: colors.brand[600],
-  brandSolidAlt: colors.brand[600],
+  brand: violet[300],
+  brandSolid: violet[600],
+  brandSolidAlt: violet[600],
   error: error[300],
   errorSolid: error[600]
 };
-var buttonColors3 = {
+var buttonColors = {
   primary: {
-    bg: colors.brand[700],
-    bgHover: colors.brand[800],
+    bg: violet[600],
+    bgHover: violet[700],
     fg: base.white,
     fgHover: base.white,
-    border: colors.brand[700],
-    borderHover: colors.brand[800]
+    border: violet[600],
+    borderHover: violet[700]
   },
   secondary: {
     bg: gray[900],
@@ -3317,11 +3234,11 @@ var buttonColors3 = {
   },
   secondaryColor: {
     bg: base.white,
-    bgHover: colors.brand[50],
-    fg: colors.brand[700],
-    fgHover: colors.brand[800],
-    border: colors.brand[300],
-    borderHover: colors.brand[300]
+    bgHover: violet[50],
+    fg: violet[700],
+    fgHover: violet[800],
+    border: violet[300],
+    borderHover: violet[300]
   },
   tertiary: {
     fg: gray[600],
@@ -3329,9 +3246,9 @@ var buttonColors3 = {
     bgHover: gray[50]
   },
   tertiaryColor: {
-    fg: colors.brand[700],
-    fgHover: colors.brand[800],
-    bgHover: colors.brand[50]
+    fg: violet[700],
+    fgHover: violet[800],
+    bgHover: violet[50]
   },
   primaryError: {
     bg: error[600],
@@ -3355,28 +3272,28 @@ var buttonColors3 = {
     bgHover: error[50]
   }
 };
-var avatarColors3 = {
+var avatarColors = {
   bg: gray[100],
+  fg: gray[600],
   contrastBorder: "#00000014",
   profilePhotoBorder: base.white,
   focusBorder: "#a0a0a624"
-  // gray[400] + 14% alpha
 };
-var breadcrumbColors3 = {
+var breadcrumbColors = {
   fg: gray[600],
   fgHover: gray[700],
   bgHover: gray[50],
-  brandBgHover: colors.brand[50],
-  brandFgHover: colors.brand[700],
+  brandBgHover: violet[50],
+  brandFgHover: violet[700],
   iconFg: gray[500],
   iconFgHover: gray[700],
-  brandIconFgHover: colors.brand[700]
+  brandIconFgHover: violet[700]
 };
-var iconColors3 = {
-  fgBrand: colors.brand[600],
-  fgBrandOnBrand: colors.brand[200],
+var iconColors = {
+  fgBrand: violet[600],
+  fgBrandOnBrand: violet[200],
   featuredModernBorder: gray[200],
-  featuredLightFgBrand: colors.brand[600],
+  featuredLightFgBrand: violet[600],
   featuredLightFgGray: gray[500],
   featuredLightFgError: error[600],
   featuredLightFgWarning: warning[600],
@@ -3387,20 +3304,20 @@ var iconColors3 = {
   featuredDarkFgWarning: base.white,
   featuredDarkFgSuccess: base.white
 };
-var navColors3 = {
+var navColors = {
   itemIconFg: gray[500],
   itemIconFgActive: gray[700],
   itemButtonIconFg: gray[500],
   itemButtonIconFgActive: gray[700]
 };
-var sliderColors3 = {
-  handleBorder: colors.brand[600],
+var sliderColors = {
+  handleBorder: violet[600],
   handleBg: base.white
 };
-var toggleColors3 = {
+var toggleColors = {
   buttonFgDisabled: gray[50]
 };
-var chartColors3 = {
+var chartColors = {
   axisFg: gray[100],
   gridlineFg: gray[100],
   labelFg: gray[600],
@@ -3410,7 +3327,7 @@ var chartColors3 = {
   tooltipBg: gray[950],
   tooltipFg: base.white,
   crosshairFg: gray[500],
-  legendFg: text3.tertiary,
+  legendFg: text.tertiary,
   series: [
     { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
     { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
@@ -3426,59 +3343,36 @@ var chartColors3 = {
     { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
   ]
 };
-var focusRings3 = {
-  brand: "0px 0px 0px 4px #4040403d",
-  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
-  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
-  gray: "0px 0px 0px 4px #a0a0a624",
-  grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
-  grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
-  error: "0px 0px 0px 4px #f044383d",
-  errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
-};
-var forestAgencyPreset = {
-  name: "forest-agency",
-  defaultVariant: "light",
-  variants: {
-    light: {
-      tokens: {
-        base,
-        error,
-        warning,
-        success,
-        info,
-        spacing,
-        radius: radius3,
-        shadows,
-        focusRings: focusRings3,
-        fontFamily: '"Aeonik", sans-serif',
-        fontFamilyMono: '"Aeonik Mono", monospace',
-        fontSize,
-        lineHeight,
-        fontWeight,
-        display,
-        container,
-        widths,
-        text: text3,
-        bg: bg3,
-        fg: fg3,
-        border: border3,
-        buttonColors: buttonColors3,
-        avatarColors: avatarColors3,
-        breadcrumbColors: breadcrumbColors3,
-        iconColors: iconColors3,
-        navColors: navColors3,
-        sliderColors: sliderColors3,
-        toggleColors: toggleColors3,
-        chartColors: chartColors3,
-        alpha
-      }
-    }
+var alpha = {
+  white: {
+    10: "#ffffff1a",
+    20: "#ffffff33",
+    30: "#ffffff4d",
+    40: "#ffffff66",
+    50: "#ffffff80",
+    60: "#ffffff99",
+    70: "#ffffffb3",
+    80: "#ffffffcc",
+    90: "#ffffffe6",
+    100: "#ffffff"
+  },
+  black: {
+    10: "#0000001a",
+    20: "#00000033",
+    30: "#0000004d",
+    40: "#00000066",
+    50: "#00000080",
+    60: "#00000099",
+    70: "#000000b3",
+    80: "#000000cc",
+    90: "#000000e6",
+    100: "#000000"
   }
 };
 
-// src/theme/presets/forest-internal.ts
-var radius4 = {
+// src/theme/presets/forest-alkemy-plus.dark.ts
+var highlight = magenta;
+var radius2 = {
   ...radius,
   xxs: 1,
   xs: 2,
@@ -3490,286 +3384,298 @@ var radius4 = {
   "3xl": 10,
   "4xl": 12
 };
-var text4 = {
-  primary: gray[900],
-  secondary: gray[700],
-  secondaryHover: gray[800],
-  tertiary: gray[600],
-  tertiaryHover: gray[700],
+var text2 = {
+  primary: gray[50],
+  secondary: gray[300],
+  secondaryHover: gray[200],
+  tertiary: gray[400],
+  tertiaryHover: gray[300],
   quaternary: gray[500],
-  disabled: gray[500],
+  disabled: gray[600],
   placeholder: gray[500],
-  placeholderSubtle: gray[300],
+  placeholderSubtle: gray[600],
   white: base.white,
-  brandPrimary: magenta[900],
-  brandSecondary: magenta[700],
-  brandTertiary: magenta[600],
-  brandTertiaryAlt: magenta[600],
-  primaryOnBrand: base.white,
-  secondaryOnBrand: magenta[200],
-  tertiaryOnBrand: magenta[200],
-  quaternaryOnBrand: magenta[300],
-  errorPrimary: error[600],
-  warningPrimary: warning[600],
-  successPrimary: success[600]
+  // Greyscale brand text (light neutral on the dark page).
+  brandPrimary: gray[50],
+  brandSecondary: gray[200],
+  brandTertiary: gray[300],
+  brandTertiaryAlt: gray[300],
+  // "onBrand" text sits on the LIGHT-grey brand surface -> it must be dark.
+  primaryOnBrand: gray[950],
+  secondaryOnBrand: gray[700],
+  tertiaryOnBrand: gray[700],
+  quaternaryOnBrand: gray[600],
+  errorPrimary: error[400],
+  warningPrimary: warning[400],
+  successPrimary: success[400]
 };
-var bg4 = {
-  primary: gray[50],
-  primaryAlt: gray[50],
-  primaryHover: gray[100],
-  primarySolid: gray[950],
-  secondary: base.white,
-  secondaryAlt: base.white,
-  secondarySubtle: gray[25],
-  secondaryHover: gray[50],
-  secondarySolid: gray[600],
-  tertiary: gray[100],
-  quaternary: gray[200],
-  active: gray[200],
-  disabled: gray[100],
-  disabledSubtle: gray[50],
+var bg2 = {
+  primary: gray[950],
+  primaryAlt: gray[950],
+  primaryHover: gray[900],
+  primarySolid: gray[50],
+  secondary: gray[900],
+  secondaryAlt: gray[900],
+  secondarySubtle: gray[900],
+  secondaryHover: gray[800],
+  secondarySolid: gray[300],
+  tertiary: gray[800],
+  quaternary: gray[700],
+  active: gray[700],
+  disabled: gray[800],
+  disabledSubtle: gray[900],
   overlay: gray[950],
-  brandPrimary: magenta[50],
-  brandPrimaryAlt: magenta[50],
-  brandSecondary: magenta[100],
-  brandSolid: magenta[400],
-  brandSolidHover: magenta[500],
-  brandSection: magenta[800],
-  brandSectionSubtle: magenta[700],
-  errorPrimary: error[50],
-  errorSecondary: error[100],
+  // Greyscale brand surfaces: subtle brand bg is a dark grey; the solid brand
+  // face is a LIGHT grey (mirrors light's charcoal solid).
+  brandPrimary: gray[800],
+  brandPrimaryAlt: gray[800],
+  brandSecondary: gray[700],
+  brandSolid: gray[100],
+  brandSolidHover: gray[200],
+  brandSection: gray[900],
+  brandSectionSubtle: gray[800],
+  errorPrimary: error[950],
+  errorSecondary: error[900],
   errorSolid: error[600],
-  warningPrimary: warning[50],
-  warningSecondary: warning[100],
+  warningPrimary: warning[950],
+  warningSecondary: warning[900],
   warningSolid: warning[600],
-  successPrimary: success[50],
-  successSecondary: success[100],
+  successPrimary: success[950],
+  successSecondary: success[900],
   successSolid: success[600]
 };
-var fg4 = {
-  primary: gray[900],
-  secondary: gray[700],
-  secondaryHover: gray[800],
-  tertiary: gray[600],
-  tertiaryHover: gray[700],
+var fg2 = {
+  primary: gray[50],
+  secondary: gray[300],
+  secondaryHover: gray[200],
+  tertiary: gray[400],
+  tertiaryHover: gray[300],
   quaternary: gray[500],
-  quaternaryHover: gray[600],
-  quinary: gray[400],
-  quinaryHover: gray[500],
-  senary: gray[300],
+  quaternaryHover: gray[400],
+  quinary: gray[500],
+  quinaryHover: gray[400],
+  senary: gray[600],
   white: base.white,
-  disabled: gray[400],
-  disabledSubtle: gray[300],
-  brandPrimary: magenta[400],
-  brandPrimaryAlt: magenta[400],
-  brandSecondary: magenta[400],
-  errorPrimary: error[600],
+  disabled: gray[600],
+  disabledSubtle: gray[700],
+  brandPrimary: gray[100],
+  brandPrimaryAlt: gray[100],
+  brandSecondary: gray[300],
+  errorPrimary: error[400],
   errorSecondary: error[500],
-  warningPrimary: warning[600],
+  warningPrimary: warning[400],
   warningSecondary: warning[500],
-  successPrimary: success[600],
+  successPrimary: success[400],
   successSecondary: success[500]
 };
-var border4 = {
-  primary: gray[300],
-  secondary: gray[200],
-  tertiary: gray[100],
-  disabled: gray[300],
-  disabledSubtle: gray[200],
-  brand: magenta[300],
-  brandSolid: magenta[400],
-  brandSolidAlt: magenta[400],
-  error: error[300],
+var border2 = {
+  primary: gray[700],
+  secondary: gray[800],
+  tertiary: gray[800],
+  disabled: gray[700],
+  disabledSubtle: gray[800],
+  brand: gray[600],
+  brandSolid: gray[100],
+  brandSolidAlt: gray[100],
+  error: error[800],
   errorSolid: error[600]
 };
-var buttonColors4 = {
+var buttonColors2 = {
   primary: {
-    bg: magenta[400],
-    bgHover: magenta[500],
-    fg: base.white,
-    fgHover: base.white,
-    border: magenta[400],
-    borderHover: magenta[500]
+    bg: gray[100],
+    bgHover: gray[200],
+    fg: gray[950],
+    fgHover: gray[950],
+    border: gray[100],
+    borderHover: gray[200]
   },
   secondary: {
-    bg: gray[900],
-    bgHover: gray[950],
-    fg: base.white,
-    fgHover: base.white,
-    border: gray[900],
-    borderHover: gray[950]
+    bg: gray[100],
+    bgHover: base.white,
+    fg: gray[900],
+    fgHover: gray[950],
+    border: gray[100],
+    borderHover: base.white
   },
   secondaryColor: {
-    bg: base.white,
-    bgHover: magenta[50],
-    fg: magenta[400],
-    fgHover: magenta[500],
-    border: magenta[300],
-    borderHover: magenta[300]
+    bg: gray[900],
+    bgHover: gray[800],
+    fg: gray[100],
+    fgHover: gray[50],
+    border: gray[700],
+    borderHover: gray[700]
   },
   tertiary: {
-    fg: gray[600],
-    fgHover: gray[700],
-    bgHover: gray[50]
+    fg: gray[300],
+    fgHover: gray[100],
+    bgHover: gray[800]
   },
   tertiaryColor: {
-    fg: magenta[400],
-    fgHover: magenta[500],
-    bgHover: magenta[50]
+    fg: gray[100],
+    fgHover: gray[50],
+    bgHover: gray[800]
   },
   primaryError: {
     bg: error[600],
-    bgHover: error[700],
+    bgHover: error[500],
     fg: base.white,
     fgHover: base.white,
     border: error[600],
-    borderHover: error[700]
+    borderHover: error[500]
   },
   secondaryError: {
-    bg: base.white,
-    bgHover: error[50],
-    fg: error[700],
-    fgHover: error[800],
-    border: error[300],
-    borderHover: error[300]
+    bg: gray[900],
+    bgHover: error[950],
+    fg: error[300],
+    fgHover: error[200],
+    border: error[800],
+    borderHover: error[800]
   },
   tertiaryError: {
-    fg: error[700],
-    fgHover: error[800],
-    bgHover: error[50]
+    fg: error[300],
+    fgHover: error[200],
+    bgHover: error[950]
   }
 };
-var avatarColors4 = {
-  bg: gray[100],
-  contrastBorder: "#00000014",
-  profilePhotoBorder: base.white,
-  focusBorder: "#a0a0a624"
-  // gray[400] + 14% alpha
-};
-var breadcrumbColors4 = {
-  fg: gray[600],
-  fgHover: gray[700],
-  bgHover: gray[50],
-  brandBgHover: magenta[50],
-  brandFgHover: magenta[700],
+var breadcrumbColors2 = {
+  fg: gray[400],
+  fgHover: gray[200],
+  bgHover: gray[800],
+  brandBgHover: gray[800],
+  brandFgHover: gray[100],
   iconFg: gray[500],
-  iconFgHover: gray[700],
-  brandIconFgHover: magenta[700]
+  iconFgHover: gray[300],
+  brandIconFgHover: gray[100]
 };
-var iconColors4 = {
-  fgBrand: magenta[400],
-  fgBrandOnBrand: magenta[200],
-  featuredModernBorder: gray[200],
-  featuredLightFgBrand: magenta[400],
-  featuredLightFgGray: gray[500],
-  featuredLightFgError: error[600],
-  featuredLightFgWarning: warning[600],
-  featuredLightFgSuccess: success[600],
+var iconColors2 = {
+  fgBrand: gray[100],
+  fgBrandOnBrand: gray[700],
+  featuredModernBorder: gray[700],
+  featuredLightFgBrand: gray[100],
+  featuredLightFgGray: gray[400],
+  featuredLightFgError: error[400],
+  featuredLightFgWarning: warning[400],
+  featuredLightFgSuccess: success[400],
   featuredDarkFgBrand: base.white,
   featuredDarkFgGray: base.white,
   featuredDarkFgError: base.white,
   featuredDarkFgWarning: base.white,
   featuredDarkFgSuccess: base.white
 };
-var navColors4 = {
-  itemIconFg: gray[500],
-  itemIconFgActive: gray[700],
-  itemButtonIconFg: gray[500],
-  itemButtonIconFgActive: gray[700]
+var sliderColors2 = {
+  handleBorder: gray[100],
+  handleBg: gray[50]
 };
-var sliderColors4 = {
-  handleBorder: magenta[400],
-  handleBg: base.white
+var avatarColors2 = {
+  bg: gray[800],
+  fg: gray[50],
+  contrastBorder: "#ffffff1f",
+  profilePhotoBorder: gray[900],
+  focusBorder: "#a0a0a624"
 };
-var toggleColors4 = {
-  buttonFgDisabled: gray[50]
+var navColors2 = {
+  itemIconFg: gray[400],
+  itemIconFgActive: gray[100],
+  itemButtonIconFg: gray[400],
+  itemButtonIconFgActive: gray[100]
 };
-var chartColors4 = {
-  axisFg: gray[100],
-  gridlineFg: gray[100],
-  labelFg: gray[600],
-  labelFgEmphasis: gray[700],
-  bg: base.white,
-  bgAlt: gray[50],
-  tooltipBg: gray[950],
-  tooltipFg: base.white,
+var toggleColors2 = {
+  buttonFgDisabled: gray[800]
+};
+var chartColors2 = {
+  axisFg: gray[800],
+  gridlineFg: gray[800],
+  labelFg: gray[400],
+  labelFgEmphasis: gray[300],
+  bg: gray[900],
+  bgAlt: gray[800],
+  tooltipBg: gray[50],
+  tooltipFg: gray[900],
   crosshairFg: gray[500],
-  legendFg: text4.tertiary,
+  legendFg: text2.tertiary,
   series: [
-    { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
-    { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
-    { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
-    { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
-    { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
-    { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
-    { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
-    { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
-    { fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
-    { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
-    { fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
-    { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
+    { fg: violet[400], fgHover: violet[300], bg: violet[900], bgHover: violet[800] },
+    { fg: magenta[400], fgHover: magenta[300], bg: magenta[900], bgHover: magenta[800] },
+    { fg: misc.teal[300], fgHover: misc.teal[200], bg: misc.teal[900], bgHover: misc.teal[800] },
+    { fg: warning[400], fgHover: warning[300], bg: warning[900], bgHover: warning[800] },
+    { fg: misc.blueLight[400], fgHover: misc.blueLight[300], bg: misc.blueLight[900], bgHover: misc.blueLight[800] },
+    { fg: misc.rose[400], fgHover: misc.rose[300], bg: misc.rose[900], bgHover: misc.rose[800] },
+    { fg: misc.green[400], fgHover: misc.green[300], bg: misc.green[900], bgHover: misc.green[800] },
+    { fg: misc.orangeDark[400], fgHover: misc.orangeDark[300], bg: misc.orangeDark[900], bgHover: misc.orangeDark[800] },
+    { fg: misc.cyan[400], fgHover: misc.cyan[300], bg: misc.cyan[900], bgHover: misc.cyan[800] },
+    { fg: misc.orange[300], fgHover: misc.orange[200], bg: misc.orange[900], bgHover: misc.orange[800] },
+    { fg: misc.teal[500], fgHover: misc.teal[400], bg: misc.teal[800], bgHover: misc.teal[700] },
+    { fg: misc.pink[400], fgHover: misc.pink[300], bg: misc.pink[900], bgHover: misc.pink[800] }
   ]
 };
-var focusRings4 = {
-  brand: "0px 0px 0px 4px #FF78F33d",
-  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #FF78F33d",
-  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #FF78F33d",
+var focusRings2 = {
+  brand: "0px 0px 0px 4px #4040403d",
+  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
+  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
   gray: "0px 0px 0px 4px #a0a0a624",
   grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
   grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
   error: "0px 0px 0px 4px #f044383d",
   errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
 };
-var forestInternalPreset = {
-  name: "forest-internal",
-  defaultVariant: "light",
-  variants: {
-    light: {
-      tokens: {
-        base,
-        error,
-        warning,
-        success,
-        info,
-        spacing,
-        radius: radius4,
-        shadows,
-        focusRings: focusRings4,
-        fontFamily: '"Aeonik", sans-serif',
-        fontFamilyMono: '"Aeonik Mono", monospace',
-        fontSize,
-        lineHeight,
-        fontWeight,
-        display,
-        container,
-        widths,
-        text: text4,
-        bg: bg4,
-        fg: fg4,
-        border: border4,
-        buttonColors: buttonColors4,
-        avatarColors: avatarColors4,
-        breadcrumbColors: breadcrumbColors4,
-        iconColors: iconColors4,
-        navColors: navColors4,
-        sliderColors: sliderColors4,
-        toggleColors: toggleColors4,
-        chartColors: chartColors4,
-        alpha
-      }
-    }
-  }
+var letterSpacing = {
+  h1: "-0.02em",
+  h2: "-0.02em",
+  h3: "-0.02em",
+  h4: "-0.02em",
+  h5: "-0.02em",
+  h6: "-0.02em",
+  subtitle1: "0.02em",
+  subtitle2: "0.02em",
+  body1: "0.02em",
+  body2: "0.02em",
+  caption: "0.02em",
+  overline: "0.02em",
+  button: "0.02em"
+};
+var alkemyPlusDarkTokens = {
+  base,
+  error,
+  warning,
+  success,
+  info,
+  spacing,
+  radius: radius2,
+  shadows,
+  focusRings: focusRings2,
+  fontFamily: '"Aeonik", sans-serif',
+  fontFamilyMono: '"Aeonik Mono", monospace',
+  fontSize,
+  lineHeight,
+  fontWeight,
+  display,
+  container,
+  widths,
+  text: text2,
+  bg: bg2,
+  fg: fg2,
+  border: border2,
+  buttonColors: buttonColors2,
+  avatarColors: avatarColors2,
+  breadcrumbColors: breadcrumbColors2,
+  iconColors: iconColors2,
+  navColors: navColors2,
+  sliderColors: sliderColors2,
+  toggleColors: toggleColors2,
+  chartColors: chartColors2,
+  alpha,
+  letterSpacing,
+  highlight
 };
 
 // src/theme/presets/forest-alkemy-plus.ts
-var info2 = violet;
-var highlight = magenta;
-var colors2 = {
+var highlight2 = magenta;
+var colors = {
   base,
   error,
   warning,
   success,
-  info: info2,
+  info,
   brand: {
     25: gray[25],
     50: gray[50],
@@ -3789,7 +3695,7 @@ var colors2 = {
   accent: red,
   gray
 };
-var radius5 = {
+var radius3 = {
   ...radius,
   xxs: 1,
   xs: 2,
@@ -3801,7 +3707,7 @@ var radius5 = {
   "3xl": 10,
   "4xl": 12
 };
-var text5 = {
+var text3 = {
   primary: gray[900],
   secondary: gray[700],
   secondaryHover: gray[800],
@@ -3812,19 +3718,19 @@ var text5 = {
   placeholder: gray[500],
   placeholderSubtle: gray[300],
   white: base.white,
-  brandPrimary: colors2.brand[900],
-  brandSecondary: colors2.brand[700],
-  brandTertiary: colors2.brand[600],
-  brandTertiaryAlt: colors2.brand[600],
+  brandPrimary: colors.brand[900],
+  brandSecondary: colors.brand[700],
+  brandTertiary: colors.brand[600],
+  brandTertiaryAlt: colors.brand[600],
   primaryOnBrand: base.white,
-  secondaryOnBrand: colors2.brand[200],
-  tertiaryOnBrand: colors2.brand[200],
-  quaternaryOnBrand: colors2.brand[300],
+  secondaryOnBrand: colors.brand[200],
+  tertiaryOnBrand: colors.brand[200],
+  quaternaryOnBrand: colors.brand[300],
   errorPrimary: error[600],
   warningPrimary: warning[600],
   successPrimary: success[600]
 };
-var bg5 = {
+var bg3 = {
   primary: gray[25],
   primaryAlt: gray[25],
   primaryHover: gray[100],
@@ -3840,13 +3746,13 @@ var bg5 = {
   disabled: gray[100],
   disabledSubtle: gray[50],
   overlay: gray[950],
-  brandPrimary: colors2.brand[50],
-  brandPrimaryAlt: colors2.brand[50],
-  brandSecondary: colors2.brand[100],
-  brandSolid: colors2.brand[600],
-  brandSolidHover: colors2.brand[700],
-  brandSection: colors2.brand[800],
-  brandSectionSubtle: colors2.brand[700],
+  brandPrimary: colors.brand[50],
+  brandPrimaryAlt: colors.brand[50],
+  brandSecondary: colors.brand[100],
+  brandSolid: colors.brand[600],
+  brandSolidHover: colors.brand[700],
+  brandSection: colors.brand[800],
+  brandSectionSubtle: colors.brand[700],
   errorPrimary: error[50],
   errorSecondary: error[100],
   errorSolid: error[600],
@@ -3857,7 +3763,7 @@ var bg5 = {
   successSecondary: success[100],
   successSolid: success[600]
 };
-var fg5 = {
+var fg3 = {
   primary: gray[900],
   secondary: gray[700],
   secondaryHover: gray[800],
@@ -3871,9 +3777,9 @@ var fg5 = {
   white: base.white,
   disabled: gray[400],
   disabledSubtle: gray[300],
-  brandPrimary: colors2.brand[600],
-  brandPrimaryAlt: colors2.brand[600],
-  brandSecondary: colors2.brand[500],
+  brandPrimary: colors.brand[600],
+  brandPrimaryAlt: colors.brand[600],
+  brandSecondary: colors.brand[500],
   errorPrimary: error[600],
   errorSecondary: error[500],
   warningPrimary: warning[600],
@@ -3881,26 +3787,26 @@ var fg5 = {
   successPrimary: success[600],
   successSecondary: success[500]
 };
-var border5 = {
+var border3 = {
   primary: gray[300],
   secondary: gray[200],
   tertiary: gray[100],
   disabled: gray[300],
   disabledSubtle: gray[200],
   brand: gray[400],
-  brandSolid: colors2.brand[600],
-  brandSolidAlt: colors2.brand[600],
+  brandSolid: colors.brand[600],
+  brandSolidAlt: colors.brand[600],
   error: error[300],
   errorSolid: error[600]
 };
-var buttonColors5 = {
+var buttonColors3 = {
   primary: {
-    bg: colors2.brand[700],
-    bgHover: colors2.brand[800],
+    bg: colors.brand[700],
+    bgHover: colors.brand[800],
     fg: base.white,
     fgHover: base.white,
-    border: colors2.brand[700],
-    borderHover: colors2.brand[800]
+    border: colors.brand[700],
+    borderHover: colors.brand[800]
   },
   secondary: {
     bg: gray[900],
@@ -3912,11 +3818,11 @@ var buttonColors5 = {
   },
   secondaryColor: {
     bg: base.white,
-    bgHover: colors2.brand[50],
-    fg: colors2.brand[700],
-    fgHover: colors2.brand[800],
-    border: colors2.brand[300],
-    borderHover: colors2.brand[300]
+    bgHover: colors.brand[50],
+    fg: colors.brand[700],
+    fgHover: colors.brand[800],
+    border: colors.brand[300],
+    borderHover: colors.brand[300]
   },
   tertiary: {
     fg: gray[600],
@@ -3924,9 +3830,9 @@ var buttonColors5 = {
     bgHover: gray[50]
   },
   tertiaryColor: {
-    fg: colors2.brand[700],
-    fgHover: colors2.brand[800],
-    bgHover: colors2.brand[50]
+    fg: colors.brand[700],
+    fgHover: colors.brand[800],
+    bgHover: colors.brand[50]
   },
   primaryError: {
     bg: error[600],
@@ -3950,28 +3856,21 @@ var buttonColors5 = {
     bgHover: error[50]
   }
 };
-var avatarColors5 = {
-  bg: gray[100],
-  contrastBorder: "#00000014",
-  profilePhotoBorder: base.white,
-  focusBorder: "#a0a0a624"
-  // gray[400] + 14% alpha
-};
-var breadcrumbColors5 = {
+var breadcrumbColors3 = {
   fg: gray[600],
   fgHover: gray[700],
   bgHover: gray[50],
-  brandBgHover: colors2.brand[50],
-  brandFgHover: colors2.brand[700],
+  brandBgHover: colors.brand[50],
+  brandFgHover: colors.brand[700],
   iconFg: gray[500],
   iconFgHover: gray[700],
-  brandIconFgHover: colors2.brand[700]
+  brandIconFgHover: colors.brand[700]
 };
-var iconColors5 = {
-  fgBrand: colors2.brand[600],
-  fgBrandOnBrand: colors2.brand[200],
+var iconColors3 = {
+  fgBrand: colors.brand[600],
+  fgBrandOnBrand: colors.brand[200],
   featuredModernBorder: gray[200],
-  featuredLightFgBrand: colors2.brand[600],
+  featuredLightFgBrand: colors.brand[600],
   featuredLightFgGray: gray[500],
   featuredLightFgError: error[600],
   featuredLightFgWarning: warning[600],
@@ -3982,20 +3881,36 @@ var iconColors5 = {
   featuredDarkFgWarning: base.white,
   featuredDarkFgSuccess: base.white
 };
-var navColors5 = {
-  itemIconFg: gray[500],
-  itemIconFgActive: gray[700],
-  itemButtonIconFg: gray[500],
-  itemButtonIconFgActive: gray[700]
-};
-var sliderColors5 = {
-  handleBorder: colors2.brand[600],
+var sliderColors3 = {
+  handleBorder: colors.brand[600],
   handleBg: base.white
 };
-var toggleColors5 = {
-  buttonFgDisabled: gray[50]
+var letterSpacing2 = {
+  h1: "-0.02em",
+  h2: "-0.02em",
+  h3: "-0.02em",
+  h4: "-0.02em",
+  h5: "-0.02em",
+  h6: "-0.02em",
+  subtitle1: "0.02em",
+  subtitle2: "0.02em",
+  body1: "0.02em",
+  body2: "0.02em",
+  caption: "0.02em",
+  overline: "0.02em",
+  button: "0.02em"
+};
+var focusRings3 = {
+  brand: "0px 0px 0px 4px #4040403d",
+  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
+  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
+  gray: "0px 0px 0px 4px #a0a0a624",
+  grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
+  grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
+  error: "0px 0px 0px 4px #f044383d",
+  errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
 };
-var chartColors5 = {
+var chartColors3 = {
   axisFg: gray[100],
   gridlineFg: gray[100],
   labelFg: gray[600],
@@ -4005,7 +3920,7 @@ var chartColors5 = {
   tooltipBg: gray[950],
   tooltipFg: base.white,
   crosshairFg: gray[500],
-  legendFg: text5.tertiary,
+  legendFg: text3.tertiary,
   series: [
     // Brand accents lead — violet + magenta anchor the palette
     { fg: violet[500], fgHover: violet[600], bg: violet[100], bgHover: violet[200] },
@@ -4024,79 +3939,47 @@ var chartColors5 = {
     { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] }
   ]
 };
-var letterSpacing = {
-  h1: "-0.02em",
-  h2: "-0.02em",
-  h3: "-0.02em",
-  h4: "-0.02em",
-  h5: "-0.02em",
-  h6: "-0.02em",
-  subtitle1: "0.02em",
-  subtitle2: "0.02em",
-  body1: "0.02em",
-  body2: "0.02em",
-  caption: "0.02em",
-  overline: "0.02em",
-  button: "0.02em"
-};
-var focusRings5 = {
-  brand: "0px 0px 0px 4px #4040403d",
-  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
-  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
-  gray: "0px 0px 0px 4px #a0a0a624",
-  grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
-  grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
-  error: "0px 0px 0px 4px #f044383d",
-  errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
-};
 var forestAlkemyPlusPreset = {
   name: "forest-alkemy+",
-  defaultVariant: "light",
-  variants: {
-    light: {
-      tokens: {
-        base,
-        error,
-        warning,
-        success,
-        info: info2,
-        spacing,
-        radius: radius5,
-        shadows,
-        focusRings: focusRings5,
-        fontFamily: '"Aeonik", sans-serif',
-        fontFamilyMono: '"Aeonik Mono", monospace',
-        fontSize,
-        lineHeight,
-        fontWeight,
-        display,
-        container,
-        widths,
-        text: text5,
-        bg: bg5,
-        fg: fg5,
-        border: border5,
-        buttonColors: buttonColors5,
-        avatarColors: avatarColors5,
-        breadcrumbColors: breadcrumbColors5,
-        iconColors: iconColors5,
-        navColors: navColors5,
-        sliderColors: sliderColors5,
-        toggleColors: toggleColors5,
-        chartColors: chartColors5,
-        alpha,
-        letterSpacing,
-        highlight
-      }
-    }
-  }
+  tokens: {
+    base,
+    error,
+    warning,
+    success,
+    info,
+    spacing,
+    radius: radius3,
+    shadows,
+    focusRings: focusRings3,
+    fontFamily: '"Aeonik", sans-serif',
+    fontFamilyMono: '"Aeonik Mono", monospace',
+    fontSize,
+    lineHeight,
+    fontWeight,
+    display,
+    container,
+    widths,
+    text: text3,
+    bg: bg3,
+    fg: fg3,
+    border: border3,
+    buttonColors: buttonColors3,
+    avatarColors,
+    breadcrumbColors: breadcrumbColors3,
+    iconColors: iconColors3,
+    navColors,
+    sliderColors: sliderColors3,
+    toggleColors,
+    chartColors: chartColors3,
+    alpha,
+    letterSpacing: letterSpacing2,
+    highlight: highlight2
+  },
+  tokensDark: alkemyPlusDarkTokens
 };
 
 // src/theme/presets/index.ts
 var presetRegistry = /* @__PURE__ */ new Map();
-presetRegistry.set(forestExternalPreset.name, forestExternalPreset);
-presetRegistry.set(forestAgencyPreset.name, forestAgencyPreset);
-presetRegistry.set(forestInternalPreset.name, forestInternalPreset);
 presetRegistry.set(forestAlkemyPlusPreset.name, forestAlkemyPlusPreset);
 function getPreset(name) {
   return presetRegistry.get(name);
@@ -4109,9 +3992,9 @@ function getAvailablePresets() {
 }
 
 // src/theme/index.ts
-var agencyTokens = forestAgencyPreset.variants.light.tokens;
-var forestTheme = buildTheme(agencyTokens);
-var forestThemeOptions = buildThemeOptions(agencyTokens);
+var { tokens, tokensDark } = forestAlkemyPlusPreset;
+var forestTheme = buildTheme(tokens, tokensDark);
+var forestThemeOptions = buildThemeOptions(tokens, tokensDark);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   alpha,
@@ -4133,10 +4016,7 @@ var forestThemeOptions = buildThemeOptions(agencyTokens);
   fontFamilyMono,
   fontSize,
   fontWeight,
-  forestAgencyPreset,
   forestAlkemyPlusPreset,
-  forestExternalPreset,
-  forestInternalPreset,
   forestTheme,
   forestThemeOptions,
   getAvailablePresets,