/*
 * Radii + shadow tokens.
 *
 * Shadows use layered rgba to avoid the washed-out single-shadow look.
 * Dark-mode override below bumps the opacity so shadows remain visible
 * on dark surfaces.
 */
:root {
    /* Border radii */
    --app-radius-none: 0;
    --app-radius-sm:   0.25rem;  /*  4px — inputs, small chips */
    --app-radius-md:   0.5rem;   /*  8px — buttons, cards */
    --app-radius-lg:   1rem;     /* 16px — hero panels, modals */
    --app-radius-xl:   1.5rem;   /* 24px — marketing */
    --app-radius-full: 9999px;   /* pills, avatars */

    /* Elevation / shadow scale */
    --app-shadow-none: none;
    --app-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --app-shadow-md:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --app-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --app-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --app-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --app-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.30);
        --app-shadow-md:   0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.25);
        --app-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.30);
        --app-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.50), 0 10px 10px -5px rgba(0, 0, 0, 0.30);
        --app-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.30);
    }
}