/* Auto-generated — do not edit. Run: node scripts/generate-brand-css.js */
.brand-crown-green {
  --color-neutral-50: #b5ded9;
  --color-neutral-100: #678d89;
  --color-neutral-150: #3c6863;
  --color-neutral-200: #2d5954;
  --color-neutral-300: #004e44;
  --color-neutral-400: #004139;
  --color-neutral-500: #00302a;
  --color-neutral-600: #082521;
  --color-neutral-700: #05221e;
  --color-neutral-800: #051413;
  --color-neutral-900: #000e0d;
  --color-neutral-1000: #000605;
  --color-neutral-100-50: #678d8980;
  --color-neutral-400-0: #004139;
  --color-neutral-700-0: #05221e;
  --color-neutral-1000-70: #000605b2;
  --color-red-400: #ff4040;
  --color-red-500: #c51b1b;
  --color-red-400-10: #ff40401a;
  --color-red-400-15: #ff404026;
  --color-red-400-30: #ff40404d;
  --color-pink-300: #f761ff;
  --color-pink-400: #ff0098;
  --color-yellow-300: #ffd480;
  --color-yellow-400: #fff310;
  --color-yellow-500: #fec33e;
  --color-yellow-700: #ff7a00;
  --color-yellow-300-30: #ffd4804d;
  --color-yellow-500-30: #fec33e4d;
  --color-yellow-500-10: #fec33e1a;
  --color-green-500: #43f58a;
  --color-green-600: #15d161;
  --color-green-700: #24a15e;
  --color-green-500-30: #43f58a4d;
  --color-green-600-30: #15d1614d;
  --color-green-600-10: #15d1611a;
  --color-blue-400: #2183f6;
  --color-blue-500: #4c4dff;
  --color-blue-400-30: #2183f64d;
  --color-blue-400-10: #2183f61a;
  --color-alpha-10: #ffffff1a;
  --color-alpha-15: #ffffff26;
  --color-alpha-25: #ffffff40;
  --color-alpha-40: #ffffff66;
  --color-alpha-50: #ffffff80;
  --color-alpha-60: #ffffff99;
  --color-alpha-contrast: #ffffff;
  --color-alpha-contrast-60: #ffffff99;
  --color-alpha-contrast-50: #ffffff80;
  --color-alpha-contrast-40: #ffffff66;
  --color-alpha-contrast-10: #ffffff1a;
  --color-alpha-default: #ffffff;
  --font-family-sans: Jost, sans-serif;
  --font-size-xs: 12px;
  --line-height-xs: 140%;
  --font-size-sm: 14px;
  --line-height-sm: 140%;
  --font-size-base: 16px;
  --line-height-base: 140%;
  --font-size-lg: 18px;
  --line-height-lg: 140%;
  --font-size-xl: 20px;
  --line-height-xl: 140%;
  --font-size-xxl: 22px;
  --line-height-xxl: 140%;
  --font-size-2xl: 24px;
  --line-height-2xl: 140%;
  --font-size-3xl: 28px;
  --line-height-3xl: 140%;
  --font-size-4xl: 32px;
  --line-height-4xl: 140%;
  --font-size-5xl: 36px;
  --line-height-5xl: 140%;
  --font-size-6xl: 38px;
  --line-height-6xl: 140%;
  --font-size-7xl: 48px;
  --line-height-7xl: 140%;
  --font-size-8xl: 56px;
  --line-height-8xl: 140%;
  --font-size-h1: 26px;
  --line-height-h1: 140%;
  --font-weight-h1: 700;
  --font-size-h2: 22px;
  --line-height-h2: 140%;
  --font-weight-h2: 700;
  --font-size-h3: 22px;
  --line-height-h3: 140%;
  --font-weight-h3: 700;
  --font-size-h4: 20px;
  --line-height-h4: 140%;
  --font-weight-h4: 700;
  --font-size-h5: 18px;
  --line-height-h5: 140%;
  --font-weight-h5: 700;
  --font-size-text: 16px;
  --line-height-text: 140%;
  --font-weight-text: 400;
  --font-size-list: 16px;
  --line-height-list: 140%;
  --font-weight-list: 400;
  --font-size-link: 16px;
  --line-height-link: 140%;
  --font-weight-link: 400;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-1-5xl: 14px;
  --border-radius-2xl: 16px;
  --border-radius-2-5xl: 20px;
  --border-radius-3xl: 24px;
  --border-radius-4xl: 28px;
  --border-radius-5xl: 32px;
  --border-radius-6xl: 36px;
  --border-radius-7xl: 40px;
  --border-radius-none: 0px;
  --border-radius-DEFAULT: 4px;
  --border-radius-full: 9999px;
  --bg-basic-1000: var(--color-neutral-1000);
  --bg-basic-1000-70: var(--color-neutral-1000-70);
  --bg-basic-900: var(--color-neutral-900);
  --bg-basic-800: var(--color-neutral-800);
  --bg-basic-700: var(--color-neutral-700);
  --bg-basic-600: var(--color-neutral-600);
  --bg-basic-500: var(--color-neutral-500);
  --bg-basic-400: var(--color-neutral-400);
  --bg-basic-300: var(--color-neutral-300);
  --bg-basic-200: var(--color-neutral-200);
  --bg-basic-150: var(--color-neutral-150);
  --bg-basic-100: var(--color-neutral-100);
  --bg-basic-50: var(--color-neutral-50);
  --bg-basic-000-10: var(--color-alpha-10);
  --bg-basic-000-60: var(--color-alpha-60);
  --bg-basic-000-contrast: var(--color-alpha-contrast);
  --hidden-bg: var(--color-neutral-700-0);
  --bg-accent-1: var(--color-blue-500);
  --bg-accent-2: var(--color-blue-400);
  --bg-accent-3: var(--color-yellow-700);
  --bg-accent-4: var(--color-yellow-400);
  --bg-accent-5: var(--color-yellow-300);
  --bg-accent-6: var(--color-yellow-300-30);
  --bg-accent-7: var(--color-pink-400);
  --bg-accent-8: var(--color-green-700);
  --bg-accent-9: var(--color-green-500);
  --bg-accent-10: var(--color-green-500-30);
  --bg-accent-11: var(--color-red-500);
  --bg-accent-12: var(--color-neutral-800);
  --bg-accent-13: var(--color-neutral-500);
  --bg-semantic-error: var(--color-red-400);
  --bg-semantic-error-10: var(--color-red-400-10);
  --bg-semantic-warning: var(--color-yellow-500);
  --bg-semantic-warning-10: var(--color-yellow-500-10);
  --bg-semantic-success: var(--color-green-600);
  --bg-semantic-success-10: var(--color-green-600-10);
  --bg-semantic-extra: var(--color-blue-400);
  --bg-semantic-extra-10: var(--color-blue-400-10);
  --border-control-border-default: var(--color-alpha-40);
  --border-control-border-active: var(--color-yellow-300);
  --bg-control-bg-active: var(--color-yellow-300);
  --text-control-icon-default: var(--color-alpha-40);
  --text-control-icon-active: var(--color-neutral-1000);
  --bg-control-icon-default: var(--color-alpha-40);
  --bg-control-icon-active: var(--color-neutral-1000);
  --border-basic-500: var(--color-neutral-500);
  --border-basic-400: var(--color-neutral-400);
  --hidden-border: var(--color-neutral-400-0);
  --border-basic-200: var(--color-neutral-200);
  --border-basic-000-40: var(--color-alpha-40);
  --border-basic-000-10: var(--color-alpha-10);
  --border-accent-1: var(--color-blue-500);
  --border-accent-2: var(--color-blue-400);
  --border-accent-3: var(--color-yellow-700);
  --border-accent-4: var(--color-yellow-400);
  --border-accent-5: var(--color-yellow-300);
  --border-accent-6: var(--color-yellow-300-30);
  --border-accent-7: var(--color-pink-400);
  --border-accent-8: var(--color-green-700);
  --border-accent-9: var(--color-green-500);
  --border-accent-10: var(--color-green-500-30);
  --border-accent-11: var(--color-red-500);
  --border-accent-12: var(--color-neutral-800);
  --border-accent-13: var(--color-neutral-500);
  --border-error: var(--color-red-400);
  --border-error-30: var(--color-red-400-30);
  --border-warning: var(--color-yellow-500);
  --border-warning-30: var(--color-yellow-500-30);
  --border-success: var(--color-green-600);
  --border-success-30: var(--color-green-600-30);
  --border-extra: var(--color-blue-400);
  --border-extra-30: var(--color-blue-400-30);
  --bg-di-bg-default: var(--color-neutral-500);
  --bg-di-bg-hover: var(--color-neutral-400);
  --bg-di-bg-active: var(--color-neutral-400);
  --border-di-border-default: var(--color-neutral-300);
  --border-di-border-active: var(--color-neutral-100);
  --border-di-border-focus: var(--color-neutral-100);
  --border-di-border-error: var(--color-red-400);
  --text-di-text-placeholder: var(--color-alpha-50);
  --text-di-text: var(--color-alpha-default);
  --text-di-icon-default: var(--color-alpha-50);
  --text-di-icon-active: var(--color-alpha-default);
  --button-primary-bg-default: linear-gradient(
    180deg,
    #f4e38b -24.36%,
    #f4dd62 23.01%,
    #b27f2a 100%
  );
  --button-primary-bg-hover: linear-gradient(
    335deg,
    #f4e38b 23.63%,
    #f4dd62 64.48%,
    #b27f2a 116.85%
  );
  --button-primary-border-default: var(--color-alpha-contrast-10);
  --button-primary-border-hover: linear-gradient(
    138deg,
    rgba(255, 255, 255, 0) 29.23%,
    rgba(255, 255, 255, 0.3) 71.35%
  );
  --button-primary-text-default: var(--color-neutral-1000);
  --button-primary-text-active: var(--color-neutral-1000);
  --button-primary-icon-default: var(--color-neutral-1000);
  --button-primary-icon-active: var(--color-neutral-1000);
  --button-secondary-bg-default: var(--color-neutral-500);
  --button-secondary-bg-active: var(--color-neutral-300);
  --button-secondary-border-default: var(--color-neutral-300);
  --button-secondary-border-active: var(--color-alpha-10);
  --button-secondary-text-default: var(--color-alpha-default);
  --button-secondary-text-active: var(--color-alpha-contrast);
  --button-secondary-icon-default: var(--color-alpha-50);
  --button-secondary-icon-active: var(--color-alpha-contrast);
  --button-extra-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a 100%);
  --button-extra-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%);
  --button-extra-border-default: var(--color-alpha-contrast-10);
  --button-extra-border-hover: linear-gradient(
    138deg,
    rgba(255, 255, 255, 0) 29.23%,
    rgba(255, 255, 255, 0.3) 71.35%
  );
  --button-extra-text-default: var(--color-neutral-1000);
  --button-extra-text-active: var(--color-neutral-1000);
  --button-extra-icon-default: var(--color-neutral-1000);
  --button-extra-icon-active: var(--color-neutral-1000);
  --button-extra2-bg-default: var(--color-alpha-contrast-10);
  --button-extra2-bg-active: var(--color-alpha-contrast);
  --button-extra2-border-default: var(--color-alpha-contrast-40);
  --button-extra2-border-active: var(--color-alpha-contrast);
  --button-extra2-text-default: var(--color-alpha-contrast);
  --button-extra2-text-active: var(--color-neutral-1000);
  --button-extra2-icon-default: var(--color-alpha-contrast);
  --button-extra2-icon-active: var(--color-neutral-1000);
  --button-blurred-bg-default: var(--color-alpha-10);
  --button-blurred-bg-active: var(--color-alpha-default);
  --button-blurred-border-default: var(--color-alpha-contrast-40);
  --button-blurred-border-active: var(--color-alpha-contrast);
  --button-blurred-text-default: var(--color-alpha-contrast);
  --button-blurred-text-active: var(--color-neutral-1000);
  --button-blurred-icon-default: var(--color-alpha-default);
  --button-blurred-icon-active: var(--color-neutral-1000);
  --border-button-play-border-default: #ffcf73;
  --bg-button-play-bg-hover: linear-gradient(139deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%);
  --text-primary: var(--color-alpha-default);
  --text-secondary: var(--color-alpha-50);
  --text-contrast: var(--color-alpha-contrast);
  --text-banner-contrast: var(--color-alpha-contrast);
  --text-accent-1: var(--color-blue-500);
  --text-accent-2: var(--color-blue-400);
  --text-accent-3: var(--color-yellow-700);
  --text-accent-4: var(--color-yellow-400);
  --text-accent-5: var(--color-yellow-300);
  --text-accent-6: var(--color-yellow-300-30);
  --text-accent-7: var(--color-pink-400);
  --text-accent-8: var(--color-green-700);
  --text-accent-9: var(--color-green-500);
  --text-accent-10: var(--color-green-500-30);
  --text-accent-11: var(--color-red-500);
  --text-accent-12: var(--color-neutral-800);
  --text-accent-13: var(--color-neutral-500);
  --text-error: var(--color-red-400);
  --text-warning: var(--color-yellow-500);
  --text-success: var(--color-green-600);
  --text-extra: var(--color-blue-400);
  --icon-basic-contrast: var(--color-alpha-contrast);
  --icon-basic-white: var(--color-alpha-contrast);
  --icon-basic-white-50: var(--color-alpha-50);
  --icon-basic-white-25: var(--color-alpha-25);
  --icon-basic-100: var(--color-neutral-100);
  --icon-basic-100-50: var(--color-neutral-100-50);
  --icon-accent-1: var(--color-blue-500);
  --icon-accent-2: var(--color-blue-400);
  --icon-accent-3: var(--color-yellow-700);
  --icon-accent-4: var(--color-yellow-400);
  --icon-accent-5: var(--color-yellow-300);
  --icon-accent-6: var(--color-yellow-300-30);
  --icon-accent-7: var(--color-pink-400);
  --icon-accent-8: var(--color-green-700);
  --icon-accent-9: var(--color-green-500);
  --icon-accent-10: var(--color-green-500-30);
  --icon-accent-11: var(--color-red-500);
  --icon-accent-12: var(--color-neutral-800);
  --icon-accent-13: var(--color-neutral-500);
  --icon-error: var(--color-red-400);
  --icon-warning: var(--color-yellow-500);
  --icon-success: var(--color-green-600);
  --icon-extra: var(--color-blue-400);
  --icon-default-sidebar: var(--color-alpha-50);
  --icon-active-sidebar: var(--color-alpha-default);
  --icon-default-category: var(--color-alpha-50);
  --icon-active-category: var(--color-alpha-default);
  --icon-idle-category: var(--color-yellow-300);
  --bg-step-back: var(--color-neutral-400);
  --bg-step-progress: var(--color-yellow-300);
  --bg-game-hover: linear-gradient(180deg, rgba(11, 11, 21, 0.7) 0%, rgba(11, 11, 21, 0.2) 100%);
  --bg-label-top: linear-gradient(180deg, #ff7a00 0%, #ec3900 100%);
  --bg-label-new: linear-gradient(180deg, #1ea956 0%, #186e3a 100%);
  --bg-label-crypto: linear-gradient(180deg, #9a4cf8 0%, #7813ae 100%);
  --bg-gradient-vip-sign: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a 100%);
  --bg-gradient-0-700: linear-gradient(270deg, #05221e 0%, rgba(5, 34, 30, 0) 100%);
  --bg-gradient-0-800: linear-gradient(180deg, rgba(5, 20, 19, 0) 0%, #051413 100%);
  --bg-gradient-1: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%);
  --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a 100%);
  --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%);
  --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%);
  --bg-gradient-service-page: radial-gradient(
    67.63% 97.68% at 50% 0%,
    #00302a 0%,
    #001210 64.25%,
    #000b0a 87.18%,
    #000908 100%
  );
  --bg-gradient-collection-card: linear-gradient(180deg, #1f7a74 -149.6%, #051413 81.2%);
  --bg-gradient-loader: radial-gradient(
    104.17% 118.85% at 50% 0%,
    #00352d 0%,
    #01201a 40.64%,
    #000b0a 82.6%,
    #000908 100%
  );
  --bg-gradient-bubble-menu: radial-gradient(
    35.44% 35.44% at 50% 64.56%,
    rgba(0, 48, 42, 0.9) 46%,
    rgba(5, 20, 19, 0.9) 100%
  );
  --bg-gradient-vip-card: radial-gradient(
    138.69% 41.85% at 50% 0%,
    #051413 0%,
    #051413 30%,
    #051413 100%
  );
}

.brand-crown-green.light {
  --color-neutral-50: #b5ded9;
  --color-neutral-100: #678d89;
  --color-neutral-150: #3c6863;
  --color-neutral-200: #2d5954;
  --color-neutral-300: #d6dde7;
  --color-neutral-400: #d6dbe2;
  --color-neutral-500: #e9eef5;
  --color-neutral-600: #f9fbfc;
  --color-neutral-700: #ffffff;
  --color-neutral-800: #f5f7f9;
  --color-neutral-900: #eceff4;
  --color-neutral-1000: #000605;
  --color-neutral-100-50: #678d8980;
  --color-neutral-1000-70: #000605b2;
  --color-red-400: #ff4040;
  --color-red-500: #c51b1b;
  --color-red-400-35: #ff40404d;
  --color-red-400-15: #ff404026;
  --color-red-400-10: #ff40401a;
  --color-pink-300: #f761ff;
  --color-pink-400: #ff0098;
  --color-yellow-300: #ffd480;
  --color-yellow-400: #fff310;
  --color-yellow-500: #fec33e;
  --color-yellow-700: #ff7a00;
  --color-yellow-300-30: #ffd4804d;
  --color-yellow-500-30: #fec33e4d;
  --color-yellow-500-10: #fec33e1a;
  --color-green-500: #43f58a;
  --color-green-600: #15d161;
  --color-green-700: #24a15e;
  --color-green-500-30: #43f58a4d;
  --color-green-600-30: #15d1614d;
  --color-green-600-10: #15d1611a;
  --color-blue-400: #2183f6;
  --color-blue-500: #4c4dff;
  --color-blue-400-30: #2183f64d;
  --color-blue-400-10: #2183f61a;
  --color-alpha-10: #27272a1a;
  --color-alpha-15: #27272a26;
  --color-alpha-25: #27272a66;
  --color-alpha-40: #27272a66;
  --color-alpha-50: #27272a80;
  --color-alpha-60: #ffffff99;
  --color-alpha-contrast: #ffffff;
  --color-alpha-contrast-60: #ffffff99;
  --color-alpha-contrast-50: #ffffff80;
  --color-alpha-contrast-40: #ffffff66;
  --color-alpha-contrast-10: #ffffff1a;
  --color-alpha-default: #27272a;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-1-5xl: 14px;
  --border-radius-2xl: 16px;
  --border-radius-2-5xl: 20px;
  --border-radius-3xl: 24px;
  --border-radius-4xl: 28px;
  --border-radius-5xl: 32px;
  --border-radius-6xl: 36px;
  --border-radius-7xl: 40px;
  --border-radius-none: 0px;
  --border-radius-DEFAULT: 4px;
  --border-radius-full: 9999px;
  --bg-basic-1000: var(--color-neutral-1000);
  --bg-basic-1000-70: var(--color-neutral-1000-70);
  --bg-basic-900: var(--color-neutral-900);
  --bg-basic-800: var(--color-neutral-800);
  --bg-basic-700: var(--color-neutral-700);
  --bg-basic-600: var(--color-neutral-600);
  --bg-basic-500: var(--color-neutral-500);
  --bg-basic-400: var(--color-neutral-400);
  --bg-basic-300: var(--color-neutral-300);
  --bg-basic-200: var(--color-neutral-200);
  --bg-basic-150: var(--color-neutral-150);
  --bg-basic-100: var(--color-neutral-100);
  --bg-basic-50: var(--color-neutral-50);
  --bg-basic-000-10: var(--color-alpha-10);
  --bg-basic-000-60: var(--color-alpha-60);
  --bg-basic-000-contrast: var(--color-alpha-contrast);
  --hidden-bg: var(--color-neutral-700-0);
  --bg-accent-1: var(--color-blue-500);
  --bg-accent-2: var(--color-blue-400);
  --bg-accent-3: var(--color-yellow-700);
  --bg-accent-4: var(--color-yellow-400);
  --bg-accent-5: var(--color-yellow-300);
  --bg-accent-6: var(--color-yellow-300-30);
  --bg-accent-7: var(--color-pink-400);
  --bg-accent-8: var(--color-green-700);
  --bg-accent-9: var(--color-green-500);
  --bg-accent-10: var(--color-green-500-30);
  --bg-accent-11: var(--color-red-500);
  --bg-accent-12: var(--color-neutral-800);
  --bg-accent-13: var(--color-neutral-500);
  --bg-semantic-error: var(--color-red-400);
  --bg-semantic-error-10: var(--color-red-400-10);
  --bg-semantic-warning: var(--color-yellow-500);
  --bg-semantic-warning-10: var(--color-yellow-500-10);
  --bg-semantic-success: var(--color-green-600);
  --bg-semantic-success-10: var(--color-green-600-10);
  --bg-semantic-extra: var(--color-blue-400);
  --bg-semantic-extra-10: var(--color-blue-400-10);
  --border-control-border-default: var(--color-alpha-40);
  --border-control-border-active: var(--color-yellow-300);
  --bg-control-bg-active: var(--color-yellow-300);
  --text-control-icon-default: var(--color-alpha-40);
  --text-control-icon-active: var(--color-neutral-1000);
  --bg-control-icon-default: var(--color-alpha-40);
  --bg-control-icon-active: var(--color-neutral-1000);
  --border-basic-500: var(--color-neutral-500);
  --border-basic-400: var(--color-neutral-400);
  --hidden-border: var(--color-neutral-400-0);
  --border-basic-200: var(--color-neutral-200);
  --border-basic-000-40: var(--color-alpha-40);
  --border-basic-000-10: var(--color-alpha-10);
  --border-accent-1: var(--color-blue-500);
  --border-accent-2: var(--color-blue-400);
  --border-accent-3: var(--color-yellow-700);
  --border-accent-4: var(--color-yellow-400);
  --border-accent-5: var(--color-yellow-300);
  --border-accent-6: var(--color-yellow-300-30);
  --border-accent-7: var(--color-pink-400);
  --border-accent-8: var(--color-green-700);
  --border-accent-9: var(--color-green-500);
  --border-accent-10: var(--color-green-500-30);
  --border-accent-11: var(--color-red-500);
  --border-accent-12: var(--color-neutral-800);
  --border-accent-13: var(--color-neutral-500);
  --border-error: var(--color-red-400);
  --border-error-30: var(--color-red-400-30);
  --border-warning: var(--color-yellow-500);
  --border-warning-30: var(--color-yellow-500-30);
  --border-success: var(--color-green-600);
  --border-success-30: var(--color-green-600-30);
  --border-extra: var(--color-blue-400);
  --border-extra-30: var(--color-blue-400-30);
  --bg-di-bg-default: var(--color-neutral-500);
  --bg-di-bg-hover: var(--color-neutral-400);
  --bg-di-bg-active: var(--color-neutral-400);
  --border-di-border-default: var(--color-neutral-300);
  --border-di-border-active: var(--color-neutral-100);
  --border-di-border-focus: var(--color-neutral-100);
  --border-di-border-error: var(--color-red-400);
  --text-di-text-placeholder: var(--color-alpha-50);
  --text-di-text: var(--color-alpha-default);
  --text-di-icon-default: var(--color-alpha-50);
  --text-di-icon-active: var(--color-alpha-default);
  --button-primary-bg-default: linear-gradient(
    180deg,
    #f4e38b -24.36%,
    #f4dd62 23.01%,
    #b27f2a 100%
  );
  --button-primary-bg-hover: linear-gradient(
    335deg,
    #f4e38b 23.63%,
    #f4dd62 64.48%,
    #b27f2a 116.85%
  );
  --button-primary-border-default: var(--color-alpha-contrast-10);
  --button-primary-border-hover: linear-gradient(
    138deg,
    rgba(255, 255, 255, 0) 29.23%,
    rgba(255, 255, 255, 0.3) 71.35%
  );
  --button-primary-text-default: var(--color-neutral-1000);
  --button-primary-text-active: var(--color-neutral-1000);
  --button-primary-icon-default: var(--color-neutral-1000);
  --button-primary-icon-active: var(--color-neutral-1000);
  --button-secondary-bg-default: var(--color-neutral-500);
  --button-secondary-bg-active: var(--color-neutral-300);
  --button-secondary-border-default: var(--color-neutral-300);
  --button-secondary-border-active: var(--color-alpha-10);
  --button-secondary-text-default: var(--color-alpha-default);
  --button-secondary-text-active: var(--color-alpha-contrast);
  --button-secondary-icon-default: var(--color-alpha-50);
  --button-secondary-icon-active: var(--color-alpha-contrast);
  --button-extra-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a 100%);
  --button-extra-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%);
  --button-extra-border-default: var(--color-alpha-contrast-10);
  --button-extra-border-hover: linear-gradient(
    138deg,
    rgba(255, 255, 255, 0) 29.23%,
    rgba(255, 255, 255, 0.3) 71.35%
  );
  --button-extra-text-default: var(--color-neutral-1000);
  --button-extra-text-active: var(--color-neutral-1000);
  --button-extra-icon-default: var(--color-neutral-1000);
  --button-extra-icon-active: var(--color-neutral-1000);
  --button-extra2-bg-default: var(--color-alpha-contrast-10);
  --button-extra2-bg-active: var(--color-alpha-contrast);
  --button-extra2-border-default: var(--color-alpha-contrast-40);
  --button-extra2-border-active: var(--color-alpha-contrast);
  --button-extra2-text-default: var(--color-alpha-contrast);
  --button-extra2-text-active: var(--color-neutral-1000);
  --button-extra2-icon-default: var(--color-alpha-contrast);
  --button-extra2-icon-active: var(--color-neutral-1000);
  --button-blurred-bg-default: var(--color-alpha-10);
  --button-blurred-bg-active: var(--color-alpha-default);
  --button-blurred-border-default: var(--color-alpha-contrast-40);
  --button-blurred-border-active: var(--color-alpha-contrast);
  --button-blurred-text-default: var(--color-alpha-contrast);
  --button-blurred-text-active: var(--color-neutral-1000);
  --button-blurred-icon-default: var(--color-alpha-default);
  --button-blurred-icon-active: var(--color-neutral-1000);
  --border-button-play-border-default: #ffcf73;
  --bg-button-play-bg-hover: linear-gradient(139deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%);
  --text-primary: var(--color-alpha-default);
  --text-secondary: var(--color-alpha-50);
  --text-contrast: var(--color-alpha-contrast);
  --text-banner-contrast: var(--color-alpha-contrast);
  --text-accent-1: var(--color-blue-500);
  --text-accent-2: var(--color-blue-400);
  --text-accent-3: var(--color-yellow-700);
  --text-accent-4: var(--color-yellow-400);
  --text-accent-5: var(--color-yellow-300);
  --text-accent-6: var(--color-yellow-300-30);
  --text-accent-7: var(--color-pink-400);
  --text-accent-8: var(--color-green-700);
  --text-accent-9: var(--color-green-500);
  --text-accent-10: var(--color-green-500-30);
  --text-accent-11: var(--color-red-500);
  --text-accent-12: var(--color-neutral-800);
  --text-accent-13: var(--color-neutral-500);
  --text-error: var(--color-red-400);
  --text-warning: var(--color-yellow-500);
  --text-success: var(--color-green-600);
  --text-extra: var(--color-blue-400);
  --icon-basic-contrast: var(--color-alpha-contrast);
  --icon-basic-white: var(--color-alpha-contrast);
  --icon-basic-white-50: var(--color-alpha-50);
  --icon-basic-white-25: var(--color-alpha-25);
  --icon-basic-100: var(--color-neutral-100);
  --icon-basic-100-50: var(--color-neutral-100-50);
  --icon-accent-1: var(--color-blue-500);
  --icon-accent-2: var(--color-blue-400);
  --icon-accent-3: var(--color-yellow-700);
  --icon-accent-4: var(--color-yellow-400);
  --icon-accent-5: var(--color-yellow-300);
  --icon-accent-6: var(--color-yellow-300-30);
  --icon-accent-7: var(--color-pink-400);
  --icon-accent-8: var(--color-green-700);
  --icon-accent-9: var(--color-green-500);
  --icon-accent-10: var(--color-green-500-30);
  --icon-accent-11: var(--color-red-500);
  --icon-accent-12: var(--color-neutral-800);
  --icon-accent-13: var(--color-neutral-500);
  --icon-error: var(--color-red-400);
  --icon-warning: var(--color-yellow-500);
  --icon-success: var(--color-green-600);
  --icon-extra: var(--color-blue-400);
  --icon-default-sidebar: var(--color-alpha-50);
  --icon-active-sidebar: var(--color-alpha-default);
  --icon-default-category: var(--color-alpha-50);
  --icon-active-category: var(--color-alpha-default);
  --icon-idle-category: var(--color-yellow-300);
  --bg-step-back: var(--color-neutral-400);
  --bg-step-progress: var(--color-yellow-300);
  --bg-game-hover: linear-gradient(180deg, rgba(11, 11, 21, 0.7) 0%, rgba(11, 11, 21, 0.2) 100%);
  --bg-label-top: linear-gradient(180deg, #ff7a00 0%, #ec3900 100%);
  --bg-label-new: linear-gradient(180deg, #1ea956 0%, #186e3a 100%);
  --bg-label-crypto: linear-gradient(180deg, #9a4cf8 0%, #7813ae 100%);
  --bg-gradient-vip-sign: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a 100%);
  --bg-gradient-0-700: linear-gradient(270deg, #05221e 0%, rgba(5, 34, 30, 0) 100%);
  --bg-gradient-0-800: linear-gradient(180deg, rgba(5, 20, 19, 0) 0%, #051413 100%);
  --bg-gradient-1: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%);
  --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a 100%);
  --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%);
  --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%);
  --bg-gradient-service-page: radial-gradient(
    67.63% 97.68% at 50% 0%,
    #00302a 0%,
    #001210 64.25%,
    #000b0a 87.18%,
    #000908 100%
  );
  --bg-gradient-collection-card: linear-gradient(180deg, #1f7a74 -149.6%, #051413 81.2%);
  --bg-gradient-loader: radial-gradient(
    104.17% 118.85% at 50% 0%,
    #00352d 0%,
    #01201a 40.64%,
    #000b0a 82.6%,
    #000908 100%
  );
  --bg-gradient-bubble-menu: radial-gradient(
    35.44% 35.44% at 50% 64.56%,
    rgba(0, 48, 42, 0.9) 46%,
    rgba(5, 20, 19, 0.9) 100%
  );
  --bg-gradient-vip-card: radial-gradient(
    138.69% 41.85% at 50% 0%,
    #051413 0%,
    #051413 30%,
    #051413 100%
  );
}

/* Legacy overrides from crown-green-old.css */
/* ===================================
 * CROWNGREEN BRAND STYLES
 * This brand uses only dark theme, there is no light theme for crown-green.
 * In this file, we override the default variables from variables.css.
 * ==================================== */

.dark.brand-crown-green,
.brand-crown-green {
  /* Font Styles */
  --font-primary: 'Jost', sans-serif;
  --font-secondary: 'Jost', sans-serif;
  --brand-font-heading: 'Jost', sans-serif;
  font-family: var(--font-primary);

  /* Green */
  --color-green-primary: #55dabb;
  --color-green-secondary: #004e44;
  --color-green-deep: #051413;
  --color-green-deep-dark: #032924;
  --color-green-darkest: #001914;
  --color-green-light: #34d399;
  --color-green-dark: #064e3b;
  --color-green-darker: #05221e;

  /* Slate */
  --color-slate-dark: #0f172a;

  /* Red */
  --color-red: #ef4444;

  /* White colors with opacity */
  --color-white: #ffffff;
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-80: rgba(255, 255, 255, 0.8);

  /* ===================================
   * THEME OVERRIDES
   * Redefining theme variables for crown-green
   * ==================================== */
  --color-light-background: var(--color-green-darker);
  --color-light-foreground: var(--color-white);
  --color-dark-background: var(--color-green-darkest);
  --color-dark-foreground: var(--color-white);

  /* ===================================
   * SEMANTIC COLOR VARIABLES
   * These are the main theme colors that components will use
   * Note: This brand uses dark mode styling for both light and dark themes
   * ==================================== */
  --color-primary: var(--color-green-primary);
  --color-primary-foreground: var(--color-white);
  --color-secondary: #ecfdf5;
  --color-foreground: var(--color-white);
  --color-accent: #ecfdf5;

  /* ===================================
   * BUTTON STYLES
   * Gradient buttons with gold color scheme
   * ==================================== */

  --gradient-primary: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a 100%);
  --gradient-primary-hover: linear-gradient(
    335deg,
    #f4e38b 23.63%,
    #f4dd62 64.48%,
    #b27f2a 116.85%
  );
  --button-default-text: var(--color-slate-dark);
  --button-secondary-text: var(--color-white);

  /* Secondary gradient variables for reuse in other places */
  --gradient-secondary: linear-gradient(153deg, #fff 4.38%, #ccceff 81.13%);
  --gradient-secondary-inverted: linear-gradient(333deg, #fff 4.38%, #ccceff 81.13%);

  /* Secondary button variables */
  --secondary-gradient-button-background: linear-gradient(153deg, #fff 4.38%, #ccceff 81.13%);
  --color-dark-border: var(--color-white-20);
  --button-secondary-default-border: var(--color-white-10);
  --button-secondary-border-radius: 30px;

  /* ===================================
   * CONTENT SECTIONS
   * Styling for main content areas
   * ==================================== */
  --content-section-border: var(--color-white-10);

  /* Icon colors from variables.css */
  --icon-inactive-color: var(--color-white-60);
  --icon-active-color: var(--color-white);
  --icon-hover-color: var(--color-white);

  /* ===================================
   * COMPATIBILITY VARIABLES
   * For backwards compatibility with older code
   * ==================================== */
  --button-flat-text-dark: var(--color-white);
  --button-flat-text-light: var(--button-flat-text-dark);

  /* Calendar style */
  --color-card: #fff;

  /* ===================================
   * ROUTE WRAPPER
   * ==================================== */
  --route-wrapper-status-page-min-height: calc(100dvh - 180px);

  /* ===================================
   * NAVIGATION TABS STYLES
   * Unified styling for all navigation tabs components
   * ==================================== */
  --navigation-tabs-light-background: var(--color-green-deep-dark);
  --navigation-tabs-light-border: var(--color-white-10);
  --navigation-tabs-border-radius: 30px;
  --navigation-tabs-active-border-radius: 20px;
  --navigation-tabs-padding: 0.25rem;
  --navigation-tabs-active-background: #004e44;
  --navigation-tabs-active-text-color: var(--color-white);
  --navigation-tabs-width: 280px;
  --navigation-tabs-margin-top: 1.5rem;
  --navigation-tabs-margin-bottom: 1.5rem;

  /* Tab trigger values */
  --tabs-trigger-padding-x: 1rem;
  --tabs-trigger-padding-y: 0.5rem;

  /* Select Dropdown Content */
  --select-content-dark-background: #051413;
  --select-content-border-radius: 16px;

  /* Select Items */
  --select-item-checked-background: #004e44;
  --select-item-hover-background: #006c5f;
  --select-item-text-color: #b3b3b3;
  --select-item-hover-text-color: #ffffff;
  --select-item-checked-text-color: #ffffff;

  /* ===================================
   * SCROLLBAR STYLES
   * ==================================== */
  --scrollbar-thumb-color-primary: var(--color-green-secondary);

  /* ===================================
   * MODAL STYLES
   * ==================================== */
  --color-dark-modal-background: var(--color-green-darker);

  /* Password strength variables */

  --text-icons-secondary: var(--color-white-60);

  /* Active state for input in dark theme */
  --input-focus-ring-dark: var(--color-green-primary);
  --input-focus-ring-light: var(--input-focus-ring-dark);

  /* ===================================
   * SWITCH COMPONENT VARIABLES
   * Values for the Switch component
   * ==================================== */
  --background: 20 14.3% 4.1%;
  --foreground: 0 0% 95%;

  /* DepositButton */

  --deposit-button-sidebar-font-size: 16px !important;

  /* ===================================
   * CALENDAR VARIABLES
   * Calendar styling for crown-green brand
   * ==================================== */
  --calendar-light-day-color: var(--color-white);

  --calendar-light-arrows: var(--color-green-primary);

  /* ===================================
   * GAMES FILTER PAGE STYLES
   * for crown-green brand
   * ==================================== */

  --close-icon-fill-light: var(--color-white-80);
  --close-icon-fill-dark: var(--color-white-80);

  /* ===================================
   * DARK THEME STYLES
   * Override variables for dark theme
   * Note: This is the primary theme for crown-green
   * ==================================== */
  .dark.brand-crown-green {
    --color-primary: var(--color-green-light);
    --color-secondary: var(--color-green-dark);
    --color-foreground: var(--color-white);

    /* Slider navigation icon active color */
    --slider-nav-icon-active-color: var(--color-white);
  }

  /* Add specific style for slider navigation icons */
  .slider-nav-icon {
    fill: var(--color-white) !important;
  }
}

.brand-crown-green button[class*='ghost'],
.brand-crown-green
  button[class*='primary']:where(
    :not(
      .submit-btn,
      .slider-nav-button,
      .burger-menu-btn,
      .live-chat-button,
      .tab-button,
      .mobile-bottom-nav-button,
      .category-filter-button,
      .search-button,
      .filters-button
    )
  ) {
  border: 0 !important;
}

.brand-crown-green [data-radix-select-trigger][data-state='open'],
.brand-crown-green [data-radix-select-trigger]:hover,
.brand-crown-green [data-radix-select-trigger]:focus {
  border-color: var(--color-green-primary);
  outline: none;
}

/* Styles for Select dropdown */
.brand-crown-green [data-select-content] {
  border-radius: var(--select-content-border-radius) !important;
  border-color: var(--color-green-primary) !important;
  background-color: var(--select-content-dark-background) !important;
}

/* Styles for Select items - exclude react-datepicker */
.brand-crown-green [role='option']:not(.react-datepicker__day) {
  color: var(--select-item-text-color) !important;
}

.brand-crown-green [role='option'][data-highlighted]:not(.react-datepicker__day),
.brand-crown-green [role='option'][data-state='checked']:not(.react-datepicker__day) {
  background-color: var(--select-item-checked-background) !important;
  color: var(--select-item-checked-text-color) !important;
}

.brand-crown-green [role='option']:hover:not(.react-datepicker__day) {
  background-color: var(--select-item-hover-background) !important;
  color: var(--select-item-hover-text-color) !important;
}

/* ===================================
   * DEPOSIT MODAL VARIABLES
   * ==================================== */
.dark.brand-crown-green,
.brand-crown-green {
  /* THEME SWITCHER VARIABLES */
  --theme-switcher-container-dark-border: var(--color-white-10);
  --theme-switcher-container-dark-bg: var(--color-green-darker);

  --theme-switcher-active-btn-dark-bg: var(--color-white-10);
  --theme-switcher-active-btn-dark-text: var(--color-white);

  --theme-switcher-inactive-btn-dark-bg: var(--color-green-darker);
  --theme-switcher-inactive-btn-dark-text: var(--color-white);
  --theme-switcher-inactive-btn-hover-dark-bg: var(--color-white-10);

  --theme-switcher-btn-font-family: 'Jost', sans-serif;
}

.brand-crown-green {
  --color-foreground: var(--color-white) !important;
  --color-primary: var(--color-green-primary) !important;
  --color-primary-foreground: var(--color-white) !important;
}

/* Brand-specific tokens only (rest imported from token files) */
:root {
  --color-blue-500: #3b82f6;
  --color-blue-400: #60a5fa;

  --color-gray-100: #27272a;
}