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

body {
  font-family: monospace;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 24 9.8% 10%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  input[type="range"] {
    @apply appearance-none bg-stone-100 rounded-full h-[2px];
  }

  input[type="range"]::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 bg-white rounded-full cursor-pointer transition-colors shadow-sm;
    -webkit-appearance: none;
    border: 2px solid #9e9c9c;
    margin: -2px;
  }

  input[type="range"]::-moz-range-thumb {
    @apply w-4 h-4 bg-white rounded-full cursor-pointer transition-colors;
    border: 2px solid #9e9c9c;
  }

  input[type="range"]::-ms-thumb {
    @apply w-4 h-4 bg-white rounded-full cursor-pointer transition-colors;
    border: 2px solid #9e9c9c;
  }

  input[type="range"]:focus {
    @apply outline-none;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    @apply rounded-full bg-stone-200;
  }

  input[type="range"]::-moz-range-track {
    @apply rounded-full bg-stone-200;
  }

  input[type="range"]::-ms-track {
    @apply rounded-full bg-stone-200;
  }
}

@layer utilities {
  .bg-white {
    background-color: #ffffff;
  }
  .bg-yellow-100 {
    background-color: #fef9c3;
  }
  .bg-blue-100 {
    background-color: #dbeafe;
  }
  .bg-green-100 {
    background-color: #dcfce7;
  }
  .bg-pink-100 {
    background-color: #fce7f3;
  }
}

