.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%
  );
  --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%);
  --border-bonus-active: 300, 100%, 74%, 1;
  --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-brand: var(--neutral-1000);
  --button-primary-text-default: var(--button-primary-text-brand);
  --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;
  /* Named so a single element can opt out of VIP - see [data-vip='off'] below. */
  --button-primary-bg-brand: linear-gradient(153deg, #ffe100 4.38%, #ffe100 81.13%);
  --button-primary-bg-brand-hover: linear-gradient(153deg, #ffcc51 4.38%, #ffcc51 81.13%);
  --button-primary-bg-default: var(--button-primary-bg-brand);
  --button-primary-bg-hover: var(--button-primary-bg-brand-hover);
  --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-brand: linear-gradient(153deg, #fff 4.38%, #d9d9d9 81.13%);
  --button-extra-bg-brand-hover: linear-gradient(153deg, #909090 4.38%, #fff 81.13%);
  --button-extra-bg-default: var(--button-extra-bg-brand);
  --button-extra-bg-hover: var(--button-extra-bg-brand-hover);
  --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);
  --bonus-gift-icon-color: var(--icon-accent-green-600);
  --loyalty-icon-color: var(--text-contrast);
  --mobile-signup-banner-gradient: linear-gradient(135deg, #4e1d78 0%, #ba5bff 100%);
  --color-vip-gold-border: 43, 100%, 66%;
  --vip-gold-rgb: 255, 204, 81;
  --vip-gradient-start: 37, 90%, 49%;
  --vip-gradient-mid: 50, 100%, 75%;
  --vip-gradient-end: 37, 100%, 48%;
  --background-vip-gradient: linear-gradient(
    96deg,
    hsl(var(--vip-gradient-start)) 0%,
    hsl(var(--vip-gradient-mid)) 50%,
    hsl(var(--vip-gradient-end)) 100%
  );
  --background-vip-gradient-inverted: linear-gradient(
    180deg,
    hsl(var(--vip-gradient-end)) 0%,
    hsl(var(--vip-gradient-mid)) 50%,
    hsl(var(--vip-gradient-start)) 100%
  );
  --vip-tab-background: linear-gradient(
    90deg,
    rgba(var(--vip-gold-rgb), 0.5) 0%,
    rgba(var(--vip-gold-rgb), 0.08) 100%
  );
  --vip-callback-color: #ffcc51;
  --vip-fast-track-border-color-active: #ffcc51;
  --vip-callback-hover-bg: rgba(var(--vip-gold-rgb), 0.1);
  --vip-gold-glow: rgba(var(--vip-gold-rgb), 0.2);
  --vip-control-background: var(--vip-tab-background);
  --vip-control-background-hover: var(--background-vip-gradient);
  --vip-control-border-color: hsl(var(--color-vip-gold-border));
  --vip-control-color-hover: #000;
  --vip-control-shadow: 0 0 0 1px var(--vip-gold-glow);
  --vip-avatar-shadow: 0 0 0 4px hsl(var(--color-vip-gold-border));
  --vip-deposit-background: var(--background-vip-gradient);
  /* Triplet: feeds both hsl() here and the hsla(var(--x)) button text tokens. */
  --vip-deposit-color-hsl: 240, 31%, 7%;
  --vip-deposit-color: hsl(var(--vip-deposit-color-hsl));
  --button-secondary-vip-bg-default: rgba(255, 214, 102, 0.1);
  --vip-glow-shadow: 0 0 4px 0 rgb(var(--vip-gold-rgb));
  --vip-bubble-background: radial-gradient(
    28.93% 35.44% at 50% 50%,
    rgba(var(--vip-gold-rgb), 0.55) 20%,
    rgba(var(--vip-gold-rgb), 0) 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);
  --vip-control-color: #000;
  --vip-gold-light-rgb: 255, 236, 179;
  --vip-slots-section-bg: rgba(var(--vip-gold-light-rgb), 0.25);
}

.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%
  );
  --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);
  --vip-control-color: #fff;
  --vip-slots-section-bg: #141423;
  --recently-wins-games-gradient:
    linear-gradient(
      267.32deg,
      rgba(89, 255, 245, 0) 9.77%,
      rgba(32, 113, 208, 0.76) 49.72%,
      rgba(14, 120, 198, 1) 77.84%
    ),
    linear-gradient(267.32deg, #55d0c1 9.77%, #5800e7 77.84%);
  --recently-wins-label-gradient: linear-gradient(
    99.15deg,
    #1a47b9 0%,
    rgba(13, 153, 198, 0.88) 54%,
    rgba(10, 215, 215, 0.7) 100%
  );
  --recently-wins-label-border: #42cbda;
}

/* VIP is a modifier over light/dark */
.light.vip-theme,
.dark.vip-theme {
  --button-primary-bg-default: var(--background-vip-gradient);
  --button-primary-bg-hover: var(--background-vip-gradient-inverted);
  --button-primary-text-default: var(--vip-deposit-color-hsl);
  --button-extra-bg-default: var(--background-vip-gradient);
  --button-extra-bg-hover: var(--background-vip-gradient-inverted);
}

/* Opt-out for primary/extra buttons that are chrome, not CTAs. */
.light.vip-theme [data-vip='off'],
.dark.vip-theme [data-vip='off'] {
  --button-primary-bg-default: var(--button-primary-bg-brand);
  --button-primary-bg-hover: var(--button-primary-bg-brand-hover);
  --button-primary-text-default: var(--button-primary-text-brand);
  --button-extra-bg-default: var(--button-extra-bg-brand);
  --button-extra-bg-hover: var(--button-extra-bg-brand-hover);
}