/* MD3 elevation. Elevation is communicated by TONAL SURFACE COLOR first; shadows
   only when a component floats over busy content. Source: typography-and-shape.md § Elevation. */
:root{
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-sys-elevation-level3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  --md-sys-elevation-level4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);
  --md-sys-elevation-level5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.3);

  /* Tonal mapping — the preferred depth cue. */
  --md-sys-surface-tonal-level0: var(--md-sys-color-surface);
  --md-sys-surface-tonal-level1: var(--md-sys-color-surface-container-low);
  --md-sys-surface-tonal-level2: var(--md-sys-color-surface-container);
  --md-sys-surface-tonal-level3: var(--md-sys-color-surface-container-high);
  --md-sys-surface-tonal-level4: var(--md-sys-color-surface-container-highest);
  --md-sys-surface-tonal-level5: var(--md-sys-color-surface-container-highest);
}