:root {
  --font-family-base: 'Roboto', sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-emoji-hero: 64px;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --line-height-xs: 16px;
  --line-height-sm: 18px;
  --line-height-md: 20px;
  --line-height-lg: 24px;
  --line-height-xl: 32px;

  --color-brand: hsl(340, 75%, 55%);
  --color-brand-dark: hsl(340, 75%, 35%);
  --color-brand-alpha-8: hsla(340, 75%, 55%, 0.08);
  --color-brand-alpha-15: hsla(340, 75%, 55%, 0.15);
  --color-brand-alpha-25: hsla(340, 75%, 55%, 0.25);

  --color-bg-base: hsl(0, 0%, 5%);
  --color-tg-theme-bg: #0d0d0d;
  --color-surface-default: hsl(0, 0%, 10%);
  --color-surface-muted: hsl(0, 0%, 7%);
  --color-surface-hover: hsl(0, 0%, 13%);
  --color-surface-selected: hsl(0, 0%, 15%);
  --color-surface-cta: var(--color-brand);

  --color-text-strong: hsl(0, 0%, 95%);
  --color-text-default: hsl(0, 0%, 65%);
  --color-text-muted: hsl(0, 0%, 45%);
  --color-text-accent: var(--color-brand);

  --color-status-success: hsl(142, 71%, 45%);
  --color-status-success-alpha-25: hsla(142, 71%, 45%, 0.25);
  --color-status-error: hsl(0, 84%, 60%);
  --color-status-error-alpha-10: hsla(0, 84%, 60%, 0.1);
  --color-status-error-alpha-25: hsla(0, 84%, 60%, 0.25);
  --color-status-error-alpha-40: hsla(0, 84%, 60%, 0.4);
  --color-rarity-legendary: hsl(25, 95%, 53%);
  --color-rarity-epic: hsl(271, 91%, 65%);
  --color-rarity-rare: hsl(217, 91%, 60%);
  --color-rarity-uncommon: hsl(142, 71%, 45%);
  --color-rarity-legendary-alpha: hsla(25, 95%, 53%, 0.15);
  --color-rarity-epic-alpha: hsla(271, 91%, 65%, 0.15);
  --color-rarity-rare-alpha: hsla(217, 91%, 60%, 0.15);
  --color-rarity-uncommon-alpha: hsla(142, 71%, 45%, 0.15);

  --color-event-burn: hsl(15, 85%, 45%);
  --color-event-burn-alpha: hsla(15, 85%, 45%, 0.15);
  --color-event-upgrade: hsl(60, 85%, 45%);
  --color-event-upgrade-alpha: hsla(60, 85%, 45%, 0.15);
  --color-event-craft: hsl(165, 85%, 45%);
  --color-event-craft-alpha: hsla(165, 85%, 45%, 0.15);

  --color-overlay-dark: hsla(0, 0%, 0%, 0.8);
  --color-overlay-light-8: hsla(0, 0%, 100%, 0.08);
  --color-overlay-light-10: hsla(0, 0%, 100%, 0.1);
  --color-overlay-light-85: hsla(0, 0%, 100%, 0.85);
  --color-overlay-light-92: hsla(0, 0%, 100%, 0.92);

  --color-pattern-base: hsl(0, 0%, 10%);
  --color-backdrop-center: hsl(0, 0%, 22%);
  --color-backdrop-edge: hsl(0, 0%, 6%);

  --space-0: 4px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;

  --space-content-bottom: 100px;

  --border-width-thin: 1px;
  --border-width-thick: 2px;

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 18px;
  --radius-pill: 32px;
  --radius-full: 999px;

  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-base: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --icon-2xl: 28px;
  --icon-3xl: 32px;
  --icon-4xl: 40px;
  --icon-5xl: 48px;
  --icon-6xl: 52px;
  --icon-7xl: 56px;
  --icon-hero: 84px;
  --icon-stroke-m: 1.5px;
  --icon-stroke-l: 2px;

  --breakpoint-xs: 480px;
  --breakpoint-xxs: 360px;
  --container-max: 540px;
  --modal-min-width: 400px;
  --intrinsic-list-height: 400px;
  --size-banner-lottie: 94px;
  --size-gift-preview: 160px;
  --min-height-pending-block: 192px;
  --height-list-sm: 200px;
  --height-list-md: 360px;
  --height-table-row: 48px;
  --height-button-sm: 28px;
  --height-button-md: 52px;
  --activity-row-height: 88px;
  --activity-row-gap: 12px;
  --modal-padding: var(--space-5);
  --modal-radius: var(--radius-pill);

  --nav-height: 60px;

  --tg-safe-area-inset-top: 0px;
  --tg-safe-area-inset-bottom: 0px;
  --tg-safe-area-inset-left: 0px;
  --tg-safe-area-inset-right: 0px;

  --safe-area-inset-bottom: var(--tg-safe-area-inset-bottom);
  --safe-area-inset-left: var(--tg-safe-area-inset-left);
  --safe-area-inset-right: var(--tg-safe-area-inset-right);
  --safe-area-inset-top: var(--tg-safe-area-inset-top);
}