/* FitBuddy elevation, Spotter direction. Borders do the work, shadows do very
   little. On the near-black ground the shadow is near-black too.
   Only sheets, dialogs and toasts float, which is levels 3 to 5. */
:root, [data-theme="dark"] {
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(0,0,0,0.40);
  --sh-2: 0 2px 8px -2px rgba(0,0,0,0.50), 0 8px 20px -12px rgba(0,0,0,0.60);
  --sh-3: 0 10px 28px -10px rgba(0,0,0,0.62), 0 2px 8px -3px rgba(0,0,0,0.45);
  --sh-4: 0 24px 48px -14px rgba(0,0,0,0.55), 0 6px 16px -8px rgba(0,0,0,0.50);
  --sh-5: 0 40px 80px -20px rgba(0,0,0,0.50), 0 10px 24px -12px rgba(0,0,0,0.55);
  /* Hairline that keeps a dark photograph off a dark surface */
  --sh-media-edge: inset 0 0 0 1px rgba(255,255,255,0.08);
  --sh-inset-press: inset 0 1px 2px rgba(0,0,0,0.35);
  /* The device frame in the mobile kits */
  --sh-phone: 0 40px 80px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --sh-1: 0 1px 2px rgba(10,12,16,0.05), 0 1px 1px rgba(10,12,16,0.04);
  --sh-2: 0 2px 6px -1px rgba(10,12,16,0.07), 0 6px 16px -8px rgba(10,12,16,0.10);
  --sh-3: 0 8px 24px -8px rgba(10,12,16,0.16), 0 2px 6px -2px rgba(10,12,16,0.06);
  --sh-4: 0 20px 48px -16px rgba(10,12,16,0.24), 0 4px 12px -6px rgba(10,12,16,0.08);
  --sh-5: 0 32px 80px -24px rgba(10,12,16,0.32), 0 8px 20px -10px rgba(10,12,16,0.10);
  --sh-inset-press: inset 0 1px 2px rgba(10,12,16,0.10);
  --sh-phone: 0 40px 80px rgba(10,12,16,0.18);
}