@layer components {
    /* TODO: Should a "modal" component wrap modal-overlay and modal-content? */
    .modal-overlay {
        position: fixed;
        inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-index-overlay); /* Use the highest z-index from variables */
        padding: var(--pad-md);
    }

    .modal-content {
        background-color: var(--color-background-app);
        padding: var(--pad-lg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        max-width: 90%;
        width: 400px;
        max-height: 90vh;
        overflow-y: auto;
    }
}
@media (prefers-color-scheme: dark) {
    /* TODO: Are there any specific dark mode overides for modal-overlay and modal-content */
    :root {
        /* ... existing dark mode variables ... */

        /* Shadows in dark mode often use a more subtle white/transparent effect,
           but for the overlay, a dark tint is usually better.
           We'll rely on the modal-overlay rgba(0, 0, 0, 0.5) for the dark backdrop. */
    }
}