html.dark {
  // --primary-color: 19.32 100% 53.73%;
  --primary-color: 0 52% 50.98%;
  --text: 0 0% 100%;
  --text-2: 0 0% 66.27%;
  --bg: 0 0% 14.9%;
  --bg-2: 220 20.55% 14.31%;
  --nav-menu: 300 4% 19%;
  --border-color: 0 0% 40%;
  --bg-2-fuzzy: 225 8% 16% 0.53;
  --warning: 0 75% 35%;
  --bg-0: 280 7% 7%;
  --app-border-color: 0 0% 32%;
  --list-active: 290 7% 18%;
}

html {
  // --primary-color: 19.32 100% 53.73%;
  --primary-color: 0 81.57% 57.45%;
  --text: 0 0% 0%;
  --text-2: 0 0% 66.27%;
  --bg: 0 0% 96.86%;
  --bg-2: 128.57 24.14% 94.31%;
  --nav-menu: 150 10% 96%;
  --border-color: 0 0% 83%;
  --bg-2-fuzzy: 240 8% 97% 0.67;
  --warning: 0 84% 55%;
  --nav-h: 52px;
  --app-border-color: 0 0% 72% 0.25;
  --bg-0: 0 0% 95%;
  --list-active: 0 25% 94%;
}



// @media (prefers-color-scheme: dark) {
//   body {
//     background: #1e1a1f;
//     color: white;
//   }
// }

// @media (prefers-color-scheme: light) {
//   body {
//     background: #ffffff;
//     color: black;
//   }
// }


.layout {
  @apply h-full flex-col flex-1;
}

body {
  @apply bg-bg;
}

* {
  margin: 0;
  box-sizing: border-box;
}

.tap {
  @apply active:(scale-95)
}


.app-layout {
  @apply min-h-100vh w-full;
}


.brief-scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  &::-webkit-scrollbar-thumb {
    background-color: hsl(var(--text-2));
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--text));

  }

  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.hide-scrollbar {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

}

button {
  @apply text-text;
}