.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);
  --bg-header: linear-gradient(
    141deg,
    rgba(30, 30, 67, 0.8) 2.26%,
    rgba(30, 30, 67, 0.8) 93.46%
  );
  --bg-header-blur: 6px;
  --bg-navigation-bar: linear-gradient(
    141deg,
    rgba(41, 41, 68, 0.8) 2.26%,
    rgba(31, 31, 56, 0.8) 93.46%
  );
  --bg-navigation-bar-blur: 9px;
  --bg-navigation-bar-shadow:
    -3px -3px 14px 0 rgba(156, 64, 255, 0.11) inset,
    4px -6px 15px 0 rgba(56, 135, 220, 0.12) inset,
    0 1px 1px 0 rgba(255, 255, 255, 0.1) inset;
  --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%);
  --border-bonus-active: 303, 100%, 67%, 1;
  --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%;
  --seo-bullet-color: hsla(var(--blue-400));
  --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;
  /* Named so a single element can opt out of VIP - see [data-vip='off'] below. */
  --button-primary-bg-brand: linear-gradient(153deg, #6658ff 4.38%, #3627fe 81.13%);
  --button-primary-bg-brand-hover: linear-gradient(153deg, #4234ff 4.38%, #7e72ff 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-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-brand: linear-gradient(153deg, #fff 4.38%, #ccceff 81.13%);
  --button-extra-bg-brand-hover: linear-gradient(153deg, #dcdeff 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-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%;
  --bonus-gift-icon-color: var(--icon-accent-green-600);
  --mobile-signup-banner-gradient: linear-gradient(
    135deg,
    rgba(209, 31, 224, 1) 0%,
    rgba(55, 75, 243, 1) 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: 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-brand: var(--white-000-contrast);
  --button-primary-text-default: var(--button-primary-text-brand);
  --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);
  --vip-control-color: #000;
  --vip-gold-light-rgb: 255, 236, 179;
  --vip-slots-section-bg: rgba(var(--vip-gold-light-rgb), 0.25);
  --bg-header: linear-gradient(
    141deg,
    rgba(255, 255, 255, 0.8) 2.26%,
    rgba(255, 255, 255, 0.8) 93.46%
  );
  --bg-navigation-bar: linear-gradient(
    141deg,
    rgba(255, 255, 255, 0.8) 2.26%,
    rgba(255, 255, 255, 0.8) 93.46%
  );
}

.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-brand: var(--white-000);
  --button-primary-text-default: var(--button-primary-text-brand);
  --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);
  --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%);
}

.light,
.dark {
  --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);
}