:root {
  --tux-colorPositive: rgba(11, 224, 155, 1);
  --tux-colorNegative: rgba(255, 76, 58, 1);
  --tux-colorToastDefault: rgba(84, 84, 84, .92);
  --tux-colorToastNegative: rgba(255, 76, 58, .92);
  --tux-colorSecondary: rgba(32, 213, 236, 1);
  --tux-colorSecondary2: rgba(16, 162, 197, 1);
  --tux-colorPositive2: rgba(79, 171, 126, 1);

  --tux-colorConstTextInverse: rgba(255, 255, 255, 1);
  --tux-colorConstTextInverse2: rgba(255, 255, 255, .9);
  --tux-colorConstTextInverse3: rgba(255, 255, 255, .75);
  --tux-colorConstTextInverse4: rgba(255, 255, 255, .5);
  --tux-colorConstTextInverse5: rgba(255, 255, 255, .34);
  --tux-colorConstTextPrimary: rgba(22, 24, 35, 1);

  --tux-colorConstBGInverse: rgba(0, 0, 0, 1);
  --tux-colorConstBGInverse2: rgba(0, 0, 0, .6);
  --tux-colorConstBGInverse3: rgba(37, 37, 37, .6);
  --tux-colorConstBGInverse4: rgba(84, 84, 84, .5);
  --tux-colorBGCreation: rgba(0, 0, 0, 1);
  --tux-colorBGCreation2: rgba(27, 27, 27, 1);
  --tux-colorBGCreation5: rgba(0, 0, 0, .15);
  --tux-colorConstBGMat: rgba(255, 255, 255, .2);
  --tux-colorConstBGContainer: rgba(255, 255, 255, .12);
  --tux-colorConstBGContainer2: rgba(255, 255, 255, .08);
  --tux-colorConstBGContainer3: rgba(255, 255, 255, .04);
  --tux-colorConstBGPlaceholderOpaque: rgba(241, 241, 241, 1);
  --tux-colorConstBGInverseOpaque: rgba(37, 37, 37, 1);
  --tux-colorConstBGInverse1: rgba(56, 56, 56, .95);

  --tux-colorConstLineInverse: rgba(255, 255, 255, .2);
  --tux-colorConstLineInverse2: rgba(255, 255, 255, .12);

  --tux-colorSDPrimary: rgba(0, 0, 0, .8);
  
  --tux-gradientLive: linear-gradient(131.17deg, #ff1764 0%, #ed3495 94.15%);
  --tux-gradientVideoCoverOverlay: linear-gradient(
    180deg,
    rgba(22, 24, 35, .0001) 2.92%,
    rgba(22, 24, 35, .5) 98.99%
  );
    
  --tux-colorAssistColorYellow: rgba(250, 206, 21, 1);
}


:root,
[data-theme="light"]:root {
  --tux-colorPrimary: rgba(254, 44, 85, 1);
  --tux-colorLink: rgba(254, 44, 85, 1);
  --tux-colorPrimary2: rgba(22, 24, 35, 1);

  --tux-colorTextPrimary: rgba(22, 24, 35, 1);
  --tux-colorTextSecondary: rgba(22, 24, 35, .75);
  --tux-colorTextTertiary: rgba(22, 24, 35, .5);
  --tux-colorTextQuaternary: rgba(22, 24, 35, .34);

  --tux-colorBGPrimary: rgba(255, 255, 255, 1);
  --tux-colorBGSecondary: rgba(255, 255, 255, 1);
  --tux-colorBGTertiary: rgba(255, 255, 255, 1);
  --tux-colorBGQuaternary: rgba(255, 255, 255, 1);
  --tux-colorBGQuinary: rgba(255, 255, 255, 1);
  --tux-colorBGSecondary2: rgba(255, 255, 255, 1);
  --tux-colorBGTertiary2: rgba(255, 255, 255, 1);
  --tux-colorBGPlaceholderDefault: rgba(22, 24, 35, .06);
  --tux-colorBGPlaceholderOpaque: rgba(241, 241, 241, 1);
  --tux-colorBGInput: rgba(22, 24, 35, .06);
  --tux-colorBGInput2: rgba(22, 24, 35, .06);
  --tux-colorBGView: rgba(22, 24, 35, .03);
  --tux-colorBGCreation3: rgba(248, 248, 248, 1);
  --tux-colorBGCreation4: rgba(255, 255, 255, 1);
  --tux-colorBGHover: rgba(22, 24, 35, .06);
  --tux-colorBGBrand: rgba(254, 44, 85, .06);

  --tux-colorLinePrimary: rgba(22, 24, 35, .2);
  --tux-colorLineSecondary: rgba(22, 24, 35, .12);
  --tux-colorLineInput: rgba(22, 24, 35, .5);
  --tux-colorLinePrimary2: rgba(22, 24, 35, .2);
  --tux-colorLineSecondary2: rgba(22, 24, 35, .12);
  --tux-colorLineSecondary3: rgba(22, 24, 35, .12);
  --tux-colorLineDarker: rgba(22, 24, 35, .12);

  --tux-colorSDSecondary: rgba(0, 0, 0, .5);
  --tux-colorSDTertiary: rgba(0, 0, 0, .2);
}

[data-theme="dark"]:root {
  --tux-colorPrimary: rgba(255, 59, 92, 1);
  --tux-colorLink: rgba(255, 59, 92, 1);
  --tux-colorPrimary2: rgba(255, 255, 255, .9);

  --tux-colorTextPrimary: rgba(255, 255, 255, .9);
  --tux-colorTextSecondary: rgba(255, 255, 255, .75);
  --tux-colorTextTertiary: rgba(255, 255, 255, .5);
  --tux-colorTextQuaternary: rgba(255, 255, 255, .34);

  --tux-colorBGPrimary: rgba(18, 18, 18, 1);
  --tux-colorBGSecondary: rgba(37, 37, 37, 1);
  --tux-colorBGTertiary: rgba(46, 46, 46, 1);
  --tux-colorBGQuaternary: rgba(56, 56, 56, 1);
  --tux-colorBGQuinary: rgba(75, 75, 75, 1);
  --tux-colorBGSecondary2: rgba(255, 255, 255, .08);
  --tux-colorBGTertiary2: rgba(255, 255, 255, .12);
  --tux-colorBGPlaceholderDefault: rgba(255, 255, 255, .08);
  --tux-colorBGPlaceholderOpaque: rgba(37, 37, 37, 1);
  --tux-colorBGInput: rgba(255, 255, 255, .12);
  --tux-colorBGInput2: rgba(255, 255, 255, .08);
  --tux-colorBGView: rgba(255, 255, 255, .04);
  --tux-colorBGCreation3: rgba(18, 18, 18, 1);
  --tux-colorBGCreation4: rgba(27, 27, 27, 1);
  --tux-colorBGBrand: rgba(254, 44, 85, .34);
  
  --tux-colorLinePrimary: rgba(255, 255, 255, 0);
  --tux-colorLineSecondary: rgba(255, 255, 255, .12);
  --tux-colorLineInput: rgba(255, 255, 255, .5);
  --tux-colorLinePrimary2: rgba(255, 255, 255, .2);
  --tux-colorLineSecondary2: rgba(255, 255, 255, 0);
  --tux-colorLineSecondary3: rgba(255, 255, 255, .5);
  --tux-colorLineDarker: rgba(0, 0, 0, .6);

  --tux-colorSDSecondary: rgba(0, 0, 0, .68);
  --tux-colorSDTertiary: rgba(0, 0, 0, .5);
}

:root {
  --tux-boxShadowIcon: 0 2px 12px 0 rgba(0, 0, 0, .12);
  --tux-boxShadowLayer: 0 2px 8px 0 rgba(0, 0, 0, .06);
  --tux-boxShadowNotice: 0 2px 12px 0 rgba(0, 0, 0, .12);
}

:root {
  --tux-fontFamilyHeading: SofiaPro, Arial, Tahoma, PingFangSC, sans-serif;
  --tux-fontFamilyParagraph: ProximaNova, Arial, Tahoma, PingFangSC, sans-serif;

  --tux-fontWeightRegular: 400;
  --tux-fontWeightSemibold: 600;
  --tux-fontWeightBold: 700;

  --tux-fontSizeH1: 96px;
  --tux-fontSizeH2: 72px;
  --tux-fontSizeH3: 56px;
  --tux-fontSizeH4: 48px;
  --tux-fontSizeH5: 32px;
  --tux-fontSizeH6: 24px;
  --tux-fontSizeH7: 18px;

  --tux-fontSizeP1: 24px;
  --tux-fontSizeP2: 18px;
  --tux-fontSizeP3: 16px;
  --tux-fontSizeP4: 14px;
  --tux-fontSizeP5: 12px;
}

@font-face {
  font-family: "SofiaPro";
  src: url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/sofiapro-bold.woff2)
      format("woff2"),
  url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/sofiapro-bold.woff)
      format("woff"),
  url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/sofiapro-bold.otf)
      format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "ProximaNova";
  src: url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Regular.woff2)
      format("woff2"),
  url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Regular.woff)
      format("woff"),
  url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Regular.otf)
      format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "ProximaNova";
  src: url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Semibold.woff2)
      format("woff2"),
  url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Semibold.woff)
      format("woff"),
  url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Semibold.otf)
      format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "ProximaNova";
  src: url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Bold.woff2)
      format("woff2"),
  url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Bold.woff)
      format("woff"),
  url(//lf16-tiktok-common.ttwstatic.com/obj/tiktok-web-common-sg/falcon/tiktok_fonts/Proxima-Nova-Bold.otf)
      format("opentype");
  font-weight: 700;
  font-style: normal;
}

:root {
  --tux-spacingMicro: 4px;
  --tux-spacingTiny: 8px;
  --tux-spacingSmall: 16px;
  --tux-spacingStandard: 24px;
  --tux-spacingMedium: 32px;
  --tux-spacingLarge: 48px;
  --tux-spacingXLarge: 64px;
  --tux-spacing2XLarge: 72px;
  --tux-spacing3XLarge: 96px;

  --tux-spacingInlineMicro: 4px;
  --tux-spacingInlineTiny: 8px;
  --tux-spacingInlineSmall: 12px;
  --tux-spacingInlineStandard: 16px;
  --tux-spacingInlineMedium: 24px;
  --tux-spacingInlineLarge: 32px;
  --tux-spacingInlineXLarge: 48px;
}