/* ═══════════════════════════════════════════════════════════════════════════
 * M3E Elevation Tokens & Utility Classes
 * Reference: docs/m3e/guidelines/elevation.md
 *
 * 6 levels (0-5). Shadow and tonal utilities are DECOUPLED so components
 * can compose them independently — e.g. shadow without background override.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  --md-sys-elevation-2: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  --md-sys-elevation-3: 0 11px 7px 0 rgba(0, 0, 0, 0.19), 0 13px 25px 0 rgba(0, 0, 0, 0.3);
  --md-sys-elevation-4: 0 14px 12px 0 rgba(0, 0, 0, 0.17), 0 20px 40px 0 rgba(0, 0, 0, 0.3);
  --md-sys-elevation-5: 0 17px 17px 0 rgba(0, 0, 0, 0.15), 0 27px 55px 0 rgba(0, 0, 0, 0.3);
}


/* ── Shadow-only utilities ── */
.m3e-shadow-0 { box-shadow: var(--md-sys-elevation-0); }
.m3e-shadow-1 { box-shadow: var(--md-sys-elevation-1); }
.m3e-shadow-2 { box-shadow: var(--md-sys-elevation-2); }
.m3e-shadow-3 { box-shadow: var(--md-sys-elevation-3); }
.m3e-shadow-4 { box-shadow: var(--md-sys-elevation-4); }
.m3e-shadow-5 { box-shadow: var(--md-sys-elevation-5); }


/* ── Tonal-only utilities (surface container hierarchy) ── */
.m3e-tonal-0 { background-color: var(--md-sys-color-surface); }
.m3e-tonal-1 { background-color: var(--md-sys-color-surface-container-low); }
.m3e-tonal-2 { background-color: var(--md-sys-color-surface-container); }
.m3e-tonal-3 { background-color: var(--md-sys-color-surface-container-high); }
.m3e-tonal-4,
.m3e-tonal-5 { background-color: var(--md-sys-color-surface-container-highest); }


/* ── Interactive elevation transition ── */
.m3e-elevation-interactive {
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard-effects-default);
}