/* Sets up global font family, smooth font rendering, and box sizing */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  box-sizing: border-box;
}

/* Ensures all elements inherit box-sizing for predictable padding and borders */
*, *:before, *:after {
  box-sizing: inherit;
}

/* Creates a light theme checkerboard pattern to visualize transparency */
.bg-checkerboard-light {
  background-image: linear-gradient(45deg, #cbd5e1 25%, transparent 25%), 
                    linear-gradient(-45deg, #cbd5e1 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #cbd5e1 75%), 
                    linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #f1f5f9;
}

/* Creates a dark theme checkerboard pattern to visualize transparency */
.bg-checkerboard-dark {
  background-image: linear-gradient(45deg, #1e293b 25%, transparent 25%), 
                    linear-gradient(-45deg, #1e293b 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #1e293b 75%), 
                    linear-gradient(-45deg, transparent 75%, #1e293b 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #0f172a;
}

/* Forces crisp edges on pixel art sprites and previews */
.rendering-pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Applies an active highlight border and background when dragging files over the drop zone */
.dropzone-active {
  border-color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.05) !important;
  transform: scale(1.002);
}

/* Resets default range input styling across different browsers */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  height: 20px;
}

/* Removes default focus outline from range inputs */
input[type=range]:focus {
  outline: none;
}

/* Styles the track line of range sliders with dynamic background fills */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: var(--track-bg, #cbd5e1);
  border-radius: 9999px;
}

/* Styles the draggable thumb button on range sliders */
input[type=range]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

/* Hides scrollbars while keeping content scrollable for cleaner layout */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hides scrollbars for Internet Explorer, Edge, and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Sets standard width and height for scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Styles the background track of scrollbars */
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

/* Styles the draggable bar thumb of scrollbars in light mode */
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Styles the draggable bar thumb of scrollbars in dark mode */
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}