@navikt/ds-css 7.22.0 → 7.23.0

package/dist/darkside/version/{7.22.0 → 7.23.0}/index.css

@@ -94,866 +94,866 @@
 
 @layer aksel.theming {
   :root, :host, .light {
-    --ax-meta-lime-400A: #d0dc00;
-    --ax-meta-lime-300A: rgba(202, 223, 0, .58);
-    --ax-meta-lime-200A: rgba(196, 223, 0, .337);
-    --ax-meta-lime-100A: rgba(195, 222, 0, .18);
-    --ax-meta-lime-1000: #2a2800;
-    --ax-meta-lime-900: #515400;
-    --ax-meta-lime-800: #5c6100;
-    --ax-meta-lime-700: #646900;
-    --ax-meta-lime-600: #757c00;
-    --ax-meta-lime-500: #878f00;
-    --ax-meta-lime-400: #d0dc00;
-    --ax-meta-lime-300: #e0ec6b;
-    --ax-meta-lime-200: #ebf4a9;
-    --ax-meta-lime-100: #f4f9d1;
-    --ax-meta-purple-400A: rgba(102, 0, 227, .208);
-    --ax-meta-purple-300A: rgba(101, 0, 232, .13);
-    --ax-meta-purple-200A: rgba(115, 0, 255, .08);
-    --ax-meta-purple-100A: rgba(128, 0, 255, .047);
-    --ax-meta-purple-1000: #35086b;
-    --ax-meta-purple-900: #682eb2;
-    --ax-meta-purple-800: #763cc0;
-    --ax-meta-purple-700: #7f45c8;
-    --ax-meta-purple-600: #925ad6;
-    --ax-meta-purple-500: #a370e2;
-    --ax-meta-purple-400: #dfcaf9;
-    --ax-meta-purple-300: #ebdefc;
-    --ax-meta-purple-200: #f4ebff;
-    --ax-meta-purple-100: #f9f3ff;
-    --ax-brand-blue-400A: rgba(0, 90, 146, .247);
-    --ax-brand-blue-300A: rgba(0, 96, 160, .157);
-    --ax-brand-blue-200A: rgba(0, 110, 183, .11);
-    --ax-brand-blue-100A: rgba(0, 120, 210, .067);
-    --ax-brand-blue-1000: #002942;
-    --ax-brand-blue-900: #00557d;
-    --ax-brand-blue-800: #156389;
-    --ax-brand-blue-700: #246b91;
-    --ax-brand-blue-600: #417da0;
-    --ax-brand-blue-500: #5a8fae;
-    --ax-brand-blue-400: #c0d6e4;
-    --ax-brand-blue-300: #d7e6f0;
-    --ax-brand-blue-200: #e3eff7;
-    --ax-brand-blue-100: #eef6fc;
-    --ax-brand-beige-400A: rgba(233, 76, 0, .306);
-    --ax-brand-beige-300A: rgba(240, 82, 0, .196);
-    --ax-brand-beige-200A: rgba(239, 91, 0, .12);
-    --ax-brand-beige-100A: rgba(255, 90, 0, .067);
-    --ax-brand-beige-1000: #3c1f15;
-    --ax-brand-beige-900: #764332;
-    --ax-brand-beige-800: #874e3b;
-    --ax-brand-beige-700: #915541;
-    --ax-brand-beige-600: #a9654e;
-    --ax-brand-beige-500: #c0765d;
-    --ax-brand-beige-400: #f8c8b1;
-    --ax-brand-beige-300: #fcddcd;
-    --ax-brand-beige-200: #fdebe0;
-    --ax-brand-beige-100: #fff4ee;
-    --ax-brand-magenta-400A: rgba(164, 0, 58, .208);
-    --ax-brand-magenta-300A: rgba(165, 0, 60, .133);
-    --ax-brand-magenta-200A: rgba(170, 0, 61, .082);
-    --ax-brand-magenta-100A: rgba(170, 0, 64, .047);
-    --ax-brand-magenta-1000: #52002b;
-    --ax-brand-magenta-900: #98185d;
-    --ax-brand-magenta-800: #a33069;
-    --ax-brand-magenta-700: #a93d70;
-    --ax-brand-magenta-600: #b65781;
-    --ax-brand-magenta-500: #c26f92;
-    --ax-brand-magenta-400: #eccad6;
-    --ax-brand-magenta-300: #f3dde5;
-    --ax-brand-magenta-200: #f8eaef;
-    --ax-brand-magenta-100: #fbf3f6;
-    --ax-info-400A: rgba(0, 90, 146, .247);
-    --ax-info-300A: rgba(0, 96, 160, .157);
-    --ax-info-200A: rgba(0, 110, 183, .11);
-    --ax-info-100A: rgba(0, 120, 210, .067);
-    --ax-info-1000: #002942;
-    --ax-info-900: #00557d;
-    --ax-info-800: #156389;
-    --ax-info-700: #246b91;
-    --ax-info-600: #417da0;
-    --ax-info-500: #5a8fae;
-    --ax-info-400: #c0d6e4;
-    --ax-info-300: #d7e6f0;
-    --ax-info-200: #e3eff7;
-    --ax-info-100: #eef6fc;
-    --ax-danger-400A: rgba(255, 0, 88, .24);
-    --ax-danger-300A: rgba(255, 0, 88, .15);
-    --ax-danger-200A: rgba(255, 0, 89, .09);
-    --ax-danger-100A: rgba(255, 0, 99, .05);
-    --ax-danger-1000: #560000;
-    --ax-danger-900: #a60017;
-    --ax-danger-800: #bc002a;
-    --ax-danger-700: #cb0035;
-    --ax-danger-600: #e22a49;
-    --ax-danger-500: #ec526e;
-    --ax-danger-400: #ffc2d7;
-    --ax-danger-300: #ffd9e6;
-    --ax-danger-200: #ffe8f0;
-    --ax-danger-100: #fff2f7;
-    --ax-warning-400A: rgba(255, 163, 0, .565);
-    --ax-warning-300A: rgba(255, 162, 1, .353);
-    --ax-warning-200A: rgba(255, 164, 0, .22);
-    --ax-warning-100A: rgba(255, 161, 0, .106);
-    --ax-warning-1000: #481700;
-    --ax-warning-900: #8c3500;
-    --ax-warning-800: #a03e00;
-    --ax-warning-700: #ac4400;
-    --ax-warning-600: #c95100;
-    --ax-warning-500: #e75e01;
-    --ax-warning-400: #ffcb6f;
-    --ax-warning-300: #ffdea5;
-    --ax-warning-200: #ffebc7;
-    --ax-warning-100: #fff5e4;
-    --ax-success-400A: rgba(0, 162, 36, .34);
-    --ax-success-300A: rgba(1, 178, 39, .23);
-    --ax-success-200A: rgba(0, 201, 37, .165);
-    --ax-success-100A: rgba(0, 238, 53, .114);
-    --ax-success-1000: #002e00;
-    --ax-success-900: #005e0f;
-    --ax-success-800: #006c1f;
-    --ax-success-700: #007629;
-    --ax-success-600: #00893c;
-    --ax-success-500: #199d4f;
-    --ax-success-400: #a8dfb4;
-    --ax-success-300: #c4edcd;
-    --ax-success-200: #d5f6db;
-    --ax-success-100: #e2fde8;
-    --ax-accent-400A: rgba(0, 100, 241, .27);
-    --ax-accent-300A: rgba(1, 101, 244, .17);
-    --ax-accent-200A: rgba(0, 95, 255, .106);
-    --ax-accent-100A: rgba(0, 110, 255, .055);
-    --ax-accent-1000: #002459;
-    --ax-accent-900: #004ea3;
-    --ax-accent-800: #005bb6;
-    --ax-accent-700: #0063c1;
-    --ax-accent-600: #2277d5;
-    --ax-accent-500: #428ae3;
-    --ax-accent-400: #bad5fb;
-    --ax-accent-300: #d4e5fd;
-    --ax-accent-200: #e4eeff;
-    --ax-accent-100: #f1f7ff;
-    --ax-neutral-400A: rgba(0, 22, 48, .19);
-    --ax-neutral-300A: rgba(0, 17, 51, .118);
-    --ax-neutral-200A: rgba(0, 14, 41, .075);
-    --ax-neutral-100A: rgba(0, 26, 51, .04);
-    --ax-neutral-000: white;
-    --ax-neutral-1000: #202733;
-    --ax-neutral-900: #49515e;
-    --ax-neutral-800: #555d6a;
-    --ax-neutral-700: #5d6573;
-    --ax-neutral-600: #6f7785;
-    --ax-neutral-500: #818997;
-    --ax-neutral-400: #cfd3d8;
-    --ax-neutral-300: #e1e3e7;
-    --ax-neutral-200: #ecedef;
     --ax-neutral-100: #f5f6f7;
+    --ax-neutral-200: #ecedef;
+    --ax-neutral-300: #e1e3e7;
+    --ax-neutral-400: #cfd3d8;
+    --ax-neutral-500: #818997;
+    --ax-neutral-600: #6f7785;
+    --ax-neutral-700: #5d6573;
+    --ax-neutral-800: #555d6a;
+    --ax-neutral-900: #49515e;
+    --ax-neutral-1000: #202733;
+    --ax-neutral-000: white;
+    --ax-neutral-100A: rgba(0, 26, 51, .04);
+    --ax-neutral-200A: rgba(0, 14, 41, .075);
+    --ax-neutral-300A: rgba(0, 17, 51, .118);
+    --ax-neutral-400A: rgba(0, 22, 48, .19);
+    --ax-accent-100: #f1f7ff;
+    --ax-accent-200: #e4eeff;
+    --ax-accent-300: #d4e5fd;
+    --ax-accent-400: #bad5fb;
+    --ax-accent-500: #428ae3;
+    --ax-accent-600: #2176d4;
+    --ax-accent-700: #0063c1;
+    --ax-accent-800: #005bb6;
+    --ax-accent-900: #004ea3;
+    --ax-accent-1000: #002459;
+    --ax-accent-100A: rgba(0, 110, 255, .055);
+    --ax-accent-200A: rgba(0, 95, 255, .106);
+    --ax-accent-300A: rgba(1, 101, 244, .17);
+    --ax-accent-400A: rgba(0, 100, 241, .27);
+    --ax-success-100: #e2fde8;
+    --ax-success-200: #d5f6db;
+    --ax-success-300: #c4edcd;
+    --ax-success-400: #a8dfb4;
+    --ax-success-500: #199d4f;
+    --ax-success-600: #00893c;
+    --ax-success-700: #007629;
+    --ax-success-800: #006c1f;
+    --ax-success-900: #005e0f;
+    --ax-success-1000: #002e00;
+    --ax-success-100A: rgba(0, 238, 53, .114);
+    --ax-success-200A: rgba(0, 201, 37, .165);
+    --ax-success-300A: rgba(1, 178, 39, .23);
+    --ax-success-400A: rgba(0, 162, 36, .34);
+    --ax-warning-100: #fff5e4;
+    --ax-warning-200: #ffebc7;
+    --ax-warning-300: #ffdea5;
+    --ax-warning-400: #ffcb6f;
+    --ax-warning-500: #e75e01;
+    --ax-warning-600: #ca5000;
+    --ax-warning-700: #ac4400;
+    --ax-warning-800: #a03e00;
+    --ax-warning-900: #8c3500;
+    --ax-warning-1000: #481700;
+    --ax-warning-100A: rgba(255, 161, 0, .106);
+    --ax-warning-200A: rgba(255, 164, 0, .22);
+    --ax-warning-300A: rgba(255, 162, 1, .353);
+    --ax-warning-400A: rgba(255, 163, 0, .565);
+    --ax-danger-100: #fff2f7;
+    --ax-danger-200: #ffe8f0;
+    --ax-danger-300: #ffd9e6;
+    --ax-danger-400: #ffc2d7;
+    --ax-danger-500: #ec526e;
+    --ax-danger-600: #e22948;
+    --ax-danger-700: #cb0035;
+    --ax-danger-800: #bc002a;
+    --ax-danger-900: #a60017;
+    --ax-danger-1000: #560000;
+    --ax-danger-100A: rgba(255, 0, 99, .05);
+    --ax-danger-200A: rgba(255, 0, 89, .09);
+    --ax-danger-300A: rgba(255, 0, 88, .15);
+    --ax-danger-400A: rgba(255, 0, 88, .24);
+    --ax-info-100: #eef6fc;
+    --ax-info-200: #e3eff7;
+    --ax-info-300: #d7e6f0;
+    --ax-info-400: #c0d6e4;
+    --ax-info-500: #5a8fae;
+    --ax-info-600: #457c9d;
+    --ax-info-700: #246b91;
+    --ax-info-800: #156389;
+    --ax-info-900: #00557d;
+    --ax-info-1000: #002942;
+    --ax-info-100A: rgba(0, 120, 210, .067);
+    --ax-info-200A: rgba(0, 110, 183, .11);
+    --ax-info-300A: rgba(0, 96, 160, .157);
+    --ax-info-400A: rgba(0, 90, 146, .247);
+    --ax-brand-magenta-100: #fbf3f6;
+    --ax-brand-magenta-200: #f8eaef;
+    --ax-brand-magenta-300: #f3dde5;
+    --ax-brand-magenta-400: #eccad6;
+    --ax-brand-magenta-500: #c26f92;
+    --ax-brand-magenta-600: #b65681;
+    --ax-brand-magenta-700: #a93d70;
+    --ax-brand-magenta-800: #a33069;
+    --ax-brand-magenta-900: #98185d;
+    --ax-brand-magenta-1000: #52002b;
+    --ax-brand-magenta-100A: rgba(170, 0, 64, .047);
+    --ax-brand-magenta-200A: rgba(170, 0, 61, .082);
+    --ax-brand-magenta-300A: rgba(165, 0, 60, .133);
+    --ax-brand-magenta-400A: rgba(164, 0, 58, .208);
+    --ax-brand-beige-100: #fff4ee;
+    --ax-brand-beige-200: #fdebe0;
+    --ax-brand-beige-300: #fcddcd;
+    --ax-brand-beige-400: #f8c8b1;
+    --ax-brand-beige-500: #c0765d;
+    --ax-brand-beige-600: #ad634a;
+    --ax-brand-beige-700: #915541;
+    --ax-brand-beige-800: #874e3b;
+    --ax-brand-beige-900: #764332;
+    --ax-brand-beige-1000: #3c1f15;
+    --ax-brand-beige-100A: rgba(255, 90, 0, .067);
+    --ax-brand-beige-200A: rgba(239, 91, 0, .12);
+    --ax-brand-beige-300A: rgba(240, 82, 0, .196);
+    --ax-brand-beige-400A: rgba(233, 76, 0, .306);
+    --ax-brand-blue-100: #eef6fc;
+    --ax-brand-blue-200: #e3eff7;
+    --ax-brand-blue-300: #d7e6f0;
+    --ax-brand-blue-400: #c0d6e4;
+    --ax-brand-blue-500: #5a8fae;
+    --ax-brand-blue-600: #457c9d;
+    --ax-brand-blue-700: #246b91;
+    --ax-brand-blue-800: #156389;
+    --ax-brand-blue-900: #00557d;
+    --ax-brand-blue-1000: #002942;
+    --ax-brand-blue-100A: rgba(0, 120, 210, .067);
+    --ax-brand-blue-200A: rgba(0, 110, 183, .11);
+    --ax-brand-blue-300A: rgba(0, 96, 160, .157);
+    --ax-brand-blue-400A: rgba(0, 90, 146, .247);
+    --ax-meta-purple-100: #f8f3ff;
+    --ax-meta-purple-200: #f4ebff;
+    --ax-meta-purple-300: #ebdefc;
+    --ax-meta-purple-400: #decbf7;
+    --ax-meta-purple-500: #a271df;
+    --ax-meta-purple-600: #905bd3;
+    --ax-meta-purple-700: #7c4abf;
+    --ax-meta-purple-800: #7342b6;
+    --ax-meta-purple-900: #6535a7;
+    --ax-meta-purple-1000: #360072;
+    --ax-meta-purple-100A: rgba(107, 0, 255, .047);
+    --ax-meta-purple-200A: rgba(115, 0, 255, .08);
+    --ax-meta-purple-300A: rgba(101, 0, 232, .13);
+    --ax-meta-purple-400A: rgba(94, 0, 216, .204);
+    --ax-meta-lime-100: #f4f9d1;
+    --ax-meta-lime-200: #ebf4a9;
+    --ax-meta-lime-300: #e0ec6b;
+    --ax-meta-lime-400: #d0dc00;
+    --ax-meta-lime-500: #878f00;
+    --ax-meta-lime-600: #757c00;
+    --ax-meta-lime-700: #646900;
+    --ax-meta-lime-800: #5c6100;
+    --ax-meta-lime-900: #515400;
+    --ax-meta-lime-1000: #2a2800;
+    --ax-meta-lime-100A: rgba(195, 222, 0, .18);
+    --ax-meta-lime-200A: rgba(196, 223, 0, .337);
+    --ax-meta-lime-300A: rgba(202, 223, 0, .58);
+    --ax-meta-lime-400A: #d0dc00;
   }
 
-  .dark {
-    --ax-meta-lime-400A: rgba(251, 245, 0, .16);
-    --ax-meta-lime-300A: rgba(252, 233, 0, .114);
-    --ax-meta-lime-200A: rgba(246, 207, 0, .086);
-    --ax-meta-lime-100A: rgba(252, 191, 0, .06);
-    --ax-meta-lime-1000: #c6d200;
-    --ax-meta-lime-900: #a9b325;
-    --ax-meta-lime-800: #99a200;
-    --ax-meta-lime-700: #8f9800;
-    --ax-meta-lime-600: #7c8500;
-    --ax-meta-lime-500: #6a7200;
-    --ax-meta-lime-400: #343900;
-    --ax-meta-lime-300: #292d00;
-    --ax-meta-lime-200: #222500;
-    --ax-meta-lime-100: #1c1f00;
-    --ax-meta-purple-400A: rgba(195, 128, 254, .243);
-    --ax-meta-purple-300A: rgba(195, 112, 252, .176);
-    --ax-meta-purple-200A: rgba(206, 93, 255, .125);
-    --ax-meta-purple-100A: rgba(212, 56, 252, .086);
-    --ax-meta-purple-1000: #efe4fd;
-    --ax-meta-purple-900: #bb9fe3;
-    --ax-meta-purple-800: #ae8cdb;
-    --ax-meta-purple-700: #a581d6;
-    --ax-meta-purple-600: #936aca;
-    --ax-meta-purple-500: #8157bb;
-    --ax-meta-purple-400: #3a2f55;
-    --ax-meta-purple-300: #2e2546;
-    --ax-meta-purple-200: #261e3b;
-    --ax-meta-purple-100: #1f1832;
-    --ax-brand-blue-400A: rgba(0, 167, 254, .247);
-    --ax-brand-blue-300A: rgba(0, 157, 252, .176);
-    --ax-brand-blue-200A: rgba(0, 141, 249, .133);
-    --ax-brand-blue-100A: rgba(0, 120, 247, .1);
-    --ax-brand-blue-1000: #b4ccdc;
-    --ax-brand-blue-900: #93afc0;
-    --ax-brand-blue-800: #7f9fb3;
-    --ax-brand-blue-700: #7396ab;
-    --ax-brand-blue-600: #5b839c;
-    --ax-brand-blue-500: #43718d;
-    --ax-brand-blue-400: #013956;
-    --ax-brand-blue-300: #002d46;
-    --ax-brand-blue-200: #00253c;
-    --ax-brand-blue-100: #001f35;
-    --ax-brand-beige-400A: rgba(252, 131, 64, .247);
-    --ax-brand-beige-300A: rgba(254, 98, 16, .196);
-    --ax-brand-beige-200A: rgba(251, 69, 0, .165);
-    --ax-brand-beige-100A: rgba(254, 29, 0, .13);
-    --ax-brand-beige-1000: #e9c0ad;
-    --ax-brand-beige-900: #d1a08c;
-    --ax-brand-beige-800: #c78e79;
-    --ax-brand-beige-700: #c0836e;
-    --ax-brand-beige-600: #ab705b;
-    --ax-brand-beige-500: #975e4a;
-    --ax-brand-beige-400: #493027;
-    --ax-brand-beige-300: #3d241c;
-    --ax-brand-beige-200: #351d15;
-    --ax-brand-beige-100: #2d160e;
-    --ax-brand-magenta-400A: rgba(254, 100, 129, .267);
-    --ax-brand-magenta-300A: rgba(251, 72, 100, .22);
-    --ax-brand-magenta-200A: rgba(253, 38, 75, .184);
-    --ax-brand-magenta-100A: rgba(250, 2, 38, .153);
-    --ax-brand-magenta-1000: #e6becd;
-    --ax-brand-magenta-900: #cf9eb1;
-    --ax-brand-magenta-800: #c58aa2;
-    --ax-brand-magenta-700: #be7f99;
-    --ax-brand-magenta-600: #b16887;
-    --ax-brand-magenta-500: #a35276;
-    --ax-brand-magenta-400: #4e2a39;
-    --ax-brand-magenta-300: #42202e;
-    --ax-brand-magenta-200: #3a1827;
-    --ax-brand-magenta-100: #321220;
-    --ax-info-400A: rgba(0, 167, 254, .247);
-    --ax-info-300A: rgba(0, 157, 252, .176);
-    --ax-info-200A: rgba(0, 141, 249, .133);
-    --ax-info-100A: rgba(0, 120, 247, .1);
-    --ax-info-1000: #b4ccdc;
-    --ax-info-900: #93afc0;
-    --ax-info-800: #7f9fb3;
-    --ax-info-700: #7396ab;
-    --ax-info-600: #5b839c;
-    --ax-info-500: #43718d;
-    --ax-info-400: #013956;
-    --ax-info-300: #002d46;
-    --ax-info-200: #00253c;
-    --ax-info-100: #001f35;
-    --ax-danger-400A: rgba(255, 54, 37, .337);
-    --ax-danger-300A: rgba(255, 21, 3, .282);
-    --ax-danger-200A: rgba(252, 0, 0, .247);
-    --ax-danger-100A: rgba(255, 0, 0, .21);
-    --ax-danger-1000: #ffb3cd;
-    --ax-danger-900: #f28ea2;
-    --ax-danger-800: #ee7685;
-    --ax-danger-700: #eb6772;
-    --ax-danger-600: #de4a50;
-    --ax-danger-500: #c8343f;
-    --ax-danger-400: #5f2021;
-    --ax-danger-300: #521517;
-    --ax-danger-200: #490b10;
-    --ax-danger-100: #410409;
-    --ax-warning-400A: rgba(253, 96, 8, .294);
-    --ax-warning-300A: rgba(252, 63, 0, .24);
-    --ax-warning-200A: rgba(254, 31, 0, .2);
-    --ax-warning-100A: rgba(252, 0, 0, .173);
-    --ax-warning-1000: #ffbc4b;
-    --ax-warning-900: #ed974b;
-    --ax-warning-800: #e78040;
-    --ax-warning-700: #de753c;
-    --ax-warning-600: #c56333;
-    --ax-warning-500: #af5122;
-    --ax-warning-400: #542b18;
-    --ax-warning-300: #471f0c;
-    --ax-warning-200: #3e1704;
-    --ax-warning-100: #371100;
-    --ax-success-400A: rgba(0, 255, 0, .184);
-    --ax-success-300A: rgba(0, 253, 0, .13);
-    --ax-success-200A: rgba(0, 254, 0, .09);
-    --ax-success-100A: rgba(0, 245, 0, .063);
-    --ax-success-1000: #98d7a7;
-    --ax-success-900: #78ba87;
-    --ax-success-800: #5eab72;
-    --ax-success-700: #4ca265;
-    --ax-success-600: #378f53;
-    --ax-success-500: #207c41;
-    --ax-success-400: #004000;
-    --ax-success-300: #030;
-    --ax-success-200: #002a00;
-    --ax-success-100: #002300;
-    --ax-accent-400A: rgba(47, 142, 254, .275);
-    --ax-accent-300A: rgba(24, 131, 251, .2);
-    --ax-accent-200A: rgba(0, 118, 251, .145);
-    --ax-accent-100A: rgba(0, 103, 250, .11);
-    --ax-accent-1000: #a9cbfa;
-    --ax-accent-900: #84aee6;
-    --ax-accent-800: #6d9ddd;
-    --ax-accent-700: #5f94d8;
-    --ax-accent-600: #4580ca;
-    --ax-accent-500: #2e6db8;
-    --ax-accent-400: #17365c;
-    --ax-accent-300: #102b4b;
-    --ax-accent-200: #0b233f;
-    --ax-accent-100: #091e37;
-    --ax-neutral-400A: rgba(224, 237, 254, .153);
-    --ax-neutral-300A: rgba(215, 222, 250, .11);
-    --ax-neutral-200A: rgba(202, 209, 246, .075);
-    --ax-neutral-100A: rgba(200, 207, 240, .043);
-    --ax-neutral-000: black;
-    --ax-neutral-1000: #dfe1e5;
-    --ax-neutral-900: #a5acb6;
-    --ax-neutral-800: #949ba8;
-    --ax-neutral-700: #8a92a0;
-    --ax-neutral-600: #777f8d;
-    --ax-neutral-500: #656d7b;
-    --ax-neutral-400: #2e3641;
-    --ax-neutral-300: #242b37;
-    --ax-neutral-200: #1c232f;
-    --ax-neutral-100: #161d28;
-  }
-
-  :root, :host, .light {
-    --ax-bg-overlay: rgba(2, 20, 49, .8);
-    --ax-bg-input: rgba(255, 255, 255, .85);
-    --ax-bg-default: #fff;
-    --ax-text-logo: #c30000;
-    --ax-opacity-disabled: .3;
-    --ax-shadow-dialog: 0px 4px 6px 0px rgba(0, 0, 0, .15), 0px 1px 3px -1px rgba(0, 0, 0, .15), 0px 1px 1px 0px rgba(0, 0, 0, .06);
-    --ax-border-focus: var(--ax-neutral-1000);
-    --ax-bg-sunken: var(--ax-neutral-200);
-    --ax-bg-raised: var(--ax-neutral-000);
-  }
-
-  .dark, .dark-theme {
-    --ax-bg-overlay: rgba(2, 20, 49, .8);
-    --ax-bg-sunken: #07090d;
-    --ax-bg-input: rgba(7, 9, 13, .5);
-    --ax-bg-default: #0e151f;
-    --ax-opacity-disabled: .4;
-    --ax-shadow-dialog: 0px 0px 1px 0px rgba(7, 9, 13, 0), 0px 2px 5px 0px rgba(7, 9, 13, .35), 0px 5px 12px 0px rgba(7, 9, 13, .5);
-    --ax-border-focus: var(--ax-neutral-1000);
-    --ax-bg-raised: var(--ax-neutral-200);
-    --ax-text-logo: var(--ax-neutral-1000);
-  }
-
-  :root, :host, .light, .dark {
-    --ax-border-meta-lime-strong: var(--ax-meta-lime-700);
-    --ax-border-meta-lime-subtleA: var(--ax-meta-lime-400A);
-    --ax-border-meta-lime-subtle: var(--ax-meta-lime-400);
-    --ax-border-meta-lime: var(--ax-meta-lime-600);
-    --ax-border-meta-purple-strong: var(--ax-meta-purple-700);
-    --ax-border-meta-purple-subtleA: var(--ax-meta-purple-400A);
-    --ax-border-meta-purple-subtle: var(--ax-meta-purple-400);
-    --ax-border-meta-purple: var(--ax-meta-purple-600);
-    --ax-border-brand-blue-strong: var(--ax-brand-blue-700);
-    --ax-border-brand-blue-subtleA: var(--ax-brand-blue-400A);
-    --ax-border-brand-blue-subtle: var(--ax-brand-blue-400);
-    --ax-border-brand-blue: var(--ax-brand-blue-600);
-    --ax-border-brand-beige-strong: var(--ax-brand-beige-700);
-    --ax-border-brand-beige-subtleA: var(--ax-brand-beige-400A);
-    --ax-border-brand-beige-subtle: var(--ax-brand-beige-400);
-    --ax-border-brand-beige: var(--ax-brand-beige-600);
-    --ax-border-brand-magenta-strong: var(--ax-brand-magenta-700);
-    --ax-border-brand-magenta-subtleA: var(--ax-brand-magenta-400A);
-    --ax-border-brand-magenta-subtle: var(--ax-brand-magenta-400);
-    --ax-border-brand-magenta: var(--ax-brand-magenta-600);
-    --ax-border-info-strong: var(--ax-info-700);
-    --ax-border-info-subtleA: var(--ax-info-400A);
-    --ax-border-info-subtle: var(--ax-info-400);
-    --ax-border-info: var(--ax-info-600);
-    --ax-border-danger-strong: var(--ax-danger-700);
-    --ax-border-danger-subtleA: var(--ax-danger-400A);
-    --ax-border-danger-subtle: var(--ax-danger-400);
-    --ax-border-danger: var(--ax-danger-600);
-    --ax-border-warning-strong: var(--ax-warning-700);
-    --ax-border-warning-subtleA: var(--ax-warning-400A);
-    --ax-border-warning-subtle: var(--ax-warning-400);
-    --ax-border-warning: var(--ax-warning-600);
-    --ax-border-success-strong: var(--ax-success-700);
-    --ax-border-success-subtleA: var(--ax-success-400A);
-    --ax-border-success-subtle: var(--ax-success-400);
-    --ax-border-success: var(--ax-success-600);
-    --ax-border-accent-strong: var(--ax-accent-700);
-    --ax-border-accent-subtleA: var(--ax-accent-400A);
-    --ax-border-accent-subtle: var(--ax-accent-400);
-    --ax-border-accent: var(--ax-accent-600);
-    --ax-border-neutral-strong: var(--ax-neutral-700);
-    --ax-border-neutral-subtleA: var(--ax-neutral-400A);
-    --ax-border-neutral-subtle: var(--ax-neutral-400);
-    --ax-border-neutral: var(--ax-neutral-600);
-    --ax-text-meta-lime-contrast: var(--ax-neutral-000);
-    --ax-text-meta-lime-decoration: var(--ax-meta-lime-600);
-    --ax-text-meta-lime-subtle: var(--ax-meta-lime-800);
-    --ax-text-meta-lime: var(--ax-meta-lime-1000);
-    --ax-text-meta-purple-contrast: var(--ax-neutral-000);
-    --ax-text-meta-purple-decoration: var(--ax-meta-purple-600);
-    --ax-text-meta-purple-subtle: var(--ax-meta-purple-800);
-    --ax-text-meta-purple: var(--ax-meta-purple-1000);
-    --ax-text-brand-blue-contrast: var(--ax-neutral-000);
-    --ax-text-brand-blue-decoration: var(--ax-brand-blue-600);
-    --ax-text-brand-blue-subtle: var(--ax-brand-blue-800);
-    --ax-text-brand-blue: var(--ax-brand-blue-1000);
-    --ax-text-brand-beige-contrast: var(--ax-neutral-000);
-    --ax-text-brand-beige-decoration: var(--ax-brand-beige-600);
-    --ax-text-brand-beige-subtle: var(--ax-brand-beige-800);
-    --ax-text-brand-beige: var(--ax-brand-beige-1000);
-    --ax-text-brand-magenta-contrast: var(--ax-neutral-000);
-    --ax-text-brand-magenta-decoration: var(--ax-brand-magenta-600);
-    --ax-text-brand-magenta-subtle: var(--ax-brand-magenta-800);
-    --ax-text-brand-magenta: var(--ax-brand-magenta-1000);
-    --ax-text-info-contrast: var(--ax-neutral-000);
-    --ax-text-info-decoration: var(--ax-info-600);
-    --ax-text-info-subtle: var(--ax-info-800);
-    --ax-text-info: var(--ax-info-1000);
-    --ax-text-danger-contrast: var(--ax-neutral-000);
-    --ax-text-danger-decoration: var(--ax-danger-600);
-    --ax-text-danger-subtle: var(--ax-danger-800);
-    --ax-text-danger: var(--ax-danger-1000);
-    --ax-text-warning-contrast: var(--ax-neutral-000);
-    --ax-text-warning-decoration: var(--ax-warning-600);
-    --ax-text-warning-subtle: var(--ax-warning-800);
-    --ax-text-warning: var(--ax-warning-1000);
-    --ax-text-success-contrast: var(--ax-neutral-000);
-    --ax-text-success-decoration: var(--ax-success-600);
-    --ax-text-success-subtle: var(--ax-success-800);
-    --ax-text-success: var(--ax-success-1000);
-    --ax-text-accent-contrast: var(--ax-neutral-000);
-    --ax-text-accent-decoration: var(--ax-accent-600);
-    --ax-text-accent-subtle: var(--ax-accent-800);
-    --ax-text-accent: var(--ax-accent-1000);
-    --ax-text-neutral-contrast: var(--ax-neutral-000);
-    --ax-text-neutral-decoration: var(--ax-neutral-600);
-    --ax-text-neutral-subtle: var(--ax-neutral-900);
-    --ax-text-neutral: var(--ax-neutral-1000);
-    --ax-bg-meta-lime-strong-pressed: var(--ax-meta-lime-800);
-    --ax-bg-meta-lime-strong-hover: var(--ax-meta-lime-700);
-    --ax-bg-meta-lime-strong: var(--ax-meta-lime-600);
-    --ax-bg-meta-lime-moderate-pressedA: var(--ax-meta-lime-400A);
-    --ax-bg-meta-lime-moderate-pressed: var(--ax-meta-lime-400);
-    --ax-bg-meta-lime-moderate-hoverA: var(--ax-meta-lime-300A);
-    --ax-bg-meta-lime-moderate-hover: var(--ax-meta-lime-300);
-    --ax-bg-meta-lime-moderateA: var(--ax-meta-lime-200A);
-    --ax-bg-meta-lime-moderate: var(--ax-meta-lime-200);
-    --ax-bg-meta-lime-softA: var(--ax-meta-lime-100A);
-    --ax-bg-meta-lime-soft: var(--ax-meta-lime-100);
-    --ax-bg-meta-purple-strong-pressed: var(--ax-meta-purple-800);
-    --ax-bg-meta-purple-strong-hover: var(--ax-meta-purple-700);
-    --ax-bg-meta-purple-strong: var(--ax-meta-purple-600);
-    --ax-bg-meta-purple-moderate-pressedA: var(--ax-meta-purple-400A);
-    --ax-bg-meta-purple-moderate-pressed: var(--ax-meta-purple-400);
-    --ax-bg-meta-purple-moderate-hoverA: var(--ax-meta-purple-300A);
-    --ax-bg-meta-purple-moderate-hover: var(--ax-meta-purple-300);
-    --ax-bg-meta-purple-moderateA: var(--ax-meta-purple-200A);
-    --ax-bg-meta-purple-moderate: var(--ax-meta-purple-200);
-    --ax-bg-meta-purple-softA: var(--ax-meta-purple-100A);
-    --ax-bg-meta-purple-soft: var(--ax-meta-purple-100);
-    --ax-bg-brand-blue-strong-pressed: var(--ax-brand-blue-800);
-    --ax-bg-brand-blue-strong-hover: var(--ax-brand-blue-700);
-    --ax-bg-brand-blue-strong: var(--ax-brand-blue-600);
-    --ax-bg-brand-blue-moderate-pressedA: var(--ax-brand-blue-400A);
-    --ax-bg-brand-blue-moderate-pressed: var(--ax-brand-blue-400);
-    --ax-bg-brand-blue-moderate-hoverA: var(--ax-brand-blue-300A);
-    --ax-bg-brand-blue-moderate-hover: var(--ax-brand-blue-300);
-    --ax-bg-brand-blue-moderateA: var(--ax-brand-blue-200A);
-    --ax-bg-brand-blue-moderate: var(--ax-brand-blue-200);
-    --ax-bg-brand-blue-softA: var(--ax-brand-blue-100A);
-    --ax-bg-brand-blue-soft: var(--ax-brand-blue-100);
-    --ax-bg-brand-beige-strong-pressed: var(--ax-brand-beige-800);
-    --ax-bg-brand-beige-strong-hover: var(--ax-brand-beige-700);
-    --ax-bg-brand-beige-strong: var(--ax-brand-beige-600);
-    --ax-bg-brand-beige-moderate-pressedA: var(--ax-brand-beige-400A);
-    --ax-bg-brand-beige-moderate-pressed: var(--ax-brand-beige-400);
-    --ax-bg-brand-beige-moderate-hoverA: var(--ax-brand-beige-300A);
-    --ax-bg-brand-beige-moderate-hover: var(--ax-brand-beige-300);
-    --ax-bg-brand-beige-moderateA: var(--ax-brand-beige-200A);
-    --ax-bg-brand-beige-moderate: var(--ax-brand-beige-200);
-    --ax-bg-brand-beige-softA: var(--ax-brand-beige-100A);
-    --ax-bg-brand-beige-soft: var(--ax-brand-beige-100);
-    --ax-bg-brand-magenta-strong-pressed: var(--ax-brand-magenta-800);
-    --ax-bg-brand-magenta-strong-hover: var(--ax-brand-magenta-700);
-    --ax-bg-brand-magenta-strong: var(--ax-brand-magenta-600);
-    --ax-bg-brand-magenta-moderate-pressedA: var(--ax-brand-magenta-400A);
-    --ax-bg-brand-magenta-moderate-pressed: var(--ax-brand-magenta-400);
-    --ax-bg-brand-magenta-moderate-hoverA: var(--ax-brand-magenta-300A);
-    --ax-bg-brand-magenta-moderate-hover: var(--ax-brand-magenta-300);
-    --ax-bg-brand-magenta-moderateA: var(--ax-brand-magenta-200A);
-    --ax-bg-brand-magenta-moderate: var(--ax-brand-magenta-200);
-    --ax-bg-brand-magenta-softA: var(--ax-brand-magenta-100A);
-    --ax-bg-brand-magenta-soft: var(--ax-brand-magenta-100);
-    --ax-bg-info-strong-pressed: var(--ax-info-800);
-    --ax-bg-info-strong-hover: var(--ax-info-700);
-    --ax-bg-info-strong: var(--ax-info-600);
-    --ax-bg-info-moderate-pressedA: var(--ax-info-400A);
-    --ax-bg-info-moderate-pressed: var(--ax-info-400);
-    --ax-bg-info-moderate-hoverA: var(--ax-info-300A);
-    --ax-bg-info-moderate-hover: var(--ax-info-300);
-    --ax-bg-info-moderateA: var(--ax-info-200A);
-    --ax-bg-info-moderate: var(--ax-info-200);
-    --ax-bg-info-softA: var(--ax-info-100A);
-    --ax-bg-info-soft: var(--ax-info-100);
-    --ax-bg-danger-strong-pressed: var(--ax-danger-800);
-    --ax-bg-danger-strong-hover: var(--ax-danger-700);
-    --ax-bg-danger-strong: var(--ax-danger-600);
-    --ax-bg-danger-moderate-pressedA: var(--ax-danger-400A);
-    --ax-bg-danger-moderate-pressed: var(--ax-danger-400);
-    --ax-bg-danger-moderate-hoverA: var(--ax-danger-300A);
-    --ax-bg-danger-moderate-hover: var(--ax-danger-300);
-    --ax-bg-danger-moderateA: var(--ax-danger-200A);
-    --ax-bg-danger-moderate: var(--ax-danger-200);
-    --ax-bg-danger-softA: var(--ax-danger-100A);
-    --ax-bg-danger-soft: var(--ax-danger-100);
-    --ax-bg-warning-strong-pressed: var(--ax-warning-800);
-    --ax-bg-warning-strong-hover: var(--ax-warning-700);
-    --ax-bg-warning-strong: var(--ax-warning-600);
-    --ax-bg-warning-moderate-pressedA: var(--ax-warning-400A);
-    --ax-bg-warning-moderate-pressed: var(--ax-warning-400);
-    --ax-bg-warning-moderate-hoverA: var(--ax-warning-300A);
-    --ax-bg-warning-moderate-hover: var(--ax-warning-300);
-    --ax-bg-warning-moderateA: var(--ax-warning-200A);
-    --ax-bg-warning-moderate: var(--ax-warning-200);
-    --ax-bg-warning-softA: var(--ax-warning-100A);
-    --ax-bg-warning-soft: var(--ax-warning-100);
-    --ax-bg-success-strong-pressed: var(--ax-success-800);
-    --ax-bg-success-strong-hover: var(--ax-success-700);
-    --ax-bg-success-strong: var(--ax-success-600);
-    --ax-bg-success-moderate-pressedA: var(--ax-success-400A);
-    --ax-bg-success-moderate-pressed: var(--ax-success-400);
-    --ax-bg-success-moderate-hoverA: var(--ax-success-300A);
-    --ax-bg-success-moderate-hover: var(--ax-success-300);
-    --ax-bg-success-moderateA: var(--ax-success-200A);
-    --ax-bg-success-moderate: var(--ax-success-200);
-    --ax-bg-success-softA: var(--ax-success-100A);
-    --ax-bg-success-soft: var(--ax-success-100);
-    --ax-bg-accent-strong-pressed: var(--ax-accent-800);
-    --ax-bg-accent-strong-hover: var(--ax-accent-700);
-    --ax-bg-accent-strong: var(--ax-accent-600);
-    --ax-bg-accent-moderate-pressedA: var(--ax-accent-400A);
-    --ax-bg-accent-moderate-pressed: var(--ax-accent-400);
-    --ax-bg-accent-moderate-hoverA: var(--ax-accent-300A);
-    --ax-bg-accent-moderate-hover: var(--ax-accent-300);
-    --ax-bg-accent-moderateA: var(--ax-accent-200A);
-    --ax-bg-accent-moderate: var(--ax-accent-200);
-    --ax-bg-accent-softA: var(--ax-accent-100A);
-    --ax-bg-accent-soft: var(--ax-accent-100);
-    --ax-bg-neutral-strong-pressed: var(--ax-neutral-900);
-    --ax-bg-neutral-strong-hover: var(--ax-neutral-800);
-    --ax-bg-neutral-strong: var(--ax-neutral-700);
-    --ax-bg-neutral-moderate-pressedA: var(--ax-neutral-400A);
-    --ax-bg-neutral-moderate-pressed: var(--ax-neutral-400);
-    --ax-bg-neutral-moderate-hoverA: var(--ax-neutral-300A);
-    --ax-bg-neutral-moderate-hover: var(--ax-neutral-300);
-    --ax-bg-neutral-moderateA: var(--ax-neutral-200A);
-    --ax-bg-neutral-moderate: var(--ax-neutral-200);
-    --ax-bg-neutral-softA: var(--ax-neutral-100A);
+  .dark {
+    --ax-neutral-100: #161d28;
+    --ax-neutral-200: #1c232f;
+    --ax-neutral-300: #242b37;
+    --ax-neutral-400: #2e3641;
+    --ax-neutral-500: #656d7b;
+    --ax-neutral-600: #777f8d;
+    --ax-neutral-700: #8a92a0;
+    --ax-neutral-800: #949ba8;
+    --ax-neutral-900: #a5acb6;
+    --ax-neutral-1000: #dfe1e5;
+    --ax-neutral-000: black;
+    --ax-neutral-100A: rgba(200, 207, 240, .043);
+    --ax-neutral-200A: rgba(202, 209, 246, .075);
+    --ax-neutral-300A: rgba(215, 222, 250, .11);
+    --ax-neutral-400A: rgba(224, 237, 254, .153);
+    --ax-accent-100: #091e37;
+    --ax-accent-200: #0b233f;
+    --ax-accent-300: #102b4b;
+    --ax-accent-400: #17365c;
+    --ax-accent-500: #2e6db8;
+    --ax-accent-600: #4580ca;
+    --ax-accent-700: #5f94d8;
+    --ax-accent-800: #6d9ddd;
+    --ax-accent-900: #84aee6;
+    --ax-accent-1000: #a9cbfa;
+    --ax-accent-100A: rgba(0, 103, 250, .11);
+    --ax-accent-200A: rgba(0, 118, 251, .145);
+    --ax-accent-300A: rgba(24, 131, 251, .2);
+    --ax-accent-400A: rgba(47, 142, 254, .275);
+    --ax-success-100: #002300;
+    --ax-success-200: #002a00;
+    --ax-success-300: #030;
+    --ax-success-400: #004000;
+    --ax-success-500: #207c41;
+    --ax-success-600: #378f53;
+    --ax-success-700: #4ca265;
+    --ax-success-800: #5eab72;
+    --ax-success-900: #78ba87;
+    --ax-success-1000: #98d7a7;
+    --ax-success-100A: rgba(0, 245, 0, .063);
+    --ax-success-200A: rgba(0, 254, 0, .09);
+    --ax-success-300A: rgba(0, 253, 0, .13);
+    --ax-success-400A: rgba(0, 255, 0, .184);
+    --ax-warning-100: #371100;
+    --ax-warning-200: #3e1704;
+    --ax-warning-300: #471f0c;
+    --ax-warning-400: #542b18;
+    --ax-warning-500: #af5122;
+    --ax-warning-600: #c56333;
+    --ax-warning-700: #de753c;
+    --ax-warning-800: #e78040;
+    --ax-warning-900: #ed974b;
+    --ax-warning-1000: #ffbc4b;
+    --ax-warning-100A: rgba(252, 0, 0, .173);
+    --ax-warning-200A: rgba(254, 31, 0, .2);
+    --ax-warning-300A: rgba(252, 63, 0, .24);
+    --ax-warning-400A: rgba(253, 96, 8, .294);
+    --ax-danger-100: #410409;
+    --ax-danger-200: #490b10;
+    --ax-danger-300: #521517;
+    --ax-danger-400: #5f2021;
+    --ax-danger-500: #c8343f;
+    --ax-danger-600: #de4a50;
+    --ax-danger-700: #eb6772;
+    --ax-danger-800: #ee7685;
+    --ax-danger-900: #f28ea2;
+    --ax-danger-1000: #ffb3cd;
+    --ax-danger-100A: rgba(255, 0, 0, .21);
+    --ax-danger-200A: rgba(252, 0, 0, .247);
+    --ax-danger-300A: rgba(255, 21, 3, .282);
+    --ax-danger-400A: rgba(255, 54, 37, .337);
+    --ax-info-100: #001f35;
+    --ax-info-200: #00253c;
+    --ax-info-300: #002d46;
+    --ax-info-400: #013956;
+    --ax-info-500: #43718d;
+    --ax-info-600: #5b839c;
+    --ax-info-700: #7396ab;
+    --ax-info-800: #7f9fb3;
+    --ax-info-900: #93afc0;
+    --ax-info-1000: #b4ccdc;
+    --ax-info-100A: rgba(0, 120, 247, .1);
+    --ax-info-200A: rgba(0, 141, 249, .133);
+    --ax-info-300A: rgba(0, 157, 252, .176);
+    --ax-info-400A: rgba(0, 167, 254, .247);
+    --ax-brand-magenta-100: #321220;
+    --ax-brand-magenta-200: #3a1827;
+    --ax-brand-magenta-300: #42202e;
+    --ax-brand-magenta-400: #4e2a39;
+    --ax-brand-magenta-500: #a35276;
+    --ax-brand-magenta-600: #b16887;
+    --ax-brand-magenta-700: #be7f99;
+    --ax-brand-magenta-800: #c58aa2;
+    --ax-brand-magenta-900: #cf9eb1;
+    --ax-brand-magenta-1000: #e6becd;
+    --ax-brand-magenta-100A: rgba(250, 2, 38, .153);
+    --ax-brand-magenta-200A: rgba(253, 38, 75, .184);
+    --ax-brand-magenta-300A: rgba(251, 72, 100, .22);
+    --ax-brand-magenta-400A: rgba(254, 100, 129, .267);
+    --ax-brand-beige-100: #2d160e;
+    --ax-brand-beige-200: #351d15;
+    --ax-brand-beige-300: #3d241c;
+    --ax-brand-beige-400: #493027;
+    --ax-brand-beige-500: #975e4a;
+    --ax-brand-beige-600: #ab705b;
+    --ax-brand-beige-700: #c0836e;
+    --ax-brand-beige-800: #c78e79;
+    --ax-brand-beige-900: #d1a08c;
+    --ax-brand-beige-1000: #e9c0ad;
+    --ax-brand-beige-100A: rgba(254, 29, 0, .13);
+    --ax-brand-beige-200A: rgba(251, 69, 0, .165);
+    --ax-brand-beige-300A: rgba(254, 98, 16, .196);
+    --ax-brand-beige-400A: rgba(252, 131, 64, .247);
+    --ax-brand-blue-100: #001f35;
+    --ax-brand-blue-200: #00253c;
+    --ax-brand-blue-300: #002d46;
+    --ax-brand-blue-400: #013956;
+    --ax-brand-blue-500: #43718d;
+    --ax-brand-blue-600: #5b839c;
+    --ax-brand-blue-700: #7396ab;
+    --ax-brand-blue-800: #7f9fb3;
+    --ax-brand-blue-900: #93afc0;
+    --ax-brand-blue-1000: #b4ccdc;
+    --ax-brand-blue-100A: rgba(0, 120, 247, .1);
+    --ax-brand-blue-200A: rgba(0, 141, 249, .133);
+    --ax-brand-blue-300A: rgba(0, 157, 252, .176);
+    --ax-brand-blue-400A: rgba(0, 167, 254, .247);
+    --ax-meta-purple-100: #1f1832;
+    --ax-meta-purple-200: #261e3b;
+    --ax-meta-purple-300: #2e2546;
+    --ax-meta-purple-400: #3a2f55;
+    --ax-meta-purple-500: #8157bb;
+    --ax-meta-purple-600: #936aca;
+    --ax-meta-purple-700: #a581d6;
+    --ax-meta-purple-800: #ae8cdb;
+    --ax-meta-purple-900: #bb9fe3;
+    --ax-meta-purple-1000: #efe4fd;
+    --ax-meta-purple-100A: rgba(212, 56, 252, .086);
+    --ax-meta-purple-200A: rgba(206, 93, 255, .125);
+    --ax-meta-purple-300A: rgba(195, 112, 252, .176);
+    --ax-meta-purple-400A: rgba(195, 128, 254, .243);
+    --ax-meta-lime-100: #1c1f00;
+    --ax-meta-lime-200: #222500;
+    --ax-meta-lime-300: #292d00;
+    --ax-meta-lime-400: #343900;
+    --ax-meta-lime-500: #6a7200;
+    --ax-meta-lime-600: #7c8500;
+    --ax-meta-lime-700: #8f9800;
+    --ax-meta-lime-800: #99a200;
+    --ax-meta-lime-900: #a9b325;
+    --ax-meta-lime-1000: #c6d200;
+    --ax-meta-lime-100A: rgba(252, 191, 0, .06);
+    --ax-meta-lime-200A: rgba(246, 207, 0, .086);
+    --ax-meta-lime-300A: rgba(252, 233, 0, .114);
+    --ax-meta-lime-400A: rgba(251, 245, 0, .16);
+  }
+
+  :root, :host, .light {
+    --ax-shadow-dialog: 0px 4px 6px 0px rgba(0, 0, 0, .15), 0px 1px 3px -1px rgba(0, 0, 0, .15), 0px 1px 1px 0px rgba(0, 0, 0, .06);
+    --ax-opacity-disabled: .3;
+    --ax-text-logo: #c30000;
+    --ax-bg-default: #fff;
+    --ax-bg-input: rgba(255, 255, 255, .85);
+    --ax-bg-overlay: rgba(2, 20, 49, .8);
+    --ax-bg-raised: var(--ax-neutral-000);
+    --ax-bg-sunken: var(--ax-neutral-200);
+    --ax-border-focus: var(--ax-neutral-1000);
+  }
+
+  .dark, .dark-theme {
+    --ax-shadow-dialog: 0px 0px 1px 0px rgba(7, 9, 13, 0), 0px 2px 5px 0px rgba(7, 9, 13, .35), 0px 5px 12px 0px rgba(7, 9, 13, .5);
+    --ax-opacity-disabled: .4;
+    --ax-bg-default: #0e151f;
+    --ax-bg-input: rgba(7, 9, 13, .5);
+    --ax-bg-sunken: #07090d;
+    --ax-bg-overlay: rgba(2, 20, 49, .8);
+    --ax-text-logo: var(--ax-neutral-1000);
+    --ax-bg-raised: var(--ax-neutral-200);
+    --ax-border-focus: var(--ax-neutral-1000);
+  }
+
+  :root, :host, .light, .dark {
     --ax-bg-neutral-soft: var(--ax-neutral-100);
+    --ax-bg-neutral-softA: var(--ax-neutral-100A);
+    --ax-bg-neutral-moderate: var(--ax-neutral-200);
+    --ax-bg-neutral-moderateA: var(--ax-neutral-200A);
+    --ax-bg-neutral-moderate-hover: var(--ax-neutral-300);
+    --ax-bg-neutral-moderate-hoverA: var(--ax-neutral-300A);
+    --ax-bg-neutral-moderate-pressed: var(--ax-neutral-400);
+    --ax-bg-neutral-moderate-pressedA: var(--ax-neutral-400A);
+    --ax-bg-neutral-strong: var(--ax-neutral-700);
+    --ax-bg-neutral-strong-hover: var(--ax-neutral-800);
+    --ax-bg-neutral-strong-pressed: var(--ax-neutral-900);
+    --ax-bg-accent-soft: var(--ax-accent-100);
+    --ax-bg-accent-softA: var(--ax-accent-100A);
+    --ax-bg-accent-moderate: var(--ax-accent-200);
+    --ax-bg-accent-moderateA: var(--ax-accent-200A);
+    --ax-bg-accent-moderate-hover: var(--ax-accent-300);
+    --ax-bg-accent-moderate-hoverA: var(--ax-accent-300A);
+    --ax-bg-accent-moderate-pressed: var(--ax-accent-400);
+    --ax-bg-accent-moderate-pressedA: var(--ax-accent-400A);
+    --ax-bg-accent-strong: var(--ax-accent-600);
+    --ax-bg-accent-strong-hover: var(--ax-accent-700);
+    --ax-bg-accent-strong-pressed: var(--ax-accent-800);
+    --ax-bg-success-soft: var(--ax-success-100);
+    --ax-bg-success-softA: var(--ax-success-100A);
+    --ax-bg-success-moderate: var(--ax-success-200);
+    --ax-bg-success-moderateA: var(--ax-success-200A);
+    --ax-bg-success-moderate-hover: var(--ax-success-300);
+    --ax-bg-success-moderate-hoverA: var(--ax-success-300A);
+    --ax-bg-success-moderate-pressed: var(--ax-success-400);
+    --ax-bg-success-moderate-pressedA: var(--ax-success-400A);
+    --ax-bg-success-strong: var(--ax-success-600);
+    --ax-bg-success-strong-hover: var(--ax-success-700);
+    --ax-bg-success-strong-pressed: var(--ax-success-800);
+    --ax-bg-warning-soft: var(--ax-warning-100);
+    --ax-bg-warning-softA: var(--ax-warning-100A);
+    --ax-bg-warning-moderate: var(--ax-warning-200);
+    --ax-bg-warning-moderateA: var(--ax-warning-200A);
+    --ax-bg-warning-moderate-hover: var(--ax-warning-300);
+    --ax-bg-warning-moderate-hoverA: var(--ax-warning-300A);
+    --ax-bg-warning-moderate-pressed: var(--ax-warning-400);
+    --ax-bg-warning-moderate-pressedA: var(--ax-warning-400A);
+    --ax-bg-warning-strong: var(--ax-warning-600);
+    --ax-bg-warning-strong-hover: var(--ax-warning-700);
+    --ax-bg-warning-strong-pressed: var(--ax-warning-800);
+    --ax-bg-danger-soft: var(--ax-danger-100);
+    --ax-bg-danger-softA: var(--ax-danger-100A);
+    --ax-bg-danger-moderate: var(--ax-danger-200);
+    --ax-bg-danger-moderateA: var(--ax-danger-200A);
+    --ax-bg-danger-moderate-hover: var(--ax-danger-300);
+    --ax-bg-danger-moderate-hoverA: var(--ax-danger-300A);
+    --ax-bg-danger-moderate-pressed: var(--ax-danger-400);
+    --ax-bg-danger-moderate-pressedA: var(--ax-danger-400A);
+    --ax-bg-danger-strong: var(--ax-danger-600);
+    --ax-bg-danger-strong-hover: var(--ax-danger-700);
+    --ax-bg-danger-strong-pressed: var(--ax-danger-800);
+    --ax-bg-info-soft: var(--ax-info-100);
+    --ax-bg-info-softA: var(--ax-info-100A);
+    --ax-bg-info-moderate: var(--ax-info-200);
+    --ax-bg-info-moderateA: var(--ax-info-200A);
+    --ax-bg-info-moderate-hover: var(--ax-info-300);
+    --ax-bg-info-moderate-hoverA: var(--ax-info-300A);
+    --ax-bg-info-moderate-pressed: var(--ax-info-400);
+    --ax-bg-info-moderate-pressedA: var(--ax-info-400A);
+    --ax-bg-info-strong: var(--ax-info-600);
+    --ax-bg-info-strong-hover: var(--ax-info-700);
+    --ax-bg-info-strong-pressed: var(--ax-info-800);
+    --ax-bg-brand-magenta-soft: var(--ax-brand-magenta-100);
+    --ax-bg-brand-magenta-softA: var(--ax-brand-magenta-100A);
+    --ax-bg-brand-magenta-moderate: var(--ax-brand-magenta-200);
+    --ax-bg-brand-magenta-moderateA: var(--ax-brand-magenta-200A);
+    --ax-bg-brand-magenta-moderate-hover: var(--ax-brand-magenta-300);
+    --ax-bg-brand-magenta-moderate-hoverA: var(--ax-brand-magenta-300A);
+    --ax-bg-brand-magenta-moderate-pressed: var(--ax-brand-magenta-400);
+    --ax-bg-brand-magenta-moderate-pressedA: var(--ax-brand-magenta-400A);
+    --ax-bg-brand-magenta-strong: var(--ax-brand-magenta-600);
+    --ax-bg-brand-magenta-strong-hover: var(--ax-brand-magenta-700);
+    --ax-bg-brand-magenta-strong-pressed: var(--ax-brand-magenta-800);
+    --ax-bg-brand-beige-soft: var(--ax-brand-beige-100);
+    --ax-bg-brand-beige-softA: var(--ax-brand-beige-100A);
+    --ax-bg-brand-beige-moderate: var(--ax-brand-beige-200);
+    --ax-bg-brand-beige-moderateA: var(--ax-brand-beige-200A);
+    --ax-bg-brand-beige-moderate-hover: var(--ax-brand-beige-300);
+    --ax-bg-brand-beige-moderate-hoverA: var(--ax-brand-beige-300A);
+    --ax-bg-brand-beige-moderate-pressed: var(--ax-brand-beige-400);
+    --ax-bg-brand-beige-moderate-pressedA: var(--ax-brand-beige-400A);
+    --ax-bg-brand-beige-strong: var(--ax-brand-beige-600);
+    --ax-bg-brand-beige-strong-hover: var(--ax-brand-beige-700);
+    --ax-bg-brand-beige-strong-pressed: var(--ax-brand-beige-800);
+    --ax-bg-brand-blue-soft: var(--ax-brand-blue-100);
+    --ax-bg-brand-blue-softA: var(--ax-brand-blue-100A);
+    --ax-bg-brand-blue-moderate: var(--ax-brand-blue-200);
+    --ax-bg-brand-blue-moderateA: var(--ax-brand-blue-200A);
+    --ax-bg-brand-blue-moderate-hover: var(--ax-brand-blue-300);
+    --ax-bg-brand-blue-moderate-hoverA: var(--ax-brand-blue-300A);
+    --ax-bg-brand-blue-moderate-pressed: var(--ax-brand-blue-400);
+    --ax-bg-brand-blue-moderate-pressedA: var(--ax-brand-blue-400A);
+    --ax-bg-brand-blue-strong: var(--ax-brand-blue-600);
+    --ax-bg-brand-blue-strong-hover: var(--ax-brand-blue-700);
+    --ax-bg-brand-blue-strong-pressed: var(--ax-brand-blue-800);
+    --ax-bg-meta-purple-soft: var(--ax-meta-purple-100);
+    --ax-bg-meta-purple-softA: var(--ax-meta-purple-100A);
+    --ax-bg-meta-purple-moderate: var(--ax-meta-purple-200);
+    --ax-bg-meta-purple-moderateA: var(--ax-meta-purple-200A);
+    --ax-bg-meta-purple-moderate-hover: var(--ax-meta-purple-300);
+    --ax-bg-meta-purple-moderate-hoverA: var(--ax-meta-purple-300A);
+    --ax-bg-meta-purple-moderate-pressed: var(--ax-meta-purple-400);
+    --ax-bg-meta-purple-moderate-pressedA: var(--ax-meta-purple-400A);
+    --ax-bg-meta-purple-strong: var(--ax-meta-purple-600);
+    --ax-bg-meta-purple-strong-hover: var(--ax-meta-purple-700);
+    --ax-bg-meta-purple-strong-pressed: var(--ax-meta-purple-800);
+    --ax-bg-meta-lime-soft: var(--ax-meta-lime-100);
+    --ax-bg-meta-lime-softA: var(--ax-meta-lime-100A);
+    --ax-bg-meta-lime-moderate: var(--ax-meta-lime-200);
+    --ax-bg-meta-lime-moderateA: var(--ax-meta-lime-200A);
+    --ax-bg-meta-lime-moderate-hover: var(--ax-meta-lime-300);
+    --ax-bg-meta-lime-moderate-hoverA: var(--ax-meta-lime-300A);
+    --ax-bg-meta-lime-moderate-pressed: var(--ax-meta-lime-400);
+    --ax-bg-meta-lime-moderate-pressedA: var(--ax-meta-lime-400A);
+    --ax-bg-meta-lime-strong: var(--ax-meta-lime-600);
+    --ax-bg-meta-lime-strong-hover: var(--ax-meta-lime-700);
+    --ax-bg-meta-lime-strong-pressed: var(--ax-meta-lime-800);
+    --ax-text-neutral: var(--ax-neutral-1000);
+    --ax-text-neutral-subtle: var(--ax-neutral-900);
+    --ax-text-neutral-decoration: var(--ax-neutral-600);
+    --ax-text-neutral-contrast: var(--ax-neutral-000);
+    --ax-text-accent: var(--ax-accent-1000);
+    --ax-text-accent-subtle: var(--ax-accent-800);
+    --ax-text-accent-decoration: var(--ax-accent-600);
+    --ax-text-accent-contrast: var(--ax-neutral-000);
+    --ax-text-success: var(--ax-success-1000);
+    --ax-text-success-subtle: var(--ax-success-800);
+    --ax-text-success-decoration: var(--ax-success-600);
+    --ax-text-success-contrast: var(--ax-neutral-000);
+    --ax-text-warning: var(--ax-warning-1000);
+    --ax-text-warning-subtle: var(--ax-warning-800);
+    --ax-text-warning-decoration: var(--ax-warning-600);
+    --ax-text-warning-contrast: var(--ax-neutral-000);
+    --ax-text-danger: var(--ax-danger-1000);
+    --ax-text-danger-subtle: var(--ax-danger-800);
+    --ax-text-danger-decoration: var(--ax-danger-600);
+    --ax-text-danger-contrast: var(--ax-neutral-000);
+    --ax-text-info: var(--ax-info-1000);
+    --ax-text-info-subtle: var(--ax-info-800);
+    --ax-text-info-decoration: var(--ax-info-600);
+    --ax-text-info-contrast: var(--ax-neutral-000);
+    --ax-text-brand-magenta: var(--ax-brand-magenta-1000);
+    --ax-text-brand-magenta-subtle: var(--ax-brand-magenta-800);
+    --ax-text-brand-magenta-decoration: var(--ax-brand-magenta-600);
+    --ax-text-brand-magenta-contrast: var(--ax-neutral-000);
+    --ax-text-brand-beige: var(--ax-brand-beige-1000);
+    --ax-text-brand-beige-subtle: var(--ax-brand-beige-800);
+    --ax-text-brand-beige-decoration: var(--ax-brand-beige-600);
+    --ax-text-brand-beige-contrast: var(--ax-neutral-000);
+    --ax-text-brand-blue: var(--ax-brand-blue-1000);
+    --ax-text-brand-blue-subtle: var(--ax-brand-blue-800);
+    --ax-text-brand-blue-decoration: var(--ax-brand-blue-600);
+    --ax-text-brand-blue-contrast: var(--ax-neutral-000);
+    --ax-text-meta-purple: var(--ax-meta-purple-1000);
+    --ax-text-meta-purple-subtle: var(--ax-meta-purple-800);
+    --ax-text-meta-purple-decoration: var(--ax-meta-purple-600);
+    --ax-text-meta-purple-contrast: var(--ax-neutral-000);
+    --ax-text-meta-lime: var(--ax-meta-lime-1000);
+    --ax-text-meta-lime-subtle: var(--ax-meta-lime-800);
+    --ax-text-meta-lime-decoration: var(--ax-meta-lime-600);
+    --ax-text-meta-lime-contrast: var(--ax-neutral-000);
+    --ax-border-neutral: var(--ax-neutral-600);
+    --ax-border-neutral-subtle: var(--ax-neutral-400);
+    --ax-border-neutral-subtleA: var(--ax-neutral-400A);
+    --ax-border-neutral-strong: var(--ax-neutral-700);
+    --ax-border-accent: var(--ax-accent-600);
+    --ax-border-accent-subtle: var(--ax-accent-400);
+    --ax-border-accent-subtleA: var(--ax-accent-400A);
+    --ax-border-accent-strong: var(--ax-accent-700);
+    --ax-border-success: var(--ax-success-600);
+    --ax-border-success-subtle: var(--ax-success-400);
+    --ax-border-success-subtleA: var(--ax-success-400A);
+    --ax-border-success-strong: var(--ax-success-700);
+    --ax-border-warning: var(--ax-warning-600);
+    --ax-border-warning-subtle: var(--ax-warning-400);
+    --ax-border-warning-subtleA: var(--ax-warning-400A);
+    --ax-border-warning-strong: var(--ax-warning-700);
+    --ax-border-danger: var(--ax-danger-600);
+    --ax-border-danger-subtle: var(--ax-danger-400);
+    --ax-border-danger-subtleA: var(--ax-danger-400A);
+    --ax-border-danger-strong: var(--ax-danger-700);
+    --ax-border-info: var(--ax-info-600);
+    --ax-border-info-subtle: var(--ax-info-400);
+    --ax-border-info-subtleA: var(--ax-info-400A);
+    --ax-border-info-strong: var(--ax-info-700);
+    --ax-border-brand-magenta: var(--ax-brand-magenta-600);
+    --ax-border-brand-magenta-subtle: var(--ax-brand-magenta-400);
+    --ax-border-brand-magenta-subtleA: var(--ax-brand-magenta-400A);
+    --ax-border-brand-magenta-strong: var(--ax-brand-magenta-700);
+    --ax-border-brand-beige: var(--ax-brand-beige-600);
+    --ax-border-brand-beige-subtle: var(--ax-brand-beige-400);
+    --ax-border-brand-beige-subtleA: var(--ax-brand-beige-400A);
+    --ax-border-brand-beige-strong: var(--ax-brand-beige-700);
+    --ax-border-brand-blue: var(--ax-brand-blue-600);
+    --ax-border-brand-blue-subtle: var(--ax-brand-blue-400);
+    --ax-border-brand-blue-subtleA: var(--ax-brand-blue-400A);
+    --ax-border-brand-blue-strong: var(--ax-brand-blue-700);
+    --ax-border-meta-purple: var(--ax-meta-purple-600);
+    --ax-border-meta-purple-subtle: var(--ax-meta-purple-400);
+    --ax-border-meta-purple-subtleA: var(--ax-meta-purple-400A);
+    --ax-border-meta-purple-strong: var(--ax-meta-purple-700);
+    --ax-border-meta-lime: var(--ax-meta-lime-600);
+    --ax-border-meta-lime-subtle: var(--ax-meta-lime-400);
+    --ax-border-meta-lime-subtleA: var(--ax-meta-lime-400A);
+    --ax-border-meta-lime-strong: var(--ax-meta-lime-700);
   }
 
   :root, :host {
-    --ax-version: "7.22.0";
-    --ax-font-weight-regular: 400;
-    --ax-font-weight-bold: 600;
-    --ax-font-size-small: .875rem;
-    --ax-font-size-medium: 1rem;
-    --ax-font-size-large: 1.125rem;
-    --ax-font-size-xlarge: 1.25rem;
-    --ax-font-size-heading-xsmall: 1.125rem;
-    --ax-font-size-heading-small: 1.25rem;
-    --ax-font-size-heading-medium: 1.5rem;
-    --ax-font-size-heading-large: 1.75rem;
-    --ax-font-size-heading-xlarge: 2rem;
-    --ax-font-size-heading-2xlarge: 2.5rem;
-    --ax-font-line-height-medium: 1.25rem;
-    --ax-font-line-height-large: 1.5rem;
-    --ax-font-line-height-xlarge: 1.75rem;
-    --ax-font-line-height-heading-xsmall: 1.5rem;
-    --ax-font-line-height-heading-small: 1.75rem;
-    --ax-font-line-height-heading-medium: 2rem;
-    --ax-font-line-height-heading-large: 2.25rem;
-    --ax-font-line-height-heading-xlarge: 2.5rem;
-    --ax-font-line-height-heading-2xlarge: 3.25rem;
-    --ax-font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
-    --ax-breakpoint-2xl-down: 1439px;
-    --ax-breakpoint-2xl: 1440px;
-    --ax-breakpoint-xl-down: 1279px;
-    --ax-breakpoint-xl: 1280px;
-    --ax-breakpoint-lg-down: 1023px;
-    --ax-breakpoint-lg: 1024px;
-    --ax-breakpoint-md-down: 767px;
-    --ax-breakpoint-md: 768px;
-    --ax-breakpoint-sm-down: 479px;
-    --ax-breakpoint-sm: 480px;
-    --ax-breakpoint-xs: 0;
-    --ax-border-radius-xlarge: 12px;
-    --ax-border-radius-large: 8px;
-    --ax-border-radius-medium: 4px;
-    --ax-border-radius-small: 2px;
-    --ax-border-radius-full: 9999px;
-    --ax-radius-full: 9999px;
-    --ax-radius-12: 12px;
-    --ax-radius-8: 8px;
-    --ax-radius-4: 4px;
-    --ax-radius-2: 2px;
-    --ax-space-128: 8rem;
-    --ax-space-96: 6rem;
-    --ax-space-80: 5rem;
-    --ax-space-72: 4.5rem;
-    --ax-space-64: 4rem;
-    --ax-space-56: 3.5rem;
-    --ax-space-48: 3rem;
-    --ax-space-44: 2.75rem;
-    --ax-space-40: 2.5rem;
-    --ax-space-36: 2.25rem;
-    --ax-space-32: 2rem;
-    --ax-space-28: 1.75rem;
-    --ax-space-24: 1.5rem;
-    --ax-space-20: 1.25rem;
-    --ax-space-16: 1rem;
-    --ax-space-12: .75rem;
-    --ax-space-8: .5rem;
-    --ax-space-6: .375rem;
-    --ax-space-4: .25rem;
-    --ax-space-2: .125rem;
-    --ax-space-1: .0625rem;
+    --ax-version: "7.23.0";
     --ax-space-0: 0rem;
-  }
-
-  [data-color-role="neutral"] {
-    --ax-border-strong: var(--ax-border-neutral-strong);
-    --ax-border-subtleA: var(--ax-border-neutral-subtleA);
-    --ax-border-subtle: var(--ax-border-neutral-subtle);
-    --ax-border-default: var(--ax-border-neutral);
-    --ax-text-contrast: var(--ax-text-neutral-contrast);
-    --ax-text-decoration: var(--ax-text-neutral-decoration);
-    --ax-text-subtle: var(--ax-text-neutral-subtle);
-    --ax-text-default: var(--ax-text-neutral);
-    --ax-bg-strong-pressed: var(--ax-bg-neutral-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-neutral-strong-hover);
-    --ax-bg-strong: var(--ax-bg-neutral-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-neutral-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-neutral-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-neutral-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-neutral-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-neutral-moderateA);
-    --ax-bg-moderate: var(--ax-bg-neutral-moderate);
-    --ax-bg-softA: var(--ax-bg-neutral-softA);
+    --ax-space-1: .0625rem;
+    --ax-space-2: .125rem;
+    --ax-space-4: .25rem;
+    --ax-space-6: .375rem;
+    --ax-space-8: .5rem;
+    --ax-space-12: .75rem;
+    --ax-space-16: 1rem;
+    --ax-space-20: 1.25rem;
+    --ax-space-24: 1.5rem;
+    --ax-space-28: 1.75rem;
+    --ax-space-32: 2rem;
+    --ax-space-36: 2.25rem;
+    --ax-space-40: 2.5rem;
+    --ax-space-44: 2.75rem;
+    --ax-space-48: 3rem;
+    --ax-space-56: 3.5rem;
+    --ax-space-64: 4rem;
+    --ax-space-72: 4.5rem;
+    --ax-space-80: 5rem;
+    --ax-space-96: 6rem;
+    --ax-space-128: 8rem;
+    --ax-radius-2: 2px;
+    --ax-radius-4: 4px;
+    --ax-radius-8: 8px;
+    --ax-radius-12: 12px;
+    --ax-radius-full: 9999px;
+    --ax-border-radius-full: 9999px;
+    --ax-border-radius-small: 2px;
+    --ax-border-radius-medium: 4px;
+    --ax-border-radius-large: 8px;
+    --ax-border-radius-xlarge: 12px;
+    --ax-breakpoint-xs: 0;
+    --ax-breakpoint-sm: 480px;
+    --ax-breakpoint-sm-down: 479px;
+    --ax-breakpoint-md: 768px;
+    --ax-breakpoint-md-down: 767px;
+    --ax-breakpoint-lg: 1024px;
+    --ax-breakpoint-lg-down: 1023px;
+    --ax-breakpoint-xl: 1280px;
+    --ax-breakpoint-xl-down: 1279px;
+    --ax-breakpoint-2xl: 1440px;
+    --ax-breakpoint-2xl-down: 1439px;
+    --ax-font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
+    --ax-font-line-height-heading-2xlarge: 3.25rem;
+    --ax-font-line-height-heading-xlarge: 2.5rem;
+    --ax-font-line-height-heading-large: 2.25rem;
+    --ax-font-line-height-heading-medium: 2rem;
+    --ax-font-line-height-heading-small: 1.75rem;
+    --ax-font-line-height-heading-xsmall: 1.5rem;
+    --ax-font-line-height-xlarge: 1.75rem;
+    --ax-font-line-height-large: 1.5rem;
+    --ax-font-line-height-medium: 1.25rem;
+    --ax-font-size-heading-2xlarge: 2.5rem;
+    --ax-font-size-heading-xlarge: 2rem;
+    --ax-font-size-heading-large: 1.75rem;
+    --ax-font-size-heading-medium: 1.5rem;
+    --ax-font-size-heading-small: 1.25rem;
+    --ax-font-size-heading-xsmall: 1.125rem;
+    --ax-font-size-xlarge: 1.25rem;
+    --ax-font-size-large: 1.125rem;
+    --ax-font-size-medium: 1rem;
+    --ax-font-size-small: .875rem;
+    --ax-font-weight-bold: 600;
+    --ax-font-weight-regular: 400;
+  }
+
+  [data-color="neutral"] {
     --ax-bg-soft: var(--ax-bg-neutral-soft);
+    --ax-bg-softA: var(--ax-bg-neutral-softA);
+    --ax-bg-moderate: var(--ax-bg-neutral-moderate);
+    --ax-bg-moderateA: var(--ax-bg-neutral-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-neutral-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-neutral-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-neutral-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-neutral-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-neutral-strong);
+    --ax-bg-strong-hover: var(--ax-bg-neutral-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-neutral-strong-pressed);
+    --ax-text-default: var(--ax-text-neutral);
+    --ax-text-subtle: var(--ax-text-neutral-subtle);
+    --ax-text-decoration: var(--ax-text-neutral-decoration);
+    --ax-text-contrast: var(--ax-text-neutral-contrast);
+    --ax-border-default: var(--ax-border-neutral);
+    --ax-border-subtle: var(--ax-border-neutral-subtle);
+    --ax-border-subtleA: var(--ax-border-neutral-subtleA);
+    --ax-border-strong: var(--ax-border-neutral-strong);
   }
 
-  [data-color-role="accent"] {
-    --ax-border-strong: var(--ax-border-accent-strong);
-    --ax-border-subtleA: var(--ax-border-accent-subtleA);
-    --ax-border-subtle: var(--ax-border-accent-subtle);
-    --ax-border-default: var(--ax-border-accent);
-    --ax-text-contrast: var(--ax-text-accent-contrast);
-    --ax-text-decoration: var(--ax-text-accent-decoration);
-    --ax-text-subtle: var(--ax-text-accent-subtle);
-    --ax-text-default: var(--ax-text-accent);
-    --ax-bg-strong-pressed: var(--ax-bg-accent-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-accent-strong-hover);
-    --ax-bg-strong: var(--ax-bg-accent-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-accent-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-accent-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-accent-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-accent-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-accent-moderateA);
-    --ax-bg-moderate: var(--ax-bg-accent-moderate);
-    --ax-bg-softA: var(--ax-bg-accent-softA);
+  :root, [data-color="accent"] {
     --ax-bg-soft: var(--ax-bg-accent-soft);
+    --ax-bg-softA: var(--ax-bg-accent-softA);
+    --ax-bg-moderate: var(--ax-bg-accent-moderate);
+    --ax-bg-moderateA: var(--ax-bg-accent-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-accent-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-accent-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-accent-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-accent-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-accent-strong);
+    --ax-bg-strong-hover: var(--ax-bg-accent-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-accent-strong-pressed);
+    --ax-text-default: var(--ax-text-accent);
+    --ax-text-subtle: var(--ax-text-accent-subtle);
+    --ax-text-decoration: var(--ax-text-accent-decoration);
+    --ax-text-contrast: var(--ax-text-accent-contrast);
+    --ax-border-default: var(--ax-border-accent);
+    --ax-border-subtle: var(--ax-border-accent-subtle);
+    --ax-border-subtleA: var(--ax-border-accent-subtleA);
+    --ax-border-strong: var(--ax-border-accent-strong);
   }
 
-  [data-color-role="success"] {
-    --ax-border-strong: var(--ax-border-success-strong);
-    --ax-border-subtleA: var(--ax-border-success-subtleA);
-    --ax-border-subtle: var(--ax-border-success-subtle);
-    --ax-border-default: var(--ax-border-success);
-    --ax-text-contrast: var(--ax-text-success-contrast);
-    --ax-text-decoration: var(--ax-text-success-decoration);
-    --ax-text-subtle: var(--ax-text-success-subtle);
-    --ax-text-default: var(--ax-text-success);
-    --ax-bg-strong-pressed: var(--ax-bg-success-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-success-strong-hover);
-    --ax-bg-strong: var(--ax-bg-success-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-success-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-success-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-success-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-success-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-success-moderateA);
-    --ax-bg-moderate: var(--ax-bg-success-moderate);
-    --ax-bg-softA: var(--ax-bg-success-softA);
-    --ax-bg-soft: var(--ax-bg-success-soft);
+  [data-color="brand-beige"] {
+    --ax-bg-soft: var(--ax-bg-brand-beige-soft);
+    --ax-bg-softA: var(--ax-bg-brand-beige-softA);
+    --ax-bg-moderate: var(--ax-bg-brand-beige-moderate);
+    --ax-bg-moderateA: var(--ax-bg-brand-beige-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-brand-beige-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-brand-beige-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-brand-beige-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-brand-beige-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-brand-beige-strong);
+    --ax-bg-strong-hover: var(--ax-bg-brand-beige-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-brand-beige-strong-pressed);
+    --ax-text-default: var(--ax-text-brand-beige);
+    --ax-text-subtle: var(--ax-text-brand-beige-subtle);
+    --ax-text-decoration: var(--ax-text-brand-beige-decoration);
+    --ax-text-contrast: var(--ax-text-brand-beige-contrast);
+    --ax-border-default: var(--ax-border-brand-beige);
+    --ax-border-subtle: var(--ax-border-brand-beige-subtle);
+    --ax-border-subtleA: var(--ax-border-brand-beige-subtleA);
+    --ax-border-strong: var(--ax-border-brand-beige-strong);
   }
 
-  [data-color-role="warning"] {
-    --ax-border-strong: var(--ax-border-warning-strong);
-    --ax-border-subtleA: var(--ax-border-warning-subtleA);
-    --ax-border-subtle: var(--ax-border-warning-subtle);
-    --ax-border-default: var(--ax-border-warning);
-    --ax-text-contrast: var(--ax-text-warning-contrast);
-    --ax-text-decoration: var(--ax-text-warning-decoration);
-    --ax-text-subtle: var(--ax-text-warning-subtle);
-    --ax-text-default: var(--ax-text-warning);
-    --ax-bg-strong-pressed: var(--ax-bg-warning-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-warning-strong-hover);
-    --ax-bg-strong: var(--ax-bg-warning-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-warning-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-warning-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-warning-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-warning-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-warning-moderateA);
-    --ax-bg-moderate: var(--ax-bg-warning-moderate);
-    --ax-bg-softA: var(--ax-bg-warning-softA);
-    --ax-bg-soft: var(--ax-bg-warning-soft);
+  [data-color="brand-blue"] {
+    --ax-bg-soft: var(--ax-bg-brand-blue-soft);
+    --ax-bg-softA: var(--ax-bg-brand-blue-softA);
+    --ax-bg-moderate: var(--ax-bg-brand-blue-moderate);
+    --ax-bg-moderateA: var(--ax-bg-brand-blue-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-brand-blue-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-brand-blue-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-brand-blue-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-brand-blue-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-brand-blue-strong);
+    --ax-bg-strong-hover: var(--ax-bg-brand-blue-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-brand-blue-strong-pressed);
+    --ax-text-default: var(--ax-text-brand-blue);
+    --ax-text-subtle: var(--ax-text-brand-blue-subtle);
+    --ax-text-decoration: var(--ax-text-brand-blue-decoration);
+    --ax-text-contrast: var(--ax-text-brand-blue-contrast);
+    --ax-border-default: var(--ax-border-brand-blue);
+    --ax-border-subtle: var(--ax-border-brand-blue-subtle);
+    --ax-border-subtleA: var(--ax-border-brand-blue-subtleA);
+    --ax-border-strong: var(--ax-border-brand-blue-strong);
   }
 
-  [data-color-role="danger"] {
-    --ax-border-strong: var(--ax-border-danger-strong);
-    --ax-border-subtleA: var(--ax-border-danger-subtleA);
-    --ax-border-subtle: var(--ax-border-danger-subtle);
-    --ax-border-default: var(--ax-border-danger);
-    --ax-text-contrast: var(--ax-text-danger-contrast);
-    --ax-text-decoration: var(--ax-text-danger-decoration);
-    --ax-text-subtle: var(--ax-text-danger-subtle);
-    --ax-text-default: var(--ax-text-danger);
-    --ax-bg-strong-pressed: var(--ax-bg-danger-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-danger-strong-hover);
-    --ax-bg-strong: var(--ax-bg-danger-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-danger-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-danger-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-danger-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-danger-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-danger-moderateA);
-    --ax-bg-moderate: var(--ax-bg-danger-moderate);
-    --ax-bg-softA: var(--ax-bg-danger-softA);
-    --ax-bg-soft: var(--ax-bg-danger-soft);
+  [data-color="brand-magenta"] {
+    --ax-bg-soft: var(--ax-bg-brand-magenta-soft);
+    --ax-bg-softA: var(--ax-bg-brand-magenta-softA);
+    --ax-bg-moderate: var(--ax-bg-brand-magenta-moderate);
+    --ax-bg-moderateA: var(--ax-bg-brand-magenta-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-brand-magenta-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-brand-magenta-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-brand-magenta-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-brand-magenta-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-brand-magenta-strong);
+    --ax-bg-strong-hover: var(--ax-bg-brand-magenta-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-brand-magenta-strong-pressed);
+    --ax-text-default: var(--ax-text-brand-magenta);
+    --ax-text-subtle: var(--ax-text-brand-magenta-subtle);
+    --ax-text-decoration: var(--ax-text-brand-magenta-decoration);
+    --ax-text-contrast: var(--ax-text-brand-magenta-contrast);
+    --ax-border-default: var(--ax-border-brand-magenta);
+    --ax-border-subtle: var(--ax-border-brand-magenta-subtle);
+    --ax-border-subtleA: var(--ax-border-brand-magenta-subtleA);
+    --ax-border-strong: var(--ax-border-brand-magenta-strong);
   }
 
-  [data-color-role="info"] {
-    --ax-border-strong: var(--ax-border-info-strong);
-    --ax-border-subtleA: var(--ax-border-info-subtleA);
-    --ax-border-subtle: var(--ax-border-info-subtle);
-    --ax-border-default: var(--ax-border-info);
-    --ax-text-contrast: var(--ax-text-info-contrast);
-    --ax-text-decoration: var(--ax-text-info-decoration);
-    --ax-text-subtle: var(--ax-text-info-subtle);
-    --ax-text-default: var(--ax-text-info);
-    --ax-bg-strong-pressed: var(--ax-bg-info-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-info-strong-hover);
-    --ax-bg-strong: var(--ax-bg-info-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-info-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-info-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-info-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-info-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-info-moderateA);
-    --ax-bg-moderate: var(--ax-bg-info-moderate);
-    --ax-bg-softA: var(--ax-bg-info-softA);
+  [data-color="info"] {
     --ax-bg-soft: var(--ax-bg-info-soft);
+    --ax-bg-softA: var(--ax-bg-info-softA);
+    --ax-bg-moderate: var(--ax-bg-info-moderate);
+    --ax-bg-moderateA: var(--ax-bg-info-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-info-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-info-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-info-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-info-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-info-strong);
+    --ax-bg-strong-hover: var(--ax-bg-info-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-info-strong-pressed);
+    --ax-text-default: var(--ax-text-info);
+    --ax-text-subtle: var(--ax-text-info-subtle);
+    --ax-text-decoration: var(--ax-text-info-decoration);
+    --ax-text-contrast: var(--ax-text-info-contrast);
+    --ax-border-default: var(--ax-border-info);
+    --ax-border-subtle: var(--ax-border-info-subtle);
+    --ax-border-subtleA: var(--ax-border-info-subtleA);
+    --ax-border-strong: var(--ax-border-info-strong);
   }
 
-  [data-color-role="brand-magenta"] {
-    --ax-border-strong: var(--ax-border-brand-magenta-strong);
-    --ax-border-subtleA: var(--ax-border-brand-magenta-subtleA);
-    --ax-border-subtle: var(--ax-border-brand-magenta-subtle);
-    --ax-border-default: var(--ax-border-brand-magenta);
-    --ax-text-contrast: var(--ax-text-brand-magenta-contrast);
-    --ax-text-decoration: var(--ax-text-brand-magenta-decoration);
-    --ax-text-subtle: var(--ax-text-brand-magenta-subtle);
-    --ax-text-default: var(--ax-text-brand-magenta);
-    --ax-bg-strong-pressed: var(--ax-bg-brand-magenta-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-brand-magenta-strong-hover);
-    --ax-bg-strong: var(--ax-bg-brand-magenta-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-brand-magenta-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-brand-magenta-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-brand-magenta-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-brand-magenta-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-brand-magenta-moderateA);
-    --ax-bg-moderate: var(--ax-bg-brand-magenta-moderate);
-    --ax-bg-softA: var(--ax-bg-brand-magenta-softA);
-    --ax-bg-soft: var(--ax-bg-brand-magenta-soft);
-  }
-
-  [data-color-role="brand-beige"] {
-    --ax-border-strong: var(--ax-border-brand-beige-strong);
-    --ax-border-subtleA: var(--ax-border-brand-beige-subtleA);
-    --ax-border-subtle: var(--ax-border-brand-beige-subtle);
-    --ax-border-default: var(--ax-border-brand-beige);
-    --ax-text-contrast: var(--ax-text-brand-beige-contrast);
-    --ax-text-decoration: var(--ax-text-brand-beige-decoration);
-    --ax-text-subtle: var(--ax-text-brand-beige-subtle);
-    --ax-text-default: var(--ax-text-brand-beige);
-    --ax-bg-strong-pressed: var(--ax-bg-brand-beige-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-brand-beige-strong-hover);
-    --ax-bg-strong: var(--ax-bg-brand-beige-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-brand-beige-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-brand-beige-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-brand-beige-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-brand-beige-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-brand-beige-moderateA);
-    --ax-bg-moderate: var(--ax-bg-brand-beige-moderate);
-    --ax-bg-softA: var(--ax-bg-brand-beige-softA);
-    --ax-bg-soft: var(--ax-bg-brand-beige-soft);
+  [data-color="success"] {
+    --ax-bg-soft: var(--ax-bg-success-soft);
+    --ax-bg-softA: var(--ax-bg-success-softA);
+    --ax-bg-moderate: var(--ax-bg-success-moderate);
+    --ax-bg-moderateA: var(--ax-bg-success-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-success-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-success-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-success-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-success-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-success-strong);
+    --ax-bg-strong-hover: var(--ax-bg-success-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-success-strong-pressed);
+    --ax-text-default: var(--ax-text-success);
+    --ax-text-subtle: var(--ax-text-success-subtle);
+    --ax-text-decoration: var(--ax-text-success-decoration);
+    --ax-text-contrast: var(--ax-text-success-contrast);
+    --ax-border-default: var(--ax-border-success);
+    --ax-border-subtle: var(--ax-border-success-subtle);
+    --ax-border-subtleA: var(--ax-border-success-subtleA);
+    --ax-border-strong: var(--ax-border-success-strong);
   }
 
-  [data-color-role="brand-blue"] {
-    --ax-border-strong: var(--ax-border-brand-blue-strong);
-    --ax-border-subtleA: var(--ax-border-brand-blue-subtleA);
-    --ax-border-subtle: var(--ax-border-brand-blue-subtle);
-    --ax-border-default: var(--ax-border-brand-blue);
-    --ax-text-contrast: var(--ax-text-brand-blue-contrast);
-    --ax-text-decoration: var(--ax-text-brand-blue-decoration);
-    --ax-text-subtle: var(--ax-text-brand-blue-subtle);
-    --ax-text-default: var(--ax-text-brand-blue);
-    --ax-bg-strong-pressed: var(--ax-bg-brand-blue-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-brand-blue-strong-hover);
-    --ax-bg-strong: var(--ax-bg-brand-blue-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-brand-blue-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-brand-blue-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-brand-blue-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-brand-blue-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-brand-blue-moderateA);
-    --ax-bg-moderate: var(--ax-bg-brand-blue-moderate);
-    --ax-bg-softA: var(--ax-bg-brand-blue-softA);
-    --ax-bg-soft: var(--ax-bg-brand-blue-soft);
+  [data-color="warning"] {
+    --ax-bg-soft: var(--ax-bg-warning-soft);
+    --ax-bg-softA: var(--ax-bg-warning-softA);
+    --ax-bg-moderate: var(--ax-bg-warning-moderate);
+    --ax-bg-moderateA: var(--ax-bg-warning-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-warning-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-warning-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-warning-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-warning-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-warning-strong);
+    --ax-bg-strong-hover: var(--ax-bg-warning-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-warning-strong-pressed);
+    --ax-text-default: var(--ax-text-warning);
+    --ax-text-subtle: var(--ax-text-warning-subtle);
+    --ax-text-decoration: var(--ax-text-warning-decoration);
+    --ax-text-contrast: var(--ax-text-warning-contrast);
+    --ax-border-default: var(--ax-border-warning);
+    --ax-border-subtle: var(--ax-border-warning-subtle);
+    --ax-border-subtleA: var(--ax-border-warning-subtleA);
+    --ax-border-strong: var(--ax-border-warning-strong);
   }
 
-  [data-color-role="meta-purple"] {
-    --ax-border-strong: var(--ax-border-meta-purple-strong);
-    --ax-border-subtleA: var(--ax-border-meta-purple-subtleA);
-    --ax-border-subtle: var(--ax-border-meta-purple-subtle);
-    --ax-border-default: var(--ax-border-meta-purple);
-    --ax-text-contrast: var(--ax-text-meta-purple-contrast);
-    --ax-text-decoration: var(--ax-text-meta-purple-decoration);
-    --ax-text-subtle: var(--ax-text-meta-purple-subtle);
-    --ax-text-default: var(--ax-text-meta-purple);
-    --ax-bg-strong-pressed: var(--ax-bg-meta-purple-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-meta-purple-strong-hover);
-    --ax-bg-strong: var(--ax-bg-meta-purple-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-meta-purple-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-meta-purple-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-meta-purple-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-meta-purple-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-meta-purple-moderateA);
-    --ax-bg-moderate: var(--ax-bg-meta-purple-moderate);
-    --ax-bg-softA: var(--ax-bg-meta-purple-softA);
+  [data-color="danger"] {
+    --ax-bg-soft: var(--ax-bg-danger-soft);
+    --ax-bg-softA: var(--ax-bg-danger-softA);
+    --ax-bg-moderate: var(--ax-bg-danger-moderate);
+    --ax-bg-moderateA: var(--ax-bg-danger-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-danger-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-danger-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-danger-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-danger-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-danger-strong);
+    --ax-bg-strong-hover: var(--ax-bg-danger-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-danger-strong-pressed);
+    --ax-text-default: var(--ax-text-danger);
+    --ax-text-subtle: var(--ax-text-danger-subtle);
+    --ax-text-decoration: var(--ax-text-danger-decoration);
+    --ax-text-contrast: var(--ax-text-danger-contrast);
+    --ax-border-default: var(--ax-border-danger);
+    --ax-border-subtle: var(--ax-border-danger-subtle);
+    --ax-border-subtleA: var(--ax-border-danger-subtleA);
+    --ax-border-strong: var(--ax-border-danger-strong);
+  }
+
+  [data-color="meta-purple"] {
     --ax-bg-soft: var(--ax-bg-meta-purple-soft);
+    --ax-bg-softA: var(--ax-bg-meta-purple-softA);
+    --ax-bg-moderate: var(--ax-bg-meta-purple-moderate);
+    --ax-bg-moderateA: var(--ax-bg-meta-purple-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-meta-purple-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-meta-purple-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-meta-purple-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-meta-purple-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-meta-purple-strong);
+    --ax-bg-strong-hover: var(--ax-bg-meta-purple-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-meta-purple-strong-pressed);
+    --ax-text-default: var(--ax-text-meta-purple);
+    --ax-text-subtle: var(--ax-text-meta-purple-subtle);
+    --ax-text-decoration: var(--ax-text-meta-purple-decoration);
+    --ax-text-contrast: var(--ax-text-meta-purple-contrast);
+    --ax-border-default: var(--ax-border-meta-purple);
+    --ax-border-subtle: var(--ax-border-meta-purple-subtle);
+    --ax-border-subtleA: var(--ax-border-meta-purple-subtleA);
+    --ax-border-strong: var(--ax-border-meta-purple-strong);
   }
 
-  [data-color-role="meta-lime"] {
-    --ax-border-strong: var(--ax-border-meta-lime-strong);
-    --ax-border-subtleA: var(--ax-border-meta-lime-subtleA);
-    --ax-border-subtle: var(--ax-border-meta-lime-subtle);
-    --ax-border-default: var(--ax-border-meta-lime);
-    --ax-text-contrast: var(--ax-text-meta-lime-contrast);
-    --ax-text-decoration: var(--ax-text-meta-lime-decoration);
-    --ax-text-subtle: var(--ax-text-meta-lime-subtle);
-    --ax-text-default: var(--ax-text-meta-lime);
-    --ax-bg-strong-pressed: var(--ax-bg-meta-lime-strong-pressed);
-    --ax-bg-strong-hover: var(--ax-bg-meta-lime-strong-hover);
-    --ax-bg-strong: var(--ax-bg-meta-lime-strong);
-    --ax-bg-moderate-pressedA: var(--ax-bg-meta-lime-moderate-pressedA);
-    --ax-bg-moderate-pressed: var(--ax-bg-meta-lime-moderate-pressed);
-    --ax-bg-moderate-hoverA: var(--ax-bg-meta-lime-moderate-hoverA);
-    --ax-bg-moderate-hover: var(--ax-bg-meta-lime-moderate-hover);
-    --ax-bg-moderateA: var(--ax-bg-meta-lime-moderateA);
-    --ax-bg-moderate: var(--ax-bg-meta-lime-moderate);
-    --ax-bg-softA: var(--ax-bg-meta-lime-softA);
+  [data-color="meta-lime"] {
     --ax-bg-soft: var(--ax-bg-meta-lime-soft);
+    --ax-bg-softA: var(--ax-bg-meta-lime-softA);
+    --ax-bg-moderate: var(--ax-bg-meta-lime-moderate);
+    --ax-bg-moderateA: var(--ax-bg-meta-lime-moderateA);
+    --ax-bg-moderate-hover: var(--ax-bg-meta-lime-moderate-hover);
+    --ax-bg-moderate-hoverA: var(--ax-bg-meta-lime-moderate-hoverA);
+    --ax-bg-moderate-pressed: var(--ax-bg-meta-lime-moderate-pressed);
+    --ax-bg-moderate-pressedA: var(--ax-bg-meta-lime-moderate-pressedA);
+    --ax-bg-strong: var(--ax-bg-meta-lime-strong);
+    --ax-bg-strong-hover: var(--ax-bg-meta-lime-strong-hover);
+    --ax-bg-strong-pressed: var(--ax-bg-meta-lime-strong-pressed);
+    --ax-text-default: var(--ax-text-meta-lime);
+    --ax-text-subtle: var(--ax-text-meta-lime-subtle);
+    --ax-text-decoration: var(--ax-text-meta-lime-decoration);
+    --ax-text-contrast: var(--ax-text-meta-lime-contrast);
+    --ax-border-default: var(--ax-border-meta-lime);
+    --ax-border-subtle: var(--ax-border-meta-lime-subtle);
+    --ax-border-subtleA: var(--ax-border-meta-lime-subtleA);
+    --ax-border-strong: var(--ax-border-meta-lime-strong);
   }
 }
 
@@ -1437,10 +1437,26 @@
     overflow: hidden !important;
   }
 
+  [data-color]:where(.aksel-heading, .aksel-ingress, .aksel-body-long, .aksel-body-short, .aksel-label, .aksel-detail) {
+    color: var(--ax-text-default);
+  }
+
+  .aksel-typo--color-default {
+    color: var(--ax-text-neutral);
+  }
+
+  .aksel-typo--color-default[data-color] {
+    color: var(--ax-text-default);
+  }
+
   .aksel-typo--color-subtle {
     color: var(--ax-text-neutral-subtle);
   }
 
+  .aksel-typo--color-subtle[data-color] {
+    color: var(--ax-text-subtle);
+  }
+
   .aksel-button {
     --__axc-button-icon-size: 1.5rem;
     --__axc-button-icon-margin: -4px;
@@ -1464,196 +1480,132 @@
     outline-offset: 3px;
   }
 
-  .aksel-button--small, .aksel-button--xsmall {
-    --__axc-button-icon-margin: -2px;
-  }
-
-  .aksel-button--small {
-    padding: var(--ax-space-4) var(--ax-space-12);
-    gap: var(--ax-space-6);
-    min-width: 2rem;
-    min-height: 2rem;
-  }
-
-  .aksel-button--xsmall {
-    padding: var(--ax-space-2) var(--ax-space-8);
-    gap: var(--ax-space-4);
-    --__axc-button-icon-size: 1.25rem;
-  }
-
-  .aksel-button--icon-only {
-    padding: var(--ax-space-12);
-  }
-
-  .aksel-button--icon-only.aksel-button--small {
-    padding: var(--ax-space-4);
-  }
-
-  .aksel-button--icon-only.aksel-button--xsmall {
-    padding: var(--ax-space-2);
-  }
-
-  @supports not selector(:focus-visible) {
-    .aksel-button:focus {
-      outline: 3px solid var(--ax-border-focus);
-    }
-  }
-
-  .aksel-button__icon {
-    font-size: var(--__axc-button-icon-size);
-    display: flex;
-  }
-
-  .aksel-button__icon:first-child {
-    margin-left: var(--__axc-button-icon-margin);
-  }
-
-  .aksel-button__icon:last-child {
-    margin-right: var(--__axc-button-icon-margin);
-  }
-
-  .aksel-button--icon-only .aksel-button__icon {
-    margin: 0;
-  }
-
-  .aksel-button--primary {
-    background-color: var(--ax-bg-accent-strong);
-    color: var(--ax-text-accent-contrast);
+  .aksel-button[data-variant="primary"] {
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
-  .aksel-button--primary:hover {
-    background-color: var(--ax-bg-accent-strong-hover);
+  .aksel-button[data-variant="primary"]:hover {
+    background-color: var(--ax-bg-strong-hover);
   }
 
-  .aksel-button--primary:active {
-    background-color: var(--ax-bg-accent-strong-pressed);
+  .aksel-button[data-variant="primary"]:active {
+    background-color: var(--ax-bg-strong-pressed);
   }
 
-  .aksel-button--primary:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-accent-strong);
+  .aksel-button[data-variant="primary"]:is(:disabled, .aksel-button--disabled) {
+    background-color: var(--ax-bg-strong);
   }
 
-  @media (forced-colors: active) {
-    .aksel-button--primary:not(:disabled) {
-      color: highlighttext;
-      background-color: highlight;
-    }
-
-    .aksel-button--primary span {
-      forced-color-adjust: none;
-    }
-  }
-
-  .aksel-button--primary-neutral {
-    background-color: var(--ax-bg-neutral-strong);
-    color: var(--ax-text-neutral-contrast);
+  .aksel-button[data-variant="secondary"] {
+    --__axc-button-border-color: var(--ax-border-default);
+    color: var(--ax-text-subtle);
+    background-color: rgba(0, 0, 0, 0);
   }
 
-  .aksel-button--primary-neutral:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
+  .aksel-button[data-variant="secondary"][data-color="neutral"] {
+    color: var(--ax-text-default);
   }
 
-  .aksel-button--primary-neutral:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
+  .aksel-button[data-variant="secondary"]:hover {
+    --__axc-button-border-color: var(--ax-border-strong);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
-  .aksel-button--primary-neutral:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-neutral-strong);
+  .aksel-button[data-variant="secondary"]:active {
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
-  .aksel-button--secondary {
-    --__axc-button-border-color: var(--ax-border-accent);
-    color: var(--ax-text-accent-subtle);
+  .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled) {
+    color: var(--ax-text-subtle);
     background-color: rgba(0, 0, 0, 0);
   }
 
-  .aksel-button--secondary:hover {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+  .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled)[data-color="neutral"] {
+    color: var(--ax-text-default);
   }
 
-  .aksel-button--secondary:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+  .aksel-button[data-variant="tertiary"] {
+    color: var(--ax-text-subtle);
+    background-color: rgba(0, 0, 0, 0);
   }
 
-  .aksel-button--secondary:is(:disabled, .aksel-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-accent);
-    color: var(--ax-text-accent-subtle);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button[data-variant="tertiary"][data-color="neutral"] {
+    color: var(--ax-text-default);
   }
 
-  .aksel-button--secondary-neutral {
-    --__axc-button-border-color: var(--ax-border-neutral);
-    color: var(--ax-text-neutral);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button[data-variant="tertiary"]:hover {
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
-  .aksel-button--secondary-neutral:hover {
-    --__axc-button-border-color: var(--ax-border-neutral-strong);
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  .aksel-button[data-variant="tertiary"]:active {
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
-  .aksel-button--secondary-neutral:active {
-    background-color: var(--ax-bg-neutral-moderate-pressedA);
+  .aksel-button[data-variant="tertiary"][data-pressed="true"] {
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
-  .aksel-button--secondary-neutral:is(:disabled, .aksel-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-neutral);
-    color: var(--ax-text-neutral);
+  .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled) {
+    color: var(--ax-text-subtle);
     background-color: rgba(0, 0, 0, 0);
   }
 
-  .aksel-button--tertiary {
-    color: var(--ax-text-accent-subtle);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled)[data-color="neutral"] {
+    color: var(--ax-text-default);
   }
 
-  .aksel-button--tertiary:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+  .aksel-button--small, .aksel-button--xsmall {
+    --__axc-button-icon-margin: -2px;
   }
 
-  .aksel-button--tertiary:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+  .aksel-button--small {
+    padding: var(--ax-space-4) var(--ax-space-12);
+    gap: var(--ax-space-6);
+    min-width: 2rem;
+    min-height: 2rem;
   }
 
-  .aksel-button--tertiary:is(:disabled, .aksel-button--disabled) {
-    color: var(--ax-text-accent-subtle);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button--xsmall {
+    padding: var(--ax-space-2) var(--ax-space-8);
+    gap: var(--ax-space-4);
+    --__axc-button-icon-size: 1.25rem;
   }
 
-  .aksel-button--tertiary-neutral {
-    color: var(--ax-text-neutral);
-    background-color: rgba(0, 0, 0, 0);
+  @supports not selector(:focus-visible) {
+    .aksel-button:focus {
+      outline: 3px solid var(--ax-border-focus);
+    }
   }
 
-  .aksel-button--tertiary-neutral:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  .aksel-button__icon {
+    font-size: var(--__axc-button-icon-size);
+    display: flex;
   }
 
-  .aksel-button--tertiary-neutral:active {
-    background-color: var(--ax-bg-neutral-moderate-pressedA);
+  .aksel-button__icon:first-child {
+    margin-left: var(--__axc-button-icon-margin);
   }
 
-  .aksel-button--tertiary-neutral:is(:disabled, .aksel-button--disabled) {
-    color: var(--ax-text-neutral);
-    background-color: rgba(0, 0, 0, 0);
+  .aksel-button__icon:last-child {
+    margin-right: var(--__axc-button-icon-margin);
   }
 
-  .aksel-button--danger {
-    background-color: var(--ax-bg-danger-strong);
-    color: var(--ax-text-danger-contrast);
+  .aksel-button--icon-only .aksel-button__icon {
+    margin: 0;
   }
 
-  .aksel-button--danger:hover {
-    background-color: var(--ax-bg-danger-strong-hover);
+  .aksel-button--icon-only {
+    padding: var(--ax-space-12);
   }
 
-  .aksel-button--danger:active {
-    background-color: var(--ax-bg-danger-strong-pressed);
+  .aksel-button--icon-only.aksel-button--small {
+    padding: var(--ax-space-4);
   }
 
-  .aksel-button--danger:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-danger-strong);
+  .aksel-button--icon-only.aksel-button--xsmall {
+    padding: var(--ax-space-2);
   }
 
   .aksel-button:where(:disabled, .aksel-button--disabled) {
@@ -1778,48 +1730,26 @@
     padding-right: var(--ax-space-2);
   }
 
-  .aksel-chips__toggle--action {
-    box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
-    background-color: var(--ax-bg-accent-moderate);
-    color: var(--ax-text-accent);
-    transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
-  }
-
-  .aksel-chips__toggle--action:hover {
-    background-color: var(--ax-bg-accent-moderate-hover);
-    box-shadow: inset 0 0 0 1px var(--ax-border-accent);
-  }
-
-  .aksel-chips__toggle--action[data-pressed="true"] {
-    box-shadow: none;
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-  }
-
-  .aksel-chips__toggle--action[data-pressed="true"]:hover {
-    background-color: var(--ax-bg-accent-strong-hover);
-  }
-
-  .aksel-chips__toggle--neutral {
-    box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
-    background-color: var(--ax-bg-neutral-moderate);
-    color: var(--ax-text-neutral);
+  .aksel-chips__toggle {
+    box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+    background-color: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
     transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
   }
 
-  .aksel-chips__toggle--neutral:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
-    box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
+  .aksel-chips__toggle:hover {
+    background-color: var(--ax-bg-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-default);
   }
 
-  .aksel-chips__toggle--neutral[data-pressed="true"] {
+  .aksel-chips__toggle[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
-  .aksel-chips__toggle--neutral[data-pressed="true"]:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
+  .aksel-chips__toggle[data-pressed="true"]:hover {
+    background-color: var(--ax-bg-strong-hover);
   }
 
   .aksel-chips--medium .aksel-chips__toggle--with-checkmark {
@@ -1827,25 +1757,13 @@
   }
 
   .aksel-chips__removable {
+    background: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
     gap: 0;
   }
 
-  .aksel-chips__removable--action {
-    background: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-  }
-
-  .aksel-chips__removable--action:hover {
-    background: var(--ax-bg-accent-strong-hover);
-  }
-
-  .aksel-chips__removable--neutral {
-    background: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
-  }
-
-  .aksel-chips__removable--neutral:hover {
-    background: var(--ax-bg-neutral-strong-hover);
+  .aksel-chips__removable:hover {
+    background: var(--ax-bg-strong-hover);
   }
 
   .aksel-chips__removable-icon {
@@ -1956,17 +1874,17 @@
   }
 
   .aksel-dropzone__area:hover:not([data-disabled="true"]) {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-dropzone__area:hover:not([data-disabled="true"]) > .aksel-dropzone__area-button {
-    background-color: var(--ax-bg-accent-moderate-hover);
-    box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+    background-color: var(--ax-bg-moderate-hover);
+    box-shadow: inset 0 0 0 2px var(--ax-bg-strong-hover);
   }
 
   .aksel-dropzone__area:active:not([data-disabled="true"]) > .aksel-dropzone__area-button {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
     box-shadow: none;
   }
 
@@ -1981,10 +1899,10 @@
   }
 
   .aksel-dropzone--dragging > .aksel-dropzone__area:after {
-    color: var(--ax-text-accent);
-    background-color: var(--ax-bg-accent-moderateA);
+    color: var(--ax-text-default);
+    background-color: var(--ax-bg-moderateA);
     content: "";
-    border: 1px dashed var(--ax-border-accent-strong);
+    border: 1px dashed var(--ax-border-strong);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     border-radius: var(--ax-radius-12);
@@ -2007,7 +1925,7 @@
     }
 
     100% {
-      background-color: var(--ax-bg-accent-moderateA);
+      background-color: var(--ax-bg-moderateA);
     }
   }
 
@@ -2056,7 +1974,7 @@
   }
 
   .aksel-dropzone--dragging .aksel-dropzone__area-release {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     top: 50%;
     transform: translateY(-50%);
   }
@@ -2363,13 +2281,13 @@
   }
 
   .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label:before {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    border-color: var(--ax-bg-accent-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
   }
 
   .aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .aksel-checkbox__label:before {
-    border-color: var(--ax-bg-accent-strong-hover);
-    background-color: var(--ax-bg-accent-strong-hover);
+    border-color: var(--ax-bg-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
   }
 
   .aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__label > .aksel-checkbox__icon {
@@ -2401,35 +2319,22 @@
 
   .aksel-radio__input:checked + .aksel-radio__label:before {
     background-color: var(--ax-bg-input);
-    border: 8px solid var(--ax-bg-accent-strong-pressed);
+    border: 8px solid var(--ax-bg-strong-pressed);
   }
 
   .aksel-radio--small > .aksel-radio__input:checked + .aksel-radio__label:before {
     border-width: 6px;
   }
 
-  .aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label, .aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label {
-    color: var(--ax-text-accent-subtle);
-  }
-
   .aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label:before, .aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label:before {
-    border-color: var(--ax-border-accent-strong);
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    border-color: var(--ax-border-strong);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label:before, .aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label:before {
     border-color: var(--ax-border-danger-strong);
   }
 
-  .aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .aksel-checkbox__label:before, .aksel-radio--error > .aksel-radio__input:not(:disabled, :checked):hover + .aksel-radio__label:before {
-    background-color: var(--ax-bg-danger-moderate-hoverA);
-  }
-
-  .aksel-checkbox--error > .aksel-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .aksel-checkbox__label:before {
-    background-color: var(--ax-bg-danger-strong-pressed);
-    border-color: var(--ax-bg-danger-strong-pressed);
-  }
-
   .aksel-radio--error > .aksel-radio__input:checked + .aksel-radio__label:before {
     border-color: var(--ax-bg-danger-strong-pressed);
   }
@@ -2450,10 +2355,6 @@
     display: inline-flex;
   }
 
-  .aksel-checkbox--readonly > .aksel-checkbox__input:hover + .aksel-checkbox__label, .aksel-radio--readonly > .aksel-radio__input:hover + .aksel-radio__label {
-    color: var(--ax-text-neutral);
-  }
-
   .aksel-checkbox--readonly > .aksel-checkbox__input:not(:disabled) + .aksel-checkbox__label:before, .aksel-checkbox--readonly > .aksel-checkbox__input:hover .aksel-checkbox__label:before, .aksel-radio--readonly > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label:before, .aksel-radio--readonly > .aksel-radio__input:hover:not(:checked, :focus) + .aksel-radio__label:before {
     background-color: var(--__axc-radio-checkbox-readonly-bg);
     border-color: var(--__axc-radio-checkbox-readonly-border);
@@ -2547,14 +2448,14 @@
   }
 
   .aksel-select__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
     cursor: pointer;
   }
 
   .aksel-select__input:focus {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   @media (forced-colors: active) {
@@ -2701,10 +2602,6 @@
     height: calc(100% - var(--__axc-switch-block-padding) * 1);
   }
 
-  .aksel-switch__input:hover ~ .aksel-switch__label-wrapper, .aksel-switch__label-wrapper:hover {
-    color: var(--ax-text-accent-subtle);
-  }
-
   .aksel-switch__input:disabled:hover ~ .aksel-switch__label-wrapper {
     color: inherit;
   }
@@ -2718,7 +2615,7 @@
     border: 2px solid var(--ax-border-neutral);
     transition-property: background-color, border-color;
     transition-duration: .1s;
-    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    transition-timing-function: ease;
     position: absolute;
     left: 0;
   }
@@ -2728,13 +2625,17 @@
   }
 
   .aksel-switch__input:checked ~ .aksel-switch__track {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    border-color: var(--ax-bg-accent-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
+  }
+
+  .aksel-switch__input:hover ~ .aksel-switch__track {
+    background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
   .aksel-switch__input:hover:checked ~ .aksel-switch__track {
-    background-color: var(--ax-bg-accent-strong-hover);
-    border-color: var(--ax-bg-accent-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
+    border-color: var(--ax-bg-strong-hover);
   }
 
   .aksel-switch__input:disabled ~ .aksel-switch__track {
@@ -2743,8 +2644,8 @@
   }
 
   .aksel-switch__input:checked:disabled ~ .aksel-switch__track {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    border-color: var(--ax-bg-accent-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
   }
 
   .aksel-switch--standalone > .aksel-switch__input:focus ~ .aksel-switch__track {
@@ -2769,7 +2670,7 @@
 
   .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     background-color: var(--ax-bg-raised);
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     width: 1.25rem;
     height: 1.25rem;
     top: 0;
@@ -2790,11 +2691,11 @@
 
   @media (hover: hover) and (pointer: fine) {
     .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
-      transform: translateX(.0625rem);
+      transform: translateX(.17rem);
     }
 
     .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
-      transform: translateX(1.19rem);
+      transform: translateX(1.1rem);
     }
   }
 
@@ -2828,10 +2729,6 @@
     cursor: default;
   }
 
-  .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__label-wrapper, .aksel-switch--readonly .aksel-switch__label-wrapper:hover {
-    color: var(--ax-text-neutral);
-  }
-
   .aksel-switch--readonly .aksel-switch__label {
     display: inline-flex;
   }
@@ -2856,10 +2753,6 @@
   }
 
   @media (forced-colors: active) {
-    .aksel-switch__input:hover ~ .aksel-switch__label-wrapper, .aksel-switch__label-wrapper:hover {
-      color: highlight;
-    }
-
     .aksel-switch__thumb, .aksel-switch--readonly .aksel-switch__thumb {
       background-color: fieldtext !important;
     }
@@ -2901,11 +2794,11 @@
   }
 
   .aksel-text-field__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-text-field__input:focus-visible {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
@@ -2981,13 +2874,13 @@
   }
 
   .aksel-textarea__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-textarea__input:focus-visible {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-textarea__input:disabled {
@@ -3164,11 +3057,11 @@
   }
 
   .aksel-search__button-search.aksel-button--secondary:hover:not(:disabled) {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
+    --__axc-button-border-color: var(--ax-border-strong);
   }
 
   .aksel-search:not(.aksel-search--error, .aksel-search--disabled) .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible)) .aksel-search__button-search.aksel-button--secondary:not(:hover, :active) {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
+    --__axc-button-border-color: var(--ax-border-strong);
   }
 
   .aksel-search--error .aksel-search__input:not(:disabled) {
@@ -3204,7 +3097,7 @@
   }
 
   .aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) .aksel-combobox__wrapper:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-form-field--small .aksel-combobox__wrapper {
@@ -3265,7 +3158,7 @@
   .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible).aksel-combobox__wrapper-inner--virtually-unfocused {
@@ -3394,11 +3287,11 @@
   }
 
   .aksel-combobox__button-toggle-list:hover {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
   }
 
   .aksel-combobox__button-toggle-list:hover:active {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 
   .aksel-combobox__list {
@@ -3500,7 +3393,7 @@
   }
 
   .aksel-combobox__list-item--selected {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
   .aksel-combobox__list-item--selected p {
@@ -3508,8 +3401,8 @@
   }
 
   .aksel-combobox__list-item--new-option {
-    border-bottom: 1px solid var(--ax-border-accent-subtleA);
-    background: var(--ax-bg-accent-moderateA);
+    border-bottom: 1px solid var(--ax-border-subtleA);
+    background: var(--ax-bg-moderateA);
     cursor: pointer;
     margin: 0;
     border-radius: 0;
@@ -3692,13 +3585,13 @@
   .aksel-form-summary__value .aksel-form-summary__answers {
     margin-top: var(--ax-space-8);
     padding: var(--ax-space-16);
-    background: var(--ax-bg-info-moderateA);
+    background: var(--ax-bg-moderateA);
     border-radius: var(--ax-radius-8);
-    border: 1px solid var(--ax-border-info-subtleA);
+    border: 1px solid var(--ax-border-subtleA);
   }
 
   .aksel-form-summary__value .aksel-form-summary__answers .aksel-form-summary__answer {
-    border-color: var(--ax-border-info-subtleA);
+    border-color: var(--ax-border-subtleA);
   }
 
   .aksel-form-progress__bar {
@@ -3759,7 +3652,7 @@
     text-align: left;
     cursor: pointer;
     border-radius: var(--ax-radius-8);
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     background: none;
     border: none;
     display: flex;
@@ -3779,7 +3672,7 @@
   }
 
   .aksel-accordion__header:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-accordion__header:hover:before, .aksel-accordion__header:hover:after {
@@ -3787,8 +3680,8 @@
   }
 
   .aksel-accordion__header:hover > .aksel-accordion__icon-wrapper {
-    background-color: var(--ax-bg-accent-strong-hover);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-strong-hover);
+    color: var(--ax-text-contrast);
   }
 
   @media (forced-colors: active) {
@@ -3836,10 +3729,10 @@
 
   .aksel-accordion__icon-wrapper {
     border-radius: var(--ax-radius-8);
-    background-color: var(--ax-bg-accent-moderateA);
+    background-color: var(--ax-bg-moderateA);
     width: 22px;
     height: 22px;
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     align-self: center;
   }
 
@@ -3914,10 +3807,16 @@
     padding: var(--ax-space-20);
     gap: var(--ax-space-12);
     border: 1px solid;
+    border-color: var(--ax-border-default);
+    background-color: var(--ax-bg-moderate);
     align-items: center;
     display: flex;
   }
 
+  .aksel-alert > .aksel-alert__icon {
+    color: var(--ax-text-decoration);
+  }
+
   @media (forced-colors: active) {
     .aksel-alert {
       color: canvastext;
@@ -3947,42 +3846,6 @@
     margin-block-start: 0;
   }
 
-  .aksel-alert--info {
-    border-color: var(--ax-border-info);
-    background-color: var(--ax-bg-info-moderate);
-  }
-
-  .aksel-alert--info > .aksel-alert__icon {
-    color: var(--ax-text-info-decoration);
-  }
-
-  .aksel-alert--success {
-    border-color: var(--ax-border-success);
-    background-color: var(--ax-bg-success-moderate);
-  }
-
-  .aksel-alert--success > .aksel-alert__icon {
-    color: var(--ax-text-success-decoration);
-  }
-
-  .aksel-alert--warning {
-    border-color: var(--ax-border-warning);
-    background-color: var(--ax-bg-warning-moderate);
-  }
-
-  .aksel-alert--warning > .aksel-alert__icon {
-    color: var(--ax-text-warning-decoration);
-  }
-
-  .aksel-alert--error {
-    border-color: var(--ax-border-danger);
-    background-color: var(--ax-bg-danger-moderate);
-  }
-
-  .aksel-alert--error > .aksel-alert__icon {
-    color: var(--ax-text-danger-decoration);
-  }
-
   .aksel-alert--full-width {
     border-radius: 0;
   }
@@ -4020,6 +3883,21 @@
     display: flex;
   }
 
+  .aksel-chat .aksel-chat__bubble, .aksel-chat .aksel-chat__avatar {
+    background-color: var(--ax-bg-moderateA);
+    border: 1px solid var(--ax-border-subtleA);
+  }
+
+  .aksel-chat[data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-variant="subtle"] .aksel-chat__avatar {
+    background-color: var(--ax-bg-softA);
+    border: 1px solid var(--ax-border-subtleA);
+  }
+
+  .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__avatar {
+    background-color: var(--ax-bg-raised);
+    border: 1px solid var(--ax-border-neutral-subtleA);
+  }
+
   .aksel-chat--right {
     flex-direction: row-reverse;
   }
@@ -4034,9 +3912,7 @@
   }
 
   .aksel-chat__avatar {
-    background-color: var(--ax-bg-raised);
     border-radius: var(--ax-radius-full);
-    border: 1px solid var(--ax-border-neutral-subtleA);
     color: var(--ax-text-neutral);
     letter-spacing: .024rem;
     flex-shrink: 0;
@@ -4068,11 +3944,9 @@
 
   .aksel-chat__bubble {
     padding: var(--ax-space-20);
-    background-color: var(--ax-bg-raised);
     gap: var(--ax-space-8);
     border-radius: var(--ax-radius-12);
     border-bottom-left-radius: var(--ax-radius-2);
-    border: 1px solid var(--ax-border-neutral-subtleA);
     flex-direction: column;
     width: fit-content;
     display: flex;
@@ -4082,14 +3956,6 @@
     padding: var(--ax-space-16);
   }
 
-  .aksel-chat--info .aksel-chat__bubble, .aksel-chat--info .aksel-chat__avatar {
-    background-color: var(--ax-bg-info-moderate);
-  }
-
-  .aksel-chat--neutral .aksel-chat__bubble, .aksel-chat--neutral .aksel-chat__avatar {
-    background-color: var(--ax-bg-neutral-moderateA);
-  }
-
   .aksel-chat__top-text {
     color: var(--ax-text-neutral);
     gap: var(--ax-space-8);
@@ -4147,8 +4013,8 @@
   }
 
   .aksel-date .rdp-day_range_middle.rdp-day_selected {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
-    box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+    background-color: var(--ax-bg-moderate-pressedA);
+    box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
     color: var(--ax-text-neutral);
   }
 
@@ -4195,8 +4061,8 @@
   }
 
   .aksel-date .rdp-day_selected, .aksel-date .aksel-monthpicker__month--selected {
-    color: var(--ax-text-accent-contrast);
-    background: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-contrast);
+    background: var(--ax-bg-strong-pressed);
     cursor: pointer;
   }
 
@@ -4208,7 +4074,7 @@
   }
 
   .aksel-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover, .aksel-date .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-    background: var(--ax-bg-accent-moderate-hoverA);
+    background: var(--ax-bg-moderate-hoverA);
     cursor: pointer;
   }
 
@@ -4217,7 +4083,7 @@
   }
 
   .aksel-date .rdp-day_today:before {
-    background-color: var(--ax-text-accent-subtle);
+    background-color: var(--ax-text-subtle);
     border-radius: var(--ax-radius-full);
     content: "";
     width: 6px;
@@ -4230,7 +4096,7 @@
   }
 
   :is(.aksel-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle), .aksel-date .rdp-day_today:active):before {
-    background-color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-text-contrast);
   }
 
   .aksel-date .rdp-day_outside {
@@ -4286,8 +4152,8 @@
   }
 
   :is(:is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) .rdp-cell > button.rdp-day, :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) button.aksel-date__month-button):active:not(:disabled) {
-    color: var(--ax-text-accent-contrast);
-    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   .aksel-date__field-input.aksel-text-field__input {
@@ -4442,11 +4308,11 @@
   }
 
   .aksel-dropdown__item:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-dropdown__item:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
   .aksel-dropdown__item:focus-visible {
@@ -4542,7 +4408,7 @@
   }
 
   .aksel-action-menu__item:focus {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
     color: var(--ax-text-neutral);
     outline: none;
   }
@@ -4565,7 +4431,7 @@
   }
 
   .aksel-action-menu__sub-trigger:focus {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-action-menu__item--danger {
@@ -4657,14 +4523,18 @@
     --__axc-expansioncard-padding-block: var(--ax-space-20);
     --__axc-expansioncard-padding-inline: var(--ax-space-20);
     border-radius: var(--ax-radius-12);
-    background-color: var(--ax-bg-raised);
-    border: 1px solid var(--ax-border-neutral);
+    background-color: var(--ax-bg-softA);
+    border: 1px solid var(--ax-border-default);
     height: fit-content;
   }
 
+  .aksel-expansioncard[data-color="neutral"] {
+    background-color: var(--ax-bg-raised);
+  }
+
   .aksel-expansioncard:has(.aksel-expansioncard__header:hover) {
-    box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
-    border-color: var(--ax-border-neutral-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-expansioncard--small {
@@ -4697,7 +4567,7 @@
   }
 
   .aksel-expansioncard__header:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-expansioncard__header[data-open="true"] {
@@ -4707,7 +4577,7 @@
 
   .aksel-expansioncard__header[data-open="true"]:after {
     content: "";
-    background-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-border-subtleA);
     bottom: 0;
     left: var(--__axc-expansioncard-padding-inline);
     height: 1px;
@@ -4762,7 +4632,7 @@
   }
 
   .aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-expansioncard__header-chevron {
@@ -4845,7 +4715,7 @@
 
   .aksel-guide {
     box-sizing: border-box;
-    border: 2px solid var(--ax-border-info);
+    border: 2px solid var(--ax-border-default);
     border-radius: var(--ax-radius-full);
     width: var(--__axc-guide-panel-guide-size);
     height: var(--__axc-guide-panel-guide-size);
@@ -4860,7 +4730,7 @@
 
   .aksel-guide-panel__content {
     background-color: var(--ax-bg-raised);
-    border: 2px solid var(--ax-border-info);
+    border: 2px solid var(--ax-border-default);
     border-radius: var(--ax-radius-12);
     position: relative;
   }
@@ -4930,7 +4800,7 @@
   .aksel-help-text__button {
     cursor: pointer;
     border-radius: var(--ax-radius-full);
-    color: var(--ax-bg-info-strong);
+    color: var(--ax-bg-strong);
     padding: calc(var(--ax-space-4) / 2);
     background-color: rgba(0, 0, 0, 0);
     border: 0;
@@ -4946,10 +4816,10 @@
   }
 
   .aksel-help-text__popover.aksel-popover {
-    background-color: var(--ax-bg-info-moderate);
+    background-color: var(--ax-bg-moderate);
     max-width: min(65ch, calc(100vw - var(--ax-space-24)));
     border-radius: var(--ax-radius-8);
-    border: 1px solid var(--ax-border-info);
+    border: 1px solid var(--ax-border-default);
   }
 
   .aksel-help-text__icon--filled, .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
@@ -4958,11 +4828,11 @@
 
   .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon--filled {
     display: inherit;
-    color: var(--ax-bg-info-strong-hover);
+    color: var(--ax-bg-strong-hover);
   }
 
   .aksel-help-text__button[aria-expanded="true"] > .aksel-help-text__icon--filled {
-    color: var(--ax-bg-info-strong-pressed);
+    color: var(--ax-bg-strong-pressed);
   }
 
   @media (forced-colors: active) {
@@ -5079,7 +4949,7 @@
   }
 
   .aksel-link {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     align-items: center;
     gap: var(--ax-space-2);
     text-underline-offset: .1em;
@@ -5098,6 +4968,14 @@
     border-radius: 1px;
   }
 
+  .aksel-link[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
+
+  .aksel-link[data-variant="subtle"] {
+    color: var(--ax-text-subtle);
+  }
+
   .aksel-link.aksel-link--inline-text {
     display: inline;
   }
@@ -5123,19 +5001,7 @@
   }
 
   :is(.aksel-alert:not(.aksel-alert--inline), .aksel-confirmation-panel) .aksel-link {
-    color: var(--ax-text-neutral);
-  }
-
-  .aksel-link--action {
-    color: var(--ax-text-accent-subtle);
-  }
-
-  .aksel-link--neutral {
-    color: var(--ax-text-neutral);
-  }
-
-  .aksel-link--subtle {
-    color: var(--ax-text-neutral-subtle);
+    color: var(--ax-text-default);
   }
 
   .aksel-link-panel {
@@ -5229,35 +5095,23 @@
   .aksel-loader__foreground {
     stroke-dasharray: 80 200;
     stroke-dashoffset: 0;
-    stroke: var(--ax-border-neutral-strong);
+    stroke: var(--ax-border-strong);
     stroke-linecap: round;
     stroke-width: var(--__axc-loader-stroke-width);
     animation: 1.5s ease-in-out infinite loader-dasharray;
   }
 
-  .aksel-loader__background {
-    stroke: var(--ax-border-neutral-subtleA);
-    stroke-width: var(--__axc-loader-stroke-width);
-  }
-
-  .aksel-loader--neutral .aksel-loader__foreground {
-    stroke: var(--ax-border-neutral-strong);
-  }
-
-  .aksel-loader--interaction .aksel-loader__foreground {
-    stroke: var(--ax-border-accent-strong);
-  }
-
-  .aksel-loader--interaction .aksel-loader__background {
-    stroke: var(--ax-border-accent-subtleA);
+  .aksel-loader[data-variant="inverted"] .aksel-loader__foreground {
+    stroke: var(--ax-border-subtle);
   }
 
-  .aksel-loader--inverted .aksel-loader__foreground {
-    stroke: var(--ax-border-neutral-subtle);
+  .aksel-loader__background {
+    stroke: var(--ax-border-subtleA);
+    stroke-width: var(--__axc-loader-stroke-width);
   }
 
-  .aksel-loader--inverted .aksel-loader__background {
-    stroke: var(--ax-border-neutral-strong);
+  .aksel-loader[data-variant="inverted"] .aksel-loader__background {
+    stroke: var(--ax-border-strong);
   }
 
   .aksel-loader--transparent .aksel-loader__background {
@@ -5513,11 +5367,6 @@
     width: 1.5rem;
   }
 
-  .aksel-pagination__item[data-selected="true"] {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
-  }
-
   .aksel-pagination--invisible {
     visibility: hidden;
   }
@@ -5550,7 +5399,6 @@
     --__axc-tag-icon-margin: -2px;
     --__axc-tag-border: ;
     --__axc-tag-bg: ;
-    --__axc-tag-bg-strong: ;
     --__axc-tag-text: ;
     --__axc-tag-text-strong: ;
     border-radius: var(--ax-radius-4);
@@ -5567,60 +5415,46 @@
     gap: var(--ax-space-2);
   }
 
-  .aksel-tag--info, .aksel-tag--alt3 {
-    --__axc-tag-border: var(--ax-border-info);
-    --__axc-tag-bg: var(--ax-bg-info-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-info-strong);
-    --__axc-tag-text: var(--ax-text-info);
-    --__axc-tag-text-strong: var(--ax-text-info-contrast);
+  .aksel-tag[data-variant="outline"] {
+    box-shadow: inset 0 0 0 1px var(--ax-border-default);
+    background: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
   }
 
-  .aksel-tag--success {
-    --__axc-tag-border: var(--ax-border-success);
-    --__axc-tag-bg: var(--ax-bg-success-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-success-strong);
-    --__axc-tag-text: var(--ax-text-success);
-    --__axc-tag-text-strong: var(--ax-text-success-contrast);
+  @media (forced-colors: active) {
+    .aksel-tag[data-variant="outline"] {
+      color: canvastext;
+    }
   }
 
-  .aksel-tag--warning {
-    --__axc-tag-border: var(--ax-border-warning);
-    --__axc-tag-bg: var(--ax-bg-warning-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
-    --__axc-tag-text: var(--ax-text-warning);
-    --__axc-tag-text-strong: var(--ax-text-warning-contrast);
+  .aksel-tag[data-variant="moderate"] {
+    background: var(--ax-bg-moderateA);
+    color: var(--ax-text-default);
   }
 
-  .aksel-tag--error {
-    --__axc-tag-border: var(--ax-border-danger);
-    --__axc-tag-bg: var(--ax-bg-danger-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
-    --__axc-tag-text: var(--ax-text-danger);
-    --__axc-tag-text-strong: var(--ax-text-danger-contrast);
+  @media (forced-colors: active) {
+    .aksel-tag[data-variant="moderate"] {
+      box-shadow: inset 0 0 0 1px var(--ax-bg-strong);
+      color: canvastext;
+    }
   }
 
-  .aksel-tag--neutral {
-    --__axc-tag-border: var(--ax-border-neutral);
-    --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
-    --__axc-tag-text: var(--ax-text-neutral);
-    --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
+  .aksel-tag[data-variant="strong"] {
+    background: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
-  .aksel-tag--meta-purple, .aksel-tag--alt1 {
-    --__axc-tag-border: var(--ax-border-meta-purple);
-    --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
-    --__axc-tag-text: var(--ax-text-meta-purple);
-    --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
+  @media (forced-colors: active) {
+    .aksel-tag[data-variant="strong"] {
+      color: canvas;
+    }
   }
 
-  .aksel-tag--meta-lime, .aksel-tag--alt2 {
-    --__axc-tag-border: var(--ax-border-meta-lime);
-    --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
-    --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
-    --__axc-tag-text: var(--ax-text-meta-lime);
-    --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
+  @media (forced-colors: active) {
+    .aksel-tag {
+      forced-color-adjust: none;
+      color: canvastext;
+    }
   }
 
   .aksel-tag--small {
@@ -5642,37 +5476,6 @@
     display: flex;
   }
 
-  .aksel-tag--outline {
-    box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
-    background: var(--__axc-tag-bg);
-    color: var(--__axc-tag-text);
-  }
-
-  .aksel-tag--moderate {
-    background: var(--__axc-tag-bg);
-    color: var(--__axc-tag-text);
-  }
-
-  .aksel-tag--strong {
-    background: var(--__axc-tag-bg-strong);
-    color: var(--__axc-tag-text-strong);
-  }
-
-  @media (forced-colors: active) {
-    .aksel-tag {
-      forced-color-adjust: none;
-      color: canvastext;
-    }
-
-    .aksel-tag--moderate {
-      box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
-    }
-
-    .aksel-tag--strong {
-      color: canvas;
-    }
-  }
-
   .aksel-timeline {
     grid-template-columns: auto minmax(0, 1fr);
     align-items: center;
@@ -5750,15 +5553,28 @@
   .aksel-timeline__period {
     border-radius: var(--ax-radius-full);
     z-index: 2;
-    border: none;
-    align-items: center;
+    background: var(--ax-bg-moderate);
+    border: solid 1px var(--ax-border-default);
     height: 100%;
+    color: var(--ax-text-decoration);
+    align-items: center;
     padding: 0;
     font-size: 1rem;
     display: flex;
     position: absolute;
   }
 
+  .aksel-timeline__period.aksel-timeline__period--clickable:hover {
+    background: var(--ax-bg-moderate-hover);
+    border-color: var(--ax-border-strong);
+  }
+
+  .aksel-timeline__period.aksel-timeline__period--clickable.aksel-timeline__period--selected {
+    background: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
+    border: none;
+  }
+
   .aksel-timeline__period--inner {
     margin: 0 var(--ax-space-8);
     white-space: nowrap;
@@ -5777,91 +5593,6 @@
     cursor: pointer;
   }
 
-  .aksel-timeline__period--success {
-    background: var(--ax-bg-success-moderate);
-    border: solid 1px var(--ax-border-success);
-    color: var(--ax-text-success-decoration);
-  }
-
-  .aksel-timeline__period--success.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-success-moderate-hover);
-    border-color: var(--ax-border-success-strong);
-  }
-
-  .aksel-timeline__period--success.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-success-strong-pressed);
-    color: var(--ax-text-success-contrast);
-    border: none;
-  }
-
-  .aksel-timeline__period--warning {
-    background: var(--ax-bg-warning-moderate);
-    border: solid 1px var(--ax-border-warning);
-    color: var(--ax-text-warning-decoration);
-  }
-
-  .aksel-timeline__period--warning.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-warning-moderate-hover);
-    border-color: var(--ax-border-warning-strong);
-  }
-
-  .aksel-timeline__period--warning.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-warning-strong-pressed);
-    color: var(--ax-text-warning-contrast);
-    border: none;
-  }
-
-  .aksel-timeline__period--danger {
-    background: var(--ax-bg-danger-moderate);
-    border: solid 1px var(--ax-border-danger);
-    color: var(--ax-text-danger-decoration);
-  }
-
-  .aksel-timeline__period--danger.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-danger-moderate-hover);
-    border-color: var(--ax-border-danger-strong);
-  }
-
-  .aksel-timeline__period--danger.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-danger-strong-pressed);
-    color: var(--ax-text-danger-contrast);
-    border: none;
-  }
-
-  .aksel-timeline__period--info {
-    background: var(--ax-bg-info-moderate);
-    border: solid 1px var(--ax-border-info);
-    color: var(--ax-text-info-decoration);
-  }
-
-  .aksel-timeline__period--info.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-info-moderate-hover);
-    border-color: var(--ax-border-info-strong);
-  }
-
-  .aksel-timeline__period--info.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-info-strong-pressed);
-    color: var(--ax-text-info-contrast);
-    border: none;
-  }
-
-  .aksel-timeline__period--neutral {
-    background: var(--ax-bg-neutral-moderate);
-    border: solid 1px var(--ax-border-neutral);
-    color: var(--ax-text-neutral-decoration);
-  }
-
-  .aksel-timeline__period--neutral.aksel-timeline__period--clickable:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
-    border-color: var(--ax-border-neutral-strong);
-  }
-
-  .aksel-timeline__period--neutral.aksel-timeline__period--clickable.aksel-timeline__period--selected {
-    background: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
-    border: none;
-  }
-
   .aksel-timeline__period--connected-both {
     border-radius: 0;
   }
@@ -6182,7 +5913,7 @@
   }
 
   .aksel-toggle-group__button:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
     color: var(--ax-text-neutral);
   }
 
@@ -6193,8 +5924,8 @@
   }
 
   .aksel-toggle-group__button[data-selected="true"] {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
   .aksel-toggle-group__button:not([data-selected="true"], :first-child, .aksel-toggle-group__button[data-selected="true"] + .aksel-toggle-group__button):before {
@@ -6221,15 +5952,6 @@
     font-size: var(--ax-font-size-heading-medium);
   }
 
-  :where(.aksel-toggle-group--neutral) .aksel-toggle-group__button:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
-  }
-
-  :where(.aksel-toggle-group--neutral) .aksel-toggle-group__button[data-selected="true"] {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
-  }
-
   .aksel-toggle-group--small .aksel-toggle-group__button {
     padding: var(--ax-space-2) var(--ax-space-12);
     min-height: 2rem;
@@ -6283,7 +6005,7 @@
     cursor: pointer;
     align-items: flex-start;
     gap: var(--ax-space-4);
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
     padding-block: var(--__axc-read-more-pb);
     text-align: start;
@@ -6311,13 +6033,13 @@
   }
 
   .aksel-read-more[data-volume="high"] .aksel-read-more__button {
-    background-color: var(--ax-bg-accent-moderate);
+    background-color: var(--ax-bg-moderate);
     border-radius: var(--ax-radius-full);
   }
 
   .aksel-read-more[data-volume="high"] .aksel-read-more__button:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent);
+    background-color: var(--ax-bg-moderate-hoverA);
+    color: var(--ax-text-default);
   }
 
   .aksel-read-more[data-volume="high"].aksel-read-more--large {
@@ -6391,7 +6113,7 @@
   .aksel-progress-bar__foreground {
     --__ac-progress-bar-translate: initial;
     transform: translateX(var(--__ac-progress-bar-translate));
-    background: var(--ax-bg-info-strong);
+    background: var(--ax-bg-strong);
     transform-origin: 0;
     border-radius: inherit;
     width: 100%;
@@ -6539,7 +6261,7 @@
     --__axc-stepper-circle-size: 1.75rem;
     --__axc-stepper-border-width: 2px;
     --__axc-stepper-line-length: 1rem;
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     font-weight: var(--ax-font-weight-bold);
     margin: 0;
     padding-left: 0;
@@ -6556,7 +6278,7 @@
   }
 
   .aksel-stepper__line {
-    background-color: var(--ax-border-accent);
+    background-color: var(--ax-border-default);
     width: var(--__axc-stepper-border-width);
     height: 100%;
     min-height: var(--__axc-stepper-line-length);
@@ -6633,7 +6355,7 @@
   }
 
   .aksel-stepper__step[data-interactive="true"] {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     border-radius: var(--ax-radius-4);
     text-decoration: none;
   }
@@ -6649,8 +6371,8 @@
   }
 
   .aksel-stepper__step[data-interactive="true"] .aksel-stepper__circle {
-    color: var(--ax-text-accent-subtle);
-    border-color: var(--ax-border-accent-strong);
+    color: var(--ax-text-subtle);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-stepper__step[data-interactive="true"][data-active="true"] .aksel-stepper__content {
@@ -6658,14 +6380,14 @@
   }
 
   .aksel-stepper__step[data-interactive="true"][data-active="true"] .aksel-stepper__circle {
-    color: var(--ax-text-accent-contrast);
-    background-color: var(--ax-bg-accent-strong-pressed);
-    border-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
   }
 
   .aksel-stepper__step[data-interactive="true"][data-active="false"]:hover .aksel-stepper__circle {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
-    border-color: var(--ax-border-accent-strong);
+    background-color: var(--ax-bg-moderate-hoverA);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-stepper__step[data-interactive="false"] {
@@ -6779,7 +6501,7 @@
   }
 
   .aksel-table__body .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-table__row {
@@ -6787,11 +6509,11 @@
   }
 
   .aksel-table__row--selected {
-    background-color: var(--ax-bg-accent-softA);
+    background-color: var(--ax-bg-softA);
   }
 
   .aksel-table__row--selected + .aksel-table__expanded-row {
-    background-color: var(--ax-bg-accent-softA);
+    background-color: var(--ax-bg-softA);
   }
 
   .aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)) {
@@ -6807,7 +6529,7 @@
   }
 
   .aksel-table--zebra-stripes .aksel-table__row--selected + .aksel-table__expanded-row:nth-child(4n) {
-    background-color: var(--ax-bg-accent-softA);
+    background-color: var(--ax-bg-softA);
   }
 
   .aksel-table__header-cell, .aksel-table__data-cell {
@@ -6863,7 +6585,7 @@
 
   .aksel-table__sort-button {
     appearance: none;
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     cursor: pointer;
     padding: var(--ax-space-16) var(--ax-space-12);
     gap: var(--ax-space-4);
@@ -6891,8 +6613,8 @@
   }
 
   .aksel-table__header-cell[aria-sort="ascending"] .aksel-table__sort-button, .aksel-table__header-cell[aria-sort="descending"] .aksel-table__sort-button {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
-    color: var(--ax-text-accent);
+    background-color: var(--ax-bg-moderate-pressedA);
+    color: var(--ax-text-default);
   }
 
   .aksel-table__header-cell--align-right .aksel-table__sort-button {
@@ -6964,7 +6686,7 @@
   }
 
   .aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover, :scope .aksel-table__toggle-expand-cell:hover > .aksel-table__toggle-expand-button, :scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button) {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-table__toggle-expand-cell--open > :where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon) {
@@ -7077,7 +6799,7 @@
 
   .aksel-tabs__tab[data-state="active"] {
     --__axc-tabs-line-width: -4px;
-    --__axc-tabs-line-color: var(--ax-border-accent-strong);
+    --__axc-tabs-line-color: var(--ax-border-strong);
   }
 
   .aksel-tabs__tab:focus-visible {
@@ -7113,7 +6835,7 @@
     padding: var(--ax-space-4) var(--ax-space-16);
   }
 
-  :is(.aksel-tabs__tab, .aksel-tabs__tab--small.aksel-tabs__tab--icon-only, .aksel-tabs__tab--small.aksel-tabs__tab-icon--top) svg {
+  .aksel-tabs__tab svg, .aksel-tabs__tab--small.aksel-tabs__tab--icon-only svg, .aksel-tabs__tab--small.aksel-tabs__tab-icon--top svg {
     font-size: 1.25rem;
   }
 
@@ -7183,28 +6905,14 @@
     display: flex;
   }
 
-  :root .aksel-list ol {
-    padding-left: 2.1rem;
-  }
-
-  _::-webkit-full-page-media {
-    padding-left: 2.1rem;
-  }
-
-  _:future {
-    padding-left: 2.1rem;
-  }
-
-  :root .aksel-list ol .aksel-list__item {
-    padding-left: 0;
-  }
-
-  _::-webkit-full-page-media {
-    padding-left: 0;
-  }
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (appearance: none) {
+    .aksel-list ol {
+      padding-left: 2.1rem;
+    }
 
-  _:future {
-    padding-left: 0;
+    .aksel-list ol .aksel-list__item {
+      padding-left: 0;
+    }
   }
 
   .aksel-list__item {