export declare const ROXY_UI_TOKENS_CSS = "/**\n * Roxy UI design tokens: every colour, size, space, radius, font and duration a component reads.\n *\n * Two tiers. BASES are the few values a host tunes: fonts, base text size and its scale ratio, the\n * space unit, the base radius, motion, and the colour bases (bg, fg, accent and the four status\n * colours). Every other token DERIVES from them with calc() or color-mix(), so dark mode reassigns\n * the colour bases only and one font token restyles every heading. A host may still set any\n * derived token directly, and its value wins.\n *\n * Delivery: a global light-DOM stylesheet (linked, or injected by the CDN bundle). Custom properties\n * inherit through the shadow boundary, so a token set on any light-DOM ancestor reaches every\n * component. The :host selectors apply only if this sheet is adopted into a shadow root.\n *\n * Light is the default. Dark applies under prefers-color-scheme: dark, or [data-theme=\"dark\"] or\n * .dark on the element or any ancestor; [data-theme=\"light\"] or .light opts back into light. An\n * explicit choice wins over the OS because those blocks come later in source order.\n *\n * A derivation is computed where it is declared, so the derived block also matches every theme\n * trigger: a base reassigned on :root or on an element carrying data-theme, .light or .dark\n * re-derives everything below it.\n *\n * Font: --roxy-font-sans is unset by default, so every component inherits the host page font; any\n * value set by the host or a preset replaces it, and --roxy-font-display follows it until set.\n *\n * Motion: --roxy-motion-duration defaults to 200ms and prefers-reduced-motion forces 0ms.\n */\n\n/*\n * Two mechanisms keep the host page in charge of every token, and both are load bearing.\n *\n * Every rule sits in the roxy.tokens cascade layer, and an unlayered declaration beats a layered\n * one at ANY specificity, so a plain `:root { --roxy-accent: #8b5cf6 }` on the host page wins, and\n * so does the same line inside a layer of its own, because this statement registers ours first\n * and the CDN bundle injects this sheet at the top of <head>. A host that links this file after its\n * own CSS orders the layers itself: `@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, under every dark signal alike.\n *\n * The theme presets in styles/themes/*.css write into roxy.theme; both files declare this order,\n * so either one loading alone still ranks a preset above these defaults.\n */\n@layer roxy.tokens, roxy.theme;\n\n@layer roxy.tokens {\n\t/* Bases, light. Also the mode-specific derivations: accent ink and status inks mix toward black. */\n\t:where(:root, :host) {\n\t\t/* A real inherited property: native controls, popups and scrollbars follow it. */\n\t\tcolor-scheme: light;\n\n\t\t--roxy-bg: #ffffff;\n\t\t--roxy-fg: #0a0a0a;\n\t\t--roxy-accent: #4a6297;\n\t\t--roxy-success: #16a34a;\n\t\t--roxy-warning: #ea580c;\n\t\t--roxy-danger: #dc2626;\n\t\t--roxy-info: #0284c7;\n\n\t\t/* Accent and status inks: 70 percent toward black reads at AA on the card and on a tint of the base. */\n\t\t--roxy-accent-ink: color-mix(in oklab, var(--roxy-accent) 70%, black);\n\t\t--roxy-success-fg: color-mix(in oklab, var(--roxy-success) 70%, black);\n\t\t--roxy-warning-fg: color-mix(in oklab, var(--roxy-warning) 70%, black);\n\t\t--roxy-danger-fg: color-mix(in oklab, var(--roxy-danger) 70%, black);\n\t\t--roxy-info-fg: color-mix(in oklab, var(--roxy-info) 70%, black);\n\n\t\t/* Unset on purpose: a component inherits the host page font until a host or preset sets one. */\n\t\t--roxy-font-sans: initial;\n\t\t--roxy-font-mono:\n\t\t\tui-monospace, \"SF Mono\", \"Cascadia Code\", Menlo, Consolas,\n\t\t\t\"Liberation Mono\", monospace;\n\n\t\t--roxy-text-base: 1rem;\n\t\t--roxy-text-scale: 1.15;\n\t\t--roxy-weight-normal: 400;\n\t\t--roxy-weight-bold: 600;\n\t\t--roxy-leading-tight: 1.25;\n\t\t--roxy-leading-normal: 1.5;\n\t\t--roxy-tracking-tight: -0.01em;\n\t\t--roxy-tracking-normal: 0em;\n\n\t\t--roxy-space-unit: 0.25rem;\n\t\t--roxy-radius: 6px;\n\n\t\t--roxy-motion-duration: 200ms;\n\t\t--roxy-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);\n\t}\n\n\t/* Derived roles, identical in every mode, restated on every theme trigger so they follow its bases. */\n\t:where(:root, :host, [data-theme], .light, .dark) {\n\t\t/* Flat: the card is the page colour, separated by a hairline. */\n\t\t--roxy-surface: var(--roxy-bg);\n\t\t--roxy-primary: var(--roxy-fg);\n\t\t--roxy-secondary: color-mix(in oklab, var(--roxy-fg) 78%, var(--roxy-bg));\n\t\t--roxy-muted: color-mix(in oklab, var(--roxy-fg) 60%, var(--roxy-bg));\n\t\t--roxy-border: color-mix(in oklab, var(--roxy-fg) 14%, var(--roxy-bg));\n\t\t--roxy-ring: color-mix(in srgb, var(--roxy-accent) 40%, transparent);\n\t\t--roxy-heat: var(--roxy-danger);\n\n\t\t--roxy-font-display: var(--roxy-font-sans);\n\n\t\t--roxy-text-sm: calc(var(--roxy-text-base) / var(--roxy-text-scale));\n\t\t--roxy-text-xs: calc(var(--roxy-text-sm) / var(--roxy-text-scale));\n\t\t--roxy-text-lg: calc(var(--roxy-text-base) * var(--roxy-text-scale));\n\t\t--roxy-text-xl: calc(\n\t\t\tvar(--roxy-text-lg) *\n\t\t\tvar(--roxy-text-scale) *\n\t\t\tvar(--roxy-text-scale)\n\t\t);\n\n\t\t--roxy-space-xs: var(--roxy-space-unit);\n\t\t--roxy-space-sm: calc(var(--roxy-space-unit) * 2);\n\t\t--roxy-space-md: calc(var(--roxy-space-unit) * 4);\n\t\t--roxy-space-lg: calc(var(--roxy-space-unit) * 6);\n\t\t--roxy-space-xl: calc(var(--roxy-space-unit) * 10);\n\t\t--roxy-line-thick: calc(var(--roxy-space-unit) / 2);\n\t\t--roxy-touch: calc(var(--roxy-space-unit) * 11);\n\n\t\t--roxy-radius-sm: calc(var(--roxy-radius) / 2);\n\t\t--roxy-radius-md: var(--roxy-radius);\n\t\t--roxy-radius-lg: calc(var(--roxy-radius) * 5 / 3);\n\t\t--roxy-radius-full: 9999px;\n\n\t\t/* Flat surfaces cast nothing; only a floating layer (a popup, an enlarged chart) lifts. */\n\t\t--roxy-shadow-sm: none;\n\t\t--roxy-shadow-md: 0 4px 12px color-mix(in srgb, black 10%, transparent);\n\t\t--roxy-shadow-lg: 0 12px 32px color-mix(in srgb, black 18%, transparent);\n\t}\n\n\t/* Bases, dark, by system preference. Inks mix toward white so they read on a dark card. */\n\t@media (prefers-color-scheme: dark) {\n\t\t:where(:root, :host) {\n\t\t\tcolor-scheme: dark;\n\t\t\t--roxy-bg: #0a0a0a;\n\t\t\t--roxy-fg: #fafafa;\n\t\t\t--roxy-accent: #92aade;\n\t\t\t--roxy-success: #22c55e;\n\t\t\t--roxy-warning: #fb923c;\n\t\t\t--roxy-danger: #ef4444;\n\t\t\t--roxy-info: #38bdf8;\n\n\t\t\t--roxy-accent-ink: var(--roxy-accent);\n\t\t\t--roxy-success-fg: color-mix(in oklab, var(--roxy-success) 70%, white);\n\t\t\t--roxy-warning-fg: color-mix(in oklab, var(--roxy-warning) 70%, white);\n\t\t\t--roxy-danger-fg: color-mix(in oklab, var(--roxy-danger) 70%, white);\n\t\t\t--roxy-info-fg: color-mix(in oklab, var(--roxy-info) 70%, white);\n\t\t}\n\t}\n\n\t/* Explicit light: beats the OS dark block when the host chooses light. */\n\t:where(\n\t\t:root[data-theme=\"light\"],\n\t\t[data-theme=\"light\"],\n\t\t:root.light,\n\t\t.light,\n\t\t:host([data-theme=\"light\"])\n\t) {\n\t\tcolor-scheme: light;\n\t\t--roxy-bg: #ffffff;\n\t\t--roxy-fg: #0a0a0a;\n\t\t--roxy-accent: #4a6297;\n\t\t--roxy-success: #16a34a;\n\t\t--roxy-warning: #ea580c;\n\t\t--roxy-danger: #dc2626;\n\t\t--roxy-info: #0284c7;\n\n\t\t--roxy-accent-ink: color-mix(in oklab, var(--roxy-accent) 70%, black);\n\t\t--roxy-success-fg: color-mix(in oklab, var(--roxy-success) 70%, black);\n\t\t--roxy-warning-fg: color-mix(in oklab, var(--roxy-warning) 70%, black);\n\t\t--roxy-danger-fg: color-mix(in oklab, var(--roxy-danger) 70%, black);\n\t\t--roxy-info-fg: color-mix(in oklab, var(--roxy-info) 70%, black);\n\t}\n\n\t/* Explicit dark: a .dark class or data-theme=\"dark\" on any ancestor themes every component below it. */\n\t:where(\n\t\t:root[data-theme=\"dark\"],\n\t\t[data-theme=\"dark\"],\n\t\t:root.dark,\n\t\t.dark,\n\t\t:host([data-theme=\"dark\"])\n\t) {\n\t\tcolor-scheme: dark;\n\t\t--roxy-bg: #0a0a0a;\n\t\t--roxy-fg: #fafafa;\n\t\t--roxy-accent: #92aade;\n\t\t--roxy-success: #22c55e;\n\t\t--roxy-warning: #fb923c;\n\t\t--roxy-danger: #ef4444;\n\t\t--roxy-info: #38bdf8;\n\n\t\t--roxy-accent-ink: var(--roxy-accent);\n\t\t--roxy-success-fg: color-mix(in oklab, var(--roxy-success) 70%, white);\n\t\t--roxy-warning-fg: color-mix(in oklab, var(--roxy-warning) 70%, white);\n\t\t--roxy-danger-fg: color-mix(in oklab, var(--roxy-danger) 70%, white);\n\t\t--roxy-info-fg: color-mix(in oklab, var(--roxy-info) 70%, white);\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:where(:root, :host) {\n\t\t\t--roxy-motion-duration: 0ms;\n\t\t}\n\t}\n}\n";