How do I "properly" use Material 3 Design Tokens in Web Development?

Question

I've recently switched from M2 to M3 and would like to make use of Design Tokens now, as described here: https://m3.material.io/styles/color/static/baseline#c9263303-f4ef-4a33-ad57-7d91dc736b6b

However, I failed to find an overview of all tokens that exist.

What I don't seem to understand either is if high-level tokens, such as --md-sys-color-primary need to be defined by me in my app, or if they are magically defined inside ✨ .

When trying to access var(--md-sys-color-primary), I get an error stating

var(--md-sys-color-primary) is not a color

What did work for me is to read the tokens from the generated styles.scss (e.g. --mat-app-text-color , --mat-app-background-color, --mat-divider-color etc.) and to assign their values to my custom variables.

I am wondering though if this is the "right way" to do it, or if I should rather be using the baseline tokens that refer to the primary / secondary values themselves.