@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import "tailwindcss";

body {
  font-family: 'Inter', sans-serif;
}

/* Images should be responsive */
img {
  max-width: 100%;
  height: auto;
}

@layer base {
  ul {
    @apply list-disc list-inside
  }

  ol {
    @apply list-decimal list-inside
  }
}

button {
  @apply cursor-pointer;
}

@layer utilities {
  /*
    Usage: class="overflow-y-scroll scrollbar-editorial"
  */
  .scrollbar-editorial {
    /* Firefox: simple support */
    scrollbar-width: thin;
    scrollbar-color: #171717 transparent; /* Thumb / Track */

    /* Webkit (Chrome, Safari, Edge): Full Control */
    &::-webkit-scrollbar {
      width: 12px;  /* Width of vertical scrollbar */
      height: 12px; /* Height of horizontal scrollbar */
      background: transparent; /* Ensure track doesn't mess up layout */
    }

    /* The Track (Background) */
    &::-webkit-scrollbar-track {
      background: #f5f5f5; /* neutral-100 */
      border-left: 1px solid #e5e5e5; /* Structural border on the left */
    }

    /* The Thumb (The moving part) */
    &::-webkit-scrollbar-thumb {
      background-color: #171717; /* neutral-900 (Black) */
      border: 3px solid #f5f5f5; /* Creates a "padding" effect */
      border-radius: 0; /* SHARP EDGES - No rounding */
    }

    /* Hover state for the thumb */
    &::-webkit-scrollbar-thumb:hover {
      background-color: #404040; /* neutral-700 */
    }

    /* Corner (where horizontal meets vertical) */
    &::-webkit-scrollbar-corner {
      background: #f5f5f5;
    }
  }
}