/* Generated by scripts/build-tokens.mjs from tokens/*.json. Do not edit by hand. */

:root {
  --button-base-radius: 8px;
  --button-base-border-width: 1px;
  --button-base-border-position: inside;
  --button-base-padding-x: 12px;
  --button-base-padding-y: 0px;
  --button-base-gap: 8px;
  --button-base-disabled-opacity: 0.3;
  --button-link-padding-x: 0px;
  --button-link-height: auto;
  --button-size-xs-height: 28px;
  --button-size-xs-icon-size: 14px;
  --button-size-xs-icon-only-size: 28px;
  --button-size-xs-typography: var(--typography-text-xs-medium);
  --button-size-sm-height: 32px;
  --button-size-sm-icon-size: 16px;
  --button-size-sm-icon-only-size: 32px;
  --button-size-sm-typography: var(--typography-text-sm-medium);
  --button-size-nm-height: 40px;
  --button-size-nm-icon-size: 18px;
  --button-size-nm-icon-only-size: 40px;
  --button-size-nm-typography: var(--typography-text-nm-medium);
  --button-size-md-height: 48px;
  --button-size-md-icon-size: 20px;
  --button-size-md-icon-only-size: 48px;
  --button-size-md-typography: var(--typography-text-md-medium);
  --button-size-lg-height: 56px;
  --button-size-lg-icon-size: 24px;
  --button-size-lg-icon-only-size: 56px;
  --button-size-lg-typography: var(--typography-text-lg-medium);
  --button-size-xlg-height: 64px;
  --button-size-xlg-icon-size: 28px;
  --button-size-xlg-icon-only-size: 64px;
  --button-size-xlg-typography: var(--typography-text-xlg-medium);
  --button-variant-solid-primary-default-normal-background: var(--color-brand-pr-normal);
  --button-variant-solid-primary-default-normal-label: var(--color-base-white);
  --button-variant-solid-primary-default-hover-background: var(--color-primary-300);
  --button-variant-solid-primary-default-hover-label: var(--color-base-white);
  --button-variant-solid-primary-default-active-background: var(--color-brand-pr-dark);
  --button-variant-solid-primary-default-active-label: var(--color-base-white);
  --button-variant-solid-primary-default-disabled-background: var(--color-brand-pr-normal);
  --button-variant-solid-primary-default-disabled-label: var(--color-base-white);
  --button-variant-solid-primary-default-disabled-opacity: 0.3;
  --button-variant-solid-primary-inverse-normal-background: var(--color-base-white);
  --button-variant-solid-primary-inverse-normal-label: var(--color-brand-pr-normal);
  --button-variant-solid-primary-inverse-hover-background: var(--color-base-white);
  --button-variant-solid-primary-inverse-hover-label: var(--color-primary-300);
  --button-variant-solid-primary-inverse-active-background: var(--color-base-white);
  --button-variant-solid-primary-inverse-active-label: var(--color-brand-pr-dark);
  --button-variant-solid-primary-inverse-disabled-background: var(--color-base-white);
  --button-variant-solid-primary-inverse-disabled-label: var(--color-brand-pr-normal);
  --button-variant-solid-primary-inverse-disabled-opacity: 0.3;
  --button-variant-solid-secondary-default-normal-background: var(--color-brand-se-normal);
  --button-variant-solid-secondary-default-normal-label: var(--color-base-white);
  --button-variant-solid-secondary-default-hover-background: var(--color-secondary-300);
  --button-variant-solid-secondary-default-hover-label: var(--color-base-white);
  --button-variant-solid-secondary-default-active-background: var(--color-brand-se-dark);
  --button-variant-solid-secondary-default-active-label: var(--color-base-white);
  --button-variant-solid-secondary-default-disabled-background: var(--color-brand-se-normal);
  --button-variant-solid-secondary-default-disabled-label: var(--color-base-white);
  --button-variant-solid-secondary-default-disabled-opacity: 0.3;
  --button-variant-solid-secondary-inverse-normal-background: var(--color-base-white);
  --button-variant-solid-secondary-inverse-normal-label: var(--color-brand-se-normal);
  --button-variant-solid-secondary-inverse-hover-background: var(--color-base-white);
  --button-variant-solid-secondary-inverse-hover-label: var(--color-secondary-300);
  --button-variant-solid-secondary-inverse-active-background: var(--color-base-white);
  --button-variant-solid-secondary-inverse-active-label: var(--color-brand-se-dark);
  --button-variant-solid-secondary-inverse-disabled-background: var(--color-base-white);
  --button-variant-solid-secondary-inverse-disabled-label: var(--color-brand-se-normal);
  --button-variant-solid-secondary-inverse-disabled-opacity: 0.3;
  --button-variant-solid-success-default-normal-background: var(--color-base-su-normal);
  --button-variant-solid-success-default-normal-label: var(--color-base-white);
  --button-variant-solid-success-default-hover-background: var(--color-success-300);
  --button-variant-solid-success-default-hover-label: var(--color-base-white);
  --button-variant-solid-success-default-active-background: var(--color-base-su-dark);
  --button-variant-solid-success-default-active-label: var(--color-base-white);
  --button-variant-solid-success-default-disabled-background: var(--color-base-su-normal);
  --button-variant-solid-success-default-disabled-label: var(--color-base-white);
  --button-variant-solid-success-default-disabled-opacity: 0.3;
  --button-variant-solid-success-inverse-normal-background: var(--color-base-white);
  --button-variant-solid-success-inverse-normal-label: var(--color-base-su-normal);
  --button-variant-solid-success-inverse-hover-background: var(--color-base-white);
  --button-variant-solid-success-inverse-hover-label: var(--color-success-300);
  --button-variant-solid-success-inverse-active-background: var(--color-base-white);
  --button-variant-solid-success-inverse-active-label: var(--color-base-su-dark);
  --button-variant-solid-success-inverse-disabled-background: var(--color-base-white);
  --button-variant-solid-success-inverse-disabled-label: var(--color-base-su-normal);
  --button-variant-solid-success-inverse-disabled-opacity: 0.3;
  --button-variant-solid-warning-default-normal-background: var(--color-base-wa-normal);
  --button-variant-solid-warning-default-normal-label: var(--color-base-white);
  --button-variant-solid-warning-default-hover-background: var(--color-warning-300);
  --button-variant-solid-warning-default-hover-label: var(--color-base-white);
  --button-variant-solid-warning-default-active-background: var(--color-base-wa-dark);
  --button-variant-solid-warning-default-active-label: var(--color-base-white);
  --button-variant-solid-warning-default-disabled-background: var(--color-base-wa-normal);
  --button-variant-solid-warning-default-disabled-label: var(--color-base-white);
  --button-variant-solid-warning-default-disabled-opacity: 0.3;
  --button-variant-solid-warning-inverse-normal-background: var(--color-base-white);
  --button-variant-solid-warning-inverse-normal-label: var(--color-base-wa-normal);
  --button-variant-solid-warning-inverse-hover-background: var(--color-base-white);
  --button-variant-solid-warning-inverse-hover-label: var(--color-warning-300);
  --button-variant-solid-warning-inverse-active-background: var(--color-base-white);
  --button-variant-solid-warning-inverse-active-label: var(--color-base-wa-dark);
  --button-variant-solid-warning-inverse-disabled-background: var(--color-base-white);
  --button-variant-solid-warning-inverse-disabled-label: var(--color-base-wa-normal);
  --button-variant-solid-warning-inverse-disabled-opacity: 0.3;
  --button-variant-solid-danger-default-normal-background: var(--color-base-da-normal);
  --button-variant-solid-danger-default-normal-label: var(--color-base-white);
  --button-variant-solid-danger-default-hover-background: var(--color-danger-300);
  --button-variant-solid-danger-default-hover-label: var(--color-base-white);
  --button-variant-solid-danger-default-active-background: var(--color-base-da-dark);
  --button-variant-solid-danger-default-active-label: var(--color-base-white);
  --button-variant-solid-danger-default-disabled-background: var(--color-base-da-normal);
  --button-variant-solid-danger-default-disabled-label: var(--color-base-white);
  --button-variant-solid-danger-default-disabled-opacity: 0.3;
  --button-variant-solid-danger-inverse-normal-background: var(--color-base-white);
  --button-variant-solid-danger-inverse-normal-label: var(--color-base-da-normal);
  --button-variant-solid-danger-inverse-hover-background: var(--color-base-white);
  --button-variant-solid-danger-inverse-hover-label: var(--color-danger-300);
  --button-variant-solid-danger-inverse-active-background: var(--color-base-white);
  --button-variant-solid-danger-inverse-active-label: var(--color-base-da-dark);
  --button-variant-solid-danger-inverse-disabled-background: var(--color-base-white);
  --button-variant-solid-danger-inverse-disabled-label: var(--color-base-da-normal);
  --button-variant-solid-danger-inverse-disabled-opacity: 0.3;
  --button-variant-solid-gray-default-normal-background: var(--color-gray-25);
  --button-variant-solid-gray-default-normal-label: var(--color-base-gray-dark);
  --button-variant-solid-gray-default-hover-background: var(--color-gray-25);
  --button-variant-solid-gray-default-hover-label: var(--color-base-gray-normal);
  --button-variant-solid-gray-default-active-background: var(--color-base-gray-dark);
  --button-variant-solid-gray-default-active-label: var(--color-base-white);
  --button-variant-solid-gray-default-disabled-background: var(--color-gray-25);
  --button-variant-solid-gray-default-disabled-label: var(--color-base-gray-dark);
  --button-variant-solid-gray-default-disabled-opacity: 0.3;
  --button-variant-solid-gray-inverse-normal-background: var(--color-base-gray-dark);
  --button-variant-solid-gray-inverse-normal-label: var(--color-gray-25);
  --button-variant-solid-gray-inverse-hover-background: var(--color-base-gray-normal);
  --button-variant-solid-gray-inverse-hover-label: var(--color-gray-25);
  --button-variant-solid-gray-inverse-active-background: var(--color-base-white);
  --button-variant-solid-gray-inverse-active-label: var(--color-base-gray-dark);
  --button-variant-solid-gray-inverse-disabled-background: var(--color-base-gray-dark);
  --button-variant-solid-gray-inverse-disabled-label: var(--color-gray-25);
  --button-variant-solid-gray-inverse-disabled-opacity: 0.3;
  --button-variant-outline-primary-default-normal-border: var(--color-brand-pr-normal);
  --button-variant-outline-primary-default-normal-label: var(--color-brand-pr-normal);
  --button-variant-outline-primary-default-hover-border: var(--color-primary-300);
  --button-variant-outline-primary-default-hover-label: var(--color-primary-300);
  --button-variant-outline-primary-default-active-border: var(--color-brand-pr-dark);
  --button-variant-outline-primary-default-active-label: var(--color-brand-pr-dark);
  --button-variant-outline-primary-default-disabled-border: var(--color-brand-pr-normal);
  --button-variant-outline-primary-default-disabled-label: var(--color-brand-pr-normal);
  --button-variant-outline-primary-default-disabled-opacity: 0.3;
  --button-variant-outline-primary-inverse-normal-border: var(--color-base-white);
  --button-variant-outline-primary-inverse-normal-label: var(--color-base-white);
  --button-variant-outline-primary-inverse-hover-border: var(--color-base-white);
  --button-variant-outline-primary-inverse-hover-label: var(--color-base-white);
  --button-variant-outline-primary-inverse-active-border: var(--color-base-white);
  --button-variant-outline-primary-inverse-active-label: var(--color-base-white);
  --button-variant-outline-primary-inverse-disabled-border: var(--color-base-white);
  --button-variant-outline-primary-inverse-disabled-label: var(--color-base-white);
  --button-variant-outline-primary-inverse-disabled-opacity: 0.3;
  --button-variant-outline-secondary-default-normal-border: var(--color-brand-se-normal);
  --button-variant-outline-secondary-default-normal-label: var(--color-brand-se-normal);
  --button-variant-outline-secondary-default-hover-border: var(--color-secondary-300);
  --button-variant-outline-secondary-default-hover-label: var(--color-secondary-300);
  --button-variant-outline-secondary-default-active-border: var(--color-brand-se-dark);
  --button-variant-outline-secondary-default-active-label: var(--color-brand-se-dark);
  --button-variant-outline-secondary-default-disabled-border: var(--color-brand-se-normal);
  --button-variant-outline-secondary-default-disabled-label: var(--color-brand-se-normal);
  --button-variant-outline-secondary-default-disabled-opacity: 0.3;
  --button-variant-outline-secondary-inverse-normal-border: var(--color-base-white);
  --button-variant-outline-secondary-inverse-normal-label: var(--color-base-white);
  --button-variant-outline-secondary-inverse-hover-border: var(--color-base-white);
  --button-variant-outline-secondary-inverse-hover-label: var(--color-base-white);
  --button-variant-outline-secondary-inverse-active-border: var(--color-base-white);
  --button-variant-outline-secondary-inverse-active-label: var(--color-base-white);
  --button-variant-outline-secondary-inverse-disabled-border: var(--color-base-white);
  --button-variant-outline-secondary-inverse-disabled-label: var(--color-base-white);
  --button-variant-outline-secondary-inverse-disabled-opacity: 0.3;
  --button-variant-outline-success-default-normal-border: var(--color-base-su-normal);
  --button-variant-outline-success-default-normal-label: var(--color-base-su-normal);
  --button-variant-outline-success-default-hover-border: var(--color-success-300);
  --button-variant-outline-success-default-hover-label: var(--color-success-300);
  --button-variant-outline-success-default-active-border: var(--color-base-su-dark);
  --button-variant-outline-success-default-active-label: var(--color-base-su-dark);
  --button-variant-outline-success-default-disabled-border: var(--color-base-su-normal);
  --button-variant-outline-success-default-disabled-label: var(--color-base-su-normal);
  --button-variant-outline-success-default-disabled-opacity: 0.3;
  --button-variant-outline-success-inverse-normal-border: var(--color-base-white);
  --button-variant-outline-success-inverse-normal-label: var(--color-base-white);
  --button-variant-outline-success-inverse-hover-border: var(--color-base-white);
  --button-variant-outline-success-inverse-hover-label: var(--color-base-white);
  --button-variant-outline-success-inverse-active-border: var(--color-base-white);
  --button-variant-outline-success-inverse-active-label: var(--color-base-white);
  --button-variant-outline-success-inverse-disabled-border: var(--color-base-white);
  --button-variant-outline-success-inverse-disabled-label: var(--color-base-white);
  --button-variant-outline-success-inverse-disabled-opacity: 0.3;
  --button-variant-outline-warning-default-normal-border: var(--color-base-wa-normal);
  --button-variant-outline-warning-default-normal-label: var(--color-base-wa-normal);
  --button-variant-outline-warning-default-hover-border: var(--color-warning-300);
  --button-variant-outline-warning-default-hover-label: var(--color-warning-300);
  --button-variant-outline-warning-default-active-border: var(--color-base-wa-dark);
  --button-variant-outline-warning-default-active-label: var(--color-base-wa-dark);
  --button-variant-outline-warning-default-disabled-border: var(--color-base-wa-normal);
  --button-variant-outline-warning-default-disabled-label: var(--color-base-wa-normal);
  --button-variant-outline-warning-default-disabled-opacity: 0.3;
  --button-variant-outline-warning-inverse-normal-border: var(--color-base-white);
  --button-variant-outline-warning-inverse-normal-label: var(--color-base-white);
  --button-variant-outline-warning-inverse-hover-border: var(--color-base-white);
  --button-variant-outline-warning-inverse-hover-label: var(--color-base-white);
  --button-variant-outline-warning-inverse-active-border: var(--color-base-white);
  --button-variant-outline-warning-inverse-active-label: var(--color-base-white);
  --button-variant-outline-warning-inverse-disabled-border: var(--color-base-white);
  --button-variant-outline-warning-inverse-disabled-label: var(--color-base-white);
  --button-variant-outline-warning-inverse-disabled-opacity: 0.3;
  --button-variant-outline-danger-default-normal-border: var(--color-base-da-normal);
  --button-variant-outline-danger-default-normal-label: var(--color-base-da-normal);
  --button-variant-outline-danger-default-hover-border: var(--color-danger-300);
  --button-variant-outline-danger-default-hover-label: var(--color-danger-300);
  --button-variant-outline-danger-default-active-border: var(--color-base-da-dark);
  --button-variant-outline-danger-default-active-label: var(--color-base-da-dark);
  --button-variant-outline-danger-default-disabled-border: var(--color-base-da-normal);
  --button-variant-outline-danger-default-disabled-label: var(--color-base-da-normal);
  --button-variant-outline-danger-default-disabled-opacity: 0.3;
  --button-variant-outline-danger-inverse-normal-border: var(--color-base-white);
  --button-variant-outline-danger-inverse-normal-label: var(--color-base-white);
  --button-variant-outline-danger-inverse-hover-border: var(--color-base-white);
  --button-variant-outline-danger-inverse-hover-label: var(--color-base-white);
  --button-variant-outline-danger-inverse-active-border: var(--color-base-white);
  --button-variant-outline-danger-inverse-active-label: var(--color-base-white);
  --button-variant-outline-danger-inverse-disabled-border: var(--color-base-white);
  --button-variant-outline-danger-inverse-disabled-label: var(--color-base-white);
  --button-variant-outline-danger-inverse-disabled-opacity: 0.3;
  --button-variant-outline-gray-default-normal-border: var(--color-border-dark);
  --button-variant-outline-gray-default-normal-label: var(--color-base-gray-dark);
  --button-variant-outline-gray-default-hover-border: var(--color-base-gray-normal);
  --button-variant-outline-gray-default-hover-label: var(--color-base-gray-normal);
  --button-variant-outline-gray-default-active-border: var(--color-base-gray-dark);
  --button-variant-outline-gray-default-active-label: var(--color-base-gray-dark);
  --button-variant-outline-gray-default-disabled-border: var(--color-border-dark);
  --button-variant-outline-gray-default-disabled-label: var(--color-base-gray-dark);
  --button-variant-outline-gray-default-disabled-opacity: 0.3;
  --button-variant-outline-gray-inverse-normal-border: var(--color-base-white);
  --button-variant-outline-gray-inverse-normal-label: var(--color-base-white);
  --button-variant-outline-gray-inverse-hover-border: var(--color-base-white);
  --button-variant-outline-gray-inverse-hover-label: var(--color-base-white);
  --button-variant-outline-gray-inverse-active-border: var(--color-base-white);
  --button-variant-outline-gray-inverse-active-label: var(--color-base-white);
  --button-variant-outline-gray-inverse-disabled-border: var(--color-base-white);
  --button-variant-outline-gray-inverse-disabled-label: var(--color-base-white);
  --button-variant-outline-gray-inverse-disabled-opacity: 0.3;
  --button-variant-solid-light-primary-default-normal-background: var(--color-primary-25);
  --button-variant-solid-light-primary-default-normal-label: var(--color-brand-pr-normal);
  --button-variant-solid-light-primary-default-hover-background: var(--color-primary-25);
  --button-variant-solid-light-primary-default-hover-label: var(--color-primary-300);
  --button-variant-solid-light-primary-default-active-background: var(--color-primary-25);
  --button-variant-solid-light-primary-default-active-border: var(--color-brand-pr-dark);
  --button-variant-solid-light-primary-default-active-label: var(--color-brand-pr-dark);
  --button-variant-solid-light-primary-default-disabled-background: var(--color-primary-25);
  --button-variant-solid-light-primary-default-disabled-label: var(--color-brand-pr-normal);
  --button-variant-solid-light-primary-default-disabled-opacity: 0.3;
  --button-variant-solid-light-primary-inverse-normal-background: var(--color-brand-pr-normal);
  --button-variant-solid-light-primary-inverse-normal-label: var(--color-primary-25);
  --button-variant-solid-light-primary-inverse-hover-background: var(--color-primary-300);
  --button-variant-solid-light-primary-inverse-hover-label: var(--color-primary-25);
  --button-variant-solid-light-primary-inverse-active-background: var(--color-brand-pr-dark);
  --button-variant-solid-light-primary-inverse-active-border: var(--color-primary-25);
  --button-variant-solid-light-primary-inverse-active-label: var(--color-primary-25);
  --button-variant-solid-light-primary-inverse-disabled-background: var(--color-brand-pr-normal);
  --button-variant-solid-light-primary-inverse-disabled-label: var(--color-primary-25);
  --button-variant-solid-light-primary-inverse-disabled-opacity: 0.3;
  --button-variant-solid-light-secondary-default-normal-background: var(--color-secondary-25);
  --button-variant-solid-light-secondary-default-normal-label: var(--color-brand-se-normal);
  --button-variant-solid-light-secondary-default-hover-background: var(--color-secondary-25);
  --button-variant-solid-light-secondary-default-hover-label: var(--color-secondary-300);
  --button-variant-solid-light-secondary-default-active-background: var(--color-secondary-25);
  --button-variant-solid-light-secondary-default-active-border: var(--color-brand-se-dark);
  --button-variant-solid-light-secondary-default-active-label: var(--color-brand-se-dark);
  --button-variant-solid-light-secondary-default-disabled-background: var(--color-secondary-25);
  --button-variant-solid-light-secondary-default-disabled-label: var(--color-brand-se-normal);
  --button-variant-solid-light-secondary-default-disabled-opacity: 0.3;
  --button-variant-solid-light-secondary-inverse-normal-background: var(--color-brand-se-normal);
  --button-variant-solid-light-secondary-inverse-normal-label: var(--color-secondary-25);
  --button-variant-solid-light-secondary-inverse-hover-background: var(--color-secondary-300);
  --button-variant-solid-light-secondary-inverse-hover-label: var(--color-secondary-25);
  --button-variant-solid-light-secondary-inverse-active-background: var(--color-brand-se-dark);
  --button-variant-solid-light-secondary-inverse-active-border: var(--color-secondary-25);
  --button-variant-solid-light-secondary-inverse-active-label: var(--color-secondary-25);
  --button-variant-solid-light-secondary-inverse-disabled-background: var(--color-brand-se-normal);
  --button-variant-solid-light-secondary-inverse-disabled-label: var(--color-secondary-25);
  --button-variant-solid-light-secondary-inverse-disabled-opacity: 0.3;
  --button-variant-solid-light-success-default-normal-background: var(--color-success-25);
  --button-variant-solid-light-success-default-normal-label: var(--color-base-su-normal);
  --button-variant-solid-light-success-default-hover-background: var(--color-success-25);
  --button-variant-solid-light-success-default-hover-label: var(--color-success-300);
  --button-variant-solid-light-success-default-active-background: var(--color-success-25);
  --button-variant-solid-light-success-default-active-border: var(--color-base-su-dark);
  --button-variant-solid-light-success-default-active-label: var(--color-base-su-dark);
  --button-variant-solid-light-success-default-disabled-background: var(--color-success-25);
  --button-variant-solid-light-success-default-disabled-label: var(--color-base-su-normal);
  --button-variant-solid-light-success-default-disabled-opacity: 0.3;
  --button-variant-solid-light-success-inverse-normal-background: var(--color-base-su-normal);
  --button-variant-solid-light-success-inverse-normal-label: var(--color-success-25);
  --button-variant-solid-light-success-inverse-hover-background: var(--color-success-300);
  --button-variant-solid-light-success-inverse-hover-label: var(--color-success-25);
  --button-variant-solid-light-success-inverse-active-background: var(--color-base-su-dark);
  --button-variant-solid-light-success-inverse-active-border: var(--color-success-25);
  --button-variant-solid-light-success-inverse-active-label: var(--color-success-25);
  --button-variant-solid-light-success-inverse-disabled-background: var(--color-base-su-normal);
  --button-variant-solid-light-success-inverse-disabled-label: var(--color-success-25);
  --button-variant-solid-light-success-inverse-disabled-opacity: 0.3;
  --button-variant-solid-light-warning-default-normal-background: var(--color-warning-25);
  --button-variant-solid-light-warning-default-normal-label: var(--color-base-wa-normal);
  --button-variant-solid-light-warning-default-hover-background: var(--color-warning-25);
  --button-variant-solid-light-warning-default-hover-label: var(--color-warning-300);
  --button-variant-solid-light-warning-default-active-background: var(--color-warning-25);
  --button-variant-solid-light-warning-default-active-border: var(--color-base-wa-dark);
  --button-variant-solid-light-warning-default-active-label: var(--color-base-wa-dark);
  --button-variant-solid-light-warning-default-disabled-background: var(--color-warning-25);
  --button-variant-solid-light-warning-default-disabled-label: var(--color-base-wa-normal);
  --button-variant-solid-light-warning-default-disabled-opacity: 0.3;
  --button-variant-solid-light-warning-inverse-normal-background: var(--color-base-wa-normal);
  --button-variant-solid-light-warning-inverse-normal-label: var(--color-warning-25);
  --button-variant-solid-light-warning-inverse-hover-background: var(--color-warning-300);
  --button-variant-solid-light-warning-inverse-hover-label: var(--color-warning-25);
  --button-variant-solid-light-warning-inverse-active-background: var(--color-base-wa-dark);
  --button-variant-solid-light-warning-inverse-active-border: var(--color-warning-25);
  --button-variant-solid-light-warning-inverse-active-label: var(--color-warning-25);
  --button-variant-solid-light-warning-inverse-disabled-background: var(--color-base-wa-normal);
  --button-variant-solid-light-warning-inverse-disabled-label: var(--color-warning-25);
  --button-variant-solid-light-warning-inverse-disabled-opacity: 0.3;
  --button-variant-solid-light-danger-default-normal-background: var(--color-danger-25);
  --button-variant-solid-light-danger-default-normal-label: var(--color-base-da-normal);
  --button-variant-solid-light-danger-default-hover-background: var(--color-danger-25);
  --button-variant-solid-light-danger-default-hover-label: var(--color-danger-300);
  --button-variant-solid-light-danger-default-active-background: var(--color-danger-25);
  --button-variant-solid-light-danger-default-active-border: var(--color-base-da-dark);
  --button-variant-solid-light-danger-default-active-label: var(--color-base-da-dark);
  --button-variant-solid-light-danger-default-disabled-background: var(--color-danger-25);
  --button-variant-solid-light-danger-default-disabled-label: var(--color-base-da-normal);
  --button-variant-solid-light-danger-default-disabled-opacity: 0.3;
  --button-variant-solid-light-danger-inverse-normal-background: var(--color-base-da-normal);
  --button-variant-solid-light-danger-inverse-normal-label: var(--color-danger-25);
  --button-variant-solid-light-danger-inverse-hover-background: var(--color-danger-300);
  --button-variant-solid-light-danger-inverse-hover-label: var(--color-danger-25);
  --button-variant-solid-light-danger-inverse-active-background: var(--color-base-da-dark);
  --button-variant-solid-light-danger-inverse-active-border: var(--color-danger-25);
  --button-variant-solid-light-danger-inverse-active-label: var(--color-danger-25);
  --button-variant-solid-light-danger-inverse-disabled-background: var(--color-base-da-normal);
  --button-variant-solid-light-danger-inverse-disabled-label: var(--color-danger-25);
  --button-variant-solid-light-danger-inverse-disabled-opacity: 0.3;
  --button-variant-solid-light-gray-default-normal-background: var(--color-gray-25);
  --button-variant-solid-light-gray-default-normal-label: var(--color-base-gray-dark);
  --button-variant-solid-light-gray-default-hover-background: var(--color-gray-25);
  --button-variant-solid-light-gray-default-hover-label: var(--color-base-gray-normal);
  --button-variant-solid-light-gray-default-active-background: var(--color-gray-25);
  --button-variant-solid-light-gray-default-active-border: var(--color-base-gray-dark);
  --button-variant-solid-light-gray-default-active-label: var(--color-base-gray-dark);
  --button-variant-solid-light-gray-default-disabled-background: var(--color-gray-25);
  --button-variant-solid-light-gray-default-disabled-label: var(--color-base-gray-dark);
  --button-variant-solid-light-gray-default-disabled-opacity: 0.3;
  --button-variant-solid-light-gray-inverse-normal-background: var(--color-base-gray-dark);
  --button-variant-solid-light-gray-inverse-normal-label: var(--color-gray-25);
  --button-variant-solid-light-gray-inverse-hover-background: var(--color-base-gray-normal);
  --button-variant-solid-light-gray-inverse-hover-label: var(--color-gray-25);
  --button-variant-solid-light-gray-inverse-active-background: var(--color-base-gray-dark);
  --button-variant-solid-light-gray-inverse-active-border: var(--color-gray-25);
  --button-variant-solid-light-gray-inverse-active-label: var(--color-gray-25);
  --button-variant-solid-light-gray-inverse-disabled-background: var(--color-base-gray-dark);
  --button-variant-solid-light-gray-inverse-disabled-label: var(--color-gray-25);
  --button-variant-solid-light-gray-inverse-disabled-opacity: 0.3;
  --button-variant-transparent-primary-default-normal-label: var(--color-brand-pr-normal);
  --button-variant-transparent-primary-default-hover-label: var(--color-primary-300);
  --button-variant-transparent-primary-default-active-background: var(--color-primary-50);
  --button-variant-transparent-primary-default-active-label: var(--color-brand-pr-dark);
  --button-variant-transparent-primary-default-disabled-label: var(--color-brand-pr-normal);
  --button-variant-transparent-primary-default-disabled-opacity: 0.3;
  --button-variant-transparent-primary-inverse-normal-label: var(--color-base-white);
  --button-variant-transparent-primary-inverse-hover-label: var(--color-base-white);
  --button-variant-transparent-primary-inverse-active-background: var(--color-brand-pr-dark);
  --button-variant-transparent-primary-inverse-active-label: var(--color-primary-50);
  --button-variant-transparent-primary-inverse-disabled-label: var(--color-base-white);
  --button-variant-transparent-primary-inverse-disabled-opacity: 0.3;
  --button-variant-transparent-secondary-default-normal-label: var(--color-brand-se-normal);
  --button-variant-transparent-secondary-default-hover-label: var(--color-secondary-300);
  --button-variant-transparent-secondary-default-active-background: var(--color-secondary-50);
  --button-variant-transparent-secondary-default-active-label: var(--color-brand-se-dark);
  --button-variant-transparent-secondary-default-disabled-label: var(--color-brand-se-normal);
  --button-variant-transparent-secondary-default-disabled-opacity: 0.3;
  --button-variant-transparent-secondary-inverse-normal-label: var(--color-base-white);
  --button-variant-transparent-secondary-inverse-hover-label: var(--color-base-white);
  --button-variant-transparent-secondary-inverse-active-background: var(--color-brand-se-dark);
  --button-variant-transparent-secondary-inverse-active-label: var(--color-secondary-50);
  --button-variant-transparent-secondary-inverse-disabled-label: var(--color-base-white);
  --button-variant-transparent-secondary-inverse-disabled-opacity: 0.3;
  --button-variant-transparent-success-default-normal-label: var(--color-base-su-normal);
  --button-variant-transparent-success-default-hover-label: var(--color-success-300);
  --button-variant-transparent-success-default-active-background: var(--color-success-50);
  --button-variant-transparent-success-default-active-label: var(--color-base-su-dark);
  --button-variant-transparent-success-default-disabled-label: var(--color-base-su-normal);
  --button-variant-transparent-success-default-disabled-opacity: 0.3;
  --button-variant-transparent-success-inverse-normal-label: var(--color-base-white);
  --button-variant-transparent-success-inverse-hover-label: var(--color-base-white);
  --button-variant-transparent-success-inverse-active-background: var(--color-base-su-dark);
  --button-variant-transparent-success-inverse-active-label: var(--color-success-50);
  --button-variant-transparent-success-inverse-disabled-label: var(--color-base-white);
  --button-variant-transparent-success-inverse-disabled-opacity: 0.3;
  --button-variant-transparent-warning-default-normal-label: var(--color-base-wa-normal);
  --button-variant-transparent-warning-default-hover-label: var(--color-warning-300);
  --button-variant-transparent-warning-default-active-background: var(--color-warning-50);
  --button-variant-transparent-warning-default-active-label: var(--color-base-wa-dark);
  --button-variant-transparent-warning-default-disabled-label: var(--color-base-wa-normal);
  --button-variant-transparent-warning-default-disabled-opacity: 0.3;
  --button-variant-transparent-warning-inverse-normal-label: var(--color-base-white);
  --button-variant-transparent-warning-inverse-hover-label: var(--color-base-white);
  --button-variant-transparent-warning-inverse-active-background: var(--color-base-wa-dark);
  --button-variant-transparent-warning-inverse-active-label: var(--color-warning-50);
  --button-variant-transparent-warning-inverse-disabled-label: var(--color-base-white);
  --button-variant-transparent-warning-inverse-disabled-opacity: 0.3;
  --button-variant-transparent-danger-default-normal-label: var(--color-base-da-normal);
  --button-variant-transparent-danger-default-hover-label: var(--color-danger-300);
  --button-variant-transparent-danger-default-active-background: var(--color-danger-50);
  --button-variant-transparent-danger-default-active-label: var(--color-base-da-dark);
  --button-variant-transparent-danger-default-disabled-label: var(--color-base-da-normal);
  --button-variant-transparent-danger-default-disabled-opacity: 0.3;
  --button-variant-transparent-danger-inverse-normal-label: var(--color-base-white);
  --button-variant-transparent-danger-inverse-hover-label: var(--color-base-white);
  --button-variant-transparent-danger-inverse-active-background: var(--color-base-da-dark);
  --button-variant-transparent-danger-inverse-active-label: var(--color-danger-50);
  --button-variant-transparent-danger-inverse-disabled-label: var(--color-base-white);
  --button-variant-transparent-danger-inverse-disabled-opacity: 0.3;
  --button-variant-transparent-gray-default-normal-label: var(--color-base-gray-dark);
  --button-variant-transparent-gray-default-hover-label: var(--color-base-gray-normal);
  --button-variant-transparent-gray-default-active-background: var(--color-gray-50);
  --button-variant-transparent-gray-default-active-label: var(--color-base-gray-dark);
  --button-variant-transparent-gray-default-disabled-label: var(--color-base-gray-dark);
  --button-variant-transparent-gray-default-disabled-opacity: 0.3;
  --button-variant-transparent-gray-inverse-normal-label: var(--color-base-white);
  --button-variant-transparent-gray-inverse-hover-label: var(--color-base-white);
  --button-variant-transparent-gray-inverse-active-background: var(--color-base-gray-dark);
  --button-variant-transparent-gray-inverse-active-label: var(--color-gray-50);
  --button-variant-transparent-gray-inverse-disabled-label: var(--color-base-white);
  --button-variant-transparent-gray-inverse-disabled-opacity: 0.3;
  --button-variant-link-primary-default-normal-label: var(--color-brand-pr-normal);
  --button-variant-link-primary-default-hover-label: var(--color-primary-300);
  --button-variant-link-primary-default-active-label: var(--color-brand-pr-dark);
  --button-variant-link-primary-default-disabled-label: var(--color-brand-pr-normal);
  --button-variant-link-primary-default-disabled-opacity: 0.3;
  --button-variant-link-primary-inverse-normal-label: var(--color-base-white);
  --button-variant-link-primary-inverse-hover-label: var(--color-base-white);
  --button-variant-link-primary-inverse-active-label: var(--color-base-white);
  --button-variant-link-primary-inverse-disabled-label: var(--color-base-white);
  --button-variant-link-primary-inverse-disabled-opacity: 0.3;
  --button-variant-link-secondary-default-normal-label: var(--color-brand-se-normal);
  --button-variant-link-secondary-default-hover-label: var(--color-secondary-300);
  --button-variant-link-secondary-default-active-label: var(--color-brand-se-dark);
  --button-variant-link-secondary-default-disabled-label: var(--color-brand-se-normal);
  --button-variant-link-secondary-default-disabled-opacity: 0.3;
  --button-variant-link-secondary-inverse-normal-label: var(--color-base-white);
  --button-variant-link-secondary-inverse-hover-label: var(--color-base-white);
  --button-variant-link-secondary-inverse-active-label: var(--color-base-white);
  --button-variant-link-secondary-inverse-disabled-label: var(--color-base-white);
  --button-variant-link-secondary-inverse-disabled-opacity: 0.3;
  --button-variant-link-success-default-normal-label: var(--color-base-su-normal);
  --button-variant-link-success-default-hover-label: var(--color-success-300);
  --button-variant-link-success-default-active-label: var(--color-base-su-dark);
  --button-variant-link-success-default-disabled-label: var(--color-base-su-normal);
  --button-variant-link-success-default-disabled-opacity: 0.3;
  --button-variant-link-success-inverse-normal-label: var(--color-base-white);
  --button-variant-link-success-inverse-hover-label: var(--color-base-white);
  --button-variant-link-success-inverse-active-label: var(--color-base-white);
  --button-variant-link-success-inverse-disabled-label: var(--color-base-white);
  --button-variant-link-success-inverse-disabled-opacity: 0.3;
  --button-variant-link-warning-default-normal-label: var(--color-base-wa-normal);
  --button-variant-link-warning-default-hover-label: var(--color-warning-300);
  --button-variant-link-warning-default-active-label: var(--color-base-wa-dark);
  --button-variant-link-warning-default-disabled-label: var(--color-base-wa-normal);
  --button-variant-link-warning-default-disabled-opacity: 0.3;
  --button-variant-link-warning-inverse-normal-label: var(--color-base-white);
  --button-variant-link-warning-inverse-hover-label: var(--color-base-white);
  --button-variant-link-warning-inverse-active-label: var(--color-base-white);
  --button-variant-link-warning-inverse-disabled-label: var(--color-base-white);
  --button-variant-link-warning-inverse-disabled-opacity: 0.3;
  --button-variant-link-danger-default-normal-label: var(--color-base-da-normal);
  --button-variant-link-danger-default-hover-label: var(--color-danger-300);
  --button-variant-link-danger-default-active-label: var(--color-base-da-dark);
  --button-variant-link-danger-default-disabled-label: var(--color-base-da-normal);
  --button-variant-link-danger-default-disabled-opacity: 0.3;
  --button-variant-link-danger-inverse-normal-label: var(--color-base-white);
  --button-variant-link-danger-inverse-hover-label: var(--color-base-white);
  --button-variant-link-danger-inverse-active-label: var(--color-base-white);
  --button-variant-link-danger-inverse-disabled-label: var(--color-base-white);
  --button-variant-link-danger-inverse-disabled-opacity: 0.3;
  --button-variant-link-gray-default-normal-label: var(--color-base-gray-dark);
  --button-variant-link-gray-default-hover-label: var(--color-base-gray-normal);
  --button-variant-link-gray-default-active-label: var(--color-base-gray-dark);
  --button-variant-link-gray-default-disabled-label: var(--color-base-gray-dark);
  --button-variant-link-gray-default-disabled-opacity: 0.3;
  --button-variant-link-gray-inverse-normal-label: var(--color-base-white);
  --button-variant-link-gray-inverse-hover-label: var(--color-base-white);
  --button-variant-link-gray-inverse-active-label: var(--color-base-white);
  --button-variant-link-gray-inverse-disabled-label: var(--color-base-white);
  --button-variant-link-gray-inverse-disabled-opacity: 0.3;
  --badge-base-radius: 999px;
  --badge-base-label-color: var(--color-base-white);
  --badge-base-typography: var(--typography-text-xs-bold);
  --badge-base-border-width: 1px;
  --badge-base-border-position: outside;
  --badge-base-border-color: var(--color-base-white);
  --badge-size-large-height: 21px;
  --badge-size-large-min-width: 21px;
  --badge-size-large-padding-x: 4px;
  --badge-size-large-padding-y: 1px;
  --badge-size-large-line-height: 19px;
  --badge-size-large-dot-size: 6px;
  --badge-size-medium-height: 16px;
  --badge-size-medium-min-width: 16px;
  --badge-size-medium-padding-x: 2px;
  --badge-size-medium-padding-y: 1px;
  --badge-size-medium-line-height: 14px;
  --badge-size-medium-dot-size: 6px;
  --badge-color-primary: var(--gradient-pr-light);
  --badge-color-secondary: var(--gradient-se-light);
  --badge-color-success: var(--gradient-su-light);
  --badge-color-warning: var(--gradient-wa-light);
  --badge-color-danger: var(--gradient-da-light);
  --badge-color-gray: var(--gradient-gray-light);
  --status-personal-base-gap: 4px;
  --status-personal-base-icon-size: 14px;
  --status-personal-base-icon-style: solid;
  --status-personal-base-typography: var(--typography-text-sm-medium);
  --status-personal-done-icon: check-circle;
  --status-personal-done-color: var(--color-base-su-normal);
  --status-personal-error-icon: warning-circle;
  --status-personal-error-color: var(--color-base-da-normal);
  --status-personal-warning-icon: time-circle;
  --status-personal-warning-color: var(--color-base-wa-normal);
  --status-personal-normal-color: var(--color-brand-pr-normal);
  --badge-shipping-base-height: 16px;
  --badge-shipping-base-padding-x: 3px;
  --badge-shipping-base-gap: 1px;
  --badge-shipping-base-radius: 4px;
  --badge-shipping-base-border-width: 0.5px;
  --badge-shipping-base-border-position: inside;
  --badge-shipping-base-icon-size: 12px;
  --badge-shipping-base-icon-style: solid;
  --badge-shipping-base-typography: var(--typography-text-2xs-bold);
  --badge-shipping-base-line-height: 16px;
  --badge-shipping-setup-label: Lắp đặt;
  --badge-shipping-setup-icon: tool;
  --badge-shipping-setup-icon-color: var(--gradient-gray-light);
  --badge-shipping-setup-label-color: var(--color-gray-500);
  --badge-shipping-setup-border-color: var(--color-gray-300);
  --badge-shipping-setup-bg: var(--color-gray-200);
  --badge-shipping-setup-bg-opacity: 0.16;
  --badge-shipping-cheap-label: Rẻ nhất;
  --badge-shipping-cheap-icon: dollar-coin;
  --badge-shipping-cheap-icon-color: var(--gradient-wa-light);
  --badge-shipping-cheap-label-color: var(--color-base-wa-normal);
  --badge-shipping-cheap-border-color: var(--color-orange-dark-300);
  --badge-shipping-cheap-bg: var(--gradient-wa-light);
  --badge-shipping-cheap-bg-opacity: 0.16;
  --badge-shipping-new-label: Mới;
  --badge-shipping-new-icon: star;
  --badge-shipping-new-icon-color: var(--gradient-se-light);
  --badge-shipping-new-label-color: var(--color-secondary-400);
  --badge-shipping-new-border-color: var(--color-secondary-300);
  --badge-shipping-new-bg: var(--color-secondary-300);
  --badge-shipping-new-bg-opacity: 0.16;
  --badge-shipping-safe-label: Chọn nhiều;
  --badge-shipping-safe-icon: thumb-like;
  --badge-shipping-safe-icon-color: var(--gradient-su-dark);
  --badge-shipping-safe-label-color: var(--color-base-su-dark);
  --badge-shipping-safe-border-color: var(--color-success-400);
  --badge-shipping-safe-bg: var(--color-base-su-normal);
  --badge-shipping-safe-bg-opacity: 0.12;
  --color-primary-25: #E6E9FF;
  --color-primary-50: #B8C2FF;
  --color-primary-100: #8A9EFF;
  --color-primary-200: #607CFB;
  --color-primary-300: #3C5CF1;
  --color-primary-400: #1B3FE4;
  --color-primary-500: #0F33D6;
  --color-primary-600: #0628C7;
  --color-primary-700: #001FB3;
  --color-primary-800: #001699;
  --color-primary-900: #000F80;
  --color-secondary-25: #EEE7FF;
  --color-secondary-50: #D1BEFF;
  --color-secondary-100: #B599FF;
  --color-secondary-200: #9B76FF;
  --color-secondary-300: #8358FE;
  --color-secondary-400: #6C3CF4;
  --color-secondary-500: #5D2EE4;
  --color-secondary-600: #4F21CC;
  --color-secondary-700: #4217B3;
  --color-secondary-800: #360E99;
  --color-secondary-900: #2B0780;
  --color-success-25: #E6FCF0;
  --color-success-50: #B8F4D6;
  --color-success-100: #8AE9BB;
  --color-success-200: #5DDCA0;
  --color-success-300: #36CB85;
  --color-success-400: #12B76A;
  --color-success-500: #09AC60;
  --color-success-600: #01A056;
  --color-success-700: #00914B;
  --color-success-800: #008241;
  --color-success-900: #007036;
  --color-warning-25: #FFF0D9;
  --color-warning-50: #FFE2B8;
  --color-warning-100: #FFCE8A;
  --color-warning-200: #FFBA5C;
  --color-warning-300: #FFA52E;
  --color-warning-400: #F79009;
  --color-warning-500: #E68300;
  --color-warning-600: #CC7600;
  --color-warning-700: #B36800;
  --color-warning-800: #995A00;
  --color-warning-900: #804C00;
  --color-danger-25: #FFE8E7;
  --color-danger-50: #FFC2BD;
  --color-danger-100: #FF9E97;
  --color-danger-200: #FF7D74;
  --color-danger-300: #FA5F54;
  --color-danger-400: #F04438;
  --color-danger-500: #E0362A;
  --color-danger-600: #CC2A1E;
  --color-danger-700: #B31F14;
  --color-danger-800: #99160C;
  --color-danger-900: #800E05;
  --color-gray-25: #EFEFEF;
  --color-gray-50: #DDDEDF;
  --color-gray-100: #C2C5C7;
  --color-gray-200: #A8ADAF;
  --color-gray-300: #8E9496;
  --color-gray-400: #747B7E;
  --color-gray-500: #686F72;
  --color-gray-600: #5C6366;
  --color-gray-700: #505759;
  --color-gray-800: #444A4D;
  --color-gray-900: #393E40;
  --color-blue-25: #EAF5FF;
  --color-blue-50: #C6E2FF;
  --color-blue-100: #A1D0FF;
  --color-blue-200: #7DBEFF;
  --color-blue-300: #59ABFF;
  --color-blue-400: #3699FF;
  --color-blue-500: #288AE6;
  --color-blue-600: #1B7ACC;
  --color-blue-700: #116BB3;
  --color-blue-800: #085B99;
  --color-blue-900: #024C80;
  --color-purple-25: #F8E6FF;
  --color-purple-50: #EAB8FF;
  --color-purple-100: #DA8AFF;
  --color-purple-200: #C95CFD;
  --color-purple-300: #B730F3;
  --color-purple-400: #A30DE6;
  --color-purple-500: #9602D9;
  --color-purple-600: #8900C9;
  --color-purple-700: #7B00B3;
  --color-purple-800: #6C0099;
  --color-purple-900: #5C0080;
  --color-rose-25: #FFE7ED;
  --color-rose-50: #FFBECF;
  --color-rose-100: #FF99B3;
  --color-rose-200: #FF7798;
  --color-rose-300: #FF587F;
  --color-rose-400: #F63D68;
  --color-rose-500: #E62F59;
  --color-rose-600: #CC224B;
  --color-rose-700: #B3173E;
  --color-rose-800: #990E33;
  --color-rose-900: #800728;
  --color-yellow-25: #FFFDE6;
  --color-yellow-50: #FFF7B8;
  --color-yellow-100: #FFEF8A;
  --color-yellow-200: #FFE45C;
  --color-yellow-300: #FFD72E;
  --color-yellow-400: #FFC700;
  --color-yellow-500: #E6BA00;
  --color-yellow-600: #CCAB00;
  --color-yellow-700: #B39A00;
  --color-yellow-800: #998900;
  --color-yellow-900: #807500;
  --color-orange-dark-25: #FFF2E8;
  --color-orange-dark-50: #FFDBC1;
  --color-orange-dark-100: #FFC59D;
  --color-orange-dark-200: #FFB07C;
  --color-orange-dark-300: #FC9B5F;
  --color-orange-dark-400: #F38744;
  --color-orange-dark-500: #E37835;
  --color-orange-dark-600: #CC6928;
  --color-orange-dark-700: #B35A1D;
  --color-orange-dark-800: #994C14;
  --color-orange-dark-900: #803E0C;
  --color-brown-25: #FAF5F2;
  --color-brown-50: #F1E3DB;
  --color-brown-100: #E6D1C5;
  --color-brown-200: #DBBFB1;
  --color-brown-300: #CEAE9D;
  --color-brown-400: #C19D8A;
  --color-brown-500: #B08D7A;
  --color-brown-600: #9F7C6A;
  --color-brown-700: #8D6C5B;
  --color-brown-800: #7A5C4C;
  --color-brown-900: #674C3E;
  --color-green-light-25: #F2FFE7;
  --color-green-light-50: #DCFFBF;
  --color-green-light-100: #C6FD99;
  --color-green-light-200: #B0F776;
  --color-green-light-300: #9AED57;
  --color-green-light-400: #85E13A;
  --color-green-light-500: #77D22D;
  --color-green-light-600: #69C121;
  --color-green-light-700: #5BAF17;
  --color-green-light-800: #4E990F;
  --color-green-light-900: #408008;
  --color-gray-cool-25: #F1F3F8;
  --color-gray-cool-50: #D8DCEC;
  --color-gray-cool-100: #C0C7DE;
  --color-gray-cool-200: #A9B2D0;
  --color-gray-cool-300: #929DC0;
  --color-gray-cool-400: #7D89B0;
  --color-gray-cool-500: #6E7AA1;
  --color-gray-cool-600: #606B91;
  --color-gray-cool-700: #525D81;
  --color-gray-cool-800: #454F70;
  --color-gray-cool-900: #38415E;
  --color-brand-pr-dark: var(--color-primary-600);
  --color-brand-pr-normal: var(--color-primary-400);
  --color-brand-pr-light: var(--color-primary-200);
  --color-brand-se-dark: var(--color-secondary-600);
  --color-brand-se-normal: var(--color-secondary-400);
  --color-brand-se-light: var(--color-secondary-200);
  --color-base-su-dark: var(--color-success-600);
  --color-base-su-normal: var(--color-success-400);
  --color-base-su-light: var(--color-success-200);
  --color-base-wa-dark: var(--color-warning-600);
  --color-base-wa-normal: #F28504;
  --color-base-wa-light: var(--color-warning-200);
  --color-base-da-dark: var(--color-danger-600);
  --color-base-da-normal: var(--color-danger-400);
  --color-base-da-light: var(--color-danger-200);
  --color-base-gray-dark: var(--color-gray-900);
  --color-base-gray-normal: var(--color-gray-600);
  --color-base-gray-light: var(--color-gray-400);
  --color-base-black: #000000;
  --color-base-white: #FFFFFF;
  --color-base-page-bg: #EFF1FB;
  --color-base-card-bg: #EBEDF2;
  --color-border-dark: var(--color-gray-200);
  --color-border-normal: var(--color-gray-50);
  --color-border-light: var(--color-gray-25);
  --color-opacity-pr-10: #1B3FE41A;
  --color-opacity-pr-20: #1B3FE433;
  --color-opacity-se-10: #6C3CF41A;
  --color-opacity-se-20: #6C3CF433;
  --color-opacity-su-10: #12B76A1A;
  --color-opacity-su-20: #12B76A33;
  --color-opacity-wa-10: #F790091A;
  --color-opacity-wa-20: #F7900933;
  --color-opacity-da-10: #F044381A;
  --color-opacity-da-20: #F0443833;
  --color-opacity-gr-dark-10: #393E401A;
  --color-opacity-gr-dark-20: #393E4033;
  --color-opacity-gr-dark-30: #393E404D;
  --color-opacity-gr-dark-40: #393E4066;
  --color-opacity-gr-10: #747B7E1A;
  --color-opacity-gr-20: #747B7E33;
  --color-opacity-gr-light-10: #A8ADAF1A;
  --color-opacity-gr-light-20: #A8ADAF33;
  --color-opacity-gr-lighter-10: #DDDEDF1A;
  --color-opacity-gr-lighter-20: #DDDEDF33;
  --color-opacity-gr-white-60: #FFFFFF99;
  --color-opacity-gr-white-80: #FFFFFFCC;
  --color-empty-graphic-dark: #A9B2D0;
  --color-empty-graphic-normal: #D4DAEC;
  --color-empty-graphic-light: #E7ECF8;
  --color-empty-graphic-lighter: #F2F6FE;
  --color-empty-graphic-white: #FFFFFF;
  --color-empty-graphic-shadow: #A9B2D01A;
  --gradient-pr-light: linear-gradient(90deg, var(--color-primary-200) 0%, var(--color-primary-400) 100%);
  --gradient-pr-dark: linear-gradient(90deg, var(--color-primary-400) 0%, var(--color-primary-600) 100%);
  --gradient-se-light: linear-gradient(90deg, var(--color-secondary-200) 0%, var(--color-secondary-400) 100%);
  --gradient-se-dark: linear-gradient(90deg, var(--color-secondary-400) 0%, var(--color-secondary-600) 100%);
  --gradient-su-light: linear-gradient(90deg, var(--color-success-200) 0%, var(--color-success-400) 100%);
  --gradient-su-dark: linear-gradient(90deg, var(--color-success-400) 0%, var(--color-success-600) 100%);
  --gradient-wa-light: linear-gradient(90deg, var(--color-warning-200) 0%, var(--color-warning-400) 100%);
  --gradient-wa-dark: linear-gradient(90deg, var(--color-warning-400) 0%, var(--color-warning-600) 100%);
  --gradient-da-light: linear-gradient(90deg, var(--color-danger-200) 0%, var(--color-danger-400) 100%);
  --gradient-da-dark: linear-gradient(90deg, var(--color-danger-400) 0%, var(--color-danger-600) 100%);
  --gradient-gray-light: linear-gradient(90deg, var(--color-gray-200) 0%, var(--color-gray-400) 100%);
  --gradient-gray-dark: linear-gradient(90deg, var(--color-gray-400) 0%, var(--color-gray-600) 100%);
  --gradient-mixed-01: linear-gradient(105deg, var(--color-primary-400) 25.5%, var(--color-secondary-400) 100%);
  --gradient-border-search: linear-gradient(130deg, #6C93FF 0%, #375BFF 50%, var(--color-primary-400) 100%);
  --gradient-border-search-mall: linear-gradient(90deg, var(--color-warning-200) 0%, var(--color-warning-400) 100%);
  --header-base-width: 390px;
  --header-base-status-bar-height: 44px;
  --header-first-row-height: 56px;
  --header-first-row-height-with-subtitle: 66px;
  --header-first-row-padding: 8px;
  --header-first-row-content-padding-x: 8px;
  --header-first-row-title-typography: var(--typography-title-block-medium);
  --header-first-row-subtitle-typography: var(--typography-text-sm-medium);
  --header-first-row-subtitle-padding-y: 0px;
  --header-first-row-actions-gap: 4px;
  --header-first-row-actions-width: 84px;
  --header-action-size: 40px;
  --header-action-padding: 8px;
  --header-action-icon-size: 24px;
  --header-action-icon-style: outline;
  --header-action-icons-back: arrow-left-line;
  --header-action-icons-close: close;
  --header-action-icons-menu: menu;
  --header-action-icons-notification: bell;
  --header-action-icons-search: search;
  --header-action-icons-cart: cart-alt;
  --header-action-icons-help: question-circle;
  --header-action-icons-chat: chat-square;
  --header-action-icons-add: plus;
  --header-action-icons-check: check-multiple;
  --header-action-icons-filter: filter;
  --header-action-icons-control: control-bar;
  --header-action-icons-edit: edit-square;
  --header-action-icons-settings: setting;
  --header-action-icons-account: user-circle;
  --header-action-icons-more: more-vertical;
  --header-search-height: 52px;
  --header-search-padding-x: 12px;
  --header-search-padding-bottom: 12px;
  --header-search-input-height: 40px;
  --header-search-input-radius: 8px;
  --header-search-icon: search;
  --header-search-icon-size: 18px;
  --header-search-icon-box: 40px;
  --header-search-placeholder-typography: var(--typography-text-nm-regular);
  --header-tabs-line-height: var(--bar-tab-bar-height);
  --header-tabs-line-item: Tab-Item-Color-New/Underline Size=Nm;
  --header-tabs-line-background: var(--bar-tab-bar-background);
  --header-tabs-line-bottom-line-width: var(--bar-tab-bar-bottom-line-width);
  --header-tabs-line-bottom-line: var(--bar-tab-bar-bottom-line);
  --header-tabs-block-height: 44px;
  --header-tabs-block-item: Tab-Item-Color-New/Block Size=Sm;
  --header-tabs-block-padding-x: 12px;
  --header-tabs-block-padding-bottom: 12px;
  --header-tabs-block-gap: 8px;
  --header-theme-color-background: var(--color-brand-pr-normal);
  --header-theme-color-status-bar: white;
  --header-theme-color-title: var(--color-base-white);
  --header-theme-color-subtitle: var(--color-base-white);
  --header-theme-color-action-icon: var(--color-base-white);
  --header-theme-color-search-background: var(--color-opacity-gr-dark-20);
  --header-theme-color-search-placeholder: var(--color-base-white);
  --header-theme-color-search-icon: var(--color-base-white);
  --header-theme-color-search-content-opacity: 0.5;
  --header-theme-color-tab-block-inverse: yes;
  --header-theme-color-bottom-divider: none;
  --header-theme-light-background: var(--color-base-white);
  --header-theme-light-status-bar: black;
  --header-theme-light-title: var(--color-base-gray-dark);
  --header-theme-light-subtitle: var(--color-base-gray-dark);
  --header-theme-light-action-icon: var(--color-brand-pr-normal);
  --header-theme-light-search-background: var(--color-gray-25);
  --header-theme-light-search-placeholder: var(--color-gray-200);
  --header-theme-light-search-icon: var(--color-base-gray-normal);
  --header-theme-light-search-content-opacity: 1;
  --header-theme-light-tab-block-inverse: no;
  --header-theme-light-bottom-divider: var(--color-opacity-gr-dark-10);
  --illustration-large-size: 160px;
  --illustration-large-linear-dark: var(--color-empty-graphic-dark);
  --illustration-large-linear-normal: var(--color-empty-graphic-normal);
  --illustration-large-linear-light: var(--color-empty-graphic-light);
  --illustration-large-linear-lighter: var(--color-empty-graphic-lighter);
  --illustration-large-linear-white: var(--color-empty-graphic-white);
  --illustration-spot-size: 100px;
  --illustration-spot-linear-gray-line: var(--color-base-gray-light);
  --illustration-spot-linear-gray-fill: var(--color-gray-100);
  --illustration-spot-linear-gray-paper: var(--color-base-white);
  --illustration-spot-linear-primary-line: var(--color-brand-pr-normal);
  --illustration-spot-linear-primary-fill: var(--color-primary-100);
  --illustration-spot-linear-primary-paper: var(--color-base-white);
  --illustration-spot-filled-gray-main: var(--color-gray-300);
  --illustration-spot-filled-gray-dark: var(--color-base-gray-normal);
  --illustration-spot-filled-gray-light: var(--color-gray-200);
  --illustration-spot-filled-gray-lighter: var(--color-gray-100);
  --illustration-spot-filled-gray-paper: var(--color-base-white);
  --illustration-spot-filled-primary-main: var(--color-primary-300);
  --illustration-spot-filled-primary-dark: var(--color-brand-pr-dark);
  --illustration-spot-filled-primary-paper: var(--color-base-white);
  --illustration-spot-filled-primary-accent-success: var(--color-base-su-normal);
  --illustration-spot-filled-primary-accent-warning: var(--color-warning-400);
  --illustration-spot-filled-primary-accent-warning-light: var(--color-base-wa-light);
  --empty-page-base-width: 390px;
  --empty-page-base-background: var(--color-base-white);
  --empty-page-base-padding-y: 56px;
  --empty-page-base-padding-x: 32px;
  --empty-page-base-align: center;
  --empty-page-graphic-size: 140px;
  --empty-page-graphic-animation-size: 176px;
  --empty-page-content-padding-top: 16px;
  --empty-page-content-gap: 8px;
  --empty-page-content-title-typography: var(--typography-text-lg-bold);
  --empty-page-content-title-color: var(--color-base-gray-dark);
  --empty-page-content-message-typography: var(--typography-text-md-regular);
  --empty-page-content-message-color: var(--color-base-gray-normal);
  --empty-page-content-text-align: center;
  --empty-page-action-padding-top: 16px;
  --empty-page-action-button: Btn-Solid-Pr, Size=Md (tokens/buttons.json);
  --avatar-base-radius: 999px;
  --avatar-base-image-fallback-bg: var(--color-base-gray-light);
  --avatar-size-xs-size: 24px;
  --avatar-size-xs-typography: var(--typography-text-2xs-medium);
  --avatar-size-xs-placeholder-icon-size: 14px;
  --avatar-size-xs-indicator-size: 6px;
  --avatar-size-sm-size: 32px;
  --avatar-size-sm-typography: var(--typography-text-xs-medium);
  --avatar-size-sm-placeholder-icon-size: 20px;
  --avatar-size-sm-indicator-size: 8px;
  --avatar-size-nm-size: 40px;
  --avatar-size-nm-typography: var(--typography-text-xs-medium);
  --avatar-size-nm-placeholder-icon-size: 24px;
  --avatar-size-nm-indicator-size: 10px;
  --avatar-size-md-size: 48px;
  --avatar-size-md-typography: var(--typography-text-lg-medium);
  --avatar-size-md-placeholder-icon-size: 28px;
  --avatar-size-md-indicator-size: 12px;
  --avatar-size-lg-size: 56px;
  --avatar-size-lg-typography: var(--typography-text-xlg-medium);
  --avatar-size-lg-placeholder-icon-size: 32px;
  --avatar-size-lg-indicator-size: 14px;
  --avatar-size-xlg-size: 64px;
  --avatar-size-xlg-typography: var(--typography-heading-h3);
  --avatar-size-xlg-placeholder-icon-size: 32px;
  --avatar-size-xlg-indicator-size: 16px;
  --avatar-size-2xl-size: 80px;
  --avatar-size-2xl-typography: var(--typography-heading-h3);
  --avatar-size-2xl-placeholder-icon-size: 40px;
  --avatar-size-2xl-indicator-size: 20px;
  --avatar-size-3xl-size: 96px;
  --avatar-size-3xl-typography: var(--typography-heading-h3);
  --avatar-size-3xl-placeholder-icon-size: 48px;
  --avatar-size-3xl-indicator-size: 24px;
  --avatar-size-4xl-size: 112px;
  --avatar-size-4xl-typography: var(--typography-heading-h3);
  --avatar-size-4xl-placeholder-icon-size: 56px;
  --avatar-size-4xl-indicator-size: 28px;
  --avatar-initials-bg: var(--color-primary-25);
  --avatar-initials-color: var(--color-brand-pr-normal);
  --avatar-placeholder-bg: var(--color-primary-25);
  --avatar-placeholder-icon: user;
  --avatar-placeholder-icon-style: outline;
  --avatar-placeholder-icon-color: var(--color-primary-100);
  --avatar-indicator-online-color: var(--color-base-su-normal);
  --avatar-indicator-company-color: var(--color-border-dark);
  --avatar-indicator-ring-color: var(--color-base-white);
  --avatar-indicator-ring-width: 1.5px;
  --avatar-indicator-ring-position: outside;
  --avatar-indicator-radius: 999px;
  --thumbnail-base-radius: 8px;
  --thumbnail-base-circle-radius: 999px;
  --thumbnail-base-object-fit: cover;
  --thumbnail-size-xs-height: 24px;
  --thumbnail-size-xs-landscape-width: 48px;
  --thumbnail-size-sm-height: 32px;
  --thumbnail-size-sm-landscape-width: 64px;
  --thumbnail-size-nm-height: 40px;
  --thumbnail-size-nm-landscape-width: 80px;
  --thumbnail-size-md-height: 48px;
  --thumbnail-size-md-landscape-width: 96px;
  --thumbnail-size-lg-height: 56px;
  --thumbnail-size-lg-landscape-width: 112px;
  --thumbnail-size-xlg-height: 64px;
  --thumbnail-size-xlg-landscape-width: 128px;
  --thumbnail-size-2xlg-height: 72px;
  --thumbnail-size-2xlg-landscape-width: 144px;
  --thumbnail-size-3xlg-height: 80px;
  --thumbnail-size-3xlg-landscape-width: 160px;
  --thumbnail-size-4xlg-height: 88px;
  --thumbnail-size-4xlg-landscape-width: 176px;
  --thumbnail-size-5xlg-height: 104px;
  --thumbnail-size-5xlg-landscape-width: 192px;
  --layout-blocks-base-size: 32px;
  --layout-blocks-base-bg: var(--color-primary-25);
  --layout-blocks-base-border-color: var(--color-primary-50);
  --layout-blocks-base-border-width: 1px;
  --layout-blocks-base-border-style: dashed;
  --layout-blocks-base-border-dash: 2px 2px;
  --layout-blocks-base-label: ◇ Swap;
  --layout-blocks-base-label-color: var(--color-primary-300);
  --layout-blocks-stack-gap: 0px;
  --layout-blocks-stack-padding: 0px;
  --layout-blocks-stack-count-min: 1;
  --layout-blocks-stack-count-max: 10;
  --layout-blocks-direction-horizontal-align: center;
  --layout-blocks-direction-vertical-align: center;
  --modal-sheet-overlay-dim-color: var(--color-base-black);
  --modal-sheet-overlay-dim-opacity: 0.8;
  --modal-sheet-panel-bg: var(--color-base-white);
  --modal-sheet-panel-radius: 16px;
  --modal-sheet-panel-margin-x: 12px;
  --modal-sheet-modal-position: center;
  --modal-sheet-modal-padding-y: 12px;
  --modal-sheet-sheet-position: bottom;
  --modal-sheet-sheet-padding-top: 12px;
  --modal-sheet-sheet-padding-bottom: 32px;
  --modal-sheet-sheet-padding-bottom-picker: 16px;
  --modal-sheet-title-bar-padding: 16px;
  --modal-sheet-title-bar-gap: 16px;
  --modal-sheet-title-bar-text-gap: 4px;
  --modal-sheet-title-bar-bg: var(--color-base-white);
  --modal-sheet-title-bar-divider-color: var(--color-border-light);
  --modal-sheet-title-bar-divider-width: 1px;
  --modal-sheet-title-bar-title-typography: var(--typography-text-lg-bold);
  --modal-sheet-title-bar-title-color: var(--color-base-gray-dark);
  --modal-sheet-title-bar-desc-typography: var(--typography-text-nm-regular);
  --modal-sheet-title-bar-desc-color: var(--color-base-gray-light);
  --modal-sheet-title-bar-action-icon-size: 24px;
  --modal-sheet-title-bar-action-right-icon: close;
  --modal-sheet-title-bar-avatar-size: md;
  --modal-sheet-body-padding: 0px;
  --modal-sheet-actions-padding: 12px;
  --modal-sheet-actions-gap: 8px;
  --modal-sheet-actions-button-size: md;
  --modal-sheet-actions-primary: Btn-Solid-Pr, Size=Md (right / last);
  --modal-sheet-actions-secondary: Btn-Solid-Grey, Size=Md (left);
  --product-card-base-width: 183px;
  --product-card-base-radius: 8px;
  --product-card-base-background: var(--color-base-white);
  --product-card-base-image-size: 183px;
  --product-card-border-width: 1px;
  --product-card-border-position: outside;
  --product-card-border-color: var(--color-opacity-gr-dark-10);
  --product-card-image-overlay-inset: 8px;
  --product-card-discount-tag-height: 20px;
  --product-card-discount-tag-padding-x: 4px;
  --product-card-discount-tag-radius: 8px 0 6px 0;
  --product-card-discount-tag-background: var(--color-base-da-normal);
  --product-card-discount-tag-label-color: var(--color-base-white);
  --product-card-discount-tag-typography: var(--typography-text-2xs-bold);
  --product-card-video-badge-size: 20px;
  --product-card-video-badge-padding: 3px;
  --product-card-video-badge-icon: figma:Icon-Video;
  --product-card-video-badge-icon-size: 14px;
  --product-card-video-badge-icon-color: var(--color-base-white);
  --product-card-video-badge-background: #000000B3;
  --product-card-wishlist-size: 32px;
  --product-card-wishlist-radius: 999px;
  --product-card-wishlist-background: #FFFFFFE6;
  --product-card-wishlist-icon: heart;
  --product-card-wishlist-icon-size: 16px;
  --product-card-wishlist-normal-icon-style: outline;
  --product-card-wishlist-normal-color: var(--color-base-gray-dark);
  --product-card-wishlist-added-icon-style: solid;
  --product-card-wishlist-added-color: var(--button-variant-transparent-danger-default-normal-label);
  --product-card-coupon-labels-height: 20px;
  --product-card-coupon-labels-radius: 0 6px 0 0;
  --product-card-coupon-labels-radius-standalone: 0 6px 0 8px;
  --product-card-coupon-labels-padding: 2px 4px;
  --product-card-coupon-labels-icon-size: 12px;
  --product-card-coupon-labels-icon-style: solid;
  --product-card-coupon-labels-icon-gap: 2px;
  --product-card-coupon-labels-typography: var(--typography-text-2xs-medium);
  --product-card-coupon-labels-label-color: var(--color-base-white);
  --product-card-coupon-labels-order-discount-background: var(--color-brand-pr-normal);
  --product-card-coupon-labels-order-discount-icon: ticket-money;
  --product-card-coupon-labels-shipping-fee-background: var(--color-base-su-normal);
  --product-card-coupon-labels-shipping-fee-icon: truck;
  --product-card-coupon-labels-shipping-fee-free-typography: var(--typography-text-2xs-bold);
  --product-card-coupon-labels-gift-background: var(--color-warning-50);
  --product-card-coupon-labels-gift-icon: gift;
  --product-card-coupon-labels-gift-icon-color: var(--color-base-wa-dark);
  --product-card-coupon-labels-gift-name: Quà tặng;
  --product-card-coupon-labels-gift-name-typography: var(--typography-text-2xs-medium);
  --product-card-coupon-labels-gift-name-color: var(--color-base-wa-dark);
  --product-card-coupon-labels-gift-name-max-other-tags: 1;
  --product-card-guarantee-label-height: 20px;
  --product-card-guarantee-label-padding-x: 4px;
  --product-card-guarantee-label-gap: 2px;
  --product-card-guarantee-label-background: var(--gradient-pr-light);
  --product-card-guarantee-label-icon: shield-done;
  --product-card-guarantee-label-icon-size: 12px;
  --product-card-guarantee-label-label: CAM KẾT;
  --product-card-guarantee-label-label-color: var(--color-base-white);
  --product-card-guarantee-label-label-font-size: 10px;
  --product-card-guarantee-label-label-font-weight: 700;
  --product-card-guarantee-label-label-line-height: 1.2;
  --product-card-restock-background: #00000099;
  --product-card-restock-padding: 8px;
  --product-card-info-padding: 4px 8px 8px;
  --product-card-flashsale-height: 18px;
  --product-card-flashsale-bar-height: 14px;
  --product-card-flashsale-bar-radius: 6px;
  --product-card-flashsale-padding-bottom: 6px;
  --product-card-flashsale-track: #FFAFAA;
  --product-card-flashsale-fill: linear-gradient(90deg, #FFB806 0%, #F62D5B 100%);
  --product-card-flashsale-label: BÁN CHẠY;
  --product-card-flashsale-label-color: var(--color-base-white);
  --product-card-flashsale-label-font-size: 8px;
  --product-card-flashsale-label-font-weight: 900;
  --product-card-flashsale-icon: graphics/fire;
  --product-card-flashsale-icon-size: 14px 18px;
  --product-card-title-typography: var(--typography-text-sm-medium);
  --product-card-title-color: var(--color-base-gray-dark);
  --product-card-title-max-lines: 2;
  --product-card-live-label-height: 14px;
  --product-card-live-label-radius: 4px;
  --product-card-live-label-background: var(--gradient-da-light);
  --product-card-live-label-label: LIVE;
  --product-card-live-label-label-color: var(--color-base-white);
  --product-card-live-label-typography: var(--typography-text-2xs-bold);
  --product-card-live-label-icon-size: 10px;
  --product-card-live-label-gap: 4px;
  --product-card-live-label-padding: 0 3px;
  --product-card-live-label-icon-gap: 2px;
  --product-card-live-label-bars-width: 1.2px;
  --product-card-live-label-bars-gap: 0.9px;
  --product-card-live-label-bars-radius: 0.6px;
  --product-card-live-label-bars-bottom: 1.65px;
  --product-card-live-label-bars-color: var(--color-base-white);
  --product-card-live-label-bars-frame-1-left: 3.7px;
  --product-card-live-label-bars-frame-1-middle: 7.2px;
  --product-card-live-label-bars-frame-1-right: 4.9px;
  --product-card-live-label-bars-frame-2-left: 6.2px;
  --product-card-live-label-bars-frame-2-middle: 3.6px;
  --product-card-live-label-bars-frame-2-right: 7.2px;
  --product-card-live-label-bars-frame-3-left: 5px;
  --product-card-live-label-bars-frame-3-middle: 5.6px;
  --product-card-live-label-bars-frame-3-right: 2.8px;
  --product-card-live-label-bars-step-duration: 0.3s;
  --product-card-commission-padding-top: 2px;
  --product-card-commission-label: LN: ;
  --product-card-commission-label-typography: var(--typography-text-xs-regular);
  --product-card-commission-value-typography: var(--typography-text-xs-bold);
  --product-card-commission-color: var(--color-brand-se-normal);
  --product-card-commission-points-typography: var(--typography-text-xs-regular);
  --product-card-commission-points-color: var(--color-base-gray-normal);
  --product-card-price-padding-top: 2px;
  --product-card-price-gap: 4px;
  --product-card-price-typography: var(--typography-text-nm-bold);
  --product-card-price-color: var(--color-base-wa-normal);
  --product-card-price-before-typography: var(--typography-others-item-price-before);
  --product-card-price-before-color: var(--color-base-gray-light);
  --product-card-promotion-tag-height: 17px;
  --product-card-promotion-tag-radius: 4px;
  --product-card-promotion-tag-padding: 0 4px 1px;
  --product-card-promotion-tag-border-width: 1px;
  --product-card-promotion-tag-background: var(--color-rose-25);
  --product-card-promotion-tag-border: var(--color-rose-50);
  --product-card-promotion-tag-label-color: var(--color-rose-500);
  --product-card-promotion-tag-typography: var(--typography-text-2xs-medium);
  --product-card-promotion-tag-row-padding-y: 2px;
  --product-card-stats-padding-top: 2px;
  --product-card-stats-gap: 4px;
  --product-card-stats-star-icon: star;
  --product-card-stats-star-size: 12px;
  --product-card-stats-star-color: var(--color-base-wa-normal);
  --product-card-stats-typography: var(--typography-text-xs-regular);
  --product-card-stats-color: var(--color-base-gray-normal);
  --product-card-stats-divider-width: 1px;
  --product-card-stats-divider-height: 12px;
  --product-card-stats-divider-color: var(--color-border-light);
  --product-card-button-padding-top: 6px;
  --product-card-button-height: var(--button-size-xs-height);
  --product-card-button-radius: var(--button-base-radius);
  --product-card-button-background: var(--button-variant-solid-gray-default-normal-background);
  --product-card-button-label-color: var(--button-variant-solid-gray-default-normal-label);
  --product-card-button-typography: var(--button-size-xs-typography);
  --product-card-button-icon: cart-plus;
  --product-card-button-icon-size: var(--button-size-xs-icon-size);
  --product-card-button-label: Giỏ hàng;
  --radio-checkbox-base-disabled-opacity: 0.3;
  --radio-checkbox-size-xs-control-size: 16px;
  --radio-checkbox-size-xs-switcher-width: 28px;
  --radio-checkbox-size-xs-switcher-height: 16px;
  --radio-checkbox-size-xs-knob-size: 10px;
  --radio-checkbox-size-xs-knob-inset: 3px;
  --radio-checkbox-size-sm-control-size: 20px;
  --radio-checkbox-size-sm-switcher-width: 36px;
  --radio-checkbox-size-sm-switcher-height: 20px;
  --radio-checkbox-size-sm-knob-size: 12px;
  --radio-checkbox-size-sm-knob-inset: 4px;
  --radio-checkbox-size-md-control-size: 24px;
  --radio-checkbox-size-md-switcher-width: 44px;
  --radio-checkbox-size-md-switcher-height: 24px;
  --radio-checkbox-size-md-knob-size: 16px;
  --radio-checkbox-size-md-knob-inset: 4px;
  --radio-checkbox-size-lg-control-size: 28px;
  --radio-checkbox-size-lg-switcher-width: 50px;
  --radio-checkbox-size-lg-switcher-height: 28px;
  --radio-checkbox-size-lg-knob-size: 18px;
  --radio-checkbox-size-lg-knob-inset: 5px;
  --radio-checkbox-switcher-radius: 999px;
  --radio-checkbox-switcher-knob-radius: 999px;
  --radio-checkbox-switcher-off-normal-track: var(--color-gray-100);
  --radio-checkbox-switcher-off-normal-knob: var(--color-base-white);
  --radio-checkbox-switcher-off-disabled-track: var(--color-gray-50);
  --radio-checkbox-switcher-off-disabled-knob: var(--color-base-white);
  --radio-checkbox-switcher-off-disabled-opacity: 0.3;
  --radio-checkbox-switcher-on-normal-track: var(--color-brand-pr-normal);
  --radio-checkbox-switcher-on-normal-knob: var(--color-base-white);
  --radio-checkbox-switcher-on-disabled-track: var(--color-brand-pr-normal);
  --radio-checkbox-switcher-on-disabled-knob: var(--color-base-white);
  --radio-checkbox-switcher-on-disabled-opacity: 0.3;
  --radio-checkbox-checkbox-off-normal-icon: square;
  --radio-checkbox-checkbox-off-normal-icon-style: outline;
  --radio-checkbox-checkbox-off-normal-color: var(--color-base-gray-light);
  --radio-checkbox-checkbox-off-disabled-icon: square;
  --radio-checkbox-checkbox-off-disabled-icon-style: outline;
  --radio-checkbox-checkbox-off-disabled-color: var(--color-base-gray-light);
  --radio-checkbox-checkbox-off-disabled-opacity: 0.3;
  --radio-checkbox-checkbox-on-normal-icon: check-square;
  --radio-checkbox-checkbox-on-normal-icon-style: solid;
  --radio-checkbox-checkbox-on-normal-color: var(--color-brand-pr-normal);
  --radio-checkbox-checkbox-on-disabled-icon: check-square;
  --radio-checkbox-checkbox-on-disabled-icon-style: solid;
  --radio-checkbox-checkbox-on-disabled-color: var(--color-brand-pr-normal);
  --radio-checkbox-checkbox-on-disabled-opacity: 0.3;
  --radio-checkbox-radio-off-normal-icon: circle;
  --radio-checkbox-radio-off-normal-icon-style: outline;
  --radio-checkbox-radio-off-normal-color: var(--color-base-gray-light);
  --radio-checkbox-radio-off-disabled-icon: circle;
  --radio-checkbox-radio-off-disabled-icon-style: outline;
  --radio-checkbox-radio-off-disabled-color: var(--color-base-gray-light);
  --radio-checkbox-radio-off-disabled-opacity: 0.3;
  --radio-checkbox-radio-on-normal-icon: check-circle;
  --radio-checkbox-radio-on-normal-icon-style: solid;
  --radio-checkbox-radio-on-normal-color: var(--color-brand-pr-normal);
  --radio-checkbox-radio-on-disabled-icon: check-circle;
  --radio-checkbox-radio-on-disabled-icon-style: solid;
  --radio-checkbox-radio-on-disabled-color: var(--color-brand-pr-normal);
  --radio-checkbox-radio-on-disabled-opacity: 0.3;
  --radio-checkbox-label-control-size: var(--radio-checkbox-size-sm-control-size);
  --radio-checkbox-label-control-offset-top: 1px;
  --radio-checkbox-label-gap: 6px;
  --radio-checkbox-label-text-gap: 0px;
  --radio-checkbox-label-label-typography: var(--typography-text-nm-regular);
  --radio-checkbox-label-label-color: var(--color-base-gray-dark);
  --radio-checkbox-label-help-text-typography: var(--typography-text-xs-regular);
  --radio-checkbox-label-help-text-color: var(--color-base-gray-light);
  --row-base-bg: var(--color-base-white);
  --row-base-padding-x: 12px;
  --row-base-padding-y: 12px;
  --row-base-gap: 8px;
  --row-base-min-height: 48px;
  --row-label-typography: var(--typography-text-md-medium);
  --row-label-color: var(--color-base-gray-dark);
  --row-desc-typography: var(--typography-text-sm-regular);
  --row-desc-color: var(--color-base-gray-light);
  --row-leading-icon-size: 28px;
  --row-leading-icon-style: outline;
  --row-leading-icon-color: var(--color-base-gray-dark);
  --row-value-typography: var(--typography-text-md-regular);
  --row-value-color: var(--color-base-gray-dark);
  --row-badge-component: Badge/Medium, Type=Number, Color=Danger (tokens/chip-badge.json);
  --row-trailing-icon-icon: angle-right;
  --row-trailing-icon-size: 20px;
  --row-trailing-icon-style: outline;
  --row-trailing-icon-color: var(--color-base-gray-light);
  --row-divider-color: var(--color-border-light);
  --row-divider-width: 1px;
  --row-divider-inset: 12px;
  --row-thumbnail-base-gap: 12px;
  --row-thumbnail-avatar-size: nm;
  --row-thumbnail-avatar-px: 40px;
  --row-thumbnail-thumbnail-size: lg;
  --row-thumbnail-thumbnail-px: 56px;
  --row-thumbnail-thumbnail-radius: 8px;
  --section-block-title-width: 390px;
  --section-block-title-height: 53px;
  --section-block-title-height-with-description: 72px;
  --section-block-title-background: var(--color-base-white);
  --section-block-title-padding: 12px;
  --section-block-title-gap: 12px;
  --section-block-title-title-typography: var(--typography-title-block-medium);
  --section-block-title-title-color: var(--color-base-gray-dark);
  --section-block-title-description-typography: var(--typography-text-xs-regular);
  --section-block-title-description-color: var(--color-base-gray-normal);
  --section-block-title-icon: angle-right;
  --section-block-title-icon-size: 20px;
  --section-block-title-icon-style: outline;
  --section-block-title-icon-color: var(--color-base-gray-dark);
  --section-tabs-line-height: var(--bar-tab-bar-height);
  --section-tabs-line-item: Tab-Item-Color-New/Underline Size=Nm;
  --section-tabs-line-background: var(--bar-tab-bar-background);
  --section-tabs-line-bottom-line-width: var(--bar-tab-bar-bottom-line-width);
  --section-tabs-line-bottom-line: var(--bar-tab-bar-bottom-line);
  --section-tabs-block-height: 44px;
  --section-tabs-block-item: Tab-Item-Color-New/Block Size=Sm;
  --section-tabs-block-background: var(--color-base-white);
  --section-tabs-block-padding-x: 12px;
  --section-tabs-block-padding-bottom: 12px;
  --section-tabs-block-gap: 8px;
  --section-lines-top-padding-x: 16px;
  --section-lines-bottom-padding: 0 16px 16px;
  --tab-base-padding-x: 12px;
  --tab-base-icon-style: outline;
  --tab-base-dropdown-icon: angle-down;
  --tab-base-dropdown-icon-size: 16px;
  --tab-base-badge: Badge/Medium;
  --tab-size-md-height: 48px;
  --tab-size-md-typography: var(--typography-text-md-medium);
  --tab-size-md-icon-size: 20px;
  --tab-size-md-gap: 6px;
  --tab-size-nm-height: 40px;
  --tab-size-nm-typography: var(--typography-text-nm-medium);
  --tab-size-nm-icon-size: 16px;
  --tab-size-nm-gap: 4px;
  --tab-size-sm-height: 32px;
  --tab-size-sm-typography: var(--typography-text-sm-medium);
  --tab-size-sm-icon-size: 16px;
  --tab-size-sm-gap: 4px;
  --tab-underline-padding-top: 2px;
  --tab-underline-indicator-height: 3px;
  --tab-underline-indicator-radius: 4px;
  --tab-underline-indicator-inset-x: var(--tab-base-padding-x);
  --tab-underline-size-md-height: 48px;
  --tab-underline-size-md-typography: var(--typography-text-md-bold);
  --tab-underline-size-md-icon-size: 20px;
  --tab-underline-size-md-gap: 6px;
  --tab-underline-size-nm-height: 42px;
  --tab-underline-size-nm-typography: var(--typography-text-nm-bold);
  --tab-underline-size-nm-icon-size: 16px;
  --tab-underline-size-nm-gap: 4px;
  --tab-underline-default-active-label: var(--color-brand-pr-normal);
  --tab-underline-default-active-indicator: var(--color-brand-pr-normal);
  --tab-underline-default-inactive-label: var(--color-base-gray-light);
  --tab-underline-inverse-active-label: var(--color-base-white);
  --tab-underline-inverse-active-indicator: var(--color-base-white);
  --tab-underline-inverse-inactive-label: var(--color-base-white);
  --tab-underline-inverse-inactive-opacity: 0.5;
  --tab-block-radius: 8px;
  --tab-block-default-active-background: var(--color-brand-pr-normal);
  --tab-block-default-active-label: var(--color-base-white);
  --tab-block-default-inactive-background: var(--color-gray-25);
  --tab-block-default-inactive-label: var(--color-base-gray-dark);
  --tab-block-inverse-active-background: var(--color-base-white);
  --tab-block-inverse-active-label: var(--color-brand-pr-normal);
  --tab-block-inverse-inactive-background: var(--color-opacity-gr-dark-40);
  --tab-block-inverse-inactive-label: var(--color-opacity-gr-white-80);
  --tab-outline-radius: 8px;
  --tab-outline-border-width: 1px;
  --tab-outline-border-position: inside;
  --tab-outline-default-active-background: var(--color-primary-25);
  --tab-outline-default-active-border: var(--color-brand-pr-normal);
  --tab-outline-default-active-label: var(--color-brand-pr-normal);
  --tab-outline-default-inactive-border: var(--color-opacity-gr-dark-40);
  --tab-outline-default-inactive-label: var(--color-base-gray-dark);
  --tab-outline-inverse-active-background: var(--color-opacity-gr-white-80);
  --tab-outline-inverse-active-label: var(--color-brand-pr-normal);
  --tab-outline-inverse-inactive-border: var(--color-base-white);
  --tab-outline-inverse-inactive-label: var(--color-base-white);
  --tab-outline-inverse-inactive-opacity: 0.5;
  --filter-item-height: 32px;
  --filter-item-padding-x: 12px;
  --filter-item-gap: 6px;
  --filter-item-text-gap: 4px;
  --filter-item-divider-width: 1px;
  --filter-item-divider-color: var(--color-opacity-gr-dark-10);
  --filter-item-label-typography: var(--typography-text-sm-bold);
  --filter-item-label-color: var(--color-base-gray-dark);
  --filter-item-value-typography: var(--typography-text-sm-medium);
  --filter-item-icon-size: 16px;
  --filter-item-dropdown-icon: angle-down;
  --filter-item-checkbox-size: var(--radio-checkbox-size-xs-control-size);
  --filter-off-value: var(--color-base-gray-dark);
  --filter-off-icon: var(--color-base-gray-dark);
  --filter-on-value: var(--color-brand-pr-normal);
  --filter-on-icon: var(--color-brand-pr-normal);
  --bar-tab-bar-height: 42px;
  --bar-tab-bar-background: var(--color-base-white);
  --bar-tab-bar-padding: 0px;
  --bar-tab-bar-gap: 0px;
  --bar-tab-bar-bottom-line-width: 1px;
  --bar-tab-bar-bottom-line: var(--color-border-normal);
  --bar-tab-bar-item: Tab-Item-Color-New/Underline Size=Nm;
  --bar-tab-bar-select-height: 48px;
  --bar-tab-bar-select-background: var(--color-base-white);
  --bar-tab-bar-select-padding-y: 8px;
  --bar-tab-bar-select-padding-x: 12px;
  --bar-tab-bar-select-gap: 8px;
  --bar-tab-bar-select-item: Tab-Item-Color-New/Block Size=Sm;
  --bar-sort-bar-height: 48px;
  --bar-sort-bar-background: var(--color-base-white);
  --bar-sort-bar-padding-y: 8px;
  --bar-sort-bar-padding-x: 12px;
  --bar-sort-bar-gap: 8px;
  --bar-sort-bar-bottom-line-width: 1px;
  --bar-sort-bar-bottom-line: var(--color-border-light);
  --bar-sort-bar-item: Tab-Item-Color-New/Outline Size=Sm;
  --bar-sort-bar-sort-icon: swap-vertical;
  --bar-filter-bar-height: 40px;
  --bar-filter-bar-background: var(--color-base-white);
  --bar-filter-bar-padding-y: 4px;
  --bar-filter-bar-padding-x: 0px;
  --bar-filter-bar-gap: 0px;
  --bar-filter-bar-item: Filter-Menu-Item;
  --snackbar-base-radius: 8px;
  --snackbar-base-padding-y: 12px;
  --snackbar-base-text-padding-x: 12px;
  --snackbar-base-typography: var(--typography-text-nm-regular);
  --snackbar-base-label-color: var(--color-gray-25);
  --snackbar-base-min-height: 46px;
  --snackbar-scheme-gray-dark-bg: var(--color-base-gray-dark);
  --snackbar-scheme-success-bg: var(--color-base-su-normal);
  --snackbar-scheme-danger-bg: var(--color-base-da-normal);
  --snackbar-alignment-center-text-align: center;
  --snackbar-alignment-center-width: hug;
  --snackbar-alignment-left-text-align: left;
  --snackbar-alignment-left-width: fill;
  --snackbar-layout-longer-action-action-gap: 8px;
  --snackbar-action-padding-left: 16px;
  --snackbar-action-button: Btn-Outline-Grey, Inverse=True, Size=Md (tokens/buttons.json);
  --snackbar-action-button-height: 28px;
  --snackbar-close-icon: close;
  --snackbar-close-icon-size: 24px;
  --snackbar-close-icon-color: var(--color-gray-25);
  --snackbar-close-padding-left: 12px;
  --snackbar-close-divider-color: var(--color-opacity-gr-lighter-10);
  --snackbar-close-divider-width: 1px;
  --snackbar-behavior-position: bottom;
  --tooltip-base-radius: 8px;
  --tooltip-base-label-color: var(--color-base-white);
  --tooltip-base-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  --tooltip-theme-dark-bg: var(--color-base-gray-dark);
  --tooltip-theme-blue-bg: var(--color-brand-pr-normal);
  --tooltip-short-padding-y: 8px;
  --tooltip-short-padding-x: 12px;
  --tooltip-short-typography: var(--typography-text-xs-regular);
  --tooltip-short-text-align: center;
  --tooltip-short-height: 33px;
  --tooltip-with-desc-width: 320px;
  --tooltip-with-desc-padding: 12px;
  --tooltip-with-desc-title-typography: var(--typography-text-xs-bold);
  --tooltip-with-desc-desc-typography: var(--typography-text-xs-regular);
  --tooltip-with-desc-text-align: left;
  --tooltip-arrow-size: 12px;
  --tooltip-arrow-radius: 1px;
  --tooltip-arrow-depth: 6px;
  --tooltip-arrow-inset: 20px;
  --tooltip-guide-base-width: 248px;
  --tooltip-guide-base-bg: var(--color-base-white);
  --tooltip-guide-base-radius: 16px;
  --tooltip-guide-base-padding-y: 12px;
  --tooltip-guide-base-padding-x: 16px;
  --tooltip-guide-base-gap: 2px;
  --tooltip-guide-base-shadow: 0 4px 6px -2px rgba(61, 63, 64, 0.03), 0 12px 16px -4px rgba(61, 63, 64, 0.08);
  --tooltip-guide-title-typography: var(--typography-text-md-bold);
  --tooltip-guide-title-color: var(--color-base-gray-dark);
  --tooltip-guide-close-icon: close;
  --tooltip-guide-close-icon-size: 24px;
  --tooltip-guide-close-icon-style: outline;
  --tooltip-guide-close-icon-color: var(--color-base-gray-dark);
  --tooltip-guide-body-typography: var(--typography-text-nm-regular);
  --tooltip-guide-body-color: var(--color-base-gray-dark);
  --tooltip-guide-footer-padding-y: 4px;
  --tooltip-guide-footer-gap: 10px;
  --tooltip-guide-footer-step-typography: var(--typography-text-xs-medium);
  --tooltip-guide-footer-step-color: var(--color-base-gray-dark);
  --tooltip-guide-footer-button-gap: 8px;
  --tooltip-guide-footer-primary-button: Btn-Solid-Pr, Size=Xs (tokens/buttons.json);
  --tooltip-guide-footer-secondary-button: Btn-Solid-Light-Grey, Size=Xs, hidden by default;
  --tooltip-guide-arrow-size: 12px;
  --tooltip-guide-arrow-radius: 1px;
  --tooltip-guide-arrow-depth: 6px;
  --tooltip-guide-arrow-inset: 28px;
  --tooltip-guide-arrow-color: var(--color-base-white);
  --font-family-sans: "SF Pro", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", sans-serif;
  --font-family-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-text-2xs: 10px;
  --font-size-text-xs: 12px;
  --font-size-text-sm: 13px;
  --font-size-text-nm: 14px;
  --font-size-text-md: 16px;
  --font-size-text-lg: 18px;
  --font-size-text-xlg: 20px;
  --font-size-text-2xlg: 22px;
  --font-size-text-3xlg: 25px;
  --font-size-display-2xs: 20px;
  --font-size-display-xs: 24px;
  --font-size-display-sm: 26px;
  --font-size-display-nm: 28px;
  --font-size-display-md: 32px;
  --font-size-display-lg: 36px;
  --font-size-display-xlg: 40px;
  --font-size-display-2xlg: 44px;
  --font-size-display-3xlg: 50px;
  --font-line-height-normal: 1.6;
  --font-letter-spacing-none: 0em;
  --typography-text-2xs-regular: var(--font-weight-regular) var(--font-size-text-2xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-2xs-medium: var(--font-weight-medium) var(--font-size-text-2xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-2xs-bold: var(--font-weight-bold) var(--font-size-text-2xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-xs-regular: var(--font-weight-regular) var(--font-size-text-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-xs-medium: var(--font-weight-medium) var(--font-size-text-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-xs-bold: var(--font-weight-bold) var(--font-size-text-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-sm-regular: var(--font-weight-regular) var(--font-size-text-sm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-sm-medium: var(--font-weight-medium) var(--font-size-text-sm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-sm-bold: var(--font-weight-bold) var(--font-size-text-sm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-nm-regular: var(--font-weight-regular) var(--font-size-text-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-nm-medium: var(--font-weight-medium) var(--font-size-text-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-nm-bold: var(--font-weight-bold) var(--font-size-text-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-md-regular: var(--font-weight-regular) var(--font-size-text-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-md-medium: var(--font-weight-medium) var(--font-size-text-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-md-bold: var(--font-weight-bold) var(--font-size-text-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-lg-regular: var(--font-weight-regular) var(--font-size-text-lg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-lg-medium: var(--font-weight-medium) var(--font-size-text-lg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-lg-bold: var(--font-weight-bold) var(--font-size-text-lg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-xlg-regular: var(--font-weight-regular) var(--font-size-text-xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-xlg-medium: var(--font-weight-medium) var(--font-size-text-xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-xlg-bold: var(--font-weight-bold) var(--font-size-text-xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-2xlg-regular: var(--font-weight-regular) var(--font-size-text-2xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-2xlg-medium: var(--font-weight-medium) var(--font-size-text-2xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-2xlg-bold: var(--font-weight-bold) var(--font-size-text-2xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-3xlg-regular: var(--font-weight-regular) var(--font-size-text-3xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-3xlg-medium: var(--font-weight-medium) var(--font-size-text-3xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-text-3xlg-bold: var(--font-weight-bold) var(--font-size-text-3xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-2xs-regular: var(--font-weight-regular) var(--font-size-display-2xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-2xs-medium: var(--font-weight-medium) var(--font-size-display-2xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-2xs-bold: var(--font-weight-bold) var(--font-size-display-2xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-xs-regular: var(--font-weight-regular) var(--font-size-display-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-xs-medium: var(--font-weight-medium) var(--font-size-display-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-xs-bold: var(--font-weight-bold) var(--font-size-display-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-sm-regular: var(--font-weight-regular) var(--font-size-display-sm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-sm-medium: var(--font-weight-medium) var(--font-size-display-sm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-sm-bold: var(--font-weight-bold) var(--font-size-display-sm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-nm-regular: var(--font-weight-regular) var(--font-size-display-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-nm-medium: var(--font-weight-medium) var(--font-size-display-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-nm-bold: var(--font-weight-bold) var(--font-size-display-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-md-regular: var(--font-weight-regular) var(--font-size-display-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-md-medium: var(--font-weight-medium) var(--font-size-display-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-md-bold: var(--font-weight-bold) var(--font-size-display-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-lg-regular: var(--font-weight-regular) var(--font-size-display-lg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-lg-medium: var(--font-weight-medium) var(--font-size-display-lg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-lg-bold: var(--font-weight-bold) var(--font-size-display-lg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-xlg-regular: var(--font-weight-regular) var(--font-size-display-xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-xlg-medium: var(--font-weight-medium) var(--font-size-display-xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-xlg-bold: var(--font-weight-bold) var(--font-size-display-xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-2xlg-regular: var(--font-weight-regular) var(--font-size-display-2xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-2xlg-medium: var(--font-weight-medium) var(--font-size-display-2xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-2xlg-bold: var(--font-weight-bold) var(--font-size-display-2xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-3xlg-regular: var(--font-weight-regular) var(--font-size-display-3xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-3xlg-medium: var(--font-weight-medium) var(--font-size-display-3xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-display-3xlg-bold: var(--font-weight-bold) var(--font-size-display-3xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-heading-h1: var(--font-weight-bold) var(--font-size-display-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-heading-h2: var(--font-weight-bold) var(--font-size-display-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-heading-h3: var(--font-weight-bold) var(--font-size-display-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-heading-h4: var(--font-weight-bold) var(--font-size-text-xlg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-heading-h5: var(--font-weight-bold) var(--font-size-text-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-heading-h6: var(--font-weight-bold) var(--font-size-text-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-title-section: var(--font-weight-bold) var(--font-size-text-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-title-block-medium: var(--font-weight-bold) var(--font-size-text-lg)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-title-block-small: var(--font-weight-bold) var(--font-size-text-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-title-block-small-uppercase: var(--font-weight-bold) var(--font-size-text-nm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-others-item-price-before: var(--font-weight-regular) var(--font-size-text-2xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-others-item-price-current: var(--font-weight-bold) var(--font-size-text-sm)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-others-item-commission: var(--font-weight-bold) var(--font-size-text-xs)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-others-form-field-label: var(--font-weight-bold) var(--font-size-text-md)/var(--font-line-height-normal) var(--font-family-sans);
  --typography-others-text-note: var(--font-weight-regular) var(--font-size-text-sm)/var(--font-line-height-normal) var(--font-family-mono);
}

.typography-text-2xs-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-2xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-2xs-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-2xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-2xs-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-2xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-xs-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-xs-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-xs-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-sm-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-sm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-sm-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-sm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-sm-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-sm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-nm-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-nm-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-nm-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-md-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-md-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-md-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-lg-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-lg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-lg-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-lg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-lg-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-lg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-xlg-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-xlg-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-xlg-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-2xlg-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-2xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-2xlg-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-2xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-2xlg-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-2xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-3xlg-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-3xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-3xlg-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-text-3xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-text-3xlg-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-3xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-2xs-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-2xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-2xs-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-2xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-2xs-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-2xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-xs-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-xs-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-xs-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-sm-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-sm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-sm-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-sm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-sm-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-sm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-nm-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-nm-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-nm-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-md-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-md-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-md-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-lg-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-lg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-lg-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-lg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-lg-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-lg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-xlg-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-xlg-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-xlg-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-2xlg-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-2xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-2xlg-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-2xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-2xlg-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-2xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-3xlg-regular {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-display-3xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-3xlg-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-3xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-display-3xlg-bold {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-3xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-heading-h1 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-heading-h2 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-heading-h3 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-heading-h4 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-xlg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-heading-h5 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-heading-h6 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-title-section {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-title-block-medium {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-lg);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-title-block-small {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-title-block-small-uppercase {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-nm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
  text-transform: uppercase;
}

.typography-others-item-price-before {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-2xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
  text-decoration: line-through;
  color: var(--color-base-gray-light);
}

.typography-others-item-price-current {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-sm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
  color: var(--color-base-wa-normal);
}

.typography-others-item-commission {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-xs);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
  color: var(--color-brand-se-normal);
}

.typography-others-form-field-label {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-text-md);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}

.typography-others-text-note {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-text-sm);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-none);
}