@plumile/ui 0.1.144 → 0.1.145

package/lib/esm/theme/publicTheme.css.js

@@ -217,6 +217,14 @@ var e = function() {
 			toneDangerSurface: "#FDECEF",
 			toneDangerText: "#991B1B",
 			toneDangerBorder: "#FECACA",
+			onPrimary: "#FFFFFF",
+			onAccent: "#060607",
+			onBrand: "#FFFFFF",
+			brandSubtleSurface: "rgba(212, 170, 177, 0.10)",
+			brandSubtleBorder: "rgba(212, 170, 177, 0.20)",
+			avatarSurface: "#1E3A8A",
+			avatarText: "#FFFFFF",
+			timelineFadeSurface: "#FFFFFF",
 			error: "#ED4245",
 			"error-8": "#FDECEF",
 			"error-10": "#FDECEF",
@@ -1909,6 +1917,14 @@ var e = function() {
 			toneDangerSurface: "#FDECEF",
 			toneDangerText: "#991B1B",
 			toneDangerBorder: "#FECACA",
+			onPrimary: "#FFFFFF",
+			onAccent: "#060607",
+			onBrand: "#FFFFFF",
+			brandSubtleSurface: "rgba(212, 170, 177, 0.10)",
+			brandSubtleBorder: "rgba(212, 170, 177, 0.20)",
+			avatarSurface: "#1E3A8A",
+			avatarText: "#FFFFFF",
+			timelineFadeSurface: "#FFFFFF",
 			error: "#ED4245",
 			"error-8": "#FDECEF",
 			"error-10": "#FDECEF",
@@ -2333,19 +2349,19 @@ var e = function() {
 			"black-100": "rgba(0, 0, 0, 0.1)",
 			"black-10": "rgba(0, 0, 0, 0.03)",
 			"black-2": "rgba(0, 0, 0, 0.02)",
-			primary: "#B2184F",
-			primaryLight: "rgba(165, 2, 70, 0.22)",
+			primary: "#e85d8d",
+			primaryLight: "rgba(232, 93, 141, 0.2)",
 			secondary: "#166534",
 			secondaryHover: "#23A559",
 			secondaryLight: "#173126",
-			surface: "#11161d",
-			surfaceSecondary: "#171d26",
-			surfaceMuted: "#1c2430",
-			surfaceElevated: "#202938",
-			background: "#0b1016",
-			backgroundSecondary: "#121822",
-			backgroundTertiary: "#18202c",
-			backgroundModifier: "#283244",
+			surface: "#10151d",
+			surfaceSecondary: "#151c26",
+			surfaceMuted: "#1d2633",
+			surfaceElevated: "#202b39",
+			background: "#080d13",
+			backgroundSecondary: "#0f1620",
+			backgroundTertiary: "#17202c",
+			backgroundModifier: "#2a3546",
 			text: "#f5f7fb",
 			textSecondary: "#c5ccda",
 			textMuted: "#98a3b7",
@@ -2364,13 +2380,13 @@ var e = function() {
 			codeText: "#f5f7fb",
 			codeToolbarSurface: "#351526",
 			shimmerHighlight: "rgba(255, 255, 255, 0.52)",
-			border: "#2f3a4d",
-			borderSubtle: "#263040",
+			border: "#344154",
+			borderSubtle: "#293445",
 			borderStrong: "#415069",
 			borderLight: "#364357",
-			tonePrimarySurface: "#351526",
-			tonePrimaryText: "#ffabc7",
-			tonePrimaryBorder: "#8a3157",
+			tonePrimarySurface: "#321c2a",
+			tonePrimaryText: "#ffb8cf",
+			tonePrimaryBorder: "#8f3e5d",
 			toneInfoSurface: "#172c52",
 			toneInfoText: "#9cc7ff",
 			toneInfoBorder: "#3d6ea8",
@@ -2383,6 +2399,14 @@ var e = function() {
 			toneDangerSurface: "#3a171c",
 			toneDangerText: "#ff9aa2",
 			toneDangerBorder: "#b94b54",
+			onPrimary: "#080d13",
+			onAccent: "#080d13",
+			onBrand: "#080d13",
+			brandSubtleSurface: "#271a24",
+			brandSubtleBorder: "#4b2b3a",
+			avatarSurface: "#172c52",
+			avatarText: "#9cc7ff",
+			timelineFadeSurface: "#202b39",
 			error: "#ED4245",
 			"error-8": "#FDECEF",
 			"error-10": "#FDECEF",
@@ -2394,11 +2418,11 @@ var e = function() {
 			warningLight: "#3b2d16",
 			info: "#3B82F6",
 			infoLight: "#182544",
-			brandPrimaryRed: "#B2184F",
-			brandSecondaryOrange: "#8f6771",
-			"brandSecondaryOrange-10": "rgba(143, 103, 113, 0.10)",
-			"brandSecondaryOrange-20": "rgba(143, 103, 113, 0.20)",
-			accent: "#b36a78",
+			brandPrimaryRed: "#e85d8d",
+			brandSecondaryOrange: "#d99aaa",
+			"brandSecondaryOrange-10": "rgba(217, 154, 170, 0.10)",
+			"brandSecondaryOrange-20": "rgba(217, 154, 170, 0.20)",
+			accent: "#d98599",
 			brandWhite: "#FFFFFF",
 			brandLightGray: "#1a212d",
 			brandDarkGray: "#eef2f8",
@@ -2408,14 +2432,14 @@ var e = function() {
 			brandDiagonal: "linear-gradient(135deg, #B2184F, #D4AAB1)",
 			brandDiagonal125: "linear-gradient(125deg, #B2184F, #D4AAB1)",
 			brandBackgroundGradient: "linear-gradient(20deg, #D4AAB1, #C97E8A, #B2184F)",
-			pageShellSurface: "linear-gradient(180deg, #171d26 0%, #1c2430 100%)",
-			floatingChatSurface: "radial-gradient(circle at 0% 0%, rgba(143, 103, 113, 0.10) 0%, transparent 55%), linear-gradient(135deg, #11161d 0%, #171d26 100%)",
-			loadingShimmer: "linear-gradient(90deg, #1c2430 0%, #171d26 45%, #1c2430 90%)",
-			surfaceChrome: "linear-gradient(180deg, #11161d 0%, #171d26 100%)",
+			pageShellSurface: "linear-gradient(180deg, #151c26 0%, #1d2633 100%)",
+			floatingChatSurface: "radial-gradient(circle at 0% 0%, rgba(217, 154, 170, 0.10) 0%, transparent 55%), linear-gradient(135deg, #10151d 0%, #151c26 100%)",
+			loadingShimmer: "linear-gradient(90deg, #1d2633 0%, #151c26 45%, #1d2633 90%)",
+			surfaceChrome: "linear-gradient(180deg, #10151d 0%, #151c26 100%)",
 			tableHeaderAccent: "linear-gradient(90deg, rgba(255, 171, 199, 0.08), transparent 64%)",
-			listHeaderSurface: "linear-gradient(135deg, #171d26 0%, #11161d 58%)",
-			pendingBar: "linear-gradient(90deg, #351526 0%, #ffabc7 60%, #351526 100%)",
-			metricPrimarySurface: "linear-gradient(135deg, #351526, transparent 58%)",
+			listHeaderSurface: "linear-gradient(135deg, #151c26 0%, #10151d 58%)",
+			pendingBar: "linear-gradient(90deg, #321c2a 0%, #ffb8cf 60%, #321c2a 100%)",
+			metricPrimarySurface: "linear-gradient(135deg, #321c2a, transparent 58%)",
 			metricInfoSurface: "linear-gradient(135deg, #172c52, transparent 58%)",
 			metricSuccessSurface: "linear-gradient(135deg, #153624, transparent 58%)",
 			metricWarningSurface: "linear-gradient(135deg, #3b2d16, transparent 58%)",
@@ -2545,19 +2569,19 @@ var e = function() {
 			brandCardGlow: "0 0px 72px color-mix(in srgb, #000 38%, transparent)",
 			authCardGlow: "0 0 96px color-mix(in srgb, #000 42%, transparent)",
 			profileDropdownShadow: "0 18px 36px color-mix(in srgb, #000 40%, transparent)",
-			badgeInset: "inset 0 0 0 1px #263040",
-			badgeDotRing: "0 0 0 2px #11161d",
-			primaryInsetRing: "inset 0 0 0 1px #B2184F",
-			primaryLightRing: "0 0 0 1px rgba(165, 2, 70, 0.22)",
-			primaryLightRingStrong: "0 0 0 2px rgba(165, 2, 70, 0.22)",
-			focusRing: "0 0 0 3px rgba(165, 2, 70, 0.22)",
+			badgeInset: "inset 0 0 0 1px #293445",
+			badgeDotRing: "0 0 0 2px #10151d",
+			primaryInsetRing: "inset 0 0 0 1px #e85d8d",
+			primaryLightRing: "0 0 0 1px rgba(232, 93, 141, 0.2)",
+			primaryLightRingStrong: "0 0 0 2px rgba(232, 93, 141, 0.2)",
+			focusRing: "0 0 0 3px rgba(232, 93, 141, 0.2)",
 			focusRingError: "0 0 0 3px color-mix(in srgb, #ED4245 24%, transparent)",
-			focusRingBrand: "0 0 0 2px #8f6771",
+			focusRingBrand: "0 0 0 2px #d99aaa",
 			interactiveHover: "0 8px 18px color-mix(in srgb, #000 28%, transparent)",
 			interactivePressed: "0 2px 6px color-mix(in srgb, #000 36%, transparent)",
 			successLightRing: "0 0 0 2px #183626",
 			sidebarActiveInset: "inset 2px 0 0 #60A5FA",
-			metricPrimaryAccent: "inset 3px 0 0 #8a3157",
+			metricPrimaryAccent: "inset 3px 0 0 #8f3e5d",
 			metricInfoAccent: "inset 3px 0 0 #3d6ea8",
 			metricSuccessAccent: "inset 3px 0 0 #2f8d55",
 			metricWarningAccent: "inset 3px 0 0 #a56a18",
@@ -3920,54 +3944,54 @@ var e = function() {
 			12: "12deg"
 		},
 		sidebar: {
-			background: "#11161d",
-			borderColor: "#263040",
+			background: "#0f1620",
+			borderColor: "#344154",
 			scrollbarColor: "#364357",
 			itemColor: "#c5ccda",
-			itemHoverBackground: "rgba(143, 103, 113, 0.10)",
+			itemHoverBackground: "#1d2633",
 			itemHoverColor: "#f5f7fb",
-			itemActiveBackground: "#B2184F",
-			itemActiveBackgroundImage: "linear-gradient(135deg, #B2184F, #8f6771)",
-			itemActiveColor: "#FFFFFF",
-			itemActiveBorderColor: "#B2184F",
-			itemActiveShadow: "0 0 0 2px rgba(143, 103, 113, 0.20)",
+			itemActiveBackground: "#321c2a",
+			itemActiveBackgroundImage: "none",
+			itemActiveColor: "#ffb8cf",
+			itemActiveBorderColor: "#8f3e5d",
+			itemActiveShadow: "inset 2px 0 0 #ffb8cf",
 			itemDisabledColor: "#98a3b7",
-			itemFocusRing: "0 0 0 2px #8f6771",
-			nestedBorderColor: "#B2184F",
+			itemFocusRing: "0 0 0 3px rgba(232, 93, 141, 0.2)",
+			nestedBorderColor: "#344154",
 			sectionHeaderColor: "#98a3b7",
 			sectionHeaderIconColor: "#98a3b7",
-			sectionHeaderHoverBackground: "rgba(143, 103, 113, 0.10)",
+			sectionHeaderHoverBackground: "#1d2633",
 			sectionToggleColor: "#98a3b7",
-			actionColor: "#8f6771",
-			actionHoverBackground: "#B2184F",
-			actionHoverColor: "#FFFFFF",
-			actionFocusRing: "0 0 0 2px #8f6771",
-			dragHandleColor: "#8f6771",
-			dragHandleHoverBackground: "rgba(143, 103, 113, 0.10)",
-			dragHandleHoverColor: "#FFFFFF",
-			dragOverlayBackground: "#202938",
+			actionColor: "#c5ccda",
+			actionHoverBackground: "#1d2633",
+			actionHoverColor: "#f5f7fb",
+			actionFocusRing: "0 0 0 3px rgba(232, 93, 141, 0.2)",
+			dragHandleColor: "#c5ccda",
+			dragHandleHoverBackground: "#1d2633",
+			dragHandleHoverColor: "#f5f7fb",
+			dragOverlayBackground: "#202b39",
 			dragOverlayColor: "#f5f7fb",
-			dragOverlayBorderColor: "#B2184F",
-			insertionIndicatorColor: "#B2184F",
-			collapseButtonBackground: "#11161d",
-			collapseButtonColor: "#8f6771",
-			collapseButtonBorderColor: "#B2184F",
-			collapseButtonHoverBackground: "#B2184F",
-			collapseButtonHoverColor: "#FFFFFF",
-			collapseButtonHoverShadow: "0 10px 24px rgba(143, 103, 113, 0.20)",
-			collapseButtonFocusRing: "0 0 0 2px #8f6771",
+			dragOverlayBorderColor: "#344154",
+			insertionIndicatorColor: "#ffb8cf",
+			collapseButtonBackground: "#151c26",
+			collapseButtonColor: "#c5ccda",
+			collapseButtonBorderColor: "#344154",
+			collapseButtonHoverBackground: "#1d2633",
+			collapseButtonHoverColor: "#f5f7fb",
+			collapseButtonHoverShadow: "none",
+			collapseButtonFocusRing: "0 0 0 3px rgba(232, 93, 141, 0.2)",
 			profileTitleColor: "#c5ccda",
-			profileTriggerBackground: "#171d26",
-			profileTriggerBorderColor: "rgba(143, 103, 113, 0.20)",
-			profileTriggerHoverBackground: "#202938",
-			profileTriggerHoverBorderColor: "#8f6771",
-			profileTriggerFocusRing: "0 0 0 2px #8f6771",
-			profileAvatarBackgroundImage: "linear-gradient(135deg, #B2184F, #8f6771)",
+			profileTriggerBackground: "#151c26",
+			profileTriggerBorderColor: "#344154",
+			profileTriggerHoverBackground: "#202b39",
+			profileTriggerHoverBorderColor: "#415069",
+			profileTriggerFocusRing: "0 0 0 3px rgba(232, 93, 141, 0.2)",
+			profileAvatarBackgroundImage: "linear-gradient(135deg, #e85d8d, #d99aaa)",
 			profileAvatarColor: "#FFFFFF",
 			profileTextColor: "#f5f7fb",
 			profileSubtextColor: "#c5ccda",
-			profileMenuHoverBackground: "rgba(143, 103, 113, 0.10)",
-			profileMenuBorderColor: "rgba(143, 103, 113, 0.20)"
+			profileMenuHoverBackground: "#1d2633",
+			profileMenuBorderColor: "#344154"
 		},
 		stroke: {
 			inherit: "inherit",
@@ -4025,19 +4049,19 @@ var e = function() {
 			"black-100": "rgba(0, 0, 0, 0.1)",
 			"black-10": "rgba(0, 0, 0, 0.03)",
 			"black-2": "rgba(0, 0, 0, 0.02)",
-			primary: "#B2184F",
-			primaryLight: "rgba(165, 2, 70, 0.22)",
+			primary: "#e85d8d",
+			primaryLight: "rgba(232, 93, 141, 0.2)",
 			secondary: "#166534",
 			secondaryHover: "#23A559",
 			secondaryLight: "#173126",
-			surface: "#11161d",
-			surfaceSecondary: "#171d26",
-			surfaceMuted: "#1c2430",
-			surfaceElevated: "#202938",
-			background: "#0b1016",
-			backgroundSecondary: "#121822",
-			backgroundTertiary: "#18202c",
-			backgroundModifier: "#283244",
+			surface: "#10151d",
+			surfaceSecondary: "#151c26",
+			surfaceMuted: "#1d2633",
+			surfaceElevated: "#202b39",
+			background: "#080d13",
+			backgroundSecondary: "#0f1620",
+			backgroundTertiary: "#17202c",
+			backgroundModifier: "#2a3546",
 			text: "#f5f7fb",
 			textSecondary: "#c5ccda",
 			textMuted: "#98a3b7",
@@ -4056,13 +4080,13 @@ var e = function() {
 			codeText: "#f5f7fb",
 			codeToolbarSurface: "#351526",
 			shimmerHighlight: "rgba(255, 255, 255, 0.52)",
-			border: "#2f3a4d",
-			borderSubtle: "#263040",
+			border: "#344154",
+			borderSubtle: "#293445",
 			borderStrong: "#415069",
 			borderLight: "#364357",
-			tonePrimarySurface: "#351526",
-			tonePrimaryText: "#ffabc7",
-			tonePrimaryBorder: "#8a3157",
+			tonePrimarySurface: "#321c2a",
+			tonePrimaryText: "#ffb8cf",
+			tonePrimaryBorder: "#8f3e5d",
 			toneInfoSurface: "#172c52",
 			toneInfoText: "#9cc7ff",
 			toneInfoBorder: "#3d6ea8",
@@ -4075,6 +4099,14 @@ var e = function() {
 			toneDangerSurface: "#3a171c",
 			toneDangerText: "#ff9aa2",
 			toneDangerBorder: "#b94b54",
+			onPrimary: "#080d13",
+			onAccent: "#080d13",
+			onBrand: "#080d13",
+			brandSubtleSurface: "#271a24",
+			brandSubtleBorder: "#4b2b3a",
+			avatarSurface: "#172c52",
+			avatarText: "#9cc7ff",
+			timelineFadeSurface: "#202b39",
 			error: "#ED4245",
 			"error-8": "#FDECEF",
 			"error-10": "#FDECEF",
@@ -4086,11 +4118,11 @@ var e = function() {
 			warningLight: "#3b2d16",
 			info: "#3B82F6",
 			infoLight: "#182544",
-			brandPrimaryRed: "#B2184F",
-			brandSecondaryOrange: "#8f6771",
-			"brandSecondaryOrange-10": "rgba(143, 103, 113, 0.10)",
-			"brandSecondaryOrange-20": "rgba(143, 103, 113, 0.20)",
-			accent: "#b36a78",
+			brandPrimaryRed: "#e85d8d",
+			brandSecondaryOrange: "#d99aaa",
+			"brandSecondaryOrange-10": "rgba(217, 154, 170, 0.10)",
+			"brandSecondaryOrange-20": "rgba(217, 154, 170, 0.20)",
+			accent: "#d98599",
 			brandWhite: "#FFFFFF",
 			brandLightGray: "#1a212d",
 			brandDarkGray: "#eef2f8",

package/lib/esm/theme/publicTheme.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"publicTheme.css.js","names":[],"sources":["../../../src/theme/publicTheme.css.ts"],"sourcesContent":["import { createTheme, style } from '@vanilla-extract/css';\n\nimport { opacity, screens, spacing } from './common.js';\nimport { colors } from './colors.js';\nimport { vars } from './themeContract.css.js';\n\nexport const publicLightThemeValues = {\n  spacing,\n  screens,\n  animation: {\n    none: 'none',\n    spin: 'spin 1s linear infinite',\n    ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',\n    pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n    bounce: 'bounce 1s infinite',\n  },\n  colors,\n  backgroundImage: {\n    brandDiagonal: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandDiagonal125: `linear-gradient(125deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandBackgroundGradient: colors.brandBackgroundGradient,\n    pageShellSurface: `linear-gradient(180deg, ${colors.surfaceSecondary} 0%, ${colors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${colors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${colors.surfaceMuted} 0%, ${colors.surfaceSecondary} 45%, ${colors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n    tableHeaderAccent: `linear-gradient(90deg, ${colors.tableHeaderAccent}, transparent 64%)`,\n    listHeaderSurface: `linear-gradient(135deg, ${colors.surfaceSecondary} 0%, ${colors.surface} 58%)`,\n    pendingBar: `linear-gradient(90deg, ${colors.tonePrimarySurface} 0%, ${colors.tonePrimaryText} 60%, ${colors.tonePrimarySurface} 100%)`,\n    metricPrimarySurface: `linear-gradient(135deg, ${colors.tonePrimarySurface}, transparent 58%)`,\n    metricInfoSurface: `linear-gradient(135deg, ${colors.toneInfoSurface}, transparent 58%)`,\n    metricSuccessSurface: `linear-gradient(135deg, ${colors.toneSuccessSurface}, transparent 58%)`,\n    metricWarningSurface: `linear-gradient(135deg, ${colors.toneWarningSurface}, transparent 58%)`,\n    metricDangerSurface: `linear-gradient(135deg, ${colors.toneDangerSurface}, transparent 58%)`,\n    badgeShimmer: `linear-gradient(100deg, ${colors.transparent} 0%, color-mix(in srgb, ${colors.shimmerHighlight} 32%, transparent) 25%, ${colors.shimmerHighlight} 50%, color-mix(in srgb, ${colors.shimmerHighlight} 32%, transparent) 75%, ${colors.transparent} 100%)`,\n  },\n  borderRadius: {\n    none: '0px',\n    sm: '0.125rem',\n    default: '0.25rem',\n    md: '0.375rem',\n    lg: '0.5rem',\n    xl: '0.75rem',\n    '2xl': '1rem',\n    '3xl': '1.5rem',\n    '4xl': '2rem',\n    '1/2': '50%',\n    full: '9999px',\n  },\n  borderSpacing: spacing,\n  borderWidth: {\n    ...spacing,\n    default: '1px',\n    0: '0px',\n    2: '2px',\n    4: '4px',\n    6: '6px',\n    8: '8px',\n  },\n  boxShadow: {\n    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n    inkSoft: '0 6px 18px rgb(15 23 42 / 0.06)',\n    inkGlow: '0 0 45px rgb(15 23 42 / 0.12)',\n    brandGlow: '0 10px 24px rgb(252 106 81 / 0.25)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${colors.brandDarkGray} 12%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${colors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${colors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${colors.primary}`,\n    primaryLightRing: `0 0 0 1px ${colors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${colors.primaryLight}`,\n    focusRing: `0 0 0 3px ${colors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${colors.error} 20%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${colors.black} 8%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${colors.black} 10%, transparent)`,\n    successLightRing: `0 0 0 2px ${colors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${colors['blue-500']}`,\n    metricPrimaryAccent: `inset 3px 0 0 ${colors.tonePrimaryBorder}`,\n    metricInfoAccent: `inset 3px 0 0 ${colors.toneInfoBorder}`,\n    metricSuccessAccent: `inset 3px 0 0 ${colors.toneSuccessBorder}`,\n    metricWarningAccent: `inset 3px 0 0 ${colors.toneWarningBorder}`,\n    metricDangerAccent: `inset 3px 0 0 ${colors.toneDangerBorder}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n    none: 'none',\n  },\n  dropShadow: {\n    sm: '0 1px 1px rgb(0 0 0 / 0.05)',\n    default: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'].join(\n      ', ',\n    ),\n    xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'].join(\n      ', ',\n    ),\n    '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',\n    none: '0 0 #0000',\n  },\n  grayscale: {\n    0: '0',\n    default: '100%',\n  },\n  hueRotate: {\n    0: '0deg',\n    15: '15deg',\n    30: '30deg',\n    60: '60deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  invert: {\n    0: '0',\n    default: '100%',\n  },\n  flex: {\n    1: '1 1 0%',\n    auto: '1 1 auto',\n    initial: '0 1 auto',\n    none: 'none',\n  },\n  flexBasis: {\n    ...spacing,\n    260: '260px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n  },\n  flexGrow: {\n    0: '0',\n    default: '1',\n  },\n  flexShrink: {\n    0: '0',\n    default: '1',\n  },\n  fontFamily: {\n    sans: [\n      'ui-sans-serif',\n      'system-ui',\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      '\"Noto Sans\"',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n      '\"Noto Color Emoji\"',\n    ].join(', '),\n    serif: [\n      'ui-serif',\n      'Georgia',\n      'Cambria',\n      '\"Times New Roman\"',\n      'Times',\n      'serif',\n    ].join(', '),\n    mono: [\n      'ui-monospace',\n      'SFMono-Regular',\n      'Menlo',\n      'Monaco',\n      'Consolas',\n      '\"Liberation Mono\"',\n      '\"Courier New\"',\n      'monospace',\n    ].join(', '),\n  },\n  fontSize: {\n    '3xs': '0.5rem',\n    '2xs': '0.625rem',\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n    '2xl': '1.5rem',\n    '3xl': '1.875rem',\n    '4xl': '2.5rem',\n    '5xl': '3rem',\n    '6xl': '3.75rem',\n    '7xl': '4.5rem',\n    '8xl': '6rem',\n    '9xl': '8rem',\n    responsive: 'clamp(0.700rem, 0.7vw, 0.875rem)',\n  },\n  fontWeight: {\n    thin: '100',\n    extralight: '200',\n    light: '300',\n    normal: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n    extrabold: '800',\n    black: '900',\n  },\n  gridAutoColumns: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridAutoRows: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridColumn: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-7': 'span 7 / span 7',\n    'span-8': 'span 8 / span 8',\n    'span-9': 'span 9 / span 9',\n    'span-10': 'span 10 / span 10',\n    'span-11': 'span 11 / span 11',\n    'span-12': 'span 12 / span 12',\n    'span-full': '1 / -1',\n  },\n  gridColumnEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridColumnStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridRow: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-full': '1 / -1',\n  },\n  gridRowStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridRowEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridTemplateColumns: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    7: 'repeat(7, minmax(0, 1fr))',\n    8: 'repeat(8, minmax(0, 1fr))',\n    9: 'repeat(9, minmax(0, 1fr))',\n    10: 'repeat(10, minmax(0, 1fr))',\n    11: 'repeat(11, minmax(0, 1fr))',\n    12: 'repeat(12, minmax(0, 1fr))',\n    detailSingle: 'minmax(0, 1fr)',\n    twoFrOneFr: 'minmax(0, 2fr) minmax(0, 1fr)',\n    detailAside320: 'minmax(0, 1fr) 320px',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    toolbarActions: 'minmax(0, 1fr) auto auto',\n    backofficeList: 'minmax(0, 1fr)',\n    backofficeDetail: 'minmax(0, 1fr) minmax(18rem, 24rem)',\n    settingsSplit: 'minmax(14rem, 18rem) minmax(0, 1fr)',\n    splitViewSplit: 'minmax(16rem, 26rem) minmax(0, 1fr)',\n    keyValueSplit: 'minmax(0, 10rem) minmax(0, 1fr)',\n    metadataStripSplit: 'minmax(0, 128px) minmax(0, 1fr)',\n    dashboardUneven: '1.1fr 1.3fr 1fr',\n    userProfileSplit: 'minmax(220px, 260px) minmax(0, 1fr)',\n    repeat4Fr: 'repeat(4, 1fr)',\n    autoFillMinmax320: 'repeat(auto-fill, minmax(320px, 1fr))',\n    autoFitMinmax0: 'repeat(auto-fit, minmax(0, 1fr))',\n    autoFitMinmax12_5rem: 'repeat(auto-fit, minmax(12.5rem, 1fr))',\n    autoFitMinmax120: 'repeat(auto-fit, minmax(120px, 1fr))',\n    autoFitMinmax160: 'repeat(auto-fit, minmax(160px, 1fr))',\n    autoFitMinmax180: 'repeat(auto-fit, minmax(180px, 1fr))',\n    autoFitMinmax200: 'repeat(auto-fit, minmax(200px, 1fr))',\n    autoFitMinmax220: 'repeat(auto-fit, minmax(220px, 1fr))',\n    autoFitMinmax240: 'repeat(auto-fit, minmax(240px, 1fr))',\n    autoFitMinmax260: 'repeat(auto-fit, minmax(260px, 1fr))',\n    autoFitMinmax280: 'repeat(auto-fit, minmax(280px, 1fr))',\n    autoFitMinmax320: 'repeat(auto-fit, minmax(320px, 1fr))',\n  },\n  gridTemplateRows: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    autoMinmax0: 'auto minmax(0, 1fr)',\n    autoAutoMinmax0: 'auto auto minmax(0, 1fr)',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    fr0: '0fr',\n    fr1: '1fr',\n  },\n  left: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  top: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  height: {\n    ...spacing,\n    1.1: '1.1rem',\n    260: '260px',\n    300: '300px',\n    340: '340px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n    auto: 'auto',\n  },\n  inset: {\n    ...spacing,\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    full: '100%',\n  },\n  keyframes: {\n    spin: {\n      to: {\n        transform: 'rotate(360deg)',\n      },\n    },\n    ping: {\n      '75%, 100%': {\n        transform: 'scale(2)',\n        opacity: '0',\n      },\n    },\n    pulse: {\n      '50%': {\n        opacity: '.5',\n      },\n    },\n    bounce: {\n      '0%, 100%': {\n        transform: 'translateY(-25%)',\n        animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',\n      },\n      '50%': {\n        transform: 'none',\n        animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',\n      },\n    },\n  },\n  letterSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n    caps: '0.08em',\n    capsTight: '0.06em',\n    capsNarrow: '0.04em',\n  },\n  wordSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n  },\n  lineHeight: {\n    ...spacing,\n    1.2: '1.2',\n    1.3: '1.3',\n    1.4: '1.4',\n    1.45: '1.45',\n    1.5: '1.5',\n    1.6: '1.6',\n    1.7: '1.7',\n    none: '1',\n    tight: '1.25',\n    snug: '1.375',\n    normal: '1.5',\n    relaxed: '1.625',\n    loose: '2',\n    '3xs': '0.75rem',\n    '2xs': '0.85rem',\n    xs: '1rem',\n    sm: '1.25rem',\n    base: '1.5rem',\n    lg: '1.75rem',\n    xl: '1.75rem',\n    '2xl': '2rem',\n    '3xl': '2.25rem',\n    '4xl': 'normal',\n    '5xl': '1',\n    '6xl': '1',\n    '7xl': '1',\n    '8xl': '1',\n    '9xl': '1',\n    responsive: '1',\n  },\n  listStyleType: {\n    none: 'none',\n    disc: 'disc',\n    decimal: 'decimal',\n  },\n  margin: {\n    ...spacing,\n  },\n  maxHeight: {\n    ...spacing,\n    '50vh': '50vh',\n    '70vh': '70vh',\n    '90vh': '90vh',\n    none: 'none',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  maxWidth: {\n    '2xl': '42rem',\n    '3xl': '48rem',\n    '4xl': '56rem',\n    '5xl': '64rem',\n    '6xl': '72rem',\n    '7xl': '80rem',\n    '12rem': '12rem',\n    '26rem': '26rem',\n    '50vw': '50vw',\n    '10ch': '10ch',\n    '18ch': '18ch',\n    '28ch': '28ch',\n    '44ch': '44ch',\n    '64ch': '64ch',\n    960: '960px',\n    '2/5': '40%',\n    '3/4': '75%',\n    700: '700px',\n    720: '720px',\n    800: '800px',\n    640: '640px',\n    0: '0rem',\n    fit: 'fit-content',\n    full: '100%',\n    lg: '32rem',\n    max: 'max-content',\n    md: '28rem',\n    min: 'min-content',\n    none: 'none',\n    prose: '65ch',\n    sm: '24rem',\n    xl: '36rem',\n    xs: '20rem',\n  },\n  minHeight: {\n    ...spacing,\n    350: '350px',\n    360: '360px',\n    0: '0px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n    screen: '100vh',\n    auto: 'auto',\n  },\n  minWidth: {\n    0: '0px',\n    360: '360px',\n    640: '640px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n  },\n  objectPosition: {\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    right: 'right',\n    top: 'top',\n  },\n  opacity,\n  order: {\n    first: '-9999',\n    last: '9999',\n    none: '0',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n  },\n  outlineOffset: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  outlineWidth: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  rotate: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n    45: '45deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  scale: {\n    0: '0',\n    50: '.5',\n    75: '.75',\n    90: '.9',\n    95: '.95',\n    100: '1',\n    105: '1.05',\n    110: '1.1',\n    125: '1.25',\n    150: '1.5',\n  },\n  sepia: {\n    0: '0',\n    default: '100%',\n  },\n  skew: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n  },\n  sidebar: {\n    background: colors.surfaceSecondary,\n    borderColor: colors.borderSubtle,\n    scrollbarColor: colors.borderLight,\n    itemColor: colors.brandDarkGray,\n    itemHoverBackground: colors.brandLightGray,\n    itemHoverColor: colors.brandDarkGray,\n    itemActiveBackground: colors.brandPrimaryRed,\n    itemActiveBackgroundImage: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    itemActiveColor: colors.brandWhite,\n    itemActiveBorderColor: colors.brandPrimaryRed,\n    itemActiveShadow: 'none',\n    itemDisabledColor: colors.textMuted,\n    itemFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    nestedBorderColor: colors.brandPrimaryRed,\n    sectionHeaderColor: colors.textMuted,\n    sectionHeaderIconColor: colors.textMuted,\n    sectionHeaderHoverBackground: colors.brandLightGray,\n    sectionToggleColor: colors.textMuted,\n    actionColor: colors.brandPrimaryRed,\n    actionHoverBackground: colors.brandSecondaryOrange,\n    actionHoverColor: colors.brandWhite,\n    actionFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    dragHandleColor: colors.brandPrimaryRed,\n    dragHandleHoverBackground: colors.brandLightGray,\n    dragHandleHoverColor: colors.brandSecondaryOrange,\n    dragOverlayBackground: colors.brandWhite,\n    dragOverlayColor: colors.brandDarkGray,\n    dragOverlayBorderColor: colors.brandPrimaryRed,\n    insertionIndicatorColor: colors.brandPrimaryRed,\n    collapseButtonBackground: colors.brandWhite,\n    collapseButtonColor: colors.brandPrimaryRed,\n    collapseButtonBorderColor: colors.brandPrimaryRed,\n    collapseButtonHoverBackground: colors.brandSecondaryOrange,\n    collapseButtonHoverColor: colors.brandWhite,\n    collapseButtonHoverShadow: '0 10px 24px rgb(252 106 81 / 0.25)',\n    collapseButtonFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    profileTitleColor: colors.textSecondary,\n    profileTriggerBackground: colors.brandWhite,\n    profileTriggerBorderColor: colors.borderSubtle,\n    profileTriggerHoverBackground: colors.brandLightGray,\n    profileTriggerHoverBorderColor: colors.brandSecondaryOrange,\n    profileTriggerFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    profileAvatarBackgroundImage: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    profileAvatarColor: colors.brandWhite,\n    profileTextColor: colors.brandDarkGray,\n    profileSubtextColor: colors.textSecondary,\n    profileMenuHoverBackground: colors.brandLightGray,\n    profileMenuBorderColor: colors.brandLightGray,\n  },\n  stroke: {\n    ...colors,\n    none: 'none',\n  },\n  strokeWidth: {\n    0: '0',\n    1: '1',\n    2: '2',\n  },\n  textDecorationThickness: {\n    auto: 'auto',\n    'from-font': 'from-font',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  textUnderlineOffset: {\n    auto: 'auto',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  transform: {\n    0: 'translateX(0%)',\n    100: 'translateX(100%)',\n    200: 'translateX(200%)',\n    center: 'translate(-50%, -50%)',\n    left: 'translateX(0%)',\n    right: 'translateX(200%)',\n    none: 'none',\n    press: 'scale(0.98)',\n    lift: 'translateY(-1px)',\n    y0: 'translateY(0)',\n    centerY: 'translateY(-50%)',\n  },\n  transitionDelay: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionDuration: {\n    default: '150ms',\n    75: '75ms',\n    100: '100ms',\n    120: '120ms',\n    150: '150ms',\n    160: '160ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionProperty: {\n    none: 'none',\n    all: 'all',\n    default:\n      'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n    colors:\n      'color, background-color, border-color, text-decoration-color, fill, stroke',\n    gap: 'gap',\n    gridTemplateRows: 'grid-template-rows',\n    gridTemplateRowsOpacity: 'grid-template-rows, opacity',\n    left: 'left',\n    opacity: 'opacity',\n    opacityVisibility: 'opacity, visibility',\n    shadow: 'box-shadow',\n    transform: 'transform',\n    width: 'width',\n  },\n  transitionTimingFunction: {\n    default: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    linear: 'linear',\n    ease: 'ease',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    'ease-in-out': 'ease-in-out',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n  width: {\n    ...spacing,\n    1.1: '1.1rem',\n    auto: 'auto',\n    140: '140px',\n    260: '260px',\n    300: '300px',\n    '8%': '8%',\n    '10%': '10%',\n    '12%': '12%',\n    '15%': '15%',\n    '16%': '16%',\n    '22%': '22%',\n    '26%': '26%',\n    '30%': '30%',\n    '70%': '70%',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n    screen: '100vw',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  zIndex: {\n    auto: 'auto',\n    modal: '1000',\n    0: '0',\n    1: '1',\n    2: '2',\n    4: '4',\n    10: '10',\n    20: '20',\n    30: '30',\n    40: '40',\n    50: '50',\n  },\n} as const;\n\ntype ThemeValueTree<T> = T extends string\n  ? string\n  : {\n      readonly [Key in keyof T]: ThemeValueTree<T[Key]>;\n    };\n\nexport type ThemeValues = ThemeValueTree<typeof publicLightThemeValues>;\n\nconst publicDarkColors = {\n  ...colors,\n  primaryLight: 'rgba(165, 2, 70, 0.22)',\n  secondaryLight: '#173126',\n  surface: '#11161d',\n  surfaceSecondary: '#171d26',\n  surfaceMuted: '#1c2430',\n  surfaceElevated: '#202938',\n  background: '#0b1016',\n  backgroundSecondary: '#121822',\n  backgroundTertiary: '#18202c',\n  backgroundModifier: '#283244',\n  text: '#f5f7fb',\n  textSecondary: '#c5ccda',\n  textMuted: '#98a3b7',\n  controlSurface: '#202938',\n  controlSurfaceHover: '#1c2430',\n  controlSurfaceDisabled: '#283244',\n  controlBorder: '#415069',\n  controlText: '#f5f7fb',\n  controlPlaceholder: '#98a3b7',\n  border: '#2f3a4d',\n  borderSubtle: '#263040',\n  borderStrong: '#415069',\n  borderLight: '#364357',\n  overlayBackdrop: 'rgba(3, 7, 18, 0.58)',\n  tableHeaderAccent: 'rgba(255, 171, 199, 0.08)',\n  tableRowHoverSurface: '#231A24',\n  tableRowSelectedSurface: '#351526',\n  tableRowDangerSurface: '#3a171c',\n  codeSurface: '#1c2430',\n  codeText: '#f5f7fb',\n  codeToolbarSurface: '#351526',\n  shimmerHighlight: 'rgba(255, 255, 255, 0.52)',\n  tonePrimarySurface: '#351526',\n  tonePrimaryText: '#ffabc7',\n  tonePrimaryBorder: '#8a3157',\n  toneInfoSurface: '#172c52',\n  toneInfoText: '#9cc7ff',\n  toneInfoBorder: '#3d6ea8',\n  toneSuccessSurface: '#153624',\n  toneSuccessText: '#7ee2a0',\n  toneSuccessBorder: '#2f8d55',\n  toneWarningSurface: '#3b2d16',\n  toneWarningText: '#ffd166',\n  toneWarningBorder: '#a56a18',\n  toneDangerSurface: '#3a171c',\n  toneDangerText: '#ff9aa2',\n  toneDangerBorder: '#b94b54',\n  successLight: '#183626',\n  warningLight: '#3b2d16',\n  infoLight: '#182544',\n  brandSecondaryOrange: '#8f6771',\n  'brandSecondaryOrange-10': 'rgba(143, 103, 113, 0.10)',\n  'brandSecondaryOrange-20': 'rgba(143, 103, 113, 0.20)',\n  accent: '#b36a78',\n  brandLightGray: '#1a212d',\n  brandDarkGray: '#eef2f8',\n} as const;\n\nexport const publicDarkThemeValues = {\n  ...publicLightThemeValues,\n  colors: publicDarkColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${publicDarkColors.surfaceSecondary} 0%, ${publicDarkColors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${publicDarkColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${publicDarkColors.surfaceMuted} 0%, ${publicDarkColors.surfaceSecondary} 45%, ${publicDarkColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n    tableHeaderAccent: `linear-gradient(90deg, ${publicDarkColors.tableHeaderAccent}, transparent 64%)`,\n    listHeaderSurface: `linear-gradient(135deg, ${publicDarkColors.surfaceSecondary} 0%, ${publicDarkColors.surface} 58%)`,\n    pendingBar: `linear-gradient(90deg, ${publicDarkColors.tonePrimarySurface} 0%, ${publicDarkColors.tonePrimaryText} 60%, ${publicDarkColors.tonePrimarySurface} 100%)`,\n    metricPrimarySurface: `linear-gradient(135deg, ${publicDarkColors.tonePrimarySurface}, transparent 58%)`,\n    metricInfoSurface: `linear-gradient(135deg, ${publicDarkColors.toneInfoSurface}, transparent 58%)`,\n    metricSuccessSurface: `linear-gradient(135deg, ${publicDarkColors.toneSuccessSurface}, transparent 58%)`,\n    metricWarningSurface: `linear-gradient(135deg, ${publicDarkColors.toneWarningSurface}, transparent 58%)`,\n    metricDangerSurface: `linear-gradient(135deg, ${publicDarkColors.toneDangerSurface}, transparent 58%)`,\n    badgeShimmer: `linear-gradient(100deg, ${publicDarkColors.transparent} 0%, color-mix(in srgb, ${publicDarkColors.shimmerHighlight} 32%, transparent) 25%, ${publicDarkColors.shimmerHighlight} 50%, color-mix(in srgb, ${publicDarkColors.shimmerHighlight} 32%, transparent) 75%, ${publicDarkColors.transparent} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    inkSoft: '0 6px 18px rgb(0 0 0 / 0.28)',\n    inkGlow: '0 0 45px rgb(0 0 0 / 0.35)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${publicDarkColors.black} 38%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${publicDarkColors.black} 42%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${publicDarkColors.black} 40%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${publicDarkColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${publicDarkColors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${publicDarkColors.primary}`,\n    primaryLightRing: `0 0 0 1px ${publicDarkColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${publicDarkColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${publicDarkColors.error} 24%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${publicDarkColors.black} 28%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${publicDarkColors.black} 36%, transparent)`,\n    successLightRing: `0 0 0 2px ${publicDarkColors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${publicDarkColors['blue-400']}`,\n    metricPrimaryAccent: `inset 3px 0 0 ${publicDarkColors.tonePrimaryBorder}`,\n    metricInfoAccent: `inset 3px 0 0 ${publicDarkColors.toneInfoBorder}`,\n    metricSuccessAccent: `inset 3px 0 0 ${publicDarkColors.toneSuccessBorder}`,\n    metricWarningAccent: `inset 3px 0 0 ${publicDarkColors.toneWarningBorder}`,\n    metricDangerAccent: `inset 3px 0 0 ${publicDarkColors.toneDangerBorder}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.2)',\n  },\n  sidebar: {\n    ...publicLightThemeValues.sidebar,\n    background: publicDarkColors.surface,\n    borderColor: publicDarkColors.borderSubtle,\n    scrollbarColor: publicDarkColors.borderLight,\n    itemColor: publicDarkColors.textSecondary,\n    itemHoverBackground: publicDarkColors['brandSecondaryOrange-10'],\n    itemHoverColor: publicDarkColors.text,\n    itemActiveBackground: publicDarkColors.brandPrimaryRed,\n    itemActiveBackgroundImage: `linear-gradient(135deg, ${publicDarkColors.brandPrimaryRed}, ${publicDarkColors.brandSecondaryOrange})`,\n    itemActiveColor: publicDarkColors.brandWhite,\n    itemActiveBorderColor: publicDarkColors.brandPrimaryRed,\n    itemActiveShadow: `0 0 0 2px ${publicDarkColors['brandSecondaryOrange-20']}`,\n    itemDisabledColor: publicDarkColors.textMuted,\n    itemFocusRing: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    nestedBorderColor: publicDarkColors.brandPrimaryRed,\n    sectionHeaderColor: publicDarkColors.textMuted,\n    sectionHeaderIconColor: publicDarkColors.textMuted,\n    sectionHeaderHoverBackground: publicDarkColors['brandSecondaryOrange-10'],\n    sectionToggleColor: publicDarkColors.textMuted,\n    actionColor: publicDarkColors.brandSecondaryOrange,\n    actionHoverBackground: publicDarkColors.brandPrimaryRed,\n    actionHoverColor: publicDarkColors.brandWhite,\n    actionFocusRing: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    dragHandleColor: publicDarkColors.brandSecondaryOrange,\n    dragHandleHoverBackground: publicDarkColors['brandSecondaryOrange-10'],\n    dragHandleHoverColor: publicDarkColors.brandWhite,\n    dragOverlayBackground: publicDarkColors.surfaceElevated,\n    dragOverlayColor: publicDarkColors.text,\n    dragOverlayBorderColor: publicDarkColors.brandPrimaryRed,\n    insertionIndicatorColor: publicDarkColors.brandPrimaryRed,\n    collapseButtonBackground: publicDarkColors.surface,\n    collapseButtonColor: publicDarkColors.brandSecondaryOrange,\n    collapseButtonBorderColor: publicDarkColors.brandPrimaryRed,\n    collapseButtonHoverBackground: publicDarkColors.brandPrimaryRed,\n    collapseButtonHoverColor: publicDarkColors.brandWhite,\n    collapseButtonHoverShadow: `0 10px 24px ${publicDarkColors['brandSecondaryOrange-20']}`,\n    collapseButtonFocusRing: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    profileTitleColor: publicDarkColors.textSecondary,\n    profileTriggerBackground: publicDarkColors.surfaceSecondary,\n    profileTriggerBorderColor: publicDarkColors['brandSecondaryOrange-20'],\n    profileTriggerHoverBackground: publicDarkColors.surfaceElevated,\n    profileTriggerHoverBorderColor: publicDarkColors.brandSecondaryOrange,\n    profileTriggerFocusRing: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    profileAvatarBackgroundImage: `linear-gradient(135deg, ${publicDarkColors.brandPrimaryRed}, ${publicDarkColors.brandSecondaryOrange})`,\n    profileAvatarColor: publicDarkColors.brandWhite,\n    profileTextColor: publicDarkColors.text,\n    profileSubtextColor: publicDarkColors.textSecondary,\n    profileMenuHoverBackground: publicDarkColors['brandSecondaryOrange-10'],\n    profileMenuBorderColor: publicDarkColors['brandSecondaryOrange-20'],\n  },\n  stroke: {\n    ...publicDarkColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nconst publicLightThemeVarsClass = createTheme(vars, publicLightThemeValues);\nconst publicDarkThemeVarsClass = createTheme(vars, publicDarkThemeValues);\n\nexport const publicLightThemeClass = style([\n  publicLightThemeVarsClass,\n  {\n    colorScheme: 'light',\n  },\n]);\n\nexport const publicDarkThemeClass = style([\n  publicDarkThemeVarsClass,\n  {\n    colorScheme: 'dark',\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"publicTheme.css.js","names":[],"sources":["../../../src/theme/publicTheme.css.ts"],"sourcesContent":["import { createTheme, style } from '@vanilla-extract/css';\n\nimport { opacity, screens, spacing } from './common.js';\nimport { colors } from './colors.js';\nimport { vars } from './themeContract.css.js';\n\nexport const publicLightThemeValues = {\n  spacing,\n  screens,\n  animation: {\n    none: 'none',\n    spin: 'spin 1s linear infinite',\n    ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',\n    pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n    bounce: 'bounce 1s infinite',\n  },\n  colors,\n  backgroundImage: {\n    brandDiagonal: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandDiagonal125: `linear-gradient(125deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandBackgroundGradient: colors.brandBackgroundGradient,\n    pageShellSurface: `linear-gradient(180deg, ${colors.surfaceSecondary} 0%, ${colors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${colors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${colors.surfaceMuted} 0%, ${colors.surfaceSecondary} 45%, ${colors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n    tableHeaderAccent: `linear-gradient(90deg, ${colors.tableHeaderAccent}, transparent 64%)`,\n    listHeaderSurface: `linear-gradient(135deg, ${colors.surfaceSecondary} 0%, ${colors.surface} 58%)`,\n    pendingBar: `linear-gradient(90deg, ${colors.tonePrimarySurface} 0%, ${colors.tonePrimaryText} 60%, ${colors.tonePrimarySurface} 100%)`,\n    metricPrimarySurface: `linear-gradient(135deg, ${colors.tonePrimarySurface}, transparent 58%)`,\n    metricInfoSurface: `linear-gradient(135deg, ${colors.toneInfoSurface}, transparent 58%)`,\n    metricSuccessSurface: `linear-gradient(135deg, ${colors.toneSuccessSurface}, transparent 58%)`,\n    metricWarningSurface: `linear-gradient(135deg, ${colors.toneWarningSurface}, transparent 58%)`,\n    metricDangerSurface: `linear-gradient(135deg, ${colors.toneDangerSurface}, transparent 58%)`,\n    badgeShimmer: `linear-gradient(100deg, ${colors.transparent} 0%, color-mix(in srgb, ${colors.shimmerHighlight} 32%, transparent) 25%, ${colors.shimmerHighlight} 50%, color-mix(in srgb, ${colors.shimmerHighlight} 32%, transparent) 75%, ${colors.transparent} 100%)`,\n  },\n  borderRadius: {\n    none: '0px',\n    sm: '0.125rem',\n    default: '0.25rem',\n    md: '0.375rem',\n    lg: '0.5rem',\n    xl: '0.75rem',\n    '2xl': '1rem',\n    '3xl': '1.5rem',\n    '4xl': '2rem',\n    '1/2': '50%',\n    full: '9999px',\n  },\n  borderSpacing: spacing,\n  borderWidth: {\n    ...spacing,\n    default: '1px',\n    0: '0px',\n    2: '2px',\n    4: '4px',\n    6: '6px',\n    8: '8px',\n  },\n  boxShadow: {\n    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n    inkSoft: '0 6px 18px rgb(15 23 42 / 0.06)',\n    inkGlow: '0 0 45px rgb(15 23 42 / 0.12)',\n    brandGlow: '0 10px 24px rgb(252 106 81 / 0.25)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${colors.brandDarkGray} 12%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${colors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${colors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${colors.primary}`,\n    primaryLightRing: `0 0 0 1px ${colors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${colors.primaryLight}`,\n    focusRing: `0 0 0 3px ${colors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${colors.error} 20%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${colors.black} 8%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${colors.black} 10%, transparent)`,\n    successLightRing: `0 0 0 2px ${colors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${colors['blue-500']}`,\n    metricPrimaryAccent: `inset 3px 0 0 ${colors.tonePrimaryBorder}`,\n    metricInfoAccent: `inset 3px 0 0 ${colors.toneInfoBorder}`,\n    metricSuccessAccent: `inset 3px 0 0 ${colors.toneSuccessBorder}`,\n    metricWarningAccent: `inset 3px 0 0 ${colors.toneWarningBorder}`,\n    metricDangerAccent: `inset 3px 0 0 ${colors.toneDangerBorder}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n    none: 'none',\n  },\n  dropShadow: {\n    sm: '0 1px 1px rgb(0 0 0 / 0.05)',\n    default: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'].join(\n      ', ',\n    ),\n    xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'].join(\n      ', ',\n    ),\n    '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',\n    none: '0 0 #0000',\n  },\n  grayscale: {\n    0: '0',\n    default: '100%',\n  },\n  hueRotate: {\n    0: '0deg',\n    15: '15deg',\n    30: '30deg',\n    60: '60deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  invert: {\n    0: '0',\n    default: '100%',\n  },\n  flex: {\n    1: '1 1 0%',\n    auto: '1 1 auto',\n    initial: '0 1 auto',\n    none: 'none',\n  },\n  flexBasis: {\n    ...spacing,\n    260: '260px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n  },\n  flexGrow: {\n    0: '0',\n    default: '1',\n  },\n  flexShrink: {\n    0: '0',\n    default: '1',\n  },\n  fontFamily: {\n    sans: [\n      'ui-sans-serif',\n      'system-ui',\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      '\"Noto Sans\"',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n      '\"Noto Color Emoji\"',\n    ].join(', '),\n    serif: [\n      'ui-serif',\n      'Georgia',\n      'Cambria',\n      '\"Times New Roman\"',\n      'Times',\n      'serif',\n    ].join(', '),\n    mono: [\n      'ui-monospace',\n      'SFMono-Regular',\n      'Menlo',\n      'Monaco',\n      'Consolas',\n      '\"Liberation Mono\"',\n      '\"Courier New\"',\n      'monospace',\n    ].join(', '),\n  },\n  fontSize: {\n    '3xs': '0.5rem',\n    '2xs': '0.625rem',\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n    '2xl': '1.5rem',\n    '3xl': '1.875rem',\n    '4xl': '2.5rem',\n    '5xl': '3rem',\n    '6xl': '3.75rem',\n    '7xl': '4.5rem',\n    '8xl': '6rem',\n    '9xl': '8rem',\n    responsive: 'clamp(0.700rem, 0.7vw, 0.875rem)',\n  },\n  fontWeight: {\n    thin: '100',\n    extralight: '200',\n    light: '300',\n    normal: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n    extrabold: '800',\n    black: '900',\n  },\n  gridAutoColumns: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridAutoRows: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridColumn: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-7': 'span 7 / span 7',\n    'span-8': 'span 8 / span 8',\n    'span-9': 'span 9 / span 9',\n    'span-10': 'span 10 / span 10',\n    'span-11': 'span 11 / span 11',\n    'span-12': 'span 12 / span 12',\n    'span-full': '1 / -1',\n  },\n  gridColumnEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridColumnStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridRow: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-full': '1 / -1',\n  },\n  gridRowStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridRowEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridTemplateColumns: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    7: 'repeat(7, minmax(0, 1fr))',\n    8: 'repeat(8, minmax(0, 1fr))',\n    9: 'repeat(9, minmax(0, 1fr))',\n    10: 'repeat(10, minmax(0, 1fr))',\n    11: 'repeat(11, minmax(0, 1fr))',\n    12: 'repeat(12, minmax(0, 1fr))',\n    detailSingle: 'minmax(0, 1fr)',\n    twoFrOneFr: 'minmax(0, 2fr) minmax(0, 1fr)',\n    detailAside320: 'minmax(0, 1fr) 320px',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    toolbarActions: 'minmax(0, 1fr) auto auto',\n    backofficeList: 'minmax(0, 1fr)',\n    backofficeDetail: 'minmax(0, 1fr) minmax(18rem, 24rem)',\n    settingsSplit: 'minmax(14rem, 18rem) minmax(0, 1fr)',\n    splitViewSplit: 'minmax(16rem, 26rem) minmax(0, 1fr)',\n    keyValueSplit: 'minmax(0, 10rem) minmax(0, 1fr)',\n    metadataStripSplit: 'minmax(0, 128px) minmax(0, 1fr)',\n    dashboardUneven: '1.1fr 1.3fr 1fr',\n    userProfileSplit: 'minmax(220px, 260px) minmax(0, 1fr)',\n    repeat4Fr: 'repeat(4, 1fr)',\n    autoFillMinmax320: 'repeat(auto-fill, minmax(320px, 1fr))',\n    autoFitMinmax0: 'repeat(auto-fit, minmax(0, 1fr))',\n    autoFitMinmax12_5rem: 'repeat(auto-fit, minmax(12.5rem, 1fr))',\n    autoFitMinmax120: 'repeat(auto-fit, minmax(120px, 1fr))',\n    autoFitMinmax160: 'repeat(auto-fit, minmax(160px, 1fr))',\n    autoFitMinmax180: 'repeat(auto-fit, minmax(180px, 1fr))',\n    autoFitMinmax200: 'repeat(auto-fit, minmax(200px, 1fr))',\n    autoFitMinmax220: 'repeat(auto-fit, minmax(220px, 1fr))',\n    autoFitMinmax240: 'repeat(auto-fit, minmax(240px, 1fr))',\n    autoFitMinmax260: 'repeat(auto-fit, minmax(260px, 1fr))',\n    autoFitMinmax280: 'repeat(auto-fit, minmax(280px, 1fr))',\n    autoFitMinmax320: 'repeat(auto-fit, minmax(320px, 1fr))',\n  },\n  gridTemplateRows: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    autoMinmax0: 'auto minmax(0, 1fr)',\n    autoAutoMinmax0: 'auto auto minmax(0, 1fr)',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    fr0: '0fr',\n    fr1: '1fr',\n  },\n  left: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  top: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  height: {\n    ...spacing,\n    1.1: '1.1rem',\n    260: '260px',\n    300: '300px',\n    340: '340px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n    auto: 'auto',\n  },\n  inset: {\n    ...spacing,\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    full: '100%',\n  },\n  keyframes: {\n    spin: {\n      to: {\n        transform: 'rotate(360deg)',\n      },\n    },\n    ping: {\n      '75%, 100%': {\n        transform: 'scale(2)',\n        opacity: '0',\n      },\n    },\n    pulse: {\n      '50%': {\n        opacity: '.5',\n      },\n    },\n    bounce: {\n      '0%, 100%': {\n        transform: 'translateY(-25%)',\n        animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',\n      },\n      '50%': {\n        transform: 'none',\n        animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',\n      },\n    },\n  },\n  letterSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n    caps: '0.08em',\n    capsTight: '0.06em',\n    capsNarrow: '0.04em',\n  },\n  wordSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n  },\n  lineHeight: {\n    ...spacing,\n    1.2: '1.2',\n    1.3: '1.3',\n    1.4: '1.4',\n    1.45: '1.45',\n    1.5: '1.5',\n    1.6: '1.6',\n    1.7: '1.7',\n    none: '1',\n    tight: '1.25',\n    snug: '1.375',\n    normal: '1.5',\n    relaxed: '1.625',\n    loose: '2',\n    '3xs': '0.75rem',\n    '2xs': '0.85rem',\n    xs: '1rem',\n    sm: '1.25rem',\n    base: '1.5rem',\n    lg: '1.75rem',\n    xl: '1.75rem',\n    '2xl': '2rem',\n    '3xl': '2.25rem',\n    '4xl': 'normal',\n    '5xl': '1',\n    '6xl': '1',\n    '7xl': '1',\n    '8xl': '1',\n    '9xl': '1',\n    responsive: '1',\n  },\n  listStyleType: {\n    none: 'none',\n    disc: 'disc',\n    decimal: 'decimal',\n  },\n  margin: {\n    ...spacing,\n  },\n  maxHeight: {\n    ...spacing,\n    '50vh': '50vh',\n    '70vh': '70vh',\n    '90vh': '90vh',\n    none: 'none',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  maxWidth: {\n    '2xl': '42rem',\n    '3xl': '48rem',\n    '4xl': '56rem',\n    '5xl': '64rem',\n    '6xl': '72rem',\n    '7xl': '80rem',\n    '12rem': '12rem',\n    '26rem': '26rem',\n    '50vw': '50vw',\n    '10ch': '10ch',\n    '18ch': '18ch',\n    '28ch': '28ch',\n    '44ch': '44ch',\n    '64ch': '64ch',\n    960: '960px',\n    '2/5': '40%',\n    '3/4': '75%',\n    700: '700px',\n    720: '720px',\n    800: '800px',\n    640: '640px',\n    0: '0rem',\n    fit: 'fit-content',\n    full: '100%',\n    lg: '32rem',\n    max: 'max-content',\n    md: '28rem',\n    min: 'min-content',\n    none: 'none',\n    prose: '65ch',\n    sm: '24rem',\n    xl: '36rem',\n    xs: '20rem',\n  },\n  minHeight: {\n    ...spacing,\n    350: '350px',\n    360: '360px',\n    0: '0px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n    screen: '100vh',\n    auto: 'auto',\n  },\n  minWidth: {\n    0: '0px',\n    360: '360px',\n    640: '640px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n  },\n  objectPosition: {\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    right: 'right',\n    top: 'top',\n  },\n  opacity,\n  order: {\n    first: '-9999',\n    last: '9999',\n    none: '0',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n  },\n  outlineOffset: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  outlineWidth: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  rotate: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n    45: '45deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  scale: {\n    0: '0',\n    50: '.5',\n    75: '.75',\n    90: '.9',\n    95: '.95',\n    100: '1',\n    105: '1.05',\n    110: '1.1',\n    125: '1.25',\n    150: '1.5',\n  },\n  sepia: {\n    0: '0',\n    default: '100%',\n  },\n  skew: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n  },\n  sidebar: {\n    background: colors.surfaceSecondary,\n    borderColor: colors.borderSubtle,\n    scrollbarColor: colors.borderLight,\n    itemColor: colors.brandDarkGray,\n    itemHoverBackground: colors.brandLightGray,\n    itemHoverColor: colors.brandDarkGray,\n    itemActiveBackground: colors.brandPrimaryRed,\n    itemActiveBackgroundImage: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    itemActiveColor: colors.brandWhite,\n    itemActiveBorderColor: colors.brandPrimaryRed,\n    itemActiveShadow: 'none',\n    itemDisabledColor: colors.textMuted,\n    itemFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    nestedBorderColor: colors.brandPrimaryRed,\n    sectionHeaderColor: colors.textMuted,\n    sectionHeaderIconColor: colors.textMuted,\n    sectionHeaderHoverBackground: colors.brandLightGray,\n    sectionToggleColor: colors.textMuted,\n    actionColor: colors.brandPrimaryRed,\n    actionHoverBackground: colors.brandSecondaryOrange,\n    actionHoverColor: colors.brandWhite,\n    actionFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    dragHandleColor: colors.brandPrimaryRed,\n    dragHandleHoverBackground: colors.brandLightGray,\n    dragHandleHoverColor: colors.brandSecondaryOrange,\n    dragOverlayBackground: colors.brandWhite,\n    dragOverlayColor: colors.brandDarkGray,\n    dragOverlayBorderColor: colors.brandPrimaryRed,\n    insertionIndicatorColor: colors.brandPrimaryRed,\n    collapseButtonBackground: colors.brandWhite,\n    collapseButtonColor: colors.brandPrimaryRed,\n    collapseButtonBorderColor: colors.brandPrimaryRed,\n    collapseButtonHoverBackground: colors.brandSecondaryOrange,\n    collapseButtonHoverColor: colors.brandWhite,\n    collapseButtonHoverShadow: '0 10px 24px rgb(252 106 81 / 0.25)',\n    collapseButtonFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    profileTitleColor: colors.textSecondary,\n    profileTriggerBackground: colors.brandWhite,\n    profileTriggerBorderColor: colors.borderSubtle,\n    profileTriggerHoverBackground: colors.brandLightGray,\n    profileTriggerHoverBorderColor: colors.brandSecondaryOrange,\n    profileTriggerFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    profileAvatarBackgroundImage: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    profileAvatarColor: colors.brandWhite,\n    profileTextColor: colors.brandDarkGray,\n    profileSubtextColor: colors.textSecondary,\n    profileMenuHoverBackground: colors.brandLightGray,\n    profileMenuBorderColor: colors.brandLightGray,\n  },\n  stroke: {\n    ...colors,\n    none: 'none',\n  },\n  strokeWidth: {\n    0: '0',\n    1: '1',\n    2: '2',\n  },\n  textDecorationThickness: {\n    auto: 'auto',\n    'from-font': 'from-font',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  textUnderlineOffset: {\n    auto: 'auto',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  transform: {\n    0: 'translateX(0%)',\n    100: 'translateX(100%)',\n    200: 'translateX(200%)',\n    center: 'translate(-50%, -50%)',\n    left: 'translateX(0%)',\n    right: 'translateX(200%)',\n    none: 'none',\n    press: 'scale(0.98)',\n    lift: 'translateY(-1px)',\n    y0: 'translateY(0)',\n    centerY: 'translateY(-50%)',\n  },\n  transitionDelay: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionDuration: {\n    default: '150ms',\n    75: '75ms',\n    100: '100ms',\n    120: '120ms',\n    150: '150ms',\n    160: '160ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionProperty: {\n    none: 'none',\n    all: 'all',\n    default:\n      'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n    colors:\n      'color, background-color, border-color, text-decoration-color, fill, stroke',\n    gap: 'gap',\n    gridTemplateRows: 'grid-template-rows',\n    gridTemplateRowsOpacity: 'grid-template-rows, opacity',\n    left: 'left',\n    opacity: 'opacity',\n    opacityVisibility: 'opacity, visibility',\n    shadow: 'box-shadow',\n    transform: 'transform',\n    width: 'width',\n  },\n  transitionTimingFunction: {\n    default: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    linear: 'linear',\n    ease: 'ease',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    'ease-in-out': 'ease-in-out',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n  width: {\n    ...spacing,\n    1.1: '1.1rem',\n    auto: 'auto',\n    140: '140px',\n    260: '260px',\n    300: '300px',\n    '8%': '8%',\n    '10%': '10%',\n    '12%': '12%',\n    '15%': '15%',\n    '16%': '16%',\n    '22%': '22%',\n    '26%': '26%',\n    '30%': '30%',\n    '70%': '70%',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n    screen: '100vw',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  zIndex: {\n    auto: 'auto',\n    modal: '1000',\n    0: '0',\n    1: '1',\n    2: '2',\n    4: '4',\n    10: '10',\n    20: '20',\n    30: '30',\n    40: '40',\n    50: '50',\n  },\n} as const;\n\ntype ThemeValueTree<T> = T extends string\n  ? string\n  : {\n      readonly [Key in keyof T]: ThemeValueTree<T[Key]>;\n    };\n\nexport type ThemeValues = ThemeValueTree<typeof publicLightThemeValues>;\n\nconst publicDarkColors = {\n  ...colors,\n  primary: '#e85d8d',\n  primaryLight: 'rgba(232, 93, 141, 0.2)',\n  secondaryLight: '#173126',\n  surface: '#10151d',\n  surfaceSecondary: '#151c26',\n  surfaceMuted: '#1d2633',\n  surfaceElevated: '#202b39',\n  background: '#080d13',\n  backgroundSecondary: '#0f1620',\n  backgroundTertiary: '#17202c',\n  backgroundModifier: '#2a3546',\n  text: '#f5f7fb',\n  textSecondary: '#c5ccda',\n  textMuted: '#98a3b7',\n  controlSurface: '#202938',\n  controlSurfaceHover: '#1c2430',\n  controlSurfaceDisabled: '#283244',\n  controlBorder: '#415069',\n  controlText: '#f5f7fb',\n  controlPlaceholder: '#98a3b7',\n  border: '#344154',\n  borderSubtle: '#293445',\n  borderStrong: '#415069',\n  borderLight: '#364357',\n  overlayBackdrop: 'rgba(3, 7, 18, 0.58)',\n  tableHeaderAccent: 'rgba(255, 171, 199, 0.08)',\n  tableRowHoverSurface: '#231A24',\n  tableRowSelectedSurface: '#351526',\n  tableRowDangerSurface: '#3a171c',\n  codeSurface: '#1c2430',\n  codeText: '#f5f7fb',\n  codeToolbarSurface: '#351526',\n  shimmerHighlight: 'rgba(255, 255, 255, 0.52)',\n  tonePrimarySurface: '#321c2a',\n  tonePrimaryText: '#ffb8cf',\n  tonePrimaryBorder: '#8f3e5d',\n  toneInfoSurface: '#172c52',\n  toneInfoText: '#9cc7ff',\n  toneInfoBorder: '#3d6ea8',\n  toneSuccessSurface: '#153624',\n  toneSuccessText: '#7ee2a0',\n  toneSuccessBorder: '#2f8d55',\n  toneWarningSurface: '#3b2d16',\n  toneWarningText: '#ffd166',\n  toneWarningBorder: '#a56a18',\n  toneDangerSurface: '#3a171c',\n  toneDangerText: '#ff9aa2',\n  toneDangerBorder: '#b94b54',\n  onPrimary: '#080d13',\n  onAccent: '#080d13',\n  onBrand: '#080d13',\n  brandSubtleSurface: '#271a24',\n  brandSubtleBorder: '#4b2b3a',\n  avatarSurface: '#172c52',\n  avatarText: '#9cc7ff',\n  timelineFadeSurface: '#202b39',\n  successLight: '#183626',\n  warningLight: '#3b2d16',\n  infoLight: '#182544',\n  brandPrimaryRed: '#e85d8d',\n  brandSecondaryOrange: '#d99aaa',\n  'brandSecondaryOrange-10': 'rgba(217, 154, 170, 0.10)',\n  'brandSecondaryOrange-20': 'rgba(217, 154, 170, 0.20)',\n  accent: '#d98599',\n  brandLightGray: '#1a212d',\n  brandDarkGray: '#eef2f8',\n} as const;\n\nexport const publicDarkThemeValues = {\n  ...publicLightThemeValues,\n  colors: publicDarkColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${publicDarkColors.surfaceSecondary} 0%, ${publicDarkColors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${publicDarkColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${publicDarkColors.surfaceMuted} 0%, ${publicDarkColors.surfaceSecondary} 45%, ${publicDarkColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n    tableHeaderAccent: `linear-gradient(90deg, ${publicDarkColors.tableHeaderAccent}, transparent 64%)`,\n    listHeaderSurface: `linear-gradient(135deg, ${publicDarkColors.surfaceSecondary} 0%, ${publicDarkColors.surface} 58%)`,\n    pendingBar: `linear-gradient(90deg, ${publicDarkColors.tonePrimarySurface} 0%, ${publicDarkColors.tonePrimaryText} 60%, ${publicDarkColors.tonePrimarySurface} 100%)`,\n    metricPrimarySurface: `linear-gradient(135deg, ${publicDarkColors.tonePrimarySurface}, transparent 58%)`,\n    metricInfoSurface: `linear-gradient(135deg, ${publicDarkColors.toneInfoSurface}, transparent 58%)`,\n    metricSuccessSurface: `linear-gradient(135deg, ${publicDarkColors.toneSuccessSurface}, transparent 58%)`,\n    metricWarningSurface: `linear-gradient(135deg, ${publicDarkColors.toneWarningSurface}, transparent 58%)`,\n    metricDangerSurface: `linear-gradient(135deg, ${publicDarkColors.toneDangerSurface}, transparent 58%)`,\n    badgeShimmer: `linear-gradient(100deg, ${publicDarkColors.transparent} 0%, color-mix(in srgb, ${publicDarkColors.shimmerHighlight} 32%, transparent) 25%, ${publicDarkColors.shimmerHighlight} 50%, color-mix(in srgb, ${publicDarkColors.shimmerHighlight} 32%, transparent) 75%, ${publicDarkColors.transparent} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    inkSoft: '0 6px 18px rgb(0 0 0 / 0.28)',\n    inkGlow: '0 0 45px rgb(0 0 0 / 0.35)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${publicDarkColors.black} 38%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${publicDarkColors.black} 42%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${publicDarkColors.black} 40%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${publicDarkColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${publicDarkColors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${publicDarkColors.primary}`,\n    primaryLightRing: `0 0 0 1px ${publicDarkColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${publicDarkColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${publicDarkColors.error} 24%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${publicDarkColors.black} 28%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${publicDarkColors.black} 36%, transparent)`,\n    successLightRing: `0 0 0 2px ${publicDarkColors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${publicDarkColors['blue-400']}`,\n    metricPrimaryAccent: `inset 3px 0 0 ${publicDarkColors.tonePrimaryBorder}`,\n    metricInfoAccent: `inset 3px 0 0 ${publicDarkColors.toneInfoBorder}`,\n    metricSuccessAccent: `inset 3px 0 0 ${publicDarkColors.toneSuccessBorder}`,\n    metricWarningAccent: `inset 3px 0 0 ${publicDarkColors.toneWarningBorder}`,\n    metricDangerAccent: `inset 3px 0 0 ${publicDarkColors.toneDangerBorder}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.2)',\n  },\n  sidebar: {\n    ...publicLightThemeValues.sidebar,\n    background: publicDarkColors.backgroundSecondary,\n    borderColor: publicDarkColors.border,\n    scrollbarColor: publicDarkColors.borderLight,\n    itemColor: publicDarkColors.textSecondary,\n    itemHoverBackground: publicDarkColors.surfaceMuted,\n    itemHoverColor: publicDarkColors.text,\n    itemActiveBackground: publicDarkColors.tonePrimarySurface,\n    itemActiveBackgroundImage: 'none',\n    itemActiveColor: publicDarkColors.tonePrimaryText,\n    itemActiveBorderColor: publicDarkColors.tonePrimaryBorder,\n    itemActiveShadow: `inset 2px 0 0 ${publicDarkColors.tonePrimaryText}`,\n    itemDisabledColor: publicDarkColors.textMuted,\n    itemFocusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    nestedBorderColor: publicDarkColors.border,\n    sectionHeaderColor: publicDarkColors.textMuted,\n    sectionHeaderIconColor: publicDarkColors.textMuted,\n    sectionHeaderHoverBackground: publicDarkColors.surfaceMuted,\n    sectionToggleColor: publicDarkColors.textMuted,\n    actionColor: publicDarkColors.textSecondary,\n    actionHoverBackground: publicDarkColors.surfaceMuted,\n    actionHoverColor: publicDarkColors.text,\n    actionFocusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    dragHandleColor: publicDarkColors.textSecondary,\n    dragHandleHoverBackground: publicDarkColors.surfaceMuted,\n    dragHandleHoverColor: publicDarkColors.text,\n    dragOverlayBackground: publicDarkColors.surfaceElevated,\n    dragOverlayColor: publicDarkColors.text,\n    dragOverlayBorderColor: publicDarkColors.border,\n    insertionIndicatorColor: publicDarkColors.tonePrimaryText,\n    collapseButtonBackground: publicDarkColors.surfaceSecondary,\n    collapseButtonColor: publicDarkColors.textSecondary,\n    collapseButtonBorderColor: publicDarkColors.border,\n    collapseButtonHoverBackground: publicDarkColors.surfaceMuted,\n    collapseButtonHoverColor: publicDarkColors.text,\n    collapseButtonHoverShadow: 'none',\n    collapseButtonFocusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    profileTitleColor: publicDarkColors.textSecondary,\n    profileTriggerBackground: publicDarkColors.surfaceSecondary,\n    profileTriggerBorderColor: publicDarkColors.border,\n    profileTriggerHoverBackground: publicDarkColors.surfaceElevated,\n    profileTriggerHoverBorderColor: publicDarkColors.borderStrong,\n    profileTriggerFocusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    profileAvatarBackgroundImage: `linear-gradient(135deg, ${publicDarkColors.brandPrimaryRed}, ${publicDarkColors.brandSecondaryOrange})`,\n    profileAvatarColor: publicDarkColors.brandWhite,\n    profileTextColor: publicDarkColors.text,\n    profileSubtextColor: publicDarkColors.textSecondary,\n    profileMenuHoverBackground: publicDarkColors.surfaceMuted,\n    profileMenuBorderColor: publicDarkColors.border,\n  },\n  stroke: {\n    ...publicDarkColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nconst publicLightThemeVarsClass = createTheme(vars, publicLightThemeValues);\nconst publicDarkThemeVarsClass = createTheme(vars, publicDarkThemeValues);\n\nexport const publicLightThemeClass = style([\n  publicLightThemeVarsClass,\n  {\n    colorScheme: 'light',\n    backgroundColor: vars.colors.background,\n    color: vars.colors.text,\n    minHeight: '100vh',\n  },\n]);\n\nexport const publicDarkThemeClass = style([\n  publicDarkThemeVarsClass,\n  {\n    colorScheme: 'dark',\n    backgroundColor: vars.colors.background,\n    color: vars.colors.text,\n    minHeight: '100vh',\n  },\n]);\n"],"mappings":""}