/* Elevation. There is no drop-shadow ladder in this system. Depth is made from
   (a) 1px inset rings of white at 3-10% and (b) a single soft 2px/4px shadow.
   Never add a shadow that is not one of these. */
:root{
  --elev-ring:inset 0 0 0 1px rgba(255,255,255,0.05);
  --elev-ring-strong:0 0 0 1px rgba(255,255,255,0.08);
  --elev-ring-popover:0 0 0 1px rgba(255,255,255,0.1);
  --elev-raised:0 2px 4px 0 rgba(0,0,0,0.1), inset 0 0.5px 0 0 rgba(255,255,255,0.05);
  --elev-raised-bright:0 2px 4px 0 rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.03);
  --elev-key:0 1px 3px 0 rgba(0,0,0,0.2), 0 0.5px 0 0 rgba(0,0,0,0.1);
  --elev-glow:inset 0 0 3px 0 rgba(255,255,255,0.15), inset 0 0.72px 0 0 rgba(255,255,255,0.15);
  --elev-panel:1px -1px 12px 0 rgba(20,20,20,0.5);

  /* Protection gradients — used instead of scrims to fade content into black. */
  --fade-bottom:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%); /* @kind color */
  --fade-top:linear-gradient(to top,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%); /* @kind color */
  --fade-edge:linear-gradient(to right,rgb(0,0,0) 0%,rgba(0,0,0,0) 12%,rgba(0,0,0,0) 88%,rgb(0,0,0) 100%); /* @kind color */
}