/* ============================================================
   ELEVATION — Gallery Design System
   Exactly ONE drop-shadow exists, and it belongs to product
   imagery resting on a surface. UI depth comes from surface-color
   change and backdrop-blur on sticky bars — never card/button shadow.
   ============================================================ */

:root {
  /* The single shadow in the entire system. Product renders only. */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

  /* Soft hairline "borders" that read as rings, not lines. */
  --border-hairline: 1px solid var(--color-hairline);
  --border-soft: 1px solid var(--color-border-faint);

  /* Frosted-glass backdrop for sub-nav & floating sticky bar. */
  --backdrop-frost: saturate(180%) blur(20px); /* @kind other */
  --frost-fill: rgba(245, 245, 247, 0.8); /* parchment @ 80% */
}