/*
 * M3 Elevation — level 0–5
 * Spec: https://m3.material.io/styles/elevation/tokens (level0..5 = 0/1/3/6/8/12 dp; surface tint deprecated)
 * Bayangan web dua lapis (key + ambient) mengikuti implementasi resmi @material/web (elevation/internal/_elevation.scss),
 * warna dari --md-sys-color-shadow.
 */
@layer tokens, base, components, utilities;
@layer tokens {
  :root {
    --md-sys-elevation-level0: 0;
    --md-sys-elevation-level1: 1;
    --md-sys-elevation-level2: 2;
    --md-sys-elevation-level3: 3;
    --md-sys-elevation-level4: 4;
    --md-sys-elevation-level5: 5;

    /* Box-shadow per level (dp height: 0, 1, 3, 6, 8, 12) */
    --md-sys-elevation-shadow-level0: none;
    --md-sys-elevation-shadow-level1:
      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-shadow-level2:
      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-shadow-level3:
      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-shadow-level4:
      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-shadow-level5:
      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);
  }
}