:root {
  /* Exactly one shadow in the system. It belongs to imagery resting on a
     surface — never to cards, buttons, chrome or text. */
  --shadow-object: 3px 5px 30px 0 rgba(0, 0, 0, 0.22);

  /* Depth that is not shadow */
  --ring-hairline: inset 0 0 0 1px var(--hairline); /* @kind shadow */
  --ring-soft: 0 0 0 3px var(--hairline-soft); /* @kind shadow */
  --blur-frost: saturate(180%) blur(20px); /* @kind other */
}