body {
    font-family: 'Inter', sans-serif;
    background-color: #111827; /* bg-gray-900 */
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937; /* bg-gray-800 */
}

::-webkit-scrollbar-thumb {
    background: #4b5563; /* bg-gray-600 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280; /* bg-gray-500 */
}

.preview-link {
    color: #8ab4f8; /* A nice blue, similar to default link colors */
    text-decoration: underline;
    cursor: pointer;
}

.preview-link:hover {
    filter: brightness(1.2);
}

.btn-active {
    background-color: #3b82f6; /* bg-blue-600 */
    color: white;
}

.color-swatch {
    transition: transform 0.1s ease-in-out;
}

.color-swatch:hover {
    transform: scale(1.1);
    outline: 2px solid #60a5fa; /* blue-400 */
}

#color-picker-wrapper .irol__slider {
    border-radius: 4px;
    height: 12px;
}

#color-picker-wrapper .irol__slider__handle {
    transform: scale(0.8);
}