@flux-ui/components 3.0.0-next.22 → 3.0.0-next.24

package/dist/index.css

@@ -53,177 +53,188 @@
     --font-sans: inter-variable, sans-serif;
     --font-serif: serif;
     --font-size: 15px;
-    --radius: 9px;
-    --background: var(--gray-2);
-    --foreground: var(--gray-8);
-    --foreground-prominent: var(--gray-10);
-    --foreground-secondary: var(--gray-5);
-    --overlay: oklch(from var(--gray-11) l c h / .6);
-    --overlay-secondary: oklch(from var(--gray-11) l c h / .4);
+    --radius: 12px;
+    --radius-double: 24px;
+    --radius-half: 6px;
+    --background: var(--gray-50);
+    --foreground: var(--gray-700);
+    --foreground-prominent: var(--gray-900);
+    --foreground-secondary: var(--gray-400);
+    --surface: var(--gray-25);
+    --surface-loader: rgb(from var(--gray-25) r g b / .75);
+    --surface-stroke: var(--gray-200);
+    --surface-stroke-hover: var(--gray-300);
+    --surface-stroke-out: rgb(from var(--gray-900) r g b / .1);
+    --surface-stroke-out-hover: rgb(from var(--gray-950) r g b / .1);
+    --surface-hover: var(--gray-50);
+    --surface-active: var(--gray-100);
+    --surface-disabled: var(--gray-100);
+    --overlay: rgb(from var(--gray-950) r g b / .3);
+    --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
   }
   :root, [light] {
-    --gray-0: oklch(100% 0 270);
-    --gray-1: oklch(98% 0.005 270);
-    --gray-2: oklch(95% 0.008 270);
-    --gray-3: oklch(91% 0.012 270);
-    --gray-4: oklch(84% 0.015 270);
-    --gray-5: oklch(72% 0.03 270);
-    --gray-6: oklch(64% 0.035 270);
-    --gray-7: oklch(52% 0.04 270);
-    --gray-8: oklch(40% 0.04 270);
-    --gray-9: oklch(32% 0.028 270);
-    --gray-10: oklch(24% 0.028 270);
-    --gray-11: oklch(16% 0.028 270);
-    --primary-0: oklch(99% 0 264);
-    --primary-1: oklch(96% 0.02 264);
-    --primary-2: oklch(92% 0.04 264);
-    --primary-3: oklch(88% 0.06 264);
-    --primary-4: oklch(80% 0.10 264);
-    --primary-5: oklch(72% 0.14 264);
-    --primary-6: oklch(64% 0.18 264);
-    --primary-7: oklch(52% 0.22 264);
-    --primary-8: oklch(40% 0.20 264);
-    --primary-9: oklch(32% 0.18 264);
-    --primary-10: oklch(24% 0.14 264);
-    --primary-11: oklch(16% 0.10 264);
-    --danger-0: oklch(99% 0.004 25);
-    --danger-1: oklch(96.9% 0.015 12);
-    --danger-2: oklch(94.1% 0.03 13);
-    --danger-3: oklch(89.2% 0.058 9);
-    --danger-4: oklch(80.6% 0.112 12);
-    --danger-5: oklch(70.6% 0.19 13);
-    --danger-6: oklch(64.3% 0.245 17);
-    --danger-7: oklch(59.7% 0.24 20);
-    --danger-8: oklch(52.5% 0.211 19);
-    --danger-9: oklch(45.9% 0.184 15);
-    --danger-10: oklch(41.1% 0.159 10);
-    --danger-11: oklch(27% 0.105 12);
-    --info-0: oklch(99% 0.005 235);
-    --info-1: oklch(97% 0.014 255);
-    --info-2: oklch(93.2% 0.032 256);
-    --info-3: oklch(88.2% 0.059 254);
-    --info-4: oklch(80.7% 0.101 250);
-    --info-5: oklch(70.4% 0.158 254);
-    --info-6: oklch(61.9% 0.207 259);
-    --info-7: oklch(54.7% 0.246 263);
-    --info-8: oklch(48.8% 0.243 264);
-    --info-9: oklch(42.4% 0.198 265);
-    --info-10: oklch(38% 0.145 265);
-    --info-11: oklch(28.1% 0.092 268);
-    --success-0: oklch(99% 0.005 145);
-    --success-1: oklch(98.2% 0.018 156);
-    --success-2: oklch(96.2% 0.043 157);
-    --success-3: oklch(92.6% 0.084 156);
-    --success-4: oklch(87% 0.149 155);
-    --success-5: oklch(79.1% 0.209 152);
-    --success-6: oklch(72.9% 0.212 148);
-    --success-7: oklch(63.2% 0.186 147);
-    --success-8: oklch(53% 0.149 149);
-    --success-9: oklch(44.7% 0.119 151);
-    --success-10: oklch(39.3% 0.096 152);
-    --success-11: oklch(26.5% 0.065 153);
-    --warning-0: oklch(99% 0.005 85);
-    --warning-1: oklch(98.7% 0.021 95);
-    --warning-2: oklch(96.2% 0.059 96);
-    --warning-3: oklch(92.4% 0.12 96);
-    --warning-4: oklch(87.8% 0.169 92);
-    --warning-5: oklch(82.9% 0.171 81);
-    --warning-6: oklch(77.2% 0.173 62);
-    --warning-7: oklch(66.7% 0.169 60);
-    --warning-8: oklch(55.7% 0.158 58);
-    --warning-9: oklch(47.5% 0.136 56);
-    --warning-10: oklch(41.5% 0.113 54);
-    --warning-11: oklch(27.9% 0.077 52);
-    --shadow-px: 0 1px 1px oklch(from var(--gray-9) l c h / 0.02);
-    --shadow-xs: 0 1px 2px 0 oklch(from var(--gray-9) l c h / 0.02);
-    --shadow-sm: 0 1px 3px oklch(from var(--gray-9) l c h / 0.05), 0 1px 2px -1px oklch(from var(--gray-9) l c h / 0.05);
-    --shadow-md: 0 4px 6px -1px oklch(from var(--gray-9) l c h / 0.05), 0 2px 4px -2px oklch(from var(--gray-9) l c h / 0.05);
-    --shadow-lg: 0 10px 15px -3px oklch(from var(--gray-9) l c h / 0.05), 0 4px 6px -4px oklch(from var(--gray-9) l c h / 0.05);
-    --shadow-xl: 0 20px 25px -5px oklch(from var(--gray-9) l c h / 0.05), 0 8px 10px -6px oklch(from var(--gray-9) l c h / 0.05);
-    --shadow-2xl: 0 25px 50px -12px oklch(from var(--gray-9) l c h / 0.12);
+    --gray-25: #ffffff;
+    --gray-50: #f7f8fc;
+    --gray-100: #eceef4;
+    --gray-200: #dee1ea;
+    --gray-300: #c6cad5;
+    --gray-400: #9da4b8;
+    --gray-500: #848ca2;
+    --gray-600: #606881;
+    --gray-700: #3f475e;
+    --gray-800: #2d3241;
+    --gray-900: #1a1f2d;
+    --gray-950: #090c19;
+    --primary-25: #fcfcfc;
+    --primary-50: #ebf2ff;
+    --primary-100: #d7e5ff;
+    --primary-200: #c4d8ff;
+    --primary-300: #9dbdff;
+    --primary-400: #77a2fc;
+    --primary-500: #5285f8;
+    --primary-600: #2258e5;
+    --primary-700: #0935b1;
+    --primary-800: #011e8c;
+    --primary-900: #000f60;
+    --primary-950: #000337;
+    --danger-25: #fefbfa;
+    --danger-50: #fff1f2;
+    --danger-100: #ffe4e6;
+    --danger-200: #ffccd3;
+    --danger-300: #ffa1ac;
+    --danger-400: #ff637e;
+    --danger-500: #ff2054;
+    --danger-600: #ec003e;
+    --danger-700: #c70036;
+    --danger-800: #a50035;
+    --danger-900: #8b0836;
+    --danger-950: #4d0218;
+    --info-25: #f9fcff;
+    --info-50: #eff6ff;
+    --info-100: #dbeafe;
+    --info-200: #bedbff;
+    --info-300: #8dc5ff;
+    --info-400: #52a2ff;
+    --info-500: #297fff;
+    --info-600: #165dfc;
+    --info-700: #1048e6;
+    --info-800: #163cb8;
+    --info-900: #1b398e;
+    --info-950: #162456;
+    --success-25: #fafdfa;
+    --success-50: #f0fdf4;
+    --success-100: #dcfce7;
+    --success-200: #b9f8cf;
+    --success-300: #7af1a9;
+    --success-400: #00df73;
+    --success-500: #00c951;
+    --success-600: #08a63d;
+    --success-700: #028236;
+    --success-800: #03662f;
+    --success-900: #0d542a;
+    --success-950: #032e15;
+    --warning-25: #fdfcf8;
+    --warning-50: #fffbeb;
+    --warning-100: #fef3c6;
+    --warning-200: #fee685;
+    --warning-300: #ffd22f;
+    --warning-400: #ffb902;
+    --warning-500: #ff9717;
+    --warning-600: #dd7500;
+    --warning-700: #b55500;
+    --warning-800: #934200;
+    --warning-900: #793600;
+    --warning-950: #451b00;
+    --shadow-px: 0 1px 1px rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-xs: 0 1px 2px 0 rgb(from var(--gray-800) r g b / 0.02);
+    --shadow-sm: 0 1px 3px rgb(from var(--gray-800) r g b / 0.05), 0 1px 2px -1px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(from var(--gray-800) r g b / 0.05), 0 2px 4px -2px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-lg: 0 10px 15px -3px rgb(from var(--gray-800) r g b / 0.05), 0 4px 6px -4px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-xl: 0 20px 25px -5px rgb(from var(--gray-800) r g b / 0.05), 0 8px 10px -6px rgb(from var(--gray-800) r g b / 0.05);
+    --shadow-2xl: 0 25px 50px -12px rgb(from var(--gray-800) r g b / 0.12);
   }
   [dark] {
     --overlay: rgb(0 0 0 / .6);
     --overlay-secondary: rgb(0 0 0 / .4);
-    --gray-0: oklch(16% 0.01 270);
-    --gray-1: oklch(19% 0.012 270);
-    --gray-2: oklch(23% 0.015 270);
-    --gray-3: oklch(27% 0.017 270);
-    --gray-4: oklch(35% 0.02 270);
-    --gray-5: oklch(43% 0.03 270);
-    --gray-6: oklch(51% 0.035 270);
-    --gray-7: oklch(63% 0.04 270);
-    --gray-8: oklch(75% 0.04 270);
-    --gray-9: oklch(83% 0.028 270);
-    --gray-10: oklch(91% 0.028 270);
-    --gray-11: oklch(99% 0.028 270);
-    --primary-0: oklch(26.8% 0.012 264);
-    --primary-1: oklch(29.3% 0.025 264);
-    --primary-2: oklch(32.4% 0.038 264);
-    --primary-3: oklch(36.4% 0.052 264);
-    --primary-4: oklch(40.6% 0.068 264);
-    --primary-5: oklch(45.3% 0.085 264);
-    --primary-6: oklch(49.8% 0.102 264);
-    --primary-7: oklch(54.9% 0.118 264);
-    --primary-8: oklch(60.9% 0.134 264);
-    --primary-9: oklch(68.5% 0.148 264);
-    --primary-10: oklch(73.9% 0.158 264);
-    --primary-11: oklch(79.5% 0.165 264);
-    --danger-0: oklch(26.1% 0.007 346);
-    --danger-1: oklch(29.3% 0.025 4);
-    --danger-2: oklch(32.4% 0.038 8);
-    --danger-3: oklch(36.4% 0.052 12);
-    --danger-4: oklch(40.6% 0.068 15);
-    --danger-5: oklch(45.3% 0.085 17);
-    --danger-6: oklch(49.8% 0.102 18);
-    --danger-7: oklch(54.9% 0.118 19);
-    --danger-8: oklch(60.9% 0.134 18);
-    --danger-9: oklch(68.5% 0.148 16);
-    --danger-10: oklch(73.9% 0.158 14);
-    --danger-11: oklch(79.5% 0.165 12);
-    --info-0: oklch(26.8% 0.012 264);
-    --info-1: oklch(29.3% 0.025 260);
-    --info-2: oklch(32.4% 0.038 258);
-    --info-3: oklch(36.4% 0.052 256);
-    --info-4: oklch(40.6% 0.068 254);
-    --info-5: oklch(45.3% 0.085 253);
-    --info-6: oklch(49.8% 0.102 252);
-    --info-7: oklch(54.9% 0.118 252);
-    --info-8: oklch(60.9% 0.134 253);
-    --info-9: oklch(68.5% 0.148 254);
-    --info-10: oklch(73.9% 0.158 254);
-    --info-11: oklch(79.5% 0.165 254);
-    --success-0: oklch(25.8% 0.017 156);
-    --success-1: oklch(29.3% 0.025 155);
-    --success-2: oklch(32.4% 0.038 155);
-    --success-3: oklch(36.4% 0.052 155);
-    --success-4: oklch(40.6% 0.068 154);
-    --success-5: oklch(45.3% 0.085 153);
-    --success-6: oklch(49.8% 0.102 152);
-    --success-7: oklch(54.9% 0.118 151);
-    --success-8: oklch(60.9% 0.134 150);
-    --success-9: oklch(68.5% 0.148 149);
-    --success-10: oklch(73.9% 0.158 148);
-    --success-11: oklch(79.5% 0.165 147);
-    --warning-0: oklch(27% 0.022 88);
-    --warning-1: oklch(29.3% 0.029 87);
-    --warning-2: oklch(32.4% 0.036 86);
-    --warning-3: oklch(36.4% 0.046 85);
-    --warning-4: oklch(40.6% 0.054 84);
-    --warning-5: oklch(45.3% 0.064 82);
-    --warning-6: oklch(49.8% 0.072 80);
-    --warning-7: oklch(54.9% 0.083 78);
-    --warning-8: oklch(60.9% 0.096 76);
-    --warning-9: oklch(68.5% 0.112 75);
-    --warning-10: oklch(73.9% 0.122 74);
-    --warning-11: oklch(79.5% 0.132 73);
-    --shadow-px: 0 1px 1px oklch(0 0 0 / 0.1);
-    --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.1);
-    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.15), 0 1px 2px -1px oklch(0 0 0 / 0.15);
-    --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.15), 0 2px 4px -2px oklch(0 0 0 / 0.15);
-    --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.15), 0 4px 6px -4px oklch(0 0 0 / 0.15);
-    --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.15), 0 8px 10px -6px oklch(0 0 0 / 0.15);
-    --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25);
+    --gray-25: #0c0d12;
+    --gray-50: #121419;
+    --gray-100: #1a1d24;
+    --gray-200: #23262f;
+    --gray-300: #363a45;
+    --gray-400: #494f61;
+    --gray-500: #5e657b;
+    --gray-600: #7f88a2;
+    --gray-700: #a4adc8;
+    --gray-800: #c0c7da;
+    --gray-900: #dae1f5;
+    --gray-950: #f4fbff;
+    --primary-25: #23262c;
+    --primary-50: #262c39;
+    --primary-100: #2a3448;
+    --primary-200: #303e5a;
+    --primary-300: #36486e;
+    --primary-400: #3e5585;
+    --primary-500: #44619d;
+    --primary-600: #4d6fb6;
+    --primary-700: #5980d3;
+    --primary-800: #6a96f5;
+    --primary-900: #77a7ff;
+    --primary-950: #85b8ff;
+    --danger-25: #272325;
+    --danger-50: #37272b;
+    --danger-100: #452c30;
+    --danger-200: #563237;
+    --danger-300: #69393d;
+    --danger-400: #7f4145;
+    --danger-500: #94484c;
+    --danger-600: #ab5155;
+    --danger-700: #c65d64;
+    --danger-800: #e66f7a;
+    --danger-900: #fd7c8c;
+    --danger-950: #ff8ba0;
+    --info-25: #23262c;
+    --info-50: #252c39;
+    --info-100: #283447;
+    --info-200: #2c3f59;
+    --info-300: #2e4b6d;
+    --info-400: #315884;
+    --info-500: #33659b;
+    --info-600: #3874b4;
+    --info-700: #4285d1;
+    --info-800: #539cf3;
+    --info-900: #5dadff;
+    --info-950: #6bbfff;
+    --success-25: #1d2620;
+    --success-50: #223027;
+    --success-100: #243a2b;
+    --success-200: #264632;
+    --success-300: #285438;
+    --success-400: #2b643f;
+    --success-500: #2d7345;
+    --success-600: #32844c;
+    --success-700: #3b9956;
+    --success-800: #4cb265;
+    --success-900: #59c56f;
+    --success-950: #6ad87b;
+    --warning-25: #2b261a;
+    --warning-50: #322b1b;
+    --warning-100: #3c331e;
+    --warning-200: #493c21;
+    --warning-300: #574725;
+    --warning-400: #68532a;
+    --warning-500: #785e30;
+    --warning-600: #8c6b35;
+    --warning-700: #a47a3b;
+    --warning-800: #c28f42;
+    --warning-900: #d89e4a;
+    --warning-950: #efae52;
+    --shadow-px: 0 1px 1px rgb(0 0 0 / 0.1);
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.1);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.15);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   }
   html {
     font-size: var(--font-size);
@@ -267,7 +278,7 @@
     font-size: 14px;
   }
   a:not([class]), a[class=""] {
-    color: var(--primary-7);
+    color: var(--primary-600);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 4px;
@@ -276,13 +287,13 @@
     text-decoration: none;
   }
   p {
-    line-height: 1.8;
+    line-height: 1.6;
   }
   blockquote {
     position: relative;
     margin: 0 0 0 30px;
     padding: 15px 21px;
-    background: var(--gray-2);
+    background: var(--gray-100);
     border-radius: var(--radius);
   }
   blockquote::before {
@@ -290,7 +301,7 @@
     top: 5px;
     left: -27px;
     content: "”";
-    color: var(--primary-7);
+    color: var(--primary-600);
     font-size: 39px;
     font-weight: 700;
   }
@@ -299,7 +310,7 @@
   }
   img:not([class]) {
     height: unset;
-    border-radius: calc(var(--radius) / 2);
+    border-radius: var(--radius-half);
     outline: 1px solid rgba(0, 0, 0, 0.025);
     outline-offset: -1px;
   }
@@ -312,10 +323,182 @@
   :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, [data-typography-aware]) + :where([data-typography-aware]) {
     margin-top: 21px;
   }
+}.overlay-view {
+  position: fixed;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+}
+
+.overlay-provider {
+  pointer-events: none;
+  z-index: 10000;
+}
+
+.overlay-shade {
+  background: var(--overlay);
+  backdrop-filter: blur(3px) saturate(180%);
+  pointer-events: none;
+  transition: opacity 600ms var(--swift-out);
+}
+
+.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active):not(.slide-over-transition-leave-active))) .overlay-shade {
+  opacity: 0;
+}
+
+.overlay {
+  position: fixed;
+  display: flex;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+  outline: 0;
+}
+.overlay > .base-pane-structure {
+  display: flex;
+  margin: auto;
+  max-height: min(840px, 100dvh - 180px);
+  width: calc(100dvw - 90px);
+  flex-flow: column nowrap;
+  box-shadow: var(--shadow-lg);
+  overflow: auto;
+  transition: 420ms var(--swift-out);
+  transition-property: filter, scale;
+}
+.overlay > .base-pane-structure .pane-footer {
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
+}
+.overlay > .base-pane-structure::after {
+  position: absolute;
+  display: block;
+  inset: 0;
+  content: "";
+  background: var(--overlay-secondary);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 420ms var(--swift-out);
+  z-index: 1;
+}
+.overlay.is-current > .base-pane-structure {
+  pointer-events: auto;
+}
+.overlay:not(.is-current) > .base-pane-structure {
+  filter: blur(3px);
+  scale: 0.95;
+}
+.overlay:not(.is-current) > .base-pane-structure::after {
+  opacity: 1;
+}
+
+.overlay-small {
+}
+.overlay-small > .base-pane-structure {
+  max-width: 420px;
+}
+
+.overlay-medium {
+}
+.overlay-medium > .base-pane-structure {
+  max-width: 540px;
+}
+
+.overlay-large {
+}
+.overlay-large > .base-pane-structure {
+  max-width: 720px;
+}
+
+.slide-over {
+  justify-content: flex-end;
+}
+.slide-over > .base-pane-structure {
+  margin: 9px;
+  max-height: calc(100% - 18px);
+  width: min(100dvw, 720px);
+  contain: paint;
+  overflow: auto;
+}
+.slide-over > .base-pane-structure > .pane-header,
+.slide-over > .base-pane-structure > .pane-footer {
+  position: sticky;
+  z-index: 100;
+}
+.slide-over > .base-pane-structure > .pane-header {
+  top: 0;
+  padding-bottom: 21px;
+  border-bottom: 1px solid var(--gray-100);
+  box-shadow: var(--shadow-xs);
+}
+.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar)) {
+  padding-bottom: 0;
+  border-bottom: 0;
+  box-shadow: none;
+}
+.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar))) {
+  background: inherit;
+}
+.slide-over > .base-pane-structure > .pane-header + .tab-bar {
+  position: sticky;
+  top: 45px;
+  z-index: 100;
+}
+.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar {
+  top: 69px;
+}
+.slide-over > .base-pane-structure > .pane-footer {
+  bottom: 0;
+}
+
+.overlay-transition-enter-active,
+.overlay-transition-leave-active {
+  transition: opacity 420ms var(--swift-out);
+}
+.overlay-transition-enter-active > .base-pane-structure,
+.overlay-transition-leave-active > .base-pane-structure {
+  transition: 420ms var(--swift-out);
+  transition-property: opacity, scale;
+}
+
+.overlay-transition-enter-from {
+  opacity: 0;
+}
+.overlay-transition-enter-from > .base-pane-structure {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.overlay-transition-leave-to {
+  opacity: 0;
+}
+.overlay-transition-leave-to > .base-pane-structure {
+  opacity: 0;
+  scale: 0.95;
+}
+
+.slide-over-transition-enter-active,
+.slide-over-transition-leave-active {
+  transition: opacity 600ms var(--swift-out);
+}
+.slide-over-transition-enter-active > .base-pane-structure,
+.slide-over-transition-leave-active > .base-pane-structure {
+  transition: 600ms var(--swift-out);
+  transition-property: opacity, transform;
+}
+
+.slide-over-transition-enter-from,
+.slide-over-transition-leave-to {
+  opacity: 0;
+  transition-delay: 210ms;
+}
+.slide-over-transition-enter-from > .base-pane-structure,
+.slide-over-transition-leave-to > .base-pane-structure {
+  transform: translate3d(100%, 0, 0);
 }.base-pane {
-  background: var(--gray-0);
+  background: var(--surface);
   background-clip: padding-box;
-  border: 1px solid oklch(from var(--gray-11) l c h/0.05);
+  border: 1px solid var(--surface-stroke-out);
   border-radius: var(--radius);
 }
 
@@ -325,8 +508,8 @@
   inset: 0;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(2px) saturate(180%);
-  background: oklch(from var(--gray-0) l c h/0.75);
+  backdrop-filter: blur(3px) saturate(180%);
+  background: var(--surface-loader);
   border-radius: inherit;
   z-index: 100;
 }
@@ -389,7 +572,7 @@
   font-size: 42px;
 }
 .icon-boxed .icon {
-  font-size: 0.33em;
+  font-size: 0.45em;
 }
 .icon-boxed .material-symbol-icon {
   font-size: 0.5em;
@@ -404,36 +587,36 @@
 }
 
 .icon-boxed-gray {
-  background: var(--gray-2);
+  background: var(--gray-100);
   color: var(--foreground);
 }
 
 .icon-boxed-primary {
-  background: var(--primary-2);
-  color: var(--primary-10);
+  background: var(--primary-100);
+  color: var(--primary-900);
 }
 
 .icon-boxed-danger {
-  background: var(--danger-2);
-  color: var(--danger-10);
+  background: var(--danger-100);
+  color: var(--danger-900);
 }
 
 .icon-boxed-info {
-  background: var(--info-2);
-  color: var(--info-10);
+  background: var(--info-100);
+  color: var(--info-900);
 }
 
 .icon-boxed-success {
-  background: var(--success-2);
-  color: var(--success-10);
+  background: var(--success-100);
+  color: var(--success-900);
 }
 
 .icon-boxed-warning {
-  background: var(--warning-2);
-  color: var(--warning-10);
+  background: var(--warning-100);
+  color: var(--warning-900);
 }.spinner {
-  --track: var(--gray-1);
-  --value: var(--primary-7);
+  --track: var(--gray-100);
+  --value: var(--primary-600);
   display: inline-block;
   height: 1em;
   width: 1em;
@@ -485,11 +668,11 @@
     transition: 180ms var(--swift-out);
     transition-property: background, border, box-shadow, color, scale, outline-color, outline-offset;
     user-select: none;
-    outline: 2px solid oklch(from var(--primary-7) l c h/0);
+    outline: 2px solid rgb(from var(--primary-600) r g b/0);
     outline-offset: 0;
   }
   .button:focus-visible {
-    outline-color: var(--primary-7);
+    outline-color: var(--primary-600);
     outline-offset: 2px;
   }
   .button:active {
@@ -546,16 +729,16 @@
   padding-left: 6px;
   padding-right: 6px;
   border: 0;
-  border-radius: var(--radius);
+  border-radius: var(--radius-half);
   box-shadow: none;
 }
 @media (hover: hover) {
   .action:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
   }
 }
 .action:active {
-  background: var(--gray-3);
+  background: var(--gray-200);
 }
 .action .spinner {
   font-size: 24px;
@@ -567,7 +750,7 @@
 }
 
 .action.is-destructive .action-icon {
-  color: var(--danger-7);
+  color: var(--danger-600);
 }
 
 .action-label {
@@ -589,8 +772,8 @@
 
 .base-pane-structure > .action-bar {
   padding: 15px 21px;
-  background: var(--gray-1);
-  border: 1px solid var(--gray-2);
+  background: var(--gray-50);
+  border: 1px solid var(--gray-100);
   border-left: 0;
   border-right: 0;
 }
@@ -633,88 +816,123 @@
 .action-pane-body.pane-body {
   padding: 0;
 }.primary-button {
-  background: var(--primary-7);
-  border-color: var(--primary-8);
-  box-shadow: 0 1px 1px oklch(from var(--primary-7) l c h/0.25);
-  color: var(--primary-0);
+  background: var(--primary-600);
+  border-color: var(--primary-700);
+  box-shadow: 0 1px 1px rgb(from var(--primary-600) r g b/0.25);
+  color: var(--primary-25);
 }
 @media (hover: hover) {
   .primary-button:hover {
-    background: var(--primary-8);
-    border-color: var(--primary-9);
+    background: var(--primary-700);
+    border-color: var(--primary-800);
   }
 }
 .primary-button:active {
-  background: var(--primary-9);
+  background: var(--primary-800);
   scale: 0.9875;
 }
 .primary-button .spinner {
-  --track: var(--primary-8);
-  --value: var(--primary-0);
+  --track: var(--primary-700);
+  --value: var(--primary-25);
 }
 
 .primary-button-icon {
-  color: var(--primary-0);
+  color: var(--primary-25);
 }
 
 .primary-button-label {
 }
 
 .secondary-button {
-  background: var(--gray-0);
-  border-color: var(--gray-2);
+  background: var(--surface);
+  border-color: var(--surface-stroke);
   color: var(--foreground);
 }
 @media (hover: hover) {
   .secondary-button:hover {
-    background: var(--gray-1);
+    background: var(--surface-hover);
   }
 }
 .secondary-button:active {
-  background: var(--gray-2);
-  border-color: var(--gray-3);
+  background: var(--surface-active);
   scale: 0.9875;
 }
 
 .secondary-button-icon {
-  color: var(--foreground-prominent);
+  color: var(--foreground);
 }
 
 .secondary-button-label {
 }
 
 .destructive-button {
-  background: var(--gray-0);
-  border-color: var(--gray-2);
+  background: var(--surface);
+  border-color: var(--surface-stroke);
   color: var(--foreground);
 }
 @media (hover: hover) {
   .destructive-button:hover {
-    background: var(--gray-1);
+    background: var(--surface-hover);
   }
 }
 .destructive-button:active {
-  background: var(--gray-2);
-  border-color: var(--gray-3);
+  background: var(--surface-active);
   scale: 0.9875;
 }
 .destructive-button .spinner {
-  --value: var(--danger-7);
+  --value: var(--danger-600);
 }
 
 .destructive-button-icon {
-  color: var(--danger-7);
+  color: var(--danger-600);
 }
 
 .destructive-button-label {
 }
 .destructive-button-label:only-child {
-  color: var(--danger-7);
+  color: var(--danger-600);
 }
 
 .secondary-button,
 .destructive-button {
-  box-shadow: var(--shadow-px), inset 0 -1px oklch(from var(--gray-3) l c h/0.15);
+  box-shadow: var(--shadow-px), inset 0 -1px rgb(from var(--gray-200) r g b/0.15);
+}
+
+.base-link-button {
+  gap: 6px;
+  border-color: transparent;
+  box-shadow: none;
+}
+@media (hover: hover) {
+  .base-link-button:hover {
+    background: var(--surface-hover);
+  }
+}
+.base-link-button:active {
+  background: var(--surface-active);
+  scale: 0.9875;
+}
+
+.primary-link-button {
+  color: var(--primary-700);
+}
+
+.primary-link-button-icon {
+  color: var(--primary-700);
+}
+
+.primary-link-button-label {
+}
+
+.secondary-link-button {
+  color: var(--foreground-prominent);
+}
+
+.secondary-link-button-icon {
+  color: var(--foreground);
+}
+
+.secondary-link-button-label {
 }
 
 .link-button {
@@ -723,20 +941,20 @@
   padding: 0;
   border: 0;
   box-shadow: unset;
-  color: var(--primary-7);
+  color: var(--primary-600);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 4px;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .link-button:focus-visible {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 6px;
 }
 @media (hover: hover) {
   .link-button:hover {
-    color: var(--primary-10);
+    color: var(--primary-900);
   }
   .link-button:hover .link-button-icon {
     transform: translate3d(6px, 0, 0);
@@ -744,7 +962,7 @@
 }
 
 .link-button-icon {
-  color: var(--primary-7);
+  color: var(--primary-600);
   transition: inherit;
   transition-property: transform;
 }
@@ -876,7 +1094,14 @@
 }
 
 .pane-well {
-  background: var(--gray-1);
+  --surface: var(--background);
+}
+
+:is(.pane-default, .pane-flat, .pane-well):is(a, button) {
+  transition: box-shadow 210ms var(--swift-out);
+}
+:is(.pane-default, .pane-flat, .pane-well):is(a, button):hover {
+  box-shadow: var(--shadow-lg);
 }
 
 .pane-header {
@@ -910,7 +1135,7 @@
 
 .pane-header-icon {
   margin-top: 2px;
-  color: var(--primary-7);
+  color: var(--primary-600);
 }
 
 .pane-body {
@@ -925,8 +1150,8 @@
   display: flex;
   padding: 21px;
   gap: 9px;
-  background: var(--gray-1);
-  border-top: 1px solid var(--gray-2);
+  background: var(--gray-50);
+  border-top: 1px solid var(--gray-100);
 }
 
 .pane-loader {
@@ -937,9 +1162,9 @@
   top: 15px;
   right: 15px;
   padding: 6px 9px;
-  background: var(--gray-10);
-  border-radius: calc(var(--radius) / 2);
-  color: var(--gray-0);
+  background: var(--gray-900);
+  border-radius: var(--radius-half);
+  color: var(--gray-25);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1px;
@@ -950,11 +1175,32 @@
 .pane-media {
   position: relative;
   overflow: hidden;
+  z-index: 0;
+}
+.pane-media::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: inherit;
+  z-index: 1;
+}
+.pane-media:first-child {
+  margin: -1px;
+  margin-bottom: 0;
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+.pane-media:not(:first-child)::after {
+  border-top: 0;
+}
+.pane-media:not(:last-child)::after {
+  border-bottom: 0;
 }
 
 .pane-media-inset {
   margin: 21px;
-  border-radius: calc(var(--radius) / 2);
+  border-radius: var(--radius-half);
 }
 .pane-media-inset:not(:first-child) {
   margin-top: 0;
@@ -991,7 +1237,7 @@
 }
 
 .pane-group + .pane-group {
-  border-top: 1px solid oklch(from var(--gray-11) l c h/0.05);
+  border-top: 1px solid var(--surface-stroke);
 }
 
 .pane-illustration {
@@ -1051,7 +1297,7 @@
   top: var(--pane-y);
   left: var(--pane-x);
   margin: 0;
-  padding: 12px;
+  padding: 24px;
   background: unset;
   border: 0;
   font-size: 1rem;
@@ -1109,8 +1355,11 @@
   flex-shrink: 0;
 }
 .aspect-ratio > * {
+  position: absolute;
   height: 100%;
   width: 100%;
+  object-fit: cover;
+  object-position: center;
 }
 
 .auto-grid {
@@ -1186,7 +1435,7 @@
 }
 
 .dot-pattern {
-  fill: var(--gray-4);
+  fill: var(--gray-300);
   pointer-events: none;
 }
 
@@ -1195,8 +1444,8 @@
 }
 
 .grid-pattern {
-  fill: var(--gray-2);
-  stroke: var(--gray-4);
+  fill: var(--gray-100);
+  stroke: var(--gray-300);
   pointer-events: none;
 }
 
@@ -1282,264 +1531,92 @@
   transition-property: opacity, scale;
 }
 
-.route-transition-enter-active,
-.route-transition-back-enter-active {
-  transition-duration: 180ms;
-  transition-timing-function: var(--deceleration-curve);
-}
-
-.route-transition-leave-active,
-.route-transition-back-leave-active {
-  transition-duration: 120ms;
-  transition-timing-function: var(--acceleration-curve);
-}
-
-.route-transition-enter-from,
-.route-transition-back-leave-to {
-  opacity: 0;
-  scale: 0.975;
-}
-
-.route-transition-leave-to,
-.route-transition-back-enter-from {
-  opacity: 0;
-  scale: 0.975;
-}
-
-.tooltip-transition-enter-active,
-.tooltip-transition-leave-active {
-  transition: 210ms var(--swift-out);
-  transition-property: opacity, scale;
-}
-
-.tooltip-transition-enter-from {
-  scale: 0.975;
-}
-
-.tooltip-transition-enter-from,
-.tooltip-transition-leave-to {
-  opacity: 0;
-}
-
-.vertical-window-transition-enter-active,
-.vertical-window-transition-back-enter-active {
-  contain: paint;
-  transition: 150ms var(--deceleration-curve);
-  transition-property: opacity, transform;
-}
-
-.vertical-window-transition-leave-active,
-.vertical-window-transition-back-leave-active {
-  transition: 150ms var(--acceleration-curve);
-  transition-property: opacity, transform;
-}
-
-.vertical-window-transition-back-leave-to,
-.vertical-window-transition-enter-from {
-  opacity: 0;
-  transform: translate3d(0, 15px, 0);
-}
-
-.vertical-window-transition-back-enter-from,
-.vertical-window-transition-leave-to {
-  opacity: 0;
-  transform: translate3d(0, -15px, 0);
-}
-
-.window-transition-enter-active,
-.window-transition-back-enter-active {
-  transition: 150ms var(--deceleration-curve);
-  transition-property: height, opacity, transform;
-}
-
-.window-transition-leave-active,
-.window-transition-back-leave-active {
-  transition: 150ms var(--acceleration-curve);
-  transition-property: height, opacity, transform;
-}
-
-.window-transition-back-leave-to,
-.window-transition-enter-from {
-  opacity: 0;
-  transform: translate3d(15px, 0, 0);
-}
-
-.window-transition-back-enter-from,
-.window-transition-leave-to {
-  opacity: 0;
-  transform: translate3d(-15px, 0, 0);
-}.overlay-view {
-  position: fixed;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-}
-
-.overlay-provider {
-  pointer-events: none;
-  z-index: 10000;
-}
-
-.overlay-shade {
-  background: var(--overlay);
-  backdrop-filter: blur(3px) saturate(180%);
-  pointer-events: none;
-  transition: opacity 600ms var(--swift-out);
-}
-
-.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active))) .overlay-shade {
-  opacity: 0;
-}
-
-.overlay {
-  position: fixed;
-  display: flex;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-  outline: 0;
-}
-.overlay > .base-pane-structure {
-  display: flex;
-  margin: auto;
-  max-height: min(840px, 100dvh - 180px);
-  width: calc(100dvw - 90px);
-  flex-flow: column nowrap;
-  box-shadow: var(--shadow-lg);
-  overflow: auto;
-  transition: 420ms var(--swift-out);
-  transition-property: filter, scale;
-}
-.overlay > .base-pane-structure .pane-footer {
-  position: sticky;
-  bottom: 0;
-  margin-top: auto;
-}
-.overlay > .base-pane-structure::after {
-  position: absolute;
-  display: block;
-  inset: 0;
-  content: "";
-  background: var(--overlay-secondary);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 420ms var(--swift-out);
-  z-index: 1;
-}
-.overlay.is-current > .base-pane-structure {
-  pointer-events: auto;
-}
-.overlay:not(.is-current) > .base-pane-structure {
-  filter: blur(3px);
-  scale: 0.95;
-}
-.overlay:not(.is-current) > .base-pane-structure::after {
-  opacity: 1;
-}
-
-.overlay-small {
+.route-transition-enter-active,
+.route-transition-back-enter-active {
+  transition-duration: 180ms;
+  transition-timing-function: var(--deceleration-curve);
 }
-.overlay-small > .base-pane-structure {
-  max-width: 420px;
+
+.route-transition-leave-active,
+.route-transition-back-leave-active {
+  transition-duration: 120ms;
+  transition-timing-function: var(--acceleration-curve);
 }
 
-.overlay-medium {
+.route-transition-enter-from,
+.route-transition-back-leave-to {
+  opacity: 0;
+  scale: 0.975;
 }
-.overlay-medium > .base-pane-structure {
-  max-width: 540px;
+
+.route-transition-leave-to,
+.route-transition-back-enter-from {
+  opacity: 0;
+  scale: 0.975;
 }
 
-.overlay-large {
+.tooltip-transition-enter-active,
+.tooltip-transition-leave-active {
+  transition: 210ms var(--swift-out);
+  transition-property: opacity, scale;
 }
-.overlay-large > .base-pane-structure {
-  max-width: 720px;
+
+.tooltip-transition-enter-from {
+  scale: 0.975;
 }
 
-.slide-over {
-  justify-content: flex-end;
+.tooltip-transition-enter-from,
+.tooltip-transition-leave-to {
+  opacity: 0;
 }
-.slide-over > .base-pane-structure {
-  margin: 9px;
-  max-height: calc(100% - 18px);
-  width: min(100dvw, 720px);
+
+.vertical-window-transition-enter-active,
+.vertical-window-transition-back-enter-active {
   contain: paint;
-  overflow: auto;
-}
-.slide-over > .base-pane-structure > .pane-header,
-.slide-over > .base-pane-structure > .pane-footer {
-  position: sticky;
-  z-index: 100;
-}
-.slide-over > .base-pane-structure > .pane-header {
-  top: 0;
-  padding-bottom: 21px;
-  border-bottom: 1px solid var(--gray-1);
-  box-shadow: var(--shadow-xs);
-}
-.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar)) {
-  padding-bottom: 0;
-  border-bottom: 0;
-  box-shadow: none;
-}
-.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar))) {
-  background: inherit;
-}
-.slide-over > .base-pane-structure > .pane-header + .tab-bar {
-  position: sticky;
-  top: 45px;
-  z-index: 100;
-}
-.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar {
-  top: 69px;
-}
-.slide-over > .base-pane-structure > .pane-footer {
-  bottom: 0;
+  transition: 120ms var(--deceleration-curve);
+  transition-property: opacity, transform;
 }
 
-.overlay-transition-enter-active,
-.overlay-transition-leave-active {
-  transition: opacity 420ms var(--swift-out);
-}
-.overlay-transition-enter-active > .base-pane-structure,
-.overlay-transition-leave-active > .base-pane-structure {
-  transition: 420ms var(--swift-out);
-  transition-property: opacity, scale;
+.vertical-window-transition-leave-active,
+.vertical-window-transition-back-leave-active {
+  transition: 120ms var(--acceleration-curve);
+  transition-property: opacity, transform;
 }
 
-.overlay-transition-enter-from {
-  opacity: 0;
-}
-.overlay-transition-enter-from > .base-pane-structure {
+.vertical-window-transition-back-leave-to,
+.vertical-window-transition-enter-from {
   opacity: 0;
-  scale: 0.9;
+  transform: translate3d(0, 15px, 0);
 }
 
-.overlay-transition-leave-to {
-  opacity: 0;
-}
-.overlay-transition-leave-to > .base-pane-structure {
+.vertical-window-transition-back-enter-from,
+.vertical-window-transition-leave-to {
   opacity: 0;
-  scale: 0.95;
+  transform: translate3d(0, -15px, 0);
 }
 
-.slide-over-transition-enter-active,
-.slide-over-transition-leave-active {
-  transition: opacity 600ms var(--swift-out);
+.window-transition-enter-active,
+.window-transition-back-enter-active {
+  transition: 120ms var(--deceleration-curve);
+  transition-property: height, opacity, transform;
 }
-.slide-over-transition-enter-active > .base-pane-structure,
-.slide-over-transition-leave-active > .base-pane-structure {
-  transition: 600ms var(--swift-out);
-  transition-property: opacity, transform;
+
+.window-transition-leave-active,
+.window-transition-back-leave-active {
+  transition: 120ms var(--acceleration-curve);
+  transition-property: height, opacity, transform;
 }
 
-.slide-over-transition-enter-from,
-.slide-over-transition-leave-to {
+.window-transition-back-leave-to,
+.window-transition-enter-from {
   opacity: 0;
-  transition-delay: 210ms;
+  transform: translate3d(15px, 0, 0);
 }
-.slide-over-transition-enter-from > .base-pane-structure,
-.slide-over-transition-leave-to > .base-pane-structure {
-  transform: translate3d(100%, 0, 0);
+
+.window-transition-back-enter-from,
+.window-transition-leave-to {
+  opacity: 0;
+  transform: translate3d(-15px, 0, 0);
 }.avatar {
   position: relative;
   display: inline-flex;
@@ -1554,9 +1631,9 @@
   display: block;
   height: inherit;
   width: inherit;
-  background: var(--gray-1);
+  background: var(--gray-50);
   border-radius: inherit;
-  box-shadow: inset 0 0 0 1px var(--gray-2);
+  box-shadow: inset 0 0 0 1px var(--gray-100);
 }
 
 .avatar-fallback {
@@ -1577,16 +1654,16 @@
 }
 
 .avatar-fallback-colorized {
-  background: color-mix(in srgb, var(--color), var(--gray-0) 80%);
+  background: color-mix(in srgb, var(--color), var(--gray-25) 80%);
   color: var(--color);
 }
 
 [dark] .avatar-fallback-colorized {
-  background: color-mix(in srgb, var(--color), var(--gray-0) 70%);
+  background: color-mix(in srgb, var(--color), var(--gray-25) 70%);
 }
 
 .avatar-fallback-neutral {
-  background: var(--gray-2);
+  background: var(--gray-100);
   color: var(--foreground-secondary);
 }
 
@@ -1596,8 +1673,8 @@
   inset: 0;
   align-items: center;
   justify-content: center;
-  background: oklch(from var(--gray-1) l c h/0.84);
-  box-shadow: inset 0 0 0 1px var(--gray-2);
+  background: rgb(from var(--gray-50) r g b/0.84);
+  box-shadow: inset 0 0 0 1px var(--gray-100);
   border-radius: inherit;
   backdrop-filter: blur(3px) saturate(180%);
 }
@@ -1617,27 +1694,27 @@
 }
 
 .avatar-status-gray {
-  background: var(--gray-6);
+  background: var(--gray-500);
 }
 
 .avatar-status-primary {
-  background: var(--primary-7);
+  background: var(--primary-600);
 }
 
 .avatar-status-danger {
-  background: var(--danger-7);
+  background: var(--danger-600);
 }
 
 .avatar-status-info {
-  background: var(--info-7);
+  background: var(--info-600);
 }
 
 .avatar-status-success {
-  background: var(--success-7);
+  background: var(--success-600);
 }
 
 .avatar-status-warning {
-  background: var(--warning-7);
+  background: var(--warning-600);
 }
 
 .avatar-clickable {
@@ -1671,16 +1748,16 @@
   text-align: left;
   transition: 180ms var(--swift-out);
   transition-property: background, outline-color, outline-offset;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .persona:focus-visible {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 2px;
 }
 @media (hover: hover) {
   .persona:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
   }
 }
 
@@ -1708,8 +1785,8 @@
   padding-right: 9px;
   align-items: center;
   gap: 6px;
-  background: var(--gray-0);
-  border: 1px solid var(--gray-2);
+  background: var(--surface);
+  border: 1px solid var(--surface-stroke);
   border-radius: 99px;
   color: var(--foreground-prominent);
   font-size: 13px;
@@ -1723,7 +1800,7 @@
 }
 @media (hover: hover) {
   .badge:is(a):hover {
-    background: var(--gray-1);
+    background: var(--gray-50);
     color: var(--foreground-prominent);
   }
 }
@@ -1747,12 +1824,12 @@
 }
 @media (hover: hover) {
   .badge-close:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
     color: var(--foreground);
   }
 }
 .badge-close:active {
-  background: var(--gray-3);
+  background: var(--gray-200);
   color: var(--foreground);
 }
 .badge-close .icon {
@@ -1784,44 +1861,44 @@
 }
 
 .badge-gray {
-  --color: var(--gray-8);
+  --color: var(--gray-700);
 }
 .badge-gray .badge-label {
   color: var(--foreground-prominent);
 }
 .badge-gray .spinner {
-  --value: var(--primary-7);
+  --value: var(--primary-600);
 }
 
 .badge-primary {
-  --color: var(--primary-7);
+  --color: var(--primary-600);
 }
 
 .badge-danger {
-  --color: var(--danger-7);
+  --color: var(--danger-600);
 }
 
 .badge-info {
-  --color: var(--info-7);
+  --color: var(--info-600);
 }
 
 .badge-success {
-  --color: var(--success-7);
+  --color: var(--success-600);
 }
 
 .badge-warning {
-  --color: var(--warning-7);
+  --color: var(--warning-600);
 }
 
 .tag {
-  background: var(--gray-1);
-  border-color: var(--gray-2);
-  border-radius: calc(var(--radius) / 2);
+  background: var(--gray-50);
+  border-color: var(--gray-200);
+  border-radius: var(--radius-half);
   font-weight: 400;
 }
 
 .tag-close {
-  border-radius: calc(var(--radius) / 3);
+  border-radius: var(--radius-half);
 }
 
 .tag-dot {
@@ -1890,11 +1967,14 @@
 }
 @media (hover: hover) {
   .menu-item:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
   }
 }
 .menu-item:active {
-  background: var(--gray-3);
+  background: var(--gray-200);
+}
+.menu-item .badge:last-child {
+  margin-right: -6px;
 }
 
 .menu-item-icon {
@@ -1913,42 +1993,45 @@
 }
 
 .menu-item-active {
-  background: var(--primary-7);
-  color: var(--primary-1);
+  background: var(--primary-600);
+  color: var(--primary-50);
 }
 .menu-item-active .menu-item-icon {
-  color: var(--primary-0);
+  color: var(--primary-25);
 }
 @media (hover: hover) {
   .menu-item-active:hover {
-    background: var(--primary-7);
+    background: var(--primary-600);
   }
 }
 .menu-item-active:active {
-  background: var(--primary-7);
+  background: var(--primary-600);
 }
 
 .menu-item-destructive .menu-item-icon {
-  color: var(--danger-8);
+  color: var(--danger-700);
 }
 .menu-item-destructive .menu-item-label {
-  color: var(--danger-8);
+  color: var(--danger-700);
 }
 
 .menu-item-highlighted {
-  background: var(--primary-2);
-  color: var(--primary-7);
+  background: var(--primary-100);
+  color: var(--primary-600);
 }
 .menu-item-highlighted .menu-item-icon {
-  color: var(--primary-8);
+  color: var(--primary-700);
 }
 @media (hover: hover) {
   .menu-item-highlighted:hover {
-    background: var(--primary-2);
+    background: var(--primary-100);
   }
 }
 .menu-item-highlighted:active {
-  background: var(--primary-2);
+  background: var(--primary-100);
+}
+.menu-item-highlighted .badge {
+  --surface-stroke: var(--primary-200);
 }
 
 .menu-item-indented {
@@ -1959,7 +2042,7 @@
 }
 
 .menu-item-selected .menu-item-selectable-icon {
-  color: var(--primary-7);
+  color: var(--primary-600);
 }
 
 .menu-item-command {
@@ -1986,7 +2069,7 @@
 
 .menu-item-active .menu-item-command,
 .menu-item-active .menu-item-command-icon {
-  color: var(--primary-4);
+  color: var(--primary-300);
 }
 
 .menu-item-image {
@@ -2021,7 +2104,7 @@
   padding: 12px 12px 6px;
   align-items: center;
   gap: 9px;
-  background: linear-gradient(to bottom, var(--gray-0) 75%, transparent);
+  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
   font-size: 14px;
   pointer-events: none;
   z-index: 1;
@@ -2057,7 +2140,7 @@
   bottom: 12px;
   width: 4px;
   content: "";
-  background: var(--primary-7);
+  background: var(--primary-600);
   border-radius: 99px;
   opacity: 0;
   transition: opacity 180ms var(--swift-out);
@@ -2067,14 +2150,14 @@
   min-height: 48px;
 }
 .menu-large .menu-item:not(.menu-item-indented)::after {
-  background: var(--primary-0);
+  background: var(--primary-25);
 }
 
 .menu-large .menu-item-active::after {
   opacity: 1;
 }
 .menu-large .menu-item-active.menu-item-indented {
-  background: var(--gray-2);
+  background: var(--gray-100);
 }
 .menu-large .menu-item-active.menu-item-indented .menu-item-icon,
 .menu-large .menu-item-active.menu-item-indented .menu-item-label {
@@ -2146,10 +2229,17 @@
   align-self: flex-start;
 }
 
+.form-grid {
+  --columns: 2;
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(var(--columns), 1fr);
+}
+
 .form-row {
   display: flex;
   flex-grow: 1;
-  gap: 12px;
+  gap: 18px;
 }
 
 .form-section-title {
@@ -2159,6 +2249,9 @@
 }
 
 @media (max-width: 767.98px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
   .form-row {
     flex-flow: column;
     gap: 18px;
@@ -2219,7 +2312,7 @@
 }
 
 .form-field-addition-error {
-  color: var(--danger-7);
+  color: var(--danger-600);
 }
 
 .form-field-addition-hint {
@@ -2237,9 +2330,9 @@
   width: 100%;
   padding: 0 12px;
   align-self: start;
-  background: var(--gray-0);
+  background: var(--surface);
   background-clip: padding-box;
-  border: 1px solid var(--gray-2);
+  border: 1px solid var(--surface-stroke);
   border-radius: var(--radius);
   box-shadow: var(--shadow-px);
   color: var(--foreground);
@@ -2250,13 +2343,14 @@
   color: var(--foreground-secondary);
 }
 .form-input.is-secondary {
-  background: var(--gray-1);
+  background: var(--background);
   border-color: transparent;
   box-shadow: none;
 }
 
 .form-input-disabled {
-  background: var(--gray-2);
+  background: var(--surface-disabled);
+  color: var(--foreground-secondary);
   cursor: not-allowed;
 }
 .form-input-disabled input {
@@ -2264,16 +2358,16 @@
 }
 
 .form-input-enabled {
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .form-input-enabled:focus-visible, .form-input-enabled:focus-within {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: -1px;
 }
 @media (hover: hover) {
   .form-input-enabled:hover {
-    border-color: var(--gray-3);
+    border-color: var(--surface-stroke-hover);
   }
 }
 
@@ -2325,7 +2419,7 @@
 }
 .form-input-native::-webkit-color-swatch {
   border: 0;
-  border-radius: calc(var(--radius) / 2);
+  border-radius: var(--radius-half);
 }
 .form-input-native::-webkit-color-swatch-wrapper {
   margin: 0 -12px;
@@ -2347,37 +2441,37 @@
   align-items: center;
   flex-grow: 0;
   justify-content: center;
-  background: var(--gray-1);
+  background: var(--surface-disabled);
   color: var(--foreground-secondary);
   pointer-events: none;
 }
 .form-input-addition:has(+ .form-input .form-input-native) {
-  border-right: 1px solid var(--gray-2);
+  border-right: 1px solid var(--surface-stroke);
 }
 .form-input-addition + .form-input-addition {
-  border-left: 1px solid var(--gray-2);
+  border-left: 1px solid var(--surface-stroke);
 }
 .form-input:has(.form-input-native) + .form-input-addition {
-  border-left: 1px solid var(--gray-2);
+  border-left: 1px solid var(--surface-stroke);
 }
 
 .form-input-group {
   display: flex;
   padding: 0;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .form-input-group:focus-visible, .form-input-group:focus-within {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: -1px;
 }
 .form-input-group > :is(.form-input, .form-select, .button) + :is(.button, .button-group) {
   margin: 0;
-  border-left: 1px solid var(--gray-2);
+  border-left: 1px solid var(--surface-stroke);
 }
 .form-input-group > .button-group > .button + .button {
   margin: 0;
-  border-left: 1px solid var(--gray-2);
+  border-left: 1px solid var(--surface-stroke);
 }
 .form-input-group > .button-group:not(:first-child) > .button:first-child {
   border-top-left-radius: 0;
@@ -2395,14 +2489,31 @@
 }
 .form-input-group.is-secondary .secondary-button {
   background: transparent;
-  border-color: var(--gray-2);
+  border-color: var(--surface-stroke);
   box-shadow: none;
 }
 @media (hover: hover) {
   .form-input-group.is-secondary .secondary-button:hover {
-    background: var(--gray-3);
+    background: var(--surface-stroke-hover);
   }
 }
+.form-input-group:has(*:disabled) {
+  cursor: not-allowed;
+}
+.form-input-group:has(*:disabled) > * {
+  pointer-events: none;
+}
+.form-input-group :is(.button[disabled]),
+.form-input-group :is(.button[aria-disabled=true]) {
+  background: var(--surface-disabled);
+  opacity: 1;
+}
+.form-input-group :is(.button[disabled]),
+.form-input-group :is(.button[disabled]) .button-icon,
+.form-input-group :is(.button[aria-disabled=true]),
+.form-input-group :is(.button[aria-disabled=true]) .button-icon {
+  color: var(--foreground-secondary);
+}
 
 .form-date-input {
   cursor: default;
@@ -2446,23 +2557,23 @@
   cursor: pointer;
 }
 .form-select:not(.is-disabled) {
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .form-select:not(.is-disabled):focus-visible, .form-select:not(.is-disabled):focus-within {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: -1px;
 }
 @media (hover: hover) {
   .form-select:not(.is-disabled):hover {
-    border-color: var(--gray-4);
+    border-color: var(--surface-stroke-hover);
   }
 }
 .form-select.is-disabled {
   cursor: not-allowed;
 }
 .form-select.is-focused {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: -1px;
 }
 .form-select .badge {
@@ -2484,7 +2595,7 @@
   top: 0;
   height: 48px;
   margin-bottom: 9px;
-  background: var(--gray-0);
+  background: var(--surface);
   border-top: 0;
   border-left: 0;
   border-right: 0;
@@ -2552,8 +2663,8 @@
 }
 
 .is-disabled .form-select-selected {
-  background: var(--gray-2);
-  border: 1px solid var(--gray-3);
+  background: var(--surface-disabled);
+  border: 1px solid var(--surface-stroke);
   color: var(--foreground-secondary);
   opacity: 1;
 }
@@ -2596,15 +2707,15 @@
   padding: 0;
   align-items: center;
   justify-content: center;
-  background: var(--gray-2);
-  border: 0;
-  border-radius: calc(var(--radius) / 2);
-  color: var(--primary-0);
+  background: var(--gray-50);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius-half);
+  color: var(--primary-25);
   cursor: pointer;
   pointer-events: none;
   transition: 210ms var(--swift-out);
-  transition-property: background, color, outline-color, outline-offset;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  transition-property: background, border-color, color, outline-color, outline-offset;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .checkbox-element .icon {
@@ -2628,17 +2739,18 @@
 }
 @media (hover: hover) {
   .checkbox-native:hover + .checkbox-element {
-    background: var(--gray-3);
+    background: var(--gray-100);
   }
 }
 .checkbox-native:is(:checked, :indeterminate) + .checkbox-element {
-  background: var(--primary-7);
+  background: var(--primary-600);
+  border-color: var(--primary-600);
 }
 .checkbox-native:is(:checked, :indeterminate) + .checkbox-element .icon {
   opacity: 1;
 }
 .checkbox-native:focus-visible + .checkbox-element {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 2px;
 }
 
@@ -2646,22 +2758,22 @@
   min-width: max-content;
   align-self: center;
   justify-self: center;
-  border: 1px solid var(--gray-2);
+  border: 1px solid var(--surface-stroke);
   border-radius: var(--radius);
   box-shadow: var(--shadow-px);
   overflow: hidden;
   transition: 180ms var(--swift-out);
-  transition-property: outline-color, outline-offset;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  transition-property: border-color, outline-color, outline-offset;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .quantity-selector:focus-visible, .quantity-selector:focus-within {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 2px;
 }
 @media (hover: hover) {
   .quantity-selector:hover {
-    border-color: var(--gray-3);
+    border-color: var(--surface-stroke-hover);
   }
 }
 
@@ -2689,7 +2801,7 @@
   text-align: center;
 }
 .quantity-selector-input:hover {
-  border-color: var(--gray-3);
+  border-color: var(--surface-stroke-hover);
 }
 .quantity-selector-input, .quantity-selector-input:focus-visible, .quantity-selector-input:focus-within {
   outline: 0 !important;
@@ -2717,8 +2829,7 @@
 .pin-input-field {
   padding: 0;
   width: 2.7ch;
-  background-clip: padding-box;
-  border: 1px solid var(--gray-3);
+  border: 1px solid var(--surface-stroke);
   border-radius: var(--radius);
   box-shadow: var(--shadow-px);
   font: inherit;
@@ -2732,20 +2843,20 @@
 .pin-input-enabled {
 }
 .pin-input-enabled .pin-input-field {
-  background-color: var(--gray-0);
+  background-color: var(--surface);
   color: var(--foreground-prominent);
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .pin-input-enabled .pin-input-field:focus-visible, .pin-input-enabled .pin-input-field:focus-within {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: -1px;
 }
 
 .pin-input-disabled {
 }
 .pin-input-disabled .pin-input-field {
-  background-color: var(--gray-2);
+  background-color: var(--surface-disabled);
   color: var(--foreground-secondary);
   cursor: not-allowed;
 }
@@ -2756,18 +2867,22 @@
   width: 54px;
   height: 30px;
   flex: 0 0 auto;
-  background: var(--gray-2);
+  background: var(--gray-50);
+  border: 1px solid var(--gray-200);
   border-radius: 99px;
   contain: paint;
 }
+.toggle.is-checked {
+  border-color: transparent;
+}
 .toggle.is-checked .toggle-input::after {
   translate: 24px 0;
 }
 .toggle.is-checked:not(.is-switch) {
-  background: var(--primary-7);
+  background: var(--primary-600);
 }
 .toggle.is-checked:not(.is-switch) .toggle-icon {
-  color: var(--primary-0);
+  color: var(--primary-25);
 }
 .toggle.is-checked:not(.is-switch) .toggle-input::after {
   border-color: transparent;
@@ -2812,24 +2927,23 @@
   border-radius: inherit;
   cursor: pointer;
   outline: 0;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .toggle-input:focus-visible {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 2px;
 }
 .toggle-input::after {
   position: absolute;
   display: block;
-  top: 3px;
-  left: 3px;
+  top: 2px;
+  left: 2px;
   height: 24px;
   width: 24px;
   content: "";
-  background: var(--gray-0);
-  background-clip: padding-box;
-  border: 1px solid var(--gray-3);
+  background: var(--surface);
+  border: 1px solid var(--surface-stroke);
   border-radius: 99px;
   box-shadow: var(--shadow-sm);
 }
@@ -2844,7 +2958,7 @@
   max-height: 50dvh;
   max-width: 100%;
   padding: 9px;
-  width: 330px;
+  width: 300px;
   overflow: auto;
   scrollbar-width: none;
   transition: height 150ms var(--deceleration-curve);
@@ -2879,8 +2993,8 @@
   margin: -9px -9px 3px;
   padding: 9px;
   top: -9px;
-  background: var(--gray-0);
-  border-bottom: 1px solid var(--gray-2);
+  background: var(--surface);
+  border-bottom: 1px solid var(--surface-stroke);
   z-index: 2;
 }
 .filter-header:first-child {
@@ -2906,8 +3020,19 @@
   top: 52px;
   margin: -9px -9px 0;
   padding: 9px;
-  background: linear-gradient(to bottom, var(--gray-0) 75%, transparent);
+  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
   z-index: 1;
+}
+
+.filter-bar {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-grow: 1;
+  gap: 15px;
+}
+
+.filter-bar-search {
+  max-width: 300px;
 }.slider {
   position: relative;
   display: flex;
@@ -2929,9 +3054,9 @@
   height: 24px;
   width: 24px;
   padding: 0;
-  background: var(--gray-0);
+  background: var(--surface);
   background-clip: padding-box;
-  border: 1px solid oklch(from var(--gray-11) l c h/0.05);
+  border: 1px solid var(--surface-stroke-out);
   border-radius: 99px;
   box-shadow: var(--shadow-sm);
   cursor: grab;
@@ -2939,20 +3064,20 @@
   translate: -50% -50%;
   transition: 180ms var(--swift-out);
   transition-property: outline-color, outline-offset;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .slider-thumb:focus-visible {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 2px;
 }
 @media (hover: hover) {
   .slider-thumb:hover {
-    background-color: var(--gray-1);
+    background-color: var(--surface-hover);
   }
 }
 .slider-thumb.is-disabled {
-  background-color: var(--gray-1);
+  background-color: var(--surface-disabled);
   box-shadow: none;
   pointer-events: none;
 }
@@ -2964,9 +3089,9 @@
 .slider-track {
   position: relative;
   height: 12px;
-  background: var(--gray-2);
-  border-radius: calc(var(--radius) / 2);
-  box-shadow: inset 0 0 0 1px var(--gray-3);
+  background: var(--gray-50);
+  border-radius: var(--radius-half);
+  box-shadow: inset 0 0 0 1px var(--surface-stroke);
 }
 
 .slider-track-value {
@@ -2974,12 +3099,12 @@
   display: block;
   top: 0;
   height: inherit;
-  background: var(--primary-7);
+  background: var(--primary-600);
   border-radius: inherit;
 }
 
 .slider.is-disabled .slider-track-value {
-  background: var(--gray-4);
+  background: var(--gray-300);
 }
 
 .tick {
@@ -2988,7 +3113,7 @@
   bottom: 0;
   height: 9px;
   width: 2px;
-  background: var(--gray-4);
+  background: var(--gray-300);
   border-radius: 99px;
   color: var(--foreground-prominent);
   font-size: 10px;
@@ -3064,11 +3189,11 @@
 .divider-line {
   height: 1px;
   content: "";
-  background: var(--gray-2);
+  background: var(--gray-100);
 }
 
 .separator {
-  background: var(--gray-2);
+  background: var(--gray-200);
 }
 
 .separator-horizontal {
@@ -3108,7 +3233,7 @@
 }
 @media (hover: hover) {
   .calendar-current-value:hover {
-    color: var(--primary-7);
+    color: var(--primary-600);
   }
 }
 
@@ -3127,12 +3252,12 @@
   gap: 1px;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: min-content repeat(6, auto);
-  background: var(--gray-1);
+  background: var(--gray-100);
 }
 
 .calendar-cell {
   padding: 12px 21px;
-  background: var(--gray-0);
+  background: var(--gray-25);
 }
 
 .calendar-day {
@@ -3152,7 +3277,7 @@
   padding-bottom: 39px;
 }
 .calendar-entry.is-disabled {
-  background: oklch(from var(--gray-0) l c h/0.5);
+  background: var(--gray-50);
   color: var(--foreground-secondary);
   pointer-events: none;
 }
@@ -3184,9 +3309,9 @@
   margin-left: -9px;
   margin-right: -9px;
   padding: 6px 9px;
-  background: var(--primary-2);
+  background: var(--primary-100);
   border: 0;
-  color: var(--primary-9);
+  color: var(--primary-800);
   cursor: pointer;
   font-size: 14px;
   line-height: 1.3em;
@@ -3198,7 +3323,7 @@
   -webkit-box-orient: vertical;
 }
 .calendar-event.is-single {
-  border-radius: calc(var(--radius) / 2);
+  border-radius: var(--radius-half);
 }
 .calendar-event.is-middle {
   margin-left: -22px;
@@ -3206,20 +3331,20 @@
 }
 .calendar-event.is-start {
   margin-right: -21px;
-  border-top-left-radius: calc(var(--radius) / 2);
-  border-bottom-left-radius: calc(var(--radius) / 2);
+  border-top-left-radius: var(--radius-half);
+  border-bottom-left-radius: var(--radius-half);
 }
 .calendar-event.is-end {
   margin-left: -21px;
-  border-top-right-radius: calc(var(--radius) / 2);
-  border-bottom-right-radius: calc(var(--radius) / 2);
+  border-top-right-radius: var(--radius-half);
+  border-bottom-right-radius: var(--radius-half);
 }
 .calendar-event:not(.is-single):not(.is-start) span {
   opacity: 0;
 }
 @media (hover: hover) {
   .calendar-event:hover {
-    background: var(--primary-3);
+    background: var(--primary-200);
   }
 }.date-picker {
   display: flex;
@@ -3243,8 +3368,8 @@
   display: flex;
   top: 0;
   align-items: center;
-  background: var(--gray-1);
-  border-bottom: 1px solid var(--gray-2);
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--surface-stroke);
   z-index: 1;
 }
 
@@ -3274,7 +3399,7 @@
 }
 @media (hover: hover) {
   .date-picker-header-view-button:hover {
-    color: var(--primary-7);
+    color: var(--primary-600);
   }
 }
 
@@ -3296,7 +3421,7 @@
 }
 @media (hover: hover) {
   .date-picker-date:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
     color: var(--foreground-prominent);
   }
 }
@@ -3308,18 +3433,18 @@
   font-weight: 500;
 }
 .date-picker-date.is-selected {
-  background: var(--primary-7);
-  color: var(--primary-1);
+  background: var(--primary-600);
+  color: var(--primary-50);
   font-weight: 700;
 }
 .date-picker-date.is-range-entry {
-  background: var(--primary-3);
+  background: var(--primary-200);
   border-radius: 0;
-  color: var(--primary-11);
+  color: var(--primary-950);
 }
 .date-picker-date.is-range-end, .date-picker-date.is-range-start {
-  background: var(--primary-7);
-  color: var(--primary-1);
+  background: var(--primary-600);
+  color: var(--primary-50);
   font-weight: 700;
 }
 .date-picker-date.is-range-entry:nth-child(7n+8), .date-picker-date.is-range-start {
@@ -3331,12 +3456,12 @@
   border-bottom-right-radius: var(--radius);
 }
 .date-picker-date.is-selection-entry {
-  background: var(--gray-2);
+  background: var(--gray-100);
   border-radius: 0;
   color: var(--foreground-prominent);
 }
 .date-picker-date.is-selection-end, .date-picker-date.is-selection-start {
-  background: var(--gray-3);
+  background: var(--gray-200);
   font-weight: 700;
 }
 .date-picker-date.is-selection-entry:nth-child(7n+8), .date-picker-date.is-selection-start {
@@ -3390,8 +3515,8 @@
   align-items: center;
   flex-grow: 0;
   gap: 9px;
-  background: var(--gray-1);
-  border: 1px solid var(--gray-2);
+  background: var(--gray-50);
+  border: 1px solid var(--gray-200);
   border-radius: 99px;
   color: var(--foreground);
   transition: 180ms var(--swift-out);
@@ -3399,28 +3524,26 @@
 }
 .chip.is-selectable {
   cursor: pointer;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .chip.is-selectable:focus-visible {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 2px;
 }
 @media (hover: hover) {
   .chip.is-selectable:hover {
-    background: var(--gray-2);
-    border-color: var(--gray-3);
+    background: var(--gray-100);
   }
 }
 .chip.is-selected {
-  background: var(--primary-2);
-  border-color: var(--primary-3);
-  color: var(--primary-7);
+  background: var(--primary-50);
+  border-color: var(--primary-200);
+  color: var(--primary-600);
 }
 @media (hover: hover) {
   .chip.is-selected:hover {
-    background: var(--primary-3);
-    border-color: var(--primary-4);
+    background: var(--primary-100);
   }
 }
 .chip :is(span) {
@@ -3463,8 +3586,8 @@
 .comment-content {
   min-width: 0;
   padding: 12px 18px;
-  background: linear-gradient(to bottom, var(--gray-0), var(--gray-1));
-  border: 1px solid var(--gray-2);
+  background: linear-gradient(to bottom, var(--gray-25), var(--gray-50));
+  border: 1px solid var(--gray-200);
   border-radius: calc(var(--radius) * 2);
   box-shadow: var(--shadow-xs);
 }
@@ -3474,8 +3597,8 @@
 }
 
 .comment.is-received .comment-content {
-  background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
-  border-color: var(--gray-3);
+  background: linear-gradient(to bottom, var(--gray-50), var(--gray-100));
+  border-color: var(--gray-200);
   border-bottom-left-radius: var(--radius);
 }
 
@@ -3508,40 +3631,40 @@
 }
 
 [dark] .comment-content {
-  background: linear-gradient(to bottom, var(--gray-1), var(--gray-0));
+  background: linear-gradient(to bottom, var(--gray-50), var(--gray-25));
 }
 
 [dark] .comment.is-received .comment-content {
-  background: linear-gradient(to bottom, var(--gray-2), var(--gray-1));
+  background: linear-gradient(to bottom, var(--gray-100), var(--gray-50));
 }
 
 @keyframes comment-typing {
   0%, 80%, 100% {
-    background: var(--gray-3);
-    box-shadow: -9px 0 var(--gray-3), 9px 0 var(--gray-3);
+    background: var(--gray-200);
+    box-shadow: -9px 0 var(--gray-200), 9px 0 var(--gray-200);
     translate: 0 0;
   }
   20% {
-    background: var(--gray-3);
-    box-shadow: -9px -4px var(--gray-5), 9px 0 var(--gray-3);
+    background: var(--gray-200);
+    box-shadow: -9px -4px var(--gray-300), 9px 0 var(--gray-200);
     translate: 0 0;
   }
   40% {
-    background: var(--gray-5);
-    box-shadow: -9px 4px var(--gray-3), 9px 4px var(--gray-3);
+    background: var(--gray-300);
+    box-shadow: -9px 4px var(--gray-200), 9px 4px var(--gray-200);
     translate: 0 -4px;
   }
   60% {
-    background: var(--gray-3);
-    box-shadow: -9px 0 var(--gray-3), 9px -4px var(--gray-5);
+    background: var(--gray-200);
+    box-shadow: -9px 0 var(--gray-200), 9px -4px var(--gray-300);
     translate: 0 0;
   }
 }.coordinate-picker {
   position: relative;
   aspect-ratio: 5/3;
-  background: var(--gray-1);
-  border: 1px solid oklch(from var(--gray-11) l c h/0.05);
-  border-radius: calc(var(--radius) / 2);
+  background: var(--gray-50);
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius-half);
   z-index: 0;
 }
 
@@ -3579,7 +3702,7 @@
 }
 .color-picker-preview::after {
   background: var(--color);
-  box-shadow: inset 0 0 0 1px oklch(from var(--gray-11) l c h/0.05);
+  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
 }
 
 .color-picker-saturation {
@@ -3597,7 +3720,7 @@
 }
 .color-picker-saturation::after {
   background: linear-gradient(to top, black, transparent);
-  box-shadow: inset 0 0 0 1px oklch(from var(--gray-11) l c h/0.05);
+  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
 }
 
 .color-picker-slider {
@@ -3684,8 +3807,8 @@
 }
 
 .color-select-custom {
-  background: var(--gray-1);
-  border: 1px solid var(--gray-2);
+  background: var(--gray-50);
+  border: 1px solid var(--gray-200);
 }
 
 .color-select-custom-picker {
@@ -3724,7 +3847,7 @@
 }
 
 .pagination-button-arrow.secondary-button {
-  border-color: var(--gray-2);
+  border-color: var(--surface-stroke);
 }
 .pagination-button-arrow:first-child {
   margin-right: 6px;
@@ -3734,8 +3857,8 @@
 }
 
 .pagination-button.pagination-button-current {
-  background: var(--primary-1);
-  border-color: var(--primary-3);
+  background: var(--primary-50);
+  border-color: var(--primary-200);
 }
 
 .pagination-button-spacer {
@@ -3825,7 +3948,7 @@
 .table-cell {
   height: 0;
   padding: 0;
-  border: 0 solid var(--gray-2);
+  border: 0 solid var(--gray-100);
 }
 @-moz-document url-prefix() {
   .table-cell {
@@ -3841,7 +3964,7 @@
 }
 
 .table-header {
-  border-bottom: 2px solid var(--gray-2);
+  border-bottom: 2px solid var(--gray-100);
   color: var(--foreground-prominent);
 }
 .table-header.is-shrinking {
@@ -3851,7 +3974,7 @@
 .table-header.is-sticky {
   position: sticky;
   top: 0;
-  background: var(--gray-1);
+  background: var(--gray-50);
   z-index: 1;
 }
 
@@ -3861,17 +3984,17 @@
 }
 
 tbody .table-row:nth-child(even) .table-cell.is-striped {
-  background: oklch(from var(--gray-1) l c h/0.5);
+  background: rgb(from var(--gray-50) r g b/0.5);
 }
 
 @media (hover: hover) {
   tbody .table-row:hover .table-cell.is-hoverable,
   tbody .table-row:has(:focus-visible) .table-cell.is-hoverable {
-    background: var(--gray-1);
+    background: var(--gray-50);
   }
 }
 tfoot .table-cell {
-  border-top: 1px solid var(--gray-2);
+  border-top: 1px solid var(--gray-100);
 }
 
 .table-cell + .table-cell.is-bordered {
@@ -3898,8 +4021,8 @@ tfoot .table-cell {
 
 .table-bar {
   position: relative;
-  background: var(--gray-1);
-  box-shadow: 0 0 24px var(--gray-1), 0 0 18px var(--gray-1), 0 0 12px var(--gray-1), 0 0 9px var(--gray-1), 0 0 6px var(--gray-1), 0 0 3px var(--gray-1);
+  background: var(--gray-50);
+  box-shadow: 0 0 24px var(--gray-50), 0 0 24px var(--gray-50), 0 0 24px var(--gray-50), 0 0 24px var(--gray-50), 0 0 24px var(--gray-50), 0 0 24px var(--gray-50);
   z-index: 2;
 }
 
@@ -3910,18 +4033,14 @@ tfoot .table-cell {
   flex-flow: row nowrap;
   gap: 15px;
 }
-.table-bar-content > .form-input {
-  max-width: 300px;
-  min-width: 210px;
-}
 
 .table-pagination {
   position: sticky;
   bottom: 0;
   margin-top: auto;
   margin-bottom: -1px;
-  background: var(--gray-0);
-  border-top: 1px solid var(--gray-2);
+  background: var(--surface);
+  border-top: 1px solid var(--gray-100);
   translate: 0 -1px;
   z-index: 100;
 }
@@ -3936,14 +4055,14 @@ tfoot .table-cell {
   justify-content: center;
   background: unset;
   border: 0;
-  border-radius: calc(var(--radius) / 2);
+  border-radius: var(--radius-half);
   color: var(--foreground-secondary);
   cursor: pointer;
   outline: 0;
 }
 @media (hover: hover) {
   .table-sort:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
     color: var(--foreground);
   }
 }
@@ -3962,7 +4081,7 @@ tfoot .table-cell {
 
 .base-pane-structure > .table :is(caption) {
   padding: 12px 21px;
-  border-top: 1px solid var(--gray-3);
+  border-top: 1px solid var(--gray-100);
 }
 
 .base-pane-structure > .table .table-loader {
@@ -3990,8 +4109,8 @@ tfoot .table-cell {
   --dz-width: calc(100% + 6px);
 }
 .drop-zone:has(.drop-zone-content > .placeholder) {
-  --dz-fill: var(--gray-1);
-  --dz-stroke: var(--gray-3);
+  --dz-fill: var(--gray-50);
+  --dz-stroke: var(--gray-200);
 }
 
 .drop-zone {
@@ -4042,11 +4161,11 @@ tfoot .table-cell {
 }
 
 .is-dragging .drop-zone-content {
-  --dz-stroke: var(--primary-7);
+  --dz-stroke: var(--primary-600);
 }
 
 .is-dragging-over .drop-zone-content:has(.placeholder) {
-  --dz-fill: var(--primary-2);
+  --dz-fill: var(--primary-100);
 }
 .is-dragging-over .drop-zone-content .drop-zone-border rect {
   animation: drop-zone-border-animation 480ms linear infinite both;
@@ -4058,7 +4177,7 @@ tfoot .table-cell {
   inset: var(--dz-inset);
   align-items: center;
   justify-content: center;
-  background: oklch(from var(--gray-1) l c h/0.84);
+  background: rgb(from var(--gray-50) r g b/0.84);
   backdrop-filter: blur(3px) saturate(180%);
   border-radius: var(--dz-radius);
   z-index: 100;
@@ -4091,16 +4210,16 @@ tfoot .table-cell {
   transition: background 180ms var(--swift-out);
   transition-property: background, outline-color, outline-offset;
   z-index: 1;
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .expandable-header:focus-visible {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 0;
 }
 @media (hover: hover) {
   .expandable-header:hover {
-    background: var(--gray-1);
+    background: var(--surface-hover);
   }
 }
 .expandable-header :is(span) {
@@ -4150,13 +4269,13 @@ tfoot .table-cell {
   flex-flow: column;
 }
 .expandable-group .expandable + .expandable {
-  border-top: 1px solid var(--gray-2);
+  border-top: 1px solid var(--surface-stroke);
 }
 .expandable-group:not(:first-child) {
-  border-top: 1px solid var(--gray-2);
+  border-top: 1px solid var(--surface-stroke);
 }
 .expandable-group:not(:last-child) {
-  border-bottom: 1px solid var(--gray-2);
+  border-bottom: 1px solid var(--surface-stroke);
 }
 
 .base-pane > .expandable-group:first-child .expandable:first-child .expandable-header {
@@ -4199,6 +4318,39 @@ tfoot .table-cell {
 .fader-item :is(img):not(.focal-point-image) {
   object-fit: cover;
   object-position: center;
+}.overflow-bar {
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 2;
+  overflow: hidden;
+}
+.overflow-bar.align-start {
+  justify-content: flex-start;
+}
+.overflow-bar.align-center {
+  justify-content: center;
+}
+.overflow-bar.align-end {
+  justify-content: flex-end;
+}
+
+.overflow-bar-horizontal {
+  flex-flow: row nowrap;
+}
+
+.overflow-bar-vertical {
+  flex-flow: column nowrap;
+}
+
+.overflow-bar-measurer {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.overflow-bar-overflow {
+  display: contents;
 }.focal-point-image {
   object-fit: cover;
 }
@@ -4286,17 +4438,17 @@ tfoot .table-cell {
   width: 27px;
   align-items: center;
   justify-content: center;
-  background: var(--danger-7);
-  border: 3px solid var(--gray-0);
+  background: var(--danger-600);
+  border: 3px solid var(--surface);
   border-radius: 99px;
-  color: var(--danger-0);
+  color: var(--danger-25);
   cursor: pointer;
   transition: 300ms var(--swift-out);
   transition-property: background, opacity, scale;
 }
 @media (hover: hover) {
   .remove:hover {
-    background: var(--danger-8);
+    background: var(--danger-700);
   }
 }
 .remove.is-hidden {
@@ -4310,8 +4462,8 @@ tfoot .table-cell {
   flex: 1 0 auto;
   flex-flow: column;
   justify-content: center;
-  background: var(--gray-1);
-  border: 2px dashed var(--gray-3);
+  background: var(--gray-50);
+  border: 2px dashed var(--gray-200);
   border-radius: var(--radius);
   text-align: center;
   user-select: none;
@@ -4321,7 +4473,7 @@ tfoot .table-cell {
 }
 @media (hover: hover) {
   .placeholder.is-button:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
   }
 }
 .placeholder.is-extended {
@@ -4362,7 +4514,7 @@ tfoot .table-cell {
 }
 
 .placeholder-icon {
-  color: var(--primary-7);
+  color: var(--primary-600);
   font-size: 20px;
 }.gallery {
   --dz-fill: transparent;
@@ -4382,12 +4534,12 @@ tfoot .table-cell {
 .gallery-add {
   position: relative;
   aspect-ratio: 1/1;
-  color: var(--gray-7);
+  color: var(--foreground-secondary);
 }
 @media (hover: hover) {
   .gallery-add:hover {
-    background: var(--gray-2);
-    border-color: var(--gray-3);
+    background: var(--gray-100);
+    border-color: var(--gray-200);
   }
 }
 
@@ -4422,7 +4574,7 @@ tfoot .table-cell {
   inset: 1px;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(2px) saturate(180%);
+  backdrop-filter: blur(3px) saturate(180%);
   background: rgba(0, 0, 0, 0.25);
   border-radius: calc(var(--radius) - 1px);
   z-index: 0;
@@ -4471,14 +4623,68 @@ tfoot .table-cell {
   gap: 15px;
 }
 .info > .icon {
-  margin-top: 1px;
+  margin-top: 3px;
   flex-shrink: 0;
-  color: var(--primary-7);
+  color: var(--primary-600);
 }
 
 .info-body {
   align-items: center;
-  line-height: 1.5;
+}.item {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 21px;
+}
+
+.item-actions {
+  flex-shrink: 0;
+}
+
+.item-content {
+  display: flex;
+  flex-flow: column;
+  gap: 3px;
+}
+
+.item-media {
+  flex-shrink: 0;
+}
+
+.item-media > img {
+  height: 48px;
+  width: 48px;
+  object-fit: cover;
+  object-position: center;
+}
+
+.item-media > .avatar {
+  font-size: 48px;
+}
+
+.item-media > .icon {
+  font-size: 24px;
+}
+
+.item-media > .icon-boxed {
+  font-size: 48px;
+}
+
+.item-stack {
+  position: relative;
+}
+.item-stack .item + .item {
+  margin-top: 21px;
+  padding-top: 21px;
+  border-top: 1px solid var(--surface-stroke);
+}
+
+.base-pane-structure > .item,
+.base-pane-structure > .item-stack > .item {
+  padding: 21px;
+}
+
+.base-pane-structure > .item-stack > .item {
+  margin: 0;
 }.legend-horizontal {
   gap: 12px 21px;
 }
@@ -4599,12 +4805,12 @@ tfoot .table-cell {
 }
 
 .notice-gray {
-  background: var(--gray-1);
-  border-color: var(--gray-2);
+  background: var(--gray-50);
+  border-color: var(--gray-200);
   color: var(--foreground);
 }
 .notice-gray .notice-close {
-  background: var(--gray-3);
+  background: var(--gray-200);
 }
 .notice-gray .notice-prefix,
 .notice-gray .notice-title {
@@ -4612,118 +4818,118 @@ tfoot .table-cell {
 }
 
 .notice-primary {
-  background: var(--primary-2);
-  border-color: var(--primary-3);
-  color: var(--primary-11);
+  background: var(--primary-100);
+  border-color: var(--primary-200);
+  color: var(--primary-950);
 }
 .notice-primary .notice-close {
-  background: var(--primary-3);
+  background: var(--primary-200);
 }
 .notice-primary .notice-prefix,
 .notice-primary .notice-title {
-  color: var(--primary-7);
+  color: var(--primary-600);
 }
 .notice-primary .button {
-  border-color: var(--primary-4);
+  border-color: var(--primary-300);
 }
 .notice-primary .spinner-track {
-  stroke: var(--primary-3);
+  stroke: var(--primary-200);
 }
 .notice-primary .spinner-effect,
 .notice-primary .spinner-value {
-  stroke: var(--primary-7);
+  stroke: var(--primary-600);
 }
 
 .notice-danger {
-  background: var(--danger-2);
-  border-color: var(--danger-3);
-  color: var(--danger-11);
+  background: var(--danger-100);
+  border-color: var(--danger-200);
+  color: var(--danger-950);
 }
 .notice-danger .notice-close {
-  background: var(--danger-3);
+  background: var(--danger-200);
 }
 .notice-danger .notice-prefix,
 .notice-danger .notice-title {
-  color: var(--danger-7);
+  color: var(--danger-600);
 }
 .notice-danger .button {
-  border-color: var(--danger-4);
+  border-color: var(--danger-300);
 }
 .notice-danger .spinner-track {
-  stroke: var(--danger-3);
+  stroke: var(--danger-200);
 }
 .notice-danger .spinner-effect,
 .notice-danger .spinner-value {
-  stroke: var(--danger-7);
+  stroke: var(--danger-600);
 }
 
 .notice-info {
-  background: var(--info-2);
-  border-color: var(--info-3);
-  color: var(--info-11);
+  background: var(--info-100);
+  border-color: var(--info-200);
+  color: var(--info-950);
 }
 .notice-info .notice-close {
-  background: var(--info-3);
+  background: var(--info-200);
 }
 .notice-info .notice-prefix,
 .notice-info .notice-title {
-  color: var(--info-7);
+  color: var(--info-600);
 }
 .notice-info .button {
-  border-color: var(--info-4);
+  border-color: var(--info-300);
 }
 .notice-info .spinner-track {
-  stroke: var(--info-3);
+  stroke: var(--info-200);
 }
 .notice-info .spinner-effect,
 .notice-info .spinner-value {
-  stroke: var(--info-7);
+  stroke: var(--info-600);
 }
 
 .notice-success {
-  background: var(--success-2);
-  border-color: var(--success-3);
-  color: var(--success-11);
+  background: var(--success-100);
+  border-color: var(--success-200);
+  color: var(--success-950);
 }
 .notice-success .notice-close {
-  background: var(--success-3);
+  background: var(--success-200);
 }
 .notice-success .notice-prefix,
 .notice-success .notice-title {
-  color: var(--success-7);
+  color: var(--success-600);
 }
 .notice-success .button {
-  border-color: var(--success-4);
+  border-color: var(--success-300);
 }
 .notice-success .spinner-track {
-  stroke: var(--success-3);
+  stroke: var(--success-200);
 }
 .notice-success .spinner-effect,
 .notice-success .spinner-value {
-  stroke: var(--success-7);
+  stroke: var(--success-600);
 }
 
 .notice-warning {
-  background: var(--warning-2);
-  border-color: var(--warning-3);
-  color: var(--warning-11);
+  background: var(--warning-100);
+  border-color: var(--warning-200);
+  color: var(--warning-950);
 }
 .notice-warning .notice-close {
-  background: var(--warning-3);
+  background: var(--warning-200);
 }
 .notice-warning .notice-prefix,
 .notice-warning .notice-title {
-  color: var(--warning-7);
+  color: var(--warning-600);
 }
 .notice-warning .button {
-  border-color: var(--warning-4);
+  border-color: var(--warning-300);
 }
 .notice-warning .spinner-track {
-  stroke: var(--warning-3);
+  stroke: var(--warning-200);
 }
 .notice-warning .spinner-effect,
 .notice-warning .spinner-value {
-  stroke: var(--warning-7);
+  stroke: var(--warning-600);
 }
 
 .base-pane > .notice {
@@ -4739,7 +4945,7 @@ tfoot .table-cell {
   height: 12px;
   border-radius: calc(var(--radius) / 3);
   transition: 180ms var(--swift-out);
-  transition-property: height, margin;
+  transition-property: height, margin, flex-grow;
 }
 .percentage-bar-segment:hover {
   height: 16px;
@@ -4765,9 +4971,9 @@ tfoot .table-cell {
 .progress-bar-track {
   position: relative;
   height: 9px;
-  background: var(--gray-1);
-  border-radius: calc(var(--radius) / 2);
-  box-shadow: inset 0 0 0 1px var(--gray-2);
+  background: var(--gray-50);
+  border-radius: var(--radius-half);
+  box-shadow: inset 0 0 0 1px var(--gray-200);
   contain: paint;
 }
 
@@ -4780,11 +4986,11 @@ tfoot .table-cell {
 }
 
 .progress-bar-value-complete {
-  background: var(--primary-7);
+  background: var(--primary-600);
 }
 
 .progress-bar-value-incomplete {
-  background: linear-gradient(to right, var(--primary-7) 20%, var(--primary-6), var(--primary-7) 80%);
+  background: linear-gradient(to right, var(--primary-600) 20%, var(--primary-500), var(--primary-600) 80%);
   background-size: 150px 100%;
   animation: progress-bar-value 1s linear infinite;
 }
@@ -4792,7 +4998,7 @@ tfoot .table-cell {
 .progress-bar-track-indeterminate {
 }
 .progress-bar-track-indeterminate .progress-bar-value {
-  background: linear-gradient(to right, var(--primary-7) 20%, var(--primary-6), var(--primary-7) 80%);
+  background: linear-gradient(to right, var(--primary-600) 20%, var(--primary-500), var(--primary-600) 80%);
   background-size: 90px 100%;
   animation: progress-bar-indeterminate 1s linear infinite;
 }
@@ -4855,9 +5061,6 @@ tfoot .table-cell {
 .snackbar .progress-bar:not(:last-child) {
   margin-bottom: 6px;
 }
-.snackbar .progress-bar-track {
-  height: 6px;
-}
 
 .snackbar-content {
   display: flex;
@@ -4899,7 +5102,7 @@ tfoot .table-cell {
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-  background: var(--gray-0);
+  background: var(--surface);
   border: 0;
   border-radius: 0;
   color: var(--foreground);
@@ -4912,14 +5115,14 @@ tfoot .table-cell {
   transition-property: background, color;
 }
 .snackbar-action:hover {
-  background: var(--gray-1);
+  background: var(--surface-hover);
   color: var(--foreground-prominent);
 }
 .snackbar-action:first-child {
   font-weight: 600;
 }
 .snackbar-action:active {
-  background: var(--gray-2);
+  background: var(--surface-active);
 }
 
 .snackbar-actions {
@@ -4929,7 +5132,7 @@ tfoot .table-cell {
   flex-flow: column;
   flex-grow: 1;
   gap: 1px;
-  background: var(--gray-2);
+  background: var(--surface-stroke);
 }
 
 .snackbar-gray {
@@ -4945,11 +5148,11 @@ tfoot .table-cell {
 .snackbar-primary .snackbar-action:first-child,
 .snackbar-primary .snackbar-content > .icon,
 .snackbar-primary .snackbar-title {
-  color: var(--primary-7);
+  color: var(--primary-600);
 }
 .snackbar-primary .spinner-effect,
 .snackbar-primary .spinner-value {
-  stroke: var(--primary-8);
+  stroke: var(--primary-700);
 }
 
 .snackbar-danger {
@@ -4957,11 +5160,11 @@ tfoot .table-cell {
 .snackbar-danger .snackbar-action:first-child,
 .snackbar-danger .snackbar-content > .icon,
 .snackbar-danger .snackbar-title {
-  color: var(--danger-7);
+  color: var(--danger-600);
 }
 .snackbar-danger .spinner-effect,
 .snackbar-danger .spinner-value {
-  stroke: var(--danger-8);
+  stroke: var(--danger-700);
 }
 
 .snackbar-info {
@@ -4969,11 +5172,11 @@ tfoot .table-cell {
 .snackbar-info .snackbar-action:first-child,
 .snackbar-info .snackbar-content > .icon,
 .snackbar-info .snackbar-title {
-  color: var(--info-7);
+  color: var(--info-600);
 }
 .snackbar-info .spinner-effect,
 .snackbar-info .spinner-value {
-  stroke: var(--info-8);
+  stroke: var(--info-700);
 }
 
 .snackbar-success {
@@ -4981,11 +5184,11 @@ tfoot .table-cell {
 .snackbar-success .snackbar-action:first-child,
 .snackbar-success .snackbar-content > .icon,
 .snackbar-success .snackbar-title {
-  color: var(--success-7);
+  color: var(--success-600);
 }
 .snackbar-success .spinner-effect,
 .snackbar-success .spinner-value {
-  stroke: var(--success-8);
+  stroke: var(--success-700);
 }
 
 .snackbar-warning {
@@ -4993,11 +5196,11 @@ tfoot .table-cell {
 .snackbar-warning .snackbar-action:first-child,
 .snackbar-warning .snackbar-content > .icon,
 .snackbar-warning .snackbar-title {
-  color: var(--warning-7);
+  color: var(--warning-600);
 }
 .snackbar-warning .spinner-effect,
 .snackbar-warning .spinner-value {
-  stroke: var(--warning-8);
+  stroke: var(--warning-700);
 }
 
 .snackbars {
@@ -5051,14 +5254,15 @@ tfoot .table-cell {
   max-width: 360px;
   padding: 9px 15px;
   flex-flow: column;
-  background: oklch(from var(--gray-11) l c h/0.9);
+  background: rgb(from var(--gray-950) r g b/0.9);
   backdrop-filter: blur(6px) saturate(180%);
   border-radius: var(--radius);
-  color: var(--gray-0);
+  color: var(--gray-25);
   font-size: 14px;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
   translate: calc(var(--x) * 1px) calc(var(--y) * 1px);
+  isolation: isolate;
   z-index: 100000;
 }
 .tooltip::after {
@@ -5106,8 +5310,8 @@ tfoot .table-cell {
   position: relative;
   align-items: center;
   gap: 1px;
-  background: var(--gray-1);
-  border: 1px solid var(--gray-2);
+  background: var(--gray-50);
+  border: 1px solid var(--surface-stroke);
   border-radius: var(--radius);
 }
 
@@ -5124,10 +5328,10 @@ tfoot .table-cell {
   position: absolute;
   top: 0;
   bottom: 0;
-  background: var(--gray-0);
-  border-radius: var(--radius);
+  background: var(--surface);
+  border-radius: calc(var(--radius) - 2px);
   box-shadow: var(--shadow-sm);
-  outline: 1px solid var(--gray-2);
+  outline: 1px solid var(--surface-stroke);
   pointer-events: none;
   transition: 300ms var(--swift-out);
   transition-property: left, width;
@@ -5144,7 +5348,7 @@ tfoot .table-cell {
   justify-content: center;
   background: none;
   border: 0;
-  border-radius: calc(var(--radius) - 3px);
+  border-radius: var(--radius);
   color: var(--foreground);
   cursor: pointer;
   font-weight: 500;
@@ -5154,7 +5358,7 @@ tfoot .table-cell {
 }
 @media (hover: hover) {
   .segmented-control-item:hover {
-    background: var(--gray-2);
+    background: var(--gray-100);
   }
 }
 .segmented-control-item.is-active {
@@ -5170,7 +5374,7 @@ tfoot .table-cell {
   height: 15px;
   width: 1px;
   flex-shrink: 0;
-  background: var(--gray-2);
+  background: var(--surface-stroke);
   transition: opacity 300ms var(--swift-out);
 }
 .segmented-control-separator.is-active {
@@ -5181,30 +5385,6 @@ tfoot .table-cell {
   flex-grow: 1;
   gap: 21px;
 }
-.statistic.is-gray .statistic-icon {
-  background: var(--gray-2);
-  color: var(--gray-7);
-}
-.statistic.is-primary .statistic-icon {
-  background: var(--primary-2);
-  color: var(--primary-7);
-}
-.statistic.is-danger .statistic-icon {
-  background: var(--danger-2);
-  color: var(--danger-7);
-}
-.statistic.is-info .statistic-icon {
-  background: var(--info-2);
-  color: var(--info-7);
-}
-.statistic.is-success .statistic-icon {
-  background: var(--success-2);
-  color: var(--success-7);
-}
-.statistic.is-warning .statistic-icon {
-  background: var(--warning-2);
-  color: var(--warning-7);
-}
 
 .statistic-change {
   display: flex;
@@ -5219,19 +5399,19 @@ tfoot .table-cell {
   color: var(--foreground-prominent);
 }
 .statistic-change.is-primary {
-  color: var(--primary-7);
+  color: var(--primary-600);
 }
 .statistic-change.is-danger {
-  color: var(--danger-7);
+  color: var(--danger-600);
 }
 .statistic-change.is-info {
-  color: var(--info-7);
+  color: var(--info-600);
 }
 .statistic-change.is-success {
-  color: var(--success-7);
+  color: var(--success-600);
 }
 .statistic-change.is-warning {
-  color: var(--warning-7);
+  color: var(--warning-600);
 }
 
 .statistic-data {
@@ -5250,13 +5430,8 @@ tfoot .table-cell {
   font-weight: 700;
 }
 
-.statistic-icon {
-  display: flex;
-  height: 48px;
-  width: 48px;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
+.statistic-icon .icon {
+  font-size: 0.45em;
 }
 
 .statistic-image {
@@ -5393,11 +5568,11 @@ tfoot .table-cell {
 }
 .stepper-steps::before {
   width: var(--max);
-  background: var(--gray-2);
+  background: var(--gray-100);
 }
 .stepper-steps::after {
   width: calc(min(1, var(--progress)) * var(--max));
-  background: var(--primary-7);
+  background: var(--primary-600);
   transition: width 300ms var(--swift-out);
 }
 
@@ -5408,7 +5583,7 @@ tfoot .table-cell {
   width: 33px;
   align-items: center;
   justify-content: center;
-  background: var(--gray-3);
+  background: var(--gray-100);
   border: 0;
   border-radius: 99px;
   color: var(--foreground);
@@ -5430,21 +5605,21 @@ tfoot .table-cell {
 }
 
 .stepper-steps-item-complete {
-  background: var(--primary-7);
-  border-color: var(--primary-7);
-  color: var(--primary-0);
+  background: var(--primary-600);
+  border-color: var(--primary-600);
+  color: var(--primary-25);
 }
 
 .stepper-steps-item-current {
-  background: var(--gray-1);
+  background: var(--gray-100);
   color: var(--foreground-prominent);
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-width: 2px;
   transition-delay: 75ms;
 }
 
 .stepper-steps-item-idle {
-  outline-color: var(--gray-0);
+  outline-color: var(--gray-25);
 }
 
 .stepper-steps-item-particles {
@@ -5455,7 +5630,7 @@ tfoot .table-cell {
 .tab-bar {
   --tab-padding: 12px;
   position: relative;
-  box-shadow: inset 0 -2px var(--gray-2);
+  box-shadow: inset 0 -2px var(--surface-stroke);
   z-index: 0;
 }
 
@@ -5478,7 +5653,7 @@ tfoot .table-cell {
 }
 @media (hover: hover) {
   .tab-bar-arrow:hover {
-    background: var(--gray-2);
+    background: var(--surface-stroke);
   }
 }
 
@@ -5539,11 +5714,11 @@ tfoot .table-cell {
   transition: 180ms var(--swift-out) outline-color, outline-offset;
 }
 .tab-bar-item::before {
-  outline: 2px solid oklch(from var(--primary-7) l c h/0);
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
 }
 .tab-bar-item:focus-visible::before {
-  outline-color: var(--primary-7);
+  outline-color: var(--primary-600);
   outline-offset: 0;
 }
 @media (hover: hover) {
@@ -5553,7 +5728,7 @@ tfoot .table-cell {
 }
 
 .tab-bar-item-active {
-  border-color: var(--primary-7);
+  border-color: var(--primary-600);
   color: var(--foreground-prominent);
 }
 
@@ -5568,33 +5743,43 @@ tfoot .table-cell {
 }
 
 .base-pane-structure > .tab-bar,
-.base-pane-structure > .tabs > .tab-bar {
+.base-pane-structure > .tabs > .tab-bar,
+.base-pane-structure > .form > .tab-bar,
+.base-pane-structure > .form > .tabs > .tab-bar {
   --tab-padding: 18px;
   padding-left: 21px;
   padding-right: 21px;
-  background: var(--gray-1);
+  background: var(--gray-50);
 }
 .base-pane-structure > .tab-bar:first-child,
-.base-pane-structure > .tabs > .tab-bar:first-child {
+.base-pane-structure > .tabs > .tab-bar:first-child,
+.base-pane-structure > .form > .tab-bar:first-child,
+.base-pane-structure > .form > .tabs > .tab-bar:first-child {
   border-radius: var(--radius) var(--radius) 0 0;
 }
 .base-pane-structure > .tab-bar:not(:first-child),
-.base-pane-structure > .tabs > .tab-bar:not(:first-child) {
-  border-top: 1px solid var(--gray-2);
+.base-pane-structure > .tabs > .tab-bar:not(:first-child),
+.base-pane-structure > .form > .tab-bar:not(:first-child),
+.base-pane-structure > .form > .tabs > .tab-bar:not(:first-child) {
+  border-top: 1px solid var(--surface-stroke);
 }
 
 .base-pane-structure > .pane-header + .tab-bar,
-.base-pane-structure > .pane-header + .tabs > .tab-bar {
+.base-pane-structure > .pane-header + .tabs > .tab-bar,
+.base-pane-structure > .form > .pane-header + .tab-bar,
+.base-pane-structure > .form > .pane-header + .tabs > .tab-bar {
   padding-top: 6px;
 }
 .base-pane-structure > .pane-header + .tab-bar:not(:first-child),
-.base-pane-structure > .pane-header + .tabs > .tab-bar:not(:first-child) {
+.base-pane-structure > .pane-header + .tabs > .tab-bar:not(:first-child),
+.base-pane-structure > .form > .pane-header + .tab-bar:not(:first-child),
+.base-pane-structure > .form > .pane-header + .tabs > .tab-bar:not(:first-child) {
   border-top: 0;
 }
 
 .pane-header:has(+ .tab-bar),
 .pane-header:has(+ .tabs > .tab-bar) {
-  background: var(--gray-1);
+  background: var(--gray-50);
 }
 
 .base-pane-structure > .tabs > .tabs-bar {
@@ -5619,7 +5804,7 @@ tfoot .table-cell {
   align-items: center;
   justify-content: center;
   border-radius: 99px;
-  outline: 6px solid var(--gray-0);
+  outline: 6px solid var(--surface);
 }
 
 .timeline-item-icon {
@@ -5642,7 +5827,7 @@ tfoot .table-cell {
   width: 30px;
   align-items: center;
   justify-content: center;
-  background: var(--gray-0);
+  background: var(--gray-25);
   border-radius: 99px;
 }
 
@@ -5682,7 +5867,7 @@ tfoot .table-cell {
   left: 20px;
   height: 100%;
   width: 2px;
-  background: var(--gray-2);
+  background: var(--gray-100);
 }
 
 .timeline .timeline-item:last-of-type .timeline-item-line {
@@ -5696,57 +5881,57 @@ tfoot .table-cell {
   color: var(--foreground-prominent);
 }
 .timeline-item-gray .timeline-item-icon {
-  background: var(--gray-2);
+  background: var(--gray-100);
 }
 
 .timeline-item-primary {
 }
 .timeline-item-primary .timeline-item-icon,
 .timeline-item-primary .timeline-item-photo-icon {
-  color: var(--primary-7);
+  color: var(--primary-600);
 }
 .timeline-item-primary .timeline-item-icon {
-  background: var(--primary-2);
+  background: var(--primary-100);
 }
 
 .timeline-item-danger {
 }
 .timeline-item-danger .timeline-item-icon,
 .timeline-item-danger .timeline-item-photo-icon {
-  color: var(--danger-7);
+  color: var(--danger-600);
 }
 .timeline-item-danger .timeline-item-icon {
-  background: var(--danger-2);
+  background: var(--danger-100);
 }
 
 .timeline-item-info {
 }
 .timeline-item-info .timeline-item-icon,
 .timeline-item-info .timeline-item-photo-icon {
-  color: var(--info-7);
+  color: var(--info-600);
 }
 .timeline-item-info .timeline-item-icon {
-  background: var(--info-2);
+  background: var(--info-100);
 }
 
 .timeline-item-success {
 }
 .timeline-item-success .timeline-item-icon,
 .timeline-item-success .timeline-item-photo-icon {
-  color: var(--success-7);
+  color: var(--success-600);
 }
 .timeline-item-success .timeline-item-icon {
-  background: var(--success-2);
+  background: var(--success-100);
 }
 
 .timeline-item-warning {
 }
 .timeline-item-warning .timeline-item-icon,
 .timeline-item-warning .timeline-item-photo-icon {
-  color: var(--warning-7);
+  color: var(--warning-600);
 }
 .timeline-item-warning .timeline-item-icon {
-  background: var(--warning-2);
+  background: var(--warning-100);
 }.toolbar {
   padding: 6px;
   contain: paint;
@@ -5788,8 +5973,9 @@ tfoot .table-cell {
 
 .base-pane-structure > .toolbar-flat {
   padding: 12px 15px;
-  background: var(--gray-1);
-  border: 1px solid var(--gray-2);
+  align-self: unset;
+  background: var(--gray-50);
+  border: 1px solid var(--surface-stroke);
   border-left: 0;
   border-right: 0;
   border-radius: 0;
@@ -5806,9 +5992,9 @@ tfoot .table-cell {
   border-bottom-right-radius: var(--radius);
 }
 .base-pane-structure > .toolbar-flat .separator {
-  background: var(--gray-2);
+  background: var(--surface-stroke);
 }
 
 .pane-header + .toolbar-flat {
   margin-top: 21px;
-}
+}/*$vite$:1*/