/* design_system/utilities.css — Overlay, accent helpers, focus */

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 36, 52, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1040;
}

.sidebar-overlay.active {
    display: block;
}

@media (min-width: 768px) {
    .sidebar-overlay {
        display: none !important;
    }
}

.accent {
    background-color: var(--color-accent);
}

.accent-hover:hover {
    filter: brightness(1.08);
}

.accent-text {
    color: var(--color-accent);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}