:root {
  --static-surface-brand: var(--alert);
  --button-secondary-label: var(--Gray);
  --wrapper: 1250px;
  --rgb-white: 255, 255, 255;
  --black: #000000;
  --Pure-Black: #2e3138;
  --bg-side-menu: #fff;
  --bg-header-left: rgba(255, 255, 255, 0.15);
  --bg-footer: #ffffff;
  --bg-discover: #fff;
  --text-user-content: var(--Pure-Black);
  --bg-landing-decoration: currentColor;
  --bg-landing-communication: #f6f6fe;
  --bg-landing-discover: #fff;
  --background: #f5f8ff;
  --Gray: #393e46;
  --Medium-Gray-50: #737b8c;
  --Medium-Gray-70: #a3adc2;
  --Light-Gray-90: #d9e1f2;
  --Light-Gray-97: #f4f6fb;

  --white: #ffffff;
  --link: #0093e5;
  --red10: #fd346d;
  --velvet10: #6033cc;
  --yellow: #ffd028;

  --primaryRGB: 91, 70, 221;
  --primary: #5b46dd;
  --primaryHover: #5644cd;
  --primaryActive: #5242bc;

  --additionalRGB: 255, 83, 124;
  --additional: #ff537c;

  --alert: #f04a4a;

  --success: #00b259;
  --successRGB: 0, 178, 89;

  --secondary: #ffa122;
  --secondaryRGB: 255, 161, 34;

  --premium: #cbac4d;
  --premiumHover: #c1a349;
  --premiumActive: #b79b45;

  --z-index-modal: 1000;

  --shadow: 0px 2px 8px rgba(54, 69, 99, 0.08);
  --shadowHover: 0px 4px 16px rgba(54, 69, 99, 0.08);
  --fontFamily: 'Satoshi', sans-serif;

  --mobHeaderHeight: 48px;
  --webHeaderHeight: 84px;

  --logoAspectRatio: 203/40;

  --customSelect-background_hover: var(--Light-Gray-97);
  --customSelect-color_active: #fff;
  --customSelect-background_active: var(--primary);
}