:root {
  --mainColor-rgb: 88, 101, 242;
  --mainColor: rgba(var(--mainColor-rgb), 1);
  --mainColorOpacity: rgba(var(--mainColor-rgb), 0.5);
  --mainColorOpacity_1: rgba(var(--mainColor-rgb), 0.1);
  --mainColorOpacity_03: rgba(var(--mainColor-rgb), 0.03);
  --brand: rgb(88, 101, 242);
  --brand-gradient: linear-gradient(
    90deg,
    rgb(142, 161, 225),
    rgb(114, 137, 218)
  );

  --mainColor-text: rgb(255, 255, 255);

  --main-bg-color: var(--mainColorOpacity_03);
  --main-crd-color: rgb(255, 255, 255);

  --main-tx-color: rgba(35, 39, 42, 1);
  --main-divider-color: rgb(0, 0, 0.05);
  --borderColor: rgba(138, 150, 163, 0.25);

  --mainWhite: rgb(255, 255, 255);
  --mainWhiteOpacity: rgb(248, 249, 250);
  --mainWhiteOpacity-5: rgba(255, 255, 255, 0.5);
  --mainWhiteOpacity-8: rgba(255, 255, 255, 0.8);

  --mainBlack: rgba(35, 39, 42, 1);
  --mainBlackOpacity: rgba(35, 39, 42, 0.5);

  --mainGray: rgb(249, 249, 249);
  --mainDarkGray: rgb(192, 192, 192);
  --mainGray-shell: var(--mainColorOpacity_03);
  --secondary-gray: rgb(129, 140, 153);
  --element: var(--main-crd-color);
  --track: rgba(122, 122, 122, 0.28);

  --chatbubble-other-color: rgba(229, 229, 234, 1);
  --chatbubble-other-q-color: rgba(229, 229, 234, 0.5);

  --border-radius: 1em;
  --border-radius-big: var(--border-radius);
  --border-radius-small: calc(var(--border-radius) / 2 + 3px);

  --mainColor-filter: brightness(0) saturate(100%) invert(41%) sepia(49%)
    saturate(6364%) hue-rotate(226deg) brightness(101%) contrast(90%);
  --mainBlack-filter: invert(0%) sepia(100%) saturate(7500%) hue-rotate(347deg)
    brightness(89%) contrast(111%);
  --mainWhite-filter: invert(100%) sepia(6%) saturate(641%) hue-rotate(218deg)
    brightness(106%) contrast(106%);

  --error-color: rgb(237, 66, 69);
  --success-color: rgb(0, 204, 0);
  --warning-color: rgb(246, 187, 10);
}

/*DARK*/
@media (prefers-color-scheme: dark) {
  :root {
    --mainColor-rgb: 88, 101, 242;
    --mainColor: rgba(var(--mainColor-rgb), 1);
    --mainColorOpacity: rgba(var(--mainColor-rgb), 0.5);
    --mainColorOpacity_1: rgba(var(--mainColor-rgb), 0.1);
    --brand: rgb(88, 101, 242);
    --brand-gradient: linear-gradient(
      90deg,
      rgb(142, 161, 225),
      rgb(114, 137, 218)
    );

    --mainColor-text: rgb(255, 255, 255);

    --main-bg-color: #0b1920;
    --main-crd-color: #0f1d24;
    --main-tx-color: #f9f9f9;
    --borderColor: rgba(138, 150, 163, 0.25);

    --mainWhite: #0f1d24;
    --mainWhiteOpacity: #0b1920;
    --mainWhiteOpacity-5: rgba(11, 25, 32, 0.5);
    --mainWhiteOpacity-8: rgba(11, 25, 32, 0.8);

    --mainBlack: #f0f0f0;
    --mainBlackOpacity: rgba(255, 255, 255, 0.5);

    --mainGray: rgba(0, 0, 0, 0.05);
    --mainDarkGray: #909090;
    --mainGray-shell: #0b1920;
    --secondary-gray: rgb(129, 140, 153);
    --element: var(--main-crd-color);
    --track: rgba(122, 122, 122, 0.28);

    --chatbubble-other-color: #0b1920;
    --chatbubble-other-q-color: #0b1920;

    --border-radius: 1em;
    --border-radius-big: var(--border-radius);
    --border-radius-small: calc(var(--border-radius) / 2 + 3px);

    --mainColor-filter: brightness(0) saturate(100%) invert(41%) sepia(49%)
      saturate(6364%) hue-rotate(226deg) brightness(101%) contrast(90%);

    --error-color: rgb(237, 66, 69);
    --success-color: rgb(0, 204, 0);
    --warning-color: rgb(246, 187, 10);
  }
}