// Generated by scripts/sync-tokens.ts from tokens.css. Do not edit. export const ROXY_UI_TOKENS_CSS = `/** * Roxy UI design tokens. 47 CSS custom properties that every component reads. Light + dark defaults. Host page overrides at :root or per element. No Tailwind, no class-name overrides, no JS theme switcher. * * Delivery model: this file ships as a global light-DOM stylesheet (linked, or auto-injected by the CDN bundle). Why every rule sits in a cascade layer is the note above the layer statement below. Custom properties inherit through the shadow boundary, so tokens set on a light-DOM ancestor reach every component shadow. The explicit theme blocks therefore target light-DOM selectors (:root, .dark, [data-theme="dark"], a wrapper element), NOT :host (a :host rule in a global sheet matches nothing). The :host([data-theme]) selectors are kept only for the case where this CSS is ever adopted directly into a shadow root; they are inert in global delivery. * * Light is the default. Dark applies under any of: * - prefers-color-scheme: dark * - [data-theme="dark"] on the element itself or any ancestor (typically :root) * - .dark class on the element itself or any ancestor (typically :root) * * Explicit choice wins over the OS: the [data-theme] / .dark blocks come after the @media (prefers-color-scheme: dark) block in source order, and a closer ancestor overrides a farther one through normal custom-property inheritance. * * Motion gating: * - --roxy-motion-duration defaults to 200ms. Set to 0ms to disable. * - prefers-reduced-motion: reduce forces 0ms regardless of host overrides. */ /* * Two mechanisms keep the host page in charge of every token, and both are load bearing. * * The rules below sit in the \`roxy.tokens\` cascade layer, and an unlayered declaration beats a * layered one at ANY specificity. So a plain \`:root { --roxy-accent: #8b5cf6 }\` on the host page * wins, and so does the same line written inside a layer of its own, because the layer * statement above registers ours first and the CDN bundle injects this sheet at the top of * . A host that links this file after its own CSS orders the layers itself: * \`@layer roxy, base, components, utilities;\` before either sheet. * * Every selector is ALSO wrapped in :where(), which has ZERO specificity, so a host declaration * still wins wherever a layer cannot decide it. Without that, \`:root.dark\` and * \`[data-theme="dark"]\` would carry class and attribute specificity (0,1,1) and outrank a plain * \`:root\` (0,1,0), and one brand override would hold under prefers-color-scheme and revert * under the other two dark signals: one line, three different results. * * Source order still decides among the rules in THIS file, which is what lets the explicit dark * block beat the light defaults when both match. */ /* Layer order, named here so it is fixed wherever the two files load: the theme presets in * styles/themes/*.css reassign tokens and must win over these defaults. Both files declare it, * so either one loading alone still orders the pair. */ @layer roxy.tokens, roxy.theme; @layer roxy.tokens { :where(:root, :host) { /* Native controls follow the theme, and this is the ONLY thing that makes them. * * \`color-scheme\` is a real property, not the \`prefers-color-scheme\` query above it, and * without it the browser paints every native control in its LIGHT appearance whatever our * tokens say. A