export declare const ROXY_UI_TOKENS_CSS = "/**\n * 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.\n *\n * 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.\n *\n * Light is the default. Dark applies under any of:\n * - prefers-color-scheme: dark\n * - [data-theme=\"dark\"] on the element itself or any ancestor (typically :root)\n * - .dark class on the element itself or any ancestor (typically :root)\n *\n * 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.\n *\n * Motion gating:\n * - --roxy-motion-duration defaults to 200ms. Set to 0ms to disable.\n * - prefers-reduced-motion: reduce forces 0ms regardless of host overrides.\n */\n\n/*\n * Two mechanisms keep the host page in charge of every token, and both are load bearing.\n *\n * The rules below sit in the `roxy.tokens` cascade layer, and an unlayered declaration beats a\n * layered one at ANY specificity. So a plain `:root { --roxy-accent: #8b5cf6 }` on the host page\n * wins, and so does the same line written inside a layer of its own, because the layer\n * statement above registers ours first and the CDN bundle injects this sheet at the top of\n * . A host that links this file after its own CSS orders the layers itself:\n * `@layer roxy, base, components, utilities;` before either sheet.\n *\n * Every selector is ALSO wrapped in :where(), which has ZERO specificity, so a host declaration\n * still wins wherever a layer cannot decide it. Without that, `:root.dark` and\n * `[data-theme=\"dark\"]` would carry class and attribute specificity (0,1,1) and outrank a plain\n * `:root` (0,1,0), and one brand override would hold under prefers-color-scheme and revert\n * under the other two dark signals: one line, three different results.\n *\n * Source order still decides among the rules in THIS file, which is what lets the explicit dark\n * block beat the light defaults when both match.\n */\n\n/* Layer order, named here so it is fixed wherever the two files load: the theme presets in\n * styles/themes/*.css reassign tokens and must win over these defaults. Both files declare it,\n * so either one loading alone still orders the pair. */\n@layer roxy.tokens, roxy.theme;\n\n@layer roxy.tokens {\n\t:where(:root, :host) {\n\t\t/* Native controls follow the theme, and this is the ONLY thing that makes them.\n\t\t *\n\t\t * `color-scheme` is a real property, not the `prefers-color-scheme` query above it, and\n\t\t * without it the browser paints every native control in its LIGHT appearance whatever our\n\t\t * tokens say. A