:root {
  /*Design System Color*/
  --base-900: #010d14;
  --base-800: #04121a;
  --base-700: #061721;
  --base-700-rgb: 6, 23, 33;
  --base-600: #0a1c28;
  --base-500: #122633;
  --base-400: #1a2f3d;
  --base-300: #2e4657;
  --base-200: #97b2c2; /* Figma: Base/200 */
  --base-100: #c3d5de;
  --base-50: #f2f6f8;
  --base-0: #ffffff;

  --paragraph-dark-main-text: #ececec;

  --accent-blue: #651ad6;
  --accent-cyan: #00d0ff; /* Figma: Accent/Cyan */
  --accent-pink: #e045ff; /* Figma: Accent/Pink */

  --gradient-pink: linear-gradient(180deg, #530a57 10%, #0c1927 100%);
  --gradient-puprle: linear-gradient(180deg, #4e0f9a 10%, #0c1927 100%);
  --gradient-green: linear-gradient(180deg, #063a46 10%, #0c1927 100%);
  --gradient-light-green: linear-gradient(180deg, #005a6e 0%, #0c1927 100%);
  --gradient-blue: linear-gradient(180deg, #221c97 10%, #0c1927 100%);
  --gradient-seo: linear-gradient(
    to bottom,
    transparent 20%,
    rgba(var(--base-700-rgb), 0.8) 60%,
    rgba(var(--base-700-rgb), 0.97) 80%,
    rgb(var(--base-700-rgb)) 100%
  );

  --brand-dark: #00c389;
  --brand-main: #00e8a3;
  --brand-light: #33ffc2;
  --brand-glassy: #0e1a24;

  --brand-base-filter: brightness(0) saturate(100%) invert(76%) sepia(26%) saturate(251%) hue-rotate(158deg)
    brightness(87%) contrast(88%);
  --brand-main-filter: brightness(0) saturate(100%) invert(74%) sepia(22%) saturate(7304%) hue-rotate(114deg)
    brightness(102%) contrast(101%);

  --brand-secondary-dark: #041812;
  --brand-secondary-light: #0a3327;

  --disabled: #717a80;
  --disabled-dark: #1f262b;
  --disabled-light: #717a80;

  --glassy-dark: rgba(1, 13, 20, 0.75);
  --glassy-main: rgba(10, 28, 40, 0.8);
  --glassy-light: rgba(18, 38, 51, 0.85);

  --system-information: #3694ff;
  --system-danger: #f33336;
  --system-danger-dark: #d12c2e;
  --system-danger-light: #ff4548;
  --system-success: #5cf333;
  --system-success-main: #64f33d; /* Figma: System/Success/Main 500 */
  --system-success-dark: #56d42c;
  --system-success-light: #8fff70;
  --system-warning: #f3a333;
  --system-warning-dark: #de8f21;
  --system-warning-light: #ffa930;
  --system-warning-main: #f2a02e; /* Figma: System/Warning/Main 500 */
  --system-error-main: #f33d40;
  --system-error-light: #ff4d4f; /* Figma: System/Error/Light 300 */

  --interaction-primary-light: #33ffc2;
  --interaction-primary-main: #00e8a3;
  --interaction-primary-dark: #00c389;

  /*fonts*/
  --font-secondary: var(--font-inter);
  --font-main: var(--font-poppins, var(--font-noto-sans));

  /* Figma: Typography — UI styles (Inter) */
  --ui-font: var(--font-inter);
  --ui-medium-font-size: 14px;
  --ui-medium-line-height: 21px;
  --ui-medium-letter-spacing: 0px;
  --ui-medium-weight-regular: 400;
  --ui-medium-weight-medium: 500;
  --ui-medium-weight-bold: 700;
  --ui-large-font-size: 16px;
  --ui-large-line-height: 24px;
  --ui-large-letter-spacing: 0px;
  --ui-large-weight-regular: 400;
  --ui-large-weight-medium: 500;
  --ui-large-weight-bold: 700;
  --ui-small-font-size: 12px;
  --ui-small-line-height: 18px;
  --ui-small-letter-spacing: 0.12px;
  --ui-small-weight-regular: 400;
  --ui-small-weight-medium: 500;
  --ui-small-weight-bold: 700;
  --ui-x-small-font-size: 10px;
  --ui-x-small-line-height: 17px;
  --ui-x-small-letter-spacing: 0.1px;
  --ui-x-small-weight-regular: 400;
  --ui-x-small-weight-medium: 500;
  --ui-x-small-weight-bold: 700;
  --ui-xx-small-font-size: 8px;
  --ui-xx-small-line-height: 14px;
  --ui-xx-small-letter-spacing: 0.08px;
  --ui-xx-small-weight-regular: 400;
  --ui-xx-small-weight-medium: 500;
  --ui-xx-small-weight-bold: 700;

  /* Lootbox heading typography */
  --lb-heading-lg-lh: 35px;
  --lb-heading-sm-weight: 700;
  --lb-heading-sm-size: 18px;
  --lb-heading-sm-lh: 22.5px;
  --lb-heading-sm-transform: none;
  --lb-heading-xs-lh: 20px;

  --modal-tablet-with: 767px;
  --modal-desktop-with: 1216px;

  --modal-z-index: 105;
  --modal-overlay-z-index: 100;

  /*ui*/
  --button-border-radius: 10px;
  --sidebar-padding: 14px 0;
  --sidebar-menu-item-padding: 7px 24px;
  --sidebar-menu-item-radius: 0;
  --sidebar-menu-item-collapsed-radius: 0;
  --sidebar-menu-item-collapsed-width: 100%;
  --sidebar-menu-item-collapsed-height: 40px;
  --sidebar-menu-items-gap: 0;
  --mobile-menu-padding: 0;
  --mobile-menu-header-padding: 18px 24px;
  --bottom-navigation-width: calc(100% - 16px);
  --bottom-navigation-bottom: 10px;
  --bottom-navigation-translateX: 8px;
  --bottom-navigation-raduis: 8px;
  --bottom-navigation-background-color: rgba(1, 13, 20, 0.75);
  --bottom-navigation-border-color: #122633;
  --header-background: #010d14;
  --avatar-border-radius: 4px;
  --body-background-color: #04121a;

  --tournament-card-width-large: 558px;
  --tournament-card-width-small: 358px;
  --tournament-card-height-large: 242px;
  --tournament-card-height-small: 190px;

  /*tg*/
  --tg-top-offset: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --tg-header-offset: var(--tg-top-offset);
}

.ant-tooltip {
  font-family: var(--font-main);
  font-size: 10px;
}

.ant-tooltip .ant-tooltip-inner,
.ant-tooltip .ant-tooltip-arrow::before {
  background-color: var(--base-400);
}

.ant-tooltip .ant-tooltip-inner {
  min-height: 20px !important;
  color: var(--base-100);
  border-radius: 8px;
  padding: 8px;
}