.dark,
.light {
  --vip-benefit-card-background: conic-gradient(
    from 180deg at 50% 39.14%,
    rgba(195, 190, 255, 0.4) 360deg,
    rgba(232, 232, 255, 0.4) 345deg
  );
  --vip-fast-track-border-color: #d11fe0;
  --vip-rank-arrows-color: #7272ae;
  --vip-rank-gradient: linear-gradient(
    87deg,
    rgba(255, 255, 255, 0.8) 38.15%,
    rgba(189, 153, 255, 0.8) 129.95%
  );
  --text-banner-contrast: var(--white-000-contrast);
  --game-card-play-button-gradient-from: 302, 100%, 67%, 1;
  --game-card-play-button-gradient-to: 303, 100%, 67%, 1;
  --game-card-play-button-icon-color: #fff;
  --game-card-play-button-shadow-color: 209, 23, 255, 1;
  --game-image-placeholder-blur: 15px;
  --background-accent-gradient-1: linear-gradient(153deg, #ff58f8 4.38%, #ac27fe 81.13%);
  --neutral-1000: 240, 31%, 6%;
  --neutral-1000-70: 240, 31%, 6%, 0.7;
  --neutral-200: 240, 24%, 50%;
  --neutral-150: 240, 56%, 67%;
  --neutral-100: 228, 29%, 61%;
  --neutral-100-50: 228, 29%, 61%, 0.5;
  --neutral-50: 228, 55%, 78%;
  --red-500: 0, 76%, 44%;
  --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-700: 148, 63%, 39%;
  --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: 240, 100%, 65%;
  --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-400: 57, 100%, 53%;
  --pink-400: 324, 100%, 50%;
  --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(--blue-500);
  --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-semantic-error: var(--red-400);
  --background-semantic-warning: var(--yellow-500);
  --background-semantic-success: var(--green-600);
  --background-semantic-extra: var(--blue-400);
  --background-semantic-extra-10: var(--blue-400-10);
  --radio-switch-checkbox-border-default: var(--neutral-200);
  --radio-switch-checkbox-border-active: var(--blue-500);
  --radio-switch-checkbox-border-error: var(--border-semantic-error);
  --radio-switch-checkbox-bg-active: var(--blue-500);
  --radio-switch-checkbox-bg-active-switch: var(--green-600);
  --radio-switch-checkbox-icon-default: var(--neutral-200);
  --border-basic-500: var(--neutral-500);
  --border-basic-400: var(--neutral-400);
  --border-basic-200: var(--neutral-200);
  --border-accent-blue-500: var(--blue-500);
  --border-accent-brand: var(--blue-500);
  --border-semantic-error: var(--red-400);
  --border-semantic-warning: var(--yellow-500);
  --border-semantic-success: var(--green-600);
  --border-semantic-extra: var(--blue-400);
  --border-semantic-blue-30: var(--blue-400-30);
  --button-primary-border-default: 0, 0%, 100%, 0.3;
  --button-primary-border-hover: 0, 0%, 100%, 0;
  --button-primary-bg-default: linear-gradient(153deg, #6658ff 4.38%, #3627fe 81.13%);
  --button-primary-bg-hover: linear-gradient(153deg, #4234ff 4.38%, #7e72ff 81.13%);
  --button-secondary-text-default: var(--white-000);
  --button-secondary-icon-default: var(--white-000);
  --button-secondary-bg-default: var(--neutral-500);
  --button-secondary-bg-active: var(--blue-500);
  --button-secondary-border-default: var(--neutral-300);
  --button-secondary-border-active: var(--white-000-10);
  --button-extra-bg-default: linear-gradient(153deg, #fff 4.38%, #ccceff 81.13%);
  --button-extra-bg-hover: linear-gradient(153deg, #dcdeff 4.38%, #fff 81.13%);
  --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);
  --text-primary: var(--white-000);
  --text-secondary: var(--neutral-100);
  --text-accent-green-600: var(--green-600);
  --text-accent-green-500: var(--green-500);
  --text-accent-blue-400: var(--blue-400);
  --text-accent-pink-400: var(--pink-400);
  --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: 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(--blue-500);
  --icon-accent-blue-400: var(--blue-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(--background-accent-blue-500);
  --tab-header-active-trigger-background: var(--background-accent-blue-500);
  --tab-header-inactive-trigger-text: var(--text-primary);
  --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%;
  --mobile-signup-banner-gradient: linear-gradient(
    135deg,
    rgba(209, 31, 224, 1) 0%,
    rgba(55, 75, 243, 1) 100%
  );
}

.light {
  --neutral-900: 218, 27%, 94%;
  --neutral-800: 210, 25%, 97%;
  --neutral-700: 0, 0%, 100%;
  --neutral-600: 200, 33%, 98%;
  --neutral-500: 215, 38%, 94%;
  --neutral-400: 215, 17%, 86%;
  --neutral-300: 215, 26%, 87%;
  --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;
  --radio-switch-checkbox-icon-active: var(--white-000-contrast);
  --button-primary-text-default: var(--white-000-contrast);
  --button-primary-text-active: var(--white-000-contrast);
  --button-primary-icon-default: var(--white-000-contrast);
  --button-primary-icon-active: var(--white-000-contrast);
  --button-secondary-text-active: var(--white-000-contrast);
  --button-secondary-icon-active: var(--000-contrast);
  --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-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);
  --input-dropdown-item-background-checked: var(--blue-500);
  --input-dropdown-item-background-active: var(--blue-500);
  --input-dropdown-item-text-active: var(--white-000-contrast);
  --text-contrast: var(--white-000-contrast);
  --icon-basic-white-contrast: var(--white-000-contrast);
  --tab-header-active-trigger-text: var(--white-000-contrast);
  --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: hsl(var(--blue-400));
  --calendar-light-selected-color: hsl(var(--white-000-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));
  --loyalty-icon-color: var(--text-contrast);
  --banner-text-color: var(--text-contrast);
}

.dark {
  --vip-benefit-card-background: linear-gradient(
    135deg,
    rgba(74, 59, 254, 0.35) 0%,
    rgba(26, 26, 49, 0.6) 100%
  );
  --vip-rank-gradient: radial-gradient(
    204% 48.47% at 82.38% 50.6%,
    rgba(52, 0, 77, 0.8) 0%,
    rgba(6, 6, 12, 0.8) 100%
  );
  --text-banner-contrast: var(--white-000-contrast);
  --background-extra: 240, 37%, 18%, 1;
  --neutral-900: 240, 32%, 9%;
  --neutral-800: 240, 27%, 11%;
  --neutral-700: 240, 31%, 15%;
  --neutral-600: 240, 28%, 16%;
  --neutral-500: 240, 25%, 19%;
  --neutral-400: 240, 25%, 27%;
  --neutral-300: 240, 21%, 31%;
  --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;
  --radio-switch-checkbox-icon-active: var(--white-000);
  --button-primary-text-default: var(--white-000);
  --button-primary-text-active: var(--white-000);
  --button-primary-icon-default: var(--white-000);
  --button-primary-icon-active: var(--white-000);
  --button-secondary-text-active: var(--white-000);
  --button-secondary-icon-active: var(--white-000);
  --button-extra-text-default: var(--neutral-900);
  --button-extra-text-active: var(--neutral-900);
  --button-extra-icon-default: var(--neutral-900);
  --button-extra-icon-active: var(--neutral-900);
  --button-extra-2-bg-default: var(--white-000-10);
  --button-extra-2-bg-active: var(--white-000);
  --button-extra-2-text-default: var(--white-000);
  --button-extra-2-text-active: var(--neutral-900);
  --button-extra-2-border-default: var(--white-000-40);
  --button-extra-2-border-active: var(--white-000);
  --button-extra-2-icon-default: var(--white-000);
  --button-extra-2-icon-active: var(--neutral-900);
  --input-dropdown-item-background-checked: 240, 100%, 65%;
  --input-dropdown-item-background-active: 240, 100%, 65%;
  --input-dropdown-item-text-active: var(--white-000);
  --text-contrast: var(--white-000);
  --tab-header-active-trigger-text: var(--text-primary);
  --calendar-dark-icon: hsla(var(--neutral-100));
  --calendar-dark-background: hsla(var(--neutral-700));
  --calendar-dark-border: hsla(var(--neutral-100));
  --calendar-dark-day-color: hsla(var(--neutral-50));
  --color-card: hsla(var(--neutral-50));
  --calendar-dark-selected-background: linear-gradient(152.99deg, #6658ff 4.38%, #3627fe 81.13%);
  --calendar-dark-selected-color: hsla(var(--white-000));
  --calendar-dark-hover-background: linear-gradient(152.99deg, #6658ff 4.38%, #3627fe 81.13%);
  --calendar-dark-disabled-background: hsla(var(--neutral-900));
  --loyalty-icon-color: var(--text-primary);
  --banner-text-color: var(--text-primary);
}