Las propiedades personalizadas de CSS (custom properties) no siempre se evalúan donde uno espera, y ese matiz cambia por completo el resultado de una regla. Por defecto, una variable como --index: sibling-index() se almacena como un flujo de tokens sin procesar y solo se sustituye y calcula en el punto donde se usa mediante var(). Por eso, en un <p> que es primer hijo de su contenedor, var(--index) resuelve a 1, porque sibling-index() se evalúa en ese contexto, no en el <div> donde se declaró la variable. Esto se refleja en getComputedStyle(), que devuelve literalmente la cadena "sibling-index()".
La regla @property permite alterar ese comportamiento. Al registrar la variable con syntax: '<number>', el navegador la calcula en el momento de la declaración, no después, y el resultado se almacena ya como número. Con la misma regla anterior, --index pasa a valer 2 (el índice del segundo <div>), y getComputedStyle() devuelve "2". Este cambio afecta también a unidades relativas como em, ex, ch, cap o lh, a unidades de container query como cqw, cqi o cqb, y a cómo se resuelven las URLs: con sintaxis <url>, la URL queda anclada a la hoja de estilos que la declaró.
Por último, var() se comporta como una "función de sustitución arbitraria" (junto a if(), attr() o ident()) y siempre se sustituye sea cual sea la sintaxis registrada, por lo que redefinir una variable intermedia en un elemento hijo no altera el valor ya capturado en la cadena de tokens.