:root{
  /* Flat by default. Elevation is a border first, a shadow second. */
  --shadow-none:none;
  --shadow-hairline:0 1px 2px rgba(0,0,0,.04);
  --shadow-raised:0 6px 18px -8px rgba(0,0,0,.18);
  --shadow-button:0 10px 24px -10px rgba(0,0,0,.30);
  --shadow-overlay:0 24px 48px -20px rgba(0,0,0,.28);
  --shadow-shell:0 40px 80px -24px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.10);
  --shadow-focus:0 0 0 2px var(--surface-2),0 0 0 4px var(--focus-ring);

  --border-hair:1px;
  --border-mark:2.5px;
  --blur-veil:blur(10px); /* @kind other */
  --blur-scrim:blur(2px); /* @kind other */
}

[data-theme="dark"]{
  --shadow-hairline:0 1px 2px rgba(0,0,0,.5);
  --shadow-raised:0 6px 18px -8px rgba(0,0,0,.7);
  --shadow-button:0 10px 24px -10px rgba(0,0,0,.8);
  --shadow-overlay:0 24px 48px -20px rgba(0,0,0,.8);
  --shadow-shell:0 40px 80px -24px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.6);
}