/**
 * Do not edit directly, this file was auto-generated.
 */

:root, [data-theme="light"], .light-theme {
  /* ── Primitives — foundational values. Concrete (not aliased). ── */
  --hpe-web-base-color-black-opacity100: #000000;
  --hpe-web-base-color-black-opacity12: #0000001f;
  --hpe-web-base-color-black-opacity24: #0000003d;
  --hpe-web-base-color-black-opacity36: #0000005c;
  --hpe-web-base-color-black-opacity4: #0000000a;
  --hpe-web-base-color-black-opacity48: #0000007a;
  --hpe-web-base-color-black-opacity50: #00000080;
  --hpe-web-base-color-black-opacity72: #000000b8;
  --hpe-web-base-color-black-opacity8: #00000014;
  --hpe-web-base-color-blue-50: #e3f1ff;
  --hpe-web-base-color-blue-200: #65aef9;
  --hpe-web-base-color-blue-300: #3994f7;
  --hpe-web-base-color-blue-500: #0070f8;
  --hpe-web-base-color-blue-700: #0055da;
  --hpe-web-base-color-blue-900: #003cae;
  --hpe-web-base-color-blue-1100: #2b3547;
  --hpe-web-base-color-coral-100: #fc988b;
  --hpe-web-base-color-coral-200: #e5786a;
  --hpe-web-base-color-coral-300: #d25f4b;
  --hpe-web-base-color-coral-400: #c64f3a;
  --hpe-web-base-color-coral-500: #b4422a;
  --hpe-web-base-color-cyan-100: #99f0f9;
  --hpe-web-base-color-cyan-200: #62e5f6;
  --hpe-web-base-color-cyan-300: #00dbe4;
  --hpe-web-base-color-cyan-400: #00a4b3;
  --hpe-web-base-color-cyan-500: #04909d;
  --hpe-web-base-color-fuschia-100: #fc9ddc;
  --hpe-web-base-color-fuschia-200: #db72b8;
  --hpe-web-base-color-fuschia-300: #cc54a4;
  --hpe-web-base-color-fuschia-700: #ad4089;
  --hpe-web-base-color-fuschia-900: #7f245c;
  --hpe-web-base-color-gold-100: #f9cc61;
  --hpe-web-base-color-gold-200: #ecbe4f;
  --hpe-web-base-color-gold-300: #deb146;
  --hpe-web-base-color-gold-400: #c89e3a;
  --hpe-web-base-color-gold-500: #b38a29;
  --hpe-web-base-color-gold-550: #b0840d;
  --hpe-web-base-color-green-100: #d1ffee;
  --hpe-web-base-color-green-125: #aafade;
  --hpe-web-base-color-green-400: #00e0af;
  --hpe-web-base-color-green-450: #66ebcf;
  --hpe-web-base-color-green-500: #00e0af;
  --hpe-web-base-color-green-550: #05cc93;
  --hpe-web-base-color-green-600: #01a982;
  --hpe-web-base-color-green-650: #009a71;
  --hpe-web-base-color-green-700: #068667;
  --hpe-web-base-color-green-800: #006750;
  --hpe-web-base-color-green-900: #074738;
  --hpe-web-base-color-green-1000: #093d32;
  --hpe-web-base-color-grey-50: #f7f7f7;
  --hpe-web-base-color-grey-200: #e6e8e9;
  --hpe-web-base-color-grey-400: #d4d8db;
  --hpe-web-base-color-grey-500: #b1b9be;
  --hpe-web-base-color-grey-600: #7d8a92;
  --hpe-web-base-color-grey-650: #606a70;
  --hpe-web-base-color-grey-700: #535c66;
  --hpe-web-base-color-grey-800: #3e4550;
  --hpe-web-base-color-grey-1000: #292d3a;
  --hpe-web-base-color-grey-1200: #22252e;
  --hpe-web-base-color-grey-1300: #1d1f27;
  --hpe-web-base-color-orange-50: #fff3dd;
  --hpe-web-base-color-orange-500: #ec8c25;
  --hpe-web-base-color-orange-600: #d36d00;
  --hpe-web-base-color-orange-1000: #3c361e;
  --hpe-web-base-color-plum-100: #c98ad4;
  --hpe-web-base-color-plum-200: #a455b3;
  --hpe-web-base-color-plum-600: #873492;
  --hpe-web-base-color-plum-700: #6c2b7c;
  --hpe-web-base-color-plum-900: #5e1f68;
  --hpe-web-base-color-purple-100: #b7a2fc;
  --hpe-web-base-color-purple-200: #9b84fc;
  --hpe-web-base-color-purple-400: #7764fc;
  --hpe-web-base-color-purple-700: #5d45d6;
  --hpe-web-base-color-purple-900: #3c3aa1;
  --hpe-web-base-color-red-50: #ffecec;
  --hpe-web-base-color-red-400: #ff7b7b;
  --hpe-web-base-color-red-500: #fc6161;
  --hpe-web-base-color-red-600: #ec3331;
  --hpe-web-base-color-red-800: #cc1f1a;
  --hpe-web-base-color-red-1000: #552120;
  --hpe-web-base-color-white-100: #ffffff;
  --hpe-web-base-color-white-opacity10: #ffffff1a;
  --hpe-web-base-color-white-opacity12: #ffffff1f;
  --hpe-web-base-color-white-opacity20: #ffffff33;
  --hpe-web-base-color-white-opacity24: #ffffff3d;
  --hpe-web-base-color-white-opacity36: #ffffff5c;
  --hpe-web-base-color-white-opacity50: #ffffff80;
  --hpe-web-base-color-white-opacity6: #ffffff0f;
  --hpe-web-base-color-white-opacity7: #ffffff12;
  --hpe-web-base-color-white-opacity72: #ffffffb8;
  --hpe-web-base-dimension-0: 0px;
  --hpe-web-base-dimension-25: 0.0625rem;
  --hpe-web-base-dimension-50: 0.125rem;
  --hpe-web-base-dimension-75: 0.1875rem;
  --hpe-web-base-dimension-100: 0.25rem;
  --hpe-web-base-dimension-150: 0.375rem;
  --hpe-web-base-dimension-200: 0.5rem;
  --hpe-web-base-dimension-225: 0.5625rem;
  --hpe-web-base-dimension-250: 0.625rem;
  --hpe-web-base-dimension-300: 0.75rem;
  --hpe-web-base-dimension-350: 0.875rem;
  --hpe-web-base-dimension-400: 1rem;
  --hpe-web-base-dimension-450: 1.125rem;
  --hpe-web-base-dimension-475: 1.1875rem;
  --hpe-web-base-dimension-500: 1.25rem;
  --hpe-web-base-dimension-550: 1.375rem;
  --hpe-web-base-dimension-600: 1.5rem;
  --hpe-web-base-dimension-700: 1.75rem;
  --hpe-web-base-dimension-800: 2rem;
  --hpe-web-base-dimension-900: 2.25rem;
  --hpe-web-base-dimension-1200: 3rem;
  --hpe-web-base-dimension-1600: 4rem;
  --hpe-web-base-dimension-1800: 4.5rem;
  --hpe-web-base-dimension-2400: 6rem;
  --hpe-web-base-dimension-3200: 8rem;
  --hpe-web-base-dimension-4800: 12rem;
  --hpe-web-base-dimension-6400: 16rem;
  --hpe-web-base-dimension-9600: 24rem;
  --hpe-web-base-dimension-12800: 32rem;
  --hpe-web-base-dimension-19200: 48rem;
  --hpe-web-base-dimension-25600: 64rem;
  --hpe-web-base-dimension-38400: 96rem;
  --hpe-web-base-font-family-condensed: "HPE Graphik", "Arial Narrow", Arial, sans-serif;
  --hpe-web-base-font-family-noto-sans-jp: "Noto Sans JP";
  --hpe-web-base-font-family-noto-sans-kr: "Noto Sans KR";
  --hpe-web-base-font-family-noto-sans-tc: "Noto Sans TC";
  --hpe-web-base-font-family-primary: "HPE Graphik", Arial, sans-serif;
  --hpe-web-base-font-size-80: 0.75rem;
  --hpe-web-base-font-size-90: 0.875rem;
  --hpe-web-base-font-size-100: 1rem;
  --hpe-web-base-font-size-200: 1.125rem;
  --hpe-web-base-font-size-300: 1.25rem;
  --hpe-web-base-font-size-400: 1.375rem;
  --hpe-web-base-font-size-500: 1.5rem;
  --hpe-web-base-font-size-600: 2.25rem;
  --hpe-web-base-font-size-700: 2.625rem;
  --hpe-web-base-font-size-800: 3rem;
  --hpe-web-base-font-size-900: 4.5rem;
  --hpe-web-base-line-height-80: 12;
  --hpe-web-base-line-height-90: 16;
  --hpe-web-base-line-height-100: 20;
  --hpe-web-base-line-height-200: 24;
  --hpe-web-base-line-height-300: 28;
  --hpe-web-base-line-height-400: 30;
  --hpe-web-base-line-height-500: 36;
  --hpe-web-base-line-height-600: 40;
  --hpe-web-base-line-height-700: 46;
  --hpe-web-base-line-height-800: 48;
  --hpe-web-base-line-height-900: 72;

  /* ── Semantic — purpose-based. Alias primitives where possible. ── */
  --hpe-web-static-border-width-default: var(--hpe-web-base-dimension-25);
  --hpe-web-static-border-width-large: var(--hpe-web-base-dimension-150);
  --hpe-web-static-border-width-medium: var(--hpe-web-base-dimension-100);
  --hpe-web-static-border-width-none: var(--hpe-web-base-dimension-0);
  --hpe-web-static-border-width-small: var(--hpe-web-base-dimension-50);
  --hpe-web-static-border-width-xsmall: var(--hpe-web-base-dimension-25);
  --hpe-web-static-container-3xlarge: var(--hpe-web-base-dimension-38400);
  --hpe-web-static-container-3xsmall: var(--hpe-web-base-dimension-2400);
  --hpe-web-static-container-4xsmall: var(--hpe-web-base-dimension-1600);
  --hpe-web-static-container-5xsmall: var(--hpe-web-base-dimension-1200);
  --hpe-web-static-container-large: var(--hpe-web-base-dimension-12800);
  --hpe-web-static-container-medium: var(--hpe-web-base-dimension-9600);
  --hpe-web-static-container-small: var(--hpe-web-base-dimension-6400);
  --hpe-web-static-container-xlarge: var(--hpe-web-base-dimension-19200);
  --hpe-web-static-container-xsmall: var(--hpe-web-base-dimension-4800);
  --hpe-web-static-container-xxlarge: var(--hpe-web-base-dimension-25600);
  --hpe-web-static-container-xxsmall: var(--hpe-web-base-dimension-3200);
  --hpe-web-static-radius-full: 9999px;
  --hpe-web-static-radius-hair: var(--hpe-web-base-dimension-25);
  --hpe-web-static-radius-large: var(--hpe-web-base-dimension-400);
  --hpe-web-static-radius-medium: var(--hpe-web-base-dimension-300);
  --hpe-web-static-radius-none: var(--hpe-web-base-dimension-0);
  --hpe-web-static-radius-small: var(--hpe-web-base-dimension-200);
  --hpe-web-static-radius-xlarge: var(--hpe-web-base-dimension-600);
  --hpe-web-static-radius-xsmall: var(--hpe-web-base-dimension-150);
  --hpe-web-static-radius-xxlarge: var(--hpe-web-base-dimension-800);
  --hpe-web-static-radius-xxsmall: var(--hpe-web-base-dimension-100);
  --hpe-web-static-spacing-3xlarge: var(--hpe-web-base-dimension-2400);
  --hpe-web-static-spacing-3xsmall: var(--hpe-web-base-dimension-150);
  --hpe-web-static-spacing-4xlarge: var(--hpe-web-base-dimension-3200);
  --hpe-web-static-spacing-4xsmall: var(--hpe-web-base-dimension-100);
  --hpe-web-static-spacing-5xsmall: var(--hpe-web-base-dimension-75);
  --hpe-web-static-spacing-6xsmall: var(--hpe-web-base-dimension-50);
  --hpe-web-static-spacing-hair: var(--hpe-web-base-dimension-25);
  --hpe-web-static-spacing-large: var(--hpe-web-base-dimension-800);
  --hpe-web-static-spacing-medium: var(--hpe-web-base-dimension-600);
  --hpe-web-static-spacing-none: var(--hpe-web-base-dimension-0);
  --hpe-web-static-spacing-small: var(--hpe-web-base-dimension-400);
  --hpe-web-static-spacing-xlarge: var(--hpe-web-base-dimension-1200);
  --hpe-web-static-spacing-xsmall: var(--hpe-web-base-dimension-300);
  --hpe-web-static-spacing-xxlarge: var(--hpe-web-base-dimension-1600);
  --hpe-web-static-spacing-xxsmall: var(--hpe-web-base-dimension-200);
  --hpe-web-border-width-default: var(--hpe-web-static-border-width-xsmall);
  --hpe-web-border-width-large: var(--hpe-web-static-border-width-large);
  --hpe-web-border-width-medium: var(--hpe-web-static-border-width-medium);
  --hpe-web-border-width-none: var(--hpe-web-static-border-width-none);
  --hpe-web-border-width-small: var(--hpe-web-static-border-width-small);
  --hpe-web-border-width-xsmall: var(--hpe-web-static-border-width-xsmall);
  --hpe-web-heading-display: "HPE Graphik XXCondensed";
  --hpe-web-heading-font: "HPE Graphik", Arial, sans-serif;
  --hpe-web-heading-h1-condensed-bold-font-size: 3rem;
  --hpe-web-heading-h1-condensed-bold-font-weight: 700;
  --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.02em;
  --hpe-web-heading-h1-condensed-bold-line-height: 1;
  --hpe-web-heading-h1-condensed-light-font-size: 3rem;
  --hpe-web-heading-h1-condensed-light-font-weight: 300;
  --hpe-web-heading-h1-condensed-light-letter-spacing: 0.02em;
  --hpe-web-heading-h1-condensed-light-line-height: 1;
  --hpe-web-heading-h1-condensed-medium-font-size: 3rem;
  --hpe-web-heading-h1-condensed-medium-font-weight: 400;
  --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.02em;
  --hpe-web-heading-h1-condensed-medium-line-height: 1;
  --hpe-web-heading-h1-light-font-size: 2.5rem;
  --hpe-web-heading-h1-light-font-weight: 300;
  --hpe-web-heading-h1-light-letter-spacing: -0.02em;
  --hpe-web-heading-h1-light-line-height: 1.15;
  --hpe-web-heading-h1-medium-font-size: 2.5rem;
  --hpe-web-heading-h1-medium-font-weight: 500;
  --hpe-web-heading-h1-medium-letter-spacing: -0.02em;
  --hpe-web-heading-h1-medium-line-height: 1.15;
  --hpe-web-heading-h1-large-condensed-bold-font-size: 3.75rem;
  --hpe-web-heading-h1-large-condensed-bold-font-weight: 700;
  --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.02em;
  --hpe-web-heading-h1-large-condensed-bold-line-height: 1;
  --hpe-web-heading-h1-large-condensed-light-font-size: 3.75rem;
  --hpe-web-heading-h1-large-condensed-light-font-weight: 300;
  --hpe-web-heading-h1-large-condensed-light-letter-spacing: 0.0333em;
  --hpe-web-heading-h1-large-condensed-light-line-height: 1.5;
  --hpe-web-heading-h1-large-condensed-medium-font-size: 3.75rem;
  --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
  --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.02em;
  --hpe-web-heading-h1-large-condensed-medium-line-height: 1;
  --hpe-web-heading-h1-large-light-font-size: 2.5rem;
  --hpe-web-heading-h1-large-light-font-weight: 300;
  --hpe-web-heading-h1-large-light-letter-spacing: -0.02em;
  --hpe-web-heading-h1-large-light-line-height: 1.15;
  --hpe-web-heading-h1-large-medium-font-size: 2.5rem;
  --hpe-web-heading-h1-large-medium-font-weight: 500;
  --hpe-web-heading-h1-large-medium-letter-spacing: -0.02em;
  --hpe-web-heading-h1-large-medium-line-height: 1.15;
  --hpe-web-heading-h2-light-font-size: 2rem;
  --hpe-web-heading-h2-light-font-weight: 300;
  --hpe-web-heading-h2-light-letter-spacing: -0.01em;
  --hpe-web-heading-h2-light-line-height: 1.188;
  --hpe-web-heading-h2-medium-font-size: 2rem;
  --hpe-web-heading-h2-medium-font-weight: 500;
  --hpe-web-heading-h2-medium-letter-spacing: -0.01em;
  --hpe-web-heading-h2-medium-line-height: 1.188;
  --hpe-web-heading-h3-light-font-size: 1.625rem;
  --hpe-web-heading-h3-light-font-weight: 300;
  --hpe-web-heading-h3-light-letter-spacing: 0em;
  --hpe-web-heading-h3-light-line-height: 1.231;
  --hpe-web-heading-h3-medium-font-size: 1.625rem;
  --hpe-web-heading-h3-medium-font-weight: 500;
  --hpe-web-heading-h3-medium-letter-spacing: 0em;
  --hpe-web-heading-h3-medium-line-height: 1.231;
  --hpe-web-heading-h4-light-font-size: 1.25rem;
  --hpe-web-heading-h4-light-font-weight: 500;
  --hpe-web-heading-h4-light-letter-spacing: 0em;
  --hpe-web-heading-h4-light-line-height: 1.3;
  --hpe-web-heading-h4-medium-font-size: 1.25rem;
  --hpe-web-heading-h4-medium-font-weight: 500;
  --hpe-web-heading-h4-medium-letter-spacing: 0em;
  --hpe-web-heading-h4-medium-line-height: 1.3;
  --hpe-web-heading-h5-light-font-size: 1rem;
  --hpe-web-heading-h5-light-font-weight: 300;
  --hpe-web-heading-h5-light-letter-spacing: 0em;
  --hpe-web-heading-h5-light-line-height: 1.375;
  --hpe-web-heading-h5-medium-font-size: 1rem;
  --hpe-web-heading-h5-medium-font-weight: 500;
  --hpe-web-heading-h5-medium-letter-spacing: 0em;
  --hpe-web-heading-h5-medium-line-height: 1.375;
  --hpe-web-heading-h6-light-font-size: 0.875rem;
  --hpe-web-heading-h6-light-font-weight: 300;
  --hpe-web-heading-h6-light-letter-spacing: 0em;
  --hpe-web-heading-h6-light-line-height: 1.429;
  --hpe-web-heading-h6-medium-font-size: 0.875rem;
  --hpe-web-heading-h6-medium-font-weight: 500;
  --hpe-web-heading-h6-medium-letter-spacing: 0em;
  --hpe-web-heading-h6-medium-line-height: 1.429;
  --hpe-web-icon-large-size: var(--hpe-web-base-dimension-550);
  --hpe-web-icon-medium-size: var(--hpe-web-base-dimension-450);
  --hpe-web-icon-small-size: var(--hpe-web-base-dimension-400);
  --hpe-web-icon-xlarge-size: var(--hpe-web-base-dimension-600);
  --hpe-web-icon-xsmall-size: var(--hpe-web-base-dimension-350);
  --hpe-web-icon-xxlarge-size: var(--hpe-web-base-dimension-900);
  --hpe-web-multi-mode-avatar-height: 4rem;
  --hpe-web-multi-mode-bento-box-bento-x: 2rem;
  --hpe-web-multi-mode-bento-box-bento-y: 2rem;
  --hpe-web-multi-mode-button-link-large-border-radius: 9999px;
  --hpe-web-multi-mode-button-link-large-border-width: 4px;
  --hpe-web-multi-mode-button-link-large-font-size: 1.125rem;
  --hpe-web-multi-mode-button-link-large-gap-x: 0.5rem;
  --hpe-web-multi-mode-button-link-large-icon-height: 1.25rem;
  --hpe-web-multi-mode-button-link-large-icon-width: 1.25rem;
  --hpe-web-multi-mode-button-link-large-line-height: 1.333;
  --hpe-web-multi-mode-button-link-large-min-height: 1rem;
  --hpe-web-multi-mode-button-link-large-padding-x: 0px;
  --hpe-web-multi-mode-button-link-large-padding-y: 0px;
  --hpe-web-multi-mode-button-link-medium-border-radius: 9999px;
  --hpe-web-multi-mode-button-link-medium-border-width: 0px;
  --hpe-web-multi-mode-button-link-medium-font-size: 1.125rem;
  --hpe-web-multi-mode-button-link-medium-gap-x: 0.75rem;
  --hpe-web-multi-mode-button-link-medium-icon-height: 1rem;
  --hpe-web-multi-mode-button-link-medium-icon-width: 1rem;
  --hpe-web-multi-mode-button-link-medium-line-height: 1.333;
  --hpe-web-multi-mode-button-link-medium-min-height: 1.5rem;
  --hpe-web-multi-mode-button-link-medium-padding-x: 0px;
  --hpe-web-multi-mode-button-link-medium-padding-y: 0px;
  --hpe-web-multi-mode-button-link-small-border-radius: 9999px;
  --hpe-web-multi-mode-button-link-small-border-width: 4px;
  --hpe-web-multi-mode-button-link-small-font-size: 1rem;
  --hpe-web-multi-mode-button-link-small-gap-x: 0.5rem;
  --hpe-web-multi-mode-button-link-small-icon-height: 1rem;
  --hpe-web-multi-mode-button-link-small-icon-width: 1rem;
  --hpe-web-multi-mode-button-link-small-line-height: 1.5;
  --hpe-web-multi-mode-button-link-small-min-height: 0.875rem;
  --hpe-web-multi-mode-button-link-small-padding-x: 0.125rem;
  --hpe-web-multi-mode-button-link-small-padding-y: 0px;
  --hpe-web-multi-mode-button-primary-large-border-radius: 9999px;
  --hpe-web-multi-mode-button-primary-large-border-width: 0px;
  --hpe-web-multi-mode-button-primary-large-font-size: 1.125rem;
  --hpe-web-multi-mode-button-primary-large-gap-x: 0.5rem;
  --hpe-web-multi-mode-button-primary-large-icon-height: 1.25rem;
  --hpe-web-multi-mode-button-primary-large-icon-width: 1.25rem;
  --hpe-web-multi-mode-button-primary-large-line-height: 1.333;
  --hpe-web-multi-mode-button-primary-large-min-height: 3.5rem;
  --hpe-web-multi-mode-button-primary-large-padding-x: 2.25rem;
  --hpe-web-multi-mode-button-primary-large-padding-y: 1rem;
  --hpe-web-multi-mode-button-primary-medium-border-radius: 9999px;
  --hpe-web-multi-mode-button-primary-medium-border-width: 0px;
  --hpe-web-multi-mode-button-primary-medium-font-size: 1.125rem;
  --hpe-web-multi-mode-button-primary-medium-gap-x: 0.75rem;
  --hpe-web-multi-mode-button-primary-medium-icon-height: 1rem;
  --hpe-web-multi-mode-button-primary-medium-icon-width: 1rem;
  --hpe-web-multi-mode-button-primary-medium-line-height: 1.333;
  --hpe-web-multi-mode-button-primary-medium-min-height: 3.25rem;
  --hpe-web-multi-mode-button-primary-medium-padding-x: 1.75rem;
  --hpe-web-multi-mode-button-primary-medium-padding-y: 0.875rem;
  --hpe-web-multi-mode-button-primary-small-border-radius: 9999px;
  --hpe-web-multi-mode-button-primary-small-border-width: 0px;
  --hpe-web-multi-mode-button-primary-small-font-size: 1rem;
  --hpe-web-multi-mode-button-primary-small-gap-x: 0.5rem;
  --hpe-web-multi-mode-button-primary-small-icon-height: 1rem;
  --hpe-web-multi-mode-button-primary-small-icon-width: 1rem;
  --hpe-web-multi-mode-button-primary-small-line-height: 1.5;
  --hpe-web-multi-mode-button-primary-small-min-height: 3rem;
  --hpe-web-multi-mode-button-primary-small-padding-x: 1.5rem;
  --hpe-web-multi-mode-button-primary-small-padding-y: 0.75rem;
  --hpe-web-multi-mode-button-secondary-large-border-radius: 9999px;
  --hpe-web-multi-mode-button-secondary-large-border-width: 4px;
  --hpe-web-multi-mode-button-secondary-large-font-size: 1.125rem;
  --hpe-web-multi-mode-button-secondary-large-gap-x: 0.5rem;
  --hpe-web-multi-mode-button-secondary-large-icon-height: 1.25rem;
  --hpe-web-multi-mode-button-secondary-large-icon-width: 1.25rem;
  --hpe-web-multi-mode-button-secondary-large-line-height: 1.333;
  --hpe-web-multi-mode-button-secondary-large-min-height: 3.5rem;
  --hpe-web-multi-mode-button-secondary-large-padding-x: 2.25rem;
  --hpe-web-multi-mode-button-secondary-large-padding-y: 1rem;
  --hpe-web-multi-mode-button-secondary-medium-border-radius: 9999px;
  --hpe-web-multi-mode-button-secondary-medium-border-width: 4px;
  --hpe-web-multi-mode-button-secondary-medium-font-size: 1.125rem;
  --hpe-web-multi-mode-button-secondary-medium-gap-x: 0.75rem;
  --hpe-web-multi-mode-button-secondary-medium-icon-height: 1rem;
  --hpe-web-multi-mode-button-secondary-medium-icon-width: 1rem;
  --hpe-web-multi-mode-button-secondary-medium-line-height: 1.333;
  --hpe-web-multi-mode-button-secondary-medium-min-height: 3.25rem;
  --hpe-web-multi-mode-button-secondary-medium-padding-x: 1.75rem;
  --hpe-web-multi-mode-button-secondary-medium-padding-y: 0.875rem;
  --hpe-web-multi-mode-button-secondary-small-border-radius: 9999px;
  --hpe-web-multi-mode-button-secondary-small-border-width: 3px;
  --hpe-web-multi-mode-button-secondary-small-font-size: 1rem;
  --hpe-web-multi-mode-button-secondary-small-gap-x: 0.5rem;
  --hpe-web-multi-mode-button-secondary-small-icon-height: 1rem;
  --hpe-web-multi-mode-button-secondary-small-icon-width: 1rem;
  --hpe-web-multi-mode-button-secondary-small-line-height: 1.5;
  --hpe-web-multi-mode-button-secondary-small-min-height: 3rem;
  --hpe-web-multi-mode-button-secondary-small-padding-x: 1.5rem;
  --hpe-web-multi-mode-button-secondary-small-padding-y: 0.75rem;
  --hpe-web-multi-mode-icon-height: 2rem;
  --hpe-web-multi-mode-layout-gap-x: 1.5rem;
  --hpe-web-multi-mode-layout-gap-y: 1.5rem;
  --hpe-web-multi-mode-layout-padding-y: 4rem;
  --hpe-web-multi-mode-live-player-gap-x: 1rem;
  --hpe-web-multi-mode-live-player-padding-x: 2rem;
  --hpe-web-multi-mode-live-player-padding-y: 4rem;
  --hpe-web-multi-mode-logo-collage-group-gap-x: 1rem;
  --hpe-web-multi-mode-logo-collage-group-gap-y: 1rem;
  --hpe-web-multi-mode-logo-collage-max-height: 2.5rem;
  --hpe-web-multi-mode-logo-grid-padding-x: 2rem;
  --hpe-web-multi-mode-logo-grid-padding-y: 2rem;
  --hpe-web-multi-mode-logo-grid-width: 10rem;
  --hpe-web-multi-mode-logo-height: 4rem;
  --hpe-web-multi-mode-marquee-gap-x: 2.5rem;
  --hpe-web-multi-mode-marquee-gap-y: 2.5rem;
  --hpe-web-multi-mode-marquee-padding-y: 4rem;
  --hpe-web-multi-mode-simple-marquee-padding-y: 4rem;
  --hpe-web-multi-mode-text-recipe-gap-y: 0.75rem;
  --hpe-web-paragraph-body-copy-font-size: 1rem;
  --hpe-web-paragraph-body-copy-font-weight: 400;
  --hpe-web-paragraph-body-copy-letter-spacing: 0em;
  --hpe-web-paragraph-body-copy-line-height: 1.5;
  --hpe-web-paragraph-disclaimer-font-size: 0.75rem;
  --hpe-web-paragraph-disclaimer-font-weight: 400;
  --hpe-web-paragraph-disclaimer-letter-spacing: 0em;
  --hpe-web-paragraph-disclaimer-line-height: 1.5;
  --hpe-web-paragraph-font: "HPE Graphik", Arial, sans-serif;
  --hpe-web-paragraph-large-body-copy-font-size: 1.25rem;
  --hpe-web-paragraph-large-body-copy-font-weight: 400;
  --hpe-web-paragraph-large-body-copy-letter-spacing: -0.01em;
  --hpe-web-paragraph-large-body-copy-line-height: 1.5;
  --hpe-web-paragraph-small-body-copy-font-size: 0.875rem;
  --hpe-web-paragraph-small-body-copy-font-weight: 400;
  --hpe-web-paragraph-small-body-copy-letter-spacing: 0em;
  --hpe-web-paragraph-small-body-copy-line-height: 1.429;
  --hpe-web-quote-font: "HPE Graphik", Arial, sans-serif;
  --hpe-web-quote-large-font-size: 2rem;
  --hpe-web-quote-large-font-weight: 400;
  --hpe-web-quote-large-letter-spacing: -0.02em;
  --hpe-web-quote-large-line-height: 1.313;
  --hpe-web-quote-medium-font-size: 1.75rem;
  --hpe-web-quote-medium-font-weight: 400;
  --hpe-web-quote-medium-letter-spacing: -0.01em;
  --hpe-web-quote-medium-line-height: 1.357;
  --hpe-web-quote-small-font-size: 1.5rem;
  --hpe-web-quote-small-font-weight: 400;
  --hpe-web-quote-small-letter-spacing: -0.01em;
  --hpe-web-quote-small-line-height: 1.417;
  --hpe-web-radius-full: var(--hpe-web-static-radius-full);
  --hpe-web-radius-hair: 1px;
  --hpe-web-radius-large: 16px;
  --hpe-web-radius-medium: 12px;
  --hpe-web-radius-none: 0px;
  --hpe-web-radius-small: 8px;
  --hpe-web-radius-xlarge: 24px;
  --hpe-web-radius-xsmall: 6px;
  --hpe-web-radius-xxlarge: 32px;
  --hpe-web-radius-xxsmall: 4px;
  --hpe-web-spacing-3xlarge: 6rem;
  --hpe-web-spacing-3xsmall: 0.5rem;
  --hpe-web-spacing-4xlarge: 10rem;
  --hpe-web-spacing-4xsmall: 0.25rem;
  --hpe-web-spacing-hair: 0.0625rem;
  --hpe-web-spacing-large: 2.5rem;
  --hpe-web-spacing-medium: 2rem;
  --hpe-web-spacing-none: 0px;
  --hpe-web-spacing-small: 1.5rem;
  --hpe-web-spacing-xlarge: 3rem;
  --hpe-web-spacing-xsmall: 1rem;
  --hpe-web-spacing-xxlarge: 4rem;
  --hpe-web-spacing-xxsmall: 0.75rem;
  --hpe-web-color-background-back: var(--hpe-web-base-color-grey-50);
  --hpe-web-color-background-card: var(--hpe-web-base-color-grey-50);
  --hpe-web-color-background-carousel: var(--hpe-web-base-color-grey-700);
  --hpe-web-color-background-carousel-disabled: var(--hpe-web-base-color-grey-500);
  --hpe-web-color-background-carousel-hover: var(--hpe-web-base-color-grey-650);
  --hpe-web-color-background-contrast: var(--hpe-web-base-color-black-opacity4);
  --hpe-web-color-background-contrast-hover: var(--hpe-web-base-color-black-opacity4);
  --hpe-web-color-background-critical: var(--hpe-web-base-color-red-50);
  --hpe-web-color-background-default: var(--hpe-web-base-color-white-100);
  --hpe-web-color-background-disabled: var(--hpe-web-base-color-black-opacity4);
  --hpe-web-color-background-floating: var(--hpe-web-base-color-white-100);
  --hpe-web-color-background-neutral: var(--hpe-web-base-color-grey-700);
  --hpe-web-color-background-neutral-strong: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-background-neutral-weak: var(--hpe-web-base-color-grey-400);
  --hpe-web-color-background-ok: var(--hpe-web-base-color-green-100);
  --hpe-web-color-background-primary: var(--hpe-web-base-color-green-600);
  --hpe-web-color-background-primary-strong: var(--hpe-web-base-color-green-700);
  --hpe-web-color-background-sunken: var(--hpe-web-base-color-grey-200);
  --hpe-web-color-background-warning: var(--hpe-web-base-color-orange-50);
  --hpe-web-color-border-critical: var(--hpe-web-base-color-red-800);
  --hpe-web-color-border-default: var(--hpe-web-base-color-grey-500);
  --hpe-web-color-border-disabled: var(--hpe-web-base-color-black-opacity12);
  --hpe-web-color-border-ok: var(--hpe-web-base-color-green-650);
  --hpe-web-color-border-primary: var(--hpe-web-base-color-green-600);
  --hpe-web-color-border-primary-hover: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-border-selected: var(--hpe-web-base-color-green-800);
  --hpe-web-color-border-strong: var(--hpe-web-base-color-grey-700);
  --hpe-web-color-border-warning: var(--hpe-web-color-foreground-warning);
  --hpe-web-color-border-weak: var(--hpe-web-base-color-grey-400);
  --hpe-web-color-decorative-black: var(--hpe-web-base-color-black-opacity100);
  --hpe-web-color-decorative-blue: var(--hpe-web-base-color-blue-500);
  --hpe-web-color-decorative-brand: var(--hpe-web-base-color-green-600);
  --hpe-web-color-decorative-cyan: var(--hpe-web-base-color-cyan-200);
  --hpe-web-color-decorative-green: var(--hpe-web-base-color-green-550);
  --hpe-web-color-decorative-neutral: var(--hpe-web-base-color-grey-600);
  --hpe-web-color-decorative-neutral-strong: var(--hpe-web-base-color-grey-650);
  --hpe-web-color-decorative-purple: var(--hpe-web-base-color-purple-400);
  --hpe-web-color-decorative-white: var(--hpe-web-base-color-white-100);
  --hpe-web-color-foreground-critical: var(--hpe-web-base-color-red-800);
  --hpe-web-color-foreground-ok: var(--hpe-web-base-color-green-650);
  --hpe-web-color-foreground-primary: var(--hpe-web-base-color-green-800);
  --hpe-web-color-foreground-unknown: var(--hpe-web-base-color-grey-600);
  --hpe-web-color-foreground-warning: var(--hpe-web-base-color-orange-600);
  --hpe-web-color-gradient-content-overlay-stop0: #ffffff00;
  --hpe-web-color-gradient-content-overlay-stop50: var(--hpe-web-color-background-default);
  --hpe-web-color-icon-critical: var(--hpe-web-base-color-red-800);
  --hpe-web-color-icon-default: var(--hpe-web-color-text-default);
  --hpe-web-color-icon-disabled: var(--hpe-web-color-text-disabled);
  --hpe-web-color-icon-info: var(--hpe-web-base-color-blue-700);
  --hpe-web-color-icon-neutral: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-icon-ok: var(--hpe-web-base-color-green-650);
  --hpe-web-color-icon-on-strong: var(--hpe-web-base-color-white-100);
  --hpe-web-color-icon-primary: var(--hpe-web-color-decorative-brand);
  --hpe-web-color-icon-primary-strong: var(--hpe-web-base-color-green-800);
  --hpe-web-color-icon-primary-strong-hover: var(--hpe-web-base-color-green-900);
  --hpe-web-color-icon-strong: var(--hpe-web-color-text-strong);
  --hpe-web-color-icon-warning: var(--hpe-web-base-color-orange-600);
  --hpe-web-color-icon-weak: var(--hpe-web-color-text-weak);
  --hpe-web-color-logo-element: var(--hpe-web-base-color-green-600);
  --hpe-web-color-logo-logo-text: var(--hpe-web-base-color-black-opacity100);
  --hpe-web-color-nav-global-primary-background: var(--hpe-web-base-color-grey-50);
  --hpe-web-color-nav-global-secondary-background: var(--hpe-web-base-color-white-100);
  --hpe-web-color-nav-overlay-primary-background: #1d1f27b3;
  --hpe-web-color-nav-overlay-primary-text-color: var(--hpe-web-base-color-white-100);
  --hpe-web-color-nav-overlay-secondary-background: var(--hpe-web-color-transparent);
  --hpe-web-color-nav-overlay-secondary-text-color: var(--hpe-web-base-color-white-100);
  --hpe-web-color-text-critical: var(--hpe-web-base-color-red-800);
  --hpe-web-color-text-default: var(--hpe-web-base-color-grey-800);
  --hpe-web-color-text-disabled: var(--hpe-web-base-color-black-opacity24);
  --hpe-web-color-text-neutral-strong: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-text-ok: var(--hpe-web-base-color-green-650);
  --hpe-web-color-text-on-strong: var(--hpe-web-base-color-white-100);
  --hpe-web-color-text-primary: var(--hpe-web-base-color-green-600);
  --hpe-web-color-text-primary-strong: var(--hpe-web-base-color-green-800);
  --hpe-web-color-text-primary-strong-hover: var(--hpe-web-base-color-green-900);
  --hpe-web-color-text-strong: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-text-warning: var(--hpe-web-base-color-orange-600);
  --hpe-web-color-text-weak: var(--hpe-web-base-color-grey-650);
  --hpe-web-color-transparent: #00000000;

  /* ── Component — single-value aliases into the semantic layer. ── */
  --hpe-web-button-carousel-disabled-background: var(--hpe-web-color-background-carousel-disabled);
  --hpe-web-button-carousel-disabled-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-carousel-disabled-icon-color: var(--hpe-web-color-icon-on-strong);
  --hpe-web-button-carousel-hover-background: var(--hpe-web-color-background-carousel-hover);
  --hpe-web-button-carousel-hover-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-carousel-hover-icon-color: var(--hpe-web-color-icon-on-strong);
  --hpe-web-button-carousel-rest-background: var(--hpe-web-color-background-carousel);
  --hpe-web-button-carousel-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-carousel-rest-icon-color: var(--hpe-web-color-icon-on-strong);
  --hpe-web-button-link-inline-hover-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-inline-hover-border-color: var(--hpe-web-color-border-primary-hover);
  --hpe-web-button-link-inline-hover-icon-color: var(--hpe-web-color-icon-strong);
  --hpe-web-button-link-inline-hover-text-color: var(--hpe-web-color-text-strong);
  --hpe-web-button-link-inline-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-inline-rest-border-color: var(--hpe-web-color-border-primary);
  --hpe-web-button-link-inline-rest-icon-color: var(--hpe-web-color-icon-default);
  --hpe-web-button-link-inline-rest-text-color: var(--hpe-web-color-text-default);
  --hpe-web-button-link-large-border-radius: var(--hpe-web-multi-mode-button-link-large-border-radius);
  --hpe-web-button-link-large-border-width: var(--hpe-web-multi-mode-button-link-large-border-width);
  --hpe-web-button-link-large-font-size: var(--hpe-web-multi-mode-button-link-large-font-size);
  --hpe-web-button-link-large-gap-x: var(--hpe-web-multi-mode-button-link-large-gap-x);
  --hpe-web-button-link-large-line-height: var(--hpe-web-multi-mode-button-link-large-line-height);
  --hpe-web-button-link-large-min-height: var(--hpe-web-multi-mode-button-link-large-min-height);
  --hpe-web-button-link-large-padding-x: var(--hpe-web-multi-mode-button-link-large-padding-x);
  --hpe-web-button-link-large-padding-y: var(--hpe-web-multi-mode-button-link-large-padding-y);
  --hpe-web-button-link-medium-border-radius: var(--hpe-web-multi-mode-button-link-medium-border-radius);
  --hpe-web-button-link-medium-border-width: var(--hpe-web-multi-mode-button-link-medium-border-width);
  --hpe-web-button-link-medium-font-size: var(--hpe-web-multi-mode-button-link-medium-font-size);
  --hpe-web-button-link-medium-gap-x: var(--hpe-web-multi-mode-button-link-medium-gap-x);
  --hpe-web-button-link-medium-line-height: var(--hpe-web-multi-mode-button-link-medium-line-height);
  --hpe-web-button-link-medium-min-height: var(--hpe-web-multi-mode-button-link-medium-min-height);
  --hpe-web-button-link-medium-padding-x: var(--hpe-web-multi-mode-button-link-medium-padding-x);
  --hpe-web-button-link-medium-padding-y: var(--hpe-web-multi-mode-button-link-medium-padding-y);
  --hpe-web-button-link-neutral-disabled-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-disabled-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-disabled-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
  --hpe-web-button-link-neutral-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
  --hpe-web-button-link-neutral-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-link-neutral-hover-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-hover-border-color: var(--hpe-web-button-primary-rest-border-color);
  --hpe-web-button-link-neutral-hover-font-weight: var(--hpe-web-button-link-primary-hover-font-weight);
  --hpe-web-button-link-neutral-hover-icon-color: var(--hpe-web-color-text-neutral-strong);
  --hpe-web-button-link-neutral-hover-text-color: var(--hpe-web-color-text-neutral-strong);
  --hpe-web-button-link-neutral-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
  --hpe-web-button-link-neutral-rest-icon-color: var(--hpe-web-color-icon-strong);
  --hpe-web-button-link-neutral-rest-text-color: var(--hpe-web-color-text-strong);
  --hpe-web-button-link-primary-disabled-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-disabled-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-disabled-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
  --hpe-web-button-link-primary-disabled-rest-icon-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-link-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-link-primary-hover-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-hover-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-hover-font-weight: 500;
  --hpe-web-button-link-primary-hover-icon-color: var(--hpe-web-color-icon-primary-strong-hover);
  --hpe-web-button-link-primary-hover-text-color: var(--hpe-web-color-text-primary-strong-hover);
  --hpe-web-button-link-primary-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-rest-font-weight: 500;
  --hpe-web-button-link-primary-rest-icon-color: var(--hpe-web-color-text-primary-strong);
  --hpe-web-button-link-primary-rest-text-color: var(--hpe-web-color-text-primary-strong);
  --hpe-web-button-link-small-border-radius: var(--hpe-web-multi-mode-button-link-small-border-radius);
  --hpe-web-button-link-small-border-width: var(--hpe-web-multi-mode-button-link-small-border-width);
  --hpe-web-button-link-small-font-size: var(--hpe-web-multi-mode-button-link-small-font-size);
  --hpe-web-button-link-small-gap-x: var(--hpe-web-multi-mode-button-link-small-gap-x);
  --hpe-web-button-link-small-line-height: var(--hpe-web-multi-mode-button-link-small-line-height);
  --hpe-web-button-link-small-min-height: var(--hpe-web-multi-mode-button-link-small-min-height);
  --hpe-web-button-link-small-padding-x: var(--hpe-web-multi-mode-button-link-small-padding-x);
  --hpe-web-button-link-small-padding-y: var(--hpe-web-multi-mode-button-link-small-padding-y);
  --hpe-web-button-play-hover-background: #ffffff;
  --hpe-web-button-play-hover-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-play-hover-icon-color: var(--hpe-web-color-icon-primary-strong);
  --hpe-web-button-play-rest-background: #ffffff;
  --hpe-web-button-play-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-play-rest-icon-color: var(--hpe-web-color-icon-primary);
  --hpe-web-button-primary-disabled-rest-background: var(--hpe-web-color-background-neutral-weak);
  --hpe-web-button-primary-disabled-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-primary-disabled-rest-font-weight: var(--hpe-web-button-primary-rest-font-weight);
  --hpe-web-button-primary-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
  --hpe-web-button-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-primary-hover-background: var(--hpe-web-color-background-neutral);
  --hpe-web-button-primary-hover-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-primary-hover-font-weight: var(--hpe-web-button-primary-rest-font-weight);
  --hpe-web-button-primary-hover-icon-color: var(--hpe-web-color-text-on-strong);
  --hpe-web-button-primary-hover-text-color: var(--hpe-web-color-text-on-strong);
  --hpe-web-button-primary-large-border-radius: var(--hpe-web-multi-mode-button-primary-large-border-radius);
  --hpe-web-button-primary-large-border-width: var(--hpe-web-multi-mode-button-primary-large-border-width);
  --hpe-web-button-primary-large-font-size: var(--hpe-web-multi-mode-button-primary-large-font-size);
  --hpe-web-button-primary-large-gap-x: var(--hpe-web-multi-mode-button-primary-large-gap-x);
  --hpe-web-button-primary-large-icon-width: var(--hpe-web-multi-mode-button-primary-large-icon-width);
  --hpe-web-button-primary-large-line-height: var(--hpe-web-multi-mode-button-primary-large-line-height);
  --hpe-web-button-primary-large-min-height: var(--hpe-web-multi-mode-button-primary-large-min-height);
  --hpe-web-button-primary-large-padding-x: var(--hpe-web-multi-mode-button-primary-large-padding-x);
  --hpe-web-button-primary-large-padding-y: var(--hpe-web-multi-mode-button-primary-large-padding-y);
  --hpe-web-button-primary-medium-border-radius: var(--hpe-web-multi-mode-button-primary-medium-border-radius);
  --hpe-web-button-primary-medium-border-width: var(--hpe-web-multi-mode-button-primary-medium-border-width);
  --hpe-web-button-primary-medium-font-size: var(--hpe-web-multi-mode-button-primary-medium-font-size);
  --hpe-web-button-primary-medium-gap-x: var(--hpe-web-multi-mode-button-primary-medium-gap-x);
  --hpe-web-button-primary-medium-icon-width: var(--hpe-web-multi-mode-button-primary-medium-icon-width);
  --hpe-web-button-primary-medium-line-height: var(--hpe-web-multi-mode-button-primary-medium-line-height);
  --hpe-web-button-primary-medium-min-height: var(--hpe-web-multi-mode-button-primary-medium-min-height);
  --hpe-web-button-primary-medium-padding-x: var(--hpe-web-multi-mode-button-primary-medium-padding-x);
  --hpe-web-button-primary-medium-padding-y: var(--hpe-web-multi-mode-button-primary-medium-padding-y);
  --hpe-web-button-primary-rest-background: var(--hpe-web-color-background-neutral-strong);
  --hpe-web-button-primary-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-primary-rest-font-weight: 500;
  --hpe-web-button-primary-rest-icon-color: var(--hpe-web-color-text-on-strong);
  --hpe-web-button-primary-rest-text-color: var(--hpe-web-color-text-on-strong);
  --hpe-web-button-primary-small-border-radius: var(--hpe-web-multi-mode-button-primary-small-border-radius);
  --hpe-web-button-primary-small-border-width: var(--hpe-web-multi-mode-button-primary-small-border-width);
  --hpe-web-button-primary-small-font-size: var(--hpe-web-multi-mode-button-primary-small-font-size);
  --hpe-web-button-primary-small-gap-x: var(--hpe-web-multi-mode-button-primary-small-gap-x);
  --hpe-web-button-primary-small-icon-width: var(--hpe-web-multi-mode-button-primary-small-icon-width);
  --hpe-web-button-primary-small-line-height: var(--hpe-web-multi-mode-button-primary-small-line-height);
  --hpe-web-button-primary-small-min-height: var(--hpe-web-multi-mode-button-primary-small-min-height);
  --hpe-web-button-primary-small-padding-x: var(--hpe-web-multi-mode-button-primary-small-padding-x);
  --hpe-web-button-primary-small-padding-y: var(--hpe-web-multi-mode-button-primary-small-padding-y);
  --hpe-web-button-secondary-disabled-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-secondary-disabled-rest-border-color: var(--hpe-web-color-background-neutral-weak);
  --hpe-web-button-secondary-disabled-rest-font-weight: var(--hpe-web-button-secondary-rest-font-weight);
  --hpe-web-button-secondary-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
  --hpe-web-button-secondary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-secondary-hover-background: var(--hpe-web-color-transparent);
  --hpe-web-button-secondary-hover-border-color: var(--hpe-web-color-border-selected);
  --hpe-web-button-secondary-hover-font-weight: var(--hpe-web-button-secondary-rest-font-weight);
  --hpe-web-button-secondary-hover-icon-color: var(--hpe-web-color-icon-strong);
  --hpe-web-button-secondary-hover-text-color: var(--hpe-web-color-text-strong);
  --hpe-web-button-secondary-large-border-radius: var(--hpe-web-multi-mode-button-secondary-large-border-radius);
  --hpe-web-button-secondary-large-border-width: var(--hpe-web-multi-mode-button-secondary-large-border-width);
  --hpe-web-button-secondary-large-font-size: var(--hpe-web-multi-mode-button-secondary-large-font-size);
  --hpe-web-button-secondary-large-gap-x: var(--hpe-web-multi-mode-button-secondary-large-gap-x);
  --hpe-web-button-secondary-large-icon-height: var(--hpe-web-multi-mode-button-secondary-large-icon-height);
  --hpe-web-button-secondary-large-line-height: var(--hpe-web-multi-mode-button-secondary-large-line-height);
  --hpe-web-button-secondary-large-min-height: var(--hpe-web-multi-mode-button-secondary-large-min-height);
  --hpe-web-button-secondary-large-padding-x: var(--hpe-web-multi-mode-button-secondary-large-padding-x);
  --hpe-web-button-secondary-large-padding-y: var(--hpe-web-multi-mode-button-secondary-large-padding-y);
  --hpe-web-button-secondary-medium-border-radius: var(--hpe-web-multi-mode-button-secondary-medium-border-radius);
  --hpe-web-button-secondary-medium-border-width: var(--hpe-web-multi-mode-button-secondary-medium-border-width);
  --hpe-web-button-secondary-medium-font-size: var(--hpe-web-multi-mode-button-secondary-medium-font-size);
  --hpe-web-button-secondary-medium-gap-x: var(--hpe-web-multi-mode-button-secondary-medium-gap-x);
  --hpe-web-button-secondary-medium-icon-height: var(--hpe-web-multi-mode-button-secondary-medium-icon-height);
  --hpe-web-button-secondary-medium-line-height: var(--hpe-web-multi-mode-button-secondary-medium-line-height);
  --hpe-web-button-secondary-medium-min-height: var(--hpe-web-multi-mode-button-secondary-medium-min-height);
  --hpe-web-button-secondary-medium-padding-x: var(--hpe-web-multi-mode-button-secondary-medium-padding-x);
  --hpe-web-button-secondary-medium-padding-y: var(--hpe-web-multi-mode-button-secondary-medium-padding-y);
  --hpe-web-button-secondary-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-secondary-rest-border-color: var(--hpe-web-color-border-primary);
  --hpe-web-button-secondary-rest-font-weight: 500;
  --hpe-web-button-secondary-rest-icon-color: var(--hpe-web-color-icon-strong);
  --hpe-web-button-secondary-rest-text-color: var(--hpe-web-color-text-strong);
  --hpe-web-button-secondary-small-border-radius: var(--hpe-web-multi-mode-button-secondary-small-border-radius);
  --hpe-web-button-secondary-small-border-width: var(--hpe-web-multi-mode-button-secondary-small-border-width);
  --hpe-web-button-secondary-small-font-size: var(--hpe-web-multi-mode-button-secondary-small-font-size);
  --hpe-web-button-secondary-small-gap-x: var(--hpe-web-multi-mode-button-secondary-small-gap-x);
  --hpe-web-button-secondary-small-icon-height: var(--hpe-web-multi-mode-button-secondary-small-icon-height);
  --hpe-web-button-secondary-small-line-height: var(--hpe-web-multi-mode-button-secondary-small-line-height);
  --hpe-web-button-secondary-small-min-height: var(--hpe-web-multi-mode-button-secondary-small-min-height);
  --hpe-web-button-secondary-small-padding-x: var(--hpe-web-multi-mode-button-secondary-small-padding-x);
  --hpe-web-button-secondary-small-padding-y: var(--hpe-web-multi-mode-button-secondary-small-padding-y);
  --hpe-web-card-bento-box-bento-x: 2rem;
  --hpe-web-card-bento-box-bento-y: 2rem;
  --hpe-web-card-elements-avatar-height: 6rem;
  --hpe-web-card-elements-icon-height: 3rem;
  --hpe-web-card-elements-logo-height: 4rem;
  --hpe-web-card-layout-gap-x: 2.5rem;
  --hpe-web-card-layout-gap-y: 2.5rem;
  --hpe-web-card-layout-padding-y: 4rem;
  --hpe-web-content-block-text-recipe-gap-y: 0px;
  --hpe-web-global-nav-background: #ffffff;
  --hpe-web-live-player-gap-x: 3rem;
  --hpe-web-live-player-padding-x: 22.5rem;
  --hpe-web-live-player-padding-y: 10rem;
  --hpe-web-logo-collage-group-gap-x: 2.5rem;
  --hpe-web-logo-collage-group-gap-y: 2.5rem;
  --hpe-web-logo-collage-max-height: 4rem;
  --hpe-web-logo-grid-padding-x: 2rem;
  --hpe-web-logo-grid-padding-y: 2rem;
  --hpe-web-logo-grid-width: 18rem;
  --hpe-web-marquee-gap-x: 6rem;
  --hpe-web-marquee-gap-y: 2.5rem;
  --hpe-web-marquee-padding-y: 10rem;
  --hpe-web-marquee-simple-marquee-padding-y: 6rem;
}
/**
 * Do not edit directly, this file was auto-generated.
 */

[data-theme="dark"], .dark-theme {
  /* ── Semantic — purpose-based. Alias primitives where possible. ── */
  --hpe-web-color-background-back: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-background-card: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-background-carousel: var(--hpe-web-base-color-grey-200);
  --hpe-web-color-background-carousel-disabled: var(--hpe-web-base-color-grey-500);
  --hpe-web-color-background-carousel-hover: var(--hpe-web-base-color-grey-400);
  --hpe-web-color-background-contrast: var(--hpe-web-base-color-white-opacity6);
  --hpe-web-color-background-contrast-hover: var(--hpe-web-base-color-white-opacity6);
  --hpe-web-color-background-critical: var(--hpe-web-base-color-red-1000);
  --hpe-web-color-background-default: var(--hpe-web-base-color-grey-1300);
  --hpe-web-color-background-disabled: var(--hpe-web-base-color-white-opacity7);
  --hpe-web-color-background-floating: var(--hpe-web-base-color-grey-1300);
  --hpe-web-color-background-neutral: var(--hpe-web-base-color-grey-400);
  --hpe-web-color-background-neutral-strong: var(--hpe-web-base-color-white-100);
  --hpe-web-color-background-neutral-weak: var(--hpe-web-base-color-grey-600);
  --hpe-web-color-background-ok: var(--hpe-web-base-color-green-1000);
  --hpe-web-color-background-primary: var(--hpe-web-base-color-green-600);
  --hpe-web-color-background-primary-strong: var(--hpe-web-base-color-green-700);
  --hpe-web-color-background-sunken: var(--hpe-web-base-color-grey-1200);
  --hpe-web-color-background-warning: var(--hpe-web-base-color-orange-1000);
  --hpe-web-color-border-critical: var(--hpe-web-color-foreground-critical);
  --hpe-web-color-border-default: var(--hpe-web-base-color-white-opacity36);
  --hpe-web-color-border-disabled: var(--hpe-web-base-color-white-opacity12);
  --hpe-web-color-border-ok: var(--hpe-web-base-color-green-400);
  --hpe-web-color-border-primary: var(--hpe-web-base-color-green-400);
  --hpe-web-color-border-primary-hover: var(--hpe-web-base-color-white-100);
  --hpe-web-color-border-selected: var(--hpe-web-color-foreground-primary);
  --hpe-web-color-border-strong: var(--hpe-web-base-color-white-opacity72);
  --hpe-web-color-border-warning: var(--hpe-web-color-foreground-warning);
  --hpe-web-color-border-weak: var(--hpe-web-base-color-white-opacity12);
  --hpe-web-color-decorative-black: var(--hpe-web-base-color-black-opacity100);
  --hpe-web-color-decorative-blue: var(--hpe-web-base-color-blue-500);
  --hpe-web-color-decorative-brand: var(--hpe-web-base-color-green-600);
  --hpe-web-color-decorative-cyan: var(--hpe-web-base-color-cyan-400);
  --hpe-web-color-decorative-green: var(--hpe-web-base-color-green-700);
  --hpe-web-color-decorative-neutral: var(--hpe-web-base-color-grey-500);
  --hpe-web-color-decorative-neutral-strong: var(--hpe-web-base-color-grey-400);
  --hpe-web-color-decorative-purple: var(--hpe-web-base-color-purple-400);
  --hpe-web-color-decorative-white: var(--hpe-web-base-color-white-100);
  --hpe-web-color-foreground-critical: var(--hpe-web-base-color-red-500);
  --hpe-web-color-foreground-ok: var(--hpe-web-base-color-green-550);
  --hpe-web-color-foreground-primary: var(--hpe-web-base-color-green-550);
  --hpe-web-color-foreground-unknown: var(--hpe-web-base-color-grey-600);
  --hpe-web-color-foreground-warning: var(--hpe-web-base-color-orange-500);
  --hpe-web-color-gradient-content-overlay-stop0: #1d1f2700;
  --hpe-web-color-gradient-content-overlay-stop50: var(--hpe-web-color-background-default);
  --hpe-web-color-icon-critical: var(--hpe-web-color-foreground-critical);
  --hpe-web-color-icon-default: var(--hpe-web-color-text-default);
  --hpe-web-color-icon-disabled: var(--hpe-web-color-text-disabled);
  --hpe-web-color-icon-info: var(--hpe-web-base-color-blue-200);
  --hpe-web-color-icon-neutral: var(--hpe-web-base-color-white-100);
  --hpe-web-color-icon-ok: var(--hpe-web-base-color-green-550);
  --hpe-web-color-icon-on-strong: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-icon-primary: var(--hpe-web-color-decorative-brand);
  --hpe-web-color-icon-primary-strong: var(--hpe-web-base-color-green-600);
  --hpe-web-color-icon-primary-strong-hover: var(--hpe-web-base-color-green-450);
  --hpe-web-color-icon-strong: var(--hpe-web-color-text-strong);
  --hpe-web-color-icon-warning: var(--hpe-web-base-color-orange-500);
  --hpe-web-color-icon-weak: var(--hpe-web-color-text-weak);
  --hpe-web-color-logo-element: var(--hpe-web-base-color-green-600);
  --hpe-web-color-logo-logo-text: var(--hpe-web-base-color-white-100);
  --hpe-web-color-nav-global-primary-background: var(--hpe-web-base-color-grey-1300);
  --hpe-web-color-nav-global-secondary-background: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-nav-overlay-primary-background: var(--hpe-web-color-transparent);
  --hpe-web-color-nav-overlay-primary-text-color: var(--hpe-web-base-color-white-100);
  --hpe-web-color-nav-overlay-secondary-background: var(--hpe-web-color-transparent);
  --hpe-web-color-nav-overlay-secondary-text-color: var(--hpe-web-base-color-white-100);
  --hpe-web-color-text-critical: var(--hpe-web-base-color-red-500);
  --hpe-web-color-text-default: var(--hpe-web-base-color-grey-200);
  --hpe-web-color-text-disabled: var(--hpe-web-base-color-white-opacity24);
  --hpe-web-color-text-neutral-strong: var(--hpe-web-base-color-grey-50);
  --hpe-web-color-text-ok: var(--hpe-web-base-color-green-400);
  --hpe-web-color-text-on-strong: var(--hpe-web-base-color-grey-1000);
  --hpe-web-color-text-primary: var(--hpe-web-base-color-green-400);
  --hpe-web-color-text-primary-strong: var(--hpe-web-base-color-green-550);
  --hpe-web-color-text-primary-strong-hover: var(--hpe-web-base-color-green-500);
  --hpe-web-color-text-strong: var(--hpe-web-base-color-white-100);
  --hpe-web-color-text-warning: var(--hpe-web-base-color-orange-500);
  --hpe-web-color-text-weak: var(--hpe-web-base-color-grey-500);
  --hpe-web-color-transparent: #ffffff00;

  /* ── Component — single-value aliases into the semantic layer. ── */
  --hpe-web-button-carousel-disabled-background: var(--hpe-web-color-background-carousel-disabled);
  --hpe-web-button-carousel-disabled-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-carousel-disabled-icon-color: var(--hpe-web-color-icon-on-strong);
  --hpe-web-button-carousel-hover-background: var(--hpe-web-color-background-carousel-hover);
  --hpe-web-button-carousel-hover-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-carousel-hover-icon-color: var(--hpe-web-color-icon-on-strong);
  --hpe-web-button-carousel-rest-background: var(--hpe-web-color-background-carousel);
  --hpe-web-button-carousel-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-carousel-rest-icon-color: var(--hpe-web-color-icon-on-strong);
  --hpe-web-button-link-inline-hover-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-inline-hover-border-color: var(--hpe-web-color-border-primary-hover);
  --hpe-web-button-link-inline-hover-icon-color: var(--hpe-web-color-icon-strong);
  --hpe-web-button-link-inline-hover-text-color: var(--hpe-web-color-text-strong);
  --hpe-web-button-link-inline-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-inline-rest-border-color: var(--hpe-web-color-border-primary);
  --hpe-web-button-link-inline-rest-icon-color: var(--hpe-web-color-icon-default);
  --hpe-web-button-link-inline-rest-text-color: var(--hpe-web-color-text-default);
  --hpe-web-button-link-large-border-radius: var(--hpe-web-multi-mode-button-link-large-border-radius);
  --hpe-web-button-link-large-border-width: var(--hpe-web-multi-mode-button-link-large-border-width);
  --hpe-web-button-link-large-font-size: var(--hpe-web-multi-mode-button-link-large-font-size);
  --hpe-web-button-link-large-gap-x: var(--hpe-web-multi-mode-button-link-large-gap-x);
  --hpe-web-button-link-large-line-height: var(--hpe-web-multi-mode-button-link-large-line-height);
  --hpe-web-button-link-large-min-height: var(--hpe-web-multi-mode-button-link-large-min-height);
  --hpe-web-button-link-large-padding-x: var(--hpe-web-multi-mode-button-link-large-padding-x);
  --hpe-web-button-link-large-padding-y: var(--hpe-web-multi-mode-button-link-large-padding-y);
  --hpe-web-button-link-medium-border-radius: var(--hpe-web-multi-mode-button-link-medium-border-radius);
  --hpe-web-button-link-medium-border-width: var(--hpe-web-multi-mode-button-link-medium-border-width);
  --hpe-web-button-link-medium-font-size: var(--hpe-web-multi-mode-button-link-medium-font-size);
  --hpe-web-button-link-medium-gap-x: var(--hpe-web-multi-mode-button-link-medium-gap-x);
  --hpe-web-button-link-medium-line-height: var(--hpe-web-multi-mode-button-link-medium-line-height);
  --hpe-web-button-link-medium-min-height: var(--hpe-web-multi-mode-button-link-medium-min-height);
  --hpe-web-button-link-medium-padding-x: var(--hpe-web-multi-mode-button-link-medium-padding-x);
  --hpe-web-button-link-medium-padding-y: var(--hpe-web-multi-mode-button-link-medium-padding-y);
  --hpe-web-button-link-neutral-disabled-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-disabled-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-disabled-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
  --hpe-web-button-link-neutral-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
  --hpe-web-button-link-neutral-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-link-neutral-hover-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-hover-border-color: var(--hpe-web-button-primary-rest-border-color);
  --hpe-web-button-link-neutral-hover-font-weight: var(--hpe-web-button-link-primary-hover-font-weight);
  --hpe-web-button-link-neutral-hover-icon-color: var(--hpe-web-color-text-neutral-strong);
  --hpe-web-button-link-neutral-hover-text-color: var(--hpe-web-color-text-neutral-strong);
  --hpe-web-button-link-neutral-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-neutral-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
  --hpe-web-button-link-neutral-rest-icon-color: var(--hpe-web-color-icon-strong);
  --hpe-web-button-link-neutral-rest-text-color: var(--hpe-web-color-text-strong);
  --hpe-web-button-link-primary-disabled-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-disabled-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-disabled-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
  --hpe-web-button-link-primary-disabled-rest-icon-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-link-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-link-primary-hover-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-hover-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-hover-font-weight: 500;
  --hpe-web-button-link-primary-hover-icon-color: var(--hpe-web-color-icon-primary-strong-hover);
  --hpe-web-button-link-primary-hover-text-color: var(--hpe-web-color-text-primary-strong-hover);
  --hpe-web-button-link-primary-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-link-primary-rest-font-weight: 500;
  --hpe-web-button-link-primary-rest-icon-color: var(--hpe-web-color-text-primary-strong);
  --hpe-web-button-link-primary-rest-text-color: var(--hpe-web-color-text-primary-strong);
  --hpe-web-button-link-small-border-radius: var(--hpe-web-multi-mode-button-link-small-border-radius);
  --hpe-web-button-link-small-border-width: var(--hpe-web-multi-mode-button-link-small-border-width);
  --hpe-web-button-link-small-font-size: var(--hpe-web-multi-mode-button-link-small-font-size);
  --hpe-web-button-link-small-gap-x: var(--hpe-web-multi-mode-button-link-small-gap-x);
  --hpe-web-button-link-small-line-height: var(--hpe-web-multi-mode-button-link-small-line-height);
  --hpe-web-button-link-small-min-height: var(--hpe-web-multi-mode-button-link-small-min-height);
  --hpe-web-button-link-small-padding-x: var(--hpe-web-multi-mode-button-link-small-padding-x);
  --hpe-web-button-link-small-padding-y: var(--hpe-web-multi-mode-button-link-small-padding-y);
  --hpe-web-button-play-hover-background: #ffffff;
  --hpe-web-button-play-hover-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-play-hover-icon-color: var(--hpe-web-color-icon-primary-strong);
  --hpe-web-button-play-rest-background: #ffffff;
  --hpe-web-button-play-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-play-rest-icon-color: var(--hpe-web-color-icon-primary);
  --hpe-web-button-primary-disabled-rest-background: var(--hpe-web-color-background-neutral-weak);
  --hpe-web-button-primary-disabled-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-primary-disabled-rest-font-weight: var(--hpe-web-button-primary-rest-font-weight);
  --hpe-web-button-primary-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
  --hpe-web-button-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-primary-hover-background: var(--hpe-web-color-background-neutral);
  --hpe-web-button-primary-hover-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-primary-hover-font-weight: var(--hpe-web-button-primary-rest-font-weight);
  --hpe-web-button-primary-hover-icon-color: var(--hpe-web-color-text-on-strong);
  --hpe-web-button-primary-hover-text-color: var(--hpe-web-color-text-on-strong);
  --hpe-web-button-primary-large-border-radius: var(--hpe-web-multi-mode-button-primary-large-border-radius);
  --hpe-web-button-primary-large-border-width: var(--hpe-web-multi-mode-button-primary-large-border-width);
  --hpe-web-button-primary-large-font-size: var(--hpe-web-multi-mode-button-primary-large-font-size);
  --hpe-web-button-primary-large-gap-x: var(--hpe-web-multi-mode-button-primary-large-gap-x);
  --hpe-web-button-primary-large-icon-width: var(--hpe-web-multi-mode-button-primary-large-icon-width);
  --hpe-web-button-primary-large-line-height: var(--hpe-web-multi-mode-button-primary-large-line-height);
  --hpe-web-button-primary-large-min-height: var(--hpe-web-multi-mode-button-primary-large-min-height);
  --hpe-web-button-primary-large-padding-x: var(--hpe-web-multi-mode-button-primary-large-padding-x);
  --hpe-web-button-primary-large-padding-y: var(--hpe-web-multi-mode-button-primary-large-padding-y);
  --hpe-web-button-primary-medium-border-radius: var(--hpe-web-multi-mode-button-primary-medium-border-radius);
  --hpe-web-button-primary-medium-border-width: var(--hpe-web-multi-mode-button-primary-medium-border-width);
  --hpe-web-button-primary-medium-font-size: var(--hpe-web-multi-mode-button-primary-medium-font-size);
  --hpe-web-button-primary-medium-gap-x: var(--hpe-web-multi-mode-button-primary-medium-gap-x);
  --hpe-web-button-primary-medium-icon-width: var(--hpe-web-multi-mode-button-primary-medium-icon-width);
  --hpe-web-button-primary-medium-line-height: var(--hpe-web-multi-mode-button-primary-medium-line-height);
  --hpe-web-button-primary-medium-min-height: var(--hpe-web-multi-mode-button-primary-medium-min-height);
  --hpe-web-button-primary-medium-padding-x: var(--hpe-web-multi-mode-button-primary-medium-padding-x);
  --hpe-web-button-primary-medium-padding-y: var(--hpe-web-multi-mode-button-primary-medium-padding-y);
  --hpe-web-button-primary-rest-background: var(--hpe-web-color-background-neutral-strong);
  --hpe-web-button-primary-rest-border-color: var(--hpe-web-color-transparent);
  --hpe-web-button-primary-rest-font-weight: 500;
  --hpe-web-button-primary-rest-icon-color: var(--hpe-web-color-text-on-strong);
  --hpe-web-button-primary-rest-text-color: var(--hpe-web-color-text-on-strong);
  --hpe-web-button-primary-small-border-radius: var(--hpe-web-multi-mode-button-primary-small-border-radius);
  --hpe-web-button-primary-small-border-width: var(--hpe-web-multi-mode-button-primary-small-border-width);
  --hpe-web-button-primary-small-font-size: var(--hpe-web-multi-mode-button-primary-small-font-size);
  --hpe-web-button-primary-small-gap-x: var(--hpe-web-multi-mode-button-primary-small-gap-x);
  --hpe-web-button-primary-small-icon-width: var(--hpe-web-multi-mode-button-primary-small-icon-width);
  --hpe-web-button-primary-small-line-height: var(--hpe-web-multi-mode-button-primary-small-line-height);
  --hpe-web-button-primary-small-min-height: var(--hpe-web-multi-mode-button-primary-small-min-height);
  --hpe-web-button-primary-small-padding-x: var(--hpe-web-multi-mode-button-primary-small-padding-x);
  --hpe-web-button-primary-small-padding-y: var(--hpe-web-multi-mode-button-primary-small-padding-y);
  --hpe-web-button-secondary-disabled-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-secondary-disabled-rest-border-color: var(--hpe-web-color-background-neutral-weak);
  --hpe-web-button-secondary-disabled-rest-font-weight: var(--hpe-web-button-secondary-rest-font-weight);
  --hpe-web-button-secondary-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
  --hpe-web-button-secondary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
  --hpe-web-button-secondary-hover-background: var(--hpe-web-color-transparent);
  --hpe-web-button-secondary-hover-border-color: var(--hpe-web-color-border-selected);
  --hpe-web-button-secondary-hover-font-weight: var(--hpe-web-button-secondary-rest-font-weight);
  --hpe-web-button-secondary-hover-icon-color: var(--hpe-web-color-icon-strong);
  --hpe-web-button-secondary-hover-text-color: var(--hpe-web-color-text-strong);
  --hpe-web-button-secondary-large-border-radius: var(--hpe-web-multi-mode-button-secondary-large-border-radius);
  --hpe-web-button-secondary-large-border-width: var(--hpe-web-multi-mode-button-secondary-large-border-width);
  --hpe-web-button-secondary-large-font-size: var(--hpe-web-multi-mode-button-secondary-large-font-size);
  --hpe-web-button-secondary-large-gap-x: var(--hpe-web-multi-mode-button-secondary-large-gap-x);
  --hpe-web-button-secondary-large-icon-height: var(--hpe-web-multi-mode-button-secondary-large-icon-height);
  --hpe-web-button-secondary-large-line-height: var(--hpe-web-multi-mode-button-secondary-large-line-height);
  --hpe-web-button-secondary-large-min-height: var(--hpe-web-multi-mode-button-secondary-large-min-height);
  --hpe-web-button-secondary-large-padding-x: var(--hpe-web-multi-mode-button-secondary-large-padding-x);
  --hpe-web-button-secondary-large-padding-y: var(--hpe-web-multi-mode-button-secondary-large-padding-y);
  --hpe-web-button-secondary-medium-border-radius: var(--hpe-web-multi-mode-button-secondary-medium-border-radius);
  --hpe-web-button-secondary-medium-border-width: var(--hpe-web-multi-mode-button-secondary-medium-border-width);
  --hpe-web-button-secondary-medium-font-size: var(--hpe-web-multi-mode-button-secondary-medium-font-size);
  --hpe-web-button-secondary-medium-gap-x: var(--hpe-web-multi-mode-button-secondary-medium-gap-x);
  --hpe-web-button-secondary-medium-icon-height: var(--hpe-web-multi-mode-button-secondary-medium-icon-height);
  --hpe-web-button-secondary-medium-line-height: var(--hpe-web-multi-mode-button-secondary-medium-line-height);
  --hpe-web-button-secondary-medium-min-height: var(--hpe-web-multi-mode-button-secondary-medium-min-height);
  --hpe-web-button-secondary-medium-padding-x: var(--hpe-web-multi-mode-button-secondary-medium-padding-x);
  --hpe-web-button-secondary-medium-padding-y: var(--hpe-web-multi-mode-button-secondary-medium-padding-y);
  --hpe-web-button-secondary-rest-background: var(--hpe-web-color-transparent);
  --hpe-web-button-secondary-rest-border-color: var(--hpe-web-color-border-primary);
  --hpe-web-button-secondary-rest-font-weight: 500;
  --hpe-web-button-secondary-rest-icon-color: var(--hpe-web-color-icon-strong);
  --hpe-web-button-secondary-rest-text-color: var(--hpe-web-color-text-strong);
  --hpe-web-button-secondary-small-border-radius: var(--hpe-web-multi-mode-button-secondary-small-border-radius);
  --hpe-web-button-secondary-small-border-width: var(--hpe-web-multi-mode-button-secondary-small-border-width);
  --hpe-web-button-secondary-small-font-size: var(--hpe-web-multi-mode-button-secondary-small-font-size);
  --hpe-web-button-secondary-small-gap-x: var(--hpe-web-multi-mode-button-secondary-small-gap-x);
  --hpe-web-button-secondary-small-icon-height: var(--hpe-web-multi-mode-button-secondary-small-icon-height);
  --hpe-web-button-secondary-small-line-height: var(--hpe-web-multi-mode-button-secondary-small-line-height);
  --hpe-web-button-secondary-small-min-height: var(--hpe-web-multi-mode-button-secondary-small-min-height);
  --hpe-web-button-secondary-small-padding-x: var(--hpe-web-multi-mode-button-secondary-small-padding-x);
  --hpe-web-button-secondary-small-padding-y: var(--hpe-web-multi-mode-button-secondary-small-padding-y);
  --hpe-web-card-bento-box-bento-x: 2rem;
  --hpe-web-card-bento-box-bento-y: 2rem;
  --hpe-web-card-elements-avatar-height: 6rem;
  --hpe-web-card-elements-icon-height: 3rem;
  --hpe-web-card-elements-logo-height: 4rem;
  --hpe-web-card-layout-gap-x: 2.5rem;
  --hpe-web-card-layout-gap-y: 2.5rem;
  --hpe-web-card-layout-padding-y: 4rem;
  --hpe-web-content-block-text-recipe-gap-y: 0px;
  --hpe-web-global-nav-background: #ffffff;
  --hpe-web-live-player-gap-x: 3rem;
  --hpe-web-live-player-padding-x: 22.5rem;
  --hpe-web-live-player-padding-y: 10rem;
  --hpe-web-logo-collage-group-gap-x: 2.5rem;
  --hpe-web-logo-collage-group-gap-y: 2.5rem;
  --hpe-web-logo-collage-max-height: 4rem;
  --hpe-web-logo-grid-padding-x: 2rem;
  --hpe-web-logo-grid-padding-y: 2rem;
  --hpe-web-logo-grid-width: 18rem;
  --hpe-web-marquee-gap-x: 6rem;
  --hpe-web-marquee-gap-y: 2.5rem;
  --hpe-web-marquee-padding-y: 10rem;
  --hpe-web-marquee-simple-marquee-padding-y: 6rem;
}
.hpe-button {
  --hpe-button-font-family: var(--hpe-web-base-font-family-primary);
  --hpe-button-transition: all 0.2s ease-in-out;
}

.hpe-button__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--hpe-button-font-family);
  border: none;
  cursor: pointer;
  transition: var(--hpe-button-transition);
  white-space: nowrap;
  padding: 0;
}

.hpe-button__button:disabled {
  cursor: not-allowed;
}

.hpe-button--primary .hpe-button__button {
  font-weight: var(--hpe-web-button-primary-rest-font-weight);
}

.hpe-button--primary .hpe-button__button:not(:disabled):hover {
  font-weight: var(--hpe-web-button-primary-hover-font-weight);
}

.hpe-button--primary .hpe-button__button:disabled {
  font-weight: var(--hpe-web-button-primary-disabled-rest-font-weight);
}

.hpe-button--secondary .hpe-button__button {
  font-weight: var(--hpe-web-button-secondary-rest-font-weight);
}

.hpe-button--secondary .hpe-button__button:not(:disabled):hover {
  font-weight: var(--hpe-web-button-secondary-hover-font-weight);
}

.hpe-button--secondary .hpe-button__button:disabled {
  font-weight: var(--hpe-web-button-secondary-disabled-rest-font-weight);
}

.hpe-button--link-primary .hpe-button__button {
  font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
}

.hpe-button--link-primary .hpe-button__button:not(:disabled):hover {
  font-weight: var(--hpe-web-button-link-primary-hover-font-weight);
}

.hpe-button--link-primary .hpe-button__button:disabled {
  font-weight: var(--hpe-web-button-link-primary-disabled-rest-font-weight);
}

.hpe-button--link-neutral .hpe-button__button {
  font-weight: var(--hpe-web-button-link-neutral-rest-font-weight);
}

.hpe-button--link-neutral .hpe-button__button:not(:disabled):hover {
  font-weight: var(--hpe-web-button-link-neutral-hover-font-weight);
}

.hpe-button--link-neutral .hpe-button__button:disabled {
  font-weight: var(--hpe-web-button-link-neutral-disabled-rest-font-weight);
}

.hpe-button__label {
  display: inline-block;
}

.hpe-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hpe-button__icon[hidden] {
  display: none;
}

/* PRIMARY */
.hpe-button--primary.hpe-button--small .hpe-button__button {
  min-height: var(--hpe-web-button-primary-small-min-height);
  padding: var(--hpe-web-button-primary-small-padding-y)
    var(--hpe-web-button-primary-small-padding-x);
  gap: var(--hpe-web-button-primary-small-gap-x);
  font-size: var(--hpe-web-button-primary-small-font-size);
  line-height: var(--hpe-web-button-primary-small-line-height);
  border-radius: var(--hpe-web-button-primary-small-border-radius);
  background-color: var(--hpe-web-button-primary-rest-background);
  color: var(--hpe-web-button-primary-rest-text-color);
}

.hpe-button--primary.hpe-button--small
  .hpe-button__button:not(:disabled):hover {
  background-color: var(--hpe-web-button-primary-hover-background);
  color: var(--hpe-web-button-primary-hover-text-color);
}

.hpe-button--primary.hpe-button--small .hpe-button__button:disabled {
  background-color: var(--hpe-web-button-primary-disabled-rest-background);
  color: var(--hpe-web-button-primary-disabled-rest-text-color);
}

.hpe-button--primary.hpe-button--default .hpe-button__button {
  min-height: var(--hpe-web-button-primary-medium-min-height);
  padding: var(--hpe-web-button-primary-medium-padding-y)
    var(--hpe-web-button-primary-medium-padding-x);
  gap: var(--hpe-web-button-primary-medium-gap-x);
  font-size: var(--hpe-web-button-primary-medium-font-size);
  line-height: var(--hpe-web-button-primary-medium-line-height);
  border-radius: var(--hpe-web-button-primary-medium-border-radius);
  background-color: var(--hpe-web-button-primary-rest-background);
  color: var(--hpe-web-button-primary-rest-text-color);
}

.hpe-button--primary.hpe-button--default
  .hpe-button__button:not(:disabled):hover {
  background-color: var(--hpe-web-button-primary-hover-background);
  color: var(--hpe-web-button-primary-hover-text-color);
}

.hpe-button--primary.hpe-button--default .hpe-button__button:disabled {
  background-color: var(--hpe-web-button-primary-disabled-rest-background);
  color: var(--hpe-web-button-primary-disabled-rest-text-color);
}

.hpe-button--primary.hpe-button--large .hpe-button__button {
  min-height: var(--hpe-web-button-primary-large-min-height);
  padding: var(--hpe-web-button-primary-large-padding-y)
    var(--hpe-web-button-primary-large-padding-x);
  gap: var(--hpe-web-button-primary-large-gap-x);
  font-size: var(--hpe-web-button-primary-large-font-size);
  line-height: var(--hpe-web-button-primary-large-line-height);
  border-radius: var(--hpe-web-button-primary-large-border-radius);
  background-color: var(--hpe-web-button-primary-rest-background);
  color: var(--hpe-web-button-primary-rest-text-color);
}

.hpe-button--primary.hpe-button--large
  .hpe-button__button:not(:disabled):hover {
  background-color: var(--hpe-web-button-primary-hover-background);
  color: var(--hpe-web-button-primary-hover-text-color);
}

.hpe-button--primary.hpe-button--large .hpe-button__button:disabled {
  background-color: var(--hpe-web-button-primary-disabled-rest-background);
  color: var(--hpe-web-button-primary-disabled-rest-text-color);
}

/* SECONDARY */
.hpe-button--secondary.hpe-button--small .hpe-button__button {
  min-height: var(--hpe-web-button-secondary-small-min-height);
  padding: calc(
      var(--hpe-web-button-secondary-small-padding-y) -
        var(--hpe-web-button-secondary-small-border-width)
    )
    var(--hpe-web-button-secondary-small-padding-x);
  gap: var(--hpe-web-button-secondary-small-gap-x);
  font-size: var(--hpe-web-button-secondary-small-font-size);
  line-height: var(--hpe-web-button-secondary-small-line-height);
  border-radius: var(--hpe-web-button-secondary-small-border-radius);
  background-color: var(--hpe-web-button-secondary-rest-background);
  color: var(--hpe-web-button-secondary-rest-text-color);
  border: var(--hpe-web-button-secondary-small-border-width) solid
    var(--hpe-web-button-secondary-rest-border-color);
}

.hpe-button--secondary.hpe-button--small
  .hpe-button__button:not(:disabled):hover {
  background-color: var(--hpe-web-button-secondary-hover-background);
  border-color: var(--hpe-web-button-secondary-hover-border-color);
  color: var(--hpe-web-button-secondary-hover-text-color);
}

.hpe-button--secondary.hpe-button--small .hpe-button__button:disabled {
  background-color: var(--hpe-web-button-secondary-disabled-rest-background);
  border-color: var(--hpe-web-button-secondary-disabled-rest-border-color);
  color: var(--hpe-web-button-secondary-disabled-rest-text-color);
}

.hpe-button--secondary.hpe-button--default .hpe-button__button {
  min-height: var(--hpe-web-button-secondary-medium-min-height);
  padding: calc(
      var(--hpe-web-button-secondary-medium-padding-y) -
        var(--hpe-web-button-secondary-medium-border-width)
    )
    var(--hpe-web-button-secondary-medium-padding-x);
  gap: var(--hpe-web-button-secondary-medium-gap-x);
  font-size: var(--hpe-web-button-secondary-medium-font-size);
  line-height: var(--hpe-web-button-secondary-medium-line-height);
  border-radius: var(--hpe-web-button-secondary-medium-border-radius);
  background-color: var(--hpe-web-button-secondary-rest-background);
  color: var(--hpe-web-button-secondary-rest-text-color);
  border: var(--hpe-web-button-secondary-medium-border-width) solid
    var(--hpe-web-button-secondary-rest-border-color);
}

.hpe-button--secondary.hpe-button--default
  .hpe-button__button:not(:disabled):hover {
  background-color: var(--hpe-web-button-secondary-hover-background);
  border-color: var(--hpe-web-button-secondary-hover-border-color);
  color: var(--hpe-web-button-secondary-hover-text-color);
}

.hpe-button--secondary.hpe-button--default .hpe-button__button:disabled {
  background-color: var(--hpe-web-button-secondary-disabled-rest-background);
  border-color: var(--hpe-web-button-secondary-disabled-rest-border-color);
  color: var(--hpe-web-button-secondary-disabled-rest-text-color);
}

.hpe-button--secondary.hpe-button--large .hpe-button__button {
  min-height: var(--hpe-web-button-secondary-large-min-height);
  padding: calc(
      var(--hpe-web-button-secondary-large-padding-y) -
        var(--hpe-web-button-secondary-large-border-width)
    )
    var(--hpe-web-button-secondary-large-padding-x);
  gap: var(--hpe-web-button-secondary-large-gap-x);
  font-size: var(--hpe-web-button-secondary-large-font-size);
  line-height: var(--hpe-web-button-secondary-large-line-height);
  border-radius: var(--hpe-web-button-secondary-large-border-radius);
  background-color: var(--hpe-web-button-secondary-rest-background);
  color: var(--hpe-web-button-secondary-rest-text-color);
  border: var(--hpe-web-button-secondary-large-border-width) solid
    var(--hpe-web-button-secondary-rest-border-color);
}

.hpe-button--secondary.hpe-button--large
  .hpe-button__button:not(:disabled):hover {
  background-color: var(--hpe-web-button-secondary-hover-background);
  border-color: var(--hpe-web-button-secondary-hover-border-color);
  color: var(--hpe-web-button-secondary-hover-text-color);
}

.hpe-button--secondary.hpe-button--large .hpe-button__button:disabled {
  background-color: var(--hpe-web-button-secondary-disabled-rest-background);
  border-color: var(--hpe-web-button-secondary-disabled-rest-border-color);
  color: var(--hpe-web-button-secondary-disabled-rest-text-color);
}

/* LINK PRIMARY */
.hpe-button--link-primary.hpe-button--small .hpe-button__button {
  background: var(--hpe-web-button-link-primary-rest-background);
  border: none;
  min-height: var(--hpe-web-button-link-small-min-height);
  padding: var(--hpe-web-button-link-small-padding-y)
    var(--hpe-web-button-link-small-padding-x);
  gap: var(--hpe-web-button-link-small-gap-x);
  font-size: var(--hpe-web-button-link-small-font-size);
  line-height: var(--hpe-web-button-link-small-line-height);
  border-radius: var(--hpe-web-button-link-small-border-radius);
  color: var(--hpe-web-button-link-primary-rest-text-color);
}

.hpe-button--link-primary.hpe-button--small
  .hpe-button__button:not(:disabled):hover {
  background: var(--hpe-web-button-link-primary-hover-background);
  color: var(--hpe-web-button-link-primary-hover-text-color);
}

.hpe-button--link-primary.hpe-button--small .hpe-button__button:disabled {
  background: var(--hpe-web-button-link-primary-disabled-rest-background);
  color: var(--hpe-web-button-link-primary-disabled-rest-text-color);
}

.hpe-button--link-primary.hpe-button--default .hpe-button__button {
  background: var(--hpe-web-button-link-primary-rest-background);
  border: none;
  min-height: var(--hpe-web-button-link-medium-min-height);
  padding: var(--hpe-web-button-link-medium-padding-y)
    var(--hpe-web-button-link-medium-padding-x);
  gap: var(--hpe-web-button-link-medium-gap-x);
  font-size: var(--hpe-web-button-link-medium-font-size);
  line-height: var(--hpe-web-button-link-medium-line-height);
  border-radius: var(--hpe-web-button-link-medium-border-radius);
  color: var(--hpe-web-button-link-primary-rest-text-color);
}

.hpe-button--link-primary.hpe-button--default
  .hpe-button__button:not(:disabled):hover {
  background: var(--hpe-web-button-link-primary-hover-background);
  color: var(--hpe-web-button-link-primary-hover-text-color);
}

.hpe-button--link-primary.hpe-button--default .hpe-button__button:disabled {
  background: var(--hpe-web-button-link-primary-disabled-rest-background);
  color: var(--hpe-web-button-link-primary-disabled-rest-text-color);
}

.hpe-button--link-primary.hpe-button--large .hpe-button__button {
  background: var(--hpe-web-button-link-primary-rest-background);
  border: none;
  min-height: var(--hpe-web-button-link-large-min-height);
  padding: var(--hpe-web-button-link-large-padding-y)
    var(--hpe-web-button-link-large-padding-x);
  gap: var(--hpe-web-button-link-large-gap-x);
  font-size: var(--hpe-web-button-link-large-font-size);
  line-height: var(--hpe-web-button-link-large-line-height);
  border-radius: var(--hpe-web-button-link-large-border-radius);
  color: var(--hpe-web-button-link-primary-rest-text-color);
}

.hpe-button--link-primary.hpe-button--large
  .hpe-button__button:not(:disabled):hover {
  background: var(--hpe-web-button-link-primary-hover-background);
  color: var(--hpe-web-button-link-primary-hover-text-color);
}

.hpe-button--link-primary.hpe-button--large .hpe-button__button:disabled {
  background: var(--hpe-web-button-link-primary-disabled-rest-background);
  color: var(--hpe-web-button-link-primary-disabled-rest-text-color);
}

/* LINK NEUTRAL */
.hpe-button--link-neutral.hpe-button--small .hpe-button__button {
  background: var(--hpe-web-button-link-neutral-rest-background);
  border: none;
  min-height: var(--hpe-web-button-link-small-min-height);
  padding: var(--hpe-web-button-link-small-padding-y)
    var(--hpe-web-button-link-small-padding-x);
  gap: var(--hpe-web-button-link-small-gap-x);
  font-size: var(--hpe-web-button-link-small-font-size);
  line-height: var(--hpe-web-button-link-small-line-height);
  border-radius: var(--hpe-web-button-link-small-border-radius);
  color: var(--hpe-web-button-link-neutral-rest-text-color);
}

.hpe-button--link-neutral.hpe-button--small
  .hpe-button__button:not(:disabled):hover {
  background: var(--hpe-web-button-link-neutral-hover-background);
  color: var(--hpe-web-button-link-neutral-hover-text-color);
}

.hpe-button--link-neutral.hpe-button--small .hpe-button__button:disabled {
  background: var(--hpe-web-button-link-neutral-disabled-rest-background);
  color: var(--hpe-web-button-link-neutral-disabled-rest-text-color);
}

.hpe-button--link-neutral.hpe-button--default .hpe-button__button {
  background: var(--hpe-web-button-link-neutral-rest-background);
  border: none;
  min-height: var(--hpe-web-button-link-medium-min-height);
  padding: var(--hpe-web-button-link-medium-padding-y)
    var(--hpe-web-button-link-medium-padding-x);
  gap: var(--hpe-web-button-link-medium-gap-x);
  font-size: var(--hpe-web-button-link-medium-font-size);
  line-height: var(--hpe-web-button-link-medium-line-height);
  border-radius: var(--hpe-web-button-link-medium-border-radius);
  color: var(--hpe-web-button-link-neutral-rest-text-color);
}

.hpe-button--link-neutral.hpe-button--default
  .hpe-button__button:not(:disabled):hover {
  background: var(--hpe-web-button-link-neutral-hover-background);
  color: var(--hpe-web-button-link-neutral-hover-text-color);
}

.hpe-button--link-neutral.hpe-button--default .hpe-button__button:disabled {
  background: var(--hpe-web-button-link-neutral-disabled-rest-background);
  color: var(--hpe-web-button-link-neutral-disabled-rest-text-color);
}

.hpe-button--link-neutral.hpe-button--large .hpe-button__button {
  background: var(--hpe-web-button-link-neutral-rest-background);
  border: none;
  min-height: var(--hpe-web-button-link-large-min-height);
  padding: var(--hpe-web-button-link-large-padding-y)
    var(--hpe-web-button-link-large-padding-x);
  gap: var(--hpe-web-button-link-large-gap-x);
  font-size: var(--hpe-web-button-link-large-font-size);
  line-height: var(--hpe-web-button-link-large-line-height);
  border-radius: var(--hpe-web-button-link-large-border-radius);
  color: var(--hpe-web-button-link-neutral-rest-text-color);
}

.hpe-button--link-neutral.hpe-button--large
  .hpe-button__button:not(:disabled):hover {
  background: var(--hpe-web-button-link-neutral-hover-background);
  color: var(--hpe-web-button-link-neutral-hover-text-color);
}

.hpe-button--link-neutral.hpe-button--large .hpe-button__button:disabled {
  background: var(--hpe-web-button-link-neutral-disabled-rest-background);
  color: var(--hpe-web-button-link-neutral-disabled-rest-text-color);
}

/* ICON SIZING */
.hpe-button--primary.hpe-button--small .hpe-button__icon {
  width: var(--hpe-web-button-primary-small-icon-width);
  height: var(--hpe-web-multi-mode-button-primary-small-icon-height);
}

.hpe-button--primary.hpe-button--small .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-button-primary-small-icon-width);
}

.hpe-button--primary.hpe-button--default .hpe-button__icon {
  width: var(--hpe-web-button-primary-medium-icon-width);
  height: var(--hpe-web-multi-mode-button-primary-medium-icon-height);
}

.hpe-button--primary.hpe-button--default .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-button-primary-medium-icon-width);
}

.hpe-button--primary.hpe-button--large .hpe-button__icon {
  width: var(--hpe-web-button-primary-large-icon-width);
  height: var(--hpe-web-multi-mode-button-primary-large-icon-height);
}

.hpe-button--primary.hpe-button--large .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-button-primary-large-icon-width);
}

.hpe-button--secondary.hpe-button--small .hpe-button__icon {
  width: var(--hpe-web-multi-mode-button-secondary-small-icon-width);
  height: var(--hpe-web-button-secondary-small-icon-height);
}

.hpe-button--secondary.hpe-button--small .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-multi-mode-button-secondary-small-icon-width);
}

.hpe-button--secondary.hpe-button--default .hpe-button__icon {
  width: var(--hpe-web-multi-mode-button-secondary-medium-icon-width);
  height: var(--hpe-web-button-secondary-medium-icon-height);
}

.hpe-button--secondary.hpe-button--default .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-multi-mode-button-secondary-medium-icon-width);
}

.hpe-button--secondary.hpe-button--large .hpe-button__icon {
  width: var(--hpe-web-multi-mode-button-secondary-large-icon-width);
  height: var(--hpe-web-button-secondary-large-icon-height);
}

.hpe-button--secondary.hpe-button--large .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-multi-mode-button-secondary-large-icon-width);
}

.hpe-button--link-primary.hpe-button--small .hpe-button__icon,
.hpe-button--link-neutral.hpe-button--small .hpe-button__icon {
  width: var(--hpe-web-multi-mode-button-link-small-icon-width);
  height: var(--hpe-web-multi-mode-button-link-small-icon-height);
}

.hpe-button--link-primary.hpe-button--small .hpe-button__icon hpe-icon,
.hpe-button--link-neutral.hpe-button--small .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-multi-mode-button-link-small-icon-width);
}

.hpe-button--link-primary.hpe-button--default .hpe-button__icon,
.hpe-button--link-neutral.hpe-button--default .hpe-button__icon {
  width: var(--hpe-web-multi-mode-button-link-medium-icon-width);
  height: var(--hpe-web-multi-mode-button-link-medium-icon-height);
}

.hpe-button--link-primary.hpe-button--default .hpe-button__icon hpe-icon,
.hpe-button--link-neutral.hpe-button--default .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-multi-mode-button-link-medium-icon-width);
}

.hpe-button--link-primary.hpe-button--large .hpe-button__icon,
.hpe-button--link-neutral.hpe-button--large .hpe-button__icon {
  width: var(--hpe-web-multi-mode-button-link-large-icon-width);
  height: var(--hpe-web-multi-mode-button-link-large-icon-height);
}

.hpe-button--link-primary.hpe-button--large .hpe-button__icon hpe-icon,
.hpe-button--link-neutral.hpe-button--large .hpe-button__icon hpe-icon {
  --hpe-icon-size: var(--hpe-web-multi-mode-button-link-large-icon-width);
}