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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 30 8% 5%;

    --card: 0 0% 99%;
    --card-foreground: 30 8% 5%;

    --popover: 0 0% 99%;
    --popover-foreground: 30 8% 5%;

    --primary: 21 90% 48%;
    --primary-foreground: 0 0% 98%;

    --secondary: 30 8% 95%;
    --secondary-foreground: 30 8% 5%;

    --muted: 30 8% 95%;
    --muted-foreground: 21 6% 45%;

    --accent: 30 8% 95%;
    --accent-foreground: 30 8% 5%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 30 5% 91%;
    --input: 24 6% 84%;
    --ring: 21 90% 48%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3%;
    --popover-foreground: 0 0% 98%;

    --primary: 25 95% 53%;
    --primary-foreground: 0 0% 2%;

    --secondary: 0 0% 6%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 9%;
    --muted-foreground: 0 0% 49%;

    --accent: 0 0% 6%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 11%;
    --input: 0 0% 16%;
    --ring: 25 95% 53%;
  }
}
.animate-gradient {
  background-size: 300%;
  -webkit-animation: animatedgradient 6s ease infinite alternate;
  -moz-animation: animatedgradient 6s ease infinite alternate;
  animation: animatedgradient 6s ease infinite alternate;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-accent/50 text-foreground;
    -webkit-user-drag: none;
  }
  img,
  a {
    user-select: none;
    -webkit-user-drag: none;
  }
}

.noise {
  background-image: url(/noise.png);
}

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
