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

@layer base {
  :root {
    --background: 39 34 25;
    --foreground: 255 255 255;
    --accent: 239 175 37;
    --sidebar-background: 12 12 12;
    --button-text: 26 23 19;
    --footer-text: 155 155 155;
  }

  ::-webkit-scrollbar {
    @apply w-2;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    @apply bg-inherit;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    @apply rounded-xl bg-neutral-500;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-accent;
  }
  input[type='color'] {
    appearance: none;
    -webkit-appearance: none;
    border: none;
  }
  input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  input[type='color']::-webkit-color-swatch {
    border: none;
  }

  body {
    color: rgb(var(--foreground));
    background: rgb(var(--background));
    font-family: var(--font-montserrat), sans-serif;
  }

  button {
    @apply outline-none focus-visible:outline-none;
  }

  a {
    display: inline-block;
    color: rgb(var(--foreground));
  }
}

@layer components {
  .section {
    @apply pt-12;
  }
}