# Token Usage Rules

1. Components consume semantic tokens such as `--color-text`, `--color-surface`, and `--color-action-conversion`. Raw palette values are allowed only in token declaration files, approved asset files, and documented data visualizations.
2. Orange is reserved for demo conversion and tightly related emphasis. Routine primary actions use the primary-action token.
3. White normal text may not use orange-600. Light conversion uses orange-700 with white; dark conversion uses orange-400 with dark text.
4. Spacing uses the 4 px scale. Optical exceptions require a comment and design approval.
5. Interactive targets are 44 × 44 px minimum unless the target is an inline text link with sufficient surrounding line height.
6. Use logical properties: `margin-inline`, `padding-block`, `inset-inline-start`, `border-inline-end`. Physical left/right properties fail review unless they describe an intrinsically physical asset.
7. Shadows are neutral. Colored glow is prohibited.
8. No global transition is applied during theme changes.
9. Text and surfaces must meet WCAG 2.2 AA in both themes. Focus indicators must remain visible in forced-colors mode.
10. Product screenshots are not recolored by tokens.