Panda CSS theming and system design

This is the architecture layer. What a token is called, which layer it lives in, and when a style graduates from a call site to a recipe. These choices are hard to reverse once a codebase has a few hundred call sites.

Two questions answer most of it:

• Does this value have meaning, or is it just a value? Meaning goes in semanticTokens.
• Does anyone outside this file need to vary this? If yes, it's a recipe. If no, it's css().

Vocabulary

Use these words exactly. Panda's config keys are named after them, so a loose word here turns into the wrong config key later. Each entry says what to avoid and why.

Primitive token: a raw scale value under theme.tokens, named for what it is (blue.500, spacing.4). Avoid: "variable" (Panda emits CSS variables from tokens, they are not the same thing), "base token" (reads as { base: … }, which is a condition).