:root {
    --k-sh-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .08);
    --k-sh: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
    --k-sh-md: 0 4px 16px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
    --k-sh-lg: 0 8px 32px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .08);
    --k-sh-xl: 0 16px 48px rgba(0, 0, 0, .14), 0 8px 24px rgba(0, 0, 0, .08);
}

/* Darker shadows in dark mode */
[data-theme="dark"] {
    --k-sh-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --k-sh: 0 2px 8px rgba(0, 0, 0, .4);
    --k-sh-md: 0 4px 16px rgba(0, 0, 0, .5);
    --k-sh-lg: 0 8px 32px rgba(0, 0, 0, .5);
    --k-sh-xl: 0 16px 48px rgba(0, 0, 0, .6);
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --k-sh-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --k-sh: 0 2px 8px rgba(0, 0, 0, .4);
        --k-sh-md: 0 4px 16px rgba(0, 0, 0, .5);
        --k-sh-lg: 0 8px 32px rgba(0, 0, 0, .5);
        --k-sh-xl: 0 16px 48px rgba(0, 0, 0, .6);
    }
}