@font-face {
  font-display: fallback;
  font-family: "Bungee-Regular";
  font-style: normal;
  src: url("/fonts/Bungee-Regular.ttf") format("truetype");
}

@font-face {
  font-display: fallback;
  font-family: "NanoSans";
  font-style: normal;
  src: url("/fonts/NotoSans.ttf") format("truetype");
}

@font-face {
  font-display: fallback;
  font-family: "Helvetica";
  font-style: normal;
  src: url("/fonts/Helvetica.woff2") format("woff2");
}

@font-face {
  font-display: fallback;
  font-family: "Segoe UI";
  font-style: normal;
  src: url("/fonts/SegoeUI.ttf") format("truetype");
}

:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 32px;
  --space-7: 64px;
  --font-size-0: 10px;
  --font-size-1: 12px;
  --font-size-2: 14px;
  --font-size-3: 15px;
  --font-size-4: 16px;
  --font-size-5: 18px;
  --font-size-6: 24px;
  --font-size-7: 32px;
  --border-radius-0: 1px;
  --border-radius-1: 2px;
  --border-radius-2: 5px;
  --border-radius-3: 10px;
  --border-radius-4: 18px;
  --border-radius-5: 9999px;
  --border-size-0: 0;
  --border-size-1: 1px;
  --border-size-2: 2px;
  --border-size-3: 5px;
  --border-size-4: 10px;
  --shadow-primary: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0 0 1px hsla(0, 0%, 0%, 0.05),
    0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
  --shadow-textShadow: 2px 0 #ff00d6, 0 2px #ff00d6, 2px 0 #ff00d6, 0 -2px #ff00d6;
  --screen-sm: 480px;
  --screen-md: 768px;
  --screen-lg: 976px;
  --screen-xl: 1440px;
  --screen-xxl: 1640px;
  --font-heading: Bungee-Regular, sans-serif;
  --font-body: system-ui, Segoe UI, Helvetica, sans-serif;
  --icon-size-sm: 14px;
  --icon-size-md: 20px;
  --icon-size-lg: 28px;
  --icon-size-xl: 36px;
  --icon-size-xxl: 48px;
  --color-success: #38a169;
  --color-error: #e53e3e;
  --color-warning: #dd6b20;
  --color-info: #3182ce;
  --color-male: #2766f6;
  --color-female: #f70776;
  --color-transgender: #5bcefa;
  --color-other: #4b713f;
  --color-online: #28cd41;
  --color-offline: #ff3b30;
  --color-audioWaveform-wave: #ffffff;
  --color-audioWaveform-progress: #ffa3e0;
  --color-audioWaveform-cursor: #dd5e98;
  --color-messageStatus-sent: #219653;
  --color-messageStatus-delivered: #5e606f;
  --color-messageStatus-seen: #219653;
  --color-messageStatus-error: #e53e3e;
  --color-scrollbarThumb: #404248;
  --color-scrollbarThumbHover: #555a5f;
}

[data-theme="dark"] {
  --color-primary: #191919;
  --color-background: linear-gradient(135deg, #191919, #0d1a2b, #191919);
  --color-baseBackdropColor: #2c2d35;
  --color-text: #ffffff;
  --color-borderStroke: #992580;
  --color-borderStrokeDisabled: #897686;
  --color-button: #992580;
  --color-buttonCancelBackground: #a61111;
  --color-buttonText: #ffffff;
  --color-messageText: #e4e6eb;
  --color-sidebar: #191919;
  --color-hoverBackground: rgba(137, 118, 134, 0.3);
  --color-selectedBackground: rgba(255, 0, 214, 0.2);
  --color-iconsBackground: #ff1010;
  --color-textShadow: 2px 0 #ff00d6, 0 2px #ff00d6, 2px 0 #ff00d6, 0 -2px #ff00d6;
  --color-scrollbarThumb: #404248;
  --color-scrollbarThumbHover: #555a5f;
}

[data-theme="light"] {
  --color-primary: #4851f4;
  --color-background: #ffffff;
  --color-baseBackdropColor: #2c2d35;
  --color-text: #202224;
  --color-borderStroke: #ff00d6;
  --color-borderStrokeDisabled: #deebf1;
  --color-button: #000000;
  --color-buttonCancelBackground: #a61111;
  --color-buttonText: #ffffff;
  --color-messageText: #e4e6eb;
  --color-sidebar: #ffffff;
  --color-hoverBackground: rgba(137, 118, 134, 0.3);
  --color-selectedBackground: rgba(255, 0, 214, 0.2);
  --color-iconsBackground: #ff1010;
  --color-textShadow: 2px 0 #ff00d6, 0 2px #ff00d6, 2px 0 #ff00d6, 0 -2px #ff00d6;
  --color-scrollbarThumb: #cccccc;
  --color-scrollbarThumbHover: #aaaaaa;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-background) fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 0;
}

p {
  margin: 0;
}

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbarThumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbarThumbHover);
}

* {
  scrollbar-color: var(--color-scrollbarThumb) transparent;
  scrollbar-width: thin;
}