Why CSS custom properties
=========================

Spec: descriptive guidance, not a checkable rule.
It carries no forbidden and instead pair, and no `jig check` detector applies to it directly.
Section: Design Tokens

They are the only token format every web framework consumes natively with no build step.

| Consumer | Usage |
| --- | --- |
| Plain CSS / any framework | `color: var(--color-text-strong)` |
| Tailwind v4 | `@import` the barrel flat, alongside `@import "tailwindcss"` — see [Colour architecture](#colour-architecture). Utility classes are opt-in and need an alias block |
| CSS-in-JS (styled-components, emotion) | `color: var(--color-text-strong)` inside template literals |
| Vue / Svelte / Angular | Identical to plain CSS, scoped or global |
| React inline styles | `style={{ color: 'var(--color-text-strong)' }}` |

**Boundary:** this does not cover React Native or native platforms, which cannot read CSS. If a non-web target enters scope, author in DTCG JSON and generate these files with Style Dictionary or Terrazzo. The naming contract below is DTCG-compatible, so that migration is mechanical. Do not build the pipeline before you need it.