@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body, button, input, textarea, select {
    font-family: var(--font-main) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main) !important;
    font-weight: 700;
}

.highlight {
    font-weight: 800 !important;
    position: relative;
    z-index: 1;
}

.highlight:before {
    content: "";
    z-index: -1;
    opacity: 0.8;
    border-radius: 4px;
    height: 12% !important;
    position: absolute;
    bottom: 4px !important;
    left: -4px;
    right: -4px;
    animation: 0.6s ease-out forwards highlightFadeIn;
}

.highlight-purple:before {
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important;
}

.highlight-blue:before {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
}

@keyframes highlightFadeIn {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 0.8;
        transform: scaleX(1);
    }
}