/* La direttiva @import "tailwindcss" è per i processi di build e non è necessaria quando si utilizza lo script CDN di Tailwind.
   Causa l'errore 404 (Not Found) che hai riscontrato. */

/* La direttiva @theme è anch'essa per i processi di build.
   Per definire una variabile CSS (custom property), puoi usare la sintassi standard :root. */
:root {
  --color-dark: #1a202c;
}

/* Custom range slider styles */
.range-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    pointer-events: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
    cursor: grab;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.1s ease;
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.range-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.25);
}

.range-slider::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
    cursor: grab;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.1s ease;
}

.range-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
}

.range-slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.25);
}

.dark .range-slider::-webkit-slider-thumb {
    border-color: #1f2937;
}

.dark .range-slider::-moz-range-thumb {
    border-color: #1f2937;
}