ARTICLE AD BOX
when you define --shadow in :root, the browser calculates its value immediately using the current value of --shadow-opacity (0.5) that resulting string 0px 0px 50px rgba(0,0,0,0.5) is what gets stored in the --shadow variable
when you change --shadow-opacity: 0.15 inside .box, it only affects elements looking for that specific variable However, .box is using box-shadow: var(--shadow).
because --shadow was already at the :root level with the 0.5 value, it doesn't re-read your new opacity, it just passes the old string it already has
