.dark,
.light {
  --vip-benefit-card-background: linear-gradient(
    to top,
    rgba(255, 249, 168, 0.4) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  --vip-fast-track-border-color: hsla(207, 100%, 51%, 1);
  --vip-rank-gradient: linear-gradient(
    87deg,
    rgba(255, 255, 255, 0.8) 38.15%,
    rgba(255, 255, 255, 0.8) 129.95%
  );
  --game-card-play-button-gradient-from: 53, 100%, 50%, 1;
  --game-card-play-button-gradient-to: 53, 100%, 50%, 1;
  --game-card-play-button-icon-color: #030b12;
  --background-accent-gradient-1: linear-gradient(153deg, #ff7ffa 4.38%, #c059ff 81.13%);
  --neutral-1000: 208, 71%, 4%;
  --neutral-1000-70: 208, 71%, 4%, 0.7;
  --neutral-200: 226, 17%, 45%;
  --neutral-150: 226, 12%, 53%;
  --neutral-100: 0, 0%, 60%;
  --neutral-100-50: 0, 0%, 60%, 0.5;
  --neutral-50: 0, 0%, 80%;
  --red-500: 0, 100%, 62%;
  --red-400: 0, 100%, 63%;
  --red-400-30: 0, 100%, 63%, 0.3;
  --red-400-15: 0, 100%, 63%, 0.15;
  --red-400-10: 0, 100%, 63%, 0.1;
  --green-600: 144, 82%, 45%;
  --green-600-30: 144, 82%, 45%, 0.3;
  --green-600-10: 144, 82%, 45%, 0.1;
  --green-500: 144, 90%, 61%;
  --green-500-30: 144, 90%, 61%, 0.3;
  --blue-500: 47, 100%, 63%;
  --blue-400: 212, 92%, 55%;
  --blue-400-30: 212, 92%, 55%, 0.3;
  --blue-400-10: 212, 92%, 55%, 0.1;
  --yellow-700: 29, 100%, 50%;
  --yellow-500: 42, 99%, 62%;
  --yellow-500-30: 42, 99%, 62%, 0.3;
  --yellow-500-10: 42, 99%, 62%, 0.1;
  --yellow-300: 53, 100%, 50%;
  --pink-400: 324, 99%, 61%;
  --pink-300: 297, 100%, 69%;
  --white-000-contrast: 0, 0%, 100%;
  --white-000-contrast-10: 0, 0%, 100%, 0.1;
  --white-000-contrast-40: 0, 0%, 100%, 0.4;
  --background-basic-1000: var(--neutral-1000);
  --background-basic-1000-70: var(--neutral-1000-70);
  --background-basic-900: var(--neutral-900);
  --background-basic-800: var(--neutral-800);
  --background-basic-700: var(--neutral-700);
  --background-basic-600: var(--neutral-600);
  --background-basic-500: var(--neutral-500);
  --background-basic-400: var(--neutral-400);
  --background-basic-300: var(--neutral-300);
  --background-basic-200: var(--neutral-200);
  --background-basic-150: var(--neutral-150);
  --background-basic-100: var(--neutral-100);
  --background-basic-100-50: var(--neutral-100-50);
  --background-basic-50: var(--neutral-50);
  --background-basic-000-10: var(--white-000-10);
  --background-basic-contrast: var(--white-000-contrast);
  --background-accent-blue-500: var(--yellow-300);
  --background-accent-green-700: var(--green-700);
  --background-accent-green-500-30: var(--green-500-30);
  --background-accent-red-500: var(--red-500);
  --background-accent-pink-400: var(--pink-400);
  --background-accent-yellow-500-30: var(--yellow-500-30);
  --background-accent-yellow-200: var(--yellow-200);
  --background-semantic-error: var(--red-400);
  --background-semantic-error-10: var(--red-400-10);
  --background-semantic-warning: var(--yellow-500);
  --background-semantic-warning-10: var(--yellow-500-10);
  --background-semantic-success: var(--green-600);
  --background-semantic-success-10: var(--green-600-10);
  --background-semantic-extra: var(--blue-400);
  --background-semantic-extra-10: var(--blue-400-10);
  --background-extra-primary: var(--Extra-500);
  --banner-contrast: var(--white-000-contrast);
  --radio-switch-checkbox-border-default: var(--neutral-200);
  --radio-switch-checkbox-border-active: var(--yellow-300);
  --radio-switch-checkbox-border-error: var(--border-semantic-error);
  --radio-switch-checkbox-bg-active: var(--yellow-300);
  --radio-switch-checkbox-bg-active-switch: var(--yellow-300);
  --radio-switch-checkbox-icon-default: var(--neutral-200);
  --radio-switch-checkbox-icon-active: var(--neutral-1000);
  --border-basic-500: var(--neutral-500);
  --border-basic-400: var(--neutral-400);
  --border-basic-200: var(--neutral-200);
  --border-basic-000-contrast-50: var(--white-000-contrast-50);
  --border-accent-blue-500: var(--yellow-300);
  --border-accent-yellow-400: var(--yellow-400);
  --border-accent-brand: var(--yellow-300);
  --border-semantic-error: var(--red-400);
  --border-semantic-error-30: var(--red-400-30);
  --border-semantic-warning: var(--yellow-500);
  --border-semantic-warning-30: var(--yellow-500-30);
  --border-semantic-success: var(--green-600);
  --border-semantic-success-30: var(--green-600-30);
  --border-semantic-extra: var(--blue-400);
  --border-semantic-extra-30: var(--blue-400-30);
  --button-primary-text-default: var(--neutral-1000);
  --button-primary-text-active: var(--neutral-1000);
  --button-primary-icon-default: var(--neutral-1000);
  --button-primary-icon-active: var(--neutral-1000);
  --button-primary-vip-text-default: var(--neutral-1000);
  --button-primary-vip-text-active: var(--neutral-1000);
  --button-primary-vip-icon-default: var(--neutral-1000);
  --button-primary-vip-icon-active: var(--neutral-1000);
  --button-primary-border-default: 0, 0%, 100%, 0.3;
  --button-primary-border-hover: 0, 0%, 100%, 0;
  --button-primary-bg-default: linear-gradient(153deg, #ffe100 4.38%, #ffe100 81.13%);
  --button-primary-bg-hover: linear-gradient(153deg, #ffcc51 4.38%, #ffcc51 81.13%);
  --button-secondary-text-default: var(--white-000);
  --button-secondary-text-active: var(--neutral-1000);
  --button-secondary-icon-default: var(--white-000);
  --button-secondary-icon-active: var(--neutral-1000);
  --button-secondary-bg-default: var(--neutral-500);
  --button-secondary-bg-active: var(--yellow-300);
  --button-secondary-border-default: var(--neutral-300);
  --button-secondary-border-active: var(--white-000-10);
  --button-secondary-vip-text-default: var(--white-000);
  --button-secondary-vip-text-active: var(--white-000);
  --button-secondary-vip-icon-default: var(--white-000);
  --button-secondary-vip-icon-active: var(--white-000);
  --button-extra-text-default: var(--neutral-1000);
  --button-extra-text-active: var(--neutral-1000);
  --button-extra-icon-default: var(--neutral-1000);
  --button-extra-icon-active: var(--neutral-1000);
  --button-extra-bg-default: linear-gradient(153deg, #fff 4.38%, #d9d9d9 81.13%);
  --button-extra-bg-hover: linear-gradient(153deg, #909090 4.38%, #fff 81.13%);
  --button-extra-2-bg-default: var(--white-000-contrast-10);
  --button-extra-2-bg-active: var(--white-000-contrast);
  --button-extra-2-text-default: var(--white-000-contrast);
  --button-extra-2-text-active: var(--neutral-1000);
  --button-extra-2-border-default: var(--white-000-contrast-40);
  --button-extra-2-border-active: var(--white-000-contrast);
  --button-extra-2-icon-default: var(--white-000-contrast);
  --button-extra-2-icon-active: var(--neutral-1000);
  --button-blured-bg-default: var(--white-000-15);
  --button-blured-bg-active: var(--white-000);
  --button-blured-border-default: var(--white-000-15);
  --button-blured-border-active: var(--white-000);
  --button-blured-text-default: var(--white-000);
  --button-blured-text-active: var(--neutral-900);
  --button-blured-icon-default: var(--white-000);
  --button-blured-icon-active: var(--neutral-900);
  --input-dropdown-bg-default: var(--neutral-500);
  --input-dropdown-bg-active: var(--neutral-800);
  --input-dropdown-border-default: var(--neutral-300);
  --input-dropdown-border-active: var(--neutral-150);
  --input-dropdown-text-placeholder: var(--white-000-50);
  --input-dropdown-text: var(--white-000);
  --input-dropdown-icon-default: var(--white-000-50);
  --input-dropdown-icon-active: var(--white-000);
  --input-dropdown-item-background-checked: var(--yellow-300);
  --input-dropdown-item-background-active: var(--yellow-300);
  --input-dropdown-item-text-active: var(--text-contrast);
  --text-primary: var(--white-000);
  --text-secondary: var(--neutral-100);
  --text-contrast: var(--neutral-1000);
  --text-contrast-000-50: var(--neutral-1000-70);
  --text-banner-contrast: var(--white-000-contrast);
  --text-link: var(--blue-400);
  --text-accent-green-600: var(--green-600);
  --text-accent-green-500: var(--green-500);
  --text-accent-blue-400: var(--yellow-400);
  --text-accent-pink-400: var(--yellow-300);
  --text-accent-yellow-700: var(--yellow-700);
  --text-semantic-error: var(--red-400);
  --text-semantic-warning: var(--yellow-500);
  --text-semantic-success: var(--green-600);
  --text-semantic-extra: var(--blue-400);
  --icon-basic-white-contrast: var(--neutral-1000);
  --icon-basic-white: var(--white-000);
  --icon-basic-white-50: var(--white-000-50);
  --icon-basic-white-25: var(--white-000-25);
  --icon-basic-100: var(--neutral-100);
  --icon-basic-100-50: var(--neutral-100-50);
  --icon-accent-blue-500: var(--yellow-300);
  --icon-accent-blue-400: var(--yellow-400);
  --icon-accent-yellow-700: var(--yellow-700);
  --icon-accent-yellow-400: var(--yellow-400);
  --icon-accent-pink-400: var(--pink-400);
  --icon-accent-green-600: var(--green-600);
  --icon-accent-dark-800: var(--neutral-800);
  --icon-accent-dark-500: var(--neutral-500);
  --icon-semantic-error: var(--red-400);
  --icon-semantic-warning: var(--yellow-500);
  --icon-semantic-success: var(--green-600);
  --icon-semantic-extra: var(--blue-400);
  --step-back: var(--neutral-400);
  --step-progress: var(--pink-300);
  --loader-circular: var(--blue-500);
  --dialog-bg: 240, 31%, 15%;
  --dialog-title-color: 0, 0%, 100%;
  --dialog-border-color: 240, 31%, 15%;
  --popover-background: var(--background-basic-700);
  --popover-border-color: var(--border-basic-400);
  --progress-bar: var(--neutral-50);
  --progress-bar-active: var(--blue-400);
  --tabs-list-border: var(--border-basic-400);
  --tabs-trigger-bg-inactive: 0, 0, 0, 0;
  --tabs-trigger-border-active: var(--button-secondary-bg-active);
  --tab-header-active-trigger-background: var(--button-secondary-bg-active); /*here*/
  --tab-header-inactive-trigger-text: var(--text-primary);
  --tab-header-active-trigger-text: var(--text-contrast);
  --bg-tooltip: var(--background-basic-700);
  --modal-background: var(--background-basic-700);
  --modal-text: var(--text-primary);
  --modal-border: var(--border-basic-400);
  --modal-overlay: 0deg 0% 0%/70.2%;
  --calendar-light-icon: hsl(var(--neutral-50));
  --calendar-light-background: hsl(var(--white-000-contrast));
  --calendar-light-border: hsl(240, 6%, 90%);
  --calendar-light-day-color: hsl(228, 22%, 48%);
  --calendar-light-selected-background: hsla(var(--background-accent-blue-500));
  --calendar-light-selected-color: hsla(var(--text-contrast));
  --calendar-light-hover-background: hsl(var(--blue-400));
  --calendar-light-disabled-background: hsl(var(--neutral-900));
  --calendar-light-disabled-color: hsl(var(--white-000));
  --calendar-light-arrows: hsl(var(--white-000));
  --promotion-icon-color: var(--icon-accent-green-600);
  --loyalty-icon-color: var(--text-contrast);
  --mobile-signup-banner-gradient: linear-gradient(135deg, #4e1d78 0%, #ba5bff 100%);
}

.light {
  --neutral-900: 0, 0%, 94%;
  --neutral-800: 0, 0%, 94%;
  --neutral-700: 0, 0%, 100%;
  --neutral-600: 0, 0%, 94%;
  --neutral-500: 0, 0%, 96%;
  --neutral-400: 0, 0%, 90%;
  --neutral-300: 225, 13%, 69%;
  --green-700: 148, 77%, 42%;
  --yellow-400: 45, 98%, 49%;
  --white-000: 240, 4%, 16%;
  --white-000-50: 240, 4%, 16%, 0.5;
  --white-000-40: 240, 4%, 16%, 0.4;
  --white-000-25: 240, 4%, 16%, 0.25;
  --white-000-15: 240, 4%, 16%, 0.15;
  --white-000-10: 240, 4%, 16%, 0.1;
  --banner-text-color: var(--neutral-900);
}

.dark {
  --vip-benefit-card-background: linear-gradient(
    to top,
    rgba(249, 238, 35, 0.4) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  --vip-rank-gradient: linear-gradient(
    90deg,
    rgba(28, 32, 37, 0.8) 45.6%,
    rgba(6, 6, 12, 0.8) 100%
  );
  --background-extra: 216, 87%, 18%;
  --neutral-900: 228, 14%, 7%;
  --neutral-800: 228, 14%, 7%;
  --neutral-700: 213, 14%, 13%;
  --neutral-600: 227, 17%, 16%;
  --neutral-500: 225, 21%, 22%;
  --neutral-400: 224, 19%, 28%;
  --neutral-300: 225, 20%, 35%;
  --green-700: 148, 77%, 41%;
  --yellow-400: 45, 99%, 49%;
  --white-000: 0, 0%, 100%;
  --white-000-50: 0, 0%, 100%, 0.5;
  --white-000-40: 0, 0%, 100%, 0.4;
  --white-000-25: 0, 0%, 100%, 0.25;
  --white-000-15: 0, 0%, 100%, 0.15;
  --white-000-10: 0, 0%, 100%, 0.1;
  --text-contrast: var(--neutral-1000);
  --calendar-dark-background: hsla(var(--background-basic-500));
  --calendar-dark-selected-background: hsla(var(--background-accent-blue-500));
  --calendar-dark-selected-color: hsla(var(--text-contrast));
  --calendar-dark-color: hsla(var(--text-primary));
  --calendar-dark-icon: hsla(var(--neutral-100));
  --calendar-dark-border: hsla(var(--border-basic-400));
  --calendar-dark-day-color: hsla(var(--neutral-50));
  --calendar-dark-day-color-disabled: hsla(var(--neutral-100));
  --calendar-dark-hover-background: linear-gradient(152.99deg, #6658ff 4.38%, #3627fe 81.13%);
  --calendar-dark-disabled-background: hsla(var(--neutral-900));
  --calendar-dark-arrows: hsl(var(--neutral-900));
  --banner-text-color: var(--text-primary);
}