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

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 0 0% 4%;

    --card: 30 5% 96%;
    --card-foreground: 0 0% 4%;

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

    --primary: 0 0% 4%;
    --primary-foreground: 0 0% 98%;

    --secondary: 30 5% 96%;
    --secondary-foreground: 0 0% 4%;

    --muted: 30 5% 96%;
    --muted-foreground: 0 0% 40%;

    --accent: 30 5% 96%;
    --accent-foreground: 0 0% 4%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;

    --border: 30 5% 91%;
    --input: 30 5% 91%;
    --ring: 0 0% 4%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 240 5% 5%;
    --foreground: 0 0% 95%;

    --card: 240 5% 8%;
    --card-foreground: 0 0% 95%;

    --popover: 240 5% 8%;
    --popover-foreground: 0 0% 95%;

    --primary: 0 0% 95%;
    --primary-foreground: 0 0% 4%;

    --secondary: 240 4% 12%;
    --secondary-foreground: 0 0% 95%;

    --muted: 240 4% 12%;
    --muted-foreground: 240 3% 58%;

    --accent: 240 4% 12%;
    --accent-foreground: 0 0% 95%;

    --destructive: 0 55% 38%;
    --destructive-foreground: 0 0% 95%;

    --border: 240 4% 16%;
    --input: 240 4% 16%;
    --ring: 0 0% 70%;
  }
}

@layer base {
  * {
    @apply border-border !scroll-smooth;
  }
  body {
    @apply bg-background text-foreground;
  }
  button {
    @apply active:outline-none;
  }
}

@layer utilities {
  .heading {
    @apply font-bold text-4xl md:text-5xl text-center;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}
