/* Surface MD — texture, shadow, motion. */
:root{
  /* film grain overlay — apply on a fixed inset(-30px) div,
     mix-blend-mode:multiply, opacity .04 */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */
  --grain-opacity: .04; /* @kind other */

  /* shadow — used only to lift a printed "sheet" off a desk;
     UI cards are flat + hairline-bordered */
  --shadow-sheet: 0 22px 60px rgba(35,38,43,.16);

  /* motion — quiet, fast, no bounce */
  --transition-fast: .2s ease; /* @kind other */
  --hover-lift: translateY(-4px); /* @kind other */

  /* blueprint grid backgrounds */
  --grid-image: linear-gradient(var(--grid) 1px, transparent 1px),
                linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  --grid-image-dark: linear-gradient(var(--grid-dark) 1px, transparent 1px),
                     linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
}