/*
 * Token-driven utility classes + shared keyframes, distilled from handle.me's globals.
 * Opt-in: add the class to your own markup. Lives in the `kora.utilities` layer.
 */
@layer kora.utilities {
    /* Custom scrollbar (handle.me's .scrollbar-primary). */
    .kora-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--kora-blue-400) transparent;
    }
    .kora-scrollbar::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .kora-scrollbar::-webkit-scrollbar-thumb {
        background: var(--kora-blue-400);
        border-radius: var(--kora-radius-pill);
    }
    .kora-scrollbar::-webkit-scrollbar-track {
        background: var(--kora-surface-2);
    }

    /* Consistent keyboard-focus ring. */
    .kora-focus-ring:focus-visible {
        outline: 2px solid var(--kora-color-accent);
        outline-offset: 2px;
    }

    /* Glassmorphic inset highlights. */
    .kora-inset-shadow {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .kora-inset-shadow-lg {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .kora-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Shared keyframes (not layered — keyframes don't participate in the cascade). */
@keyframes kora-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes kora-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
@keyframes kora-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}