/*
* Font styles
*/
h1,
.hmc-title-xl,
.md-typeset h1 {
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  text-transform: none;
  color: var(--hmc-color-content-default);
}
h2,
.hmc-title-l,
.md-typeset h2 {
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  text-transform: none;
  color: var(--hmc-color-content-default);
}
h3,
.hmc-title-m,
.md-typeset h3 {
  font-weight: 600;
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 36px;
  text-transform: none;
  color: var(--hmc-color-content-default);
}
h4,
.hmc-title-s,
.md-typeset h4 {
  font-weight: 600;
  font-family: var(--font-family-heading);
  font-size: 24px;
  line-height: 32px;
  text-transform: none;
  color: var(--hmc-color-content-default);
}
h5,
.hmc-title-xs,
.md-typeset h5 {
  font-weight: 600;
  font-family: var(--font-family-heading);
  font-size: 20px;
  line-height: 28px;
  text-transform: none;
  color: var(--hmc-color-content-default);
}
h6,
.hmc-subtitle-m,
.md-typeset h6 {
  font-weight: 700;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 24px;
  text-transform: none;
  color: var(--hmc-color-content-default);
}
.hmc-subtitle-s {
  font-weight: 700;
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 20px;
}
.hmc-subtitle-xs {
  font-weight: 700;
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 16px;
}
.hmc-body-m {
  font-weight: 400;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 24px;
}
.hmc-body-s {
  font-weight: 400;
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 20px;
}
.hmc-body-xs {
  font-weight: 400;
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 16px;
}
.hmc-button-m {
  font-weight: 500;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 24px;
}
.hmc-button-s {
  font-weight: 500;
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 16px;
}
.hmc-overline {
  font-weight: 500;
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
}
.hmc-link-m {
  font-weight: 400;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
}
.hmc-link-s {
  font-weight: 400;
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
}
.hmc-link-xs {
  font-weight: 400;
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 16px;
  text-decoration: underline;
}

/*
* Core Harmonic variables
*/
:root {
  --font-family-heading: "Barlow", sans-serif;
  --font-family-body: "Inter", sans-serif;

  --font-size-small: 12px;
  --font-size-default: 14px;
  --font-size-medium: 16px;

  --hmc-color-pink-1000: #571140;
  --hmc-color-pink-900: #761a57;
  --hmc-color-pink-800: #9a196f;
  --hmc-color-pink-700: #b32d87;
  --hmc-color-pink-600: #d3379f;
  --hmc-color-pink-500: #e84db4;
  --hmc-color-pink-400: #f07ac9;
  --hmc-color-pink-300: #f7a1da;
  --hmc-color-pink-200: #f9c7e8;
  --hmc-color-pink-100: #feecf8;
  --hmc-color-teal-1000: #053347;
  --hmc-color-teal-900: #034663;
  --hmc-color-teal-800: #07597e;
  --hmc-color-teal-700: #0e6d95;
  --hmc-color-teal-600: #1981ae;
  --hmc-color-teal-500: #1694ca;
  --hmc-color-teal-400: #2cafe8;
  --hmc-color-teal-300: #68c6ee;
  --hmc-color-teal-200: #a8def5;
  --hmc-color-teal-100: #e3f5fc;
  --hmc-color-red-1000: #64060e;
  --hmc-color-red-900: #840d17;
  --hmc-color-red-800: #a71420;
  --hmc-color-red-700: #c81a28;
  --hmc-color-red-600: #e13745;
  --hmc-color-red-500: #f64c5a;
  --hmc-color-red-400: #fe7b86;
  --hmc-color-red-300: #ffa3ab;
  --hmc-color-red-200: #fccace;
  --hmc-color-red-100: #feeeef;
  --hmc-color-orange-1000: #551e03;
  --hmc-color-orange-900: #702c0a;
  --hmc-color-orange-800: #91370b;
  --hmc-color-orange-700: #ae4410;
  --hmc-color-orange-600: #cd5215;
  --hmc-color-orange-500: #e76423;
  --hmc-color-orange-400: #fb8246;
  --hmc-color-orange-300: #fea77c;
  --hmc-color-orange-200: #fccab1;
  --hmc-color-orange-100: #feefe7;
  --hmc-color-green-1000: #0d3624;
  --hmc-color-green-900: #114a32;
  --hmc-color-green-800: #115f3f;
  --hmc-color-green-700: #16744d;
  --hmc-color-green-600: #1f895e;
  --hmc-color-green-500: #2e9e6f;
  --hmc-color-green-400: #3db885;
  --hmc-color-green-300: #6fcea6;
  --hmc-color-green-200: #abe3cd;
  --hmc-color-green-100: #e4f6ef;
  --hmc-color-purple-1000: #431c5f;
  --hmc-color-purple-900: #5d2287;
  --hmc-color-purple-800: #7531a5;
  --hmc-color-purple-700: #8e3dc7;
  --hmc-color-purple-600: #a451df;
  --hmc-color-purple-500: #b16ee0;
  --hmc-color-purple-400: #c48eeb;
  --hmc-color-purple-300: #d4adf0;
  --hmc-color-purple-200: #e5cef6;
  --hmc-color-purple-100: #f6eefc;
  --hmc-color-blue-1000: #00305b;
  --hmc-color-blue-900: #00427a;
  --hmc-color-blue-800: #00549a;
  --hmc-color-blue-700: #0067b9;
  --hmc-color-blue-600: #0c79df;
  --hmc-color-blue-500: #3a8ee9;
  --hmc-color-blue-400: #6ca7ef;
  --hmc-color-blue-300: #92befc;
  --hmc-color-blue-200: #c6d8f6;
  --hmc-color-blue-100: #edf3fc;
  --hmc-color-gray-white: #fff;
  --hmc-color-gray-black: #101820;
  --hmc-color-gray-1000: #293038;
  --hmc-color-gray-900: #3a424b;
  --hmc-color-gray-800: #4b545d;
  --hmc-color-gray-700: #5e6773;
  --hmc-color-gray-600: #717984;
  --hmc-color-gray-500: #848b95;
  --hmc-color-gray-400: #9fa4ad;
  --hmc-color-gray-300: #b7bbc3;
  --hmc-color-gray-200: #d5d8dc;
  --hmc-color-gray-100: #f0f1f3;

  /*Z-index*/
  --z-index-modal: 9000;
  --z-index-overlay: 8000;
  --z-index-dropdown: 7000;
}

/**
 * Light semantic colors
*/
body[data-md-color-scheme="harmonic-light"] {
  --hmc-color-dataviz-background: var(--hmc-color-gray-white);
  --hmc-color-dataviz-sequential-e-6: var(--hmc-color-pink-1000);
  --hmc-color-dataviz-sequential-e-5: var(--hmc-color-pink-900);
  --hmc-color-dataviz-sequential-e-4: var(--hmc-color-pink-800);
  --hmc-color-dataviz-sequential-e-3: var(--hmc-color-pink-700);
  --hmc-color-dataviz-sequential-e-2: var(--hmc-color-pink-600);
  --hmc-color-dataviz-sequential-e-1: var(--hmc-color-pink-500);
  --hmc-color-dataviz-sequential-d-6: var(--hmc-color-green-1000);
  --hmc-color-dataviz-sequential-d-5: var(--hmc-color-green-900);
  --hmc-color-dataviz-sequential-d-4: var(--hmc-color-green-800);
  --hmc-color-dataviz-sequential-d-3: var(--hmc-color-green-700);
  --hmc-color-dataviz-sequential-d-2: var(--hmc-color-green-600);
  --hmc-color-dataviz-sequential-d-1: var(--hmc-color-green-500);
  --hmc-color-dataviz-sequential-c-6: var(--hmc-color-purple-1000);
  --hmc-color-dataviz-sequential-c-5: var(--hmc-color-purple-900);
  --hmc-color-dataviz-sequential-c-4: var(--hmc-color-purple-800);
  --hmc-color-dataviz-sequential-c-3: var(--hmc-color-purple-700);
  --hmc-color-dataviz-sequential-c-2: var(--hmc-color-purple-600);
  --hmc-color-dataviz-sequential-c-1: var(--hmc-color-purple-500);
  --hmc-color-dataviz-sequential-b-6: var(--hmc-color-orange-1000);
  --hmc-color-dataviz-sequential-b-5: var(--hmc-color-orange-900);
  --hmc-color-dataviz-sequential-b-4: var(--hmc-color-orange-800);
  --hmc-color-dataviz-sequential-b-3: var(--hmc-color-orange-700);
  --hmc-color-dataviz-sequential-b-2: var(--hmc-color-orange-600);
  --hmc-color-dataviz-sequential-b-1: var(--hmc-color-orange-500);
  --hmc-color-dataviz-sequential-a-6: var(--hmc-color-teal-1000);
  --hmc-color-dataviz-sequential-a-5: var(--hmc-color-teal-900);
  --hmc-color-dataviz-sequential-a-4: var(--hmc-color-teal-800);
  --hmc-color-dataviz-sequential-a-3: var(--hmc-color-teal-700);
  --hmc-color-dataviz-sequential-a-2: var(--hmc-color-teal-600);
  --hmc-color-dataviz-sequential-a-1: var(--hmc-color-teal-500);
  --hmc-color-dataviz-categorical-6: var(--hmc-color-teal-1000);
  --hmc-color-dataviz-categorical-5: var(--hmc-color-pink-800);
  --hmc-color-dataviz-categorical-4: var(--hmc-color-green-800);
  --hmc-color-dataviz-categorical-3: var(--hmc-color-purple-700);
  --hmc-color-dataviz-categorical-2: var(--hmc-color-orange-500);
  --hmc-color-dataviz-categorical-1: var(--hmc-color-teal-500);
  --hmc-color-notification-info-default-border: var(--hmc-color-gray-400);
  --hmc-color-interactive-silent-pressed: var(--hmc-color-gray-200);
  --hmc-color-interactive-silent-hover: var(--hmc-color-gray-200);
  --hmc-color-interactive-subtle-disabled: var(--hmc-color-gray-200);
  --hmc-color-interactive-subtle-pressed: var(--hmc-color-gray-700);
  --hmc-color-interactive-subtle-hover: var(--hmc-color-gray-700);
  --hmc-color-interactive-subtle-idle: var(--hmc-color-gray-500);
  --hmc-color-layout-divider-silent: var(--hmc-color-gray-200);
  --hmc-color-layout-divider-default: var(--hmc-color-gray-300);
  --hmc-color-layout-ghost: rgb(100% 100% 100% / 0);
  --hmc-color-layout-overlay: rgb(36.9% 40.4% 45.1% / 0.75);
  --hmc-color-layout-canvas: var(--hmc-color-gray-100);
  --hmc-color-layout-container: var(--hmc-color-gray-white);
  --hmc-color-content-inverse: var(--hmc-color-gray-white);
  --hmc-color-content-silent: var(--hmc-color-gray-400);
  --hmc-color-content-subtle: var(--hmc-color-gray-700);
  --hmc-color-content-default: var(--hmc-color-gray-black);
  --hmc-color-system-highlight-silent: var(--hmc-color-purple-100);
  --hmc-color-system-highlight-strong: var(--hmc-color-purple-700);
  --hmc-color-system-highlight-default: var(--hmc-color-purple-500);
  --hmc-color-system-danger-silent: var(--hmc-color-red-100);
  --hmc-color-system-danger-default: var(--hmc-color-red-700);
  --hmc-color-system-warning-silent: var(--hmc-color-orange-100);
  --hmc-color-system-warning-strong: var(--hmc-color-orange-700);
  --hmc-color-system-warning-default: var(--hmc-color-orange-500);
  --hmc-color-system-success-silent: var(--hmc-color-green-100);
  --hmc-color-system-success-strong: var(--hmc-color-green-700);
  --hmc-color-system-success-default: var(--hmc-color-green-500);
  --hmc-color-system-info-silent: var(--hmc-color-gray-100);
  --hmc-color-system-primary-silent: var(--hmc-color-blue-100);
  --hmc-color-system-primary-faint: var(--hmc-color-blue-200);
  --hmc-color-system-primary-subtle: var(--hmc-color-blue-300);
  --hmc-color-system-primary-strong: var(--hmc-color-blue-900);
  --hmc-color-system-primary-default: var(--hmc-color-blue-700);
  --hmc-color-logo-inverse: var(--hmc-color-content-inverse);
  --hmc-color-logo-subtle: var(--hmc-color-content-default);
  --hmc-color-logo-default: var(--hmc-color-system-primary-default);
  --hmc-color-notification-highlight-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-highlight-strong-text: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-highlight-strong-background: var(
    --hmc-color-system-highlight-strong
  );
  --hmc-color-notification-highlight-default-graphic: var(
    --hmc-color-system-highlight-default
  );
  --hmc-color-notification-highlight-default-text: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-highlight-default-border: var(
    --hmc-color-system-highlight-default
  );
  --hmc-color-notification-highlight-default-background: var(
    --hmc-color-system-highlight-silent
  );
  --hmc-color-notification-danger-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-danger-strong-text: var(--hmc-color-content-inverse);
  --hmc-color-notification-danger-strong-background: var(
    --hmc-color-system-danger-default
  );
  --hmc-color-notification-danger-default-graphic: var(
    --hmc-color-system-danger-default
  );
  --hmc-color-notification-danger-default-text: var(
    --hmc-color-system-danger-default
  );
  --hmc-color-notification-danger-default-border: var(
    --hmc-color-system-danger-default
  );
  --hmc-color-notification-danger-default-background: var(
    --hmc-color-system-danger-silent
  );
  --hmc-color-notification-warning-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-warning-strong-text: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-warning-strong-background: var(
    --hmc-color-system-warning-strong
  );
  --hmc-color-notification-warning-default-graphic: var(
    --hmc-color-system-warning-default
  );
  --hmc-color-notification-warning-default-text: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-warning-default-border: var(
    --hmc-color-system-warning-default
  );
  --hmc-color-notification-warning-default-background: var(
    --hmc-color-system-warning-silent
  );
  --hmc-color-notification-success-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-success-strong-text: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-success-strong-background: var(
    --hmc-color-system-success-strong
  );
  --hmc-color-notification-success-default-graphic: var(
    --hmc-color-system-success-default
  );
  --hmc-color-notification-success-default-text: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-success-default-border: var(
    --hmc-color-system-success-default
  );
  --hmc-color-notification-success-default-background: var(
    --hmc-color-system-success-silent
  );
  --hmc-color-notification-info-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-info-strong-text: var(--hmc-color-content-inverse);
  --hmc-color-notification-info-strong-background: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-info-default-background: var(
    --hmc-color-system-info-silent
  );
  --hmc-color-interactive-focus: var(--hmc-color-system-highlight-default);
  --hmc-color-interactive-primary-disabled: var(
    --hmc-color-system-primary-subtle
  );
  --hmc-color-interactive-primary-pressed: var(
    --hmc-color-system-primary-strong
  );
  --hmc-color-interactive-primary-hover: var(--hmc-color-system-primary-strong);
  --hmc-color-interactive-primary-idle: var(--hmc-color-system-primary-default);
  --hmc-color-layout-divider-strong: var(--hmc-color-content-default);
  --hmc-color-system-info-default: var(--hmc-color-content-default);
  --hmc-color-notification-info-default-graphic: var(
    --hmc-color-system-info-default
  );
  --hmc-color-notification-info-default-text: var(
    --hmc-color-system-info-default
  );
}

/**
 * Dark semantic colors
*/
body[data-md-color-scheme="harmonic-dark"] {
  --hmc-color-dataviz-background: var(--hmc-color-gray-black);
  --hmc-color-dataviz-sequential-e-6: var(--hmc-color-pink-1000);
  --hmc-color-dataviz-sequential-e-5: var(--hmc-color-pink-900);
  --hmc-color-dataviz-sequential-e-4: var(--hmc-color-pink-800);
  --hmc-color-dataviz-sequential-e-3: var(--hmc-color-pink-700);
  --hmc-color-dataviz-sequential-e-2: var(--hmc-color-pink-600);
  --hmc-color-dataviz-sequential-e-1: var(--hmc-color-pink-500);
  --hmc-color-dataviz-sequential-d-6: var(--hmc-color-green-1000);
  --hmc-color-dataviz-sequential-d-5: var(--hmc-color-green-900);
  --hmc-color-dataviz-sequential-d-4: var(--hmc-color-green-800);
  --hmc-color-dataviz-sequential-d-3: var(--hmc-color-green-700);
  --hmc-color-dataviz-sequential-d-2: var(--hmc-color-green-600);
  --hmc-color-dataviz-sequential-d-1: var(--hmc-color-green-500);
  --hmc-color-dataviz-sequential-c-6: var(--hmc-color-purple-1000);
  --hmc-color-dataviz-sequential-c-5: var(--hmc-color-purple-900);
  --hmc-color-dataviz-sequential-c-4: var(--hmc-color-purple-800);
  --hmc-color-dataviz-sequential-c-3: var(--hmc-color-purple-700);
  --hmc-color-dataviz-sequential-c-2: var(--hmc-color-purple-600);
  --hmc-color-dataviz-sequential-c-1: var(--hmc-color-purple-500);
  --hmc-color-dataviz-sequential-b-6: var(--hmc-color-orange-1000);
  --hmc-color-dataviz-sequential-b-5: var(--hmc-color-orange-900);
  --hmc-color-dataviz-sequential-b-4: var(--hmc-color-orange-800);
  --hmc-color-dataviz-sequential-b-3: var(--hmc-color-orange-700);
  --hmc-color-dataviz-sequential-b-2: var(--hmc-color-orange-600);
  --hmc-color-dataviz-sequential-b-1: var(--hmc-color-orange-500);
  --hmc-color-dataviz-sequential-a-6: var(--hmc-color-teal-1000);
  --hmc-color-dataviz-sequential-a-5: var(--hmc-color-teal-900);
  --hmc-color-dataviz-sequential-a-4: var(--hmc-color-teal-800);
  --hmc-color-dataviz-sequential-a-3: var(--hmc-color-teal-700);
  --hmc-color-dataviz-sequential-a-2: var(--hmc-color-teal-600);
  --hmc-color-dataviz-sequential-a-1: var(--hmc-color-teal-500);
  --hmc-color-dataviz-categorical-6: var(--hmc-color-teal-100);
  --hmc-color-dataviz-categorical-5: var(--hmc-color-pink-300);
  --hmc-color-dataviz-categorical-4: var(--hmc-color-green-300);
  --hmc-color-dataviz-categorical-3: var(--hmc-color-purple-400);
  --hmc-color-dataviz-categorical-2: var(--hmc-color-orange-600);
  --hmc-color-dataviz-categorical-1: var(--hmc-color-teal-600);
  --hmc-color-notification-info-default-border: var(--hmc-color-gray-700);
  --hmc-color-interactive-silent-pressed: var(--hmc-color-gray-900);
  --hmc-color-interactive-silent-hover: var(--hmc-color-gray-900);
  --hmc-color-interactive-subtle-disabled: var(--hmc-color-gray-800);
  --hmc-color-interactive-subtle-pressed: var(--hmc-color-gray-300);
  --hmc-color-interactive-subtle-hover: var(--hmc-color-gray-300);
  --hmc-color-interactive-subtle-idle: var(--hmc-color-gray-400);
  --hmc-color-layout-divider-silent: var(--hmc-color-gray-900);
  --hmc-color-layout-divider-default: var(--hmc-color-gray-800);
  --hmc-color-layout-ghost: lch(19.4 6.35 257 / 0);
  --hmc-color-layout-overlay: rgb(36.9% 40.4% 45.1% / 0.75);
  --hmc-color-layout-canvas: var(--hmc-color-gray-black);
  --hmc-color-layout-container: var(--hmc-color-gray-1000);
  --hmc-color-content-inverse: var(--hmc-color-gray-black);
  --hmc-color-content-silent: var(--hmc-color-gray-500);
  --hmc-color-content-subtle: var(--hmc-color-gray-300);
  --hmc-color-content-default: var(--hmc-color-gray-white);
  --hmc-color-system-highlight-silent: var(--hmc-color-purple-900);
  --hmc-color-system-highlight-strong: var(--hmc-color-purple-300);
  --hmc-color-system-highlight-default: var(--hmc-color-purple-500);
  --hmc-color-system-danger-silent: var(--hmc-color-red-900);
  --hmc-color-system-danger-default: var(--hmc-color-red-400);
  --hmc-color-system-warning-silent: var(--hmc-color-orange-900);
  --hmc-color-system-warning-strong: var(--hmc-color-orange-300);
  --hmc-color-system-warning-default: var(--hmc-color-orange-500);
  --hmc-color-system-success-silent: var(--hmc-color-green-900);
  --hmc-color-system-success-strong: var(--hmc-color-green-300);
  --hmc-color-system-success-default: var(--hmc-color-green-500);
  --hmc-color-system-info-silent: var(--hmc-color-gray-900);
  --hmc-color-system-primary-silent: var(--hmc-color-blue-900);
  --hmc-color-system-primary-faint: var(--hmc-color-blue-800);
  --hmc-color-system-primary-subtle: var(--hmc-color-blue-700);
  --hmc-color-system-primary-strong: var(--hmc-color-blue-200);
  --hmc-color-system-primary-default: var(--hmc-color-blue-300);
  --hmc-color-logo-inverse: var(--hmc-color-content-inverse);
  --hmc-color-logo-subtle: var(--hmc-color-content-default);
  --hmc-color-logo-default: var(--hmc-color-content-default);
  --hmc-color-notification-highlight-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-highlight-strong-text: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-highlight-strong-background: var(
    --hmc-color-system-highlight-strong
  );
  --hmc-color-notification-highlight-default-graphic: var(
    --hmc-color-system-highlight-default
  );
  --hmc-color-notification-highlight-default-text: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-highlight-default-border: var(
    --hmc-color-system-highlight-default
  );
  --hmc-color-notification-highlight-default-background: var(
    --hmc-color-system-highlight-silent
  );
  --hmc-color-notification-danger-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-danger-strong-text: var(--hmc-color-content-inverse);
  --hmc-color-notification-danger-strong-background: var(
    --hmc-color-system-danger-default
  );
  --hmc-color-notification-danger-default-graphic: var(
    --hmc-color-system-danger-default
  );
  --hmc-color-notification-danger-default-text: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-danger-default-border: var(
    --hmc-color-system-danger-default
  );
  --hmc-color-notification-danger-default-background: var(
    --hmc-color-system-danger-silent
  );
  --hmc-color-notification-warning-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-warning-strong-text: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-warning-strong-background: var(
    --hmc-color-system-warning-strong
  );
  --hmc-color-notification-warning-default-graphic: var(
    --hmc-color-system-warning-default
  );
  --hmc-color-notification-warning-default-text: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-warning-default-border: var(
    --hmc-color-system-warning-default
  );
  --hmc-color-notification-warning-default-background: var(
    --hmc-color-system-warning-silent
  );
  --hmc-color-notification-success-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-success-strong-text: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-success-strong-background: var(
    --hmc-color-system-success-strong
  );
  --hmc-color-notification-success-default-graphic: var(
    --hmc-color-system-success-default
  );
  --hmc-color-notification-success-default-text: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-success-default-border: var(
    --hmc-color-system-success-default
  );
  --hmc-color-notification-success-default-background: var(
    --hmc-color-system-success-silent
  );
  --hmc-color-notification-info-strong-graphic: var(
    --hmc-color-content-inverse
  );
  --hmc-color-notification-info-strong-text: var(--hmc-color-content-inverse);
  --hmc-color-notification-info-strong-background: var(
    --hmc-color-content-default
  );
  --hmc-color-notification-info-default-background: var(
    --hmc-color-system-info-silent
  );
  --hmc-color-interactive-focus: var(--hmc-color-system-highlight-default);
  --hmc-color-interactive-primary-disabled: var(
    --hmc-color-system-primary-subtle
  );
  --hmc-color-interactive-primary-pressed: var(
    --hmc-color-system-primary-strong
  );
  --hmc-color-interactive-primary-hover: var(--hmc-color-system-primary-strong);
  --hmc-color-interactive-primary-idle: var(--hmc-color-system-primary-default);
  --hmc-color-layout-divider-strong: var(--hmc-color-content-default);
  --hmc-color-system-info-default: var(--hmc-color-content-default);
  --hmc-color-notification-info-default-graphic: var(
    --hmc-color-system-info-default
  );
  --hmc-color-notification-info-default-text: var(
    --hmc-color-system-info-default
  );
}