.typography {
  --fontfamily-english: Noto Sans;
  --fontfamily-thai: Noto Sans Thai;
  --fontsize-remark: 12;
  --fontsize-caption: 14;
  --fontsize-body: 16;
  --fontsize-title: 20;
  --fontsize-headline2: 34;
  --fontsize-headline1: 40;
  --letterSpacing0: 0;
  --lineheight-150: 150;
  --paragraphSpacing0: 0;
  --paragraphIndent0: 0;
  --listSpacing0: 0;
}

.theme-color {
  /* color */
  --accent-background-blue: #e6f4ff;
  --accent-background-gray: #fafafa;
  --accent-background-green: #ebf5eb;
  --accent-background-orange: #fff6e6;
  --accent-background-red: #fde9e9;
  --accent-border-blue: #0094ff;
  --accent-border-green: #339933;
  --accent-border-orange: #ffa800;
  --accent-border-red: #ea2222;
  --accent-content-blue: #0094ff;
  --accent-content-green: #339933;
  --accent-content-orange: #ffa800;
  --accent-content-red: #ea2222;
  --base-border-border: var(--global-neutral-gray-100);
  --base-border-divider: var(--global-neutral-gray-50);
  --base-content-body: #606060;
  --base-content-caption: #696969;
  --base-content-headline: #1e1e1e;
  --base-content-highlight: var(--global-primary-primary-500);
  --base-content-remark: #9b9b9b;
  --base-content-title: #3a3a3a;
  --base-content-white: #ffffff;
  --base-empty-content: var(--global-primary-primary-300);
  --base-status-error: #ea2222;
  --base-status-info: #0094ff;
  --base-status-success: #339933;
  --base-status-warning: #ffa800;
  --comp-badge-background: var(--base-status-error);
  --comp-badge-content: #ffffff;
  --comp-button-a-link-disable-background: var(--surface-ground);
  --comp-button-a-link-disable-border: var(--surface-ground);
  --comp-button-a-link-disable-content: var(--global-primary-primary-200);
  --comp-button-a-link-hover-background: var(--surface-ground);
  --comp-button-a-link-hover-border: var(--surface-ground);
  --comp-button-a-link-hover-content: var(--global-primary-primary-600);
  --comp-button-a-link-normal-background: var(--surface-ground);
  --comp-button-a-link-normal-border: var(--surface-ground);
  --comp-button-a-link-normal-content: var(--global-primary-primary-500);
  --comp-button-danger-hover-background: var(--accent-background-red);
  --comp-button-danger-hover-border: var(--accent-background-red);
  --comp-button-danger-hover-content: var(--accent-content-red);
  --comp-button-danger-normal-background: var(--surface-ground);
  --comp-button-danger-normal-border: var(--surface-ground);
  --comp-button-danger-normal-content: var(--accent-content-red);
  --comp-button-default-disable-background: var(--surface-ground);
  --comp-button-default-disable-border: var(--global-neutral-gray-100);
  --comp-button-default-disable-content: var(--global-neutral-gray-200);
  --comp-button-default-hover-background: var(--global-neutral-gray-50);
  --comp-button-default-hover-border: var(--global-neutral-gray-100);
  --comp-button-default-hover-content: var(--global-neutral-gray-800);
  --comp-button-default-normal-background: var(--global-neutral-gray-0);
  --comp-button-default-normal-border: var(--global-neutral-gray-100);
  --comp-button-default-normal-content: var(--global-neutral-gray-800);
  --comp-button-disable-normal-background: var(--global-neutral-gray-50);
  --comp-button-disable-normal-content: var(--global-neutral-gray-300);
  --comp-button-ghost-disable-background: var(--surface-ground);
  --comp-button-ghost-disable-border: var(--global-primary-primary-200);
  --comp-button-ghost-disable-content: var(--global-primary-primary-200);
  --comp-button-ghost-hover-background: var(--global-primary-primary-50);
  --comp-button-ghost-hover-border: var(--global-primary-primary-500);
  --comp-button-ghost-hover-content: var(--global-primary-primary-500);
  --comp-button-ghost-normal-background: var(--surface-ground);
  --comp-button-ghost-normal-border: var(--global-primary-primary-500);
  --comp-button-ghost-normal-content: var(--global-primary-primary-500);
  --comp-button-primary-disable-background: var(--global-primary-primary-200);
  --comp-button-primary-disable-border: var(--global-primary-primary-200);
  --comp-button-primary-disable-content: var(--base-content-white);
  --comp-button-primary-hover-background: var(--global-primary-primary-600);
  --comp-button-primary-hover-border: var(--global-primary-primary-600);
  --comp-button-primary-hover-content: var(--base-content-white);
  --comp-button-primary-normal-background: var(--global-primary-primary-500);
  --comp-button-primary-normal-border: var(--global-primary-primary-500);
  --comp-button-primary-normal-content: var(--base-content-white);
  --comp-button-secondary-disable-background: var(--global-primary-primary-50);
  --comp-button-secondary-disable-border: var(--global-primary-primary-50);
  --comp-button-secondary-disable-content: var(--global-primary-primary-300);
  --comp-button-secondary-hover-background: var(--global-primary-primary-100);
  --comp-button-secondary-hover-border: var(--global-primary-primary-100);
  --comp-button-secondary-hover-content: var(--global-primary-primary-500);
  --comp-button-secondary-normal-background: var(--global-primary-primary-50);
  --comp-button-secondary-normal-border: var(--global-primary-primary-50);
  --comp-button-secondary-normal-content: var(--global-primary-primary-500);
  --comp-button-tertiary-disable-background: var(--surface-ground);
  --comp-button-tertiary-disable-border: var(--surface-ground);
  --comp-button-tertiary-disable-content: var(--global-primary-primary-200);
  --comp-button-tertiary-hover-background: var(--global-primary-primary-50);
  --comp-button-tertiary-hover-border: var(--global-primary-primary-50);
  --comp-button-tertiary-hover-content: var(--global-primary-primary-500);
  --comp-button-tertiary-normal-background: var(--surface-ground);
  --comp-button-tertiary-normal-border: var(--surface-ground);
  --comp-button-tertiary-normal-content: var(--global-primary-primary-500);
  --comp-card-campaign-card-background: #ffffff;
  --comp-card-campaign-card-content: var(--base-content-title);
  --comp-card-campaign-card-divider: var(--surface-underground);
  --comp-card-campaign-card-point: var(--global-primary-primary-500);
  --comp-card-campaign-card-remark: var(--base-content-remark);
  --comp-card-member-card-default-background: var(--global-primary-primary-50);
  --comp-card-member-card-default-badge: var(--global-primary-primary-500);
  --comp-card-member-card-default-content: var(--base-content-title);
  --comp-card-member-card-default-content-on-badge: var(--base-content-white);
  --comp-card-member-card-default-icon: var(--global-primary-primary-500);
  --comp-card-member-card-default-image-border: var(--comp-card-member-card-default-badge);
  --comp-card-member-card-default-subtitle: var(--base-content-body);
  --comp-card-member-card-tier-1-0: #b35018;
  --comp-card-member-card-tier-1-100: #b35018;
  --comp-card-member-card-tier-1-25: #f4a070;
  --comp-card-member-card-tier-1-badge: #994516;
  --comp-card-member-card-tier-1-content-on-badge: var(--base-content-white);
  --comp-card-member-card-tier-1-image-border: var(--comp-card-member-card-tier-1-badge);
  --comp-card-member-card-tier-1-dark-background: #f9af84;
  --comp-card-member-card-tier-1-dark-content: #a8430a;
  --comp-card-member-card-tier-1-light-background: #f9af84;
  --comp-card-member-card-tier-1-light-content: #ffffff;
  --comp-card-member-card-tier-2-0: #a4a4a4;
  --comp-card-member-card-tier-2-100: #aeaeae;
  --comp-card-member-card-tier-2-25: #c7c7c7;
  --comp-card-member-card-tier-2-badge: #707070;
  --comp-card-member-card-tier-2-content-on-badge: var(--base-content-white);
  --comp-card-member-card-tier-2-image-border: var(--comp-card-member-card-tier-2-badge);
  --comp-card-member-card-tier-2-dark-background: #b9b9b9;
  --comp-card-member-card-tier-2-dark-content: #777777;
  --comp-card-member-card-tier-2-light-background: #b9b9b9;
  --comp-card-member-card-tier-2-light-content: #ffffff;
  --comp-card-member-card-tier-3-0: #ac914b;
  --comp-card-member-card-tier-3-100: #bda156;
  --comp-card-member-card-tier-3-25: #cab274;
  --comp-card-member-card-tier-3-badge: #998244;
  --comp-card-member-card-tier-3-content-on-badge: var(--base-content-white);
  --comp-card-member-card-tier-3-image-border: var(--comp-card-member-card-tier-3-badge);
  --comp-card-member-card-tier-3-dark-background: #d8be76;
  --comp-card-member-card-tier-3-dark-content: #9f843b;
  --comp-card-member-card-tier-3-light-background: #d8be76;
  --comp-card-member-card-tier-3-light-content: #ffffff;
  --comp-card-member-card-tier-4-0: #393939;
  --comp-card-member-card-tier-4-100: #393939;
  --comp-card-member-card-tier-4-25: #575757;
  --comp-card-member-card-tier-4-badge: #222222;
  --comp-card-member-card-tier-4-content-on-badge: var(--base-content-white);
  --comp-card-member-card-tier-4-image-border: var(--comp-card-member-card-tier-4-badge);
  --comp-card-member-card-tier-4-dark-background: #616161;
  --comp-card-member-card-tier-4-dark-content: #1e1e1e;
  --comp-card-member-card-tier-4-light-background: #616161;
  --comp-card-member-card-tier-4-light-content: #ffffff;
  --comp-card-member-card-tier-5-0: #2b337b;
  --comp-card-member-card-tier-5-100: #2b337b;
  --comp-card-member-card-tier-5-25: #424b98;
  --comp-card-member-card-tier-5-badge: #11174d;
  --comp-card-member-card-tier-5-content-on-badge: var(--base-content-white);
  --comp-card-member-card-tier-5-image-border: var(--comp-card-member-card-tier-5-badge);
  --comp-card-member-card-tier-5-dark-background: #4b549f;
  --comp-card-member-card-tier-5-dark-content: #11174d;
  --comp-card-member-card-tier-5-light-background: #4b549f;
  --comp-card-member-card-tier-5-light-content: #ffffff;
  --comp-card-mini-member-card-background: #ffffff;
  --comp-card-mini-member-card-badge: var(--global-primary-primary-500);
  --comp-card-mini-member-card-content: var(--base-content-title);
  --comp-card-mini-member-card-content-on-badge: var(--base-content-white);
  --comp-card-mini-member-card-image-border: var(--global-primary-primary-500);
  --comp-card-mini-member-card-point: var(--base-content-title);
  --comp-checkbox-default-background: var(--surface-ground);
  --comp-checkbox-default-border: var(--global-neutral-gray-100);
  --comp-checkbox-disable-background: var(--global-primary-primary-200);
  --comp-checkbox-disable-border: var(--global-primary-primary-200);
  --comp-checkbox-disable-icon: var(--base-content-white);
  --comp-checkbox-selected-background: var(--global-primary-primary-500);
  --comp-checkbox-selected-border: var(--global-primary-primary-500);
  --comp-checkbox-selected-icon: var(--base-content-white);
  --comp-giftbox-body-box: var(--global-primary-primary-700);
  --comp-giftbox-bow: var(--global-primary-primary-300);
  --comp-giftbox-lid-box: var(--global-primary-primary-600);
  --comp-input-collectpoints-error-background: var(--system-white);
  --comp-input-collectpoints-error-border: var(--base-status-error);
  --comp-input-collectpoints-error-camera-background: var(--global-primary-primary-500);
  --comp-input-collectpoints-error-camera-icon: var(--base-content-white);
  --comp-input-collectpoints-error-clear-icon: var(--base-content-remark);
  --comp-input-collectpoints-error-content: var(--base-content-title);
  --comp-input-collectpoints-error-delete-icon-active: var(--base-content-title);
  --comp-input-collectpoints-error-delete-icon-inactive: var(--base-content-remark);
  --comp-input-collectpoints-error-reamrk: var(--base-status-error);
  --comp-input-collectpoints-filled-background: var(--system-white);
  --comp-input-collectpoints-filled-border: var(--global-neutral-gray-100);
  --comp-input-collectpoints-filled-camera-background: var(--global-primary-primary-500);
  --comp-input-collectpoints-filled-camera-icon: var(--base-content-white);
  --comp-input-collectpoints-filled-clear-icon: var(--base-content-remark);
  --comp-input-collectpoints-filled-content: var(--base-content-title);
  --comp-input-collectpoints-filled-delete-icon-active: var(--base-content-title);
  --comp-input-collectpoints-filled-delete-icon-inactive: var(--base-content-remark);
  --comp-input-collectpoints-normal-background: var(--system-white);
  --comp-input-collectpoints-normal-border: var(--global-neutral-gray-100);
  --comp-input-collectpoints-normal-camera-background: var(--global-primary-primary-500);
  --comp-input-collectpoints-normal-camera-icon: var(--base-content-white);
  --comp-input-collectpoints-normal-delete-icon-active: var(--base-content-title);
  --comp-input-collectpoints-normal-delete-icon-inactive: var(--base-content-remark);
  --comp-input-collectpoints-normal-placeholder: var(--global-neutral-gray-100);
  --comp-input-collectpoints-typing-background: var(--system-white);
  --comp-input-collectpoints-typing-border: var(--global-primary-primary-500);
  --comp-input-collectpoints-typing-camera-background: var(--global-primary-primary-500);
  --comp-input-collectpoints-typing-camera-icon: var(--base-content-white);
  --comp-input-collectpoints-typing-content: var(--base-content-title);
  --comp-input-collectpoints-typing-delete-icon-active: var(--base-content-title);
  --comp-input-collectpoints-typing-delete-icon-inactive: var(--base-content-remark);
  --comp-input-collectpoints-typing-divider: var(--global-neutral-gray-100);
  --comp-input-collectpoints-typing-placeholder: var(--global-neutral-gray-100);
  --comp-input-disable-action: var(--global-neutral-gray-300);
  --comp-input-disable-background: var(--global-neutral-gray-50);
  --comp-input-disable-border: var(--global-neutral-gray-100);
  --comp-input-disable-content: var(--global-neutral-gray-300);
  --comp-input-disable-divider: var(--global-neutral-gray-100);
  --comp-input-disable-placeholder: var(--global-neutral-gray-100);
  --comp-input-error-action: var(--global-primary-primary-500);
  --comp-input-error-background: #ffffff;
  --comp-input-error-border: var(--accent-border-red);
  --comp-input-error-content: var(--base-content-title);
  --comp-input-error-divider: var(--global-neutral-gray-100);
  --comp-input-error-placeholder: var(--global-neutral-gray-100);
  --comp-input-filled-action: var(--global-primary-primary-500);
  --comp-input-filled-background: #ffffff;
  --comp-input-filled-border: var(--global-neutral-gray-100);
  --comp-input-filled-content: var(--base-content-title);
  --comp-input-filled-divider: var(--global-neutral-gray-100);
  --comp-input-filled-placeholder: var(--global-neutral-gray-100);
  --comp-input-normal-action: var(--global-primary-primary-500);
  --comp-input-normal-background: #ffffff;
  --comp-input-normal-border: var(--global-neutral-gray-100);
  --comp-input-normal-divider: var(--global-neutral-gray-100);
  --comp-input-normal-placeholder: var(--global-neutral-gray-100);
  --comp-input-typing-action: var(--global-primary-primary-500);
  --comp-input-typing-background: #ffffff;
  --comp-input-typing-border: var(--global-primary-primary-500);
  --comp-input-typing-content: var(--base-content-title);
  --comp-input-typing-divider: var(--global-neutral-gray-100);
  --comp-input-typing-placeholder: var(--global-neutral-gray-100);
  --comp-language-dropdown-normal-action: var(--base-content-white);
  --comp-language-dropdown-normal-background: var(--comp-navigation-menu-header-background);
  --comp-language-dropdown-normal-border: #ffffff;
  --comp-language-dropdown-normal-content: var(--base-content-white);
  --comp-navigation-menu-footer-active: var(--global-primary-primary-500);
  --comp-navigation-menu-footer-background: #ffffff;
  --comp-navigation-menu-footer-inactive: var(--global-neutral-gray-300);
  --comp-navigation-menu-header-background: var(--global-primary-primary-500);
  --comp-navigation-menu-header-content: var(--base-content-white);
  --comp-popup-background: var(--surface-ground);
  --comp-popup-header: var(--global-primary-primary-500);
  --comp-popup-highlight: var(--global-primary-primary-500);
  --comp-popup-remark: var(--base-content-remark);
  --comp-popup-subtitle: var(--base-content-caption);
  --comp-popup-title: var(--base-content-title);
  --comp-qty-active-background: var(--surface-ground);
  --comp-qty-active-border: var(--global-primary-primary-500);
  --comp-qty-active-icon: var(--global-primary-primary-500);
  --comp-qty-inactive-background: var(--surface-ground);
  --comp-qty-inactive-border: var(--base-border-border);
  --comp-qty-inactive-icon: var(--global-neutral-gray-300);
  --comp-radio-default-background: var(--surface-ground);
  --comp-radio-default-border: var(--global-neutral-gray-100);
  --comp-radio-disable-background: var(--surface-ground);
  --comp-radio-disable-border: var(--global-primary-primary-200);
  --comp-radio-disable-item: var(--global-primary-primary-200);
  --comp-radio-selected-background: var(--surface-ground);
  --comp-radio-selected-border: var(--global-primary-primary-500);
  --comp-radio-selected-item: var(--global-primary-primary-500);
  --comp-scrollbar-thumb-bg: var(--base-content-highlight);
  --comp-scrollbar-track-bg: var(--surface-underground);
  --comp-select-item-normal-background: var(--surface-ground);
  --comp-select-item-normal-border: var(--base-border-border);
  --comp-select-item-normal-content: var(--base-content-title);
  --comp-select-item-selected-background: var(--global-primary-primary-50);
  --comp-select-item-selected-border: var(--global-primary-primary-500);
  --comp-select-item-selected-content: var(--global-primary-primary-500);
  --comp-step-item-active-background: var(--surface-ground);
  --comp-step-item-active-border: var(--global-primary-primary-500);
  --comp-step-item-active-content: var(--global-primary-primary-500);
  --comp-step-item-complete-background: var(--global-primary-primary-500);
  --comp-step-item-complete-border: var(--global-primary-primary-500);
  --comp-step-item-complete-content: var(--base-content-white);
  --comp-step-item-inactive-background: var(--surface-ground);
  --comp-step-item-inactive-border: var(--base-border-border);
  --comp-step-item-inactive-content: var(--base-content-remark);
  --comp-step-line-active-color: var(--global-primary-primary-500);
  --comp-step-line-inactive-color: var(--base-border-border);
  --comp-tabs-tab-group-tab-bar: #ffffff;
  --comp-tabs-tab-group-active-background: var(--global-primary-primary-500);
  --comp-tabs-tab-group-active-content: var(--base-content-white);
  --comp-tabs-tab-group-inactive-background: var(--global-primary-primary-0);
  --comp-tabs-tab-group-inactive-content: var(--base-content-remark);
  --comp-tabs-tab-line-tab-bar: #ffffff;
  --comp-tabs-tab-line-active-border: var(--global-primary-primary-500);
  --comp-tabs-tab-line-active-content: var(--global-primary-primary-500);
  --comp-tabs-tab-line-inactive-content: var(--base-content-remark);
  --comp-tabs-tab-active-background: var(--global-primary-primary-500);
  --comp-tabs-tab-active-border: var(--global-primary-primary-500);
  --comp-tabs-tab-active-content: var(--base-content-white);
  --comp-tabs-tab-inactive-background: var(--global-primary-primary-0);
  --comp-tabs-tab-inactive-border: var(--global-primary-primary-500);
  --comp-tabs-tab-inactive-content: var(--global-primary-primary-500);
  --comp-upload-error-background: #ffffff;
  --comp-upload-error-border: var(--base-status-error);
  --comp-upload-normal-background: #ffffff;
  --comp-upload-normal-border: var(--global-neutral-gray-100);
  --global-neutral-gray-0: #ffffff;
  --global-neutral-gray-100: #d1d1d1;
  --global-neutral-gray-200: #bababa;
  --global-neutral-gray-300: #9b9b9b;
  --global-neutral-gray-400: #878787;
  --global-neutral-gray-50: #f0f0f0;
  --global-neutral-gray-500: #696969;
  --global-neutral-gray-600: #606060;
  --global-neutral-gray-700: #4b4b4b;
  --global-neutral-gray-800: #3a3a3a;
  --global-neutral-gray-900: #2c2c2c;
  --global-primary-primary-0: #ffffff;
  --global-primary-primary-100: #fde3b0;
  --global-primary-primary-200: #fcd68a;
  --global-primary-primary-300: #fbc355;
  --global-primary-primary-400: #fab834;
  --global-primary-primary-50: #fef6e6;
  --global-primary-primary-500: #f9a601;
  --global-primary-primary-600: #e39701;
  --global-primary-primary-700: #b17601;
  --global-primary-primary-800: #895b01;
  --global-primary-primary-900: #694600;
  --global-secondary-secondary-0: #ffffff;
  --global-secondary-secondary-100: #c7c7c7;
  --global-secondary-secondary-200: #ababab;
  --global-secondary-secondary-300: #858585;
  --global-secondary-secondary-400: #6d6d6d;
  --global-secondary-secondary-50: #ededed;
  --global-secondary-secondary-500: #494949;
  --global-secondary-secondary-600: #424242;
  --global-secondary-secondary-700: #343434;
  --global-secondary-secondary-800: #282828;
  --global-secondary-secondary-900: #1f1f1f;
  --global-tertiary-tertiary-0: #ffffff;
  --global-tertiary-tertiary-100: #b7c3d1;
  --global-tertiary-tertiary-200: #95a6bb;
  --global-tertiary-tertiary-300: #647e9d;
  --global-tertiary-tertiary-400: #466589;
  --global-tertiary-tertiary-50: #ededed;
  --global-tertiary-tertiary-500: #183e6c;
  --global-tertiary-tertiary-600: #163862;
  --global-tertiary-tertiary-700: #112c4d;
  --global-tertiary-tertiary-800: #0d223b;
  --global-tertiary-tertiary-900: #0a1a2d;
  --surface-ground: #ffffff;
  --surface-underground: #fafafa;
  --system-black: #000000;
  --system-white: #ffffff;

}

.dimension {
  --radius-rounded: 100;
  --radius-xl: 20;
  --radius-lg: 16;
  --radius-md: 12;
  --radius-sm: 8;
  --radius-xs: 4;
  --size-xs2: 16;
  --size-xs: 20;
  --size-sm: 24;
  --size-md: 28;
  --size-lg: 32;
  --size-xl: 40;
  --size-xl2: 44;
  --borderwidth-reg: 1;
  --borderwidth-bold: 2;
  --size-xs3: 12;
  --gap-lg: 16;
  --gap-sm: 8;
  --gap-md: 12;
  --gap-xs: 4;
  --gap-xs2: 2;
  --radius-xl2: 24;
  --radius-xl3: 28;
  --radius-xl4: 32;
  --radius-xl5: 36;
  --radius-xl6: 40;
  --radius-xl7: 44;
  --radius-xl8: 48;
  --padding-xs: 4;
  --padding-sm: 8;
  --padding-md: 12;
  --padding-lg: 16;
  --padding-xl: 20;
  --padding-xl2: 24;
  --padding-xl3: 28;
  --padding-xl4: 32;
  --padding-xl5: 36;
  --padding-xl6: 40;
  --padding-xl7: 44;
  --padding-xl8: 48;
  --padding-none: 0;
  --size-xl3: 48;
  --size-xl4: 56;
  --size-xl5: 64;
  --size-xl6: 72;
  --size-xl7: 80;
  --gap-xl: 20;
  --gap-xl2: 24;
  --gap-xl3: 32;
  --gap-xl4: 40;
}