@navikt/ds-css 7.40.0 → 8.0.0

package/dist/global/tokens.css

@@ -1,338 +1,864 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
+@layer aksel.reset;
 
-:root, :host {
-  --ax-version: "7.40.0";
-  --a-breakpoint-xs: 0;
-  --a-breakpoint-sm: 480px;
-  --a-breakpoint-sm-down: 479px;
-  --a-breakpoint-md: 768px;
-  --a-breakpoint-md-down: 767px;
-  --a-breakpoint-lg: 1024px;
-  --a-breakpoint-lg-down: 1023px;
-  --a-breakpoint-xl: 1280px;
-  --a-breakpoint-xl-down: 1279px;
-  --a-breakpoint-2xl: 1440px;
-  --a-breakpoint-2xl-down: 1439px;
-  --a-text-width-max: 576px;
-  --a-font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
-  --a-font-line-height-heading-2xlarge: 3.25rem;
-  --a-font-line-height-heading-xlarge: 2.5rem;
-  --a-font-line-height-heading-large: 2.25rem;
-  --a-font-line-height-heading-medium: 2rem;
-  --a-font-line-height-heading-small: 1.75rem;
-  --a-font-line-height-heading-xsmall: 1.5rem;
-  --a-font-line-height-xlarge: 1.75rem;
-  --a-font-line-height-large: 1.5rem;
-  --a-font-line-height-medium: 1.25rem;
-  --a-font-size-heading-2xlarge: 2.5rem;
-  --a-font-size-heading-xlarge: 2rem;
-  --a-font-size-heading-large: 1.75rem;
-  --a-font-size-heading-medium: 1.5rem;
-  --a-font-size-heading-small: 1.25rem;
-  --a-font-size-heading-xsmall: 1.125rem;
-  --a-font-size-xlarge: 1.25rem;
-  --a-font-size-large: 1.125rem;
-  --a-font-size-medium: 1rem;
-  --a-font-size-small: 0.875rem;
-  --a-font-weight-bold: 600;
-  --a-font-weight-regular: 400;
-  --a-z-index-popover: 1000;
-  --a-z-index-focus: 10;
-  --a-z-index-tooltip: 2147483647;
-  --a-border-radius-small: 2px;
-  --a-border-radius-medium: 4px;
-  --a-border-radius-large: 8px;
-  --a-border-radius-xlarge: 12px;
-  --a-border-radius-full: 9999px;
-  --a-radius-2: 2px;
-  --a-radius-4: 4px;
-  --a-radius-8: 8px;
-  --a-radius-12: 12px;
-  --a-radius-full: 9999px;
-  --a-space-128: 8rem;
-  --a-space-96: 6rem;
-  --a-space-80: 5rem;
-  --a-space-72: 4.5rem;
-  --a-space-64: 4rem;
-  --a-space-56: 3.5rem;
-  --a-space-48: 3rem;
-  --a-space-44: 2.75rem;
-  --a-space-40: 2.5rem;
-  --a-space-36: 2.25rem;
-  --a-space-32: 2rem;
-  --a-space-28: 1.75rem;
-  --a-space-24: 1.5rem;
-  --a-space-20: 1.25rem;
-  --a-space-16: 1rem;
-  --a-space-12: .75rem;
-  --a-space-8: .5rem;
-  --a-space-6: .375rem;
-  --a-space-4: .25rem;
-  --a-space-2: .125rem;
-  --a-space-1: .0625rem;
-  --a-space-0: 0rem;
-  --a-transparent: rgba(255, 255, 255, 0);
-  --a-white: rgba(255, 255, 255, 1);
-  --a-nav-red: rgba(195, 0, 0, 1);
-  --a-gray-50: rgba(242, 243, 245, 1);
-  --a-gray-100: rgba(236, 238, 240, 1);
-  --a-gray-200: rgba(224, 227, 230, 1);
-  --a-gray-300: rgba(203, 207, 213, 1);
-  --a-gray-400: rgba(170, 176, 186, 1);
-  --a-gray-500: rgba(131, 140, 154, 1);
-  --a-gray-600: rgba(103, 111, 123, 1);
-  --a-gray-700: rgba(82, 89, 98, 1);
-  --a-gray-800: rgba(66, 71, 79, 1);
-  --a-gray-900: rgba(35, 38, 42, 1);
-  --a-grayalpha-50: rgba(38, 55, 89, 0.06);
-  --a-grayalpha-100: rgba(18, 43, 68, 0.08);
-  --a-grayalpha-200: rgba(17, 41, 64, 0.13);
-  --a-grayalpha-300: rgba(7, 26, 54, 0.21);
-  --a-grayalpha-400: rgba(5, 23, 51, 0.34);
-  --a-grayalpha-500: rgba(2, 20, 49, 0.49);
-  --a-grayalpha-600: rgba(2, 15, 34, 0.6);
-  --a-grayalpha-700: rgba(1, 11, 24, 0.68);
-  --a-grayalpha-800: rgba(3, 11, 22, 0.75);
-  --a-grayalpha-900: rgba(2, 5, 9, 0.87);
-  --a-blue-50: rgba(230, 240, 255, 1);
-  --a-blue-100: rgba(204, 225, 255, 1);
-  --a-blue-200: rgba(153, 195, 255, 1);
-  --a-blue-300: rgba(102, 165, 244, 1);
-  --a-blue-400: rgba(51, 134, 224, 1);
-  --a-blue-500: rgba(0, 103, 197, 1);
-  --a-blue-600: rgba(0, 86, 180, 1);
-  --a-blue-700: rgba(0, 69, 156, 1);
-  --a-blue-800: rgba(0, 52, 125, 1);
-  --a-blue-900: rgba(0, 34, 82, 1);
-  --a-red-50: rgba(255, 230, 230, 1);
-  --a-red-100: rgba(255, 194, 194, 1);
-  --a-red-200: rgba(246, 130, 130, 1);
-  --a-red-300: rgba(242, 92, 92, 1);
-  --a-red-400: rgba(222, 46, 46, 1);
-  --a-red-500: rgba(195, 0, 0, 1);
-  --a-red-600: rgba(173, 0, 0, 1);
-  --a-red-700: rgba(140, 0, 0, 1);
-  --a-red-800: rgba(92, 0, 0, 1);
-  --a-red-900: rgba(38, 0, 0, 1);
-  --a-deepblue-50: rgba(230, 241, 248, 1);
-  --a-deepblue-100: rgba(204, 226, 240, 1);
-  --a-deepblue-200: rgba(153, 196, 221, 1);
-  --a-deepblue-300: rgba(102, 163, 196, 1);
-  --a-deepblue-400: rgba(51, 128, 165, 1);
-  --a-deepblue-500: rgba(0, 91, 130, 1);
-  --a-deepblue-600: rgba(0, 80, 119, 1);
-  --a-deepblue-700: rgba(0, 67, 103, 1);
-  --a-deepblue-800: rgba(0, 52, 83, 1);
-  --a-deepblue-900: rgba(0, 36, 58, 1);
-  --a-green-50: rgba(243, 252, 245, 1);
-  --a-green-100: rgba(204, 241, 214, 1);
-  --a-green-200: rgba(153, 222, 173, 1);
-  --a-green-300: rgba(102, 199, 134, 1);
-  --a-green-400: rgba(42, 167, 88, 1);
-  --a-green-500: rgba(6, 137, 58, 1);
-  --a-green-600: rgba(0, 124, 46, 1);
-  --a-green-700: rgba(0, 106, 35, 1);
-  --a-green-800: rgba(0, 85, 25, 1);
-  --a-green-900: rgba(0, 59, 15, 1);
-  --a-lightblue-50: rgba(235, 252, 255, 1);
-  --a-lightblue-100: rgba(216, 249, 255, 1);
-  --a-lightblue-200: rgba(181, 241, 255, 1);
-  --a-lightblue-300: rgba(151, 230, 255, 1);
-  --a-lightblue-400: rgba(124, 218, 248, 1);
-  --a-lightblue-500: rgba(102, 203, 236, 1);
-  --a-lightblue-600: rgba(76, 173, 205, 1);
-  --a-lightblue-700: rgba(54, 141, 168, 1);
-  --a-lightblue-800: rgba(35, 107, 125, 1);
-  --a-lightblue-900: rgba(19, 72, 82, 1);
-  --a-limegreen-50: rgba(253, 255, 230, 1);
-  --a-limegreen-100: rgba(249, 252, 204, 1);
-  --a-limegreen-200: rgba(236, 243, 153, 1);
-  --a-limegreen-300: rgba(217, 227, 102, 1);
-  --a-limegreen-400: rgba(193, 203, 51, 1);
-  --a-limegreen-500: rgba(162, 173, 0, 1);
-  --a-limegreen-600: rgba(147, 158, 0, 1);
-  --a-limegreen-700: rgba(127, 137, 0, 1);
-  --a-limegreen-800: rgba(102, 110, 0, 1);
-  --a-limegreen-900: rgba(71, 78, 0, 1);
-  --a-orange-50: rgba(255, 249, 240, 1);
-  --a-orange-100: rgba(255, 236, 204, 1);
-  --a-orange-200: rgba(255, 215, 153, 1);
-  --a-orange-300: rgba(255, 193, 102, 1);
-  --a-orange-400: rgba(255, 170, 51, 1);
-  --a-orange-500: rgba(255, 145, 0, 1);
-  --a-orange-600: rgba(199, 115, 0, 1);
-  --a-orange-700: rgba(168, 100, 0, 1);
-  --a-orange-800: rgba(125, 76, 0, 1);
-  --a-orange-900: rgba(82, 51, 0, 1);
-  --a-purple-50: rgba(239, 236, 244, 1);
-  --a-purple-100: rgba(224, 216, 233, 1);
-  --a-purple-200: rgba(192, 178, 210, 1);
-  --a-purple-300: rgba(161, 141, 187, 1);
-  --a-purple-400: rgba(130, 105, 162, 1);
-  --a-purple-500: rgba(99, 70, 137, 1);
-  --a-purple-600: rgba(82, 56, 116, 1);
-  --a-purple-700: rgba(65, 43, 93, 1);
-  --a-purple-800: rgba(48, 31, 70, 1);
-  --a-purple-900: rgba(31, 20, 47, 1);
-  --a-shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20);
-  --a-shadow-small: 0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
-  --a-shadow-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
-  --a-shadow-large: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12);
-  --a-shadow-xlarge: 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08);
-  --a-spacing-0: 0;
-  --a-spacing-1: 0.25rem;
-  --a-spacing-2: 0.5rem;
-  --a-spacing-3: 0.75rem;
-  --a-spacing-4: 1rem;
-  --a-spacing-5: 1.25rem;
-  --a-spacing-6: 1.5rem;
-  --a-spacing-7: 1.75rem;
-  --a-spacing-8: 2rem;
-  --a-spacing-9: 2.25rem;
-  --a-spacing-10: 2.5rem;
-  --a-spacing-11: 2.75rem;
-  --a-spacing-12: 3rem;
-  --a-spacing-14: 3.5rem;
-  --a-spacing-16: 4rem;
-  --a-spacing-18: 4.5rem;
-  --a-spacing-20: 5rem;
-  --a-spacing-24: 6rem;
-  --a-spacing-32: 8rem;
-  --a-spacing-05: 0.125rem;
-  --a-spacing-1-alt: 0.375rem;
-  --a-bg-default: var(--a-white);
-  --a-bg-subtle: var(--a-gray-100);
-  --a-border-subtle-hover: var(--a-grayalpha-400);
-  --a-border-default: var(--a-grayalpha-500);
-  --a-border-strong: var(--a-grayalpha-700);
-  --a-border-divider: var(--a-grayalpha-300);
-  --a-border-subtle: var(--a-grayalpha-300);
-  --a-border-action-selected: var(--a-blue-700);
-  --a-border-action-hover: var(--a-blue-600);
-  --a-border-action: var(--a-blue-500);
-  --a-border-selected: var(--a-blue-500);
-  --a-border-success: var(--a-green-500);
-  --a-border-danger: var(--a-red-500);
-  --a-border-warning: var(--a-orange-600);
-  --a-border-info: var(--a-lightblue-700);
-  --a-border-focus-on-inverted: var(--a-blue-200);
-  --a-border-focus: var(--a-blue-800);
-  --a-border-on-inverted: var(--a-gray-200);
-  --a-border-on-inverted-subtle: var(--a-gray-700);
-  --a-border-alt-1: var(--a-purple-400);
-  --a-border-alt-2: var(--a-limegreen-700);
-  --a-border-alt-3: var(--a-deepblue-500);
-  --a-icon-default: var(--a-gray-900);
-  --a-icon-subtle: var(--a-grayalpha-700);
-  --a-icon-action-selected: var(--a-blue-700);
-  --a-icon-action-hover: var(--a-blue-600);
-  --a-icon-action-on-action-subtle: var(--a-blue-600);
-  --a-icon-action: var(--a-blue-500);
-  --a-icon-success: var(--a-green-500);
-  --a-icon-danger: var(--a-red-500);
-  --a-icon-warning: var(--a-orange-600);
-  --a-icon-info: var(--a-lightblue-800);
-  --a-icon-alt-1: var(--a-purple-500);
-  --a-icon-alt-2: var(--a-limegreen-700);
-  --a-icon-alt-3: var(--a-deepblue-500);
-  --a-icon-on-neutral: var(--a-white);
-  --a-icon-on-inverted: var(--a-white);
-  --a-icon-on-action: var(--a-white);
-  --a-icon-on-success: var(--a-white);
-  --a-icon-on-danger: var(--a-white);
-  --a-icon-on-warning: var(--a-gray-900);
-  --a-icon-on-info: var(--a-gray-900);
-  --a-surface-hover: var(--a-grayalpha-100);
-  --a-surface-active: var(--a-grayalpha-200);
-  --a-surface-inverted-hover: var(--a-gray-800);
-  --a-surface-inverted-active: var(--a-gray-700);
-  --a-surface-action-subtle-hover: var(--a-blue-100);
-  --a-surface-action-hover: var(--a-blue-600);
-  --a-surface-action-active: var(--a-blue-700);
-  --a-surface-action-selected-hover: var(--a-blue-800);
-  --a-surface-neutral-subtle-hover: var(--a-grayalpha-200);
-  --a-surface-neutral-active: var(--a-gray-900);
-  --a-surface-neutral-hover: var(--a-gray-800);
-  --a-surface-success-subtle-hover: var(--a-green-200);
-  --a-surface-success-hover: var(--a-green-600);
-  --a-surface-danger-subtle-hover: var(--a-red-200);
-  --a-surface-danger-hover: var(--a-red-600);
-  --a-surface-danger-active: var(--a-red-700);
-  --a-surface-warning-subtle-hover: var(--a-orange-200);
-  --a-surface-info-subtle-hover: var(--a-lightblue-200);
-  --a-surface-default: var(--a-white);
-  --a-surface-selected: var(--a-blue-50);
-  --a-surface-subtle: var(--a-gray-50);
-  --a-surface-transparent: var(--a-transparent);
-  --a-surface-backdrop: var(--a-grayalpha-500);
-  --a-surface-inverted: var(--a-gray-900);
-  --a-surface-action-subtle: var(--a-blue-50);
-  --a-surface-action-selected: var(--a-blue-700);
-  --a-surface-action: var(--a-blue-500);
-  --a-surface-neutral-subtle: var(--a-grayalpha-100);
-  --a-surface-neutral-moderate: var(--a-grayalpha-200);
-  --a-surface-neutral-selected: var(--a-gray-900);
-  --a-surface-neutral: var(--a-gray-700);
-  --a-surface-success-subtle: var(--a-green-100);
-  --a-surface-success-moderate: var(--a-green-200);
-  --a-surface-success: var(--a-green-500);
-  --a-surface-danger-subtle: var(--a-red-100);
-  --a-surface-danger-moderate: var(--a-red-200);
-  --a-surface-danger: var(--a-red-500);
-  --a-surface-warning-subtle: var(--a-orange-100);
-  --a-surface-warning-moderate: var(--a-orange-200);
-  --a-surface-warning: var(--a-orange-500);
-  --a-surface-info-subtle: var(--a-lightblue-100);
-  --a-surface-info-moderate: var(--a-lightblue-200);
-  --a-surface-info: var(--a-lightblue-500);
-  --a-surface-alt-1-subtle: var(--a-purple-100);
-  --a-surface-alt-1-moderate: var(--a-purple-200);
-  --a-surface-alt-1: var(--a-purple-400);
-  --a-surface-alt-2-subtle: var(--a-limegreen-100);
-  --a-surface-alt-2-moderate: var(--a-limegreen-200);
-  --a-surface-alt-2: var(--a-limegreen-400);
-  --a-surface-alt-3-subtle: var(--a-deepblue-100);
-  --a-surface-alt-3-moderate: var(--a-deepblue-200);
-  --a-surface-alt-3-strong: var(--a-deepblue-800);
-  --a-surface-alt-3: var(--a-deepblue-500);
-  --a-text-default: var(--a-gray-900);
-  --a-text-subtle: var(--a-grayalpha-700);
-  --a-text-visited: var(--a-purple-500);
-  --a-text-danger: var(--a-red-500);
-  --a-text-action-selected: var(--a-blue-700);
-  --a-text-action-hover: var(--a-blue-600);
-  --a-text-action-on-action-subtle: var(--a-blue-600);
-  --a-text-action: var(--a-blue-500);
-  --a-text-on-inverted: var(--a-white);
-  --a-text-on-neutral: var(--a-white);
-  --a-text-on-action: var(--a-white);
-  --a-text-on-success: var(--a-white);
-  --a-text-on-danger: var(--a-white);
-  --a-text-on-warning: var(--a-gray-900);
-  --a-text-on-info: var(--a-gray-900);
-  --a-text-on-alt-1: var(--a-white);
-  --a-text-on-alt-2: var(--a-gray-900);
-  --a-text-on-alt-3: var(--a-white);
-  --a-data-surface-1: var(--a-blue-400);
-  --a-data-surface-1-subtle: var(--a-blue-100);
-  --a-data-surface-2: var(--a-deepblue-500);
-  --a-data-surface-2-subtle: var(--a-deepblue-200);
-  --a-data-surface-3: var(--a-orange-600);
-  --a-data-surface-3-subtle: var(--a-orange-300);
-  --a-data-surface-4: var(--a-lightblue-700);
-  --a-data-surface-4-subtle: var(--a-lightblue-500);
-  --a-data-surface-5: var(--a-green-400);
-  --a-data-surface-5-subtle: var(--a-green-200);
-  --a-data-surface-6: var(--a-purple-400);
-  --a-data-surface-6-subtle: var(--a-purple-200);
-  --a-data-border-1: var(--a-blue-400);
-  --a-data-border-2: var(--a-deepblue-500);
-  --a-data-border-3: var(--a-orange-600);
-  --a-data-border-4: var(--a-lightblue-700);
-  --a-data-border-5: var(--a-green-400);
-  --a-data-border-6: var(--a-purple-400);
-  --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
-  --a-shadow-focus-inverted: 0 0 0 3px var(--a-border-focus-on-inverted);
+@layer aksel.theming {
+  :root, :host, .light {
+    --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: #e1ea9a;
+    --ax-meta-lime-400: #cfda6c;
+    --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(180, 202, 0, .396);
+    --ax-meta-lime-400A: rgba(172, 191, 0, .576);
+  }
+
+  .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(12, 22, 39, .66);
+    --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(12, 22, 39, .66);
+    --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: "8.0.0";
+    --ax-space-0: 0rem;
+    --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-16: 16px;
+    --ax-radius-full: 9999px;
+    --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);
+  }
+
+  :root, [data-color="accent"], [data-color=""] {
+    --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="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="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="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="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="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="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="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="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);
+  }
 }
+
+@layer aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form, aksel.components.modules, aksel.layout;