/* Custom specific styles overriding Tailwind where needed */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Custom highlight spans for annotated text */
.hl-formal {
    background-color: rgba(59, 130, 246, 0.15);
    /* blue-500 */
    border-bottom: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 2px;
}

.dark .hl-formal {
    background-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    /* blue-300 */
}

.hl-casual {
    background-color: rgba(16, 185, 129, 0.15);
    /* green-500 */
    border-bottom: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 2px;
}

.dark .hl-casual {
    background-color: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
    /* green-300 */
}

.hl-aggressive {
    background-color: rgba(239, 68, 68, 0.2);
    /* red-500 */
    border-bottom: 2px solid rgba(239, 68, 68, 0.6);
    border-radius: 2px;
    font-weight: 500;
}

.dark .hl-aggressive {
    background-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    /* red-300 */
}

.hl-passive {
    background-color: rgba(234, 179, 8, 0.2);
    /* yellow-500 */
    border-bottom: 2px solid rgba(234, 179, 8, 0.6);
    border-radius: 2px;
}

.dark .hl-passive {
    background-color: rgba(234, 179, 8, 0.3);
    color: #fde047;
    /* yellow-300 */
}

/* Base sentence span for interaction */
.sentence {
    transition: background-color 0.2s;
    cursor: default;
}

.sentence:hover {
    filter: brightness(0.95);
}

.dark .sentence:hover {
    filter: brightness(1.1);
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #4b5563;
}