:root {
  --color-dark-50: #f7f8f8;
  --color-dark-100: #eeeef0;
  --color-dark-200: #d8dadf;
  --color-dark-300: #b6bac3;
  --color-dark-400: #8f95a1;
  --color-dark-500: #717886;
  --color-dark-600: #5b606e;
  --color-dark-700: #4a4e5a;
  --color-dark-800: #40434c;
  --color-dark-900: #383a42;
  --color-dark-950: #1d1e22; //main

  --color-primary-50: #f0f9fe;
  --color-primary-100: #ddf0fc;
  --color-primary-200: #c3e5fa;
  --color-primary-300: #9ad6f6;
  --color-primary-400: #6abff0;
  --color-primary-500: #47a3ea;
  --color-primary-600: #2e86de; //main
  --color-primary-700: #2972cc;
  --color-primary-800: #275da6;
  --color-primary-900: #254f83;
  --color-primary-950: #1b3150;

  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce6;
  --color-success-200: #bbf7cf;
  --color-success-300: #85f0aa;
  --color-success-400: #49df7d;
  --color-success-500: #23d160; //main
  --color-success-600: #15a447;
  --color-success-700: #14813b;
  --color-success-800: #166533;
  --color-success-900: #14532c;
  --color-success-950: #052e15;

  --color-danger-50: #fff0f1;
  --color-danger-100: #ffe2e6;
  --color-danger-200: #ffcad3;
  --color-danger-300: #ff9fae;
  --color-danger-400: #ff6983;
  --color-danger-500: #ff3860; //manin
  --color-danger-600: #ed1148;
  --color-danger-700: #c8083d;
  --color-danger-800: #a8093a;
  --color-danger-900: #8f0c38;
  --color-danger-950: #500119;

  --color-warning-50: #fff8ed;
  --color-warning-100: #ffefd4;
  --color-warning-200: #ffdaa8;
  --color-warning-300: #ffc071;
  --color-warning-400: #ff9f43; //main
  --color-warning-500: #fe7b11;
  --color-warning-600: #ef6007;
  --color-warning-700: #c64608;
  --color-warning-800: #9d390f;
  --color-warning-900: #7e3010;
  --color-warning-950: #441506;

  --color-zinc-50: oklch(0.985 0 0);
  --color-zinc-100: oklch(0.967 0.001 286.375);
  --color-zinc-200: oklch(0.92 0.004 286.32);
  --color-zinc-300: oklch(0.871 0.006 286.286);
  --color-zinc-400: oklch(0.705 0.015 286.067);
  --color-zinc-500: oklch(0.552 0.016 285.938);
  --color-zinc-600: oklch(0.442 0.017 285.786);
  --color-zinc-700: oklch(0.37 0.013 285.805);
  --color-zinc-800: oklch(0.274 0.006 286.033);
  --color-zinc-900: oklch(0.21 0.006 285.885);
  --color-zinc-950: oklch(0.141 0.005 285.823);

  --color-black: #000;
  --color-white: #fff;
  --video-player-color: var(--color-primary-600);
}

.bg-dark-900 {
  background-color: var(--color-zinc-900) !important;
}

.text-message-sent {
  color: var(--color-primary-500) !important;
  // color: #b2dfdb !important;
}

.text-message-received {
  color: var(--color-zinc-200) !important;
  //color: #f1f1f1 !important;
}

.text-message-unsend {
  color: var(--color-zinc-100) !important;
}

.text-message-transparent {
  color: transparent !important;
}

.bg-app-content-item {
  background-color: var(--color-zinc-100);
}


body.body--dark {
  .text-message-received {
    color: var(--color-zinc-900) !important;
  }

  .text-message-unsend {
    color: var(--color-zinc-500) !important;
  }

  .bg-app-content-item {
    background-color: var(--color-zinc-800);
  }
}