export declare const ROXY_UI_TOKENS_CSS = "/**\n * Roxy UI design tokens. ~30 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). 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:root,\n:host {\n\t/* Color: brand */\n\t--roxy-primary: #0f172a;\n\t--roxy-secondary: #475569;\n\t--roxy-accent: #f59e0b;\n\t/* Text-safe accent variant. amber-500 hits 2.14:1 on white which fails\n\t * WCAG AA for body text. amber-700 hits 4.5:1, used wherever the accent\n\t * tone is applied to text. Fills (planet glyphs, chart accents, badges\n\t * with non-text use) keep --roxy-accent. */\n\t--roxy-accent-ink: #b45309;\n\n\t/* Color: status. The base value (success, warning, danger, info) is for\n\t * fills and tints. The -fg variant is darker so text on a light tint passes\n\t * WCAG AA (>= 4.5:1 on white). Use -fg whenever status color hits text. */\n\t--roxy-success: #16a34a;\n\t--roxy-success-fg: #166534;\n\t--roxy-warning: #ea580c;\n\t--roxy-warning-fg: #9a3412;\n\t--roxy-danger: #dc2626;\n\t--roxy-danger-fg: #991b1b;\n\t--roxy-info: #0284c7;\n\t--roxy-info-fg: #075985;\n\n\t/* Color: surface */\n\t--roxy-bg: #ffffff;\n\t--roxy-surface: #ffffff;\n\t--roxy-fg: #0a0a0a;\n\t--roxy-muted: #71717a;\n\t--roxy-border: #e4e4e7;\n\t--roxy-ring: rgba(245, 158, 11, 0.4);\n\n\t/* Typography */\n\t--roxy-font-sans:\n\t\t\"Geist\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n\t\tsans-serif;\n\t--roxy-font-mono:\n\t\t\"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\",\n\t\tmonospace;\n\n\t--roxy-text-xs: 0.75rem;\n\t--roxy-text-sm: 0.875rem;\n\t--roxy-text-base: 1rem;\n\t--roxy-text-lg: 1.125rem;\n\t--roxy-text-xl: 1.5rem;\n\n\t--roxy-weight-normal: 400;\n\t--roxy-weight-bold: 600;\n\n\t--roxy-leading-tight: 1.2;\n\t--roxy-leading-normal: 1.5;\n\n\t--roxy-tracking-tight: -0.02em;\n\t--roxy-tracking-normal: 0em;\n\n\t/* Spacing */\n\t--roxy-space-xs: 0.25rem;\n\t--roxy-space-sm: 0.5rem;\n\t--roxy-space-md: 1rem;\n\t--roxy-space-lg: 1.5rem;\n\t--roxy-space-xl: 2.5rem;\n\n\t/* Radius */\n\t--roxy-radius-sm: 4px;\n\t--roxy-radius-md: 8px;\n\t--roxy-radius-lg: 12px;\n\t--roxy-radius-full: 9999px;\n\n\t/* Shadow */\n\t--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);\n\t--roxy-shadow-md:\n\t\t0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);\n\t--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.14);\n\n\t/* Motion */\n\t--roxy-motion-duration: 200ms;\n\t--roxy-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);\n\n\t/* Heat scale: a single base hue. Consumers mix it with `transparent` at\n\t * increasing percentages to paint cooler-to-hotter tiers. The mix-with-\n\t * transparent approach lets the page bg show through and keeps text\n\t * colour stable (always --roxy-fg), so the cells read in both themes\n\t * without per-tier text colours. */\n\t--roxy-heat: var(--roxy-danger, #ef4444);\n}\n\n/* Dark theme via system preference */\n@media (prefers-color-scheme: dark) {\n\t:root,\n\t:host {\n\t\t--roxy-primary: #f8fafc;\n\t\t--roxy-secondary: #94a3b8;\n\t\t--roxy-accent: #fbbf24;\n\t\t--roxy-accent-ink: #fbbf24;\n\n\t\t/* Status -fg overrides must mirror the explicit [data-theme=\"dark\"] block\n\t\t * below. Without these, a user on system dark with no data-theme attribute\n\t\t * inherits the light-mode -fg values (e.g. #166534 success) which renders\n\t\t * as near-invisible dark green on a near-black surface and fails WCAG AA. */\n\t\t--roxy-success: #22c55e;\n\t\t--roxy-success-fg: #86efac;\n\t\t--roxy-warning: #fb923c;\n\t\t--roxy-warning-fg: #fdba74;\n\t\t--roxy-danger: #ef4444;\n\t\t--roxy-danger-fg: #fca5a5;\n\t\t--roxy-info: #38bdf8;\n\t\t--roxy-info-fg: #7dd3fc;\n\n\t\t--roxy-bg: #0a0a0a;\n\t\t--roxy-surface: #18181b;\n\t\t--roxy-fg: #fafafa;\n\t\t--roxy-muted: #a1a1aa;\n\t\t--roxy-border: #27272a;\n\t\t--roxy-ring: rgba(251, 191, 36, 0.45);\n\n\t\t--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);\n\t\t--roxy-shadow-md:\n\t\t\t0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);\n\t\t--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);\n\n\t\t--roxy-heat: var(--roxy-danger, #ef4444);\n\t}\n}\n\n/* Light theme override. Beats the @media (prefers-color-scheme: dark) block\n * when the host explicitly opts back into light. Without this, a dark-mode OS\n * pins the tokens to dark even after data-theme=\"light\" is set. The light-DOM\n * selectors (:root.light, .light, [data-theme=\"light\"]) set the vars on the\n * ancestor or the element itself so they inherit into every component shadow;\n * :host([data-theme=\"light\"]) is inert in global delivery and kept only for\n * shadow-adopted use. */\n:root[data-theme=\"light\"],\n[data-theme=\"light\"],\n:root.light,\n.light,\n:host([data-theme=\"light\"]) {\n\t--roxy-primary: #0f172a;\n\t--roxy-secondary: #475569;\n\t--roxy-accent: #f59e0b;\n\t--roxy-accent-ink: #b45309;\n\n\t--roxy-success: #16a34a;\n\t--roxy-success-fg: #166534;\n\t--roxy-warning: #ea580c;\n\t--roxy-warning-fg: #9a3412;\n\t--roxy-danger: #dc2626;\n\t--roxy-danger-fg: #991b1b;\n\t--roxy-info: #0284c7;\n\t--roxy-info-fg: #075985;\n\n\t--roxy-bg: #ffffff;\n\t--roxy-surface: #ffffff;\n\t--roxy-fg: #0a0a0a;\n\t--roxy-muted: #71717a;\n\t--roxy-border: #e4e4e7;\n\t--roxy-ring: rgba(245, 158, 11, 0.4);\n\n\t--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);\n\t--roxy-shadow-md:\n\t\t0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);\n\t--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.14);\n}\n\n/* Dark theme via explicit opt-in. The light-DOM selectors (:root.dark, .dark,\n * [data-theme=\"dark\"]) set the vars on the ancestor or the element itself so\n * they inherit into every component shadow; this is what makes a .dark class on\n * any ancestor (Tailwind, shadcn) actually theme the components in global\n * delivery. :host([data-theme=\"dark\"]) is inert in global delivery and kept\n * only for shadow-adopted use. */\n:root[data-theme=\"dark\"],\n[data-theme=\"dark\"],\n:root.dark,\n.dark,\n:host([data-theme=\"dark\"]) {\n\t--roxy-primary: #f8fafc;\n\t--roxy-secondary: #94a3b8;\n\t--roxy-accent: #fbbf24;\n\t--roxy-accent-ink: #fbbf24;\n\n\t--roxy-success: #22c55e;\n\t--roxy-success-fg: #86efac;\n\t--roxy-warning: #fb923c;\n\t--roxy-warning-fg: #fdba74;\n\t--roxy-danger: #ef4444;\n\t--roxy-danger-fg: #fca5a5;\n\t--roxy-info: #38bdf8;\n\t--roxy-info-fg: #7dd3fc;\n\n\t--roxy-bg: #0a0a0a;\n\t--roxy-surface: #18181b;\n\t--roxy-fg: #fafafa;\n\t--roxy-muted: #a1a1aa;\n\t--roxy-border: #27272a;\n\t--roxy-ring: rgba(251, 191, 36, 0.45);\n\n\t--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);\n\t--roxy-shadow-md:\n\t\t0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);\n\t--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);\n\n\t--roxy-heat: var(--roxy-danger, #ef4444);\n}\n\n/* Reduced motion override */\n@media (prefers-reduced-motion: reduce) {\n\t:root,\n\t:host {\n\t\t--roxy-motion-duration: 0ms;\n\t}\n}\n";
//# sourceMappingURL=tokens-css.d.ts.map