@acorex/styles 21.0.0-next.14 → 21.0.0-next.16

package/themes/default.css

@@ -0,0 +1,1240 @@
+@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: 46, 46, 46;
+  --ax-sys-color-border-lightest-surface: 237, 237, 237;
+
+  --ax-sys-color-lighter-surface: 246, 246, 246;
+  --ax-sys-color-on-lighter-surface: 46, 46, 46;
+  --ax-sys-color-border-lighter-surface: 229, 229, 229;
+
+  --ax-sys-color-light-surface: 240, 240, 240;
+  --ax-sys-color-on-light-surface: 46, 46, 46;
+  --ax-sys-color-border-light-surface: 222, 222, 222;
+
+  --ax-sys-color-surface: 234, 234, 234;
+  --ax-sys-color-on-surface: 46, 46, 46;
+  --ax-sys-color-border-surface: 216, 216, 216;
+
+  --ax-sys-color-dark-surface: 227, 227, 227;
+  --ax-sys-color-on-dark-surface: 46, 46, 46;
+  --ax-sys-color-border-dark-surface: 209, 209, 209;
+
+  --ax-sys-color-darker-surface: 221, 221, 221;
+  --ax-sys-color-on-darker-surface: 46, 46, 46;
+  --ax-sys-color-border-darker-surface: 203, 203, 203;
+
+  --ax-sys-color-darkest-surface: 212, 212, 212;
+  --ax-sys-color-on-darkest-surface: 46, 46, 46;
+  --ax-sys-color-border-darkest-surface: 194, 194, 194;
+
+  --ax-sys-color-primary-50: 231, 246, 255;
+  --ax-sys-color-primary-100: 211, 234, 255;
+  --ax-sys-color-primary-200: 183, 217, 255;
+  --ax-sys-color-primary-300: 138, 189, 255;
+  --ax-sys-color-primary-400: 77, 151, 255;
+  --ax-sys-color-primary-500: 43, 127, 255;
+  --ax-sys-color-primary-600: 20, 108, 235;
+  --ax-sys-color-primary-700: 0, 86, 210;
+  --ax-sys-color-primary-800: 12, 70, 182;
+  --ax-sys-color-primary-900: 29, 64, 142;
+  --ax-sys-color-primary-950: 14, 34, 84;
+
+  --ax-sys-color-secondary-50: 234, 243, 255;
+  --ax-sys-color-secondary-100: 219, 229, 247;
+  --ax-sys-color-secondary-200: 199, 208, 226;
+  --ax-sys-color-secondary-300: 168, 177, 194;
+  --ax-sys-color-secondary-400: 130, 138, 154;
+  --ax-sys-color-secondary-500: 106, 114, 130;
+  --ax-sys-color-secondary-600: 93, 101, 117;
+  --ax-sys-color-secondary-700: 78, 86, 101;
+  --ax-sys-color-secondary-800: 66, 73, 87;
+  --ax-sys-color-secondary-900: 59, 64, 74;
+  --ax-sys-color-secondary-950: 35, 38, 45;
+
+  --ax-sys-color-success-50: 207, 255, 232;
+  --ax-sys-color-success-100: 162, 255, 211;
+  --ax-sys-color-success-200: 111, 255, 188;
+  --ax-sys-color-success-300: 86, 233, 167;
+  --ax-sys-color-success-400: 48, 206, 141;
+  --ax-sys-color-success-500: 1, 188, 125;
+  --ax-sys-color-success-600: 0, 165, 104;
+  --ax-sys-color-success-700: 0, 136, 81;
+  --ax-sys-color-success-800: 22, 110, 67;
+  --ax-sys-color-success-900: 43, 89, 61;
+  --ax-sys-color-success-950: 23, 41, 28;
+
+  --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, 236, 237;
+  --ax-sys-color-danger-100: 255, 220, 221;
+  --ax-sys-color-danger-200: 255, 196, 198;
+  --ax-sys-color-danger-300: 255, 155, 162;
+  --ax-sys-color-danger-400: 255, 89, 113;
+  --ax-sys-color-danger-500: 255, 32, 86;
+  --ax-sys-color-danger-600: 232, 0, 68;
+  --ax-sys-color-danger-700: 195, 0, 53;
+  --ax-sys-color-danger-800: 159, 23, 47;
+  --ax-sys-color-danger-900: 122, 44, 49;
+  --ax-sys-color-danger-950: 61, 27, 27;
+
+  --ax-sys-color-primary-lightest-surface: 211, 234, 255;
+  --ax-sys-color-on-primary-lightest-surface: 29, 48, 64;
+  --ax-sys-color-border-primary-lightest-surface: 175, 217, 255;
+
+  --ax-sys-color-primary-lighter-surface: 183, 217, 255;
+  --ax-sys-color-on-primary-lighter-surface: 18, 47, 77;
+  --ax-sys-color-border-primary-lighter-surface: 147, 198, 255;
+
+  --ax-sys-color-primary-light-surface: 138, 189, 255;
+  --ax-sys-color-on-primary-light-surface: 0, 44, 98;
+  --ax-sys-color-border-primary-light-surface: 102, 169, 255;
+
+  --ax-sys-color-primary-surface: 43, 127, 255;
+  --ax-sys-color-on-primary-surface: 244, 254, 255;
+  --ax-sys-color-border-primary-surface: 7, 105, 255;
+
+  --ax-sys-color-primary-dark-surface: 20, 108, 235;
+  --ax-sys-color-on-primary-dark-surface: 244, 254, 255;
+  --ax-sys-color-border-primary-dark-surface: 17, 93, 202;
+
+  --ax-sys-color-primary-darker-surface: 0, 86, 210;
+  --ax-sys-color-on-primary-darker-surface: 245, 254, 255;
+  --ax-sys-color-border-primary-darker-surface: 0, 71, 174;
+
+  --ax-sys-color-primary-darkest-surface: 12, 70, 182;
+  --ax-sys-color-on-primary-darkest-surface: 245, 254, 255;
+  --ax-sys-color-border-primary-darkest-surface: 10, 57, 149;
+
+  --ax-sys-color-secondary-lightest-surface: 219, 229, 247;
+  --ax-sys-color-on-secondary-lightest-surface: 39, 46, 60;
+  --ax-sys-color-border-secondary-lightest-surface: 190, 208, 241;
+
+  --ax-sys-color-secondary-lighter-surface: 199, 208, 226;
+  --ax-sys-color-on-secondary-lighter-surface: 39, 46, 60;
+  --ax-sys-color-border-secondary-lighter-surface: 175, 188, 214;
+
+  --ax-sys-color-secondary-light-surface: 168, 177, 194;
+  --ax-sys-color-on-secondary-light-surface: 39, 46, 59;
+  --ax-sys-color-border-secondary-light-surface: 147, 158, 179;
+
+  --ax-sys-color-secondary-surface: 106, 114, 130;
+  --ax-sys-color-on-secondary-surface: 246, 254, 255;
+  --ax-sys-color-border-secondary-surface: 90, 97, 110;
+
+  --ax-sys-color-secondary-dark-surface: 93, 101, 117;
+  --ax-sys-color-on-secondary-dark-surface: 246, 254, 255;
+  --ax-sys-color-border-secondary-dark-surface: 77, 84, 97;
+
+  --ax-sys-color-secondary-darker-surface: 78, 86, 101;
+  --ax-sys-color-on-secondary-darker-surface: 245, 254, 255;
+  --ax-sys-color-border-secondary-darker-surface: 62, 69, 81;
+
+  --ax-sys-color-secondary-darkest-surface: 66, 73, 87;
+  --ax-sys-color-on-secondary-darkest-surface: 246, 254, 255;
+  --ax-sys-color-border-secondary-darkest-surface: 51, 56, 67;
+
+  --ax-sys-color-success-lightest-surface: 162, 255, 211;
+  --ax-sys-color-on-success-lightest-surface: 0, 59, 32;
+  --ax-sys-color-border-success-lightest-surface: 126, 255, 194;
+
+  --ax-sys-color-success-lighter-surface: 111, 255, 188;
+  --ax-sys-color-on-success-lighter-surface: 0, 59, 29;
+  --ax-sys-color-border-success-lighter-surface: 75, 255, 171;
+
+  --ax-sys-color-success-light-surface: 86, 233, 167;
+  --ax-sys-color-on-success-light-surface: 0, 59, 29;
+  --ax-sys-color-border-success-light-surface: 54, 229, 151;
+
+  --ax-sys-color-success-surface: 1, 188, 125;
+  --ax-sys-color-on-success-surface: 231, 255, 244;
+  --ax-sys-color-border-success-surface: 1, 152, 101;
+
+  --ax-sys-color-success-dark-surface: 0, 165, 104;
+  --ax-sys-color-on-success-dark-surface: 231, 255, 243;
+  --ax-sys-color-border-success-dark-surface: 0, 129, 81;
+
+  --ax-sys-color-success-darker-surface: 0, 136, 81;
+  --ax-sys-color-on-success-darker-surface: 232, 255, 242;
+  --ax-sys-color-border-success-darker-surface: 0, 100, 60;
+
+  --ax-sys-color-success-darkest-surface: 22, 110, 67;
+  --ax-sys-color-on-success-darkest-surface: 232, 255, 242;
+  --ax-sys-color-border-success-darkest-surface: 16, 80, 49;
+
+  --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, 220, 221;
+  --ax-sys-color-on-danger-lightest-surface: 63, 38, 39;
+  --ax-sys-color-border-danger-lightest-surface: 255, 184, 186;
+
+  --ax-sys-color-danger-lighter-surface: 255, 196, 198;
+  --ax-sys-color-on-danger-lighter-surface: 74, 30, 34;
+  --ax-sys-color-border-danger-lighter-surface: 255, 160, 164;
+
+  --ax-sys-color-danger-light-surface: 255, 155, 162;
+  --ax-sys-color-on-danger-light-surface: 91, 0, 25;
+  --ax-sys-color-border-danger-light-surface: 255, 119, 129;
+
+  --ax-sys-color-danger-surface: 255, 32, 86;
+  --ax-sys-color-on-danger-surface: 255, 247, 248;
+  --ax-sys-color-border-danger-surface: 251, 0, 61;
+
+  --ax-sys-color-danger-dark-surface: 232, 0, 68;
+  --ax-sys-color-on-danger-dark-surface: 255, 247, 247;
+  --ax-sys-color-border-danger-dark-surface: 196, 0, 58;
+
+  --ax-sys-color-danger-darker-surface: 195, 0, 53;
+  --ax-sys-color-on-danger-darker-surface: 255, 247, 247;
+  --ax-sys-color-border-danger-darker-surface: 159, 0, 43;
+
+  --ax-sys-color-danger-darkest-surface: 159, 23, 47;
+  --ax-sys-color-on-danger-darkest-surface: 255, 247, 247;
+  --ax-sys-color-border-danger-darkest-surface: 128, 18, 38;
+
+  --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: 39, 39, 42;
+  --ax-sys-color-on-lightest-surface: 253, 253, 255;
+  --ax-sys-color-border-lightest-surface: 61, 61, 66;
+
+  --ax-sys-color-lighter-surface: 33, 33, 36;
+  --ax-sys-color-on-lighter-surface: 253, 253, 255;
+  --ax-sys-color-border-lighter-surface: 55, 55, 60;
+
+  --ax-sys-color-light-surface: 29, 29, 31;
+  --ax-sys-color-on-light-surface: 253, 253, 255;
+  --ax-sys-color-border-light-surface: 50, 50, 55;
+
+  --ax-sys-color-surface: 24, 24, 27;
+  --ax-sys-color-on-surface: 253, 253, 255;
+  --ax-sys-color-border-surface: 46, 46, 51;
+
+  --ax-sys-color-dark-surface: 20, 20, 22;
+  --ax-sys-color-on-dark-surface: 253, 253, 255;
+  --ax-sys-color-border-dark-surface: 41, 41, 46;
+
+  --ax-sys-color-darker-surface: 15, 15, 17;
+  --ax-sys-color-on-darker-surface: 253, 253, 255;
+  --ax-sys-color-border-darker-surface: 36, 36, 42;
+
+  --ax-sys-color-darkest-surface: 9, 9, 11;
+  --ax-sys-color-on-darkest-surface: 253, 253, 255;
+  --ax-sys-color-border-darkest-surface: 30, 30, 36;
+
+  --ax-sys-color-primary-50: 233, 247, 255;
+  --ax-sys-color-primary-100: 219, 238, 255;
+  --ax-sys-color-primary-200: 190, 221, 255;
+  --ax-sys-color-primary-300: 161, 203, 255;
+  --ax-sys-color-primary-400: 132, 185, 255;
+  --ax-sys-color-primary-500: 101, 166, 255;
+  --ax-sys-color-primary-600: 67, 146, 255;
+  --ax-sys-color-primary-700: 43, 127, 255;
+  --ax-sys-color-primary-800: 25, 112, 239;
+  --ax-sys-color-primary-900: 0, 98, 223;
+  --ax-sys-color-primary-950: 0, 90, 215;
+
+  --ax-sys-color-secondary-50: 240, 249, 255;
+  --ax-sys-color-secondary-100: 233, 242, 255;
+  --ax-sys-color-secondary-200: 219, 228, 243;
+  --ax-sys-color-secondary-300: 206, 214, 229;
+  --ax-sys-color-secondary-400: 192, 201, 215;
+  --ax-sys-color-secondary-500: 179, 187, 202;
+  --ax-sys-color-secondary-600: 166, 174, 188;
+  --ax-sys-color-secondary-700: 153, 161, 175;
+  --ax-sys-color-secondary-800: 135, 143, 157;
+  --ax-sys-color-secondary-900: 118, 126, 139;
+  --ax-sys-color-secondary-950: 110, 117, 131;
+
+  --ax-sys-color-success-50: 210, 255, 233;
+  --ax-sys-color-success-100: 180, 255, 219;
+  --ax-sys-color-success-200: 115, 255, 191;
+  --ax-sys-color-success-300: 99, 244, 178;
+  --ax-sys-color-success-400: 82, 230, 164;
+  --ax-sys-color-success-500: 63, 216, 151;
+  --ax-sys-color-success-600: 41, 202, 138;
+  --ax-sys-color-success-700: 1, 188, 125;
+  --ax-sys-color-success-800: 0, 170, 108;
+  --ax-sys-color-success-900: 0, 151, 91;
+  --ax-sys-color-success-950: 0, 141, 85;
+
+  --ax-sys-color-warning-50: 255, 245, 222;
+  --ax-sys-color-warning-100: 255, 238, 208;
+  --ax-sys-color-warning-200: 255, 224, 181;
+  --ax-sys-color-warning-300: 255, 210, 152;
+  --ax-sys-color-warning-400: 255, 195, 120;
+  --ax-sys-color-warning-500: 255, 180, 82;
+  --ax-sys-color-warning-600: 255, 165, 33;
+  --ax-sys-color-warning-700: 253, 154, 0;
+  --ax-sys-color-warning-800: 230, 133, 0;
+  --ax-sys-color-warning-900: 203, 114, 0;
+  --ax-sys-color-warning-950: 190, 105, 0;
+
+  --ax-sys-color-danger-50: 255, 240, 242;
+  --ax-sys-color-danger-100: 255, 230, 233;
+  --ax-sys-color-danger-200: 255, 210, 215;
+  --ax-sys-color-danger-300: 255, 189, 196;
+  --ax-sys-color-danger-400: 255, 167, 178;
+  --ax-sys-color-danger-500: 255, 144, 159;
+  --ax-sys-color-danger-600: 255, 117, 140;
+  --ax-sys-color-danger-700: 255, 99, 126;
+  --ax-sys-color-danger-800: 234, 80, 109;
+  --ax-sys-color-danger-900: 213, 59, 92;
+  --ax-sys-color-danger-950: 203, 48, 84;
+
+  --ax-sys-color-primary-lightest-surface: 219, 238, 255;
+  --ax-sys-color-on-primary-lightest-surface: 9, 23, 35;
+  --ax-sys-color-border-primary-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-primary-lighter-surface: 190, 221, 255;
+  --ax-sys-color-on-primary-lighter-surface: 0, 22, 47;
+  --ax-sys-color-border-primary-lighter-surface: 236, 245, 255;
+
+  --ax-sys-color-primary-light-surface: 161, 203, 255;
+  --ax-sys-color-on-primary-light-surface: 0, 20, 59;
+  --ax-sys-color-border-primary-light-surface: 207, 228, 255;
+
+  --ax-sys-color-primary-surface: 101, 166, 255;
+  --ax-sys-color-on-primary-surface: 0, 6, 82;
+  --ax-sys-color-border-primary-surface: 147, 193, 255;
+
+  --ax-sys-color-primary-dark-surface: 67, 146, 255;
+  --ax-sys-color-on-primary-dark-surface: 0, 0, 87;
+  --ax-sys-color-border-primary-dark-surface: 113, 173, 255;
+
+  --ax-sys-color-primary-darker-surface: 43, 127, 255;
+  --ax-sys-color-on-primary-darker-surface: 0, 0, 91;
+  --ax-sys-color-border-primary-darker-surface: 89, 155, 255;
+
+  --ax-sys-color-primary-darkest-surface: 25, 112, 239;
+  --ax-sys-color-on-primary-darkest-surface: 0, 0, 91;
+  --ax-sys-color-border-primary-darkest-surface: 68, 139, 242;
+
+  --ax-sys-color-secondary-lightest-surface: 233, 242, 255;
+  --ax-sys-color-on-secondary-lightest-surface: 16, 22, 31;
+  --ax-sys-color-border-secondary-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-secondary-lighter-surface: 219, 228, 243;
+  --ax-sys-color-on-secondary-lighter-surface: 16, 22, 32;
+  --ax-sys-color-border-secondary-lighter-surface: 253, 254, 254;
+
+  --ax-sys-color-secondary-light-surface: 206, 214, 229;
+  --ax-sys-color-on-secondary-light-surface: 17, 22, 32;
+  --ax-sys-color-border-secondary-light-surface: 236, 239, 245;
+
+  --ax-sys-color-secondary-surface: 179, 187, 202;
+  --ax-sys-color-on-secondary-surface: 17, 22, 33;
+  --ax-sys-color-border-secondary-surface: 206, 211, 221;
+
+  --ax-sys-color-secondary-dark-surface: 166, 174, 188;
+  --ax-sys-color-on-secondary-dark-surface: 16, 22, 32;
+  --ax-sys-color-border-secondary-dark-surface: 192, 198, 208;
+
+  --ax-sys-color-secondary-darker-surface: 153, 161, 175;
+  --ax-sys-color-on-secondary-darker-surface: 16, 22, 32;
+  --ax-sys-color-border-secondary-darker-surface: 179, 185, 195;
+
+  --ax-sys-color-secondary-darkest-surface: 135, 143, 157;
+  --ax-sys-color-on-secondary-darkest-surface: 16, 22, 33;
+  --ax-sys-color-border-secondary-darkest-surface: 160, 167, 178;
+
+  --ax-sys-color-success-lightest-surface: 180, 255, 219;
+  --ax-sys-color-on-success-lightest-surface: 0, 31, 13;
+  --ax-sys-color-border-success-lightest-surface: 226, 255, 241;
+
+  --ax-sys-color-success-lighter-surface: 115, 255, 191;
+  --ax-sys-color-on-success-lighter-surface: 0, 31, 11;
+  --ax-sys-color-border-success-lighter-surface: 161, 255, 212;
+
+  --ax-sys-color-success-light-surface: 99, 244, 178;
+  --ax-sys-color-on-success-light-surface: 0, 31, 10;
+  --ax-sys-color-border-success-light-surface: 142, 247, 199;
+
+  --ax-sys-color-success-surface: 63, 216, 151;
+  --ax-sys-color-on-success-surface: 0, 31, 10;
+  --ax-sys-color-border-success-surface: 101, 224, 172;
+
+  --ax-sys-color-success-dark-surface: 41, 202, 138;
+  --ax-sys-color-on-success-dark-surface: 0, 31, 10;
+  --ax-sys-color-border-success-dark-surface: 71, 218, 159;
+
+  --ax-sys-color-success-darker-surface: 1, 188, 125;
+  --ax-sys-color-on-success-darker-surface: 0, 31, 10;
+  --ax-sys-color-border-success-darker-surface: 1, 234, 155;
+
+  --ax-sys-color-success-darkest-surface: 0, 170, 108;
+  --ax-sys-color-on-success-darkest-surface: 0, 31, 8;
+  --ax-sys-color-border-success-darkest-surface: 0, 216, 137;
+
+  --ax-sys-color-warning-lightest-surface: 255, 238, 208;
+  --ax-sys-color-on-warning-lightest-surface: 32, 20, 0;
+  --ax-sys-color-border-warning-lightest-surface: 255, 255, 254;
+
+  --ax-sys-color-warning-lighter-surface: 255, 224, 181;
+  --ax-sys-color-on-warning-lighter-surface: 37, 16, 0;
+  --ax-sys-color-border-warning-lighter-surface: 255, 243, 227;
+
+  --ax-sys-color-warning-light-surface: 255, 210, 152;
+  --ax-sys-color-on-warning-light-surface: 38, 16, 0;
+  --ax-sys-color-border-warning-light-surface: 255, 230, 198;
+
+  --ax-sys-color-warning-surface: 255, 180, 82;
+  --ax-sys-color-on-warning-surface: 39, 15, 0;
+  --ax-sys-color-border-warning-surface: 255, 200, 128;
+
+  --ax-sys-color-warning-dark-surface: 255, 165, 33;
+  --ax-sys-color-on-warning-dark-surface: 40, 14, 0;
+  --ax-sys-color-border-warning-dark-surface: 255, 184, 79;
+
+  --ax-sys-color-warning-darker-surface: 253, 154, 0;
+  --ax-sys-color-on-warning-darker-surface: 41, 13, 0;
+  --ax-sys-color-border-warning-darker-surface: 255, 172, 44;
+
+  --ax-sys-color-warning-darkest-surface: 230, 133, 0;
+  --ax-sys-color-on-warning-darkest-surface: 42, 12, 0;
+  --ax-sys-color-border-warning-darkest-surface: 255, 156, 21;
+
+  --ax-sys-color-danger-lightest-surface: 255, 230, 233;
+  --ax-sys-color-on-danger-lightest-surface: 33, 17, 19;
+  --ax-sys-color-border-danger-lightest-surface: 255, 255, 255;
+
+  --ax-sys-color-danger-lighter-surface: 255, 210, 215;
+  --ax-sys-color-on-danger-lighter-surface: 41, 10, 16;
+  --ax-sys-color-border-danger-lighter-surface: 255, 255, 255;
+
+  --ax-sys-color-danger-light-surface: 255, 189, 196;
+  --ax-sys-color-on-danger-light-surface: 48, 1, 13;
+  --ax-sys-color-border-danger-light-surface: 255, 235, 237;
+
+  --ax-sys-color-danger-surface: 255, 144, 159;
+  --ax-sys-color-on-danger-surface: 54, 0, 9;
+  --ax-sys-color-border-danger-surface: 255, 190, 199;
+
+  --ax-sys-color-danger-dark-surface: 255, 117, 140;
+  --ax-sys-color-on-danger-dark-surface: 54, 0, 10;
+  --ax-sys-color-border-danger-dark-surface: 255, 163, 178;
+
+  --ax-sys-color-danger-darker-surface: 255, 99, 126;
+  --ax-sys-color-on-danger-darker-surface: 54, 0, 9;
+  --ax-sys-color-border-danger-darker-surface: 255, 145, 164;
+
+  --ax-sys-color-danger-darkest-surface: 234, 80, 109;
+  --ax-sys-color-on-danger-darkest-surface: 54, 0, 8;
+  --ax-sys-color-border-danger-darkest-surface: 239, 121, 143;
+}
+
+@theme {
+  --radius-default: var(--ax-sys-border-radius);
+}
+
+@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-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));
+}
+
+@utility lightest-surface {
+  background-color: var(--color-lightest);
+  color: var(--color-on-lightest);
+  border: var(--color-border-lightest);
+}
+
+@utility lighter-surface {
+  background-color: var(--color-lighter);
+  color: var(--color-on-lighter);
+  border: var(--color-border-lighter);
+}
+
+@utility light-surface {
+  background-color: var(--color-light);
+  color: var(--color-on-light);
+  border: var(--color-border-light);
+}
+
+@utility surface {
+  background-color: var(--color-surface);
+  color: var(--color-on-surface);
+  border: var(--color-border-surface);
+}
+
+@utility dark-surface {
+  background-color: var(--color-dark);
+  color: var(--color-on-dark);
+  border: var(--color-border-dark);
+}
+
+@utility darker-surface {
+  background-color: var(--color-darker);
+  color: var(--color-on-darker);
+  border: var(--color-border-darker);
+}
+
+@utility darkest-surface {
+  background-color: var(--color-darkest);
+  color: var(--color-on-darkest);
+  border: var(--color-border-darkest);
+}
+
+/* Primary Surfaces */
+
+@utility primary-lightest {
+  background-color: var(--color-primary-lightest);
+  color: var(--color-on-primary-lightest);
+  border: var(--color-border-primary-lightest);
+}
+
+@utility primary-lighter {
+  background-color: var(--color-primary-lighter);
+  color: var(--color-on-primary-lighter);
+  border: var(--color-border-primary-lighter);
+}
+
+@utility primary-light {
+  background-color: var(--color-primary-light);
+  color: var(--color-on-primary-light);
+  border: var(--color-border-primary-light);
+}
+
+@utility primary {
+  background-color: var(--color-primary);
+  color: var(--color-on-primary);
+  border: var(--color-border-primary);
+}
+
+@utility primary-dark {
+  background-color: var(--color-primary-dark);
+  color: var(--color-on-primary-dark);
+  border: var(--color-border-primary-dark);
+}
+
+@utility primary-darker {
+  background-color: var(--color-primary-darker);
+  color: var(--color-on-primary-darker);
+  border: var(--color-border-primary-darker);
+}
+
+@utility primary-darkest {
+  background-color: var(--color-primary-darkest);
+  color: var(--color-on-primary-darkest);
+  border: 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 {
+  background-color: var(--color-secondary-lightest);
+  color: var(--color-on-secondary-lightest);
+  border: var(--color-border-secondary-lightest);
+}
+
+@utility secondary-lighter {
+  background-color: var(--color-secondary-lighter);
+  color: var(--color-on-secondary-lighter);
+  border: var(--color-border-secondary-lighter);
+}
+
+@utility secondary-light {
+  background-color: var(--color-secondary-light);
+  color: var(--color-on-secondary-light);
+  border: var(--color-border-secondary-light);
+}
+
+@utility secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-on-secondary);
+  border: var(--color-border-secondary);
+}
+
+@utility secondary-dark {
+  background-color: var(--color-secondary-dark);
+  color: var(--color-on-secondary-dark);
+  border: var(--color-border-secondary-dark);
+}
+
+@utility secondary-darker {
+  background-color: var(--color-secondary-darker);
+  color: var(--color-on-secondary-darker);
+  border: var(--color-border-secondary-darker);
+}
+
+@utility secondary-darkest {
+  background-color: var(--color-secondary-darkest);
+  color: var(--color-on-secondary-darkest);
+  border: 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 {
+  background-color: var(--color-success-lightest);
+  color: var(--color-on-success-lightest);
+  border: var(--color-border-success-lightest);
+}
+
+@utility success-lighter {
+  background-color: var(--color-success-lighter);
+  color: var(--color-on-success-lighter);
+  border: var(--color-border-success-lighter);
+}
+
+@utility success-light {
+  background-color: var(--color-success-light);
+  color: var(--color-on-success-light);
+  border: var(--color-border-success-light);
+}
+
+@utility success {
+  background-color: var(--color-success);
+  color: var(--color-on-success);
+  border: var(--color-border-success);
+}
+
+@utility success-dark {
+  background-color: var(--color-success-dark);
+  color: var(--color-on-success-dark);
+  border: var(--color-border-success-dark);
+}
+
+@utility success-darker {
+  background-color: var(--color-success-darker);
+  color: var(--color-on-success-darker);
+  border: var(--color-border-success-darker);
+}
+
+@utility success-darkest {
+  background-color: var(--color-success-darkest);
+  color: var(--color-on-success-darkest);
+  border: 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 {
+  background-color: var(--color-warning-lightest);
+  color: var(--color-on-warning-lightest);
+  border: var(--color-border-warning-lightest);
+}
+
+@utility warning-lighter {
+  background-color: var(--color-warning-lighter);
+  color: var(--color-on-warning-lighter);
+  border: var(--color-border-warning-lighter);
+}
+
+@utility warning-light {
+  background-color: var(--color-warning-light);
+  color: var(--color-on-warning-light);
+  border: var(--color-border-warning-light);
+}
+
+@utility warning {
+  background-color: var(--color-warning);
+  color: var(--color-on-warning);
+  border: var(--color-border-warning);
+}
+
+@utility warning-dark {
+  background-color: var(--color-warning-dark);
+  color: var(--color-on-warning-dark);
+  border: var(--color-border-warning-dark);
+}
+
+@utility warning-darker {
+  background-color: var(--color-warning-darker);
+  color: var(--color-on-warning-darker);
+  border: var(--color-border-warning-darker);
+}
+
+@utility warning-darkest {
+  background-color: var(--color-warning-darkest);
+  color: var(--color-on-warning-darkest);
+  border: 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 {
+  background-color: var(--color-danger-lightest);
+  color: var(--color-on-danger-lightest);
+  border: var(--color-border-danger-lightest);
+}
+
+@utility danger-lighter {
+  background-color: var(--color-danger-lighter);
+  color: var(--color-on-danger-lighter);
+  border: var(--color-border-danger-lighter);
+}
+
+@utility danger-light {
+  background-color: var(--color-danger-light);
+  color: var(--color-on-danger-light);
+  border: var(--color-border-danger-light);
+}
+
+@utility danger {
+  background-color: var(--color-danger);
+  color: var(--color-on-danger);
+  border: var(--color-border-danger);
+}
+
+@utility danger-dark {
+  background-color: var(--color-danger-dark);
+  color: var(--color-on-danger-dark);
+  border: var(--color-border-danger-dark);
+}
+
+@utility danger-darker {
+  background-color: var(--color-danger-darker);
+  color: var(--color-on-danger-darker);
+  border: var(--color-border-danger-darker);
+}
+
+@utility danger-darkest {
+  background-color: var(--color-danger-darkest);
+  color: var(--color-on-danger-darkest);
+  border: 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);
+}
+
+@utility bg-default {
+  border-color: var(--color-bg-default);
+}
+
+@utility text-default {
+  border-color: var(--color-text-default);
+}
+
+@utility border-default {
+  border-color: var(--color-border-default);
+}
+
+@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 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 outline-surface outline;
+  }
+}
+
+@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 bg-transparent text-(--ax-comp-bg,var(--color-on-lightest)) outline outline-(--ax-comp-bg,var(--color-border-lightest));
+}
+
+@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 text-(--ax-comp-bg-dark,var(--color-on-lighter)) outline-(--ax-comp-bg-dark,var(--color-border-lighter));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply text-(--ax-comp-bg-darker,var(--color-on-light)) outline-(--ax-comp-bg-darker,var(--color-border-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));
+}
+
+@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));
+}
+
+@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 ax-link {
+  @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
+}
+
+@utility ax-link-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-link 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));
+  }
+}