/* Elevation. Cards lift, inputs recess, buttons sit on a hard offset. */
:root {
  --mp-sh-card: 0 10px 22px rgba(22,32,43,.14), inset 0 2px 0 #fff;
  --mp-sh-tile: 0 8px 18px rgba(22,32,43,.24), inset 0 2px 0 rgba(255,255,255,.9);
  --mp-sh-inset-top: inset 0 2px 0 #fff;
  --mp-sh-header: 0 6px 18px rgba(23,80,158,.35);
  --mp-sh-footer: 0 -6px 16px rgba(22,32,43,.08);

  --mp-sh-btn: 0 4px 0 var(--mp-primary-deep), 0 10px 18px rgba(23,80,158,.3);
  --mp-sh-btn-outline: 0 4px 0 var(--mp-primary);
  --mp-sh-btn-sm: 0 3px 0 var(--mp-primary);
  --mp-sh-btn-secondary: 0 4px 0 var(--mp-secondary), 0 10px 18px rgba(14,124,138,.26);
  --mp-sh-btn-pressed: 0 1px 0 var(--mp-primary-deep);
  --mp-sh-btn-onprimary: 0 4px 10px rgba(0,0,0,.26);
  --mp-sh-nav-active: 0 4px 10px rgba(0,0,0,.28);
  --mp-sh-nav: inset 0 -3px 0 rgba(0,0,0,.18); /* @kind shadow */
  --mp-sh-logo: 0 3px 8px rgba(0,0,0,.24);

  --mp-sh-well: inset 0 3px 7px rgba(22,32,43,.18); /* @kind shadow */
  --mp-sh-well-soft: inset 0 3px 7px rgba(22,32,43,.12); /* @kind shadow */
  --mp-sh-well-error: inset 0 3px 7px rgba(179,38,30,.16); /* @kind shadow */
  --mp-sh-bar: inset 0 3px 6px rgba(22,32,43,.3); /* @kind shadow */
  --mp-sh-chart: inset 0 3px 7px rgba(22,32,43,.16); /* @kind shadow */
  --mp-sh-swatch: 0 2px 4px rgba(0,0,0,.25);
  --mp-sh-block: inset 0 2px 0 rgba(255,255,255,.9), 0 6px 14px rgba(22,32,43,.16); /* @kind shadow */
  --mp-sh-positive: inset 0 2px 0 rgba(255,255,255,.9), 0 6px 14px rgba(47,107,58,.18); /* @kind shadow */
  --mp-sh-note: inset 0 2px 0 rgba(255,255,255,.85), 0 6px 14px rgba(22,32,43,.16); /* @kind shadow */

  --mp-focus: 3px solid var(--mp-primary-focus); /* @kind other */
  --mp-focus-offset: 1px; /* @kind spacing */
}
:root[data-theme="dark"] {
  --mp-sh-card: 0 10px 22px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.06);
  --mp-sh-tile: 0 8px 18px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.06);
  --mp-sh-inset-top: inset 0 2px 0 rgba(255,255,255,.06);
}