/*
 * Elevation, as M3's five shadow levels.
 *
 * Geometry from @material/web's token files (Apache-2.0, © Google LLC). The colour goes
 * through `color-mix()` rather than their relative `hsl(from …)`, which needs a newer
 * browser for the same result.
 *
 * Shadows are for things that float over content — menus, the FAB, a floating toolbar, a
 * sheet. On a dark surface a shadow is nearly invisible, so a panel separates from the page
 * by its container tone instead. As utilities: shadow-elevation-1 … shadow-elevation-5.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@layer material.tokens {
    :root {
        --md-sys-color-shadow: #000000;
        --md-sys-color-scrim: #000000;

        --md-sys-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
        --md-sys-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
        --md-sys-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
        --md-sys-elevation-4: 0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
        --md-sys-elevation-5: 0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
    }
}