@import "tailwindcss";

@layer base {
  html, body, #root {
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
  }
}

/* Custom theme container classes */
.theme-oled {
  background-color: #000000;
  color: #f4f4f5;
  color-scheme: dark;
}

.theme-dark {
  background-color: #09090b;
  color: #f4f4f5;
  color-scheme: dark;
}

.theme-slate {
  background-color: #0f172a;
  color: #f1f5f9;
  color-scheme: dark;
}

.theme-nord {
  background-color: #242933;
  color: #eceff4;
  color-scheme: dark;
}

.theme-sepia {
  background-color: #fbf0d9;
  color: #433422;
  color-scheme: light;
}

.theme-paper {
  background-color: #ffffff;
  color: #18181b;
  color-scheme: light;
}

/* Range input thumb styling */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background-color: #f43f5e;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.4);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background-color: #f43f5e;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.4);
}