:root{
  /* The brand is square by default. Radius appears only on mobile surfaces. */
  --radius-none:0px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-full:999px;

  --border-hairline:1px;
  --border-thick:2px;
  --border-color:var(--sand-300);
  --border-color-strong:var(--sand-400);
  --border-color-inverse:var(--light-a16);

  /* Shadows are near-absent. Use hairlines first; these are for lifted overlays only. */
  --shadow-none:none;
  --shadow-soft:0 1px 2px rgba(43,37,33,.04),0 8px 24px rgba(43,37,33,.06);
  --shadow-raised:0 2px 4px rgba(43,37,33,.06),0 18px 48px rgba(43,37,33,.10);
}