:root {
  /* --brand */
  --brand: #5b7dfc;                                /* brand, roundBtnActive, toggleKnobColor*/
  --brandHover: #526cfa;                           /* brandHover */
  --brand200: #e3e9ff;
  --brand100: #f0f2ff;                             /* brandLight, toggleBgColor, markdownQuoteBg */
  --brandBlack: #11141a;                           /* extraBlack */
  --brandA10: #5b7dfc1a;                           /* brandAlpha1a */
  --brandA20: #5b7dfc33;                           /* brandAlpha33 */
  --brandA30: #5b7dfc4d;
  --brandA40: #5b7dfc66;
  --brandHoverA00: #526cfa00;                      /* brandHoverAlpha00 */

  /* --text */
  --textWhite: #ffffff;
  --textBlack: #11151a;
  --textSubtle: #afbccc;                           /* sidebarSubtitle, sidebarUsernameMobile */
  --textLight: #8d9bb0;                            /* textLight, coinsCounter, listItemGray */
  --textNormal: #5f6f84;                           /* textGray, pwaPromptBannerText, tabItemGray */
  --textMedium: #465773;
  --textDefault: #292e35;                          /* textDark, topRightButton */
  --textSuccess: #32c24d;                          /* infoGreen */
  --textSuccessMedium: #28af28;
  --textAlert: #f1231f;                            /* infoRed, sidebarLinkCounter */
  --textAlertMedium: #af4444;                      /* athRed */
  --textPremium: #3f3d3a;

  /* --border */
  --borderWhite: #ffffff;
  --borderBlackA08: #00000014;
  --borderDivider: #edf2f7;                        /* compDivider */
  --borderDefault: #dfe6f0;                        /* compBorder, compBorder2, aiChatBotBgBorder, sliderRail */
  --border500: #afbccc;                            /* scrollBarGray, hrGray */
  --border700: #5f6f84;
  --border900: #292e35;
  --borderDark: #333333;                           /* borderDark */
  --borderSuccess: #bdeebd;
  --borderAlert: #f8bdbd;                          /* compBorderRed */
  --borderPremium: #f1e2c7;
  --borderCoins: #ffcb00;                          /* extraYellowCoins */

  /* --surface */
  --surfaceWhite: #ffffff;                         /* white, leftContainerBg, pwaPromptBannerBg */
  --surfaceWhiteA00: #ffffff00;
  --surfaceWhiteA60: #ffffff99;                    /* browsePhotoBg */
  --surfaceWhiteA90: #ffffffe6;                    /* navbarBackground */
  --surfaceBlack: #000000;
  --surfaceBlackA03: #00000008;                    /* settingsBtnBg */
  --surface50: #fafbfc;                            /* compHoverLight, tabSubitemBg, boxShadowLight*/
  --surfaceDefault: #f6f8fa;                       /* compCardHover, compBgrAvatarSidebar, coinsCounterBg, aiChatBotBg */
  --surface200: #edf2f7;                           /* compBgrAvatar, sideMenuNonPicutreBg, bgPattern, userBgPattern */
  --surface300: #dfe6f0;                           /* switchGray, athGray */
  --surface400: #c8d3e0;                           /* compToggle, icoLight, switchDark, switchDisabled, athShadow */
  --surface500: #afbccc;                           /* icoReg, noPhotoArc */
  --surface600: #8d9bb0;
  --surface700: #5f6f84;
  --surface900: #292e35;
  --surfaceSuccess100: #f5fff5;
  --surfaceSuccess200: #bdeebd;
  --surfaceSuccess500: #2ad149;                    /* hoverGreen */
  --surfaceSuccess600: #32c24d;                    /* infoGreen */
  --surfaceSuccess700: #28af28;
  --surfaceAlert100: #fff0f0;                      /* compCallout, compCalloutRed, timelineShadow1 */
  --surfaceAlert200: #fdd8d8;
  --surfaceAlert500: #ff2727;                      /* hoverRed */
  --surfaceAlert600: #f1231f;                      /* infoRed, sidebarLinkCounter, heartRed */
  --surfaceAlert700: #af4444;
  --surfacePremium100: #fbf7ef;
  --surfacePremium200: #f1e2c7;
  --surfacePremium500: #e2c58f;                    /* gold, sidebarBanner, bannerHover */
  --surfaceCoins: #ffcb00;                         /* extraYellowCoins, infoYellow, coinGold*/

  /* --special */
  --specialOrange: #ff6640;                        /* extraOrange */
  --specialOrangeRed: #ff2c2c;                     /* extraOrangeRed */
  --specialMagenta: #db00ab;                       /* extraMagenta */
  --specialPurple: #a309b6;                        /* extraPurple */
  --specialViolet: #8000ff;                        /* extraViolet */
  --specialViolet2: #875CF8;                       /* purpleAccent */
  --specialBlueDark: #0030db;                      /* extraBlueDark */
  --specialCyan: #05a9ff;                          /* extraCyan */
  --specialTurquoise: #00d9c7;                     /* extraTurquoise */
  --specialGreenBright: #00dd4a;                   /* extraGreenBright */
  --specialLime: #c0e700;                          /* extraLime */
  --meetMeNo: #fa43a2;                             /* meetMeNo */
  --meetMeYes: #526cfa;                            /* meetMeYes */

  /* --overlay */
  --overlayWhiteA20: #ffffff33;                    /* avBgAlpha */
  --overlayWhiteA30: #ffffff4d;                    /* profileEditIntroContainerBgBoxShadow1, touchHighlight */
  --overlayWhiteA60: #ffffff99;                    /* meetMeCtaNoBoxShadowMobile2 */
  --overlayWhiteA90: #ffffffe6;                    /* navbarBackground */
  --overlayBlackA01: #00000005;                    /* shadowLight */
  --overlayBlackA05: #0000000d;                    /* shadowMedium, shadowDark */
  --overlayBlackA08: #00000014;
  --overlayBlackA10: rgba(34, 34, 34, 0.1);        /* swiperBulletInactive */
  --overlayBlackA15: rgba(0, 0, 0, 0.15);          /* gradientEnd */
  --overlayBlackA20: rgba(34, 34, 34, 0.2);        /* swiperBulletActive */
  --overlayGradientStart: rgba(217, 219, 223, 0);  /* gradientStart */
  --overlayCtaYesInn: #0f50d140;                   /* matchCtaBoxShadow1, meetMeCtaBoxShadow1 */
  --overlayCtaYesOut: #5b7dfc80;                   /* matchCtaBoxShadow2, meetMeCtaBoxShadow2 */
  --overlayCtaNoInn: #d9218c33;                    /* meetMeCtaNoBoxShadow1, meetMeCtaNoBoxShadowMobile1 */
  --overlayCtaNoOut: #fa58a980;                    /* meetMeCtaNoBoxShadow2, meetMeCtaNoBoxShadowMobile3 */
  --overlayCardShadA10: #7796c41a;                 /* profileEditIntroContainerBgBoxShadow2 */
  --overlayCardShadA15: #7796c426;                 /* profileEditIntroContainerBgBoxShadow3 */
  --overlayModalBg: #1e2f49b3;                     /* modalBgColor */

  /* kept from old palette */
  --brandDark: #1d68ad;
  --greenTransparent: #32c24d00;
}