@acorex/styles 21.0.1-next.6 → 21.0.1-next.7

package/themes/default.css

@@ -0,0 +1,3072 @@
+@import 'tailwindcss';
+@import 'tw-animate';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  * {
+    border-color: var(--color-border-default);
+    scrollbar-width: thin;
+    scrollbar-color: var(--ax-sys-scroller-thumb-color) var(--ax-sys-scroller-track-color);
+
+    ::-webkit-scrollbar {
+      width: var(--ax-sys-scroller-size);
+      height: var(--ax-sys-scroller-size);
+    }
+
+    ::-webkit-scrollbar-track {
+      background: var(--ax-sys-scroller-track-color);
+      border-radius: var(--ax-sys-scroller-size-radius);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--ax-sys-scroller-thumb-color);
+      border-radius: var(--ax-sys-scroller-size-radius);
+    }
+  }
+}
+
+html {
+  background-color: rgba(var(--ax-sys-color-lightest-surface));
+  color: rgba(var(--ax-sys-color-on-lightest-surface));
+}
+
+html.dark {
+  background-color: rgba(var(--ax-sys-color-darkest-surface));
+  color: rgba(var(--ax-sys-color-on-darkest-surface));
+}
+
+:root {
+  --ax-sys-icon-size: 100%;
+  --ax-sys-icon-weight: 400;
+  --ax-sys-size-base: 2.5rem;
+  --ax-overlay-full-width: 93;
+  --ax-sys-icon-width: inherit;
+  --ax-sys-icon-height: inherit;
+  --ax-sys-body-font-size: 1rem;
+  --ax-sys-border-radius: 0.5rem;
+  --ax-sys-transition-duration: 150ms;
+  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --ax-sys-scroller-size: 5px;
+  --ax-sys-scroller-size-radius: 3px;
+  --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
+  --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
+
+  --ax-sys-color-lightest-surface: 255, 255, 255;
+  --ax-sys-color-on-lightest-surface: 10, 10, 10;
+  --ax-sys-color-border-lightest-surface: 233, 233, 233;
+
+  --ax-sys-color-lighter-surface: 250, 250, 250;
+  --ax-sys-color-on-lighter-surface: 10, 10, 10;
+  --ax-sys-color-border-lighter-surface: 228, 228, 228;
+
+  --ax-sys-color-light-surface: 245, 245, 245;
+  --ax-sys-color-on-light-surface: 10, 10, 10;
+  --ax-sys-color-border-light-surface: 223, 223, 223;
+
+  --ax-sys-color-surface: 240, 240, 241;
+  --ax-sys-color-on-surface: 10, 10, 10;
+  --ax-sys-color-border-surface: 218, 218, 218;
+
+  --ax-sys-color-dark-surface: 235, 235, 236;
+  --ax-sys-color-on-dark-surface: 10, 10, 10;
+  --ax-sys-color-border-dark-surface: 213, 213, 213;
+
+  --ax-sys-color-darker-surface: 230, 230, 231;
+  --ax-sys-color-on-darker-surface: 10, 10, 10;
+  --ax-sys-color-border-darker-surface: 208, 208, 208;
+
+  --ax-sys-color-darkest-surface: 224, 224, 225;
+  --ax-sys-color-on-darkest-surface: 10, 10, 10;
+  --ax-sys-color-border-darkest-surface: 202, 202, 202;
+
+  --ax-sys-color-primary-50: 230, 244, 255;
+  --ax-sys-color-primary-100: 207, 229, 255;
+  --ax-sys-color-primary-200: 175, 208, 255;
+  --ax-sys-color-primary-300: 125, 173, 255;
+  --ax-sys-color-primary-400: 58, 125, 255;
+  --ax-sys-color-primary-500: 21, 93, 252;
+  --ax-sys-color-primary-600: 3, 77, 236;
+  --ax-sys-color-primary-700: 0, 57, 217;
+  --ax-sys-color-primary-800: 4, 47, 191;
+  --ax-sys-color-primary-900: 16, 52, 148;
+  --ax-sys-color-primary-950: 16, 38, 91;
+
+  --ax-sys-color-secondary-50: 232, 232, 232;
+  --ax-sys-color-secondary-100: 204, 204, 204;
+  --ax-sys-color-secondary-200: 166, 166, 166;
+  --ax-sys-color-secondary-300: 110, 110, 110;
+  --ax-sys-color-secondary-400: 45, 45, 45;
+  --ax-sys-color-secondary-500: 10, 10, 10;
+  --ax-sys-color-secondary-600: 16, 16, 16;
+  --ax-sys-color-secondary-700: 24, 24, 24;
+  --ax-sys-color-secondary-800: 30, 30, 30;
+  --ax-sys-color-secondary-900: 35, 35, 35;
+  --ax-sys-color-secondary-950: 50, 50, 50;
+
+  --ax-sys-color-success-50: 206, 255, 211;
+  --ax-sys-color-success-100: 154, 255, 169;
+  --ax-sys-color-success-200: 119, 249, 141;
+  --ax-sys-color-success-300: 90, 221, 116;
+  --ax-sys-color-success-400: 49, 187, 83;
+  --ax-sys-color-success-500: 0, 166, 62;
+  --ax-sys-color-success-600: 0, 147, 42;
+  --ax-sys-color-success-700: 0, 124, 17;
+  --ax-sys-color-success-800: 19, 103, 22;
+  --ax-sys-color-success-900: 39, 84, 37;
+  --ax-sys-color-success-950: 24, 44, 23;
+
+  --ax-sys-color-warning-50: 255, 244, 220;
+  --ax-sys-color-warning-100: 255, 234, 201;
+  --ax-sys-color-warning-200: 255, 221, 174;
+  --ax-sys-color-warning-300: 255, 198, 128;
+  --ax-sys-color-warning-400: 255, 168, 40;
+  --ax-sys-color-warning-500: 253, 154, 0;
+  --ax-sys-color-warning-600: 224, 127, 0;
+  --ax-sys-color-warning-700: 181, 100, 0;
+  --ax-sys-color-warning-800: 144, 81, 20;
+  --ax-sys-color-warning-900: 110, 71, 40;
+  --ax-sys-color-warning-950: 44, 28, 18;
+
+  --ax-sys-color-danger-50: 255, 235, 229;
+  --ax-sys-color-danger-100: 255, 216, 207;
+  --ax-sys-color-danger-200: 255, 188, 175;
+  --ax-sys-color-danger-300: 255, 139, 122;
+  --ax-sys-color-danger-400: 255, 55, 41;
+  --ax-sys-color-danger-500: 231, 0, 0;
+  --ax-sys-color-danger-600: 212, 0, 0;
+  --ax-sys-color-danger-700: 180, 0, 0;
+  --ax-sys-color-danger-800: 150, 21, 14;
+  --ax-sys-color-danger-900: 117, 42, 33;
+  --ax-sys-color-danger-950: 65, 29, 24;
+
+  --ax-sys-color-accent-50: 243, 238, 255;
+  --ax-sys-color-accent-100: 229, 220, 255;
+  --ax-sys-color-accent-200: 209, 194, 255;
+  --ax-sys-color-accent-300: 179, 152, 255;
+  --ax-sys-color-accent-400: 147, 87, 255;
+  --ax-sys-color-accent-500: 127, 34, 254;
+  --ax-sys-color-accent-600: 116, 0, 238;
+  --ax-sys-color-accent-700: 101, 0, 214;
+  --ax-sys-color-accent-800: 85, 24, 179;
+  --ax-sys-color-accent-900: 71, 45, 135;
+  --ax-sys-color-accent-950: 43, 33, 78;
+
+  --ax-sys-color-accent2-50: 249, 237, 255;
+  --ax-sys-color-accent2-100: 237, 218, 255;
+  --ax-sys-color-accent2-200: 222, 191, 255;
+  --ax-sys-color-accent2-300: 199, 147, 255;
+  --ax-sys-color-accent2-400: 173, 76, 255;
+  --ax-sys-color-accent2-500: 152, 16, 250;
+  --ax-sys-color-accent2-600: 138, 0, 233;
+  --ax-sys-color-accent2-700: 118, 0, 202;
+  --ax-sys-color-accent2-800: 100, 23, 168;
+  --ax-sys-color-accent2-900: 81, 43, 128;
+  --ax-sys-color-accent2-950: 48, 31, 72;
+
+  --ax-sys-color-accent3-50: 255, 236, 255;
+  --ax-sys-color-accent3-100: 255, 218, 255;
+  --ax-sys-color-accent3-200: 255, 192, 255;
+  --ax-sys-color-accent3-300: 253, 149, 255;
+  --ax-sys-color-accent3-400: 244, 78, 255;
+  --ax-sys-color-accent3-500: 225, 42, 251;
+  --ax-sys-color-accent3-600: 202, 0, 228;
+  --ax-sys-color-accent3-700: 169, 0, 192;
+  --ax-sys-color-accent3-800: 138, 24, 156;
+  --ax-sys-color-accent3-900: 107, 45, 118;
+  --ax-sys-color-accent3-950: 52, 26, 57;
+
+  --ax-sys-color-accent4-50: 255, 234, 242;
+  --ax-sys-color-accent4-100: 255, 214, 228;
+  --ax-sys-color-accent4-200: 255, 186, 208;
+  --ax-sys-color-accent4-300: 255, 136, 177;
+  --ax-sys-color-accent4-400: 255, 53, 139;
+  --ax-sys-color-accent4-500: 230, 0, 118;
+  --ax-sys-color-accent4-600: 209, 0, 103;
+  --ax-sys-color-accent4-700: 177, 0, 85;
+  --ax-sys-color-accent4-800: 147, 21, 72;
+  --ax-sys-color-accent4-900: 114, 41, 64;
+  --ax-sys-color-accent4-950: 62, 27, 36;
+
+  --ax-sys-color-accent5-50: 255, 235, 234;
+  --ax-sys-color-accent5-100: 255, 216, 215;
+  --ax-sys-color-accent5-200: 255, 189, 188;
+  --ax-sys-color-accent5-300: 255, 141, 144;
+  --ax-sys-color-accent5-400: 255, 54, 84;
+  --ax-sys-color-accent5-500: 236, 0, 63;
+  --ax-sys-color-accent5-600: 215, 0, 48;
+  --ax-sys-color-accent5-700: 182, 0, 38;
+  --ax-sys-color-accent5-800: 151, 21, 36;
+  --ax-sys-color-accent5-900: 117, 41, 42;
+  --ax-sys-color-accent5-950: 63, 28, 26;
+
+  --ax-sys-color-accent6-50: 185, 255, 251;
+  --ax-sys-color-accent6-100: 142, 255, 240;
+  --ax-sys-color-accent6-200: 123, 237, 221;
+  --ax-sys-color-accent6-300: 92, 208, 193;
+  --ax-sys-color-accent6-400: 49, 172, 159;
+  --ax-sys-color-accent6-500: 0, 150, 137;
+  --ax-sys-color-accent6-600: 0, 133, 121;
+  --ax-sys-color-accent6-700: 0, 113, 101;
+  --ax-sys-color-accent6-800: 19, 94, 85;
+  --ax-sys-color-accent6-900: 38, 79, 72;
+  --ax-sys-color-accent6-950: 25, 43, 40;
+
+  --ax-sys-color-accent7-50: 255, 242, 209;
+  --ax-sys-color-accent7-100: 255, 228, 180;
+  --ax-sys-color-accent7-200: 255, 209, 136;
+  --ax-sys-color-accent7-300: 255, 181, 77;
+  --ax-sys-color-accent7-400: 227, 153, 41;
+  --ax-sys-color-accent7-500: 208, 135, 0;
+  --ax-sys-color-accent7-600: 185, 114, 0;
+  --ax-sys-color-accent7-700: 154, 91, 0;
+  --ax-sys-color-accent7-800: 125, 75, 17;
+  --ax-sys-color-accent7-900: 98, 66, 36;
+  --ax-sys-color-accent7-950: 46, 31, 20;
+
+  --ax-sys-color-primary-lightest-surface: 207, 229, 255;
+  --ax-sys-color-on-primary-lightest-surface: 30, 47, 67;
+  --ax-sys-color-border-primary-lightest-surface: 171, 210, 255;
+
+  --ax-sys-color-primary-lighter-surface: 175, 208, 255;
+  --ax-sys-color-on-primary-lighter-surface: 19, 45, 83;
+  --ax-sys-color-border-primary-lighter-surface: 139, 187, 255;
+
+  --ax-sys-color-primary-light-surface: 125, 173, 255;
+  --ax-sys-color-on-primary-light-surface: 0, 39, 109;
+  --ax-sys-color-border-primary-light-surface: 89, 150, 255;
+
+  --ax-sys-color-primary-surface: 21, 93, 252;
+  --ax-sys-color-on-primary-surface: 245, 254, 255;
+  --ax-sys-color-border-primary-surface: 3, 75, 234;
+
+  --ax-sys-color-primary-dark-surface: 3, 77, 236;
+  --ax-sys-color-on-primary-dark-surface: 245, 254, 255;
+  --ax-sys-color-border-primary-dark-surface: 3, 65, 201;
+
+  --ax-sys-color-primary-darker-surface: 0, 57, 217;
+  --ax-sys-color-on-primary-darker-surface: 246, 254, 255;
+  --ax-sys-color-border-primary-darker-surface: 0, 48, 181;
+
+  --ax-sys-color-primary-darkest-surface: 4, 47, 191;
+  --ax-sys-color-on-primary-darkest-surface: 246, 254, 255;
+  --ax-sys-color-border-primary-darkest-surface: 3, 38, 156;
+
+  --ax-sys-color-secondary-lightest-surface: 204, 204, 204;
+  --ax-sys-color-on-secondary-lightest-surface: 46, 46, 46;
+  --ax-sys-color-border-secondary-lightest-surface: 186, 186, 186;
+
+  --ax-sys-color-secondary-lighter-surface: 166, 166, 166;
+  --ax-sys-color-on-secondary-lighter-surface: 253, 253, 253;
+  --ax-sys-color-border-secondary-lighter-surface: 148, 148, 148;
+
+  --ax-sys-color-secondary-light-surface: 110, 110, 110;
+  --ax-sys-color-on-secondary-light-surface: 253, 253, 253;
+  --ax-sys-color-border-secondary-light-surface: 92, 92, 92;
+
+  --ax-sys-color-secondary-surface: 10, 10, 10;
+  --ax-sys-color-on-secondary-surface: 253, 253, 253;
+  --ax-sys-color-border-secondary-surface: 0, 0, 0;
+
+  --ax-sys-color-secondary-dark-surface: 16, 16, 16;
+  --ax-sys-color-on-secondary-dark-surface: 253, 253, 253;
+  --ax-sys-color-border-secondary-dark-surface: 0, 0, 0;
+
+  --ax-sys-color-secondary-darker-surface: 24, 24, 24;
+  --ax-sys-color-on-secondary-darker-surface: 253, 253, 253;
+  --ax-sys-color-border-secondary-darker-surface: 6, 6, 6;
+
+  --ax-sys-color-secondary-darkest-surface: 30, 30, 30;
+  --ax-sys-color-on-secondary-darkest-surface: 253, 253, 253;
+  --ax-sys-color-border-secondary-darkest-surface: 12, 12, 12;
+
+  --ax-sys-color-success-lightest-surface: 154, 255, 169;
+  --ax-sys-color-on-success-lightest-surface: 0, 60, 0;
+  --ax-sys-color-border-success-lightest-surface: 118, 255, 139;
+
+  --ax-sys-color-success-lighter-surface: 119, 249, 141;
+  --ax-sys-color-on-success-lighter-surface: 0, 60, 0;
+  --ax-sys-color-border-success-lighter-surface: 85, 247, 112;
+
+  --ax-sys-color-success-light-surface: 90, 221, 116;
+  --ax-sys-color-on-success-light-surface: 0, 60, 0;
+  --ax-sys-color-border-success-light-surface: 60, 215, 91;
+
+  --ax-sys-color-success-surface: 0, 166, 62;
+  --ax-sys-color-on-success-surface: 234, 255, 236;
+  --ax-sys-color-border-success-surface: 0, 130, 49;
+
+  --ax-sys-color-success-dark-surface: 0, 147, 42;
+  --ax-sys-color-on-success-dark-surface: 234, 255, 235;
+  --ax-sys-color-border-success-dark-surface: 0, 111, 32;
+
+  --ax-sys-color-success-darker-surface: 0, 124, 17;
+  --ax-sys-color-on-success-darker-surface: 235, 255, 233;
+  --ax-sys-color-border-success-darker-surface: 0, 88, 12;
+
+  --ax-sys-color-success-darkest-surface: 19, 103, 22;
+  --ax-sys-color-on-success-darkest-surface: 235, 255, 233;
+  --ax-sys-color-border-success-darkest-surface: 13, 73, 16;
+
+  --ax-sys-color-warning-lightest-surface: 255, 234, 201;
+  --ax-sys-color-on-warning-lightest-surface: 59, 43, 14;
+  --ax-sys-color-border-warning-lightest-surface: 255, 220, 165;
+
+  --ax-sys-color-warning-lighter-surface: 255, 221, 174;
+  --ax-sys-color-on-warning-lighter-surface: 66, 39, 0;
+  --ax-sys-color-border-warning-lighter-surface: 255, 206, 138;
+
+  --ax-sys-color-warning-light-surface: 255, 198, 128;
+  --ax-sys-color-on-warning-light-surface: 71, 36, 0;
+  --ax-sys-color-border-warning-light-surface: 255, 182, 92;
+
+  --ax-sys-color-warning-surface: 253, 154, 0;
+  --ax-sys-color-on-warning-surface: 255, 250, 231;
+  --ax-sys-color-border-warning-surface: 217, 132, 0;
+
+  --ax-sys-color-warning-dark-surface: 224, 127, 0;
+  --ax-sys-color-on-warning-dark-surface: 255, 249, 233;
+  --ax-sys-color-border-warning-dark-surface: 188, 107, 0;
+
+  --ax-sys-color-warning-darker-surface: 181, 100, 0;
+  --ax-sys-color-on-warning-darker-surface: 255, 249, 234;
+  --ax-sys-color-border-warning-darker-surface: 145, 80, 0;
+
+  --ax-sys-color-warning-darkest-surface: 144, 81, 20;
+  --ax-sys-color-on-warning-darkest-surface: 255, 249, 234;
+  --ax-sys-color-border-warning-darkest-surface: 113, 63, 16;
+
+  --ax-sys-color-danger-lightest-surface: 255, 216, 207;
+  --ax-sys-color-on-danger-lightest-surface: 66, 37, 31;
+  --ax-sys-color-border-danger-lightest-surface: 255, 187, 171;
+
+  --ax-sys-color-danger-lighter-surface: 255, 188, 175;
+  --ax-sys-color-on-danger-lighter-surface: 79, 27, 19;
+  --ax-sys-color-border-danger-lighter-surface: 255, 158, 139;
+
+  --ax-sys-color-danger-light-surface: 255, 139, 122;
+  --ax-sys-color-on-danger-light-surface: 255, 248, 244;
+  --ax-sys-color-border-danger-light-surface: 255, 108, 86;
+
+  --ax-sys-color-danger-surface: 231, 0, 0;
+  --ax-sys-color-on-danger-surface: 255, 248, 244;
+  --ax-sys-color-border-danger-surface: 195, 0, 0;
+
+  --ax-sys-color-danger-dark-surface: 212, 0, 0;
+  --ax-sys-color-on-danger-dark-surface: 255, 248, 244;
+  --ax-sys-color-border-danger-dark-surface: 176, 0, 0;
+
+  --ax-sys-color-danger-darker-surface: 180, 0, 0;
+  --ax-sys-color-on-danger-darker-surface: 255, 248, 244;
+  --ax-sys-color-border-danger-darker-surface: 144, 0, 0;
+
+  --ax-sys-color-danger-darkest-surface: 150, 21, 14;
+  --ax-sys-color-on-danger-darkest-surface: 255, 248, 244;
+  --ax-sys-color-border-danger-darkest-surface: 117, 16, 11;
+
+  --ax-sys-color-accent-lightest-surface: 229, 220, 255;
+  --ax-sys-color-on-accent-lightest-surface: 48, 40, 67;
+  --ax-sys-color-border-accent-lightest-surface: 202, 184, 255;
+
+  --ax-sys-color-accent-lighter-surface: 209, 194, 255;
+  --ax-sys-color-on-accent-lighter-surface: 50, 34, 83;
+  --ax-sys-color-border-accent-lighter-surface: 182, 158, 255;
+
+  --ax-sys-color-accent-light-surface: 179, 152, 255;
+  --ax-sys-color-on-accent-light-surface: 54, 14, 110;
+  --ax-sys-color-border-accent-light-surface: 153, 116, 255;
+
+  --ax-sys-color-accent-surface: 127, 34, 254;
+  --ax-sys-color-on-accent-surface: 254, 251, 255;
+  --ax-sys-color-border-accent-surface: 107, 1, 251;
+
+  --ax-sys-color-accent-dark-surface: 116, 0, 238;
+  --ax-sys-color-on-accent-dark-surface: 254, 251, 255;
+  --ax-sys-color-border-accent-dark-surface: 99, 0, 202;
+
+  --ax-sys-color-accent-darker-surface: 101, 0, 214;
+  --ax-sys-color-on-accent-darker-surface: 253, 251, 255;
+  --ax-sys-color-border-accent-darker-surface: 84, 0, 178;
+
+  --ax-sys-color-accent-darkest-surface: 85, 24, 179;
+  --ax-sys-color-on-accent-darkest-surface: 253, 251, 255;
+  --ax-sys-color-border-accent-darkest-surface: 70, 20, 148;
+
+  --ax-sys-color-accent2-lightest-surface: 237, 218, 255;
+  --ax-sys-color-on-accent2-lightest-surface: 53, 38, 66;
+  --ax-sys-color-border-accent2-lightest-surface: 220, 182, 255;
+
+  --ax-sys-color-accent2-lighter-surface: 222, 191, 255;
+  --ax-sys-color-on-accent2-lighter-surface: 58, 30, 82;
+  --ax-sys-color-border-accent2-lighter-surface: 204, 155, 255;
+
+  --ax-sys-color-accent2-light-surface: 199, 147, 255;
+  --ax-sys-color-on-accent2-light-surface: 65, 0, 107;
+  --ax-sys-color-border-accent2-light-surface: 180, 111, 255;
+
+  --ax-sys-color-accent2-surface: 152, 16, 250;
+  --ax-sys-color-on-accent2-surface: 255, 250, 255;
+  --ax-sys-color-border-accent2-surface: 133, 5, 226;
+
+  --ax-sys-color-accent2-dark-surface: 138, 0, 233;
+  --ax-sys-color-on-accent2-dark-surface: 255, 250, 255;
+  --ax-sys-color-border-accent2-dark-surface: 117, 0, 197;
+
+  --ax-sys-color-accent2-darker-surface: 118, 0, 202;
+  --ax-sys-color-on-accent2-darker-surface: 255, 250, 255;
+  --ax-sys-color-border-accent2-darker-surface: 97, 0, 166;
+
+  --ax-sys-color-accent2-darkest-surface: 100, 23, 168;
+  --ax-sys-color-on-accent2-darkest-surface: 255, 250, 255;
+  --ax-sys-color-border-accent2-darkest-surface: 81, 19, 137;
+
+  --ax-sys-color-accent3-lightest-surface: 255, 218, 255;
+  --ax-sys-color-on-accent3-lightest-surface: 62, 34, 63;
+  --ax-sys-color-border-accent3-lightest-surface: 255, 182, 255;
+
+  --ax-sys-color-accent3-lighter-surface: 255, 192, 255;
+  --ax-sys-color-on-accent3-lighter-surface: 72, 19, 74;
+  --ax-sys-color-border-accent3-lighter-surface: 255, 156, 255;
+
+  --ax-sys-color-accent3-light-surface: 253, 149, 255;
+  --ax-sys-color-on-accent3-light-surface: 82, 0, 87;
+  --ax-sys-color-border-accent3-light-surface: 252, 113, 255;
+
+  --ax-sys-color-accent3-surface: 225, 42, 251;
+  --ax-sys-color-on-accent3-surface: 255, 247, 255;
+  --ax-sys-color-border-accent3-surface: 220, 7, 250;
+
+  --ax-sys-color-accent3-dark-surface: 202, 0, 228;
+  --ax-sys-color-on-accent3-dark-surface: 255, 247, 255;
+  --ax-sys-color-border-accent3-dark-surface: 170, 0, 192;
+
+  --ax-sys-color-accent3-darker-surface: 169, 0, 192;
+  --ax-sys-color-on-accent3-darker-surface: 255, 247, 255;
+  --ax-sys-color-border-accent3-darker-surface: 138, 0, 156;
+
+  --ax-sys-color-accent3-darkest-surface: 138, 24, 156;
+  --ax-sys-color-on-accent3-darkest-surface: 255, 247, 255;
+  --ax-sys-color-border-accent3-darkest-surface: 111, 19, 125;
+
+  --ax-sys-color-accent4-lightest-surface: 255, 214, 228;
+  --ax-sys-color-on-accent4-lightest-surface: 65, 35, 47;
+  --ax-sys-color-border-accent4-lightest-surface: 255, 178, 204;
+
+  --ax-sys-color-accent4-lighter-surface: 255, 186, 208;
+  --ax-sys-color-on-accent4-lighter-surface: 77, 24, 45;
+  --ax-sys-color-border-accent4-lighter-surface: 255, 150, 184;
+
+  --ax-sys-color-accent4-light-surface: 255, 136, 177;
+  --ax-sys-color-on-accent4-light-surface: 94, 0, 44;
+  --ax-sys-color-border-accent4-light-surface: 255, 100, 154;
+
+  --ax-sys-color-accent4-surface: 230, 0, 118;
+  --ax-sys-color-on-accent4-surface: 255, 247, 252;
+  --ax-sys-color-border-accent4-surface: 194, 0, 100;
+
+  --ax-sys-color-accent4-dark-surface: 209, 0, 103;
+  --ax-sys-color-on-accent4-dark-surface: 255, 247, 252;
+  --ax-sys-color-border-accent4-dark-surface: 173, 0, 85;
+
+  --ax-sys-color-accent4-darker-surface: 177, 0, 85;
+  --ax-sys-color-on-accent4-darker-surface: 255, 247, 252;
+  --ax-sys-color-border-accent4-darker-surface: 141, 0, 68;
+
+  --ax-sys-color-accent4-darkest-surface: 147, 21, 72;
+  --ax-sys-color-on-accent4-darkest-surface: 255, 247, 251;
+  --ax-sys-color-border-accent4-darkest-surface: 116, 17, 57;
+
+  --ax-sys-color-accent5-lightest-surface: 255, 216, 215;
+  --ax-sys-color-on-accent5-lightest-surface: 65, 37, 37;
+  --ax-sys-color-border-accent5-lightest-surface: 255, 181, 179;
+
+  --ax-sys-color-accent5-lighter-surface: 255, 189, 188;
+  --ax-sys-color-on-accent5-lighter-surface: 77, 27, 29;
+  --ax-sys-color-border-accent5-lighter-surface: 255, 154, 152;
+
+  --ax-sys-color-accent5-light-surface: 255, 141, 144;
+  --ax-sys-color-on-accent5-light-surface: 97, 0, 14;
+  --ax-sys-color-border-accent5-light-surface: 255, 105, 109;
+
+  --ax-sys-color-accent5-surface: 236, 0, 63;
+  --ax-sys-color-on-accent5-surface: 255, 247, 247;
+  --ax-sys-color-border-accent5-surface: 200, 0, 53;
+
+  --ax-sys-color-accent5-dark-surface: 215, 0, 48;
+  --ax-sys-color-on-accent5-dark-surface: 255, 248, 246;
+  --ax-sys-color-border-accent5-dark-surface: 179, 0, 40;
+
+  --ax-sys-color-accent5-darker-surface: 182, 0, 38;
+  --ax-sys-color-on-accent5-darker-surface: 255, 248, 246;
+  --ax-sys-color-border-accent5-darker-surface: 146, 0, 31;
+
+  --ax-sys-color-accent5-darkest-surface: 151, 21, 36;
+  --ax-sys-color-on-accent5-darkest-surface: 255, 248, 246;
+  --ax-sys-color-border-accent5-darkest-surface: 120, 17, 29;
+
+  --ax-sys-color-accent6-lightest-surface: 142, 255, 240;
+  --ax-sys-color-on-accent6-lightest-surface: 0, 57, 50;
+  --ax-sys-color-border-accent6-lightest-surface: 106, 255, 235;
+
+  --ax-sys-color-accent6-lighter-surface: 123, 237, 221;
+  --ax-sys-color-on-accent6-lighter-surface: 0, 57, 50;
+  --ax-sys-color-border-accent6-lighter-surface: 92, 233, 213;
+
+  --ax-sys-color-accent6-light-surface: 92, 208, 193;
+  --ax-sys-color-on-accent6-light-surface: 0, 57, 50;
+  --ax-sys-color-border-accent6-light-surface: 64, 200, 182;
+
+  --ax-sys-color-accent6-surface: 0, 150, 137;
+  --ax-sys-color-on-accent6-surface: 225, 255, 255;
+  --ax-sys-color-border-accent6-surface: 0, 114, 104;
+
+  --ax-sys-color-accent6-dark-surface: 0, 133, 121;
+  --ax-sys-color-on-accent6-dark-surface: 225, 255, 255;
+  --ax-sys-color-border-accent6-dark-surface: 0, 97, 89;
+
+  --ax-sys-color-accent6-darker-surface: 0, 113, 101;
+  --ax-sys-color-on-accent6-darker-surface: 226, 255, 255;
+  --ax-sys-color-border-accent6-darker-surface: 0, 77, 69;
+
+  --ax-sys-color-accent6-darkest-surface: 19, 94, 85;
+  --ax-sys-color-on-accent6-darkest-surface: 226, 255, 255;
+  --ax-sys-color-border-accent6-darkest-surface: 13, 64, 58;
+
+  --ax-sys-color-accent7-lightest-surface: 255, 228, 180;
+  --ax-sys-color-on-accent7-lightest-surface: 63, 41, 0;
+  --ax-sys-color-border-accent7-lightest-surface: 255, 215, 144;
+
+  --ax-sys-color-accent7-lighter-surface: 255, 209, 136;
+  --ax-sys-color-on-accent7-lighter-surface: 67, 39, 0;
+  --ax-sys-color-border-accent7-lighter-surface: 255, 195, 100;
+
+  --ax-sys-color-accent7-light-surface: 255, 181, 77;
+  --ax-sys-color-on-accent7-light-surface: 70, 37, 0;
+  --ax-sys-color-border-accent7-light-surface: 255, 166, 41;
+
+  --ax-sys-color-accent7-surface: 208, 135, 0;
+  --ax-sys-color-on-accent7-surface: 255, 250, 227;
+  --ax-sys-color-border-accent7-surface: 172, 112, 0;
+
+  --ax-sys-color-accent7-dark-surface: 185, 114, 0;
+  --ax-sys-color-on-accent7-dark-surface: 255, 250, 229;
+  --ax-sys-color-border-accent7-dark-surface: 149, 92, 0;
+
+  --ax-sys-color-accent7-darker-surface: 154, 91, 0;
+  --ax-sys-color-on-accent7-darker-surface: 255, 250, 231;
+  --ax-sys-color-border-accent7-darker-surface: 118, 70, 0;
+
+  --ax-sys-color-accent7-darkest-surface: 125, 75, 17;
+  --ax-sys-color-on-accent7-darkest-surface: 255, 250, 232;
+  --ax-sys-color-border-accent7-darkest-surface: 94, 56, 13;
+
+  --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
+  --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
+  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
+}
+
+.dark:root {
+  --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darker-surface));
+  --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-lightest-surface));
+
+  --ax-sys-color-lightest-surface: 56, 56, 56;
+  --ax-sys-color-on-lightest-surface: 245, 245, 245;
+  --ax-sys-color-border-lightest-surface: 64, 64, 64;
+
+  --ax-sys-color-lighter-surface: 49, 49, 49;
+  --ax-sys-color-on-lighter-surface: 245, 245, 245;
+  --ax-sys-color-border-lighter-surface: 56, 56, 56;
+
+  --ax-sys-color-light-surface: 42, 42, 42;
+  --ax-sys-color-on-light-surface: 245, 245, 245;
+  --ax-sys-color-border-light-surface: 50, 50, 50;
+
+  --ax-sys-color-surface: 33, 33, 33;
+  --ax-sys-color-on-surface: 245, 245, 245;
+  --ax-sys-color-border-surface: 44, 44, 44;
+
+  --ax-sys-color-dark-surface: 27, 27, 27;
+  --ax-sys-color-on-dark-surface: 245, 245, 245;
+  --ax-sys-color-border-dark-surface: 38, 38, 38;
+
+  --ax-sys-color-darker-surface: 20, 20, 20;
+  --ax-sys-color-on-darker-surface: 245, 245, 245;
+  --ax-sys-color-border-darker-surface: 32, 32, 32;
+
+  --ax-sys-color-darkest-surface: 10, 10, 10;
+  --ax-sys-color-on-darkest-surface: 245, 245, 245;
+  --ax-sys-color-border-darkest-surface: 28, 28, 28;
+
+  --ax-sys-color-primary-50: 237, 253, 255;
+  --ax-sys-color-primary-100: 229, 248, 255;
+  --ax-sys-color-primary-200: 213, 240, 255;
+  --ax-sys-color-primary-300: 197, 232, 255;
+  --ax-sys-color-primary-400: 180, 223, 255;
+  --ax-sys-color-primary-500: 164, 215, 255;
+  --ax-sys-color-primary-600: 151, 206, 255;
+  --ax-sys-color-primary-700: 142, 197, 255;
+  --ax-sys-color-primary-800: 120, 174, 231;
+  --ax-sys-color-primary-900: 98, 151, 206;
+  --ax-sys-color-primary-950: 87, 140, 195;
+
+  --ax-sys-color-secondary-50: 248, 248, 248;
+  --ax-sys-color-secondary-100: 241, 241, 241;
+  --ax-sys-color-secondary-200: 227, 227, 227;
+  --ax-sys-color-secondary-300: 214, 214, 214;
+  --ax-sys-color-secondary-400: 200, 200, 200;
+  --ax-sys-color-secondary-500: 187, 187, 187;
+  --ax-sys-color-secondary-600: 174, 174, 174;
+  --ax-sys-color-secondary-700: 161, 161, 161;
+  --ax-sys-color-secondary-800: 143, 143, 143;
+  --ax-sys-color-secondary-900: 126, 126, 126;
+  --ax-sys-color-secondary-950: 117, 117, 117;
+
+  --ax-sys-color-success-50: 227, 255, 238;
+  --ax-sys-color-success-100: 216, 255, 230;
+  --ax-sys-color-success-200: 192, 255, 215;
+  --ax-sys-color-success-300: 164, 255, 198;
+  --ax-sys-color-success-400: 142, 255, 186;
+  --ax-sys-color-success-500: 136, 254, 180;
+  --ax-sys-color-success-600: 129, 247, 174;
+  --ax-sys-color-success-700: 123, 241, 168;
+  --ax-sys-color-success-800: 95, 214, 143;
+  --ax-sys-color-success-900: 64, 187, 118;
+  --ax-sys-color-success-950: 47, 174, 106;
+
+  --ax-sys-color-warning-50: 255, 247, 224;
+  --ax-sys-color-warning-100: 255, 242, 214;
+  --ax-sys-color-warning-200: 255, 232, 194;
+  --ax-sys-color-warning-300: 255, 222, 174;
+  --ax-sys-color-warning-400: 255, 211, 152;
+  --ax-sys-color-warning-500: 255, 201, 129;
+  --ax-sys-color-warning-600: 255, 192, 114;
+  --ax-sys-color-warning-700: 255, 184, 106;
+  --ax-sys-color-warning-800: 229, 160, 81;
+  --ax-sys-color-warning-900: 204, 136, 55;
+  --ax-sys-color-warning-950: 191, 124, 41;
+
+  --ax-sys-color-danger-50: 255, 243, 243;
+  --ax-sys-color-danger-100: 255, 237, 236;
+  --ax-sys-color-danger-200: 255, 224, 223;
+  --ax-sys-color-danger-300: 255, 211, 210;
+  --ax-sys-color-danger-400: 255, 197, 196;
+  --ax-sys-color-danger-500: 255, 184, 183;
+  --ax-sys-color-danger-600: 255, 171, 171;
+  --ax-sys-color-danger-700: 255, 162, 162;
+  --ax-sys-color-danger-800: 230, 139, 140;
+  --ax-sys-color-danger-900: 206, 117, 118;
+  --ax-sys-color-danger-950: 193, 106, 108;
+
+  --ax-sys-color-accent-50: 244, 249, 255;
+  --ax-sys-color-accent-100: 237, 244, 255;
+  --ax-sys-color-accent-200: 224, 233, 255;
+  --ax-sys-color-accent-300: 211, 222, 255;
+  --ax-sys-color-accent-400: 197, 211, 255;
+  --ax-sys-color-accent-500: 184, 200, 255;
+  --ax-sys-color-accent-600: 173, 189, 255;
+  --ax-sys-color-accent-700: 163, 179, 255;
+  --ax-sys-color-accent-800: 142, 157, 232;
+  --ax-sys-color-accent-900: 122, 136, 208;
+  --ax-sys-color-accent-950: 112, 125, 197;
+
+  --ax-sys-color-accent2-50: 255, 245, 255;
+  --ax-sys-color-accent2-100: 255, 240, 255;
+  --ax-sys-color-accent2-200: 249, 229, 255;
+  --ax-sys-color-accent2-300: 244, 218, 255;
+  --ax-sys-color-accent2-400: 239, 207, 255;
+  --ax-sys-color-accent2-500: 233, 195, 255;
+  --ax-sys-color-accent2-600: 226, 186, 255;
+  --ax-sys-color-accent2-700: 218, 178, 255;
+  --ax-sys-color-accent2-800: 194, 154, 230;
+  --ax-sys-color-accent2-900: 170, 131, 205;
+  --ax-sys-color-accent2-950: 158, 120, 193;
+
+  --ax-sys-color-accent3-50: 255, 244, 255;
+  --ax-sys-color-accent3-100: 255, 237, 255;
+  --ax-sys-color-accent3-200: 255, 225, 255;
+  --ax-sys-color-accent3-300: 255, 212, 255;
+  --ax-sys-color-accent3-400: 255, 199, 255;
+  --ax-sys-color-accent3-500: 255, 185, 255;
+  --ax-sys-color-accent3-600: 252, 176, 255;
+  --ax-sys-color-accent3-700: 244, 168, 255;
+  --ax-sys-color-accent3-800: 218, 144, 229;
+  --ax-sys-color-accent3-900: 193, 120, 204;
+  --ax-sys-color-accent3-950: 181, 109, 192;
+
+  --ax-sys-color-accent4-50: 255, 242, 255;
+  --ax-sys-color-accent4-100: 255, 236, 253;
+  --ax-sys-color-accent4-200: 255, 223, 247;
+  --ax-sys-color-accent4-300: 255, 210, 240;
+  --ax-sys-color-accent4-400: 255, 197, 235;
+  --ax-sys-color-accent4-500: 255, 183, 229;
+  --ax-sys-color-accent4-600: 255, 173, 221;
+  --ax-sys-color-accent4-700: 253, 165, 213;
+  --ax-sys-color-accent4-800: 227, 142, 189;
+  --ax-sys-color-accent4-900: 202, 119, 165;
+  --ax-sys-color-accent4-950: 190, 108, 154;
+
+  --ax-sys-color-accent5-50: 255, 243, 245;
+  --ax-sys-color-accent5-100: 255, 237, 240;
+  --ax-sys-color-accent5-200: 255, 224, 228;
+  --ax-sys-color-accent5-300: 255, 210, 216;
+  --ax-sys-color-accent5-400: 255, 197, 204;
+  --ax-sys-color-accent5-500: 255, 183, 193;
+  --ax-sys-color-accent5-600: 255, 170, 182;
+  --ax-sys-color-accent5-700: 255, 161, 173;
+  --ax-sys-color-accent5-800: 230, 138, 151;
+  --ax-sys-color-accent5-900: 205, 116, 129;
+  --ax-sys-color-accent5-950: 193, 105, 118;
+
+  --ax-sys-color-accent6-50: 219, 255, 254;
+  --ax-sys-color-accent6-100: 203, 255, 251;
+  --ax-sys-color-accent6-200: 168, 255, 245;
+  --ax-sys-color-accent6-300: 121, 255, 240;
+  --ax-sys-color-accent6-400: 98, 255, 234;
+  --ax-sys-color-accent6-500: 89, 250, 227;
+  --ax-sys-color-accent6-600: 80, 243, 220;
+  --ax-sys-color-accent6-700: 70, 236, 213;
+  --ax-sys-color-accent6-800: 16, 210, 188;
+  --ax-sys-color-accent6-900: 0, 184, 163;
+  --ax-sys-color-accent6-950: 0, 171, 151;
+
+  --ax-sys-color-accent7-50: 255, 254, 177;
+  --ax-sys-color-accent7-100: 255, 252, 164;
+  --ax-sys-color-accent7-200: 255, 247, 136;
+  --ax-sys-color-accent7-300: 255, 242, 104;
+  --ax-sys-color-accent7-400: 255, 237, 59;
+  --ax-sys-color-accent7-500: 255, 232, 51;
+  --ax-sys-color-accent7-600: 255, 228, 42;
+  --ax-sys-color-accent7-700: 255, 223, 32;
+  --ax-sys-color-accent7-800: 226, 195, 0;
+  --ax-sys-color-accent7-900: 196, 167, 0;
+  --ax-sys-color-accent7-950: 181, 154, 0;
+
+  --ax-sys-color-primary-lightest-surface: 229, 248, 255;
+  --ax-sys-color-on-primary-lightest-surface: 10, 24, 29;
+  --ax-sys-color-border-primary-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-primary-lighter-surface: 213, 240, 255;
+  --ax-sys-color-on-primary-lighter-surface: 3, 25, 35;
+  --ax-sys-color-border-primary-lighter-surface: 255, 255, 255;
+
+  --ax-sys-color-primary-light-surface: 197, 232, 255;
+  --ax-sys-color-on-primary-light-surface: 0, 25, 41;
+  --ax-sys-color-border-primary-light-surface: 243, 250, 255;
+
+  --ax-sys-color-primary-surface: 164, 215, 255;
+  --ax-sys-color-on-primary-surface: 0, 23, 53;
+  --ax-sys-color-border-primary-surface: 210, 235, 255;
+
+  --ax-sys-color-primary-dark-surface: 151, 206, 255;
+  --ax-sys-color-on-primary-dark-surface: 0, 22, 57;
+  --ax-sys-color-border-primary-dark-surface: 197, 228, 255;
+
+  --ax-sys-color-primary-darker-surface: 142, 197, 255;
+  --ax-sys-color-on-primary-darker-surface: 0, 19, 63;
+  --ax-sys-color-border-primary-darker-surface: 188, 221, 255;
+
+  --ax-sys-color-primary-darkest-surface: 120, 174, 231;
+  --ax-sys-color-on-primary-darkest-surface: 0, 19, 63;
+  --ax-sys-color-border-primary-darkest-surface: 159, 197, 238;
+
+  --ax-sys-color-secondary-lightest-surface: 241, 241, 241;
+  --ax-sys-color-on-secondary-lightest-surface: 22, 22, 22;
+  --ax-sys-color-border-secondary-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-secondary-lighter-surface: 227, 227, 227;
+  --ax-sys-color-on-secondary-lighter-surface: 22, 22, 22;
+  --ax-sys-color-border-secondary-lighter-surface: 250, 250, 250;
+
+  --ax-sys-color-secondary-light-surface: 214, 214, 214;
+  --ax-sys-color-on-secondary-light-surface: 22, 22, 22;
+  --ax-sys-color-border-secondary-light-surface: 237, 237, 237;
+
+  --ax-sys-color-secondary-surface: 187, 187, 187;
+  --ax-sys-color-on-secondary-surface: 22, 22, 22;
+  --ax-sys-color-border-secondary-surface: 210, 210, 210;
+
+  --ax-sys-color-secondary-dark-surface: 174, 174, 174;
+  --ax-sys-color-on-secondary-dark-surface: 22, 22, 22;
+  --ax-sys-color-border-secondary-dark-surface: 197, 197, 197;
+
+  --ax-sys-color-secondary-darker-surface: 161, 161, 161;
+  --ax-sys-color-on-secondary-darker-surface: 22, 22, 22;
+  --ax-sys-color-border-secondary-darker-surface: 184, 184, 184;
+
+  --ax-sys-color-secondary-darkest-surface: 143, 143, 143;
+  --ax-sys-color-on-secondary-darkest-surface: 22, 22, 22;
+  --ax-sys-color-border-secondary-darkest-surface: 166, 166, 166;
+
+  --ax-sys-color-success-lightest-surface: 216, 255, 230;
+  --ax-sys-color-on-success-lightest-surface: 0, 29, 12;
+  --ax-sys-color-border-success-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-success-lighter-surface: 192, 255, 215;
+  --ax-sys-color-on-success-lighter-surface: 0, 31, 6;
+  --ax-sys-color-border-success-lighter-surface: 238, 255, 244;
+
+  --ax-sys-color-success-light-surface: 164, 255, 198;
+  --ax-sys-color-on-success-light-surface: 0, 31, 5;
+  --ax-sys-color-border-success-light-surface: 210, 255, 227;
+
+  --ax-sys-color-success-surface: 136, 254, 180;
+  --ax-sys-color-on-success-surface: 0, 31, 4;
+  --ax-sys-color-border-success-surface: 182, 254, 209;
+
+  --ax-sys-color-success-dark-surface: 129, 247, 174;
+  --ax-sys-color-on-success-dark-surface: 0, 31, 4;
+  --ax-sys-color-border-success-dark-surface: 172, 250, 202;
+
+  --ax-sys-color-success-darker-surface: 123, 241, 168;
+  --ax-sys-color-on-success-darker-surface: 0, 31, 4;
+  --ax-sys-color-border-success-darker-surface: 164, 245, 195;
+
+  --ax-sys-color-success-darkest-surface: 95, 214, 143;
+  --ax-sys-color-on-success-darkest-surface: 0, 31, 4;
+  --ax-sys-color-border-success-darkest-surface: 132, 223, 169;
+
+  --ax-sys-color-warning-lightest-surface: 255, 242, 214;
+  --ax-sys-color-on-warning-lightest-surface: 30, 20, 1;
+  --ax-sys-color-border-warning-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-warning-lighter-surface: 255, 232, 194;
+  --ax-sys-color-on-warning-lighter-surface: 35, 18, 0;
+  --ax-sys-color-border-warning-lighter-surface: 255, 249, 240;
+
+  --ax-sys-color-warning-light-surface: 255, 222, 174;
+  --ax-sys-color-on-warning-light-surface: 37, 17, 0;
+  --ax-sys-color-border-warning-light-surface: 255, 241, 220;
+
+  --ax-sys-color-warning-surface: 255, 201, 129;
+  --ax-sys-color-on-warning-surface: 38, 16, 0;
+  --ax-sys-color-border-warning-surface: 255, 221, 175;
+
+  --ax-sys-color-warning-dark-surface: 255, 192, 114;
+  --ax-sys-color-on-warning-dark-surface: 39, 15, 0;
+  --ax-sys-color-border-warning-dark-surface: 255, 213, 160;
+
+  --ax-sys-color-warning-darker-surface: 255, 184, 106;
+  --ax-sys-color-on-warning-darker-surface: 40, 14, 0;
+  --ax-sys-color-border-warning-darker-surface: 255, 206, 152;
+
+  --ax-sys-color-warning-darkest-surface: 229, 160, 81;
+  --ax-sys-color-on-warning-darkest-surface: 40, 14, 0;
+  --ax-sys-color-border-warning-darkest-surface: 235, 182, 121;
+
+  --ax-sys-color-danger-lightest-surface: 255, 237, 236;
+  --ax-sys-color-on-danger-lightest-surface: 30, 19, 18;
+  --ax-sys-color-border-danger-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-danger-lighter-surface: 255, 224, 223;
+  --ax-sys-color-on-danger-lighter-surface: 36, 15, 15;
+  --ax-sys-color-border-danger-lighter-surface: 255, 255, 255;
+
+  --ax-sys-color-danger-light-surface: 255, 211, 210;
+  --ax-sys-color-on-danger-light-surface: 41, 11, 13;
+  --ax-sys-color-border-danger-light-surface: 255, 255, 255;
+
+  --ax-sys-color-danger-surface: 255, 184, 183;
+  --ax-sys-color-on-danger-surface: 50, 0, 6;
+  --ax-sys-color-border-danger-surface: 255, 229, 229;
+
+  --ax-sys-color-danger-dark-surface: 255, 171, 171;
+  --ax-sys-color-on-danger-dark-surface: 55, 0, 3;
+  --ax-sys-color-border-danger-dark-surface: 255, 217, 217;
+
+  --ax-sys-color-danger-darker-surface: 255, 162, 162;
+  --ax-sys-color-on-danger-darker-surface: 55, 0, 3;
+  --ax-sys-color-border-danger-darker-surface: 255, 208, 208;
+
+  --ax-sys-color-danger-darkest-surface: 230, 139, 140;
+  --ax-sys-color-on-danger-darkest-surface: 55, 0, 3;
+  --ax-sys-color-border-danger-darkest-surface: 238, 177, 177;
+
+  --ax-sys-color-accent-lightest-surface: 237, 244, 255;
+  --ax-sys-color-on-accent-lightest-surface: 18, 22, 30;
+  --ax-sys-color-border-accent-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent-lighter-surface: 224, 233, 255;
+  --ax-sys-color-on-accent-lighter-surface: 16, 21, 36;
+  --ax-sys-color-border-accent-lighter-surface: 255, 255, 255;
+
+  --ax-sys-color-accent-light-surface: 211, 222, 255;
+  --ax-sys-color-on-accent-light-surface: 14, 20, 43;
+  --ax-sys-color-border-accent-light-surface: 255, 255, 255;
+
+  --ax-sys-color-accent-surface: 184, 200, 255;
+  --ax-sys-color-on-accent-surface: 11, 16, 57;
+  --ax-sys-color-border-accent-surface: 230, 236, 255;
+
+  --ax-sys-color-accent-dark-surface: 173, 189, 255;
+  --ax-sys-color-on-accent-dark-surface: 12, 12, 64;
+  --ax-sys-color-border-accent-dark-surface: 219, 226, 255;
+
+  --ax-sys-color-accent-darker-surface: 163, 179, 255;
+  --ax-sys-color-on-accent-darker-surface: 13, 6, 70;
+  --ax-sys-color-border-accent-darker-surface: 209, 217, 255;
+
+  --ax-sys-color-accent-darkest-surface: 142, 157, 232;
+  --ax-sys-color-on-accent-darkest-surface: 13, 6, 70;
+  --ax-sys-color-border-accent-darkest-surface: 180, 190, 240;
+
+  --ax-sys-color-accent2-lightest-surface: 255, 240, 255;
+  --ax-sys-color-on-accent2-lightest-surface: 28, 18, 28;
+  --ax-sys-color-border-accent2-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent2-lighter-surface: 249, 229, 255;
+  --ax-sys-color-on-accent2-lighter-surface: 30, 16, 34;
+  --ax-sys-color-border-accent2-lighter-surface: 255, 255, 255;
+
+  --ax-sys-color-accent2-light-surface: 244, 218, 255;
+  --ax-sys-color-on-accent2-light-surface: 32, 12, 39;
+  --ax-sys-color-border-accent2-light-surface: 255, 255, 255;
+
+  --ax-sys-color-accent2-surface: 233, 195, 255;
+  --ax-sys-color-on-accent2-surface: 36, 3, 50;
+  --ax-sys-color-border-accent2-surface: 250, 241, 255;
+
+  --ax-sys-color-accent2-dark-surface: 226, 186, 255;
+  --ax-sys-color-on-accent2-dark-surface: 36, 0, 55;
+  --ax-sys-color-border-accent2-dark-surface: 245, 232, 255;
+
+  --ax-sys-color-accent2-darker-surface: 218, 178, 255;
+  --ax-sys-color-on-accent2-darker-surface: 36, 0, 60;
+  --ax-sys-color-border-accent2-darker-surface: 240, 224, 255;
+
+  --ax-sys-color-accent2-darkest-surface: 194, 154, 230;
+  --ax-sys-color-on-accent2-darkest-surface: 36, 0, 60;
+  --ax-sys-color-border-accent2-darkest-surface: 216, 191, 239;
+
+  --ax-sys-color-accent3-lightest-surface: 255, 237, 255;
+  --ax-sys-color-on-accent3-lightest-surface: 29, 17, 29;
+  --ax-sys-color-border-accent3-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent3-lighter-surface: 255, 225, 255;
+  --ax-sys-color-on-accent3-lighter-surface: 33, 13, 34;
+  --ax-sys-color-border-accent3-lighter-surface: 255, 255, 255;
+
+  --ax-sys-color-accent3-light-surface: 255, 212, 255;
+  --ax-sys-color-on-accent3-light-surface: 38, 6, 39;
+  --ax-sys-color-border-accent3-light-surface: 255, 255, 255;
+
+  --ax-sys-color-accent3-surface: 255, 185, 255;
+  --ax-sys-color-on-accent3-surface: 45, 0, 48;
+  --ax-sys-color-border-accent3-surface: 255, 231, 255;
+
+  --ax-sys-color-accent3-dark-surface: 252, 176, 255;
+  --ax-sys-color-on-accent3-dark-surface: 45, 0, 49;
+  --ax-sys-color-border-accent3-dark-surface: 254, 222, 255;
+
+  --ax-sys-color-accent3-darker-surface: 244, 168, 255;
+  --ax-sys-color-on-accent3-darker-surface: 44, 0, 52;
+  --ax-sys-color-border-accent3-darker-surface: 250, 214, 255;
+
+  --ax-sys-color-accent3-darkest-surface: 218, 144, 229;
+  --ax-sys-color-on-accent3-darkest-surface: 44, 0, 52;
+  --ax-sys-color-border-accent3-darkest-surface: 230, 181, 238;
+
+  --ax-sys-color-accent4-lightest-surface: 255, 236, 253;
+  --ax-sys-color-on-accent4-lightest-surface: 30, 17, 29;
+  --ax-sys-color-border-accent4-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent4-lighter-surface: 255, 223, 247;
+  --ax-sys-color-on-accent4-lighter-surface: 35, 13, 30;
+  --ax-sys-color-border-accent4-lighter-surface: 255, 255, 255;
+
+  --ax-sys-color-accent4-light-surface: 255, 210, 240;
+  --ax-sys-color-on-accent4-light-surface: 39, 8, 31;
+  --ax-sys-color-border-accent4-light-surface: 255, 255, 255;
+
+  --ax-sys-color-accent4-surface: 255, 183, 229;
+  --ax-sys-color-on-accent4-surface: 48, 0, 35;
+  --ax-sys-color-border-accent4-surface: 255, 229, 246;
+
+  --ax-sys-color-accent4-dark-surface: 255, 173, 221;
+  --ax-sys-color-on-accent4-dark-surface: 50, 0, 33;
+  --ax-sys-color-border-accent4-dark-surface: 255, 219, 240;
+
+  --ax-sys-color-accent4-darker-surface: 253, 165, 213;
+  --ax-sys-color-on-accent4-darker-surface: 50, 0, 32;
+  --ax-sys-color-border-accent4-darker-surface: 254, 210, 234;
+
+  --ax-sys-color-accent4-darkest-surface: 227, 142, 189;
+  --ax-sys-color-on-accent4-darkest-surface: 50, 0, 32;
+  --ax-sys-color-border-accent4-darkest-surface: 236, 179, 210;
+
+  --ax-sys-color-accent5-lightest-surface: 255, 237, 240;
+  --ax-sys-color-on-accent5-lightest-surface: 30, 18, 21;
+  --ax-sys-color-border-accent5-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-accent5-lighter-surface: 255, 224, 228;
+  --ax-sys-color-on-accent5-lighter-surface: 35, 15, 19;
+  --ax-sys-color-border-accent5-lighter-surface: 255, 255, 255;
+
+  --ax-sys-color-accent5-light-surface: 255, 210, 216;
+  --ax-sys-color-on-accent5-light-surface: 41, 10, 17;
+  --ax-sys-color-border-accent5-light-surface: 255, 255, 255;
+
+  --ax-sys-color-accent5-surface: 255, 183, 193;
+  --ax-sys-color-on-accent5-surface: 50, 0, 13;
+  --ax-sys-color-border-accent5-surface: 255, 229, 233;
+
+  --ax-sys-color-accent5-dark-surface: 255, 170, 182;
+  --ax-sys-color-on-accent5-dark-surface: 54, 0, 11;
+  --ax-sys-color-border-accent5-dark-surface: 255, 216, 221;
+
+  --ax-sys-color-accent5-darker-surface: 255, 161, 173;
+  --ax-sys-color-on-accent5-darker-surface: 54, 0, 10;
+  --ax-sys-color-border-accent5-darker-surface: 255, 207, 213;
+
+  --ax-sys-color-accent5-darkest-surface: 230, 138, 151;
+  --ax-sys-color-on-accent5-darkest-surface: 54, 0, 10;
+  --ax-sys-color-border-accent5-darkest-surface: 238, 176, 185;
+
+  --ax-sys-color-accent6-lightest-surface: 203, 255, 251;
+  --ax-sys-color-on-accent6-lightest-surface: 0, 29, 28;
+  --ax-sys-color-border-accent6-lightest-surface: 249, 255, 255;
+
+  --ax-sys-color-accent6-lighter-surface: 168, 255, 245;
+  --ax-sys-color-on-accent6-lighter-surface: 0, 29, 26;
+  --ax-sys-color-border-accent6-lighter-surface: 214, 255, 250;
+
+  --ax-sys-color-accent6-light-surface: 121, 255, 240;
+  --ax-sys-color-on-accent6-light-surface: 0, 29, 26;
+  --ax-sys-color-border-accent6-light-surface: 167, 255, 245;
+
+  --ax-sys-color-accent6-surface: 89, 250, 227;
+  --ax-sys-color-on-accent6-surface: 0, 30, 24;
+  --ax-sys-color-border-accent6-surface: 134, 251, 235;
+
+  --ax-sys-color-accent6-dark-surface: 80, 243, 220;
+  --ax-sys-color-on-accent6-dark-surface: 0, 30, 24;
+  --ax-sys-color-border-accent6-dark-surface: 123, 246, 229;
+
+  --ax-sys-color-accent6-darker-surface: 70, 236, 213;
+  --ax-sys-color-on-accent6-darker-surface: 0, 30, 24;
+  --ax-sys-color-border-accent6-darker-surface: 112, 240, 222;
+
+  --ax-sys-color-accent6-darkest-surface: 16, 210, 188;
+  --ax-sys-color-on-accent6-darkest-surface: 0, 30, 24;
+  --ax-sys-color-border-accent6-darkest-surface: 34, 238, 215;
+
+  --ax-sys-color-accent7-lightest-surface: 255, 252, 164;
+  --ax-sys-color-on-accent7-lightest-surface: 26, 23, 0;
+  --ax-sys-color-border-accent7-lightest-surface: 255, 254, 210;
+
+  --ax-sys-color-accent7-lighter-surface: 255, 247, 136;
+  --ax-sys-color-on-accent7-lighter-surface: 27, 23, 0;
+  --ax-sys-color-border-accent7-lighter-surface: 255, 250, 182;
+
+  --ax-sys-color-accent7-light-surface: 255, 242, 104;
+  --ax-sys-color-on-accent7-light-surface: 27, 22, 0;
+  --ax-sys-color-border-accent7-light-surface: 255, 246, 150;
+
+  --ax-sys-color-accent7-surface: 255, 232, 51;
+  --ax-sys-color-on-accent7-surface: 28, 22, 0;
+  --ax-sys-color-border-accent7-surface: 255, 237, 97;
+
+  --ax-sys-color-accent7-dark-surface: 255, 228, 42;
+  --ax-sys-color-on-accent7-dark-surface: 29, 22, 0;
+  --ax-sys-color-border-accent7-dark-surface: 255, 234, 88;
+
+  --ax-sys-color-accent7-darker-surface: 255, 223, 32;
+  --ax-sys-color-on-accent7-darker-surface: 29, 21, 0;
+  --ax-sys-color-border-accent7-darker-surface: 255, 230, 78;
+
+  --ax-sys-color-accent7-darkest-surface: 226, 195, 0;
+  --ax-sys-color-on-accent7-darkest-surface: 30, 21, 0;
+  --ax-sys-color-border-accent7-darkest-surface: 255, 222, 17;
+
+}
+
+@theme {
+  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
+  --color-text-default: rgba(var(--ax-sys-color-text-default));
+  --color-border-default: rgba(var(--ax-sys-color-border-default));
+  --color-border: rgba(var(--ax-sys-color-border-default));
+  --radius-default: var(--ax-sys-border-radius);
+  --breakpoint-3xl: 1920px;
+  --breakpoint-4xl: 2560px;
+  
+  --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
+  --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
+  --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
+  --color-lighter: rgba(var(--ax-sys-color-lighter-surface));
+  --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));
+  --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));
+  --color-light: rgba(var(--ax-sys-color-light-surface));
+  --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
+  --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
+  --color-surface: rgba(var(--ax-sys-color-surface));
+  --color-on-surface: rgba(var(--ax-sys-color-on-surface));
+  --color-border-surface: rgba(var(--ax-sys-color-border-surface));
+  --color-dark: rgba(var(--ax-sys-color-dark-surface));
+  --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));
+  --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));
+  --color-darker: rgba(var(--ax-sys-color-darker-surface));
+  --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));
+  --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));
+  --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
+  --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
+  --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
+  /* Primary Surfaces */
+  --color-primary-50: rgba(var(--ax-sys-color-primary-50));
+  --color-primary-100: rgba(var(--ax-sys-color-primary-100));
+  --color-primary-200: rgba(var(--ax-sys-color-primary-200));
+  --color-primary-300: rgba(var(--ax-sys-color-primary-300));
+  --color-primary-400: rgba(var(--ax-sys-color-primary-400));
+  --color-primary-500: rgba(var(--ax-sys-color-primary-500));
+  --color-primary-600: rgba(var(--ax-sys-color-primary-600));
+  --color-primary-700: rgba(var(--ax-sys-color-primary-700));
+  --color-primary-800: rgba(var(--ax-sys-color-primary-800));
+  --color-primary-900: rgba(var(--ax-sys-color-primary-900));
+  --color-primary-950: rgba(var(--ax-sys-color-primary-950));
+
+  --color-primary-lightest: rgba(var(--ax-sys-color-primary-lightest-surface));
+  --color-on-primary-lightest: rgba(var(--ax-sys-color-on-primary-lightest-surface));
+  --color-border-primary-lightest: rgba(var(--ax-sys-color-border-primary-lightest-surface));
+  --color-primary-lighter: rgba(var(--ax-sys-color-primary-lighter-surface));
+  --color-on-primary-lighter: rgba(var(--ax-sys-color-on-primary-lighter-surface));
+  --color-border-primary-lighter: rgba(var(--ax-sys-color-border-primary-lighter-surface));
+  --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
+  --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
+  --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
+  --color-primary: rgba(var(--ax-sys-color-primary-surface));
+  --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
+  --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
+  --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
+  --color-on-primary-dark: rgba(var(--ax-sys-color-on-primary-dark-surface));
+  --color-border-primary-dark: rgba(var(--ax-sys-color-border-primary-dark-surface));
+  --color-primary-darker: rgba(var(--ax-sys-color-primary-darker-surface));
+  --color-on-primary-darker: rgba(var(--ax-sys-color-on-primary-darker-surface));
+  --color-border-primary-darker: rgba(var(--ax-sys-color-border-primary-darker-surface));
+  --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
+  --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
+  --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
+  /* Secondary Surfaces */
+  --color-secondary-50: rgba(var(--ax-sys-color-secondary-50));
+  --color-secondary-100: rgba(var(--ax-sys-color-secondary-100));
+  --color-secondary-200: rgba(var(--ax-sys-color-secondary-200));
+  --color-secondary-300: rgba(var(--ax-sys-color-secondary-300));
+  --color-secondary-400: rgba(var(--ax-sys-color-secondary-400));
+  --color-secondary-500: rgba(var(--ax-sys-color-secondary-500));
+  --color-secondary-600: rgba(var(--ax-sys-color-secondary-600));
+  --color-secondary-700: rgba(var(--ax-sys-color-secondary-700));
+  --color-secondary-800: rgba(var(--ax-sys-color-secondary-800));
+  --color-secondary-900: rgba(var(--ax-sys-color-secondary-900));
+  --color-secondary-950: rgba(var(--ax-sys-color-secondary-950));
+
+  --color-secondary-lightest: rgba(var(--ax-sys-color-secondary-lightest-surface));
+  --color-on-secondary-lightest: rgba(var(--ax-sys-color-on-secondary-lightest-surface));
+  --color-border-secondary-lightest: rgba(var(--ax-sys-color-border-secondary-lightest-surface));
+  --color-secondary-lighter: rgba(var(--ax-sys-color-secondary-lighter-surface));
+  --color-on-secondary-lighter: rgba(var(--ax-sys-color-on-secondary-lighter-surface));
+  --color-border-secondary-lighter: rgba(var(--ax-sys-color-border-secondary-lighter-surface));
+  --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
+  --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
+  --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
+  --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
+  --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
+  --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
+  --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
+  --color-on-secondary-dark: rgba(var(--ax-sys-color-on-secondary-dark-surface));
+  --color-border-secondary-dark: rgba(var(--ax-sys-color-border-secondary-dark-surface));
+  --color-secondary-darker: rgba(var(--ax-sys-color-secondary-darker-surface));
+  --color-on-secondary-darker: rgba(var(--ax-sys-color-on-secondary-darker-surface));
+  --color-border-secondary-darker: rgba(var(--ax-sys-color-border-secondary-darker-surface));
+  --color-secondary-darkest: rgba(var(--ax-sys-color-secondary-darkest-surface));
+  --color-on-secondary-darkest: rgba(var(--ax-sys-color-on-secondary-darkest-surface));
+  --color-border-secondary-darkest: rgba(var(--ax-sys-color-border-secondary-darkest-surface));
+  /* Success Surfaces */
+  --color-success-50: rgba(var(--ax-sys-color-success-50));
+  --color-success-100: rgba(var(--ax-sys-color-success-100));
+  --color-success-200: rgba(var(--ax-sys-color-success-200));
+  --color-success-300: rgba(var(--ax-sys-color-success-300));
+  --color-success-400: rgba(var(--ax-sys-color-success-400));
+  --color-success-500: rgba(var(--ax-sys-color-success-500));
+  --color-success-600: rgba(var(--ax-sys-color-success-600));
+  --color-success-700: rgba(var(--ax-sys-color-success-700));
+  --color-success-800: rgba(var(--ax-sys-color-success-800));
+  --color-success-900: rgba(var(--ax-sys-color-success-900));
+  --color-success-950: rgba(var(--ax-sys-color-success-950));
+
+  --color-success-lightest: rgba(var(--ax-sys-color-success-lightest-surface));
+  --color-on-success-lightest: rgba(var(--ax-sys-color-on-success-lightest-surface));
+  --color-border-success-lightest: rgba(var(--ax-sys-color-border-success-lightest-surface));
+  --color-success-lighter: rgba(var(--ax-sys-color-success-lighter-surface));
+  --color-on-success-lighter: rgba(var(--ax-sys-color-on-success-lighter-surface));
+  --color-border-success-lighter: rgba(var(--ax-sys-color-border-success-lighter-surface));
+  --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
+  --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
+  --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
+  --color-success: rgba(var(--ax-sys-color-success-surface));
+  --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
+  --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
+  --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
+  --color-on-success-dark: rgba(var(--ax-sys-color-on-success-dark-surface));
+  --color-border-success-dark: rgba(var(--ax-sys-color-border-success-dark-surface));
+  --color-success-darker: rgba(var(--ax-sys-color-success-darker-surface));
+  --color-on-success-darker: rgba(var(--ax-sys-color-on-success-darker-surface));
+  --color-border-success-darker: rgba(var(--ax-sys-color-border-success-darker-surface));
+  --color-success-darkest: rgba(var(--ax-sys-color-success-darkest-surface));
+  --color-on-success-darkest: rgba(var(--ax-sys-color-on-success-darkest-surface));
+  --color-border-success-darkest: rgba(var(--ax-sys-color-border-success-darkest-surface));
+  /* Warning Surfaces */
+  --color-warning-50: rgba(var(--ax-sys-color-warning-50));
+  --color-warning-100: rgba(var(--ax-sys-color-warning-100));
+  --color-warning-200: rgba(var(--ax-sys-color-warning-200));
+  --color-warning-300: rgba(var(--ax-sys-color-warning-300));
+  --color-warning-400: rgba(var(--ax-sys-color-warning-400));
+  --color-warning-500: rgba(var(--ax-sys-color-warning-500));
+  --color-warning-600: rgba(var(--ax-sys-color-warning-600));
+  --color-warning-700: rgba(var(--ax-sys-color-warning-700));
+  --color-warning-800: rgba(var(--ax-sys-color-warning-800));
+  --color-warning-900: rgba(var(--ax-sys-color-warning-900));
+  --color-warning-950: rgba(var(--ax-sys-color-warning-950));
+
+  --color-warning-lightest: rgba(var(--ax-sys-color-warning-lightest-surface));
+  --color-on-warning-lightest: rgba(var(--ax-sys-color-on-warning-lightest-surface));
+  --color-border-warning-lightest: rgba(var(--ax-sys-color-border-warning-lightest-surface));
+  --color-warning-lighter: rgba(var(--ax-sys-color-warning-lighter-surface));
+  --color-on-warning-lighter: rgba(var(--ax-sys-color-on-warning-lighter-surface));
+  --color-border-warning-lighter: rgba(var(--ax-sys-color-border-warning-lighter-surface));
+  --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
+  --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
+  --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
+  --color-warning: rgba(var(--ax-sys-color-warning-surface));
+  --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
+  --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
+  --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
+  --color-on-warning-dark: rgba(var(--ax-sys-color-on-warning-dark-surface));
+  --color-border-warning-dark: rgba(var(--ax-sys-color-border-warning-dark-surface));
+  --color-warning-darker: rgba(var(--ax-sys-color-warning-darker-surface));
+  --color-on-warning-darker: rgba(var(--ax-sys-color-on-warning-darker-surface));
+  --color-border-warning-darker: rgba(var(--ax-sys-color-border-warning-darker-surface));
+  --color-warning-darkest: rgba(var(--ax-sys-color-warning-darkest-surface));
+  --color-on-warning-darkest: rgba(var(--ax-sys-color-on-warning-darkest-surface));
+  --color-border-warning-darkest: rgba(var(--ax-sys-color-border-warning-darkest-surface));
+  /* Danger Surfaces */
+  --color-danger-50: rgba(var(--ax-sys-color-danger-50));
+  --color-danger-100: rgba(var(--ax-sys-color-danger-100));
+  --color-danger-200: rgba(var(--ax-sys-color-danger-200));
+  --color-danger-300: rgba(var(--ax-sys-color-danger-300));
+  --color-danger-400: rgba(var(--ax-sys-color-danger-400));
+  --color-danger-500: rgba(var(--ax-sys-color-danger-500));
+  --color-danger-600: rgba(var(--ax-sys-color-danger-600));
+  --color-danger-700: rgba(var(--ax-sys-color-danger-700));
+  --color-danger-800: rgba(var(--ax-sys-color-danger-800));
+  --color-danger-900: rgba(var(--ax-sys-color-danger-900));
+  --color-danger-950: rgba(var(--ax-sys-color-danger-950));
+
+  --color-danger-lightest: rgba(var(--ax-sys-color-danger-lightest-surface));
+  --color-on-danger-lightest: rgba(var(--ax-sys-color-on-danger-lightest-surface));
+  --color-border-danger-lightest: rgba(var(--ax-sys-color-border-danger-lightest-surface));
+  --color-danger-lighter: rgba(var(--ax-sys-color-danger-lighter-surface));
+  --color-on-danger-lighter: rgba(var(--ax-sys-color-on-danger-lighter-surface));
+  --color-border-danger-lighter: rgba(var(--ax-sys-color-border-danger-lighter-surface));
+  --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
+  --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
+  --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
+  --color-danger: rgba(var(--ax-sys-color-danger-surface));
+  --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
+  --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
+  --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
+  --color-on-danger-dark: rgba(var(--ax-sys-color-on-danger-dark-surface));
+  --color-border-danger-dark: rgba(var(--ax-sys-color-border-danger-dark-surface));
+  --color-danger-darker: rgba(var(--ax-sys-color-danger-darker-surface));
+  --color-on-danger-darker: rgba(var(--ax-sys-color-on-danger-darker-surface));
+  --color-border-danger-darker: rgba(var(--ax-sys-color-border-danger-darker-surface));
+  --color-danger-darkest: rgba(var(--ax-sys-color-danger-darkest-surface));
+  --color-on-danger-darkest: rgba(var(--ax-sys-color-on-danger-darkest-surface));
+  --color-border-danger-darkest: rgba(var(--ax-sys-color-border-danger-darkest-surface));
+  /* Accent Surfaces */
+  --color-accent-50: rgba(var(--ax-sys-color-accent-50));
+  --color-accent-100: rgba(var(--ax-sys-color-accent-100));
+  --color-accent-200: rgba(var(--ax-sys-color-accent-200));
+  --color-accent-300: rgba(var(--ax-sys-color-accent-300));
+  --color-accent-400: rgba(var(--ax-sys-color-accent-400));
+  --color-accent-500: rgba(var(--ax-sys-color-accent-500));
+  --color-accent-600: rgba(var(--ax-sys-color-accent-600));
+  --color-accent-700: rgba(var(--ax-sys-color-accent-700));
+  --color-accent-800: rgba(var(--ax-sys-color-accent-800));
+  --color-accent-900: rgba(var(--ax-sys-color-accent-900));
+  --color-accent-950: rgba(var(--ax-sys-color-accent-950));
+
+  --color-accent-lightest: rgba(var(--ax-sys-color-accent-lightest-surface));
+  --color-on-accent-lightest: rgba(var(--ax-sys-color-on-accent-lightest-surface));
+  --color-border-accent-lightest: rgba(var(--ax-sys-color-border-accent-lightest-surface));
+  --color-accent-lighter: rgba(var(--ax-sys-color-accent-lighter-surface));
+  --color-on-accent-lighter: rgba(var(--ax-sys-color-on-accent-lighter-surface));
+  --color-border-accent-lighter: rgba(var(--ax-sys-color-border-accent-lighter-surface));
+  --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
+  --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
+  --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
+  --color-accent: rgba(var(--ax-sys-color-accent-surface));
+  --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
+  --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
+  --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
+  --color-on-accent-dark: rgba(var(--ax-sys-color-on-accent-dark-surface));
+  --color-border-accent-dark: rgba(var(--ax-sys-color-border-accent-dark-surface));
+  --color-accent-darker: rgba(var(--ax-sys-color-accent-darker-surface));
+  --color-on-accent-darker: rgba(var(--ax-sys-color-on-accent-darker-surface));
+  --color-border-accent-darker: rgba(var(--ax-sys-color-border-accent-darker-surface));
+  --color-accent-darkest: rgba(var(--ax-sys-color-accent-darkest-surface));
+  --color-on-accent-darkest: rgba(var(--ax-sys-color-on-accent-darkest-surface));
+  --color-border-accent-darkest: rgba(var(--ax-sys-color-border-accent-darkest-surface));
+  /* Accent2 Surfaces */
+  --color-accent2-50: rgba(var(--ax-sys-color-accent2-50));
+  --color-accent2-100: rgba(var(--ax-sys-color-accent2-100));
+  --color-accent2-200: rgba(var(--ax-sys-color-accent2-200));
+  --color-accent2-300: rgba(var(--ax-sys-color-accent2-300));
+  --color-accent2-400: rgba(var(--ax-sys-color-accent2-400));
+  --color-accent2-500: rgba(var(--ax-sys-color-accent2-500));
+  --color-accent2-600: rgba(var(--ax-sys-color-accent2-600));
+  --color-accent2-700: rgba(var(--ax-sys-color-accent2-700));
+  --color-accent2-800: rgba(var(--ax-sys-color-accent2-800));
+  --color-accent2-900: rgba(var(--ax-sys-color-accent2-900));
+  --color-accent2-950: rgba(var(--ax-sys-color-accent2-950));
+
+  --color-accent2-lightest: rgba(var(--ax-sys-color-accent2-lightest-surface));
+  --color-on-accent2-lightest: rgba(var(--ax-sys-color-on-accent2-lightest-surface));
+  --color-border-accent2-lightest: rgba(var(--ax-sys-color-border-accent2-lightest-surface));
+  --color-accent2-lighter: rgba(var(--ax-sys-color-accent2-lighter-surface));
+  --color-on-accent2-lighter: rgba(var(--ax-sys-color-on-accent2-lighter-surface));
+  --color-border-accent2-lighter: rgba(var(--ax-sys-color-border-accent2-lighter-surface));
+  --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
+  --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
+  --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
+  --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
+  --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
+  --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
+  --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
+  --color-on-accent2-dark: rgba(var(--ax-sys-color-on-accent2-dark-surface));
+  --color-border-accent2-dark: rgba(var(--ax-sys-color-border-accent2-dark-surface));
+  --color-accent2-darker: rgba(var(--ax-sys-color-accent2-darker-surface));
+  --color-on-accent2-darker: rgba(var(--ax-sys-color-on-accent2-darker-surface));
+  --color-border-accent2-darker: rgba(var(--ax-sys-color-border-accent2-darker-surface));
+  --color-accent2-darkest: rgba(var(--ax-sys-color-accent2-darkest-surface));
+  --color-on-accent2-darkest: rgba(var(--ax-sys-color-on-accent2-darkest-surface));
+  --color-border-accent2-darkest: rgba(var(--ax-sys-color-border-accent2-darkest-surface));
+  /* Accent3 Surfaces */
+  --color-accent3-50: rgba(var(--ax-sys-color-accent3-50));
+  --color-accent3-100: rgba(var(--ax-sys-color-accent3-100));
+  --color-accent3-200: rgba(var(--ax-sys-color-accent3-200));
+  --color-accent3-300: rgba(var(--ax-sys-color-accent3-300));
+  --color-accent3-400: rgba(var(--ax-sys-color-accent3-400));
+  --color-accent3-500: rgba(var(--ax-sys-color-accent3-500));
+  --color-accent3-600: rgba(var(--ax-sys-color-accent3-600));
+  --color-accent3-700: rgba(var(--ax-sys-color-accent3-700));
+  --color-accent3-800: rgba(var(--ax-sys-color-accent3-800));
+  --color-accent3-900: rgba(var(--ax-sys-color-accent3-900));
+  --color-accent3-950: rgba(var(--ax-sys-color-accent3-950));
+
+  --color-accent3-lightest: rgba(var(--ax-sys-color-accent3-lightest-surface));
+  --color-on-accent3-lightest: rgba(var(--ax-sys-color-on-accent3-lightest-surface));
+  --color-border-accent3-lightest: rgba(var(--ax-sys-color-border-accent3-lightest-surface));
+  --color-accent3-lighter: rgba(var(--ax-sys-color-accent3-lighter-surface));
+  --color-on-accent3-lighter: rgba(var(--ax-sys-color-on-accent3-lighter-surface));
+  --color-border-accent3-lighter: rgba(var(--ax-sys-color-border-accent3-lighter-surface));
+  --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
+  --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
+  --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
+  --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
+  --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
+  --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
+  --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
+  --color-on-accent3-dark: rgba(var(--ax-sys-color-on-accent3-dark-surface));
+  --color-border-accent3-dark: rgba(var(--ax-sys-color-border-accent3-dark-surface));
+  --color-accent3-darker: rgba(var(--ax-sys-color-accent3-darker-surface));
+  --color-on-accent3-darker: rgba(var(--ax-sys-color-on-accent3-darker-surface));
+  --color-border-accent3-darker: rgba(var(--ax-sys-color-border-accent3-darker-surface));
+  --color-accent3-darkest: rgba(var(--ax-sys-color-accent3-darkest-surface));
+  --color-on-accent3-darkest: rgba(var(--ax-sys-color-on-accent3-darkest-surface));
+  --color-border-accent3-darkest: rgba(var(--ax-sys-color-border-accent3-darkest-surface));
+  /* Accent4 Surfaces */
+  --color-accent4-50: rgba(var(--ax-sys-color-accent4-50));
+  --color-accent4-100: rgba(var(--ax-sys-color-accent4-100));
+  --color-accent4-200: rgba(var(--ax-sys-color-accent4-200));
+  --color-accent4-300: rgba(var(--ax-sys-color-accent4-300));
+  --color-accent4-400: rgba(var(--ax-sys-color-accent4-400));
+  --color-accent4-500: rgba(var(--ax-sys-color-accent4-500));
+  --color-accent4-600: rgba(var(--ax-sys-color-accent4-600));
+  --color-accent4-700: rgba(var(--ax-sys-color-accent4-700));
+  --color-accent4-800: rgba(var(--ax-sys-color-accent4-800));
+  --color-accent4-900: rgba(var(--ax-sys-color-accent4-900));
+  --color-accent4-950: rgba(var(--ax-sys-color-accent4-950));
+
+  --color-accent4-lightest: rgba(var(--ax-sys-color-accent4-lightest-surface));
+  --color-on-accent4-lightest: rgba(var(--ax-sys-color-on-accent4-lightest-surface));
+  --color-border-accent4-lightest: rgba(var(--ax-sys-color-border-accent4-lightest-surface));
+  --color-accent4-lighter: rgba(var(--ax-sys-color-accent4-lighter-surface));
+  --color-on-accent4-lighter: rgba(var(--ax-sys-color-on-accent4-lighter-surface));
+  --color-border-accent4-lighter: rgba(var(--ax-sys-color-border-accent4-lighter-surface));
+  --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
+  --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
+  --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
+  --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
+  --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
+  --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
+  --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
+  --color-on-accent4-dark: rgba(var(--ax-sys-color-on-accent4-dark-surface));
+  --color-border-accent4-dark: rgba(var(--ax-sys-color-border-accent4-dark-surface));
+  --color-accent4-darker: rgba(var(--ax-sys-color-accent4-darker-surface));
+  --color-on-accent4-darker: rgba(var(--ax-sys-color-on-accent4-darker-surface));
+  --color-border-accent4-darker: rgba(var(--ax-sys-color-border-accent4-darker-surface));
+  --color-accent4-darkest: rgba(var(--ax-sys-color-accent4-darkest-surface));
+  --color-on-accent4-darkest: rgba(var(--ax-sys-color-on-accent4-darkest-surface));
+  --color-border-accent4-darkest: rgba(var(--ax-sys-color-border-accent4-darkest-surface));
+  /* Accent5 Surfaces */
+  --color-accent5-50: rgba(var(--ax-sys-color-accent5-50));
+  --color-accent5-100: rgba(var(--ax-sys-color-accent5-100));
+  --color-accent5-200: rgba(var(--ax-sys-color-accent5-200));
+  --color-accent5-300: rgba(var(--ax-sys-color-accent5-300));
+  --color-accent5-400: rgba(var(--ax-sys-color-accent5-400));
+  --color-accent5-500: rgba(var(--ax-sys-color-accent5-500));
+  --color-accent5-600: rgba(var(--ax-sys-color-accent5-600));
+  --color-accent5-700: rgba(var(--ax-sys-color-accent5-700));
+  --color-accent5-800: rgba(var(--ax-sys-color-accent5-800));
+  --color-accent5-900: rgba(var(--ax-sys-color-accent5-900));
+  --color-accent5-950: rgba(var(--ax-sys-color-accent5-950));
+
+  --color-accent5-lightest: rgba(var(--ax-sys-color-accent5-lightest-surface));
+  --color-on-accent5-lightest: rgba(var(--ax-sys-color-on-accent5-lightest-surface));
+  --color-border-accent5-lightest: rgba(var(--ax-sys-color-border-accent5-lightest-surface));
+  --color-accent5-lighter: rgba(var(--ax-sys-color-accent5-lighter-surface));
+  --color-on-accent5-lighter: rgba(var(--ax-sys-color-on-accent5-lighter-surface));
+  --color-border-accent5-lighter: rgba(var(--ax-sys-color-border-accent5-lighter-surface));
+  --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
+  --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
+  --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
+  --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
+  --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
+  --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
+  --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
+  --color-on-accent5-dark: rgba(var(--ax-sys-color-on-accent5-dark-surface));
+  --color-border-accent5-dark: rgba(var(--ax-sys-color-border-accent5-dark-surface));
+  --color-accent5-darker: rgba(var(--ax-sys-color-accent5-darker-surface));
+  --color-on-accent5-darker: rgba(var(--ax-sys-color-on-accent5-darker-surface));
+  --color-border-accent5-darker: rgba(var(--ax-sys-color-border-accent5-darker-surface));
+  --color-accent5-darkest: rgba(var(--ax-sys-color-accent5-darkest-surface));
+  --color-on-accent5-darkest: rgba(var(--ax-sys-color-on-accent5-darkest-surface));
+  --color-border-accent5-darkest: rgba(var(--ax-sys-color-border-accent5-darkest-surface));
+  /* Accent6 Surfaces */
+  --color-accent6-50: rgba(var(--ax-sys-color-accent6-50));
+  --color-accent6-100: rgba(var(--ax-sys-color-accent6-100));
+  --color-accent6-200: rgba(var(--ax-sys-color-accent6-200));
+  --color-accent6-300: rgba(var(--ax-sys-color-accent6-300));
+  --color-accent6-400: rgba(var(--ax-sys-color-accent6-400));
+  --color-accent6-500: rgba(var(--ax-sys-color-accent6-500));
+  --color-accent6-600: rgba(var(--ax-sys-color-accent6-600));
+  --color-accent6-700: rgba(var(--ax-sys-color-accent6-700));
+  --color-accent6-800: rgba(var(--ax-sys-color-accent6-800));
+  --color-accent6-900: rgba(var(--ax-sys-color-accent6-900));
+  --color-accent6-950: rgba(var(--ax-sys-color-accent6-950));
+
+  --color-accent6-lightest: rgba(var(--ax-sys-color-accent6-lightest-surface));
+  --color-on-accent6-lightest: rgba(var(--ax-sys-color-on-accent6-lightest-surface));
+  --color-border-accent6-lightest: rgba(var(--ax-sys-color-border-accent6-lightest-surface));
+  --color-accent6-lighter: rgba(var(--ax-sys-color-accent6-lighter-surface));
+  --color-on-accent6-lighter: rgba(var(--ax-sys-color-on-accent6-lighter-surface));
+  --color-border-accent6-lighter: rgba(var(--ax-sys-color-border-accent6-lighter-surface));
+  --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
+  --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
+  --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
+  --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
+  --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
+  --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
+  --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
+  --color-on-accent6-dark: rgba(var(--ax-sys-color-on-accent6-dark-surface));
+  --color-border-accent6-dark: rgba(var(--ax-sys-color-border-accent6-dark-surface));
+  --color-accent6-darker: rgba(var(--ax-sys-color-accent6-darker-surface));
+  --color-on-accent6-darker: rgba(var(--ax-sys-color-on-accent6-darker-surface));
+  --color-border-accent6-darker: rgba(var(--ax-sys-color-border-accent6-darker-surface));
+  --color-accent6-darkest: rgba(var(--ax-sys-color-accent6-darkest-surface));
+  --color-on-accent6-darkest: rgba(var(--ax-sys-color-on-accent6-darkest-surface));
+  --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
+  /* Accent7 Surfaces */
+  --color-accent7-50: rgba(var(--ax-sys-color-accent7-50));
+  --color-accent7-100: rgba(var(--ax-sys-color-accent7-100));
+  --color-accent7-200: rgba(var(--ax-sys-color-accent7-200));
+  --color-accent7-300: rgba(var(--ax-sys-color-accent7-300));
+  --color-accent7-400: rgba(var(--ax-sys-color-accent7-400));
+  --color-accent7-500: rgba(var(--ax-sys-color-accent7-500));
+  --color-accent7-600: rgba(var(--ax-sys-color-accent7-600));
+  --color-accent7-700: rgba(var(--ax-sys-color-accent7-700));
+  --color-accent7-800: rgba(var(--ax-sys-color-accent7-800));
+  --color-accent7-900: rgba(var(--ax-sys-color-accent7-900));
+  --color-accent7-950: rgba(var(--ax-sys-color-accent7-950));
+
+  --color-accent7-lightest: rgba(var(--ax-sys-color-accent7-lightest-surface));
+  --color-on-accent7-lightest: rgba(var(--ax-sys-color-on-accent7-lightest-surface));
+  --color-border-accent7-lightest: rgba(var(--ax-sys-color-border-accent7-lightest-surface));
+  --color-accent7-lighter: rgba(var(--ax-sys-color-accent7-lighter-surface));
+  --color-on-accent7-lighter: rgba(var(--ax-sys-color-on-accent7-lighter-surface));
+  --color-border-accent7-lighter: rgba(var(--ax-sys-color-border-accent7-lighter-surface));
+  --color-accent7-light: rgba(var(--ax-sys-color-accent7-light-surface));
+  --color-on-accent7-light: rgba(var(--ax-sys-color-on-accent7-light-surface));
+  --color-border-accent7-light: rgba(var(--ax-sys-color-border-accent7-light-surface));
+  --color-accent7: rgba(var(--ax-sys-color-accent7-surface));
+  --color-on-accent7: rgba(var(--ax-sys-color-on-accent7-surface));
+  --color-border-accent7: rgba(var(--ax-sys-color-border-accent7-surface));
+  --color-accent7-dark: rgba(var(--ax-sys-color-accent7-dark-surface));
+  --color-on-accent7-dark: rgba(var(--ax-sys-color-on-accent7-dark-surface));
+  --color-border-accent7-dark: rgba(var(--ax-sys-color-border-accent7-dark-surface));
+  --color-accent7-darker: rgba(var(--ax-sys-color-accent7-darker-surface));
+  --color-on-accent7-darker: rgba(var(--ax-sys-color-on-accent7-darker-surface));
+  --color-border-accent7-darker: rgba(var(--ax-sys-color-border-accent7-darker-surface));
+  --color-accent7-darkest: rgba(var(--ax-sys-color-accent7-darkest-surface));
+  --color-on-accent7-darkest: rgba(var(--ax-sys-color-on-accent7-darkest-surface));
+  --color-border-accent7-darkest: rgba(var(--ax-sys-color-border-accent7-darkest-surface));
+}
+
+@utility lightest-surface {
+  background-color: var(--color-lightest);
+  color: var(--color-on-lightest);
+  border-color: var(--color-border-lightest);
+}
+
+@utility lighter-surface {
+  background-color: var(--color-lighter);
+  color: var(--color-on-lighter);
+  border-color: var(--color-border-lighter);
+}
+
+@utility light-surface {
+  background-color: var(--color-light);
+  color: var(--color-on-light);
+  border-color: var(--color-border-light);
+}
+
+@utility surface {
+  background-color: var(--color-surface);
+  color: var(--color-on-surface);
+  border-color: var(--color-border-surface);
+}
+
+@utility dark-surface {
+  background-color: var(--color-dark);
+  color: var(--color-on-dark);
+  border-color: var(--color-border-dark);
+}
+
+@utility darker-surface {
+  background-color: var(--color-darker);
+  color: var(--color-on-darker);
+  border-color: var(--color-border-darker);
+}
+
+@utility darkest-surface {
+  background-color: var(--color-darkest);
+  color: var(--color-on-darkest);
+  border-color: var(--color-border-darkest);
+}
+
+@utility border-lightest-surface {
+  border-color: var(--color-border-lightest);
+}
+
+@utility border-lighter-surface {
+  border-color: var(--color-border-lighter);
+}
+
+@utility border-light-surface {
+  border-color: var(--color-border-light);
+}
+
+@utility border-surface {
+  border-color: var(--color-border-surface);
+}
+
+@utility border-dark-surface {
+  border-color: var(--color-border-dark);
+}
+
+@utility border-darker-surface {
+  border-color: var(--color-border-darker);
+}
+
+@utility border-darkest-surface {
+  border-color: var(--color-border-darkest);
+}
+
+/* Primary Surfaces */
+
+@utility primary-lightest-surface {
+  background-color: var(--color-primary-lightest);
+  color: var(--color-on-primary-lightest);
+  border-color: var(--color-border-primary-lightest);
+}
+
+@utility primary-lighter-surface {
+  background-color: var(--color-primary-lighter);
+  color: var(--color-on-primary-lighter);
+  border-color: var(--color-border-primary-lighter);
+}
+
+@utility primary-light-surface {
+  background-color: var(--color-primary-light);
+  color: var(--color-on-primary-light);
+  border-color: var(--color-border-primary-light);
+}
+
+@utility primary-surface {
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  border-color: var(--color-border-primary);
+}
+
+@utility primary-dark-surface {
+  background-color: var(--color-primary-dark);
+  color: var(--color-on-primary-dark);
+  border-color: var(--color-border-primary-dark);
+}
+
+@utility primary-darker-surface {
+  background-color: var(--color-primary-darker);
+  color: var(--color-on-primary-darker);
+  border-color: var(--color-border-primary-darker);
+}
+
+@utility primary-darkest-surface {
+  background-color: var(--color-primary-darkest);
+  color: var(--color-on-primary-darkest);
+  border-color: var(--color-border-primary-darkest);
+}
+
+@utility border-primary-lightest-surface {
+  border-color: var(--color-border-primary-lightest);
+}
+
+@utility border-primary-lighter-surface {
+  border-color: var(--color-border-primary-lighter);
+}
+
+@utility border-primary-light-surface {
+  border-color: var(--color-border-primary-light);
+}
+
+@utility border-primary-surface {
+  border-color: var(--color-border-primary);
+}
+
+@utility border-primary-dark-surface {
+  border-color: var(--color-border-primary-dark);
+}
+
+@utility border-primary-darker-surface {
+  border-color: var(--color-border-primary-darker);
+}
+
+@utility border-primary-darkest-surface {
+  border-color: var(--color-border-primary-darkest);
+}
+
+@utility ax-primary {
+  --ax-comp-bg-lightest: var(--color-primary-lightest);
+  --ax-comp-text-lightest: var(--color-on-primary-lightest);
+  --ax-comp-border-lightest: var(--color-border-primary-lightest);
+  --ax-comp-bg-lighter: var(--color-primary-lighter);
+  --ax-comp-text-lighter: var(--color-on-primary-lighter);
+  --ax-comp-border-lighter: var(--color-border-primary-lighter);
+  --ax-comp-bg-light: var(--color-primary-light);
+  --ax-comp-text-light: var(--color-on-primary-light);
+  --ax-comp-border-light: var(--color-border-primary-light);
+  --ax-comp-bg: var(--color-primary);
+  --ax-comp-text: var(--color-on-primary);
+  --ax-comp-border: var(--color-border-primary);
+  --ax-comp-bg-dark: var(--color-primary-dark);
+  --ax-comp-text-dark: var(--color-on-primary-dark);
+  --ax-comp-border-dark: var(--color-border-primary-dark);
+  --ax-comp-bg-darker: var(--color-primary-darker);
+  --ax-comp-text-darker: var(--color-on-primary-darker);
+  --ax-comp-border-darker: var(--color-border-primary-darker);
+  --ax-comp-bg-darkest: var(--color-primary-darkest);
+  --ax-comp-text-darkest: var(--color-on-primary-darkest);
+  --ax-comp-border-darkest: var(--color-border-primary-darkest);
+}
+
+/* Secondary Surfaces */
+
+@utility secondary-lightest-surface {
+  background-color: var(--color-secondary-lightest);
+  color: var(--color-on-secondary-lightest);
+  border-color: var(--color-border-secondary-lightest);
+}
+
+@utility secondary-lighter-surface {
+  background-color: var(--color-secondary-lighter);
+  color: var(--color-on-secondary-lighter);
+  border-color: var(--color-border-secondary-lighter);
+}
+
+@utility secondary-light-surface {
+  background-color: var(--color-secondary-light);
+  color: var(--color-on-secondary-light);
+  border-color: var(--color-border-secondary-light);
+}
+
+@utility secondary-surface {
+  background-color: var(--color-secondary);
+  color: var(--color-on-secondary);
+  border-color: var(--color-border-secondary);
+}
+
+@utility secondary-dark-surface {
+  background-color: var(--color-secondary-dark);
+  color: var(--color-on-secondary-dark);
+  border-color: var(--color-border-secondary-dark);
+}
+
+@utility secondary-darker-surface {
+  background-color: var(--color-secondary-darker);
+  color: var(--color-on-secondary-darker);
+  border-color: var(--color-border-secondary-darker);
+}
+
+@utility secondary-darkest-surface {
+  background-color: var(--color-secondary-darkest);
+  color: var(--color-on-secondary-darkest);
+  border-color: var(--color-border-secondary-darkest);
+}
+
+@utility border-secondary-lightest-surface {
+  border-color: var(--color-border-secondary-lightest);
+}
+
+@utility border-secondary-lighter-surface {
+  border-color: var(--color-border-secondary-lighter);
+}
+
+@utility border-secondary-light-surface {
+  border-color: var(--color-border-secondary-light);
+}
+
+@utility border-secondary-surface {
+  border-color: var(--color-border-secondary);
+}
+
+@utility border-secondary-dark-surface {
+  border-color: var(--color-border-secondary-dark);
+}
+
+@utility border-secondary-darker-surface {
+  border-color: var(--color-border-secondary-darker);
+}
+
+@utility border-secondary-darkest-surface {
+  border-color: var(--color-border-secondary-darkest);
+}
+
+@utility ax-secondary {
+  --ax-comp-bg-lightest: var(--color-secondary-lightest);
+  --ax-comp-text-lightest: var(--color-on-secondary-lightest);
+  --ax-comp-border-lightest: var(--color-border-secondary-lightest);
+  --ax-comp-bg-lighter: var(--color-secondary-lighter);
+  --ax-comp-text-lighter: var(--color-on-secondary-lighter);
+  --ax-comp-border-lighter: var(--color-border-secondary-lighter);
+  --ax-comp-bg-light: var(--color-secondary-light);
+  --ax-comp-text-light: var(--color-on-secondary-light);
+  --ax-comp-border-light: var(--color-border-secondary-light);
+  --ax-comp-bg: var(--color-secondary);
+  --ax-comp-text: var(--color-on-secondary);
+  --ax-comp-border: var(--color-border-secondary);
+  --ax-comp-bg-dark: var(--color-secondary-dark);
+  --ax-comp-text-dark: var(--color-on-secondary-dark);
+  --ax-comp-border-dark: var(--color-border-secondary-dark);
+  --ax-comp-bg-darker: var(--color-secondary-darker);
+  --ax-comp-text-darker: var(--color-on-secondary-darker);
+  --ax-comp-border-darker: var(--color-border-secondary-darker);
+  --ax-comp-bg-darkest: var(--color-secondary-darkest);
+  --ax-comp-text-darkest: var(--color-on-secondary-darkest);
+  --ax-comp-border-darkest: var(--color-border-secondary-darkest);
+}
+
+/* Success Surfaces */
+
+@utility success-lightest-surface {
+  background-color: var(--color-success-lightest);
+  color: var(--color-on-success-lightest);
+  border-color: var(--color-border-success-lightest);
+}
+
+@utility success-lighter-surface {
+  background-color: var(--color-success-lighter);
+  color: var(--color-on-success-lighter);
+  border-color: var(--color-border-success-lighter);
+}
+
+@utility success-light-surface {
+  background-color: var(--color-success-light);
+  color: var(--color-on-success-light);
+  border-color: var(--color-border-success-light);
+}
+
+@utility success-surface {
+  background-color: var(--color-success);
+  color: var(--color-on-success);
+  border-color: var(--color-border-success);
+}
+
+@utility success-dark-surface {
+  background-color: var(--color-success-dark);
+  color: var(--color-on-success-dark);
+  border-color: var(--color-border-success-dark);
+}
+
+@utility success-darker-surface {
+  background-color: var(--color-success-darker);
+  color: var(--color-on-success-darker);
+  border-color: var(--color-border-success-darker);
+}
+
+@utility success-darkest-surface {
+  background-color: var(--color-success-darkest);
+  color: var(--color-on-success-darkest);
+  border-color: var(--color-border-success-darkest);
+}
+
+@utility border-success-lightest-surface {
+  border-color: var(--color-border-success-lightest);
+}
+
+@utility border-success-lighter-surface {
+  border-color: var(--color-border-success-lighter);
+}
+
+@utility border-success-light-surface {
+  border-color: var(--color-border-success-light);
+}
+
+@utility border-success-surface {
+  border-color: var(--color-border-success);
+}
+
+@utility border-success-dark-surface {
+  border-color: var(--color-border-success-dark);
+}
+
+@utility border-success-darker-surface {
+  border-color: var(--color-border-success-darker);
+}
+
+@utility border-success-darkest-surface {
+  border-color: var(--color-border-success-darkest);
+}
+
+@utility ax-success {
+  --ax-comp-bg-lightest: var(--color-success-lightest);
+  --ax-comp-text-lightest: var(--color-on-success-lightest);
+  --ax-comp-border-lightest: var(--color-border-success-lightest);
+  --ax-comp-bg-lighter: var(--color-success-lighter);
+  --ax-comp-text-lighter: var(--color-on-success-lighter);
+  --ax-comp-border-lighter: var(--color-border-success-lighter);
+  --ax-comp-bg-light: var(--color-success-light);
+  --ax-comp-text-light: var(--color-on-success-light);
+  --ax-comp-border-light: var(--color-border-success-light);
+  --ax-comp-bg: var(--color-success);
+  --ax-comp-text: var(--color-on-success);
+  --ax-comp-border: var(--color-border-success);
+  --ax-comp-bg-dark: var(--color-success-dark);
+  --ax-comp-text-dark: var(--color-on-success-dark);
+  --ax-comp-border-dark: var(--color-border-success-dark);
+  --ax-comp-bg-darker: var(--color-success-darker);
+  --ax-comp-text-darker: var(--color-on-success-darker);
+  --ax-comp-border-darker: var(--color-border-success-darker);
+  --ax-comp-bg-darkest: var(--color-success-darkest);
+  --ax-comp-text-darkest: var(--color-on-success-darkest);
+  --ax-comp-border-darkest: var(--color-border-success-darkest);
+}
+
+/* Warning Surfaces */
+
+@utility warning-lightest-surface {
+  background-color: var(--color-warning-lightest);
+  color: var(--color-on-warning-lightest);
+  border-color: var(--color-border-warning-lightest);
+}
+
+@utility warning-lighter-surface {
+  background-color: var(--color-warning-lighter);
+  color: var(--color-on-warning-lighter);
+  border-color: var(--color-border-warning-lighter);
+}
+
+@utility warning-light-surface {
+  background-color: var(--color-warning-light);
+  color: var(--color-on-warning-light);
+  border-color: var(--color-border-warning-light);
+}
+
+@utility warning-surface {
+  background-color: var(--color-warning);
+  color: var(--color-on-warning);
+  border-color: var(--color-border-warning);
+}
+
+@utility warning-dark-surface {
+  background-color: var(--color-warning-dark);
+  color: var(--color-on-warning-dark);
+  border-color: var(--color-border-warning-dark);
+}
+
+@utility warning-darker-surface {
+  background-color: var(--color-warning-darker);
+  color: var(--color-on-warning-darker);
+  border-color: var(--color-border-warning-darker);
+}
+
+@utility warning-darkest-surface {
+  background-color: var(--color-warning-darkest);
+  color: var(--color-on-warning-darkest);
+  border-color: var(--color-border-warning-darkest);
+}
+
+@utility border-warning-lightest-surface {
+  border-color: var(--color-border-warning-lightest);
+}
+
+@utility border-warning-lighter-surface {
+  border-color: var(--color-border-warning-lighter);
+}
+
+@utility border-warning-light-surface {
+  border-color: var(--color-border-warning-light);
+}
+
+@utility border-warning-surface {
+  border-color: var(--color-border-warning);
+}
+
+@utility border-warning-dark-surface {
+  border-color: var(--color-border-warning-dark);
+}
+
+@utility border-warning-darker-surface {
+  border-color: var(--color-border-warning-darker);
+}
+
+@utility border-warning-darkest-surface {
+  border-color: var(--color-border-warning-darkest);
+}
+
+@utility ax-warning {
+  --ax-comp-bg-lightest: var(--color-warning-lightest);
+  --ax-comp-text-lightest: var(--color-on-warning-lightest);
+  --ax-comp-border-lightest: var(--color-border-warning-lightest);
+  --ax-comp-bg-lighter: var(--color-warning-lighter);
+  --ax-comp-text-lighter: var(--color-on-warning-lighter);
+  --ax-comp-border-lighter: var(--color-border-warning-lighter);
+  --ax-comp-bg-light: var(--color-warning-light);
+  --ax-comp-text-light: var(--color-on-warning-light);
+  --ax-comp-border-light: var(--color-border-warning-light);
+  --ax-comp-bg: var(--color-warning);
+  --ax-comp-text: var(--color-on-warning);
+  --ax-comp-border: var(--color-border-warning);
+  --ax-comp-bg-dark: var(--color-warning-dark);
+  --ax-comp-text-dark: var(--color-on-warning-dark);
+  --ax-comp-border-dark: var(--color-border-warning-dark);
+  --ax-comp-bg-darker: var(--color-warning-darker);
+  --ax-comp-text-darker: var(--color-on-warning-darker);
+  --ax-comp-border-darker: var(--color-border-warning-darker);
+  --ax-comp-bg-darkest: var(--color-warning-darkest);
+  --ax-comp-text-darkest: var(--color-on-warning-darkest);
+  --ax-comp-border-darkest: var(--color-border-warning-darkest);
+}
+
+/* Danger Surfaces */
+
+@utility danger-lightest-surface {
+  background-color: var(--color-danger-lightest);
+  color: var(--color-on-danger-lightest);
+  border-color: var(--color-border-danger-lightest);
+}
+
+@utility danger-lighter-surface {
+  background-color: var(--color-danger-lighter);
+  color: var(--color-on-danger-lighter);
+  border-color: var(--color-border-danger-lighter);
+}
+
+@utility danger-light-surface {
+  background-color: var(--color-danger-light);
+  color: var(--color-on-danger-light);
+  border-color: var(--color-border-danger-light);
+}
+
+@utility danger-surface {
+  background-color: var(--color-danger);
+  color: var(--color-on-danger);
+  border-color: var(--color-border-danger);
+}
+
+@utility danger-dark-surface {
+  background-color: var(--color-danger-dark);
+  color: var(--color-on-danger-dark);
+  border-color: var(--color-border-danger-dark);
+}
+
+@utility danger-darker-surface {
+  background-color: var(--color-danger-darker);
+  color: var(--color-on-danger-darker);
+  border-color: var(--color-border-danger-darker);
+}
+
+@utility danger-darkest-surface {
+  background-color: var(--color-danger-darkest);
+  color: var(--color-on-danger-darkest);
+  border-color: var(--color-border-danger-darkest);
+}
+
+@utility border-danger-lightest-surface {
+  border-color: var(--color-border-danger-lightest);
+}
+
+@utility border-danger-lighter-surface {
+  border-color: var(--color-border-danger-lighter);
+}
+
+@utility border-danger-light-surface {
+  border-color: var(--color-border-danger-light);
+}
+
+@utility border-danger-surface {
+  border-color: var(--color-border-danger);
+}
+
+@utility border-danger-dark-surface {
+  border-color: var(--color-border-danger-dark);
+}
+
+@utility border-danger-darker-surface {
+  border-color: var(--color-border-danger-darker);
+}
+
+@utility border-danger-darkest-surface {
+  border-color: var(--color-border-danger-darkest);
+}
+
+@utility ax-danger {
+  --ax-comp-bg-lightest: var(--color-danger-lightest);
+  --ax-comp-text-lightest: var(--color-on-danger-lightest);
+  --ax-comp-border-lightest: var(--color-border-danger-lightest);
+  --ax-comp-bg-lighter: var(--color-danger-lighter);
+  --ax-comp-text-lighter: var(--color-on-danger-lighter);
+  --ax-comp-border-lighter: var(--color-border-danger-lighter);
+  --ax-comp-bg-light: var(--color-danger-light);
+  --ax-comp-text-light: var(--color-on-danger-light);
+  --ax-comp-border-light: var(--color-border-danger-light);
+  --ax-comp-bg: var(--color-danger);
+  --ax-comp-text: var(--color-on-danger);
+  --ax-comp-border: var(--color-border-danger);
+  --ax-comp-bg-dark: var(--color-danger-dark);
+  --ax-comp-text-dark: var(--color-on-danger-dark);
+  --ax-comp-border-dark: var(--color-border-danger-dark);
+  --ax-comp-bg-darker: var(--color-danger-darker);
+  --ax-comp-text-darker: var(--color-on-danger-darker);
+  --ax-comp-border-darker: var(--color-border-danger-darker);
+  --ax-comp-bg-darkest: var(--color-danger-darkest);
+  --ax-comp-text-darkest: var(--color-on-danger-darkest);
+  --ax-comp-border-darkest: var(--color-border-danger-darkest);
+}
+
+/* Accent Surfaces */
+
+@utility accent-lightest-surface {
+  background-color: var(--color-accent-lightest);
+  color: var(--color-on-accent-lightest);
+  border-color: var(--color-border-accent-lightest);
+}
+
+@utility accent-lighter-surface {
+  background-color: var(--color-accent-lighter);
+  color: var(--color-on-accent-lighter);
+  border-color: var(--color-border-accent-lighter);
+}
+
+@utility accent-light-surface {
+  background-color: var(--color-accent-light);
+  color: var(--color-on-accent-light);
+  border-color: var(--color-border-accent-light);
+}
+
+@utility accent-surface {
+  background-color: var(--color-accent);
+  color: var(--color-on-accent);
+  border-color: var(--color-border-accent);
+}
+
+@utility accent-dark-surface {
+  background-color: var(--color-accent-dark);
+  color: var(--color-on-accent-dark);
+  border-color: var(--color-border-accent-dark);
+}
+
+@utility accent-darker-surface {
+  background-color: var(--color-accent-darker);
+  color: var(--color-on-accent-darker);
+  border-color: var(--color-border-accent-darker);
+}
+
+@utility accent-darkest-surface {
+  background-color: var(--color-accent-darkest);
+  color: var(--color-on-accent-darkest);
+  border-color: var(--color-border-accent-darkest);
+}
+
+@utility border-accent-lightest-surface {
+  border-color: var(--color-border-accent-lightest);
+}
+
+@utility border-accent-lighter-surface {
+  border-color: var(--color-border-accent-lighter);
+}
+
+@utility border-accent-light-surface {
+  border-color: var(--color-border-accent-light);
+}
+
+@utility border-accent-surface {
+  border-color: var(--color-border-accent);
+}
+
+@utility border-accent-dark-surface {
+  border-color: var(--color-border-accent-dark);
+}
+
+@utility border-accent-darker-surface {
+  border-color: var(--color-border-accent-darker);
+}
+
+@utility border-accent-darkest-surface {
+  border-color: var(--color-border-accent-darkest);
+}
+
+@utility ax-accent {
+  --ax-comp-bg-lightest: var(--color-accent-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent-lightest);
+  --ax-comp-bg-lighter: var(--color-accent-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent-lighter);
+  --ax-comp-bg-light: var(--color-accent-light);
+  --ax-comp-text-light: var(--color-on-accent-light);
+  --ax-comp-border-light: var(--color-border-accent-light);
+  --ax-comp-bg: var(--color-accent);
+  --ax-comp-text: var(--color-on-accent);
+  --ax-comp-border: var(--color-border-accent);
+  --ax-comp-bg-dark: var(--color-accent-dark);
+  --ax-comp-text-dark: var(--color-on-accent-dark);
+  --ax-comp-border-dark: var(--color-border-accent-dark);
+  --ax-comp-bg-darker: var(--color-accent-darker);
+  --ax-comp-text-darker: var(--color-on-accent-darker);
+  --ax-comp-border-darker: var(--color-border-accent-darker);
+  --ax-comp-bg-darkest: var(--color-accent-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent-darkest);
+}
+
+/* Accent2 Surfaces */
+
+@utility accent2-lightest-surface {
+  background-color: var(--color-accent2-lightest);
+  color: var(--color-on-accent2-lightest);
+  border-color: var(--color-border-accent2-lightest);
+}
+
+@utility accent2-lighter-surface {
+  background-color: var(--color-accent2-lighter);
+  color: var(--color-on-accent2-lighter);
+  border-color: var(--color-border-accent2-lighter);
+}
+
+@utility accent2-light-surface {
+  background-color: var(--color-accent2-light);
+  color: var(--color-on-accent2-light);
+  border-color: var(--color-border-accent2-light);
+}
+
+@utility accent2-surface {
+  background-color: var(--color-accent2);
+  color: var(--color-on-accent2);
+  border-color: var(--color-border-accent2);
+}
+
+@utility accent2-dark-surface {
+  background-color: var(--color-accent2-dark);
+  color: var(--color-on-accent2-dark);
+  border-color: var(--color-border-accent2-dark);
+}
+
+@utility accent2-darker-surface {
+  background-color: var(--color-accent2-darker);
+  color: var(--color-on-accent2-darker);
+  border-color: var(--color-border-accent2-darker);
+}
+
+@utility accent2-darkest-surface {
+  background-color: var(--color-accent2-darkest);
+  color: var(--color-on-accent2-darkest);
+  border-color: var(--color-border-accent2-darkest);
+}
+
+@utility border-accent2-lightest-surface {
+  border-color: var(--color-border-accent2-lightest);
+}
+
+@utility border-accent2-lighter-surface {
+  border-color: var(--color-border-accent2-lighter);
+}
+
+@utility border-accent2-light-surface {
+  border-color: var(--color-border-accent2-light);
+}
+
+@utility border-accent2-surface {
+  border-color: var(--color-border-accent2);
+}
+
+@utility border-accent2-dark-surface {
+  border-color: var(--color-border-accent2-dark);
+}
+
+@utility border-accent2-darker-surface {
+  border-color: var(--color-border-accent2-darker);
+}
+
+@utility border-accent2-darkest-surface {
+  border-color: var(--color-border-accent2-darkest);
+}
+
+@utility ax-accent2 {
+  --ax-comp-bg-lightest: var(--color-accent2-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent2-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent2-lightest);
+  --ax-comp-bg-lighter: var(--color-accent2-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent2-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent2-lighter);
+  --ax-comp-bg-light: var(--color-accent2-light);
+  --ax-comp-text-light: var(--color-on-accent2-light);
+  --ax-comp-border-light: var(--color-border-accent2-light);
+  --ax-comp-bg: var(--color-accent2);
+  --ax-comp-text: var(--color-on-accent2);
+  --ax-comp-border: var(--color-border-accent2);
+  --ax-comp-bg-dark: var(--color-accent2-dark);
+  --ax-comp-text-dark: var(--color-on-accent2-dark);
+  --ax-comp-border-dark: var(--color-border-accent2-dark);
+  --ax-comp-bg-darker: var(--color-accent2-darker);
+  --ax-comp-text-darker: var(--color-on-accent2-darker);
+  --ax-comp-border-darker: var(--color-border-accent2-darker);
+  --ax-comp-bg-darkest: var(--color-accent2-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent2-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent2-darkest);
+}
+
+/* Accent3 Surfaces */
+
+@utility accent3-lightest-surface {
+  background-color: var(--color-accent3-lightest);
+  color: var(--color-on-accent3-lightest);
+  border-color: var(--color-border-accent3-lightest);
+}
+
+@utility accent3-lighter-surface {
+  background-color: var(--color-accent3-lighter);
+  color: var(--color-on-accent3-lighter);
+  border-color: var(--color-border-accent3-lighter);
+}
+
+@utility accent3-light-surface {
+  background-color: var(--color-accent3-light);
+  color: var(--color-on-accent3-light);
+  border-color: var(--color-border-accent3-light);
+}
+
+@utility accent3-surface {
+  background-color: var(--color-accent3);
+  color: var(--color-on-accent3);
+  border-color: var(--color-border-accent3);
+}
+
+@utility accent3-dark-surface {
+  background-color: var(--color-accent3-dark);
+  color: var(--color-on-accent3-dark);
+  border-color: var(--color-border-accent3-dark);
+}
+
+@utility accent3-darker-surface {
+  background-color: var(--color-accent3-darker);
+  color: var(--color-on-accent3-darker);
+  border-color: var(--color-border-accent3-darker);
+}
+
+@utility accent3-darkest-surface {
+  background-color: var(--color-accent3-darkest);
+  color: var(--color-on-accent3-darkest);
+  border-color: var(--color-border-accent3-darkest);
+}
+
+@utility border-accent3-lightest-surface {
+  border-color: var(--color-border-accent3-lightest);
+}
+
+@utility border-accent3-lighter-surface {
+  border-color: var(--color-border-accent3-lighter);
+}
+
+@utility border-accent3-light-surface {
+  border-color: var(--color-border-accent3-light);
+}
+
+@utility border-accent3-surface {
+  border-color: var(--color-border-accent3);
+}
+
+@utility border-accent3-dark-surface {
+  border-color: var(--color-border-accent3-dark);
+}
+
+@utility border-accent3-darker-surface {
+  border-color: var(--color-border-accent3-darker);
+}
+
+@utility border-accent3-darkest-surface {
+  border-color: var(--color-border-accent3-darkest);
+}
+
+@utility ax-accent3 {
+  --ax-comp-bg-lightest: var(--color-accent3-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent3-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent3-lightest);
+  --ax-comp-bg-lighter: var(--color-accent3-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent3-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent3-lighter);
+  --ax-comp-bg-light: var(--color-accent3-light);
+  --ax-comp-text-light: var(--color-on-accent3-light);
+  --ax-comp-border-light: var(--color-border-accent3-light);
+  --ax-comp-bg: var(--color-accent3);
+  --ax-comp-text: var(--color-on-accent3);
+  --ax-comp-border: var(--color-border-accent3);
+  --ax-comp-bg-dark: var(--color-accent3-dark);
+  --ax-comp-text-dark: var(--color-on-accent3-dark);
+  --ax-comp-border-dark: var(--color-border-accent3-dark);
+  --ax-comp-bg-darker: var(--color-accent3-darker);
+  --ax-comp-text-darker: var(--color-on-accent3-darker);
+  --ax-comp-border-darker: var(--color-border-accent3-darker);
+  --ax-comp-bg-darkest: var(--color-accent3-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent3-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent3-darkest);
+}
+
+/* Accent4 Surfaces */
+
+@utility accent4-lightest-surface {
+  background-color: var(--color-accent4-lightest);
+  color: var(--color-on-accent4-lightest);
+  border-color: var(--color-border-accent4-lightest);
+}
+
+@utility accent4-lighter-surface {
+  background-color: var(--color-accent4-lighter);
+  color: var(--color-on-accent4-lighter);
+  border-color: var(--color-border-accent4-lighter);
+}
+
+@utility accent4-light-surface {
+  background-color: var(--color-accent4-light);
+  color: var(--color-on-accent4-light);
+  border-color: var(--color-border-accent4-light);
+}
+
+@utility accent4-surface {
+  background-color: var(--color-accent4);
+  color: var(--color-on-accent4);
+  border-color: var(--color-border-accent4);
+}
+
+@utility accent4-dark-surface {
+  background-color: var(--color-accent4-dark);
+  color: var(--color-on-accent4-dark);
+  border-color: var(--color-border-accent4-dark);
+}
+
+@utility accent4-darker-surface {
+  background-color: var(--color-accent4-darker);
+  color: var(--color-on-accent4-darker);
+  border-color: var(--color-border-accent4-darker);
+}
+
+@utility accent4-darkest-surface {
+  background-color: var(--color-accent4-darkest);
+  color: var(--color-on-accent4-darkest);
+  border-color: var(--color-border-accent4-darkest);
+}
+
+@utility border-accent4-lightest-surface {
+  border-color: var(--color-border-accent4-lightest);
+}
+
+@utility border-accent4-lighter-surface {
+  border-color: var(--color-border-accent4-lighter);
+}
+
+@utility border-accent4-light-surface {
+  border-color: var(--color-border-accent4-light);
+}
+
+@utility border-accent4-surface {
+  border-color: var(--color-border-accent4);
+}
+
+@utility border-accent4-dark-surface {
+  border-color: var(--color-border-accent4-dark);
+}
+
+@utility border-accent4-darker-surface {
+  border-color: var(--color-border-accent4-darker);
+}
+
+@utility border-accent4-darkest-surface {
+  border-color: var(--color-border-accent4-darkest);
+}
+
+@utility ax-accent4 {
+  --ax-comp-bg-lightest: var(--color-accent4-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent4-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent4-lightest);
+  --ax-comp-bg-lighter: var(--color-accent4-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent4-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent4-lighter);
+  --ax-comp-bg-light: var(--color-accent4-light);
+  --ax-comp-text-light: var(--color-on-accent4-light);
+  --ax-comp-border-light: var(--color-border-accent4-light);
+  --ax-comp-bg: var(--color-accent4);
+  --ax-comp-text: var(--color-on-accent4);
+  --ax-comp-border: var(--color-border-accent4);
+  --ax-comp-bg-dark: var(--color-accent4-dark);
+  --ax-comp-text-dark: var(--color-on-accent4-dark);
+  --ax-comp-border-dark: var(--color-border-accent4-dark);
+  --ax-comp-bg-darker: var(--color-accent4-darker);
+  --ax-comp-text-darker: var(--color-on-accent4-darker);
+  --ax-comp-border-darker: var(--color-border-accent4-darker);
+  --ax-comp-bg-darkest: var(--color-accent4-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent4-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent4-darkest);
+}
+
+/* Accent5 Surfaces */
+
+@utility accent5-lightest-surface {
+  background-color: var(--color-accent5-lightest);
+  color: var(--color-on-accent5-lightest);
+  border-color: var(--color-border-accent5-lightest);
+}
+
+@utility accent5-lighter-surface {
+  background-color: var(--color-accent5-lighter);
+  color: var(--color-on-accent5-lighter);
+  border-color: var(--color-border-accent5-lighter);
+}
+
+@utility accent5-light-surface {
+  background-color: var(--color-accent5-light);
+  color: var(--color-on-accent5-light);
+  border-color: var(--color-border-accent5-light);
+}
+
+@utility accent5-surface {
+  background-color: var(--color-accent5);
+  color: var(--color-on-accent5);
+  border-color: var(--color-border-accent5);
+}
+
+@utility accent5-dark-surface {
+  background-color: var(--color-accent5-dark);
+  color: var(--color-on-accent5-dark);
+  border-color: var(--color-border-accent5-dark);
+}
+
+@utility accent5-darker-surface {
+  background-color: var(--color-accent5-darker);
+  color: var(--color-on-accent5-darker);
+  border-color: var(--color-border-accent5-darker);
+}
+
+@utility accent5-darkest-surface {
+  background-color: var(--color-accent5-darkest);
+  color: var(--color-on-accent5-darkest);
+  border-color: var(--color-border-accent5-darkest);
+}
+
+@utility border-accent5-lightest-surface {
+  border-color: var(--color-border-accent5-lightest);
+}
+
+@utility border-accent5-lighter-surface {
+  border-color: var(--color-border-accent5-lighter);
+}
+
+@utility border-accent5-light-surface {
+  border-color: var(--color-border-accent5-light);
+}
+
+@utility border-accent5-surface {
+  border-color: var(--color-border-accent5);
+}
+
+@utility border-accent5-dark-surface {
+  border-color: var(--color-border-accent5-dark);
+}
+
+@utility border-accent5-darker-surface {
+  border-color: var(--color-border-accent5-darker);
+}
+
+@utility border-accent5-darkest-surface {
+  border-color: var(--color-border-accent5-darkest);
+}
+
+@utility ax-accent5 {
+  --ax-comp-bg-lightest: var(--color-accent5-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent5-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent5-lightest);
+  --ax-comp-bg-lighter: var(--color-accent5-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent5-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent5-lighter);
+  --ax-comp-bg-light: var(--color-accent5-light);
+  --ax-comp-text-light: var(--color-on-accent5-light);
+  --ax-comp-border-light: var(--color-border-accent5-light);
+  --ax-comp-bg: var(--color-accent5);
+  --ax-comp-text: var(--color-on-accent5);
+  --ax-comp-border: var(--color-border-accent5);
+  --ax-comp-bg-dark: var(--color-accent5-dark);
+  --ax-comp-text-dark: var(--color-on-accent5-dark);
+  --ax-comp-border-dark: var(--color-border-accent5-dark);
+  --ax-comp-bg-darker: var(--color-accent5-darker);
+  --ax-comp-text-darker: var(--color-on-accent5-darker);
+  --ax-comp-border-darker: var(--color-border-accent5-darker);
+  --ax-comp-bg-darkest: var(--color-accent5-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent5-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent5-darkest);
+}
+
+/* Accent6 Surfaces */
+
+@utility accent6-lightest-surface {
+  background-color: var(--color-accent6-lightest);
+  color: var(--color-on-accent6-lightest);
+  border-color: var(--color-border-accent6-lightest);
+}
+
+@utility accent6-lighter-surface {
+  background-color: var(--color-accent6-lighter);
+  color: var(--color-on-accent6-lighter);
+  border-color: var(--color-border-accent6-lighter);
+}
+
+@utility accent6-light-surface {
+  background-color: var(--color-accent6-light);
+  color: var(--color-on-accent6-light);
+  border-color: var(--color-border-accent6-light);
+}
+
+@utility accent6-surface {
+  background-color: var(--color-accent6);
+  color: var(--color-on-accent6);
+  border-color: var(--color-border-accent6);
+}
+
+@utility accent6-dark-surface {
+  background-color: var(--color-accent6-dark);
+  color: var(--color-on-accent6-dark);
+  border-color: var(--color-border-accent6-dark);
+}
+
+@utility accent6-darker-surface {
+  background-color: var(--color-accent6-darker);
+  color: var(--color-on-accent6-darker);
+  border-color: var(--color-border-accent6-darker);
+}
+
+@utility accent6-darkest-surface {
+  background-color: var(--color-accent6-darkest);
+  color: var(--color-on-accent6-darkest);
+  border-color: var(--color-border-accent6-darkest);
+}
+
+@utility border-accent6-lightest-surface {
+  border-color: var(--color-border-accent6-lightest);
+}
+
+@utility border-accent6-lighter-surface {
+  border-color: var(--color-border-accent6-lighter);
+}
+
+@utility border-accent6-light-surface {
+  border-color: var(--color-border-accent6-light);
+}
+
+@utility border-accent6-surface {
+  border-color: var(--color-border-accent6);
+}
+
+@utility border-accent6-dark-surface {
+  border-color: var(--color-border-accent6-dark);
+}
+
+@utility border-accent6-darker-surface {
+  border-color: var(--color-border-accent6-darker);
+}
+
+@utility border-accent6-darkest-surface {
+  border-color: var(--color-border-accent6-darkest);
+}
+
+@utility ax-accent6 {
+  --ax-comp-bg-lightest: var(--color-accent6-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent6-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent6-lightest);
+  --ax-comp-bg-lighter: var(--color-accent6-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent6-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent6-lighter);
+  --ax-comp-bg-light: var(--color-accent6-light);
+  --ax-comp-text-light: var(--color-on-accent6-light);
+  --ax-comp-border-light: var(--color-border-accent6-light);
+  --ax-comp-bg: var(--color-accent6);
+  --ax-comp-text: var(--color-on-accent6);
+  --ax-comp-border: var(--color-border-accent6);
+  --ax-comp-bg-dark: var(--color-accent6-dark);
+  --ax-comp-text-dark: var(--color-on-accent6-dark);
+  --ax-comp-border-dark: var(--color-border-accent6-dark);
+  --ax-comp-bg-darker: var(--color-accent6-darker);
+  --ax-comp-text-darker: var(--color-on-accent6-darker);
+  --ax-comp-border-darker: var(--color-border-accent6-darker);
+  --ax-comp-bg-darkest: var(--color-accent6-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent6-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent6-darkest);
+}
+
+/* Accent7 Surfaces */
+
+@utility accent7-lightest-surface {
+  background-color: var(--color-accent7-lightest);
+  color: var(--color-on-accent7-lightest);
+  border-color: var(--color-border-accent7-lightest);
+}
+
+@utility accent7-lighter-surface {
+  background-color: var(--color-accent7-lighter);
+  color: var(--color-on-accent7-lighter);
+  border-color: var(--color-border-accent7-lighter);
+}
+
+@utility accent7-light-surface {
+  background-color: var(--color-accent7-light);
+  color: var(--color-on-accent7-light);
+  border-color: var(--color-border-accent7-light);
+}
+
+@utility accent7-surface {
+  background-color: var(--color-accent7);
+  color: var(--color-on-accent7);
+  border-color: var(--color-border-accent7);
+}
+
+@utility accent7-dark-surface {
+  background-color: var(--color-accent7-dark);
+  color: var(--color-on-accent7-dark);
+  border-color: var(--color-border-accent7-dark);
+}
+
+@utility accent7-darker-surface {
+  background-color: var(--color-accent7-darker);
+  color: var(--color-on-accent7-darker);
+  border-color: var(--color-border-accent7-darker);
+}
+
+@utility accent7-darkest-surface {
+  background-color: var(--color-accent7-darkest);
+  color: var(--color-on-accent7-darkest);
+  border-color: var(--color-border-accent7-darkest);
+}
+
+@utility border-accent7-lightest-surface {
+  border-color: var(--color-border-accent7-lightest);
+}
+
+@utility border-accent7-lighter-surface {
+  border-color: var(--color-border-accent7-lighter);
+}
+
+@utility border-accent7-light-surface {
+  border-color: var(--color-border-accent7-light);
+}
+
+@utility border-accent7-surface {
+  border-color: var(--color-border-accent7);
+}
+
+@utility border-accent7-dark-surface {
+  border-color: var(--color-border-accent7-dark);
+}
+
+@utility border-accent7-darker-surface {
+  border-color: var(--color-border-accent7-darker);
+}
+
+@utility border-accent7-darkest-surface {
+  border-color: var(--color-border-accent7-darkest);
+}
+
+@utility ax-accent7 {
+  --ax-comp-bg-lightest: var(--color-accent7-lightest);
+  --ax-comp-text-lightest: var(--color-on-accent7-lightest);
+  --ax-comp-border-lightest: var(--color-border-accent7-lightest);
+  --ax-comp-bg-lighter: var(--color-accent7-lighter);
+  --ax-comp-text-lighter: var(--color-on-accent7-lighter);
+  --ax-comp-border-lighter: var(--color-border-accent7-lighter);
+  --ax-comp-bg-light: var(--color-accent7-light);
+  --ax-comp-text-light: var(--color-on-accent7-light);
+  --ax-comp-border-light: var(--color-border-accent7-light);
+  --ax-comp-bg: var(--color-accent7);
+  --ax-comp-text: var(--color-on-accent7);
+  --ax-comp-border: var(--color-border-accent7);
+  --ax-comp-bg-dark: var(--color-accent7-dark);
+  --ax-comp-text-dark: var(--color-on-accent7-dark);
+  --ax-comp-border-dark: var(--color-border-accent7-dark);
+  --ax-comp-bg-darker: var(--color-accent7-darker);
+  --ax-comp-text-darker: var(--color-on-accent7-darker);
+  --ax-comp-border-darker: var(--color-border-accent7-darker);
+  --ax-comp-bg-darkest: var(--color-accent7-darkest);
+  --ax-comp-text-darkest: var(--color-on-accent7-darkest);
+  --ax-comp-border-darkest: var(--color-border-accent7-darkest);
+}
+
+@utility bg-default {
+  background-color: var(--color-bg-default);
+}
+
+@utility text-default {
+  color: var(--color-text-default);
+}
+
+@utility text {
+  color: var(--color-text-default);
+}
+
+@utility border-default {
+  border-color: var(--color-border-default);
+}
+
+@utility border-s-default {
+  border-inline-start-width: 1px;
+}
+
+@utility border-e-default {
+  border-inline-end-width: 1px;
+}
+
+@utility border-t-default {
+  border-top-width: 1px;
+}
+
+@utility border-b-default {
+  border-bottom-width: 1px;
+}
+
+@utility border-x-default {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+@utility border-y-default {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+@utility text-default {
+  color: var(--color-text-default);
+}
+
+@utility bg-default {
+  background-color: var(--color-bg-default);
+}
+
+@utility max-w-8xl {
+  max-width: 90rem;
+}
+
+@utility rounded-default {
+  border-radius: var(--radius-default);
+}
+
+@utility rounded-s-default {
+  border-start-start-radius: var(--radius-default);
+  border-end-start-radius: var(--radius-default);
+}
+
+@utility rounded-e-default {
+  border-start-end-radius: var(--radius-default);
+  border-end-end-radius: var(--radius-default);
+}
+
+@utility rounded-t-default {
+  border-top-left-radius: var(--radius-default);
+  border-top-right-radius: var(--radius-default);
+}
+
+@utility rounded-b-default {
+  border-bottom-left-radius: var(--radius-default);
+  border-bottom-right-radius: var(--radius-default);
+}
+
+@utility rounded-tl-default {
+  border-top-left-radius: var(--radius-default);
+}
+
+@utility rounded-tr-default {
+  border-top-right-radius: var(--radius-default);
+}
+
+@utility rounded-bl-default {
+  border-bottom-left-radius: var(--radius-default);
+}
+
+@utility rounded-br-default {
+  border-bottom-right-radius: var(--radius-default);
+}
+
+@utility ax-state-disabled {
+  @apply cursor-not-allowed opacity-50 *:cursor-not-allowed;
+}
+
+@utility ax-state-readonly {
+  @apply cursor-text opacity-70 *:cursor-text;
+}
+
+@utility ax-fill {
+  &.ax-default {
+    @apply light-surface dark:dark-surface;
+  }
+  &.ax-editor-container {
+    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+  }
+}
+
+@utility ax-flat {
+  @apply rounded-none;
+  &.ax-default {
+    @apply border-border-lightest dark:border-border-darkest border-b bg-transparent;
+  }
+  &.ax-editor-container {
+    @apply focus-within:border-primary!;
+  }
+}
+
+@utility ax-solid {
+  @apply bg-(--ax-comp-bg,var(--color-lightest)) text-(--ax-comp-text,var(--color-on-lightest)) dark:bg-(--ax-comp-bg,var(--color-darkest)) dark:text-(--ax-comp-text,var(--color-on-darkest));
+  &.ax-default {
+    @apply lightest-surface dark:darkest-surface border;
+  }
+  &.ax-state-selected {
+    @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
+  }
+  &.ax-editor-container {
+    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+  }
+}
+
+@utility ax-solid-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
+  }
+  @apply ax-solid transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      @apply bg-(--ax-comp-bg-dark,var(--color-lighter)) text-(--ax-comp-text-dark,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-dark,var(--color-darker)) dark:text-(--ax-comp-text-dark,var(--color-on-darker));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
+  }
+}
+
+@utility ax-outline {
+  @apply border border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-lightest));
+  &.ax-default {
+    @apply border-border-lightest dark:border-border-darkest border;
+  }
+  &.ax-state-selected {
+    @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
+  }
+  &.ax-editor-container {
+    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+  }
+}
+
+@utility ax-outline-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
+  }
+  @apply ax-outline transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      @apply border-(--ax-comp-bg-dark,var(--color-border-lighter)) text-(--ax-comp-bg-dark,var(--color-on-lighter));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
+  }
+}
+
+@utility ax-twotone {
+  @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
+  &.ax-state-selected {
+    @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
+  }
+}
+
+@utility ax-twotone-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
+  }
+  @apply ax-twotone transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      @apply bg-(--ax-comp-bg-lighter,var(--color-light)) text-(--ax-comp-text-lighter,var(--color-on-light)) dark:bg-(--ax-comp-bg-lighter,var(--color-dark)) dark:text-(--ax-comp-text-lighter,var(--color-on-dark));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
+  }
+}
+
+@utility ax-blank {
+  @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
+  &.ax-state-selected {
+    @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
+  }
+}
+
+@utility ax-blank-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
+  }
+  @apply ax-blank transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
+  }
+}
+
+@utility links {
+  @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
+  &.ax-state-selected {
+    @apply text-(--ax-comp-bg-darker,var(--color-on-surface));
+  }
+}
+
+@utility links-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
+  }
+  @apply links transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      @apply text-(--ax-comp-bg-dark,var(--color-on-surface));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply text-(--ax-comp-bg-darker,var(--color-on-surface));
+  }
+}
+@utility h1 {
+  font-size: 2.5rem;
+  font-weight: 500;
+  line-height: 2.5rem;
+}  
+@utility h2 {
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 2rem;
+}  
+@utility h3 {
+  font-size: 1.75rem;
+  font-weight: 500;
+  line-height: 1.75rem;
+}  
+@utility h4 {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}  
+@utility h5 {
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.125rem;
+}  
+@utility h6 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1rem;
+}  
+@utility heading {
+  width: 100%;
+  border-bottom: 1px solid;
+  border-color: rgba(var(--ax-sys-color-border-lightest-surface));
+  line-height: 0.1em;
+  margin: 1rem auto;
+}  
+@utility heading-start {
+  text-align: start;
+}  
+@utility heading-center {
+  text-align: center;
+}  
+@utility heading-end {
+  text-align: end;
+}  
+@utility subtitle {
+  opacity: 74%;
+  display: block;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+}
+@utility tabs-fit {
+  width: 100%;
+}
+@utility ax-xs {
+  --ax-sys-xs-size: var(--ax-sys-size-xs);
+}
+@utility ax-sm {
+  --ax-sys-sm-size: var(--ax-sys-size-sm);
+}
+@utility ax-md {
+  --ax-sys-md-size: var(--ax-sys-size-md);
+}
+@utility ax-lg {
+  --ax-sys-lg-size: var(--ax-sys-size-lg);
+}
+@utility ax-xl {
+  --ax-sys-xl-size: var(--ax-sys-size-xl);
+}