:root {
  /** COLOR SECTION **/
  /* Primary Color Kit */
  --theme-color-primary: var(--wft-primary-color);
  --theme-color-secondary: var(--wft-secondary-color);

  /* Secondary Color Kit */
  --theme-color-white: #ffffff;
  --theme-color-light-gray-1: #f9fafc;
  --theme-color-light-gray-2: #d9d9d9;
  --theme-color-light-gray-3: #bfbfbf;
  --theme-color-gray: #9d9d9d;
  --theme-color-dark-gray: #696969;
  --theme-color-black: #282828;

  /* Gradient Color Kit */
  --theme-color-primary-gradient: var(--wft-primary-color);
  --theme-color-secondary-gradient: var(--wft-secondary-color);

  /* Opacity Color Kit */
  --theme-color-primary-opacity: color-mix(
    in srgb,
    var(--wft-primary-color) 10%,
    transparent
  );
  --theme-color-secondary-opacity: color-mix(
    in srgb,
    var(--wft-secondary-color) 10%,
    transparent
  );

  /* Button Hover Color Kit */
  --theme-color-primary-hover: #000000;
  --theme-color-secondary-hover: #9b4fae;
  --theme-color-success-hover: #6e9358;
  --theme-color-info-hover: #587393;
  --theme-color-warning-hover: #c69e52;
  --theme-color-danger-hover: #b87373;

  /* Shadow Color Kit */
  --theme-color-shadow-1: var(--wft-primary-color);
  --theme-color-shadow-2: var(--wft-secondary-color);

  /* Toast Color Kit */
  --theme-color-success-toast: #07b53b;
  --theme-color-info-toast: #2d72a7;
  --theme-color-warning-toast: #f8c40e;
  --theme-color-danger-toast: #f17575;
  --theme-color-success-toast-bg: #e6f8eb;
  --theme-color-info-toast-bg: #eaf1f6;
  --theme-color-warning-toast-bg: #fef9e7;
  --theme-color-danger-toast-bg: #faeeef;

  /* Desktop Font Style */
  --theme-font-text-dt-xxl-size: 30px;
  --theme-font-text-dt-xxl-line-height: 45px;
  --theme-font-text-dt-xxl-weight: 500;
  --theme-font-text-dt-xl-size: 26px;
  --theme-font-text-dt-xl-line-height: 40px;
  --theme-font-text-dt-xl-weight: 500;
  --theme-font-text-dt-lg-size: 22px;
  --theme-font-text-dt-lg-line-height: 32px;
  --theme-font-text-dt-lg-weight: 500;
  --theme-font-text-dt-title-1-size: 30px;
  --theme-font-text-dt-title-1-line-height: 48px;
  --theme-font-text-dt-title-1-weight: 600;
  --theme-font-text-dt-title-2-size: 24px;
  --theme-font-text-dt-title-2-line-height: 38px;
  --theme-font-text-dt-title-2-weight: 600;
  --theme-font-text-dt-title-3-size: 20px;
  --theme-font-text-dt-title-3-line-height: 32px;
  --theme-font-text-dt-title-3-weight: 600;
  --theme-font-text-dt-title-4-size: 18px;
  --theme-font-text-dt-title-4-line-height: 30px;
  --theme-font-text-dt-title-4-weight: 600;
  --theme-font-text-dt-title-5-size: 16px;
  --theme-font-text-dt-title-5-line-height: 28px;
  --theme-font-text-dt-title-5-weight: 600;
  --theme-font-text-dt-title-6-size: 14px;
  --theme-font-text-dt-title-6-line-height: 26px;
  --theme-font-text-dt-title-6-weight: 600;
  --theme-font-text-dt-body-size: 16px;
  --theme-font-text-dt-body-line-height: 28px;
  --theme-font-text-dt-body-weight: 400;
  --theme-font-text-dt-body-small-size: 14px;
  --theme-font-text-dt-body-small-line-height: 26px;
  --theme-font-text-dt-body-small-weight: 400;
  --theme-font-text-dt-body-tiny-size: 12px;
  --theme-font-text-dt-body-tiny-line-height: 20px;
  --theme-font-text-dt-body-tiny-weight: 400;
  --theme-font-text-dt-link-size: 16px;
  --theme-font-text-dt-link-line-height: 28px;
  --theme-font-text-dt-link-weight: 400;
  --theme-font-text-dt-link-small-size: 14px;
  --theme-font-text-dt-link-small-line-height: 26px;
  --theme-font-text-dt-link-small-weight: 400;
  --theme-font-text-dt-button-size: 16px;
  --theme-font-text-dt-button-line-height: 28px;
  --theme-font-text-dt-button-weight: 400;

  /* Mobile Font Style */
  --theme-font-text-mb-xxl-size: 28px;
  --theme-font-text-mb-xxl-line-height: 42px;
  --theme-font-text-mb-xxl-weight: 500;
  --theme-font-text-mb-xl-size: 24px;
  --theme-font-text-mb-xl-line-height: 36px;
  --theme-font-text-mb-xl-weight: 500;
  --theme-font-text-mb-lg-size: 22px;
  --theme-font-text-mb-lg-line-height: 32px;
  --theme-font-text-mb-lg-weight: 500;
  --theme-font-text-mb-title-1-size: 24px;
  --theme-font-text-mb-title-1-line-height: 38px;
  --theme-font-text-mb-title-1-weight: 600;
  --theme-font-text-mb-title-2-size: 20px;
  --theme-font-text-mb-title-2-line-height: 32px;
  --theme-font-text-mb-title-2-weight: 600;
  --theme-font-text-mb-title-3-size: 18px;
  --theme-font-text-mb-title-3-line-height: 30px;
  --theme-font-text-mb-title-3-weight: 600;
  --theme-font-text-mb-title-4-size: 16px;
  --theme-font-text-mb-title-4-line-height: 28px;
  --theme-font-text-mb-title-4-weight: 600;
  --theme-font-text-mb-title-5-size: 14px;
  --theme-font-text-mb-title-5-line-height: 26px;
  --theme-font-text-mb-title-5-weight: 600;
  --theme-font-text-mb-title-6-size: 12px;
  --theme-font-text-mb-title-6-line-height: 20px;
  --theme-font-text-mb-title-6-weight: 600;
  --theme-font-text-mb-body-size: 16px;
  --theme-font-text-mb-body-line-height: 28px;
  --theme-font-text-mb-body-weight: 400;
  --theme-font-text-mb-body-small-size: 14px;
  --theme-font-text-mb-body-small-line-height: 26px;
  --theme-font-text-mb-body-small-weight: 400;
  --theme-font-text-mb-body-tiny-size: 12px;
  --theme-font-text-mb-body-tiny-line-height: 20px;
  --theme-font-text-mb-body-tiny-weight: 400;
  --theme-font-text-mb-link-size: 16px;
  --theme-font-text-mb-link-line-height: 28px;
  --theme-font-text-mb-link-weight: 400;
  --theme-font-text-mb-link-small-size: 14px;
  --theme-font-text-mb-link-small-line-height: 26px;
  --theme-font-text-mb-link-small-weight: 400;
  --theme-font-text-mb-button-size: 14px;
  --theme-font-text-mb-button-line-height: 28px;
  --theme-font-text-mb-button-weight: 400;
}

/** Container max-width cap for WebSphere theme **/
@media (min-width: 1024px) {
  .tw-container {
    max-width: 1024px !important;
  }
}