Design Tokens

tokens.css und colors.css sind die einzigen Orte, an denen rohe Werte stehen dürfen - alles andere referenziert per var(). Farb-Tokens im Detail: Farben & Flächen.

Abstand

--ncss-space-3xs bis --ncss-space-3xl - eine fluide Skala (clamp()-basiert), wächst leicht mit der Viewport-Breite statt in festen Sprüngen.

Token	Etwa
`--ncss-space-3xs`	0.25rem
`--ncss-space-2xs`	0.5rem
`--ncss-space-xs`	0.75rem
`--ncss-space-sm`	1rem
`--ncss-space-md`	1.5rem
`--ncss-space-lg`	2rem
`--ncss-space-xl`	3rem
`--ncss-space-2xl`	4rem
`--ncss-space-3xl`	6rem

Radius & Schatten

Token	Zweck
`--ncss-radius-sm/-md/-lg/-full`	Eckenradius, `-full` für Pillen/Kreise
`--ncss-shadow-sm/-md/-lg`	Schattenstufen

<div class="ncss-card ncss-radius-lg ncss-shadow-md ncss-border">
  Rahmen/Radius/Schatten als eigenständige Utilities kombiniert
</div>

Als Utility-Klassen nutzbar: .ncss-radius-*/.ncss-shadow-* - bewusst als eigenständige, komponentenunabhängige Utilities statt in einzelne Komponenten eingebacken.

Bewegung

Token	Wert
`--ncss-motion-duration-fast`	100ms - schneller Einstieg in `:active`-Zustände
`--ncss-motion-duration`	200ms - normale Übergänge
`--ncss-motion-duration-slow`	400ms
`--ncss-motion-easing`	`cubic-bezier(0.4, 0, 0.2, 1)`
`--ncss-motion-easing-emphasized`	`cubic-bezier(0.16, 1, 0.3, 1)` - betont abbremsende Kurve für Elemente, die ins Bild HEREINKOMMEN (z.B. `.ncss-modal--slide-up`), am besten kombiniert mit `-duration-slow`

An prefers-reduced-motion gekoppelt statt hart auf 0 - base.css respektiert die Einstellung global.

Breakpoints & Container-Query-Schwellen

Feste Konvention, nicht als var() nutzbar (Media-/Container-Queries akzeptieren keine Custom Properties in der Bedingung selbst) - als Kommentar in tokens.css dokumentiert. Breakpointless bleibt der Standardweg, feste Breakpoints ein bewusst sparsam genutzter Escape Hatch, z.B. für den Nav-Kollaps bei 64rem.