@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: "Outfit", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
  @apply bg-layer-0;
}

:root {
  --header-height: 48px;
  --primary: #f838d9;
  --secondary: #34d2fe;
  --zap: #ff8d2b;
  --success: green;
  --surface: #222;
  --border: #171717;
  --border-2: #393939;
  --gradient-purple: linear-gradient(135deg, #882bff 0%, #f83838 100%);
  --gradient-yellow: linear-gradient(270deg, #adff27 0%, #ffd027 100%);
  --gradient-orange: linear-gradient(270deg, #ff5b27 0%, rgba(255, 182, 39, 0.99) 100%);
}

::-webkit-scrollbar {
  @apply bg-layer-1 rounded-full w-2;
}

::-webkit-scrollbar-thumb {
  @apply bg-layer-3 rounded-full;
}

.btn-border {
  border: 1px solid transparent;
  color: inherit;
  background: linear-gradient(black, black) padding-box, linear-gradient(94.73deg, #2bd9ff 0%, #f838d9 100%) border-box;
  transition: 0.3s;
}

.btn-border:hover {
  background: linear-gradient(black, black) padding-box, linear-gradient(94.73deg, #14b4d8 0%, #ba179f 100%) border-box;
}

h1 {
  font-size: 32px;
  font-weight: 700;
}
h2 {
  font-size: 28px;
  font-weight: 600;
}
h3 {
  font-size: 21px;
  font-weight: 500;
}
h4 {
  font-size: 18px;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

a {
  color: unset;
  text-decoration: unset;
}

:focus-visible {
  outline: none;
}

input[type="text"],
textarea,
input[type="datetime-local"],
input[type="password"],
input[type="number"],
select {
  @apply bg-layer-2 w-full font-medium px-4 py-2 rounded-xl;
}

.scroll-lock {
  overflow: hidden;
  height: 100dvh;
}

.ctx-menu {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 12px;
  background: #434343;
  padding: 12px 0px;
  color: white;
  display: flex;
  flex-direction: column;
}

.ctx-menu li {
  padding: 12px 24px;
  display: flex;
  gap: 16px;
}

.ctx-menu li:hover {
  background: #505050;
}

.szh-menu__item--hover {
  background-color: unset;
}

.custom-emoji {
  width: 15px;
  height: 15px;
  margin-bottom: -2px;
}

.secondary {
  color: #909090;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.h-inherit {
  height: inherit;
}

.overflow-wrap {
  overflow-wrap: anywhere;
}

table td,
table th {
  @apply border border-layer-2 px-2;
}
table th {
  @apply bg-layer-1;
}