:root {
  /*Design System Color*/
  --base-900: #04060a;
  --base-800: #0e1014;
  --base-700: #15171c;
  --base-700-rgb: 21, 23, 28;
  --base-600: #1c1f26;
  --base-500: #252830;
  --base-400: #2e313b;
  --base-300: #78797d;
  --base-200: #a0a1a3; /* Figma: Base/200 */
  --base-100: #c2c3c4;
  --base-50: #f0f0f0;
  --base-0: #ffffff;

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

  --accent-red: #ff1716;
  --accent-orange: #ed8c20;
  --accent-yellow: #ffd805;
  --accent-gold: #f5c54f; /* Figma: Accent/Gold */

  --gradient-progress: linear-gradient(90deg, #6606ba 0%, #49bfff 100%);
  --gradient-stroke: linear-gradient(180deg, #24fde7 0%, #2d249c 100%);
  --gradient-modal: linear-gradient(180deg, #3a1c7a 0%, #1e1739 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: var(--accent-gold);
  --brand-main: linear-gradient(180deg, #f5c54f 0%, #ed8c20 100%);
  --brand-light: var(--accent-gold);

  --interaction-primary-dark: linear-gradient(180deg, #e3b139 0%, #cc720e 100%);
  --interaction-primary-main: linear-gradient(180deg, #f5c54f 0%, #ed8c20 100%);
  --interaction-primary-light: linear-gradient(180deg, #ffdd8a 0%, #ffa94a 100%);

  --interaction-secondary-dark: #08090c;
  --interaction-secondary-main: #12141a;
  --interaction-secondary-light: #2f323b;

  --interaction-delete-dark: linear-gradient(180deg, #e01110 0%, #8a1d07 100%);
  --interaction-delete-main: linear-gradient(180deg, #ff1716 0%, #a8260c 100%);
  --interaction-delete-light: linear-gradient(180deg, #ff5d5c 0%, #fc2423 100%);

  --brand-base-filter: brightness(0) saturate(100%) invert(70%) sepia(6%) saturate(82%) hue-rotate(182deg)
    brightness(91%) contrast(92%);
  --brand-main-filter: brightness(0) saturate(100%) invert(99%) sepia(96%) saturate(4762%) hue-rotate(317deg)
    brightness(100%) contrast(93%);

  --brand-secondary-dark: transparent;
  --brand-secondary-light: transparent;

  --disabled: #454545;
  --disabled-dark: #262626;
  --disabled-light: #646464;

  --surface-yellow-gold: linear-gradient(270deg, #f5c550 -0.04%, #ed8c20 100%);
  --surface-sunset-orange: linear-gradient(180deg, #ffe601 26.6%, #ff0b16 114.91%);
  --surface-fire-red: radial-gradient(
    119.92% 106.39% at 90% 95%,
    #a8260c 0%,
    #750c14 30.48%,
    #200a0e 80%,
    #08090c 100%
  );
  --outline-gradient-orange: linear-gradient(
    180deg,
    rgba(255, 123, 36, 0.5) 0%,
    rgba(179, 165, 119, 0) 48%,
    rgba(62, 58, 43, 0) 100%,
    rgba(25, 25, 25, 0) 100%
  );
  --outline-gradient-light-yellow: linear-gradient(180deg, #1f1e1e 0%, #b3a577 48%, #3e3a2b 74%, #191919 100%);
  --outline-gradient-fire-red: radial-gradient(259.18% 112.59% at 94.88% 78.53%, #ffe101 30%, #ff0f1a 100%);
  --outline-gradient-fire-red-title: radial-gradient(88.76% 253.85% at 94.88% 78.53%, #ffe101 30%, #ff0f1a 100%);
  --outline-gradient-fire-red-title-vertical: linear-gradient(190deg, #ffe601 26.6%, #ff0b16 114.91%);
  --outline-gradient-fire-yellow-title-vertical: linear-gradient(190.03deg, #ffe601 26.6%, #ff0b16 114.91%);
  --outline-gradient-fire-blood-red: linear-gradient(180deg, #a8260c 0%, #750c14 30.48%, #200a0e 80%, #08090c 100%);

  --system-information-dark: #116cd4;
  --system-information: #2189ff; /* Figma: System/Information/Main 500 */
  --system-information-light: #80bbff;
  --system-danger: #f33336;
  --system-danger-dark: #b42222;
  --system-danger-light: #fb7d7d;
  --system-success: #28e838;
  --system-success-dark: #18c726; /* Figma: System/Success/Dark 700 */
  --system-success-light: #7bf585;
  --system-warning: #ff8f2e;
  --system-warning-dark: #d96c0d;
  --system-warning-light: #ffbb80;
  --system-warning-main: #ff6e2b; /* Figma: System/Warning/Main 500 */
  --lb-item-card-epic-glow: #e0500d; /* Figma: System/Warning/Dark 700 used by LootboxItemCard epic glow */
  --system-error-main: #fb2f2f;

  --tournament-card-width-large: 558px;
  --tournament-card-width-small: 385px;
  --tournament-card-height-large: 222px;
  --tournament-card-height-small: 182px;

  /*fonts*/
  --font-secondary: var(--font-noto-sans);
  --font-main: var(--font-montserrat);

  /* Figma: Typography — UI styles (Noto Sans) */
  --ui-font: var(--font-noto-sans);
  --ui-medium-font-size: 14px;
  --ui-medium-line-height: 20px; /* Figma: 20.3px → rounded */
  --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-letter-spacing-regular: 0.2px;
  --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-letter-spacing-regular: 0.16px;
  --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: 28px;
  --lb-heading-sm-weight: 800;
  --lb-heading-sm-size: 20px;
  --lb-heading-sm-lh: 22px;
  --lb-heading-sm-transform: uppercase;
  --lb-heading-xs-lh: 18px;

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

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

  /*ui*/
  --button-border-radius: 8px;
  --sidebar-padding: 12px;
  --sidebar-menu-item-padding: 6px;
  --sidebar-menu-item-radius: 8px;
  --sidebar-menu-item-collapsed-radius: 50%;
  --sidebar-menu-item-collapsed-width: 34px;
  --sidebar-menu-item-collapsed-height: 34px;
  --sidebar-menu-items-gap: 4px;
  --mobile-menu-padding: 12px;
  --mobile-menu-header-padding: 0;
  --bottom-navigation-width: 100%;
  --bottom-navigation-bottom: 0;
  --bottom-navigation-translateX: 0;
  --bottom-navigation-raduis: 0;
  --bottom-navigation-background-color: var(--base-800);
  --bottom-navigation-border-color: transparent;
  --header-background: var(--base-800);
  --avatar-border-radius: 50%;
  --body-background-color: #04060a;

  --offer-height: 24px;
}