@marsaude/tokens 1.0.0

package/build/marsaude/tokens/mar-mobile_light-default_primitive-classes.scss

@@ -0,0 +1,1343 @@
+  .mar-primary-50 {
+    --mar-primary-50: #f0f6fe;
+  }
+
+  .mar-primary-100 {
+    --mar-primary-100: #e2ecfd;
+  }
+
+  .mar-primary-200 {
+    --mar-primary-200: #bbd4fb;
+  }
+
+  .mar-primary-300 {
+    --mar-primary-300: #90b8f9;
+  }
+
+  .mar-primary-400 {
+    --mar-primary-400: #5593f6;
+  }
+
+  .mar-primary-500 {
+    --mar-primary-500: #0b57d0;
+  }
+
+  .mar-primary-600 {
+    --mar-primary-600: #0a4db8;
+  }
+
+  .mar-primary-700 {
+    --mar-primary-700: #0944a5;
+  }
+
+  .mar-primary-800 {
+    --mar-primary-800: #073a8d;
+  }
+
+  .mar-primary-900 {
+    --mar-primary-900: #052457;
+  }
+
+  .mar-primary-950 {
+    --mar-primary-950: #03183a;
+  }
+
+  .mar-greyscale-0 {
+    --mar-greyscale-0: #ffffff;
+  }
+
+  .mar-greyscale-50 {
+    --mar-greyscale-50: #f5f5f5;
+  }
+
+  .mar-greyscale-100 {
+    --mar-greyscale-100: #ebebeb;
+  }
+
+  .mar-greyscale-200 {
+    --mar-greyscale-200: #cfcfcf;
+  }
+
+  .mar-greyscale-300 {
+    --mar-greyscale-300: #b3b3b3;
+  }
+
+  .mar-greyscale-400 {
+    --mar-greyscale-400: #8c8c8c;
+  }
+
+  .mar-greyscale-500 {
+    --mar-greyscale-500: #4e4e4e;
+  }
+
+  .mar-greyscale-600 {
+    --mar-greyscale-600: #454545;
+  }
+
+  .mar-greyscale-700 {
+    --mar-greyscale-700: #404040;
+  }
+
+  .mar-greyscale-800 {
+    --mar-greyscale-800: #303030;
+  }
+
+  .mar-greyscale-900 {
+    --mar-greyscale-900: #262626;
+  }
+
+  .mar-greyscale-950 {
+    --mar-greyscale-950: #1a1a1a;
+  }
+
+  .mar-greyscale-1000 {
+    --mar-greyscale-1000: #000000;
+  }
+
+  .mar-support-red-50 {
+    --mar-support-red-50: #fef0f0;
+  }
+
+  .mar-support-red-100 {
+    --mar-support-red-100: #fee7e7;
+  }
+
+  .mar-support-red-200 {
+    --mar-support-red-200: #fcc5c5;
+  }
+
+  .mar-support-red-300 {
+    --mar-support-red-300: #fa9e9e;
+  }
+
+  .mar-support-red-400 {
+    --mar-support-red-400: #f76969;
+  }
+
+  .mar-support-red-500 {
+    --mar-support-red-500: #d00b0b;
+  }
+
+  .mar-support-red-600 {
+    --mar-support-red-600: #bd0a0a;
+  }
+
+  .mar-support-red-700 {
+    --mar-support-red-700: #a50909;
+  }
+
+  .mar-support-red-800 {
+    --mar-support-red-800: #830707;
+  }
+
+  .mar-support-red-900 {
+    --mar-support-red-900: #660505;
+  }
+
+  .mar-support-red-950 {
+    --mar-support-red-950: #3a0303;
+  }
+
+  .mar-support-yellow-50 {
+    --mar-support-yellow-50: #fdfbe8;
+  }
+
+  .mar-support-yellow-100 {
+    --mar-support-yellow-100: #fbf8d5;
+  }
+
+  .mar-support-yellow-200 {
+    --mar-support-yellow-200: #f6f0ac;
+  }
+
+  .mar-support-yellow-300 {
+    --mar-support-yellow-300: #f1e779;
+  }
+
+  .mar-support-yellow-400 {
+    --mar-support-yellow-400: #ebdd42;
+  }
+
+  .mar-support-yellow-500 {
+    --mar-support-yellow-500: #e3d218;
+  }
+
+  .mar-support-yellow-600 {
+    --mar-support-yellow-600: #d0c016;
+  }
+
+  .mar-support-yellow-700 {
+    --mar-support-yellow-700: #b4a613;
+  }
+
+  .mar-support-yellow-800 {
+    --mar-support-yellow-800: #988d10;
+  }
+
+  .mar-support-yellow-900 {
+    --mar-support-yellow-900: #6a620b;
+  }
+
+  .mar-support-yellow-950 {
+    --mar-support-yellow-950: #4a4408;
+  }
+
+  .mar-support-green-50 {
+    --mar-support-green-50: #ecfef1;
+  }
+
+  .mar-support-green-100 {
+    --mar-support-green-100: #d3fde0;
+  }
+
+  .mar-support-green-200 {
+    --mar-support-green-200: #99fab6;
+  }
+
+  .mar-support-green-300 {
+    --mar-support-green-300: #38f571;
+  }
+
+  .mar-support-green-400 {
+    --mar-support-green-400: #0ce44d;
+  }
+
+  .mar-support-green-500 {
+    --mar-support-green-500: #0bd046;
+  }
+
+  .mar-support-green-600 {
+    --mar-support-green-600: #0abd40;
+  }
+
+  .mar-support-green-700 {
+    --mar-support-green-700: #09a537;
+  }
+
+  .mar-support-green-800 {
+    --mar-support-green-800: #07882e;
+  }
+
+  .mar-support-green-900 {
+    --mar-support-green-900: #056121;
+  }
+
+  .mar-support-green-950 {
+    --mar-support-green-950: #044918;
+  }
+
+  .mar-support-blue-50 {
+    --mar-support-blue-50: #ecfdfe;
+  }
+
+  .mar-support-blue-100 {
+    --mar-support-blue-100: #cffafc;
+  }
+
+  .mar-support-blue-200 {
+    --mar-support-blue-200: #94f4f9;
+  }
+
+  .mar-support-blue-300 {
+    --mar-support-blue-300: #38ebf5;
+  }
+
+  .mar-support-blue-400 {
+    --mar-support-blue-400: #0cd9e4;
+  }
+
+  .mar-support-blue-500 {
+    --mar-support-blue-500: #0bc6d0;
+  }
+
+  .mar-support-blue-600 {
+    --mar-support-blue-600: #0ab4bd;
+  }
+
+  .mar-support-blue-700 {
+    --mar-support-blue-700: #099da5;
+  }
+
+  .mar-support-blue-800 {
+    --mar-support-blue-800: #078188;
+  }
+
+  .mar-support-blue-900 {
+    --mar-support-blue-900: #055c61;
+  }
+
+  .mar-support-blue-950 {
+    --mar-support-blue-950: #044549;
+  }
+
+  .mar-font-size-12px {
+    --mar-font-size-12px: 12px;
+  }
+
+  .mar-font-size-14px {
+    --mar-font-size-14px: 14px;
+  }
+
+  .mar-font-size-16px {
+    --mar-font-size-16px: 16px;
+  }
+
+  .mar-font-size-18px {
+    --mar-font-size-18px: 18px;
+  }
+
+  .mar-font-size-20px {
+    --mar-font-size-20px: 20px;
+  }
+
+  .mar-font-size-22px {
+    --mar-font-size-22px: 22px;
+  }
+
+  .mar-font-size-24px {
+    --mar-font-size-24px: 24px;
+  }
+
+  .mar-font-size-26px {
+    --mar-font-size-26px: 26px;
+  }
+
+  .mar-font-size-28px {
+    --mar-font-size-28px: 28px;
+  }
+
+  .mar-font-size-30px {
+    --mar-font-size-30px: 30px;
+  }
+
+  .mar-font-size-32px {
+    --mar-font-size-32px: 32px;
+  }
+
+  .mar-font-size-36px {
+    --mar-font-size-36px: 36px;
+  }
+
+  .mar-font-size-38px {
+    --mar-font-size-38px: 38px;
+  }
+
+  .mar-font-size-40px {
+    --mar-font-size-40px: 40px;
+  }
+
+  .mar-font-size-42px {
+    --mar-font-size-42px: 42px;
+  }
+
+  .mar-font-size-44px {
+    --mar-font-size-44px: 44px;
+  }
+
+  .mar-font-size-46px {
+    --mar-font-size-46px: 46px;
+  }
+
+  .mar-font-size-48px {
+    --mar-font-size-48px: 48px;
+  }
+
+  .mar-font-size-50px {
+    --mar-font-size-50px: 50px;
+  }
+
+  .mar-font-size-52px {
+    --mar-font-size-52px: 52px;
+  }
+
+  .mar-font-size-54px {
+    --mar-font-size-54px: 54px;
+  }
+
+  .mar-font-size-56px {
+    --mar-font-size-56px: 56px;
+  }
+
+  .mar-font-size-58px {
+    --mar-font-size-58px: 58px;
+  }
+
+  .mar-font-size-60px {
+    --mar-font-size-60px: 60px;
+  }
+
+  .mar-text-case-uppercase {
+    --mar-text-case-uppercase: uppercase;
+  }
+
+  .mar-text-case-lowercase {
+    --mar-text-case-lowercase: lowecase;
+  }
+
+  .mar-text-case-capitalize {
+    --mar-text-case-capitalize: capitalize;
+  }
+
+  .mar-text-case-none {
+    --mar-text-case-none: none;
+  }
+
+  .mar-text-decoration-none {
+    --mar-text-decoration-none: none;
+  }
+
+  .mar-text-decoration-underline {
+    --mar-text-decoration-underline: underline;
+  }
+
+  .mar-text-decoration-line-through {
+    --mar-text-decoration-line-through: line-through;
+  }
+
+  .mar-font-family-open-sans {
+    --mar-font-family-open-sans: 'Open Sans';
+  }
+
+  .mar-line-height-16px {
+    --mar-line-height-16px: 16px;
+  }
+
+  .mar-line-height-20px {
+    --mar-line-height-20px: 20px;
+  }
+
+  .mar-line-height-24px {
+    --mar-line-height-24px: 24px;
+  }
+
+  .mar-line-height-28px {
+    --mar-line-height-28px: 28px;
+  }
+
+  .mar-line-height-32px {
+    --mar-line-height-32px: 32px;
+  }
+
+  .mar-line-height-36px {
+    --mar-line-height-36px: 36px;
+  }
+
+  .mar-line-height-40px {
+    --mar-line-height-40px: 40px;
+  }
+
+  .mar-line-height-44px {
+    --mar-line-height-44px: 44px;
+  }
+
+  .mar-line-height-48px {
+    --mar-line-height-48px: 48px;
+  }
+
+  .mar-line-height-52px {
+    --mar-line-height-52px: 52px;
+  }
+
+  .mar-line-height-56px {
+    --mar-line-height-56px: 56px;
+  }
+
+  .mar-line-height-60px {
+    --mar-line-height-60px: 60px;
+  }
+
+  .mar-line-height-64px {
+    --mar-line-height-64px: 64px;
+  }
+
+  .mar-line-height-68px {
+    --mar-line-height-68px: 68px;
+  }
+
+  .mar-letter-spacing-0 {
+    --mar-letter-spacing-0: 0;
+  }
+
+  .mar-font-weight-400 {
+    --mar-font-weight-400: 400;
+  }
+
+  .mar-font-weight-500 {
+    --mar-font-weight-500: 500;
+  }
+
+  .mar-font-weight-600 {
+    --mar-font-weight-600: 600;
+  }
+
+  .mar-font-weight-700 {
+    --mar-font-weight-700: 700;
+  }
+
+  .mar-spacing-0 {
+    --mar-spacing-0: 0px;
+  }
+
+  .mar-spacing-50 {
+    --mar-spacing-50: 4px;
+  }
+
+  .mar-spacing-100 {
+    --mar-spacing-100: 8px;
+  }
+
+  .mar-spacing-150 {
+    --mar-spacing-150: 12px;
+  }
+
+  .mar-spacing-200 {
+    --mar-spacing-200: 16px;
+  }
+
+  .mar-spacing-250 {
+    --mar-spacing-250: 20px;
+  }
+
+  .mar-spacing-300 {
+    --mar-spacing-300: 24px;
+  }
+
+  .mar-spacing-350 {
+    --mar-spacing-350: 28px;
+  }
+
+  .mar-spacing-400 {
+    --mar-spacing-400: 32px;
+  }
+
+  .mar-spacing-450 {
+    --mar-spacing-450: 36px;
+  }
+
+  .mar-spacing-500 {
+    --mar-spacing-500: 40px;
+  }
+
+  .mar-spacing-550 {
+    --mar-spacing-550: 44px;
+  }
+
+  .mar-spacing-600 {
+    --mar-spacing-600: 48px;
+  }
+
+  .mar-spacing-650 {
+    --mar-spacing-650: 52px;
+  }
+
+  .mar-spacing-700 {
+    --mar-spacing-700: 56px;
+  }
+
+  .mar-spacing-750 {
+    --mar-spacing-750: 60px;
+  }
+
+  .mar-spacing-800 {
+    --mar-spacing-800: 64px;
+  }
+
+  .mar-spacing-850 {
+    --mar-spacing-850: 68px;
+  }
+
+  .mar-spacing-900 {
+    --mar-spacing-900: 72px;
+  }
+
+  .mar-spacing-950 {
+    --mar-spacing-950: 76px;
+  }
+
+  .mar-spacing-1000 {
+    --mar-spacing-1000: 80px;
+  }
+
+  .mar-spacing-default-xs {
+    --mar-spacing-default-xs: 4px;
+  }
+
+  .mar-spacing-default-sm {
+    --mar-spacing-default-sm: 8px;
+  }
+
+  .mar-spacing-default-md {
+    --mar-spacing-default-md: 12px;
+  }
+
+  .mar-spacing-default-lg {
+    --mar-spacing-default-lg: 16px;
+  }
+
+  .mar-spacing-default-xl {
+    --mar-spacing-default-xl: 24px;
+  }
+
+  .mar-spacing-default-2xl {
+    --mar-spacing-default-2xl: 32px;
+  }
+
+  .mar-spacing-default-3xl {
+    --mar-spacing-default-3xl: 40px;
+  }
+
+  .mar-spacing-default-4xl {
+    --mar-spacing-default-4xl: 48px;
+  }
+
+  .mar-spacing-default-component-fixed-xs {
+    --mar-spacing-default-component-fixed-xs: 4px;
+  }
+
+  .mar-spacing-default-component-fixed-sm {
+    --mar-spacing-default-component-fixed-sm: 8px;
+  }
+
+  .mar-spacing-default-component-fixed-md {
+    --mar-spacing-default-component-fixed-md: 12px;
+  }
+
+  .mar-spacing-default-component-fixed-lg {
+    --mar-spacing-default-component-fixed-lg: 16px;
+  }
+
+  .mar-spacing-default-component-fixed-xl {
+    --mar-spacing-default-component-fixed-xl: 20px;
+  }
+
+  .mar-spacing-default-component-responsive-xs {
+    --mar-spacing-default-component-responsive-xs: 12px;
+  }
+
+  .mar-spacing-default-component-responsive-sm {
+    --mar-spacing-default-component-responsive-sm: 16px;
+  }
+
+  .mar-border-width-none {
+    --mar-border-width-none: 0px;
+  }
+
+  .mar-border-width-thin {
+    --mar-border-width-thin: 1px;
+  }
+
+  .mar-border-width-regular {
+    --mar-border-width-regular: 2px;
+  }
+
+  .mar-border-radius-none {
+    --mar-border-radius-none: 0px;
+  }
+
+  .mar-border-radius-xs {
+    --mar-border-radius-xs: 4px;
+  }
+
+  .mar-border-radius-sm {
+    --mar-border-radius-sm: 8px;
+  }
+
+  .mar-border-radius-md {
+    --mar-border-radius-md: 12px;
+  }
+
+  .mar-border-radius-lg {
+    --mar-border-radius-lg: 16px;
+  }
+
+  .mar-border-radius-xl {
+    --mar-border-radius-xl: 20px;
+  }
+
+  .mar-border-radius-2xl {
+    --mar-border-radius-2xl: 24px;
+  }
+
+  .mar-border-radius-circular {
+    --mar-border-radius-circular: 999px;
+  }
+
+  .mar-sizing-0 {
+    --mar-sizing-0: 0px;
+  }
+
+  .mar-sizing-50 {
+    --mar-sizing-50: 4px;
+  }
+
+  .mar-sizing-100 {
+    --mar-sizing-100: 8px;
+  }
+
+  .mar-sizing-150 {
+    --mar-sizing-150: 12px;
+  }
+
+  .mar-sizing-200 {
+    --mar-sizing-200: 16px;
+  }
+
+  .mar-sizing-250 {
+    --mar-sizing-250: 20px;
+  }
+
+  .mar-sizing-300 {
+    --mar-sizing-300: 24px;
+  }
+
+  .mar-sizing-350 {
+    --mar-sizing-350: 28px;
+  }
+
+  .mar-sizing-400 {
+    --mar-sizing-400: 32px;
+  }
+
+  .mar-sizing-450 {
+    --mar-sizing-450: 36px;
+  }
+
+  .mar-sizing-500 {
+    --mar-sizing-500: 40px;
+  }
+
+  .mar-sizing-550 {
+    --mar-sizing-550: 44px;
+  }
+
+  .mar-sizing-600 {
+    --mar-sizing-600: 48px;
+  }
+
+  .mar-sizing-650 {
+    --mar-sizing-650: 52px;
+  }
+
+  .mar-sizing-700 {
+    --mar-sizing-700: 56px;
+  }
+
+  .mar-sizing-750 {
+    --mar-sizing-750: 60px;
+  }
+
+  .mar-sizing-800 {
+    --mar-sizing-800: 64px;
+  }
+
+  .mar-sizing-850 {
+    --mar-sizing-850: 68px;
+  }
+
+  .mar-sizing-900 {
+    --mar-sizing-900: 72px;
+  }
+
+  .mar-sizing-950 {
+    --mar-sizing-950: 76px;
+  }
+
+  .mar-sizing-1000 {
+    --mar-sizing-1000: 80px;
+  }
+
+  .mar-sizing-fixed-xs {
+    --mar-sizing-fixed-xs: 12px;
+  }
+
+  .mar-sizing-fixed-sm {
+    --mar-sizing-fixed-sm: 16px;
+  }
+
+  .mar-sizing-fixed-md {
+    --mar-sizing-fixed-md: 20px;
+  }
+
+  .mar-sizing-fixed-lg {
+    --mar-sizing-fixed-lg: 24px;
+  }
+
+  .mar-sizing-fixed-xl {
+    --mar-sizing-fixed-xl: 28px;
+  }
+
+  .mar-sizing-fixed-2xl {
+    --mar-sizing-fixed-2xl: 32px;
+  }
+
+  .mar-sizing-fixed-3xl {
+    --mar-sizing-fixed-3xl: 36px;
+  }
+
+  .mar-sizing-fixed-4xl {
+    --mar-sizing-fixed-4xl: 40px;
+  }
+
+  .mar-sizing-responsive-sm {
+    --mar-sizing-responsive-sm: 16px;
+  }
+
+  .mar-sizing-responsive-md {
+    --mar-sizing-responsive-md: 20px;
+  }
+
+  .mar-opacity-100 {
+    --mar-opacity-100: 0.12;
+  }
+
+  .mar-opacity-200 {
+    --mar-opacity-200: 0.2;
+  }
+
+  .mar-opacity-300 {
+    --mar-opacity-300: 0.3;
+  }
+
+  .mar-opacity-400 {
+    --mar-opacity-400: 0.4;
+  }
+
+  .mar-opacity-500 {
+    --mar-opacity-500: 0.5;
+  }
+
+  .mar-opacity-600 {
+    --mar-opacity-600: 0.6;
+  }
+
+  .mar-chart-green-50 {
+    --mar-chart-green-50: #f1fcf2;
+  }
+
+  .mar-chart-green-100 {
+    --mar-chart-green-100: #defae4;
+  }
+
+  .mar-chart-green-200 {
+    --mar-chart-green-200: #bff3c9;
+  }
+
+  .mar-chart-green-300 {
+    --mar-chart-green-300: #8ee7a0;
+  }
+
+  .mar-chart-green-400 {
+    --mar-chart-green-400: #55d36f;
+  }
+
+  .mar-chart-green-500 {
+    --mar-chart-green-500: #2eb94b;
+  }
+
+  .mar-chart-green-600 {
+    --mar-chart-green-600: #22a13d;
+  }
+
+  .mar-chart-green-700 {
+    --mar-chart-green-700: #1d7831;
+  }
+
+  .mar-chart-green-800 {
+    --mar-chart-green-800: #1c5f2b;
+  }
+
+  .mar-chart-green-900 {
+    --mar-chart-green-900: #194e26;
+  }
+
+  .mar-chart-green-950 {
+    --mar-chart-green-950: #082b12;
+  }
+
+  .mar-chart-yellow-50 {
+    --mar-chart-yellow-50: #fffaeb;
+  }
+
+  .mar-chart-yellow-100 {
+    --mar-chart-yellow-100: #fff1c6;
+  }
+
+  .mar-chart-yellow-200 {
+    --mar-chart-yellow-200: #ffe088;
+  }
+
+  .mar-chart-yellow-300 {
+    --mar-chart-yellow-300: #ffc53a;
+  }
+
+  .mar-chart-yellow-400 {
+    --mar-chart-yellow-400: #ffb420;
+  }
+
+  .mar-chart-yellow-500 {
+    --mar-chart-yellow-500: #f99007;
+  }
+
+  .mar-chart-yellow-600 {
+    --mar-chart-yellow-600: #dd6a02;
+  }
+
+  .mar-chart-yellow-700 {
+    --mar-chart-yellow-700: #b74806;
+  }
+
+  .mar-chart-yellow-800 {
+    --mar-chart-yellow-800: #94370c;
+  }
+
+  .mar-chart-yellow-900 {
+    --mar-chart-yellow-900: #7a2e0d;
+  }
+
+  .mar-chart-yellow-950 {
+    --mar-chart-yellow-950: #461602;
+  }
+
+  .mar-chart-red-50 {
+    --mar-chart-red-50: #fef2f2;
+  }
+
+  .mar-chart-red-100 {
+    --mar-chart-red-100: #fee2e2;
+  }
+
+  .mar-chart-red-200 {
+    --mar-chart-red-200: #fecaca;
+  }
+
+  .mar-chart-red-300 {
+    --mar-chart-red-300: #fca5a5;
+  }
+
+  .mar-chart-red-400 {
+    --mar-chart-red-400: #f97070;
+  }
+
+  .mar-chart-red-500 {
+    --mar-chart-red-500: #f04343;
+  }
+
+  .mar-chart-red-600 {
+    --mar-chart-red-600: #de2d2d;
+  }
+
+  .mar-chart-red-700 {
+    --mar-chart-red-700: #ba1b1b;
+  }
+
+  .mar-chart-red-800 {
+    --mar-chart-red-800: #9a1a1a;
+  }
+
+  .mar-chart-red-900 {
+    --mar-chart-red-900: #7f1d1d;
+  }
+
+  .mar-chart-red-950 {
+    --mar-chart-red-950: #450a0a;
+  }
+
+  .mar-chart-purple-50 {
+    --mar-chart-purple-50: #f4f3ff;
+  }
+
+  .mar-chart-purple-100 {
+    --mar-chart-purple-100: #ece9fe;
+  }
+
+  .mar-chart-purple-200 {
+    --mar-chart-purple-200: #dad5ff;
+  }
+
+  .mar-chart-purple-300 {
+    --mar-chart-purple-300: #bfb4fe;
+  }
+
+  .mar-chart-purple-400 {
+    --mar-chart-purple-400: #a089fc;
+  }
+
+  .mar-chart-purple-500 {
+    --mar-chart-purple-500: #8159f9;
+  }
+
+  .mar-chart-purple-600 {
+    --mar-chart-purple-600: #7036f1;
+  }
+
+  .mar-chart-purple-700 {
+    --mar-chart-purple-700: #682dde;
+  }
+
+  .mar-chart-purple-800 {
+    --mar-chart-purple-800: #511eb9;
+  }
+
+  .mar-chart-purple-900 {
+    --mar-chart-purple-900: #441b97;
+  }
+
+  .mar-chart-purple-950 {
+    --mar-chart-purple-950: #280e67;
+  }
+
+  .mar-chart-safe-subtle {
+    --mar-chart-safe-subtle: #defae4;
+  }
+
+  .mar-chart-safe-highlight {
+    --mar-chart-safe-highlight: #22a13d;
+  }
+
+  .mar-chart-caution-subtle {
+    --mar-chart-caution-subtle: #fff1c6;
+  }
+
+  .mar-chart-caution-highlight {
+    --mar-chart-caution-highlight: #ffc53a;
+  }
+
+  .mar-chart-danger-subtle {
+    --mar-chart-danger-subtle: #fee2e2;
+  }
+
+  .mar-chart-danger-highlight {
+    --mar-chart-danger-highlight: #de2d2d;
+  }
+
+  .mar-chart-critical-subtle {
+    --mar-chart-critical-subtle: #ece9fe;
+  }
+
+  .mar-chart-critical-highlight {
+    --mar-chart-critical-highlight: #682dde;
+  }
+
+  .mar-chart-neutral-subtle {
+    --mar-chart-neutral-subtle: #e2ecfd;
+  }
+
+  .mar-chart-neutral-highlight {
+    --mar-chart-neutral-highlight: #5593f6;
+  }
+
+  .mar-background-primary {
+    --mar-background-primary: #ffffff;
+  }
+
+  .mar-background-secondary {
+    --mar-background-secondary: #f5f5f5;
+  }
+
+  .mar-background-inverse {
+    --mar-background-inverse: #000000;
+  }
+
+  .mar-background-brand {
+    --mar-background-brand: #0b57d0;
+  }
+
+  .mar-surface-primary {
+    --mar-surface-primary: #ffffff;
+  }
+
+  .mar-surface-secondary {
+    --mar-surface-secondary: #f5f5f5;
+  }
+
+  .mar-surface-inverse {
+    --mar-surface-inverse: #000000;
+  }
+
+  .mar-surface-brand {
+    --mar-surface-brand: #0b57d0;
+  }
+
+  .mar-foreground-primary-default {
+    --mar-foreground-primary-default: #0b57d0;
+  }
+
+  .mar-foreground-primary-hover {
+    --mar-foreground-primary-hover: #0944a5;
+  }
+
+  .mar-foreground-primary-active {
+    --mar-foreground-primary-active: #073a8d;
+  }
+
+  .mar-foreground-primary-disabled {
+    --mar-foreground-primary-disabled: #f5f5f5;
+  }
+
+  .mar-foreground-secondary-default {
+    --mar-foreground-secondary-default: #ffffff;
+  }
+
+  .mar-foreground-secondary-hover {
+    --mar-foreground-secondary-hover: #f0f6fe;
+  }
+
+  .mar-foreground-secondary-active {
+    --mar-foreground-secondary-active: #e2ecfd;
+  }
+
+  .mar-foreground-secondary-disabled {
+    --mar-foreground-secondary-disabled: #f5f5f5;
+  }
+
+  .mar-foreground-tertiary-default {
+    --mar-foreground-tertiary-default: #f0f6fe;
+  }
+
+  .mar-foreground-tertiary-hover {
+    --mar-foreground-tertiary-hover: #e2ecfd;
+  }
+
+  .mar-foreground-tertiary-active {
+    --mar-foreground-tertiary-active: #bbd4fb;
+  }
+
+  .mar-foreground-tertiary-disabled {
+    --mar-foreground-tertiary-disabled: #f5f5f5;
+  }
+
+  .mar-foreground-support-success {
+    --mar-foreground-support-success: #ecfef1;
+  }
+
+  .mar-foreground-support-warning {
+    --mar-foreground-support-warning: #fbf8d5;
+  }
+
+  .mar-foreground-support-danger {
+    --mar-foreground-support-danger: #fef0f0;
+  }
+
+  .mar-foreground-support-info {
+    --mar-foreground-support-info: #ecfdfe;
+  }
+
+  .mar-border-primary-default {
+    --mar-border-primary-default: #0b57d0;
+  }
+
+  .mar-border-primary-hover {
+    --mar-border-primary-hover: #0944a5;
+  }
+
+  .mar-border-primary-active {
+    --mar-border-primary-active: #073a8d;
+  }
+
+  .mar-border-primary-disabled {
+    --mar-border-primary-disabled: #f5f5f5;
+  }
+
+  .mar-border-secondary-default {
+    --mar-border-secondary-default: #cfcfcf;
+  }
+
+  .mar-border-secondary-hover {
+    --mar-border-secondary-hover: #b3b3b3;
+  }
+
+  .mar-border-secondary-active {
+    --mar-border-secondary-active: #8c8c8c;
+  }
+
+  .mar-border-secondary-disabled {
+    --mar-border-secondary-disabled: #f5f5f5;
+  }
+
+  .mar-border-inverse-default {
+    --mar-border-inverse-default: #ffffff;
+  }
+
+  .mar-border-inverse-hover {
+    --mar-border-inverse-hover: #f0f6fe;
+  }
+
+  .mar-border-inverse-active {
+    --mar-border-inverse-active: #e2ecfd;
+  }
+
+  .mar-border-inverse-disabled {
+    --mar-border-inverse-disabled: #f5f5f5;
+  }
+
+  .mar-border-support-success {
+    --mar-border-support-success: #0abd40;
+  }
+
+  .mar-border-support-warning {
+    --mar-border-support-warning: #d0c016;
+  }
+
+  .mar-border-support-danger {
+    --mar-border-support-danger: #bd0a0a;
+  }
+
+  .mar-border-support-info {
+    --mar-border-support-info: #099da5;
+  }
+
+  .mar-border-focus-primary {
+    --mar-border-focus-primary: #90b8f9;
+  }
+
+  .mar-text-primary {
+    --mar-text-primary: #000000;
+  }
+
+  .mar-text-secondary {
+    --mar-text-secondary: #303030;
+  }
+
+  .mar-text-tertiary {
+    --mar-text-tertiary: #4e4e4e;
+  }
+
+  .mar-text-inverse {
+    --mar-text-inverse: #ffffff;
+  }
+
+  .mar-text-disabled {
+    --mar-text-disabled: #ebebeb;
+  }
+
+  .mar-text-support-success {
+    --mar-text-support-success: #0abd40;
+  }
+
+  .mar-text-support-warning {
+    --mar-text-support-warning: #d0c016;
+  }
+
+  .mar-text-support-danger {
+    --mar-text-support-danger: #bd0a0a;
+  }
+
+  .mar-text-support-info {
+    --mar-text-support-info: #099da5;
+  }
+
+  .mar-overlays-default-primary {
+    --mar-overlays-default-primary: lch(0 0 none / 0.12);
+  }
+
+  .mar-overlays-default-secondary {
+    --mar-overlays-default-secondary: lch(0 0 none / 0.3);
+  }
+
+  .mar-overlays-default-tertiary {
+    --mar-overlays-default-tertiary: lch(0 0 none / 0.6);
+  }
+
+  .mar-overlays-action-primary {
+    --mar-overlays-action-primary: lch(39.123 71.759 284.31 / 0.12);
+  }
+
+  .mar-overlays-action-secondary {
+    --mar-overlays-action-secondary: lch(39.123 71.759 284.31 / 0.3);
+  }
+
+  .mar-overlays-action-tertiary {
+    --mar-overlays-action-tertiary: lch(39.123 71.759 284.31 / 0.6);
+  }
+
+  .mar-drop-shadow-primary {
+    --mar-drop-shadow-primary: 0 4px 8px 4px lch(0 0 none / 0.12);
+  }
+
+  .mar-fill-brand {
+    --mar-fill-brand: #5593f6;
+  }
+
+  .mar-fill-primary {
+    --mar-fill-primary: #ffffff;
+  }
+
+  .mar-fill-secondary {
+    --mar-fill-secondary: #000000;
+  }
+
+  .mar-heading-xxl {
+    --mar-heading-xxl: 400 36px/44px 'Open Sans';
+  }
+
+  .mar-heading-xl {
+    --mar-heading-xl: 400 32px/40px 'Open Sans';
+  }
+
+  .mar-heading-lg {
+    --mar-heading-lg: 400 28px/36px 'Open Sans';
+  }
+
+  .mar-heading-md {
+    --mar-heading-md: 400 24px/32px 'Open Sans';
+  }
+
+  .mar-heading-sm {
+    --mar-heading-sm: 400 20px/28px 'Open Sans';
+  }
+
+  .mar-body-lg {
+    --mar-body-lg: 400 18px/24px 'Open Sans';
+  }
+
+  .mar-body-md {
+    --mar-body-md: 400 16px/20px 'Open Sans';
+  }
+
+  .mar-body-sm {
+    --mar-body-sm: 400 14px/20px 'Open Sans';
+  }
+
+  .mar-label-lg {
+    --mar-label-lg: 500 18px/24px 'Open Sans';
+  }
+
+  .mar-label-md {
+    --mar-label-md: 500 16px/20px 'Open Sans';
+  }
+
+  .mar-label-sm {
+    --mar-label-sm: 500 14px/20px 'Open Sans';
+  }
+
+  .mar-caption-default {
+    --mar-caption-default: 400 12px/16px 'Open Sans';
+  }
+
+  .mar-caption-strong {
+    --mar-caption-strong: 700 12px/16px 'Open Sans';
+  }
+
+  .mar-button-lg {
+    --mar-button-lg: 700 18px/24px 'Open Sans';
+  }
+
+  .mar-button-md {
+    --mar-button-md: 700 16px/20px 'Open Sans';
+  }
+
+  .mar-button-sm {
+    --mar-button-sm: 700 14px/20px 'Open Sans';
+  }
+
+  .mar-links-lg {
+    --mar-links-lg: 600 18px/24px 'Open Sans';
+  }
+
+  .mar-links-md {
+    --mar-links-md: 600 16px/20px 'Open Sans';
+  }
+
+  .mar-links-sm {
+    --mar-links-sm: 600 14px/20px 'Open Sans';
+  }