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

  @layer base {
    :root {
      --background: 0 0% 100%; /** white **/
      --subtle: 60 6% 97%;
      --foreground: 222.2 84% 4.9%;  /** black **/

      --card: 0 0% 100%; /** white **/
      --card-foreground: 222.2 84% 4.9%; /** black **/

      --popover: 0 0% 100%; /** white **/
      --popover-foreground: 222.2 84% 4.9%; /** black **/

      --primary: 222.2 47.4% 11.2%; /** light black **/
      --primary-foreground: 210 40% 98%; /** white but shade #f8fafc **/

      --secondary: 210 40% 96.1%; /** white but shade #f8fafc **/
      --secondary-foreground: 222.2 47.4% 11.2%; /** light black **/

      --muted: 210 40% 96.1%; /** white but shade #f8fafc **/
      --muted-foreground: 215.4 16.3% 46.9%;

      --accent: 60 2% 89%; /** white but shade #f8fafc **/
      --accent-foreground: 222.2 47.4% 11.2%;

      --destructive: 0 84.2% 60.2%; /** red **/
      --destructive-foreground: 210 40% 98%; /** white but shade #f8fafc **/

      --border: 214.3 31.8% 91.4%; /** light gray **/
      --alt: 	60 3% 93%;
      --input: 214.3 31.8% 91.4%; /** white but shade 2 #e2e8f0 **/
      --ring: 222.2 84% 4.9%; /** #020817 **/

      --radius: 0.5rem;
      
    }

    :dark {
      --background: 222.2 84% 4.9%;
      --foreground: 210 40% 98%;

      --card: 222.2 84% 4.9%;
      --card-foreground: 210 40% 98%;

      --popover: 222.2 84% 4.9%;
      --popover-foreground: 210 40% 98%;

      --primary: 210 40% 98%;
      --primary-foreground: 222.2 47.4% 11.2%;

      --secondary: 217.2 32.6% 17.5%;
      --secondary-foreground: 210 40% 98%;

      --muted: 217.2 32.6% 17.5%;
      --muted-foreground: 215 20.2% 65.1%;

      --accent: 217.2 32.6% 17.5%;
      --accent-foreground: 210 40% 98%;

      --destructive: 0 62.8% 30.6%;
      --destructive-foreground: 210 40% 98%;

      --border: 217.2 32.6% 17.5%;
      --input: 217.2 32.6% 17.5%;
      --ring: 212.7 26.8% 83.9%;

    }
  }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  line-height: 20px;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Question Panel Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #d7d7d6;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d7d7d6;
}