How to know which shadcn css variable to change to get desired design?

[trite8q1]

Given is this color palette and I want to achieve this kind of dashboard. I'm using Next.js 15, Tailwind CSS version 4 and shadcn.

How do I know which shadcn CSS variable gets which color of the color palette, like gray-50, gray-700, etc in this case?

So my problem is essentially, which CSS variable maps to which color?

I know all the --primary and other CSS variables exist, but it’s kinda hard to wrap my head around where, for example, --accent (and the others) actually get used, you know?

Would appreciate any guidance.