/* Material Design 3 — Elevation.
   MD3 primarily uses tonal surface color for elevation (surface-container-* roles).
   Shadows are used only when a component floats over busy content. Both are provided. */

:root {
  /* Tonal elevation → surface container mapping */
  --md-sys-elevation-level0-surface: var(--md-sys-color-surface);
  --md-sys-elevation-level1-surface: var(--md-sys-color-surface-container-low);
  --md-sys-elevation-level2-surface: var(--md-sys-color-surface-container);
  --md-sys-elevation-level3-surface: var(--md-sys-color-surface-container-high);
  --md-sys-elevation-level4-surface: var(--md-sys-color-surface-container-highest);
  --md-sys-elevation-level5-surface: var(--md-sys-color-surface-container-highest);

  /* Shadow set (use sparingly) */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0,0,0,0.30), 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.30);
  --md-sys-elevation-level4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.30);
  --md-sys-elevation-level5: 0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.30);

  /* State-layer opacities (applied as on-color overlays for hover/focus/press) */
  --md-sys-state-hover-opacity: 0.08; /* @kind other */
  --md-sys-state-focus-opacity: 0.10; /* @kind other */
  --md-sys-state-pressed-opacity: 0.10; /* @kind other */
  --md-sys-state-dragged-opacity: 0.16; /* @kind other */
  --md-sys-state-disabled-opacity: 0.38; /* @kind other — disabled content */
}