@nonoun/native-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (537) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +105 -0
  3. package/dist/a2ui/a2ui-adapter.d.ts +50 -0
  4. package/dist/a2ui/a2ui-adapter.d.ts.map +1 -0
  5. package/dist/a2ui/a2ui-component-map.d.ts +41 -0
  6. package/dist/a2ui/a2ui-component-map.d.ts.map +1 -0
  7. package/dist/a2ui/a2ui-converter.d.ts +34 -0
  8. package/dist/a2ui/a2ui-converter.d.ts.map +1 -0
  9. package/dist/a2ui/a2ui-surface.d.ts +33 -0
  10. package/dist/a2ui/a2ui-surface.d.ts.map +1 -0
  11. package/dist/a2ui/a2ui-transport.d.ts +80 -0
  12. package/dist/a2ui/a2ui-transport.d.ts.map +1 -0
  13. package/dist/a2ui/a2ui-types.d.ts +104 -0
  14. package/dist/a2ui/a2ui-types.d.ts.map +1 -0
  15. package/dist/a2ui/index.d.ts +13 -0
  16. package/dist/a2ui/index.d.ts.map +1 -0
  17. package/dist/components/ui-accordion/index.d.ts +4 -0
  18. package/dist/components/ui-accordion/index.d.ts.map +1 -0
  19. package/dist/components/ui-accordion/ui-accordion-element.d.ts +18 -0
  20. package/dist/components/ui-accordion/ui-accordion-element.d.ts.map +1 -0
  21. package/dist/components/ui-accordion/ui-accordion-item-element.d.ts +18 -0
  22. package/dist/components/ui-accordion/ui-accordion-item-element.d.ts.map +1 -0
  23. package/dist/components/ui-accordion/ui-accordion.d.ts +4 -0
  24. package/dist/components/ui-accordion/ui-accordion.d.ts.map +1 -0
  25. package/dist/components/ui-avatar/index.d.ts +3 -0
  26. package/dist/components/ui-avatar/index.d.ts.map +1 -0
  27. package/dist/components/ui-avatar/ui-avatar-element.d.ts +20 -0
  28. package/dist/components/ui-avatar/ui-avatar-element.d.ts.map +1 -0
  29. package/dist/components/ui-avatar/ui-avatar.d.ts +3 -0
  30. package/dist/components/ui-avatar/ui-avatar.d.ts.map +1 -0
  31. package/dist/components/ui-badge/index.d.ts +3 -0
  32. package/dist/components/ui-badge/index.d.ts.map +1 -0
  33. package/dist/components/ui-badge/ui-badge-element.d.ts +13 -0
  34. package/dist/components/ui-badge/ui-badge-element.d.ts.map +1 -0
  35. package/dist/components/ui-badge/ui-badge.d.ts +3 -0
  36. package/dist/components/ui-badge/ui-badge.d.ts.map +1 -0
  37. package/dist/components/ui-breadcrumb/index.d.ts +4 -0
  38. package/dist/components/ui-breadcrumb/index.d.ts.map +1 -0
  39. package/dist/components/ui-breadcrumb/ui-breadcrumb-element.d.ts +8 -0
  40. package/dist/components/ui-breadcrumb/ui-breadcrumb-element.d.ts.map +1 -0
  41. package/dist/components/ui-breadcrumb/ui-breadcrumb-item-element.d.ts +15 -0
  42. package/dist/components/ui-breadcrumb/ui-breadcrumb-item-element.d.ts.map +1 -0
  43. package/dist/components/ui-breadcrumb/ui-breadcrumb.d.ts +4 -0
  44. package/dist/components/ui-breadcrumb/ui-breadcrumb.d.ts.map +1 -0
  45. package/dist/components/ui-button/index.d.ts +3 -0
  46. package/dist/components/ui-button/index.d.ts.map +1 -0
  47. package/dist/components/ui-button/ui-button-element.d.ts +391 -0
  48. package/dist/components/ui-button/ui-button-element.d.ts.map +1 -0
  49. package/dist/components/ui-button/ui-button.d.ts +3 -0
  50. package/dist/components/ui-button/ui-button.d.ts.map +1 -0
  51. package/dist/components/ui-calendar/calendar-store.d.ts +61 -0
  52. package/dist/components/ui-calendar/calendar-store.d.ts.map +1 -0
  53. package/dist/components/ui-calendar/index.d.ts +5 -0
  54. package/dist/components/ui-calendar/index.d.ts.map +1 -0
  55. package/dist/components/ui-calendar/ui-calendar-element.d.ts +400 -0
  56. package/dist/components/ui-calendar/ui-calendar-element.d.ts.map +1 -0
  57. package/dist/components/ui-calendar/ui-calendar.d.ts +3 -0
  58. package/dist/components/ui-calendar/ui-calendar.d.ts.map +1 -0
  59. package/dist/components/ui-chat/index.d.ts +3 -0
  60. package/dist/components/ui-chat/index.d.ts.map +1 -0
  61. package/dist/components/ui-chat/ui-chat-input-element.d.ts +21 -0
  62. package/dist/components/ui-chat/ui-chat-input-element.d.ts.map +1 -0
  63. package/dist/components/ui-chat/ui-chat-input.d.ts +3 -0
  64. package/dist/components/ui-chat/ui-chat-input.d.ts.map +1 -0
  65. package/dist/components/ui-checkbox/index.d.ts +3 -0
  66. package/dist/components/ui-checkbox/index.d.ts.map +1 -0
  67. package/dist/components/ui-checkbox/ui-checkbox-element.d.ts +402 -0
  68. package/dist/components/ui-checkbox/ui-checkbox-element.d.ts.map +1 -0
  69. package/dist/components/ui-checkbox/ui-checkbox.d.ts +3 -0
  70. package/dist/components/ui-checkbox/ui-checkbox.d.ts.map +1 -0
  71. package/dist/components/ui-combobox/index.d.ts +4 -0
  72. package/dist/components/ui-combobox/index.d.ts.map +1 -0
  73. package/dist/components/ui-combobox/ui-combobox-element.d.ts +408 -0
  74. package/dist/components/ui-combobox/ui-combobox-element.d.ts.map +1 -0
  75. package/dist/components/ui-combobox/ui-combobox.d.ts +3 -0
  76. package/dist/components/ui-combobox/ui-combobox.d.ts.map +1 -0
  77. package/dist/components/ui-command/index.d.ts +13 -0
  78. package/dist/components/ui-command/index.d.ts.map +1 -0
  79. package/dist/components/ui-command/ui-command-element.d.ts +21 -0
  80. package/dist/components/ui-command/ui-command-element.d.ts.map +1 -0
  81. package/dist/components/ui-command/ui-command-empty-element.d.ts +5 -0
  82. package/dist/components/ui-command/ui-command-empty-element.d.ts.map +1 -0
  83. package/dist/components/ui-command/ui-command-empty.d.ts +3 -0
  84. package/dist/components/ui-command/ui-command-empty.d.ts.map +1 -0
  85. package/dist/components/ui-command/ui-command-group-element.d.ts +6 -0
  86. package/dist/components/ui-command/ui-command-group-element.d.ts.map +1 -0
  87. package/dist/components/ui-command/ui-command-group.d.ts +3 -0
  88. package/dist/components/ui-command/ui-command-group.d.ts.map +1 -0
  89. package/dist/components/ui-command/ui-command-input-element.d.ts +14 -0
  90. package/dist/components/ui-command/ui-command-input-element.d.ts.map +1 -0
  91. package/dist/components/ui-command/ui-command-input.d.ts +3 -0
  92. package/dist/components/ui-command/ui-command-input.d.ts.map +1 -0
  93. package/dist/components/ui-command/ui-command-item-element.d.ts +25 -0
  94. package/dist/components/ui-command/ui-command-item-element.d.ts.map +1 -0
  95. package/dist/components/ui-command/ui-command-item.d.ts +3 -0
  96. package/dist/components/ui-command/ui-command-item.d.ts.map +1 -0
  97. package/dist/components/ui-command/ui-command-list-element.d.ts +6 -0
  98. package/dist/components/ui-command/ui-command-list-element.d.ts.map +1 -0
  99. package/dist/components/ui-command/ui-command-list.d.ts +3 -0
  100. package/dist/components/ui-command/ui-command-list.d.ts.map +1 -0
  101. package/dist/components/ui-command/ui-command.d.ts +8 -0
  102. package/dist/components/ui-command/ui-command.d.ts.map +1 -0
  103. package/dist/components/ui-controller/index.d.ts +3 -0
  104. package/dist/components/ui-controller/index.d.ts.map +1 -0
  105. package/dist/components/ui-controller/ui-controller-element.d.ts +18 -0
  106. package/dist/components/ui-controller/ui-controller-element.d.ts.map +1 -0
  107. package/dist/components/ui-controller/ui-controller.d.ts +2 -0
  108. package/dist/components/ui-controller/ui-controller.d.ts.map +1 -0
  109. package/dist/components/ui-dialog/index.d.ts +3 -0
  110. package/dist/components/ui-dialog/index.d.ts.map +1 -0
  111. package/dist/components/ui-dialog/ui-dialog-element.d.ts +17 -0
  112. package/dist/components/ui-dialog/ui-dialog-element.d.ts.map +1 -0
  113. package/dist/components/ui-dialog/ui-dialog.d.ts +3 -0
  114. package/dist/components/ui-dialog/ui-dialog.d.ts.map +1 -0
  115. package/dist/components/ui-drawer/index.d.ts +3 -0
  116. package/dist/components/ui-drawer/index.d.ts.map +1 -0
  117. package/dist/components/ui-drawer/ui-drawer-element.d.ts +18 -0
  118. package/dist/components/ui-drawer/ui-drawer-element.d.ts.map +1 -0
  119. package/dist/components/ui-drawer/ui-drawer.d.ts +3 -0
  120. package/dist/components/ui-drawer/ui-drawer.d.ts.map +1 -0
  121. package/dist/components/ui-field/index.d.ts +3 -0
  122. package/dist/components/ui-field/index.d.ts.map +1 -0
  123. package/dist/components/ui-field/ui-field-element.d.ts +14 -0
  124. package/dist/components/ui-field/ui-field-element.d.ts.map +1 -0
  125. package/dist/components/ui-field/ui-field.d.ts +3 -0
  126. package/dist/components/ui-field/ui-field.d.ts.map +1 -0
  127. package/dist/components/ui-input/index.d.ts +3 -0
  128. package/dist/components/ui-input/index.d.ts.map +1 -0
  129. package/dist/components/ui-input/ui-input-element.d.ts +404 -0
  130. package/dist/components/ui-input/ui-input-element.d.ts.map +1 -0
  131. package/dist/components/ui-input/ui-input.d.ts +3 -0
  132. package/dist/components/ui-input/ui-input.d.ts.map +1 -0
  133. package/dist/components/ui-input-otp/index.d.ts +3 -0
  134. package/dist/components/ui-input-otp/index.d.ts.map +1 -0
  135. package/dist/components/ui-input-otp/ui-input-otp-element.d.ts +399 -0
  136. package/dist/components/ui-input-otp/ui-input-otp-element.d.ts.map +1 -0
  137. package/dist/components/ui-input-otp/ui-input-otp.d.ts +3 -0
  138. package/dist/components/ui-input-otp/ui-input-otp.d.ts.map +1 -0
  139. package/dist/components/ui-listbox/index.d.ts +9 -0
  140. package/dist/components/ui-listbox/index.d.ts.map +1 -0
  141. package/dist/components/ui-listbox/ui-listbox-element.d.ts +29 -0
  142. package/dist/components/ui-listbox/ui-listbox-element.d.ts.map +1 -0
  143. package/dist/components/ui-listbox/ui-listbox.d.ts +5 -0
  144. package/dist/components/ui-listbox/ui-listbox.d.ts.map +1 -0
  145. package/dist/components/ui-listbox/ui-option-element.d.ts +23 -0
  146. package/dist/components/ui-listbox/ui-option-element.d.ts.map +1 -0
  147. package/dist/components/ui-listbox/ui-option-group-element.d.ts +6 -0
  148. package/dist/components/ui-listbox/ui-option-group-element.d.ts.map +1 -0
  149. package/dist/components/ui-listbox/ui-option-group-header-element.d.ts +7 -0
  150. package/dist/components/ui-listbox/ui-option-group-header-element.d.ts.map +1 -0
  151. package/dist/components/ui-listbox/ui-option-group-header.d.ts +3 -0
  152. package/dist/components/ui-listbox/ui-option-group-header.d.ts.map +1 -0
  153. package/dist/components/ui-listbox/ui-option-group.d.ts +3 -0
  154. package/dist/components/ui-listbox/ui-option-group.d.ts.map +1 -0
  155. package/dist/components/ui-listbox/ui-option.d.ts +3 -0
  156. package/dist/components/ui-listbox/ui-option.d.ts.map +1 -0
  157. package/dist/components/ui-nav/index.d.ts +6 -0
  158. package/dist/components/ui-nav/index.d.ts.map +1 -0
  159. package/dist/components/ui-nav/ui-nav-element.d.ts +20 -0
  160. package/dist/components/ui-nav/ui-nav-element.d.ts.map +1 -0
  161. package/dist/components/ui-nav/ui-nav-group-element.d.ts +16 -0
  162. package/dist/components/ui-nav/ui-nav-group-element.d.ts.map +1 -0
  163. package/dist/components/ui-nav/ui-nav-group-header-element.d.ts +7 -0
  164. package/dist/components/ui-nav/ui-nav-group-header-element.d.ts.map +1 -0
  165. package/dist/components/ui-nav/ui-nav-item-element.d.ts +23 -0
  166. package/dist/components/ui-nav/ui-nav-item-element.d.ts.map +1 -0
  167. package/dist/components/ui-nav/ui-nav.d.ts +2 -0
  168. package/dist/components/ui-nav/ui-nav.d.ts.map +1 -0
  169. package/dist/components/ui-pagination/index.d.ts +3 -0
  170. package/dist/components/ui-pagination/index.d.ts.map +1 -0
  171. package/dist/components/ui-pagination/ui-pagination-element.d.ts +29 -0
  172. package/dist/components/ui-pagination/ui-pagination-element.d.ts.map +1 -0
  173. package/dist/components/ui-pagination/ui-pagination.d.ts +5 -0
  174. package/dist/components/ui-pagination/ui-pagination.d.ts.map +1 -0
  175. package/dist/components/ui-radio/index.d.ts +4 -0
  176. package/dist/components/ui-radio/index.d.ts.map +1 -0
  177. package/dist/components/ui-radio/ui-radio-element.d.ts +21 -0
  178. package/dist/components/ui-radio/ui-radio-element.d.ts.map +1 -0
  179. package/dist/components/ui-radio/ui-radio-group-element.d.ts +397 -0
  180. package/dist/components/ui-radio/ui-radio-group-element.d.ts.map +1 -0
  181. package/dist/components/ui-radio/ui-radio.d.ts +4 -0
  182. package/dist/components/ui-radio/ui-radio.d.ts.map +1 -0
  183. package/dist/components/ui-range/index.d.ts +3 -0
  184. package/dist/components/ui-range/index.d.ts.map +1 -0
  185. package/dist/components/ui-range/ui-range-element.d.ts +403 -0
  186. package/dist/components/ui-range/ui-range-element.d.ts.map +1 -0
  187. package/dist/components/ui-range/ui-range.d.ts +3 -0
  188. package/dist/components/ui-range/ui-range.d.ts.map +1 -0
  189. package/dist/components/ui-segmented-control/index.d.ts +4 -0
  190. package/dist/components/ui-segmented-control/index.d.ts.map +1 -0
  191. package/dist/components/ui-segmented-control/ui-segment-element.d.ts +21 -0
  192. package/dist/components/ui-segmented-control/ui-segment-element.d.ts.map +1 -0
  193. package/dist/components/ui-segmented-control/ui-segmented-control-element.d.ts +395 -0
  194. package/dist/components/ui-segmented-control/ui-segmented-control-element.d.ts.map +1 -0
  195. package/dist/components/ui-segmented-control/ui-segmented-control.d.ts +4 -0
  196. package/dist/components/ui-segmented-control/ui-segmented-control.d.ts.map +1 -0
  197. package/dist/components/ui-select/index.d.ts +4 -0
  198. package/dist/components/ui-select/index.d.ts.map +1 -0
  199. package/dist/components/ui-select/select-controller.d.ts +12 -0
  200. package/dist/components/ui-select/select-controller.d.ts.map +1 -0
  201. package/dist/components/ui-select/ui-select-element.d.ts +408 -0
  202. package/dist/components/ui-select/ui-select-element.d.ts.map +1 -0
  203. package/dist/components/ui-select/ui-select.d.ts +4 -0
  204. package/dist/components/ui-select/ui-select.d.ts.map +1 -0
  205. package/dist/components/ui-slideshow/index.d.ts +4 -0
  206. package/dist/components/ui-slideshow/index.d.ts.map +1 -0
  207. package/dist/components/ui-slideshow/ui-slide-element.d.ts +6 -0
  208. package/dist/components/ui-slideshow/ui-slide-element.d.ts.map +1 -0
  209. package/dist/components/ui-slideshow/ui-slideshow-element.d.ts +28 -0
  210. package/dist/components/ui-slideshow/ui-slideshow-element.d.ts.map +1 -0
  211. package/dist/components/ui-slideshow/ui-slideshow.d.ts +4 -0
  212. package/dist/components/ui-slideshow/ui-slideshow.d.ts.map +1 -0
  213. package/dist/components/ui-switch/index.d.ts +3 -0
  214. package/dist/components/ui-switch/index.d.ts.map +1 -0
  215. package/dist/components/ui-switch/ui-switch-element.d.ts +396 -0
  216. package/dist/components/ui-switch/ui-switch-element.d.ts.map +1 -0
  217. package/dist/components/ui-switch/ui-switch.d.ts +3 -0
  218. package/dist/components/ui-switch/ui-switch.d.ts.map +1 -0
  219. package/dist/components/ui-table/column-resize-controller.d.ts +13 -0
  220. package/dist/components/ui-table/column-resize-controller.d.ts.map +1 -0
  221. package/dist/components/ui-table/index.d.ts +12 -0
  222. package/dist/components/ui-table/index.d.ts.map +1 -0
  223. package/dist/components/ui-table/table-drag-controller.d.ts +12 -0
  224. package/dist/components/ui-table/table-drag-controller.d.ts.map +1 -0
  225. package/dist/components/ui-table/table-store.d.ts +24 -0
  226. package/dist/components/ui-table/table-store.d.ts.map +1 -0
  227. package/dist/components/ui-table/ui-table-body-element.d.ts +7 -0
  228. package/dist/components/ui-table/ui-table-body-element.d.ts.map +1 -0
  229. package/dist/components/ui-table/ui-table-cell-element.d.ts +7 -0
  230. package/dist/components/ui-table/ui-table-cell-element.d.ts.map +1 -0
  231. package/dist/components/ui-table/ui-table-element.d.ts +22 -0
  232. package/dist/components/ui-table/ui-table-element.d.ts.map +1 -0
  233. package/dist/components/ui-table/ui-table-head-element.d.ts +7 -0
  234. package/dist/components/ui-table/ui-table-head-element.d.ts.map +1 -0
  235. package/dist/components/ui-table/ui-table-header-element.d.ts +19 -0
  236. package/dist/components/ui-table/ui-table-header-element.d.ts.map +1 -0
  237. package/dist/components/ui-table/ui-table-row-element.d.ts +18 -0
  238. package/dist/components/ui-table/ui-table-row-element.d.ts.map +1 -0
  239. package/dist/components/ui-table/ui-table.d.ts +8 -0
  240. package/dist/components/ui-table/ui-table.d.ts.map +1 -0
  241. package/dist/components/ui-tabs/index.d.ts +6 -0
  242. package/dist/components/ui-tabs/index.d.ts.map +1 -0
  243. package/dist/components/ui-tabs/ui-tab-element.d.ts +21 -0
  244. package/dist/components/ui-tabs/ui-tab-element.d.ts.map +1 -0
  245. package/dist/components/ui-tabs/ui-tab-panel-element.d.ts +14 -0
  246. package/dist/components/ui-tabs/ui-tab-panel-element.d.ts.map +1 -0
  247. package/dist/components/ui-tabs/ui-tab-panels-element.d.ts +7 -0
  248. package/dist/components/ui-tabs/ui-tab-panels-element.d.ts.map +1 -0
  249. package/dist/components/ui-tabs/ui-tabs-element.d.ts +21 -0
  250. package/dist/components/ui-tabs/ui-tabs-element.d.ts.map +1 -0
  251. package/dist/components/ui-tabs/ui-tabs.d.ts +6 -0
  252. package/dist/components/ui-tabs/ui-tabs.d.ts.map +1 -0
  253. package/dist/components/ui-textarea/index.d.ts +3 -0
  254. package/dist/components/ui-textarea/index.d.ts.map +1 -0
  255. package/dist/components/ui-textarea/ui-textarea-element.d.ts +406 -0
  256. package/dist/components/ui-textarea/ui-textarea-element.d.ts.map +1 -0
  257. package/dist/components/ui-textarea/ui-textarea.d.ts +3 -0
  258. package/dist/components/ui-textarea/ui-textarea.d.ts.map +1 -0
  259. package/dist/components/ui-tooltip/index.d.ts +3 -0
  260. package/dist/components/ui-tooltip/index.d.ts.map +1 -0
  261. package/dist/components/ui-tooltip/ui-tooltip-element.d.ts +22 -0
  262. package/dist/components/ui-tooltip/ui-tooltip-element.d.ts.map +1 -0
  263. package/dist/components/ui-tooltip/ui-tooltip.d.ts +3 -0
  264. package/dist/components/ui-tooltip/ui-tooltip.d.ts.map +1 -0
  265. package/dist/components/ui-tree/index.d.ts +4 -0
  266. package/dist/components/ui-tree/index.d.ts.map +1 -0
  267. package/dist/components/ui-tree/ui-tree-element.d.ts +16 -0
  268. package/dist/components/ui-tree/ui-tree-element.d.ts.map +1 -0
  269. package/dist/components/ui-tree/ui-tree-item-element.d.ts +18 -0
  270. package/dist/components/ui-tree/ui-tree-item-element.d.ts.map +1 -0
  271. package/dist/components/ui-tree/ui-tree.d.ts +5 -0
  272. package/dist/components/ui-tree/ui-tree.d.ts.map +1 -0
  273. package/dist/components-lean.css +5107 -0
  274. package/dist/components.css +5183 -0
  275. package/dist/containers/ui-card/index.d.ts +3 -0
  276. package/dist/containers/ui-card/index.d.ts.map +1 -0
  277. package/dist/containers/ui-card/ui-card-element.d.ts +13 -0
  278. package/dist/containers/ui-card/ui-card-element.d.ts.map +1 -0
  279. package/dist/containers/ui-card/ui-card.d.ts +3 -0
  280. package/dist/containers/ui-card/ui-card.d.ts.map +1 -0
  281. package/dist/containers/ui-layout-chat/index.d.ts +3 -0
  282. package/dist/containers/ui-layout-chat/index.d.ts.map +1 -0
  283. package/dist/containers/ui-layout-chat/ui-layout-chat-element.d.ts +14 -0
  284. package/dist/containers/ui-layout-chat/ui-layout-chat-element.d.ts.map +1 -0
  285. package/dist/containers/ui-layout-chat/ui-layout-chat.d.ts +3 -0
  286. package/dist/containers/ui-layout-chat/ui-layout-chat.d.ts.map +1 -0
  287. package/dist/containers/ui-layout-inspector/index.d.ts +3 -0
  288. package/dist/containers/ui-layout-inspector/index.d.ts.map +1 -0
  289. package/dist/containers/ui-layout-inspector/ui-layout-inspector-element.d.ts +14 -0
  290. package/dist/containers/ui-layout-inspector/ui-layout-inspector-element.d.ts.map +1 -0
  291. package/dist/containers/ui-layout-inspector/ui-layout-inspector.d.ts +3 -0
  292. package/dist/containers/ui-layout-inspector/ui-layout-inspector.d.ts.map +1 -0
  293. package/dist/containers/ui-layout-sidebar/index.d.ts +4 -0
  294. package/dist/containers/ui-layout-sidebar/index.d.ts.map +1 -0
  295. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-element.d.ts +8 -0
  296. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-element.d.ts.map +1 -0
  297. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-trigger-element.d.ts +8 -0
  298. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-trigger-element.d.ts.map +1 -0
  299. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-trigger.d.ts +3 -0
  300. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-trigger.d.ts.map +1 -0
  301. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar.d.ts +4 -0
  302. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar.d.ts.map +1 -0
  303. package/dist/containers/ui-section/index.d.ts +3 -0
  304. package/dist/containers/ui-section/index.d.ts.map +1 -0
  305. package/dist/containers/ui-section/ui-section-element.d.ts +14 -0
  306. package/dist/containers/ui-section/ui-section-element.d.ts.map +1 -0
  307. package/dist/containers/ui-section/ui-section.d.ts +3 -0
  308. package/dist/containers/ui-section/ui-section.d.ts.map +1 -0
  309. package/dist/containers/ui-toolbar/index.d.ts +3 -0
  310. package/dist/containers/ui-toolbar/index.d.ts.map +1 -0
  311. package/dist/containers/ui-toolbar/ui-toolbar-element.d.ts +9 -0
  312. package/dist/containers/ui-toolbar/ui-toolbar-element.d.ts.map +1 -0
  313. package/dist/containers/ui-toolbar/ui-toolbar.d.ts +3 -0
  314. package/dist/containers/ui-toolbar/ui-toolbar.d.ts.map +1 -0
  315. package/dist/core/context.d.ts +731 -0
  316. package/dist/core/context.d.ts.map +1 -0
  317. package/dist/core/data-list.d.ts +42 -0
  318. package/dist/core/data-list.d.ts.map +1 -0
  319. package/dist/core/data-options.d.ts +18 -0
  320. package/dist/core/data-options.d.ts.map +1 -0
  321. package/dist/core/define.d.ts +2 -0
  322. package/dist/core/define.d.ts.map +1 -0
  323. package/dist/core/effects.d.ts +5 -0
  324. package/dist/core/effects.d.ts.map +1 -0
  325. package/dist/core/form-associable.d.ts +391 -0
  326. package/dist/core/form-associable.d.ts.map +1 -0
  327. package/dist/core/gesture-router.d.ts +36 -0
  328. package/dist/core/gesture-router.d.ts.map +1 -0
  329. package/dist/core/index.d.ts +21 -0
  330. package/dist/core/index.d.ts.map +1 -0
  331. package/dist/core/reactive-prop.d.ts +62 -0
  332. package/dist/core/reactive-prop.d.ts.map +1 -0
  333. package/dist/core/trait-options.d.ts +18 -0
  334. package/dist/core/trait-options.d.ts.map +1 -0
  335. package/dist/core/trait-registry.d.ts +11 -0
  336. package/dist/core/trait-registry.d.ts.map +1 -0
  337. package/dist/core/trait-runtime.d.ts +37 -0
  338. package/dist/core/trait-runtime.d.ts.map +1 -0
  339. package/dist/core/types.d.ts +9 -0
  340. package/dist/core/types.d.ts.map +1 -0
  341. package/dist/core/ui-element.d.ts +17 -0
  342. package/dist/core/ui-element.d.ts.map +1 -0
  343. package/dist/core/uid.d.ts +2 -0
  344. package/dist/core/uid.d.ts.map +1 -0
  345. package/dist/custom-elements.json +21202 -0
  346. package/dist/dialog-controller.js +754 -0
  347. package/dist/events.d.ts +168 -0
  348. package/dist/events.d.ts.map +1 -0
  349. package/dist/foundation.css +2003 -0
  350. package/dist/icons/icons.d.ts +30 -0
  351. package/dist/icons/icons.d.ts.map +1 -0
  352. package/dist/icons/index.d.ts +4 -0
  353. package/dist/icons/index.d.ts.map +1 -0
  354. package/dist/icons/registry.d.ts +4 -0
  355. package/dist/icons/registry.d.ts.map +1 -0
  356. package/dist/icons/ui-icon-element.d.ts +15 -0
  357. package/dist/icons/ui-icon-element.d.ts.map +1 -0
  358. package/dist/icons/ui-icon.d.ts +3 -0
  359. package/dist/icons/ui-icon.d.ts.map +1 -0
  360. package/dist/index.d.ts +102 -0
  361. package/dist/index.d.ts.map +1 -0
  362. package/dist/kernel/accessibility.d.ts +15 -0
  363. package/dist/kernel/accessibility.d.ts.map +1 -0
  364. package/dist/kernel/command-bus.d.ts +13 -0
  365. package/dist/kernel/command-bus.d.ts.map +1 -0
  366. package/dist/kernel/command-history.d.ts +18 -0
  367. package/dist/kernel/command-history.d.ts.map +1 -0
  368. package/dist/kernel/components.d.ts +26 -0
  369. package/dist/kernel/components.d.ts.map +1 -0
  370. package/dist/kernel/data-binding.d.ts +33 -0
  371. package/dist/kernel/data-binding.d.ts.map +1 -0
  372. package/dist/kernel/data-runtime.d.ts +43 -0
  373. package/dist/kernel/data-runtime.d.ts.map +1 -0
  374. package/dist/kernel/executor.d.ts +16 -0
  375. package/dist/kernel/executor.d.ts.map +1 -0
  376. package/dist/kernel/focus-router.d.ts +13 -0
  377. package/dist/kernel/focus-router.d.ts.map +1 -0
  378. package/dist/kernel/index.d.ts +32 -0
  379. package/dist/kernel/index.d.ts.map +1 -0
  380. package/dist/kernel/kernel.d.ts +44 -0
  381. package/dist/kernel/kernel.d.ts.map +1 -0
  382. package/dist/kernel/observability.d.ts +58 -0
  383. package/dist/kernel/observability.d.ts.map +1 -0
  384. package/dist/kernel/overlay-manager.d.ts +21 -0
  385. package/dist/kernel/overlay-manager.d.ts.map +1 -0
  386. package/dist/kernel/patch.d.ts +59 -0
  387. package/dist/kernel/patch.d.ts.map +1 -0
  388. package/dist/kernel/planner.d.ts +151 -0
  389. package/dist/kernel/planner.d.ts.map +1 -0
  390. package/dist/kernel/policy.d.ts +58 -0
  391. package/dist/kernel/policy.d.ts.map +1 -0
  392. package/dist/kernel/schema-catalog.d.ts +54 -0
  393. package/dist/kernel/schema-catalog.d.ts.map +1 -0
  394. package/dist/kernel/schema.d.ts +6 -0
  395. package/dist/kernel/schema.d.ts.map +1 -0
  396. package/dist/kernel/types.d.ts +81 -0
  397. package/dist/kernel/types.d.ts.map +1 -0
  398. package/dist/kernel/workflow-templates.d.ts +22 -0
  399. package/dist/kernel/workflow-templates.d.ts.map +1 -0
  400. package/dist/kernel/workflow.d.ts +70 -0
  401. package/dist/kernel/workflow.d.ts.map +1 -0
  402. package/dist/kernel.d.ts +27 -0
  403. package/dist/kernel.d.ts.map +1 -0
  404. package/dist/kernel.js +4137 -0
  405. package/dist/native-ui-lean.css +7111 -0
  406. package/dist/native-ui.css +7187 -0
  407. package/dist/native-ui.js +75 -0
  408. package/dist/reactivity/batch.d.ts +2 -0
  409. package/dist/reactivity/batch.d.ts.map +1 -0
  410. package/dist/reactivity/computed.d.ts +3 -0
  411. package/dist/reactivity/computed.d.ts.map +1 -0
  412. package/dist/reactivity/debug.d.ts +5 -0
  413. package/dist/reactivity/debug.d.ts.map +1 -0
  414. package/dist/reactivity/effect.d.ts +3 -0
  415. package/dist/reactivity/effect.d.ts.map +1 -0
  416. package/dist/reactivity/graph.d.ts +35 -0
  417. package/dist/reactivity/graph.d.ts.map +1 -0
  418. package/dist/reactivity/index.d.ts +8 -0
  419. package/dist/reactivity/index.d.ts.map +1 -0
  420. package/dist/reactivity/signal.d.ts +3 -0
  421. package/dist/reactivity/signal.d.ts.map +1 -0
  422. package/dist/reactivity/types.d.ts +18 -0
  423. package/dist/reactivity/types.d.ts.map +1 -0
  424. package/dist/reactivity/untrack.d.ts +2 -0
  425. package/dist/reactivity/untrack.d.ts.map +1 -0
  426. package/dist/register-all.d.ts +11 -0
  427. package/dist/register-all.d.ts.map +1 -0
  428. package/dist/register-all.js +3 -0
  429. package/dist/register-all2.js +1244 -0
  430. package/dist/traits/adapters/clippable-adapter.d.ts +4 -0
  431. package/dist/traits/adapters/clippable-adapter.d.ts.map +1 -0
  432. package/dist/traits/adapters/collapsible-adapter.d.ts +4 -0
  433. package/dist/traits/adapters/collapsible-adapter.d.ts.map +1 -0
  434. package/dist/traits/adapters/copyable-adapter.d.ts +4 -0
  435. package/dist/traits/adapters/copyable-adapter.d.ts.map +1 -0
  436. package/dist/traits/adapters/dialogable-adapter.d.ts +4 -0
  437. package/dist/traits/adapters/dialogable-adapter.d.ts.map +1 -0
  438. package/dist/traits/adapters/dismissable-adapter.d.ts +4 -0
  439. package/dist/traits/adapters/dismissable-adapter.d.ts.map +1 -0
  440. package/dist/traits/adapters/draggable-adapter.d.ts +4 -0
  441. package/dist/traits/adapters/draggable-adapter.d.ts.map +1 -0
  442. package/dist/traits/adapters/droppable-adapter.d.ts +4 -0
  443. package/dist/traits/adapters/droppable-adapter.d.ts.map +1 -0
  444. package/dist/traits/adapters/editable-adapter.d.ts +4 -0
  445. package/dist/traits/adapters/editable-adapter.d.ts.map +1 -0
  446. package/dist/traits/adapters/focus-trappable-adapter.d.ts +4 -0
  447. package/dist/traits/adapters/focus-trappable-adapter.d.ts.map +1 -0
  448. package/dist/traits/adapters/hoverable-adapter.d.ts +4 -0
  449. package/dist/traits/adapters/hoverable-adapter.d.ts.map +1 -0
  450. package/dist/traits/adapters/index.d.ts +25 -0
  451. package/dist/traits/adapters/index.d.ts.map +1 -0
  452. package/dist/traits/adapters/intersectable-adapter.d.ts +4 -0
  453. package/dist/traits/adapters/intersectable-adapter.d.ts.map +1 -0
  454. package/dist/traits/adapters/list-navigable-adapter.d.ts +4 -0
  455. package/dist/traits/adapters/list-navigable-adapter.d.ts.map +1 -0
  456. package/dist/traits/adapters/popoverable-adapter.d.ts +4 -0
  457. package/dist/traits/adapters/popoverable-adapter.d.ts.map +1 -0
  458. package/dist/traits/adapters/pressable-adapter.d.ts +4 -0
  459. package/dist/traits/adapters/pressable-adapter.d.ts.map +1 -0
  460. package/dist/traits/adapters/range-selectable-adapter.d.ts +4 -0
  461. package/dist/traits/adapters/range-selectable-adapter.d.ts.map +1 -0
  462. package/dist/traits/adapters/resizable-adapter.d.ts +4 -0
  463. package/dist/traits/adapters/resizable-adapter.d.ts.map +1 -0
  464. package/dist/traits/adapters/roving-focusable-adapter.d.ts +4 -0
  465. package/dist/traits/adapters/roving-focusable-adapter.d.ts.map +1 -0
  466. package/dist/traits/adapters/searchable-adapter.d.ts +4 -0
  467. package/dist/traits/adapters/searchable-adapter.d.ts.map +1 -0
  468. package/dist/traits/adapters/selectable-adapter.d.ts +4 -0
  469. package/dist/traits/adapters/selectable-adapter.d.ts.map +1 -0
  470. package/dist/traits/adapters/sortable-adapter.d.ts +4 -0
  471. package/dist/traits/adapters/sortable-adapter.d.ts.map +1 -0
  472. package/dist/traits/adapters/swipeable-adapter.d.ts +4 -0
  473. package/dist/traits/adapters/swipeable-adapter.d.ts.map +1 -0
  474. package/dist/traits/adapters/toastable-adapter.d.ts +4 -0
  475. package/dist/traits/adapters/toastable-adapter.d.ts.map +1 -0
  476. package/dist/traits/adapters/validatable-adapter.d.ts +4 -0
  477. package/dist/traits/adapters/validatable-adapter.d.ts.map +1 -0
  478. package/dist/traits/adapters/virtualizable-adapter.d.ts +4 -0
  479. package/dist/traits/adapters/virtualizable-adapter.d.ts.map +1 -0
  480. package/dist/traits/clipboard-controller.d.ts +24 -0
  481. package/dist/traits/clipboard-controller.d.ts.map +1 -0
  482. package/dist/traits/collapsible-controller.d.ts +17 -0
  483. package/dist/traits/collapsible-controller.d.ts.map +1 -0
  484. package/dist/traits/copy-controller.d.ts +15 -0
  485. package/dist/traits/copy-controller.d.ts.map +1 -0
  486. package/dist/traits/dialog-controller.d.ts +14 -0
  487. package/dist/traits/dialog-controller.d.ts.map +1 -0
  488. package/dist/traits/dismiss-controller.d.ts +10 -0
  489. package/dist/traits/dismiss-controller.d.ts.map +1 -0
  490. package/dist/traits/drag-controller.d.ts +22 -0
  491. package/dist/traits/drag-controller.d.ts.map +1 -0
  492. package/dist/traits/drop-zone-controller.d.ts +18 -0
  493. package/dist/traits/drop-zone-controller.d.ts.map +1 -0
  494. package/dist/traits/edit-controller.d.ts +22 -0
  495. package/dist/traits/edit-controller.d.ts.map +1 -0
  496. package/dist/traits/focus-trap-controller.d.ts +10 -0
  497. package/dist/traits/focus-trap-controller.d.ts.map +1 -0
  498. package/dist/traits/hover-controller.d.ts +18 -0
  499. package/dist/traits/hover-controller.d.ts.map +1 -0
  500. package/dist/traits/index.d.ts +71 -0
  501. package/dist/traits/index.d.ts.map +1 -0
  502. package/dist/traits/intersect-controller.d.ts +22 -0
  503. package/dist/traits/intersect-controller.d.ts.map +1 -0
  504. package/dist/traits/list-navigate-controller.d.ts +36 -0
  505. package/dist/traits/list-navigate-controller.d.ts.map +1 -0
  506. package/dist/traits/popover-controller.d.ts +10 -0
  507. package/dist/traits/popover-controller.d.ts.map +1 -0
  508. package/dist/traits/press-controller.d.ts +14 -0
  509. package/dist/traits/press-controller.d.ts.map +1 -0
  510. package/dist/traits/range-select-controller.d.ts +19 -0
  511. package/dist/traits/range-select-controller.d.ts.map +1 -0
  512. package/dist/traits/register-all.d.ts +6 -0
  513. package/dist/traits/register-all.d.ts.map +1 -0
  514. package/dist/traits/resize-controller.d.ts +25 -0
  515. package/dist/traits/resize-controller.d.ts.map +1 -0
  516. package/dist/traits/roving-focus-controller.d.ts +20 -0
  517. package/dist/traits/roving-focus-controller.d.ts.map +1 -0
  518. package/dist/traits/search-controller.d.ts +26 -0
  519. package/dist/traits/search-controller.d.ts.map +1 -0
  520. package/dist/traits/selection-controller.d.ts +28 -0
  521. package/dist/traits/selection-controller.d.ts.map +1 -0
  522. package/dist/traits/sort-controller.d.ts +19 -0
  523. package/dist/traits/sort-controller.d.ts.map +1 -0
  524. package/dist/traits/swipe-controller.d.ts +24 -0
  525. package/dist/traits/swipe-controller.d.ts.map +1 -0
  526. package/dist/traits/toast-controller.d.ts +12 -0
  527. package/dist/traits/toast-controller.d.ts.map +1 -0
  528. package/dist/traits/validate-controller.d.ts +24 -0
  529. package/dist/traits/validate-controller.d.ts.map +1 -0
  530. package/dist/traits/virtual-scroll-controller.d.ts +19 -0
  531. package/dist/traits/virtual-scroll-controller.d.ts.map +1 -0
  532. package/dist/traits-entry.d.ts +15 -0
  533. package/dist/traits-entry.d.ts.map +1 -0
  534. package/dist/traits.js +4 -0
  535. package/dist/ui-icon-element.js +4405 -0
  536. package/dist/uid.js +147 -0
  537. package/package.json +86 -0
package/dist/foundation.css ADDED
@@ -0,0 +1,2003 @@
1
+ @layer colors, tokens, ui;
2
+
3
+ /* ================================================================
4
+ nonoun-css Design Tokens — Color System
5
+
6
+ Naming convention:
7
+ --name input (tunable) or public output token
8
+ --_name derived intermediate (internal, do not consume)
9
+
10
+ 11-step scale: 050 100 200 300 400 500 600 700 800 900 950
11
+ Anchor at 500 (peak chroma). Symmetric about anchor.
12
+ Lightness uses an internal 13-step ramp, skipping steps 1 and 13,
13
+ so 050 never reaches pure white and 950 never reaches pure black.
14
+ ================================================================ */
15
+
16
+ @layer colors {
17
+ :root {
18
+ color-scheme: light dark;
19
+
20
+ /* ── Environment parameters (9 knobs) ── */
21
+
22
+ --color-env-lightness-min: 0.1500;
23
+ --color-env-lightness-max: 1.0000;
24
+ --color-env-lightness-delta: 0.0150;
25
+
26
+ --color-env-chroma: 0.2000;
27
+ --color-env-chroma-k-muted: 0.1250;
28
+ --color-env-chroma-k-vivid: 1.0000;
29
+ --color-env-chroma-k-edge: 0.0500;
30
+
31
+ --color-env-alpha: 0.8500;
32
+ --color-env-alpha-delta: 0.0200;
33
+
34
+ /* ── Family definitions ── */
35
+
36
+ --color-env-hue-neutral: 230;
37
+ --color-env-chroma-neutral: 0.125;
38
+ --color-env-lightness-neutral: 0.50;
39
+
40
+ --color-env-hue-accent: 230;
41
+ --color-env-chroma-accent: 1.0;
42
+ --color-env-lightness-accent: 0.60;
43
+
44
+ --color-env-hue-info: 250;
45
+ --color-env-chroma-info: 0.60;
46
+ --color-env-lightness-info: 0.60;
47
+
48
+ --color-env-hue-success: 150;
49
+ --color-env-chroma-success: 0.75;
50
+ --color-env-lightness-success: 0.55;
51
+
52
+ --color-env-hue-warning: 80;
53
+ --color-env-chroma-warning: 0.95;
54
+ --color-env-lightness-warning: 0.75;
55
+
56
+ --color-env-hue-danger: 20;
57
+ --color-env-chroma-danger: 0.85;
58
+ --color-env-lightness-danger: 0.50;
59
+
60
+ /* ── Chroma interpolation coefficients (env-C baked in) ──
61
+ 6 coefficients: t-0 (edge) → t-5 (vivid), linear lerp.
62
+ Symmetric mapping:
63
+ 050,950 = t-0 100,900 = t-1 200,800 = t-2
64
+ 300,700 = t-3 400,600 = t-4 500 = t-5
65
+ */
66
+
67
+ --_C-t-0: calc(var(--color-env-chroma) * var(--color-env-chroma-k-edge));
68
+ --_C-t-1: calc(var(--color-env-chroma) * (4 / 5 * var(--color-env-chroma-k-edge) + 1 / 5 * var(--color-env-chroma-k-vivid)));
69
+ --_C-t-2: calc(var(--color-env-chroma) * (3 / 5 * var(--color-env-chroma-k-edge) + 2 / 5 * var(--color-env-chroma-k-vivid)));
70
+ --_C-t-3: calc(var(--color-env-chroma) * (2 / 5 * var(--color-env-chroma-k-edge) + 3 / 5 * var(--color-env-chroma-k-vivid)));
71
+ --_C-t-4: calc(var(--color-env-chroma) * (1 / 5 * var(--color-env-chroma-k-edge) + 4 / 5 * var(--color-env-chroma-k-vivid)));
72
+ --_C-t-5: calc(var(--color-env-chroma) * var(--color-env-chroma-k-vivid));
73
+
74
+ /* ── Computed chroma: muted (flat, for backgrounds) ── */
75
+
76
+ --_C-muted: calc(var(--color-env-chroma) * var(--color-env-chroma-k-muted));
77
+
78
+ --_C-neutral-muted: calc(var(--_C-muted) * var(--color-env-chroma-neutral));
79
+ --_C-accent-muted: calc(var(--_C-muted) * var(--color-env-chroma-accent));
80
+ --_C-info-muted: calc(var(--_C-muted) * var(--color-env-chroma-info));
81
+ --_C-success-muted: calc(var(--_C-muted) * var(--color-env-chroma-success));
82
+ --_C-warning-muted: calc(var(--_C-muted) * var(--color-env-chroma-warning));
83
+ --_C-danger-muted: calc(var(--_C-muted) * var(--color-env-chroma-danger));
84
+
85
+ /* ── Per-step chroma for solids (11 steps per family) ──
86
+ C(n) = C-t-{i} × {family}-chroma
87
+ Symmetric: 050,950=t-0 100,900=t-1 200,800=t-2 300,700=t-3 400,600=t-4 500=t-5
88
+ */
89
+
90
+ --_C-neutral-1: calc(var(--_C-t-0) * var(--color-env-chroma-neutral));
91
+ --_C-neutral-2: calc(var(--_C-t-1) * var(--color-env-chroma-neutral));
92
+ --_C-neutral-3: calc(var(--_C-t-2) * var(--color-env-chroma-neutral));
93
+ --_C-neutral-4: calc(var(--_C-t-3) * var(--color-env-chroma-neutral));
94
+ --_C-neutral-5: calc(var(--_C-t-4) * var(--color-env-chroma-neutral));
95
+ --_C-neutral-6: calc(var(--_C-t-5) * var(--color-env-chroma-neutral));
96
+ --_C-neutral-7: calc(var(--_C-t-4) * var(--color-env-chroma-neutral));
97
+ --_C-neutral-8: calc(var(--_C-t-3) * var(--color-env-chroma-neutral));
98
+ --_C-neutral-9: calc(var(--_C-t-2) * var(--color-env-chroma-neutral));
99
+ --_C-neutral-10: calc(var(--_C-t-1) * var(--color-env-chroma-neutral));
100
+ --_C-neutral-11: calc(var(--_C-t-0) * var(--color-env-chroma-neutral));
101
+
102
+ --_C-accent-1: calc(var(--_C-t-0) * var(--color-env-chroma-accent));
103
+ --_C-accent-2: calc(var(--_C-t-1) * var(--color-env-chroma-accent));
104
+ --_C-accent-3: calc(var(--_C-t-2) * var(--color-env-chroma-accent));
105
+ --_C-accent-4: calc(var(--_C-t-3) * var(--color-env-chroma-accent));
106
+ --_C-accent-5: calc(var(--_C-t-4) * var(--color-env-chroma-accent));
107
+ --_C-accent-6: calc(var(--_C-t-5) * var(--color-env-chroma-accent));
108
+ --_C-accent-7: calc(var(--_C-t-4) * var(--color-env-chroma-accent));
109
+ --_C-accent-8: calc(var(--_C-t-3) * var(--color-env-chroma-accent));
110
+ --_C-accent-9: calc(var(--_C-t-2) * var(--color-env-chroma-accent));
111
+ --_C-accent-10: calc(var(--_C-t-1) * var(--color-env-chroma-accent));
112
+ --_C-accent-11: calc(var(--_C-t-0) * var(--color-env-chroma-accent));
113
+
114
+ --_C-info-1: calc(var(--_C-t-0) * var(--color-env-chroma-info));
115
+ --_C-info-2: calc(var(--_C-t-1) * var(--color-env-chroma-info));
116
+ --_C-info-3: calc(var(--_C-t-2) * var(--color-env-chroma-info));
117
+ --_C-info-4: calc(var(--_C-t-3) * var(--color-env-chroma-info));
118
+ --_C-info-5: calc(var(--_C-t-4) * var(--color-env-chroma-info));
119
+ --_C-info-6: calc(var(--_C-t-5) * var(--color-env-chroma-info));
120
+ --_C-info-7: calc(var(--_C-t-4) * var(--color-env-chroma-info));
121
+ --_C-info-8: calc(var(--_C-t-3) * var(--color-env-chroma-info));
122
+ --_C-info-9: calc(var(--_C-t-2) * var(--color-env-chroma-info));
123
+ --_C-info-10: calc(var(--_C-t-1) * var(--color-env-chroma-info));
124
+ --_C-info-11: calc(var(--_C-t-0) * var(--color-env-chroma-info));
125
+
126
+ --_C-success-1: calc(var(--_C-t-0) * var(--color-env-chroma-success));
127
+ --_C-success-2: calc(var(--_C-t-1) * var(--color-env-chroma-success));
128
+ --_C-success-3: calc(var(--_C-t-2) * var(--color-env-chroma-success));
129
+ --_C-success-4: calc(var(--_C-t-3) * var(--color-env-chroma-success));
130
+ --_C-success-5: calc(var(--_C-t-4) * var(--color-env-chroma-success));
131
+ --_C-success-6: calc(var(--_C-t-5) * var(--color-env-chroma-success));
132
+ --_C-success-7: calc(var(--_C-t-4) * var(--color-env-chroma-success));
133
+ --_C-success-8: calc(var(--_C-t-3) * var(--color-env-chroma-success));
134
+ --_C-success-9: calc(var(--_C-t-2) * var(--color-env-chroma-success));
135
+ --_C-success-10: calc(var(--_C-t-1) * var(--color-env-chroma-success));
136
+ --_C-success-11: calc(var(--_C-t-0) * var(--color-env-chroma-success));
137
+
138
+ --_C-warning-1: calc(var(--_C-t-0) * var(--color-env-chroma-warning));
139
+ --_C-warning-2: calc(var(--_C-t-1) * var(--color-env-chroma-warning));
140
+ --_C-warning-3: calc(var(--_C-t-2) * var(--color-env-chroma-warning));
141
+ --_C-warning-4: calc(var(--_C-t-3) * var(--color-env-chroma-warning));
142
+ --_C-warning-5: calc(var(--_C-t-4) * var(--color-env-chroma-warning));
143
+ --_C-warning-6: calc(var(--_C-t-5) * var(--color-env-chroma-warning));
144
+ --_C-warning-7: calc(var(--_C-t-4) * var(--color-env-chroma-warning));
145
+ --_C-warning-8: calc(var(--_C-t-3) * var(--color-env-chroma-warning));
146
+ --_C-warning-9: calc(var(--_C-t-2) * var(--color-env-chroma-warning));
147
+ --_C-warning-10: calc(var(--_C-t-1) * var(--color-env-chroma-warning));
148
+ --_C-warning-11: calc(var(--_C-t-0) * var(--color-env-chroma-warning));
149
+
150
+ --_C-danger-1: calc(var(--_C-t-0) * var(--color-env-chroma-danger));
151
+ --_C-danger-2: calc(var(--_C-t-1) * var(--color-env-chroma-danger));
152
+ --_C-danger-3: calc(var(--_C-t-2) * var(--color-env-chroma-danger));
153
+ --_C-danger-4: calc(var(--_C-t-3) * var(--color-env-chroma-danger));
154
+ --_C-danger-5: calc(var(--_C-t-4) * var(--color-env-chroma-danger));
155
+ --_C-danger-6: calc(var(--_C-t-5) * var(--color-env-chroma-danger));
156
+ --_C-danger-7: calc(var(--_C-t-4) * var(--color-env-chroma-danger));
157
+ --_C-danger-8: calc(var(--_C-t-3) * var(--color-env-chroma-danger));
158
+ --_C-danger-9: calc(var(--_C-t-2) * var(--color-env-chroma-danger));
159
+ --_C-danger-10: calc(var(--_C-t-1) * var(--color-env-chroma-danger));
160
+ --_C-danger-11: calc(var(--_C-t-0) * var(--color-env-chroma-danger));
161
+
162
+ /* ── Solid lightness ramps (11 steps per family) ──
163
+ Internal 13-step ramp from L-max → lightness → L-min in 6 intervals per half.
164
+ 11 public steps map to internal steps 2–12 (skipping 1 and 13),
165
+ so 050 never reaches pure white and 950 never reaches pure black.
166
+ 050=step2 100=step3 200=step4 300=step5 400=step6 500=step7(anchor)
167
+ 600=step8 700=step9 800=step10 900=step11 950=step12
168
+ */
169
+
170
+ --_L-neutral-1: calc(var(--color-env-lightness-max) - 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral)));
171
+ --_L-neutral-2: calc(var(--color-env-lightness-max) - 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral)));
172
+ --_L-neutral-3: calc(var(--color-env-lightness-max) - 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral)));
173
+ --_L-neutral-4: calc(var(--color-env-lightness-max) - 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral)));
174
+ --_L-neutral-5: calc(var(--color-env-lightness-max) - 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral)));
175
+ --_L-neutral-6: var(--color-env-lightness-neutral);
176
+ --_L-neutral-7: calc(var(--color-env-lightness-neutral) - 1 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min)));
177
+ --_L-neutral-8: calc(var(--color-env-lightness-neutral) - 2 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min)));
178
+ --_L-neutral-9: calc(var(--color-env-lightness-neutral) - 3 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min)));
179
+ --_L-neutral-10: calc(var(--color-env-lightness-neutral) - 4 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min)));
180
+ --_L-neutral-11: calc(var(--color-env-lightness-neutral) - 5 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min)));
181
+
182
+ --_L-accent-1: calc(var(--color-env-lightness-max) - 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent)));
183
+ --_L-accent-2: calc(var(--color-env-lightness-max) - 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent)));
184
+ --_L-accent-3: calc(var(--color-env-lightness-max) - 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent)));
185
+ --_L-accent-4: calc(var(--color-env-lightness-max) - 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent)));
186
+ --_L-accent-5: calc(var(--color-env-lightness-max) - 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent)));
187
+ --_L-accent-6: var(--color-env-lightness-accent);
188
+ --_L-accent-7: calc(var(--color-env-lightness-accent) - 1 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min)));
189
+ --_L-accent-8: calc(var(--color-env-lightness-accent) - 2 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min)));
190
+ --_L-accent-9: calc(var(--color-env-lightness-accent) - 3 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min)));
191
+ --_L-accent-10: calc(var(--color-env-lightness-accent) - 4 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min)));
192
+ --_L-accent-11: calc(var(--color-env-lightness-accent) - 5 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min)));
193
+
194
+ --_L-info-1: calc(var(--color-env-lightness-max) - 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info)));
195
+ --_L-info-2: calc(var(--color-env-lightness-max) - 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info)));
196
+ --_L-info-3: calc(var(--color-env-lightness-max) - 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info)));
197
+ --_L-info-4: calc(var(--color-env-lightness-max) - 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info)));
198
+ --_L-info-5: calc(var(--color-env-lightness-max) - 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info)));
199
+ --_L-info-6: var(--color-env-lightness-info);
200
+ --_L-info-7: calc(var(--color-env-lightness-info) - 1 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min)));
201
+ --_L-info-8: calc(var(--color-env-lightness-info) - 2 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min)));
202
+ --_L-info-9: calc(var(--color-env-lightness-info) - 3 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min)));
203
+ --_L-info-10: calc(var(--color-env-lightness-info) - 4 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min)));
204
+ --_L-info-11: calc(var(--color-env-lightness-info) - 5 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min)));
205
+
206
+ --_L-success-1: calc(var(--color-env-lightness-max) - 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success)));
207
+ --_L-success-2: calc(var(--color-env-lightness-max) - 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success)));
208
+ --_L-success-3: calc(var(--color-env-lightness-max) - 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success)));
209
+ --_L-success-4: calc(var(--color-env-lightness-max) - 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success)));
210
+ --_L-success-5: calc(var(--color-env-lightness-max) - 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success)));
211
+ --_L-success-6: var(--color-env-lightness-success);
212
+ --_L-success-7: calc(var(--color-env-lightness-success) - 1 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min)));
213
+ --_L-success-8: calc(var(--color-env-lightness-success) - 2 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min)));
214
+ --_L-success-9: calc(var(--color-env-lightness-success) - 3 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min)));
215
+ --_L-success-10: calc(var(--color-env-lightness-success) - 4 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min)));
216
+ --_L-success-11: calc(var(--color-env-lightness-success) - 5 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min)));
217
+
218
+ --_L-warning-1: calc(var(--color-env-lightness-max) - 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning)));
219
+ --_L-warning-2: calc(var(--color-env-lightness-max) - 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning)));
220
+ --_L-warning-3: calc(var(--color-env-lightness-max) - 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning)));
221
+ --_L-warning-4: calc(var(--color-env-lightness-max) - 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning)));
222
+ --_L-warning-5: calc(var(--color-env-lightness-max) - 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning)));
223
+ --_L-warning-6: var(--color-env-lightness-warning);
224
+ --_L-warning-7: calc(var(--color-env-lightness-warning) - 1 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min)));
225
+ --_L-warning-8: calc(var(--color-env-lightness-warning) - 2 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min)));
226
+ --_L-warning-9: calc(var(--color-env-lightness-warning) - 3 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min)));
227
+ --_L-warning-10: calc(var(--color-env-lightness-warning) - 4 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min)));
228
+ --_L-warning-11: calc(var(--color-env-lightness-warning) - 5 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min)));
229
+
230
+ --_L-danger-1: calc(var(--color-env-lightness-max) - 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger)));
231
+ --_L-danger-2: calc(var(--color-env-lightness-max) - 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger)));
232
+ --_L-danger-3: calc(var(--color-env-lightness-max) - 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger)));
233
+ --_L-danger-4: calc(var(--color-env-lightness-max) - 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger)));
234
+ --_L-danger-5: calc(var(--color-env-lightness-max) - 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger)));
235
+ --_L-danger-6: var(--color-env-lightness-danger);
236
+ --_L-danger-7: calc(var(--color-env-lightness-danger) - 1 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min)));
237
+ --_L-danger-8: calc(var(--color-env-lightness-danger) - 2 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min)));
238
+ --_L-danger-9: calc(var(--color-env-lightness-danger) - 3 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min)));
239
+ --_L-danger-10: calc(var(--color-env-lightness-danger) - 4 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min)));
240
+ --_L-danger-11: calc(var(--color-env-lightness-danger) - 5 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min)));
241
+
242
+ /* ── Background lightness ramps (shared across families) ── */
243
+
244
+ --_L-light-1: var(--color-env-lightness-max);
245
+ --_L-light-2: calc(var(--color-env-lightness-max) - 1 * var(--color-env-lightness-delta));
246
+ --_L-light-3: calc(var(--color-env-lightness-max) - 2 * var(--color-env-lightness-delta));
247
+ --_L-light-4: calc(var(--color-env-lightness-max) - 3 * var(--color-env-lightness-delta));
248
+ --_L-light-5: calc(var(--color-env-lightness-max) - 4 * var(--color-env-lightness-delta));
249
+ --_L-light-6: calc(var(--color-env-lightness-max) - 5 * var(--color-env-lightness-delta));
250
+ --_L-light-7: calc(var(--color-env-lightness-max) - 6 * var(--color-env-lightness-delta));
251
+
252
+ --_L-dark-1: var(--color-env-lightness-min);
253
+ --_L-dark-2: calc(var(--color-env-lightness-min) + 1 * var(--color-env-lightness-delta));
254
+ --_L-dark-3: calc(var(--color-env-lightness-min) + 2 * var(--color-env-lightness-delta));
255
+ --_L-dark-4: calc(var(--color-env-lightness-min) + 3 * var(--color-env-lightness-delta));
256
+ --_L-dark-5: calc(var(--color-env-lightness-min) + 4 * var(--color-env-lightness-delta));
257
+ --_L-dark-6: calc(var(--color-env-lightness-min) + 5 * var(--color-env-lightness-delta));
258
+ --_L-dark-7: calc(var(--color-env-lightness-min) + 6 * var(--color-env-lightness-delta));
259
+
260
+ /* ── Color ramp — Raw (1–11, mode-independent) ──
261
+ 1 = L-max (lightest), 6 = anchor (peak chroma), 11 = L-min (darkest).
262
+ Chroma lerps C-k-edge → C-k-vivid → C-k-edge (peak at anchor).
263
+ These are the raw oklch values; use the semantic 050–950 tokens below for light-dark awareness.
264
+ */
265
+
266
+ --neutral-1: oklch(var(--_L-neutral-1) var(--_C-neutral-1) var(--color-env-hue-neutral));
267
+ --neutral-2: oklch(var(--_L-neutral-2) var(--_C-neutral-2) var(--color-env-hue-neutral));
268
+ --neutral-3: oklch(var(--_L-neutral-3) var(--_C-neutral-3) var(--color-env-hue-neutral));
269
+ --neutral-4: oklch(var(--_L-neutral-4) var(--_C-neutral-4) var(--color-env-hue-neutral));
270
+ --neutral-5: oklch(var(--_L-neutral-5) var(--_C-neutral-5) var(--color-env-hue-neutral));
271
+ --neutral-6: oklch(var(--_L-neutral-6) var(--_C-neutral-6) var(--color-env-hue-neutral));
272
+ --neutral-7: oklch(var(--_L-neutral-7) var(--_C-neutral-7) var(--color-env-hue-neutral));
273
+ --neutral-8: oklch(var(--_L-neutral-8) var(--_C-neutral-8) var(--color-env-hue-neutral));
274
+ --neutral-9: oklch(var(--_L-neutral-9) var(--_C-neutral-9) var(--color-env-hue-neutral));
275
+ --neutral-10: oklch(var(--_L-neutral-10) var(--_C-neutral-10) var(--color-env-hue-neutral));
276
+ --neutral-11: oklch(var(--_L-neutral-11) var(--_C-neutral-11) var(--color-env-hue-neutral));
277
+
278
+ --accent-1: oklch(var(--_L-accent-1) var(--_C-accent-1) var(--color-env-hue-accent));
279
+ --accent-2: oklch(var(--_L-accent-2) var(--_C-accent-2) var(--color-env-hue-accent));
280
+ --accent-3: oklch(var(--_L-accent-3) var(--_C-accent-3) var(--color-env-hue-accent));
281
+ --accent-4: oklch(var(--_L-accent-4) var(--_C-accent-4) var(--color-env-hue-accent));
282
+ --accent-5: oklch(var(--_L-accent-5) var(--_C-accent-5) var(--color-env-hue-accent));
283
+ --accent-6: oklch(var(--_L-accent-6) var(--_C-accent-6) var(--color-env-hue-accent));
284
+ --accent-7: oklch(var(--_L-accent-7) var(--_C-accent-7) var(--color-env-hue-accent));
285
+ --accent-8: oklch(var(--_L-accent-8) var(--_C-accent-8) var(--color-env-hue-accent));
286
+ --accent-9: oklch(var(--_L-accent-9) var(--_C-accent-9) var(--color-env-hue-accent));
287
+ --accent-10: oklch(var(--_L-accent-10) var(--_C-accent-10) var(--color-env-hue-accent));
288
+ --accent-11: oklch(var(--_L-accent-11) var(--_C-accent-11) var(--color-env-hue-accent));
289
+
290
+ --info-1: oklch(var(--_L-info-1) var(--_C-info-1) var(--color-env-hue-info));
291
+ --info-2: oklch(var(--_L-info-2) var(--_C-info-2) var(--color-env-hue-info));
292
+ --info-3: oklch(var(--_L-info-3) var(--_C-info-3) var(--color-env-hue-info));
293
+ --info-4: oklch(var(--_L-info-4) var(--_C-info-4) var(--color-env-hue-info));
294
+ --info-5: oklch(var(--_L-info-5) var(--_C-info-5) var(--color-env-hue-info));
295
+ --info-6: oklch(var(--_L-info-6) var(--_C-info-6) var(--color-env-hue-info));
296
+ --info-7: oklch(var(--_L-info-7) var(--_C-info-7) var(--color-env-hue-info));
297
+ --info-8: oklch(var(--_L-info-8) var(--_C-info-8) var(--color-env-hue-info));
298
+ --info-9: oklch(var(--_L-info-9) var(--_C-info-9) var(--color-env-hue-info));
299
+ --info-10: oklch(var(--_L-info-10) var(--_C-info-10) var(--color-env-hue-info));
300
+ --info-11: oklch(var(--_L-info-11) var(--_C-info-11) var(--color-env-hue-info));
301
+
302
+ --success-1: oklch(var(--_L-success-1) var(--_C-success-1) var(--color-env-hue-success));
303
+ --success-2: oklch(var(--_L-success-2) var(--_C-success-2) var(--color-env-hue-success));
304
+ --success-3: oklch(var(--_L-success-3) var(--_C-success-3) var(--color-env-hue-success));
305
+ --success-4: oklch(var(--_L-success-4) var(--_C-success-4) var(--color-env-hue-success));
306
+ --success-5: oklch(var(--_L-success-5) var(--_C-success-5) var(--color-env-hue-success));
307
+ --success-6: oklch(var(--_L-success-6) var(--_C-success-6) var(--color-env-hue-success));
308
+ --success-7: oklch(var(--_L-success-7) var(--_C-success-7) var(--color-env-hue-success));
309
+ --success-8: oklch(var(--_L-success-8) var(--_C-success-8) var(--color-env-hue-success));
310
+ --success-9: oklch(var(--_L-success-9) var(--_C-success-9) var(--color-env-hue-success));
311
+ --success-10: oklch(var(--_L-success-10) var(--_C-success-10) var(--color-env-hue-success));
312
+ --success-11: oklch(var(--_L-success-11) var(--_C-success-11) var(--color-env-hue-success));
313
+
314
+ --warning-1: oklch(var(--_L-warning-1) var(--_C-warning-1) var(--color-env-hue-warning));
315
+ --warning-2: oklch(var(--_L-warning-2) var(--_C-warning-2) var(--color-env-hue-warning));
316
+ --warning-3: oklch(var(--_L-warning-3) var(--_C-warning-3) var(--color-env-hue-warning));
317
+ --warning-4: oklch(var(--_L-warning-4) var(--_C-warning-4) var(--color-env-hue-warning));
318
+ --warning-5: oklch(var(--_L-warning-5) var(--_C-warning-5) var(--color-env-hue-warning));
319
+ --warning-6: oklch(var(--_L-warning-6) var(--_C-warning-6) var(--color-env-hue-warning));
320
+ --warning-7: oklch(var(--_L-warning-7) var(--_C-warning-7) var(--color-env-hue-warning));
321
+ --warning-8: oklch(var(--_L-warning-8) var(--_C-warning-8) var(--color-env-hue-warning));
322
+ --warning-9: oklch(var(--_L-warning-9) var(--_C-warning-9) var(--color-env-hue-warning));
323
+ --warning-10: oklch(var(--_L-warning-10) var(--_C-warning-10) var(--color-env-hue-warning));
324
+ --warning-11: oklch(var(--_L-warning-11) var(--_C-warning-11) var(--color-env-hue-warning));
325
+
326
+ --danger-1: oklch(var(--_L-danger-1) var(--_C-danger-1) var(--color-env-hue-danger));
327
+ --danger-2: oklch(var(--_L-danger-2) var(--_C-danger-2) var(--color-env-hue-danger));
328
+ --danger-3: oklch(var(--_L-danger-3) var(--_C-danger-3) var(--color-env-hue-danger));
329
+ --danger-4: oklch(var(--_L-danger-4) var(--_C-danger-4) var(--color-env-hue-danger));
330
+ --danger-5: oklch(var(--_L-danger-5) var(--_C-danger-5) var(--color-env-hue-danger));
331
+ --danger-6: oklch(var(--_L-danger-6) var(--_C-danger-6) var(--color-env-hue-danger));
332
+ --danger-7: oklch(var(--_L-danger-7) var(--_C-danger-7) var(--color-env-hue-danger));
333
+ --danger-8: oklch(var(--_L-danger-8) var(--_C-danger-8) var(--color-env-hue-danger));
334
+ --danger-9: oklch(var(--_L-danger-9) var(--_C-danger-9) var(--color-env-hue-danger));
335
+ --danger-10: oklch(var(--_L-danger-10) var(--_C-danger-10) var(--color-env-hue-danger));
336
+ --danger-11: oklch(var(--_L-danger-11) var(--_C-danger-11) var(--color-env-hue-danger));
337
+
338
+ /* ── Color ramp — Semantic (light-dark aware) ──
339
+ 050 = lightest in light mode / darkest in dark mode.
340
+ 950 = darkest in light mode / lightest in dark mode.
341
+ 500 = anchor (same raw tone in both modes).
342
+ */
343
+
344
+ --neutral-050: light-dark(var(--neutral-1), var(--neutral-11));
345
+ --neutral-100: light-dark(var(--neutral-2), var(--neutral-10));
346
+ --neutral-200: light-dark(var(--neutral-3), var(--neutral-9));
347
+ --neutral-300: light-dark(var(--neutral-4), var(--neutral-8));
348
+ --neutral-400: light-dark(var(--neutral-5), var(--neutral-7));
349
+ --neutral-500: light-dark(var(--neutral-6), var(--neutral-6));
350
+ --neutral-600: light-dark(var(--neutral-7), var(--neutral-5));
351
+ --neutral-700: light-dark(var(--neutral-8), var(--neutral-4));
352
+ --neutral-800: light-dark(var(--neutral-9), var(--neutral-3));
353
+ --neutral-900: light-dark(var(--neutral-10), var(--neutral-2));
354
+ --neutral-950: light-dark(var(--neutral-11), var(--neutral-1));
355
+
356
+ --accent-050: light-dark(var(--accent-1), var(--accent-11));
357
+ --accent-100: light-dark(var(--accent-2), var(--accent-10));
358
+ --accent-200: light-dark(var(--accent-3), var(--accent-9));
359
+ --accent-300: light-dark(var(--accent-4), var(--accent-8));
360
+ --accent-400: light-dark(var(--accent-5), var(--accent-7));
361
+ --accent-500: light-dark(var(--accent-6), var(--accent-6));
362
+ --accent-600: light-dark(var(--accent-7), var(--accent-5));
363
+ --accent-700: light-dark(var(--accent-8), var(--accent-4));
364
+ --accent-800: light-dark(var(--accent-9), var(--accent-3));
365
+ --accent-900: light-dark(var(--accent-10), var(--accent-2));
366
+ --accent-950: light-dark(var(--accent-11), var(--accent-1));
367
+
368
+ --info-050: light-dark(var(--info-1), var(--info-11));
369
+ --info-100: light-dark(var(--info-2), var(--info-10));
370
+ --info-200: light-dark(var(--info-3), var(--info-9));
371
+ --info-300: light-dark(var(--info-4), var(--info-8));
372
+ --info-400: light-dark(var(--info-5), var(--info-7));
373
+ --info-500: light-dark(var(--info-6), var(--info-6));
374
+ --info-600: light-dark(var(--info-7), var(--info-5));
375
+ --info-700: light-dark(var(--info-8), var(--info-4));
376
+ --info-800: light-dark(var(--info-9), var(--info-3));
377
+ --info-900: light-dark(var(--info-10), var(--info-2));
378
+ --info-950: light-dark(var(--info-11), var(--info-1));
379
+
380
+ --success-050: light-dark(var(--success-1), var(--success-11));
381
+ --success-100: light-dark(var(--success-2), var(--success-10));
382
+ --success-200: light-dark(var(--success-3), var(--success-9));
383
+ --success-300: light-dark(var(--success-4), var(--success-8));
384
+ --success-400: light-dark(var(--success-5), var(--success-7));
385
+ --success-500: light-dark(var(--success-6), var(--success-6));
386
+ --success-600: light-dark(var(--success-7), var(--success-5));
387
+ --success-700: light-dark(var(--success-8), var(--success-4));
388
+ --success-800: light-dark(var(--success-9), var(--success-3));
389
+ --success-900: light-dark(var(--success-10), var(--success-2));
390
+ --success-950: light-dark(var(--success-11), var(--success-1));
391
+
392
+ --warning-050: light-dark(var(--warning-1), var(--warning-11));
393
+ --warning-100: light-dark(var(--warning-2), var(--warning-10));
394
+ --warning-200: light-dark(var(--warning-3), var(--warning-9));
395
+ --warning-300: light-dark(var(--warning-4), var(--warning-8));
396
+ --warning-400: light-dark(var(--warning-5), var(--warning-7));
397
+ --warning-500: light-dark(var(--warning-6), var(--warning-6));
398
+ --warning-600: light-dark(var(--warning-7), var(--warning-5));
399
+ --warning-700: light-dark(var(--warning-8), var(--warning-4));
400
+ --warning-800: light-dark(var(--warning-9), var(--warning-3));
401
+ --warning-900: light-dark(var(--warning-10), var(--warning-2));
402
+ --warning-950: light-dark(var(--warning-11), var(--warning-1));
403
+
404
+ --danger-050: light-dark(var(--danger-1), var(--danger-11));
405
+ --danger-100: light-dark(var(--danger-2), var(--danger-10));
406
+ --danger-200: light-dark(var(--danger-3), var(--danger-9));
407
+ --danger-300: light-dark(var(--danger-4), var(--danger-8));
408
+ --danger-400: light-dark(var(--danger-5), var(--danger-7));
409
+ --danger-500: light-dark(var(--danger-6), var(--danger-6));
410
+ --danger-600: light-dark(var(--danger-7), var(--danger-5));
411
+ --danger-700: light-dark(var(--danger-8), var(--danger-4));
412
+ --danger-800: light-dark(var(--danger-9), var(--danger-3));
413
+ --danger-900: light-dark(var(--danger-10), var(--danger-2));
414
+ --danger-950: light-dark(var(--danger-11), var(--danger-1));
415
+
416
+ /* ── Anchor aliases (bare name = step 500) ── */
417
+
418
+ --neutral: var(--neutral-500);
419
+ --accent: var(--accent-500);
420
+ --info: var(--info-500);
421
+ --success: var(--success-500);
422
+ --warning: var(--warning-500);
423
+ --danger: var(--danger-500);
424
+
425
+ /* ── Scrim ramp — Raw (1–11, mode-independent, alpha = env-A) ──
426
+ Same L/C/H as solid raw ramp, at env-A opacity.
427
+ */
428
+
429
+ --neutral-1-scrim: oklch(var(--_L-neutral-1) var(--_C-neutral-1) var(--color-env-hue-neutral) / var(--color-env-alpha));
430
+ --neutral-2-scrim: oklch(var(--_L-neutral-2) var(--_C-neutral-2) var(--color-env-hue-neutral) / var(--color-env-alpha));
431
+ --neutral-3-scrim: oklch(var(--_L-neutral-3) var(--_C-neutral-3) var(--color-env-hue-neutral) / var(--color-env-alpha));
432
+ --neutral-4-scrim: oklch(var(--_L-neutral-4) var(--_C-neutral-4) var(--color-env-hue-neutral) / var(--color-env-alpha));
433
+ --neutral-5-scrim: oklch(var(--_L-neutral-5) var(--_C-neutral-5) var(--color-env-hue-neutral) / var(--color-env-alpha));
434
+ --neutral-6-scrim: oklch(var(--_L-neutral-6) var(--_C-neutral-6) var(--color-env-hue-neutral) / var(--color-env-alpha));
435
+ --neutral-7-scrim: oklch(var(--_L-neutral-7) var(--_C-neutral-7) var(--color-env-hue-neutral) / var(--color-env-alpha));
436
+ --neutral-8-scrim: oklch(var(--_L-neutral-8) var(--_C-neutral-8) var(--color-env-hue-neutral) / var(--color-env-alpha));
437
+ --neutral-9-scrim: oklch(var(--_L-neutral-9) var(--_C-neutral-9) var(--color-env-hue-neutral) / var(--color-env-alpha));
438
+ --neutral-10-scrim: oklch(var(--_L-neutral-10) var(--_C-neutral-10) var(--color-env-hue-neutral) / var(--color-env-alpha));
439
+ --neutral-11-scrim: oklch(var(--_L-neutral-11) var(--_C-neutral-11) var(--color-env-hue-neutral) / var(--color-env-alpha));
440
+
441
+ --accent-1-scrim: oklch(var(--_L-accent-1) var(--_C-accent-1) var(--color-env-hue-accent) / var(--color-env-alpha));
442
+ --accent-2-scrim: oklch(var(--_L-accent-2) var(--_C-accent-2) var(--color-env-hue-accent) / var(--color-env-alpha));
443
+ --accent-3-scrim: oklch(var(--_L-accent-3) var(--_C-accent-3) var(--color-env-hue-accent) / var(--color-env-alpha));
444
+ --accent-4-scrim: oklch(var(--_L-accent-4) var(--_C-accent-4) var(--color-env-hue-accent) / var(--color-env-alpha));
445
+ --accent-5-scrim: oklch(var(--_L-accent-5) var(--_C-accent-5) var(--color-env-hue-accent) / var(--color-env-alpha));
446
+ --accent-6-scrim: oklch(var(--_L-accent-6) var(--_C-accent-6) var(--color-env-hue-accent) / var(--color-env-alpha));
447
+ --accent-7-scrim: oklch(var(--_L-accent-7) var(--_C-accent-7) var(--color-env-hue-accent) / var(--color-env-alpha));
448
+ --accent-8-scrim: oklch(var(--_L-accent-8) var(--_C-accent-8) var(--color-env-hue-accent) / var(--color-env-alpha));
449
+ --accent-9-scrim: oklch(var(--_L-accent-9) var(--_C-accent-9) var(--color-env-hue-accent) / var(--color-env-alpha));
450
+ --accent-10-scrim: oklch(var(--_L-accent-10) var(--_C-accent-10) var(--color-env-hue-accent) / var(--color-env-alpha));
451
+ --accent-11-scrim: oklch(var(--_L-accent-11) var(--_C-accent-11) var(--color-env-hue-accent) / var(--color-env-alpha));
452
+
453
+ --info-1-scrim: oklch(var(--_L-info-1) var(--_C-info-1) var(--color-env-hue-info) / var(--color-env-alpha));
454
+ --info-2-scrim: oklch(var(--_L-info-2) var(--_C-info-2) var(--color-env-hue-info) / var(--color-env-alpha));
455
+ --info-3-scrim: oklch(var(--_L-info-3) var(--_C-info-3) var(--color-env-hue-info) / var(--color-env-alpha));
456
+ --info-4-scrim: oklch(var(--_L-info-4) var(--_C-info-4) var(--color-env-hue-info) / var(--color-env-alpha));
457
+ --info-5-scrim: oklch(var(--_L-info-5) var(--_C-info-5) var(--color-env-hue-info) / var(--color-env-alpha));
458
+ --info-6-scrim: oklch(var(--_L-info-6) var(--_C-info-6) var(--color-env-hue-info) / var(--color-env-alpha));
459
+ --info-7-scrim: oklch(var(--_L-info-7) var(--_C-info-7) var(--color-env-hue-info) / var(--color-env-alpha));
460
+ --info-8-scrim: oklch(var(--_L-info-8) var(--_C-info-8) var(--color-env-hue-info) / var(--color-env-alpha));
461
+ --info-9-scrim: oklch(var(--_L-info-9) var(--_C-info-9) var(--color-env-hue-info) / var(--color-env-alpha));
462
+ --info-10-scrim: oklch(var(--_L-info-10) var(--_C-info-10) var(--color-env-hue-info) / var(--color-env-alpha));
463
+ --info-11-scrim: oklch(var(--_L-info-11) var(--_C-info-11) var(--color-env-hue-info) / var(--color-env-alpha));
464
+
465
+ --success-1-scrim: oklch(var(--_L-success-1) var(--_C-success-1) var(--color-env-hue-success) / var(--color-env-alpha));
466
+ --success-2-scrim: oklch(var(--_L-success-2) var(--_C-success-2) var(--color-env-hue-success) / var(--color-env-alpha));
467
+ --success-3-scrim: oklch(var(--_L-success-3) var(--_C-success-3) var(--color-env-hue-success) / var(--color-env-alpha));
468
+ --success-4-scrim: oklch(var(--_L-success-4) var(--_C-success-4) var(--color-env-hue-success) / var(--color-env-alpha));
469
+ --success-5-scrim: oklch(var(--_L-success-5) var(--_C-success-5) var(--color-env-hue-success) / var(--color-env-alpha));
470
+ --success-6-scrim: oklch(var(--_L-success-6) var(--_C-success-6) var(--color-env-hue-success) / var(--color-env-alpha));
471
+ --success-7-scrim: oklch(var(--_L-success-7) var(--_C-success-7) var(--color-env-hue-success) / var(--color-env-alpha));
472
+ --success-8-scrim: oklch(var(--_L-success-8) var(--_C-success-8) var(--color-env-hue-success) / var(--color-env-alpha));
473
+ --success-9-scrim: oklch(var(--_L-success-9) var(--_C-success-9) var(--color-env-hue-success) / var(--color-env-alpha));
474
+ --success-10-scrim: oklch(var(--_L-success-10) var(--_C-success-10) var(--color-env-hue-success) / var(--color-env-alpha));
475
+ --success-11-scrim: oklch(var(--_L-success-11) var(--_C-success-11) var(--color-env-hue-success) / var(--color-env-alpha));
476
+
477
+ --warning-1-scrim: oklch(var(--_L-warning-1) var(--_C-warning-1) var(--color-env-hue-warning) / var(--color-env-alpha));
478
+ --warning-2-scrim: oklch(var(--_L-warning-2) var(--_C-warning-2) var(--color-env-hue-warning) / var(--color-env-alpha));
479
+ --warning-3-scrim: oklch(var(--_L-warning-3) var(--_C-warning-3) var(--color-env-hue-warning) / var(--color-env-alpha));
480
+ --warning-4-scrim: oklch(var(--_L-warning-4) var(--_C-warning-4) var(--color-env-hue-warning) / var(--color-env-alpha));
481
+ --warning-5-scrim: oklch(var(--_L-warning-5) var(--_C-warning-5) var(--color-env-hue-warning) / var(--color-env-alpha));
482
+ --warning-6-scrim: oklch(var(--_L-warning-6) var(--_C-warning-6) var(--color-env-hue-warning) / var(--color-env-alpha));
483
+ --warning-7-scrim: oklch(var(--_L-warning-7) var(--_C-warning-7) var(--color-env-hue-warning) / var(--color-env-alpha));
484
+ --warning-8-scrim: oklch(var(--_L-warning-8) var(--_C-warning-8) var(--color-env-hue-warning) / var(--color-env-alpha));
485
+ --warning-9-scrim: oklch(var(--_L-warning-9) var(--_C-warning-9) var(--color-env-hue-warning) / var(--color-env-alpha));
486
+ --warning-10-scrim: oklch(var(--_L-warning-10) var(--_C-warning-10) var(--color-env-hue-warning) / var(--color-env-alpha));
487
+ --warning-11-scrim: oklch(var(--_L-warning-11) var(--_C-warning-11) var(--color-env-hue-warning) / var(--color-env-alpha));
488
+
489
+ --danger-1-scrim: oklch(var(--_L-danger-1) var(--_C-danger-1) var(--color-env-hue-danger) / var(--color-env-alpha));
490
+ --danger-2-scrim: oklch(var(--_L-danger-2) var(--_C-danger-2) var(--color-env-hue-danger) / var(--color-env-alpha));
491
+ --danger-3-scrim: oklch(var(--_L-danger-3) var(--_C-danger-3) var(--color-env-hue-danger) / var(--color-env-alpha));
492
+ --danger-4-scrim: oklch(var(--_L-danger-4) var(--_C-danger-4) var(--color-env-hue-danger) / var(--color-env-alpha));
493
+ --danger-5-scrim: oklch(var(--_L-danger-5) var(--_C-danger-5) var(--color-env-hue-danger) / var(--color-env-alpha));
494
+ --danger-6-scrim: oklch(var(--_L-danger-6) var(--_C-danger-6) var(--color-env-hue-danger) / var(--color-env-alpha));
495
+ --danger-7-scrim: oklch(var(--_L-danger-7) var(--_C-danger-7) var(--color-env-hue-danger) / var(--color-env-alpha));
496
+ --danger-8-scrim: oklch(var(--_L-danger-8) var(--_C-danger-8) var(--color-env-hue-danger) / var(--color-env-alpha));
497
+ --danger-9-scrim: oklch(var(--_L-danger-9) var(--_C-danger-9) var(--color-env-hue-danger) / var(--color-env-alpha));
498
+ --danger-10-scrim: oklch(var(--_L-danger-10) var(--_C-danger-10) var(--color-env-hue-danger) / var(--color-env-alpha));
499
+ --danger-11-scrim: oklch(var(--_L-danger-11) var(--_C-danger-11) var(--color-env-hue-danger) / var(--color-env-alpha));
500
+
501
+ /* ── Scrim ramp — Semantic (light-dark aware) ── */
502
+
503
+ --neutral-050-scrim: light-dark(var(--neutral-1-scrim), var(--neutral-11-scrim));
504
+ --neutral-100-scrim: light-dark(var(--neutral-2-scrim), var(--neutral-10-scrim));
505
+ --neutral-200-scrim: light-dark(var(--neutral-3-scrim), var(--neutral-9-scrim));
506
+ --neutral-300-scrim: light-dark(var(--neutral-4-scrim), var(--neutral-8-scrim));
507
+ --neutral-400-scrim: light-dark(var(--neutral-5-scrim), var(--neutral-7-scrim));
508
+ --neutral-500-scrim: light-dark(var(--neutral-6-scrim), var(--neutral-6-scrim));
509
+ --neutral-600-scrim: light-dark(var(--neutral-7-scrim), var(--neutral-5-scrim));
510
+ --neutral-700-scrim: light-dark(var(--neutral-8-scrim), var(--neutral-4-scrim));
511
+ --neutral-800-scrim: light-dark(var(--neutral-9-scrim), var(--neutral-3-scrim));
512
+ --neutral-900-scrim: light-dark(var(--neutral-10-scrim), var(--neutral-2-scrim));
513
+ --neutral-950-scrim: light-dark(var(--neutral-11-scrim), var(--neutral-1-scrim));
514
+
515
+ --accent-050-scrim: light-dark(var(--accent-1-scrim), var(--accent-11-scrim));
516
+ --accent-100-scrim: light-dark(var(--accent-2-scrim), var(--accent-10-scrim));
517
+ --accent-200-scrim: light-dark(var(--accent-3-scrim), var(--accent-9-scrim));
518
+ --accent-300-scrim: light-dark(var(--accent-4-scrim), var(--accent-8-scrim));
519
+ --accent-400-scrim: light-dark(var(--accent-5-scrim), var(--accent-7-scrim));
520
+ --accent-500-scrim: light-dark(var(--accent-6-scrim), var(--accent-6-scrim));
521
+ --accent-600-scrim: light-dark(var(--accent-7-scrim), var(--accent-5-scrim));
522
+ --accent-700-scrim: light-dark(var(--accent-8-scrim), var(--accent-4-scrim));
523
+ --accent-800-scrim: light-dark(var(--accent-9-scrim), var(--accent-3-scrim));
524
+ --accent-900-scrim: light-dark(var(--accent-10-scrim), var(--accent-2-scrim));
525
+ --accent-950-scrim: light-dark(var(--accent-11-scrim), var(--accent-1-scrim));
526
+
527
+ --info-050-scrim: light-dark(var(--info-1-scrim), var(--info-11-scrim));
528
+ --info-100-scrim: light-dark(var(--info-2-scrim), var(--info-10-scrim));
529
+ --info-200-scrim: light-dark(var(--info-3-scrim), var(--info-9-scrim));
530
+ --info-300-scrim: light-dark(var(--info-4-scrim), var(--info-8-scrim));
531
+ --info-400-scrim: light-dark(var(--info-5-scrim), var(--info-7-scrim));
532
+ --info-500-scrim: light-dark(var(--info-6-scrim), var(--info-6-scrim));
533
+ --info-600-scrim: light-dark(var(--info-7-scrim), var(--info-5-scrim));
534
+ --info-700-scrim: light-dark(var(--info-8-scrim), var(--info-4-scrim));
535
+ --info-800-scrim: light-dark(var(--info-9-scrim), var(--info-3-scrim));
536
+ --info-900-scrim: light-dark(var(--info-10-scrim), var(--info-2-scrim));
537
+ --info-950-scrim: light-dark(var(--info-11-scrim), var(--info-1-scrim));
538
+
539
+ --success-050-scrim: light-dark(var(--success-1-scrim), var(--success-11-scrim));
540
+ --success-100-scrim: light-dark(var(--success-2-scrim), var(--success-10-scrim));
541
+ --success-200-scrim: light-dark(var(--success-3-scrim), var(--success-9-scrim));
542
+ --success-300-scrim: light-dark(var(--success-4-scrim), var(--success-8-scrim));
543
+ --success-400-scrim: light-dark(var(--success-5-scrim), var(--success-7-scrim));
544
+ --success-500-scrim: light-dark(var(--success-6-scrim), var(--success-6-scrim));
545
+ --success-600-scrim: light-dark(var(--success-7-scrim), var(--success-5-scrim));
546
+ --success-700-scrim: light-dark(var(--success-8-scrim), var(--success-4-scrim));
547
+ --success-800-scrim: light-dark(var(--success-9-scrim), var(--success-3-scrim));
548
+ --success-900-scrim: light-dark(var(--success-10-scrim), var(--success-2-scrim));
549
+ --success-950-scrim: light-dark(var(--success-11-scrim), var(--success-1-scrim));
550
+
551
+ --warning-050-scrim: light-dark(var(--warning-1-scrim), var(--warning-11-scrim));
552
+ --warning-100-scrim: light-dark(var(--warning-2-scrim), var(--warning-10-scrim));
553
+ --warning-200-scrim: light-dark(var(--warning-3-scrim), var(--warning-9-scrim));
554
+ --warning-300-scrim: light-dark(var(--warning-4-scrim), var(--warning-8-scrim));
555
+ --warning-400-scrim: light-dark(var(--warning-5-scrim), var(--warning-7-scrim));
556
+ --warning-500-scrim: light-dark(var(--warning-6-scrim), var(--warning-6-scrim));
557
+ --warning-600-scrim: light-dark(var(--warning-7-scrim), var(--warning-5-scrim));
558
+ --warning-700-scrim: light-dark(var(--warning-8-scrim), var(--warning-4-scrim));
559
+ --warning-800-scrim: light-dark(var(--warning-9-scrim), var(--warning-3-scrim));
560
+ --warning-900-scrim: light-dark(var(--warning-10-scrim), var(--warning-2-scrim));
561
+ --warning-950-scrim: light-dark(var(--warning-11-scrim), var(--warning-1-scrim));
562
+
563
+ --danger-050-scrim: light-dark(var(--danger-1-scrim), var(--danger-11-scrim));
564
+ --danger-100-scrim: light-dark(var(--danger-2-scrim), var(--danger-10-scrim));
565
+ --danger-200-scrim: light-dark(var(--danger-3-scrim), var(--danger-9-scrim));
566
+ --danger-300-scrim: light-dark(var(--danger-4-scrim), var(--danger-8-scrim));
567
+ --danger-400-scrim: light-dark(var(--danger-5-scrim), var(--danger-7-scrim));
568
+ --danger-500-scrim: light-dark(var(--danger-6-scrim), var(--danger-6-scrim));
569
+ --danger-600-scrim: light-dark(var(--danger-7-scrim), var(--danger-5-scrim));
570
+ --danger-700-scrim: light-dark(var(--danger-8-scrim), var(--danger-4-scrim));
571
+ --danger-800-scrim: light-dark(var(--danger-9-scrim), var(--danger-3-scrim));
572
+ --danger-900-scrim: light-dark(var(--danger-10-scrim), var(--danger-2-scrim));
573
+ --danger-950-scrim: light-dark(var(--danger-11-scrim), var(--danger-1-scrim));
574
+
575
+ /* ── Scrim palette — Tint & Shade (L + alpha stepped, mode-independent) ──
576
+ Both start from the family anchor (step-500 L/C/H).
577
+ Strongest = anchor color at full alpha. Weakest = L-extreme at minimal alpha.
578
+ L: strongest = anchor, weakest = L-max (tint) or L-min (shade), 6 intervals.
579
+ Alpha: strongest = 7/7, weakest = 1/7 of color-env-alpha.
580
+ Chroma = anchor chroma (--_C-{fam}-6) throughout.
581
+ */
582
+
583
+ --neutral-scrim-tint-strongest: oklch(var(--color-env-lightness-neutral) var(--_C-neutral-6) var(--color-env-hue-neutral) / var(--color-env-alpha));
584
+ --neutral-scrim-tint-stronger: oklch(calc(var(--color-env-lightness-neutral) + 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(6 / 7 * var(--color-env-alpha)));
585
+ --neutral-scrim-tint-strong: oklch(calc(var(--color-env-lightness-neutral) + 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(5 / 7 * var(--color-env-alpha)));
586
+ --neutral-scrim-tint-base: oklch(calc(var(--color-env-lightness-neutral) + 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(4 / 7 * var(--color-env-alpha)));
587
+ --neutral-scrim-tint-weak: oklch(calc(var(--color-env-lightness-neutral) + 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(3 / 7 * var(--color-env-alpha)));
588
+ --neutral-scrim-tint-weaker: oklch(calc(var(--color-env-lightness-neutral) + 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-neutral))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(2 / 7 * var(--color-env-alpha)));
589
+ --neutral-scrim-tint-weakest: oklch(var(--color-env-lightness-max) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(1 / 7 * var(--color-env-alpha)));
590
+
591
+ --neutral-scrim-shade-strongest: oklch(var(--color-env-lightness-neutral) var(--_C-neutral-6) var(--color-env-hue-neutral) / var(--color-env-alpha));
592
+ --neutral-scrim-shade-stronger: oklch(calc(var(--color-env-lightness-neutral) - 1 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(6 / 7 * var(--color-env-alpha)));
593
+ --neutral-scrim-shade-strong: oklch(calc(var(--color-env-lightness-neutral) - 2 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(5 / 7 * var(--color-env-alpha)));
594
+ --neutral-scrim-shade-base: oklch(calc(var(--color-env-lightness-neutral) - 3 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(4 / 7 * var(--color-env-alpha)));
595
+ --neutral-scrim-shade-weak: oklch(calc(var(--color-env-lightness-neutral) - 4 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(3 / 7 * var(--color-env-alpha)));
596
+ --neutral-scrim-shade-weaker: oklch(calc(var(--color-env-lightness-neutral) - 5 / 6 * (var(--color-env-lightness-neutral) - var(--color-env-lightness-min))) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(2 / 7 * var(--color-env-alpha)));
597
+ --neutral-scrim-shade-weakest: oklch(var(--color-env-lightness-min) var(--_C-neutral-6) var(--color-env-hue-neutral) / calc(1 / 7 * var(--color-env-alpha)));
598
+
599
+ --accent-scrim-tint-strongest: oklch(var(--color-env-lightness-accent) var(--_C-accent-6) var(--color-env-hue-accent) / var(--color-env-alpha));
600
+ --accent-scrim-tint-stronger: oklch(calc(var(--color-env-lightness-accent) + 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(6 / 7 * var(--color-env-alpha)));
601
+ --accent-scrim-tint-strong: oklch(calc(var(--color-env-lightness-accent) + 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(5 / 7 * var(--color-env-alpha)));
602
+ --accent-scrim-tint-base: oklch(calc(var(--color-env-lightness-accent) + 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(4 / 7 * var(--color-env-alpha)));
603
+ --accent-scrim-tint-weak: oklch(calc(var(--color-env-lightness-accent) + 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(3 / 7 * var(--color-env-alpha)));
604
+ --accent-scrim-tint-weaker: oklch(calc(var(--color-env-lightness-accent) + 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-accent))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(2 / 7 * var(--color-env-alpha)));
605
+ --accent-scrim-tint-weakest: oklch(var(--color-env-lightness-max) var(--_C-accent-6) var(--color-env-hue-accent) / calc(1 / 7 * var(--color-env-alpha)));
606
+
607
+ --accent-scrim-shade-strongest: oklch(var(--color-env-lightness-accent) var(--_C-accent-6) var(--color-env-hue-accent) / var(--color-env-alpha));
608
+ --accent-scrim-shade-stronger: oklch(calc(var(--color-env-lightness-accent) - 1 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(6 / 7 * var(--color-env-alpha)));
609
+ --accent-scrim-shade-strong: oklch(calc(var(--color-env-lightness-accent) - 2 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(5 / 7 * var(--color-env-alpha)));
610
+ --accent-scrim-shade-base: oklch(calc(var(--color-env-lightness-accent) - 3 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(4 / 7 * var(--color-env-alpha)));
611
+ --accent-scrim-shade-weak: oklch(calc(var(--color-env-lightness-accent) - 4 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(3 / 7 * var(--color-env-alpha)));
612
+ --accent-scrim-shade-weaker: oklch(calc(var(--color-env-lightness-accent) - 5 / 6 * (var(--color-env-lightness-accent) - var(--color-env-lightness-min))) var(--_C-accent-6) var(--color-env-hue-accent) / calc(2 / 7 * var(--color-env-alpha)));
613
+ --accent-scrim-shade-weakest: oklch(var(--color-env-lightness-min) var(--_C-accent-6) var(--color-env-hue-accent) / calc(1 / 7 * var(--color-env-alpha)));
614
+
615
+ --info-scrim-tint-strongest: oklch(var(--color-env-lightness-info) var(--_C-info-6) var(--color-env-hue-info) / var(--color-env-alpha));
616
+ --info-scrim-tint-stronger: oklch(calc(var(--color-env-lightness-info) + 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info))) var(--_C-info-6) var(--color-env-hue-info) / calc(6 / 7 * var(--color-env-alpha)));
617
+ --info-scrim-tint-strong: oklch(calc(var(--color-env-lightness-info) + 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info))) var(--_C-info-6) var(--color-env-hue-info) / calc(5 / 7 * var(--color-env-alpha)));
618
+ --info-scrim-tint-base: oklch(calc(var(--color-env-lightness-info) + 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info))) var(--_C-info-6) var(--color-env-hue-info) / calc(4 / 7 * var(--color-env-alpha)));
619
+ --info-scrim-tint-weak: oklch(calc(var(--color-env-lightness-info) + 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info))) var(--_C-info-6) var(--color-env-hue-info) / calc(3 / 7 * var(--color-env-alpha)));
620
+ --info-scrim-tint-weaker: oklch(calc(var(--color-env-lightness-info) + 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-info))) var(--_C-info-6) var(--color-env-hue-info) / calc(2 / 7 * var(--color-env-alpha)));
621
+ --info-scrim-tint-weakest: oklch(var(--color-env-lightness-max) var(--_C-info-6) var(--color-env-hue-info) / calc(1 / 7 * var(--color-env-alpha)));
622
+
623
+ --info-scrim-shade-strongest: oklch(var(--color-env-lightness-info) var(--_C-info-6) var(--color-env-hue-info) / var(--color-env-alpha));
624
+ --info-scrim-shade-stronger: oklch(calc(var(--color-env-lightness-info) - 1 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min))) var(--_C-info-6) var(--color-env-hue-info) / calc(6 / 7 * var(--color-env-alpha)));
625
+ --info-scrim-shade-strong: oklch(calc(var(--color-env-lightness-info) - 2 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min))) var(--_C-info-6) var(--color-env-hue-info) / calc(5 / 7 * var(--color-env-alpha)));
626
+ --info-scrim-shade-base: oklch(calc(var(--color-env-lightness-info) - 3 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min))) var(--_C-info-6) var(--color-env-hue-info) / calc(4 / 7 * var(--color-env-alpha)));
627
+ --info-scrim-shade-weak: oklch(calc(var(--color-env-lightness-info) - 4 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min))) var(--_C-info-6) var(--color-env-hue-info) / calc(3 / 7 * var(--color-env-alpha)));
628
+ --info-scrim-shade-weaker: oklch(calc(var(--color-env-lightness-info) - 5 / 6 * (var(--color-env-lightness-info) - var(--color-env-lightness-min))) var(--_C-info-6) var(--color-env-hue-info) / calc(2 / 7 * var(--color-env-alpha)));
629
+ --info-scrim-shade-weakest: oklch(var(--color-env-lightness-min) var(--_C-info-6) var(--color-env-hue-info) / calc(1 / 7 * var(--color-env-alpha)));
630
+
631
+ --success-scrim-tint-strongest: oklch(var(--color-env-lightness-success) var(--_C-success-6) var(--color-env-hue-success) / var(--color-env-alpha));
632
+ --success-scrim-tint-stronger: oklch(calc(var(--color-env-lightness-success) + 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success))) var(--_C-success-6) var(--color-env-hue-success) / calc(6 / 7 * var(--color-env-alpha)));
633
+ --success-scrim-tint-strong: oklch(calc(var(--color-env-lightness-success) + 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success))) var(--_C-success-6) var(--color-env-hue-success) / calc(5 / 7 * var(--color-env-alpha)));
634
+ --success-scrim-tint-base: oklch(calc(var(--color-env-lightness-success) + 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success))) var(--_C-success-6) var(--color-env-hue-success) / calc(4 / 7 * var(--color-env-alpha)));
635
+ --success-scrim-tint-weak: oklch(calc(var(--color-env-lightness-success) + 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success))) var(--_C-success-6) var(--color-env-hue-success) / calc(3 / 7 * var(--color-env-alpha)));
636
+ --success-scrim-tint-weaker: oklch(calc(var(--color-env-lightness-success) + 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-success))) var(--_C-success-6) var(--color-env-hue-success) / calc(2 / 7 * var(--color-env-alpha)));
637
+ --success-scrim-tint-weakest: oklch(var(--color-env-lightness-max) var(--_C-success-6) var(--color-env-hue-success) / calc(1 / 7 * var(--color-env-alpha)));
638
+
639
+ --success-scrim-shade-strongest: oklch(var(--color-env-lightness-success) var(--_C-success-6) var(--color-env-hue-success) / var(--color-env-alpha));
640
+ --success-scrim-shade-stronger: oklch(calc(var(--color-env-lightness-success) - 1 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min))) var(--_C-success-6) var(--color-env-hue-success) / calc(6 / 7 * var(--color-env-alpha)));
641
+ --success-scrim-shade-strong: oklch(calc(var(--color-env-lightness-success) - 2 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min))) var(--_C-success-6) var(--color-env-hue-success) / calc(5 / 7 * var(--color-env-alpha)));
642
+ --success-scrim-shade-base: oklch(calc(var(--color-env-lightness-success) - 3 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min))) var(--_C-success-6) var(--color-env-hue-success) / calc(4 / 7 * var(--color-env-alpha)));
643
+ --success-scrim-shade-weak: oklch(calc(var(--color-env-lightness-success) - 4 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min))) var(--_C-success-6) var(--color-env-hue-success) / calc(3 / 7 * var(--color-env-alpha)));
644
+ --success-scrim-shade-weaker: oklch(calc(var(--color-env-lightness-success) - 5 / 6 * (var(--color-env-lightness-success) - var(--color-env-lightness-min))) var(--_C-success-6) var(--color-env-hue-success) / calc(2 / 7 * var(--color-env-alpha)));
645
+ --success-scrim-shade-weakest: oklch(var(--color-env-lightness-min) var(--_C-success-6) var(--color-env-hue-success) / calc(1 / 7 * var(--color-env-alpha)));
646
+
647
+ --warning-scrim-tint-strongest: oklch(var(--color-env-lightness-warning) var(--_C-warning-6) var(--color-env-hue-warning) / var(--color-env-alpha));
648
+ --warning-scrim-tint-stronger: oklch(calc(var(--color-env-lightness-warning) + 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(6 / 7 * var(--color-env-alpha)));
649
+ --warning-scrim-tint-strong: oklch(calc(var(--color-env-lightness-warning) + 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(5 / 7 * var(--color-env-alpha)));
650
+ --warning-scrim-tint-base: oklch(calc(var(--color-env-lightness-warning) + 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(4 / 7 * var(--color-env-alpha)));
651
+ --warning-scrim-tint-weak: oklch(calc(var(--color-env-lightness-warning) + 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(3 / 7 * var(--color-env-alpha)));
652
+ --warning-scrim-tint-weaker: oklch(calc(var(--color-env-lightness-warning) + 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-warning))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(2 / 7 * var(--color-env-alpha)));
653
+ --warning-scrim-tint-weakest: oklch(var(--color-env-lightness-max) var(--_C-warning-6) var(--color-env-hue-warning) / calc(1 / 7 * var(--color-env-alpha)));
654
+
655
+ --warning-scrim-shade-strongest: oklch(var(--color-env-lightness-warning) var(--_C-warning-6) var(--color-env-hue-warning) / var(--color-env-alpha));
656
+ --warning-scrim-shade-stronger: oklch(calc(var(--color-env-lightness-warning) - 1 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(6 / 7 * var(--color-env-alpha)));
657
+ --warning-scrim-shade-strong: oklch(calc(var(--color-env-lightness-warning) - 2 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(5 / 7 * var(--color-env-alpha)));
658
+ --warning-scrim-shade-base: oklch(calc(var(--color-env-lightness-warning) - 3 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(4 / 7 * var(--color-env-alpha)));
659
+ --warning-scrim-shade-weak: oklch(calc(var(--color-env-lightness-warning) - 4 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(3 / 7 * var(--color-env-alpha)));
660
+ --warning-scrim-shade-weaker: oklch(calc(var(--color-env-lightness-warning) - 5 / 6 * (var(--color-env-lightness-warning) - var(--color-env-lightness-min))) var(--_C-warning-6) var(--color-env-hue-warning) / calc(2 / 7 * var(--color-env-alpha)));
661
+ --warning-scrim-shade-weakest: oklch(var(--color-env-lightness-min) var(--_C-warning-6) var(--color-env-hue-warning) / calc(1 / 7 * var(--color-env-alpha)));
662
+
663
+ --danger-scrim-tint-strongest: oklch(var(--color-env-lightness-danger) var(--_C-danger-6) var(--color-env-hue-danger) / var(--color-env-alpha));
664
+ --danger-scrim-tint-stronger: oklch(calc(var(--color-env-lightness-danger) + 1 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(6 / 7 * var(--color-env-alpha)));
665
+ --danger-scrim-tint-strong: oklch(calc(var(--color-env-lightness-danger) + 2 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(5 / 7 * var(--color-env-alpha)));
666
+ --danger-scrim-tint-base: oklch(calc(var(--color-env-lightness-danger) + 3 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(4 / 7 * var(--color-env-alpha)));
667
+ --danger-scrim-tint-weak: oklch(calc(var(--color-env-lightness-danger) + 4 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(3 / 7 * var(--color-env-alpha)));
668
+ --danger-scrim-tint-weaker: oklch(calc(var(--color-env-lightness-danger) + 5 / 6 * (var(--color-env-lightness-max) - var(--color-env-lightness-danger))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(2 / 7 * var(--color-env-alpha)));
669
+ --danger-scrim-tint-weakest: oklch(var(--color-env-lightness-max) var(--_C-danger-6) var(--color-env-hue-danger) / calc(1 / 7 * var(--color-env-alpha)));
670
+
671
+ --danger-scrim-shade-strongest: oklch(var(--color-env-lightness-danger) var(--_C-danger-6) var(--color-env-hue-danger) / var(--color-env-alpha));
672
+ --danger-scrim-shade-stronger: oklch(calc(var(--color-env-lightness-danger) - 1 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(6 / 7 * var(--color-env-alpha)));
673
+ --danger-scrim-shade-strong: oklch(calc(var(--color-env-lightness-danger) - 2 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(5 / 7 * var(--color-env-alpha)));
674
+ --danger-scrim-shade-base: oklch(calc(var(--color-env-lightness-danger) - 3 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(4 / 7 * var(--color-env-alpha)));
675
+ --danger-scrim-shade-weak: oklch(calc(var(--color-env-lightness-danger) - 4 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(3 / 7 * var(--color-env-alpha)));
676
+ --danger-scrim-shade-weaker: oklch(calc(var(--color-env-lightness-danger) - 5 / 6 * (var(--color-env-lightness-danger) - var(--color-env-lightness-min))) var(--_C-danger-6) var(--color-env-hue-danger) / calc(2 / 7 * var(--color-env-alpha)));
677
+ --danger-scrim-shade-weakest: oklch(var(--color-env-lightness-min) var(--_C-danger-6) var(--color-env-hue-danger) / calc(1 / 7 * var(--color-env-alpha)));
678
+
679
+ /* ── Scrim anchor aliases (bare name = step 500) ── */
680
+
681
+ --neutral-scrim: var(--neutral-500-scrim);
682
+ --accent-scrim: var(--accent-500-scrim);
683
+ --info-scrim: var(--info-500-scrim);
684
+ --success-scrim: var(--success-500-scrim);
685
+ --warning-scrim: var(--warning-500-scrim);
686
+ --danger-scrim: var(--danger-500-scrim);
687
+
688
+ /* ── Background — Elevation aliases ──
689
+ Same step in both modes → visual layer stays consistent.
690
+ */
691
+
692
+ --neutral-lowest: light-dark(oklch(var(--_L-light-1) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-1) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
693
+ --neutral-lower: light-dark(oklch(var(--_L-light-2) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-2) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
694
+ --neutral-low: light-dark(oklch(var(--_L-light-3) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-3) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
695
+ --neutral-base: light-dark(oklch(var(--_L-light-4) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-4) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
696
+ --neutral-high: light-dark(oklch(var(--_L-light-5) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-5) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
697
+ --neutral-higher: light-dark(oklch(var(--_L-light-6) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-6) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
698
+ --neutral-highest: light-dark(oklch(var(--_L-light-7) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-7) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
699
+
700
+ --accent-lowest: light-dark(oklch(var(--_L-light-1) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-1) var(--_C-accent-muted) var(--color-env-hue-accent)));
701
+ --accent-lower: light-dark(oklch(var(--_L-light-2) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-2) var(--_C-accent-muted) var(--color-env-hue-accent)));
702
+ --accent-low: light-dark(oklch(var(--_L-light-3) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-3) var(--_C-accent-muted) var(--color-env-hue-accent)));
703
+ --accent-base: light-dark(oklch(var(--_L-light-4) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-4) var(--_C-accent-muted) var(--color-env-hue-accent)));
704
+ --accent-high: light-dark(oklch(var(--_L-light-5) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-5) var(--_C-accent-muted) var(--color-env-hue-accent)));
705
+ --accent-higher: light-dark(oklch(var(--_L-light-6) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-6) var(--_C-accent-muted) var(--color-env-hue-accent)));
706
+ --accent-highest: light-dark(oklch(var(--_L-light-7) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-7) var(--_C-accent-muted) var(--color-env-hue-accent)));
707
+
708
+ --info-lowest: light-dark(oklch(var(--_L-light-1) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-1) var(--_C-info-muted) var(--color-env-hue-info)));
709
+ --info-lower: light-dark(oklch(var(--_L-light-2) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-2) var(--_C-info-muted) var(--color-env-hue-info)));
710
+ --info-low: light-dark(oklch(var(--_L-light-3) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-3) var(--_C-info-muted) var(--color-env-hue-info)));
711
+ --info-base: light-dark(oklch(var(--_L-light-4) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-4) var(--_C-info-muted) var(--color-env-hue-info)));
712
+ --info-high: light-dark(oklch(var(--_L-light-5) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-5) var(--_C-info-muted) var(--color-env-hue-info)));
713
+ --info-higher: light-dark(oklch(var(--_L-light-6) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-6) var(--_C-info-muted) var(--color-env-hue-info)));
714
+ --info-highest: light-dark(oklch(var(--_L-light-7) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-7) var(--_C-info-muted) var(--color-env-hue-info)));
715
+
716
+ --success-lowest: light-dark(oklch(var(--_L-light-1) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-1) var(--_C-success-muted) var(--color-env-hue-success)));
717
+ --success-lower: light-dark(oklch(var(--_L-light-2) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-2) var(--_C-success-muted) var(--color-env-hue-success)));
718
+ --success-low: light-dark(oklch(var(--_L-light-3) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-3) var(--_C-success-muted) var(--color-env-hue-success)));
719
+ --success-base: light-dark(oklch(var(--_L-light-4) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-4) var(--_C-success-muted) var(--color-env-hue-success)));
720
+ --success-high: light-dark(oklch(var(--_L-light-5) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-5) var(--_C-success-muted) var(--color-env-hue-success)));
721
+ --success-higher: light-dark(oklch(var(--_L-light-6) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-6) var(--_C-success-muted) var(--color-env-hue-success)));
722
+ --success-highest: light-dark(oklch(var(--_L-light-7) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-7) var(--_C-success-muted) var(--color-env-hue-success)));
723
+
724
+ --warning-lowest: light-dark(oklch(var(--_L-light-1) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-1) var(--_C-warning-muted) var(--color-env-hue-warning)));
725
+ --warning-lower: light-dark(oklch(var(--_L-light-2) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-2) var(--_C-warning-muted) var(--color-env-hue-warning)));
726
+ --warning-low: light-dark(oklch(var(--_L-light-3) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-3) var(--_C-warning-muted) var(--color-env-hue-warning)));
727
+ --warning-base: light-dark(oklch(var(--_L-light-4) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-4) var(--_C-warning-muted) var(--color-env-hue-warning)));
728
+ --warning-high: light-dark(oklch(var(--_L-light-5) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-5) var(--_C-warning-muted) var(--color-env-hue-warning)));
729
+ --warning-higher: light-dark(oklch(var(--_L-light-6) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-6) var(--_C-warning-muted) var(--color-env-hue-warning)));
730
+ --warning-highest: light-dark(oklch(var(--_L-light-7) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-7) var(--_C-warning-muted) var(--color-env-hue-warning)));
731
+
732
+ --danger-lowest: light-dark(oklch(var(--_L-light-1) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-1) var(--_C-danger-muted) var(--color-env-hue-danger)));
733
+ --danger-lower: light-dark(oklch(var(--_L-light-2) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-2) var(--_C-danger-muted) var(--color-env-hue-danger)));
734
+ --danger-low: light-dark(oklch(var(--_L-light-3) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-3) var(--_C-danger-muted) var(--color-env-hue-danger)));
735
+ --danger-base: light-dark(oklch(var(--_L-light-4) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-4) var(--_C-danger-muted) var(--color-env-hue-danger)));
736
+ --danger-high: light-dark(oklch(var(--_L-light-5) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-5) var(--_C-danger-muted) var(--color-env-hue-danger)));
737
+ --danger-higher: light-dark(oklch(var(--_L-light-6) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-6) var(--_C-danger-muted) var(--color-env-hue-danger)));
738
+ --danger-highest: light-dark(oklch(var(--_L-light-7) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-7) var(--_C-danger-muted) var(--color-env-hue-danger)));
739
+
740
+ /* ── Background — Brightness aliases ──
741
+ Flipped step mapping across modes → "brightest" is always brightest.
742
+ */
743
+
744
+ --neutral-brightest: light-dark(oklch(var(--_L-light-1) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-7) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
745
+ --neutral-brighter: light-dark(oklch(var(--_L-light-2) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-6) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
746
+ --neutral-bright: light-dark(oklch(var(--_L-light-3) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-5) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
747
+ --neutral-dim: light-dark(oklch(var(--_L-light-5) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-3) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
748
+ --neutral-dimmer: light-dark(oklch(var(--_L-light-6) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-2) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
749
+ --neutral-dimmest: light-dark(oklch(var(--_L-light-7) var(--_C-neutral-muted) var(--color-env-hue-neutral)), oklch(var(--_L-dark-1) var(--_C-neutral-muted) var(--color-env-hue-neutral)));
750
+
751
+ --accent-brightest: light-dark(oklch(var(--_L-light-1) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-7) var(--_C-accent-muted) var(--color-env-hue-accent)));
752
+ --accent-brighter: light-dark(oklch(var(--_L-light-2) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-6) var(--_C-accent-muted) var(--color-env-hue-accent)));
753
+ --accent-bright: light-dark(oklch(var(--_L-light-3) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-5) var(--_C-accent-muted) var(--color-env-hue-accent)));
754
+ --accent-dim: light-dark(oklch(var(--_L-light-5) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-3) var(--_C-accent-muted) var(--color-env-hue-accent)));
755
+ --accent-dimmer: light-dark(oklch(var(--_L-light-6) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-2) var(--_C-accent-muted) var(--color-env-hue-accent)));
756
+ --accent-dimmest: light-dark(oklch(var(--_L-light-7) var(--_C-accent-muted) var(--color-env-hue-accent)), oklch(var(--_L-dark-1) var(--_C-accent-muted) var(--color-env-hue-accent)));
757
+
758
+ --info-brightest: light-dark(oklch(var(--_L-light-1) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-7) var(--_C-info-muted) var(--color-env-hue-info)));
759
+ --info-brighter: light-dark(oklch(var(--_L-light-2) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-6) var(--_C-info-muted) var(--color-env-hue-info)));
760
+ --info-bright: light-dark(oklch(var(--_L-light-3) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-5) var(--_C-info-muted) var(--color-env-hue-info)));
761
+ --info-dim: light-dark(oklch(var(--_L-light-5) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-3) var(--_C-info-muted) var(--color-env-hue-info)));
762
+ --info-dimmer: light-dark(oklch(var(--_L-light-6) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-2) var(--_C-info-muted) var(--color-env-hue-info)));
763
+ --info-dimmest: light-dark(oklch(var(--_L-light-7) var(--_C-info-muted) var(--color-env-hue-info)), oklch(var(--_L-dark-1) var(--_C-info-muted) var(--color-env-hue-info)));
764
+
765
+ --success-brightest: light-dark(oklch(var(--_L-light-1) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-7) var(--_C-success-muted) var(--color-env-hue-success)));
766
+ --success-brighter: light-dark(oklch(var(--_L-light-2) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-6) var(--_C-success-muted) var(--color-env-hue-success)));
767
+ --success-bright: light-dark(oklch(var(--_L-light-3) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-5) var(--_C-success-muted) var(--color-env-hue-success)));
768
+ --success-dim: light-dark(oklch(var(--_L-light-5) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-3) var(--_C-success-muted) var(--color-env-hue-success)));
769
+ --success-dimmer: light-dark(oklch(var(--_L-light-6) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-2) var(--_C-success-muted) var(--color-env-hue-success)));
770
+ --success-dimmest: light-dark(oklch(var(--_L-light-7) var(--_C-success-muted) var(--color-env-hue-success)), oklch(var(--_L-dark-1) var(--_C-success-muted) var(--color-env-hue-success)));
771
+
772
+ --warning-brightest: light-dark(oklch(var(--_L-light-1) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-7) var(--_C-warning-muted) var(--color-env-hue-warning)));
773
+ --warning-brighter: light-dark(oklch(var(--_L-light-2) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-6) var(--_C-warning-muted) var(--color-env-hue-warning)));
774
+ --warning-bright: light-dark(oklch(var(--_L-light-3) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-5) var(--_C-warning-muted) var(--color-env-hue-warning)));
775
+ --warning-dim: light-dark(oklch(var(--_L-light-5) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-3) var(--_C-warning-muted) var(--color-env-hue-warning)));
776
+ --warning-dimmer: light-dark(oklch(var(--_L-light-6) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-2) var(--_C-warning-muted) var(--color-env-hue-warning)));
777
+ --warning-dimmest: light-dark(oklch(var(--_L-light-7) var(--_C-warning-muted) var(--color-env-hue-warning)), oklch(var(--_L-dark-1) var(--_C-warning-muted) var(--color-env-hue-warning)));
778
+
779
+ --danger-brightest: light-dark(oklch(var(--_L-light-1) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-7) var(--_C-danger-muted) var(--color-env-hue-danger)));
780
+ --danger-brighter: light-dark(oklch(var(--_L-light-2) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-6) var(--_C-danger-muted) var(--color-env-hue-danger)));
781
+ --danger-bright: light-dark(oklch(var(--_L-light-3) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-5) var(--_C-danger-muted) var(--color-env-hue-danger)));
782
+ --danger-dim: light-dark(oklch(var(--_L-light-5) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-3) var(--_C-danger-muted) var(--color-env-hue-danger)));
783
+ --danger-dimmer: light-dark(oklch(var(--_L-light-6) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-2) var(--_C-danger-muted) var(--color-env-hue-danger)));
784
+ --danger-dimmest: light-dark(oklch(var(--_L-light-7) var(--_C-danger-muted) var(--color-env-hue-danger)), oklch(var(--_L-dark-1) var(--_C-danger-muted) var(--color-env-hue-danger)));
785
+
786
+ }
787
+ }
788
+
789
+ /* ================================================================
790
+ nonoun-css Semantic Color Tokens
791
+
792
+ Maps color primitives to UI roles:
793
+ Grounds — backgrounds by elevation (doc → body → panel → control → card → modal)
794
+ Ink — text/icons on grounds
795
+ Stroke — borders/dividers on grounds (muted scrims)
796
+ Surface — interactive element fills (buttons, badges)
797
+ Surface Ink — text/icons on surfaces
798
+ Outline — borders on surfaces (higher contrast scrims)
799
+ ================================================================ */
800
+
801
+ @layer tokens {
802
+ :root {
803
+ /* ── Neutral ── */
804
+
805
+ /* Grounds */
806
+ --neutral-doc: var(--neutral-dimmer);
807
+ --neutral-doc-hover: var(--neutral-lower);
808
+ --neutral-doc-active: var(--neutral-low);
809
+ --neutral-doc-disabled: var(--neutral-base);
810
+
811
+ --neutral-body: var(--neutral-low);
812
+ --neutral-body-hover: var(--neutral-bright);
813
+ --neutral-body-active: var(--neutral-brighter);
814
+ --neutral-body-disabled: var(--neutral-base);
815
+
816
+ --neutral-panel: var(--neutral-bright);
817
+ --neutral-panel-hover: var(--neutral-brighter);
818
+ --neutral-panel-active: var(--neutral-brightest);
819
+ --neutral-panel-disabled: var(--neutral-base);
820
+
821
+ --neutral-control: var(--neutral-base);
822
+ --neutral-control-hover: var(--neutral-bright);
823
+ --neutral-control-active: var(--neutral-brighter);
824
+ --neutral-control-disabled: var(--neutral-base);
825
+
826
+ --neutral-button: var(--neutral-higher);
827
+ --neutral-button-hover: var(--neutral-highest);
828
+ --neutral-button-active: var(--neutral-highest);
829
+ --neutral-button-disabled: var(--neutral-base);
830
+
831
+ --neutral-card: var(--neutral-brighter);
832
+ --neutral-card-hover: var(--neutral-brightest);
833
+ --neutral-card-active: var(--neutral-brightest);
834
+ --neutral-card-disabled: var(--neutral-base);
835
+
836
+ --neutral-modal: var(--neutral-brightest);
837
+ --neutral-modal-hover: var(--neutral-brightest);
838
+ --neutral-modal-active: var(--neutral-brightest);
839
+ --neutral-modal-disabled: var(--neutral-base);
840
+
841
+ /* Ink */
842
+ --neutral-ink: var(--neutral-700);
843
+ --neutral-ink-strong: var(--neutral-950);
844
+ --neutral-ink-inverse: var(--neutral-11);
845
+ --neutral-ink-muted: var(--neutral-600);
846
+ --neutral-ink-placeholder: var(--neutral-400);
847
+ --neutral-ink-hover: var(--neutral-950);
848
+ --neutral-ink-active: var(--neutral-500);
849
+ --neutral-ink-disabled: var(--neutral-scrim-tint-weaker);
850
+
851
+ /* Border */
852
+ --neutral-border: var(--neutral-200-scrim);
853
+ --neutral-border-muted: var(--neutral-100-scrim);
854
+ --neutral-border-hover: var(--neutral-300-scrim);
855
+ --neutral-border-active: var(--neutral-400-scrim);
856
+ --neutral-border-disabled: var(--neutral-scrim-tint-weaker);
857
+
858
+ /* Surface */
859
+ --neutral-surface: var(--neutral-500);
860
+ --neutral-surface-hover: var(--neutral-400);
861
+ --neutral-surface-active: var(--neutral-600);
862
+ --neutral-surface-disabled: var(--neutral-scrim-tint-weaker);
863
+
864
+ /* Surface Ink */
865
+ --neutral-surface-ink: white;
866
+ --neutral-surface-ink-hover: white;
867
+ --neutral-surface-ink-active: var(--neutral-950);
868
+ --neutral-surface-ink-disabled: var(--neutral-scrim-tint-weaker);
869
+
870
+
871
+ /* ── Accent ── */
872
+
873
+ /* Grounds */
874
+ --accent-doc: var(--accent-lowest);
875
+ --accent-doc-hover: var(--accent-lower);
876
+ --accent-doc-active: var(--accent-low);
877
+ --accent-doc-disabled: var(--accent-base);
878
+
879
+ --accent-body: var(--accent-low);
880
+ --accent-body-hover: var(--accent-bright);
881
+ --accent-body-active: var(--accent-brighter);
882
+ --accent-body-disabled: var(--accent-base);
883
+
884
+ --accent-panel: var(--accent-bright);
885
+ --accent-panel-hover: var(--accent-brighter);
886
+ --accent-panel-active: var(--accent-brightest);
887
+ --accent-panel-disabled: var(--accent-base);
888
+
889
+ --accent-control: var(--accent-base);
890
+ --accent-control-hover: var(--accent-bright);
891
+ --accent-control-active: var(--accent-brighter);
892
+ --accent-control-disabled: var(--accent-base);
893
+
894
+ --accent-button: var(--accent-higher);
895
+ --accent-button-hover: var(--accent-highest);
896
+ --accent-button-active: var(--accent-highest);
897
+ --accent-button-disabled: var(--accent-base);
898
+
899
+ --accent-card: var(--accent-brighter);
900
+ --accent-card-hover: var(--accent-brightest);
901
+ --accent-card-active: var(--accent-brightest);
902
+ --accent-card-disabled: var(--accent-base);
903
+
904
+ --accent-modal: var(--accent-brightest);
905
+ --accent-modal-hover: var(--accent-brightest);
906
+ --accent-modal-active: var(--accent-brightest);
907
+ --accent-modal-disabled: var(--accent-base);
908
+
909
+ /* Ink */
910
+ --accent-ink: var(--accent-700);
911
+ --accent-ink-strong: var(--accent-950);
912
+ --accent-ink-inverse: var(--accent-11);
913
+ --accent-ink-muted: var(--accent-600);
914
+ --accent-ink-placeholder: var(--accent-400);
915
+ --accent-ink-hover: var(--accent-950);
916
+ --accent-ink-active: var(--accent-500);
917
+ --accent-ink-disabled: var(--accent-scrim-tint-weaker);
918
+
919
+ /* Border */
920
+ --accent-border: var(--accent-200-scrim);
921
+ --accent-border-muted: var(--accent-100-scrim);
922
+ --accent-border-hover: var(--accent-300-scrim);
923
+ --accent-border-active: var(--accent-400-scrim);
924
+ --accent-border-disabled: var(--accent-scrim-tint-weaker);
925
+
926
+ /* Surface */
927
+ --accent-surface: var(--accent-500);
928
+ --accent-surface-hover: var(--accent-400);
929
+ --accent-surface-active: var(--accent-600);
930
+ --accent-surface-disabled: var(--accent-scrim-tint-weaker);
931
+
932
+ /* Surface Ink */
933
+ --accent-surface-ink: white;
934
+ --accent-surface-ink-hover: white;
935
+ --accent-surface-ink-active: var(--accent-950);
936
+ --accent-surface-ink-disabled: var(--accent-scrim-tint-weaker);
937
+
938
+
939
+ /* ── Info ── */
940
+
941
+ /* Grounds */
942
+ --info-doc: var(--info-lowest);
943
+ --info-doc-hover: var(--info-lower);
944
+ --info-doc-active: var(--info-low);
945
+ --info-doc-disabled: var(--info-base);
946
+
947
+ --info-body: var(--info-low);
948
+ --info-body-hover: var(--info-bright);
949
+ --info-body-active: var(--info-brighter);
950
+ --info-body-disabled: var(--info-base);
951
+
952
+ --info-panel: var(--info-bright);
953
+ --info-panel-hover: var(--info-brighter);
954
+ --info-panel-active: var(--info-brightest);
955
+ --info-panel-disabled: var(--info-base);
956
+
957
+ --info-control: var(--info-base);
958
+ --info-control-hover: var(--info-bright);
959
+ --info-control-active: var(--info-brighter);
960
+ --info-control-disabled: var(--info-base);
961
+
962
+ --info-button: var(--info-higher);
963
+ --info-button-hover: var(--info-highest);
964
+ --info-button-active: var(--info-highest);
965
+ --info-button-disabled: var(--info-base);
966
+
967
+ --info-card: var(--info-brighter);
968
+ --info-card-hover: var(--info-brightest);
969
+ --info-card-active: var(--info-brightest);
970
+ --info-card-disabled: var(--info-base);
971
+
972
+ --info-modal: var(--info-brightest);
973
+ --info-modal-hover: var(--info-brightest);
974
+ --info-modal-active: var(--info-brightest);
975
+ --info-modal-disabled: var(--info-base);
976
+
977
+ /* Ink */
978
+ --info-ink: var(--info-700);
979
+ --info-ink-strong: var(--info-950);
980
+ --info-ink-inverse: var(--info-11);
981
+ --info-ink-muted: var(--info-600);
982
+ --info-ink-placeholder: var(--info-400);
983
+ --info-ink-hover: var(--info-950);
984
+ --info-ink-active: var(--info-500);
985
+ --info-ink-disabled: var(--info-scrim-tint-weaker);
986
+
987
+ /* Border */
988
+ --info-border: var(--info-200-scrim);
989
+ --info-border-muted: var(--info-100-scrim);
990
+ --info-border-hover: var(--info-300-scrim);
991
+ --info-border-active: var(--info-400-scrim);
992
+ --info-border-disabled: var(--info-scrim-tint-weaker);
993
+
994
+ /* Surface */
995
+ --info-surface: var(--info-500);
996
+ --info-surface-hover: var(--info-400);
997
+ --info-surface-active: var(--info-600);
998
+ --info-surface-disabled: var(--info-scrim-tint-weaker);
999
+
1000
+ /* Surface Ink */
1001
+ --info-surface-ink: white;
1002
+ --info-surface-ink-hover: white;
1003
+ --info-surface-ink-active: var(--info-950);
1004
+ --info-surface-ink-disabled: var(--info-scrim-tint-weaker);
1005
+
1006
+
1007
+ /* ── Success ── */
1008
+
1009
+ /* Grounds */
1010
+ --success-doc: var(--success-lowest);
1011
+ --success-doc-hover: var(--success-lower);
1012
+ --success-doc-active: var(--success-low);
1013
+ --success-doc-disabled: var(--success-base);
1014
+
1015
+ --success-body: var(--success-low);
1016
+ --success-body-hover: var(--success-bright);
1017
+ --success-body-active: var(--success-brighter);
1018
+ --success-body-disabled: var(--success-base);
1019
+
1020
+ --success-panel: var(--success-bright);
1021
+ --success-panel-hover: var(--success-brighter);
1022
+ --success-panel-active: var(--success-brightest);
1023
+ --success-panel-disabled: var(--success-base);
1024
+
1025
+ --success-control: var(--success-base);
1026
+ --success-control-hover: var(--success-bright);
1027
+ --success-control-active: var(--success-brighter);
1028
+ --success-control-disabled: var(--success-base);
1029
+
1030
+ --success-button: var(--success-higher);
1031
+ --success-button-hover: var(--success-highest);
1032
+ --success-button-active: var(--success-highest);
1033
+ --success-button-disabled: var(--success-base);
1034
+
1035
+ --success-card: var(--success-brighter);
1036
+ --success-card-hover: var(--success-brightest);
1037
+ --success-card-active: var(--success-brightest);
1038
+ --success-card-disabled: var(--success-base);
1039
+
1040
+ --success-modal: var(--success-brightest);
1041
+ --success-modal-hover: var(--success-brightest);
1042
+ --success-modal-active: var(--success-brightest);
1043
+ --success-modal-disabled: var(--success-base);
1044
+
1045
+ /* Ink */
1046
+ --success-ink: var(--success-700);
1047
+ --success-ink-strong: var(--success-950);
1048
+ --success-ink-inverse: var(--success-11);
1049
+ --success-ink-muted: var(--success-600);
1050
+ --success-ink-placeholder: var(--success-400);
1051
+ --success-ink-hover: var(--success-950);
1052
+ --success-ink-active: var(--success-500);
1053
+ --success-ink-disabled: var(--success-scrim-tint-weaker);
1054
+
1055
+ /* Border */
1056
+ --success-border: var(--success-200-scrim);
1057
+ --success-border-muted: var(--success-100-scrim);
1058
+ --success-border-hover: var(--success-300-scrim);
1059
+ --success-border-active: var(--success-400-scrim);
1060
+ --success-border-disabled: var(--success-scrim-tint-weaker);
1061
+
1062
+ /* Surface */
1063
+ --success-surface: var(--success-500);
1064
+ --success-surface-hover: var(--success-400);
1065
+ --success-surface-active: var(--success-600);
1066
+ --success-surface-disabled: var(--success-scrim-tint-weaker);
1067
+
1068
+ /* Surface Ink */
1069
+ --success-surface-ink: white;
1070
+ --success-surface-ink-hover: white;
1071
+ --success-surface-ink-active: var(--success-950);
1072
+ --success-surface-ink-disabled: var(--success-scrim-tint-weaker);
1073
+
1074
+
1075
+ /* ── Warning ── */
1076
+
1077
+ /* Grounds */
1078
+ --warning-doc: var(--warning-lowest);
1079
+ --warning-doc-hover: var(--warning-lower);
1080
+ --warning-doc-active: var(--warning-low);
1081
+ --warning-doc-disabled: var(--warning-base);
1082
+
1083
+ --warning-body: var(--warning-low);
1084
+ --warning-body-hover: var(--warning-bright);
1085
+ --warning-body-active: var(--warning-brighter);
1086
+ --warning-body-disabled: var(--warning-base);
1087
+
1088
+ --warning-panel: var(--warning-bright);
1089
+ --warning-panel-hover: var(--warning-brighter);
1090
+ --warning-panel-active: var(--warning-brightest);
1091
+ --warning-panel-disabled: var(--warning-base);
1092
+
1093
+ --warning-control: var(--warning-base);
1094
+ --warning-control-hover: var(--warning-bright);
1095
+ --warning-control-active: var(--warning-brighter);
1096
+ --warning-control-disabled: var(--warning-base);
1097
+
1098
+ --warning-button: var(--warning-higher);
1099
+ --warning-button-hover: var(--warning-highest);
1100
+ --warning-button-active: var(--warning-highest);
1101
+ --warning-button-disabled: var(--warning-base);
1102
+
1103
+ --warning-card: var(--warning-brighter);
1104
+ --warning-card-hover: var(--warning-brightest);
1105
+ --warning-card-active: var(--warning-brightest);
1106
+ --warning-card-disabled: var(--warning-base);
1107
+
1108
+ --warning-modal: var(--warning-brightest);
1109
+ --warning-modal-hover: var(--warning-brightest);
1110
+ --warning-modal-active: var(--warning-brightest);
1111
+ --warning-modal-disabled: var(--warning-base);
1112
+
1113
+ /* Ink */
1114
+ --warning-ink: var(--warning-700);
1115
+ --warning-ink-strong: var(--warning-950);
1116
+ --warning-ink-inverse: var(--warning-11);
1117
+ --warning-ink-muted: var(--warning-600);
1118
+ --warning-ink-placeholder: var(--warning-400);
1119
+ --warning-ink-hover: var(--warning-950);
1120
+ --warning-ink-active: var(--warning-500);
1121
+ --warning-ink-disabled: var(--warning-scrim-tint-weaker);
1122
+
1123
+ /* Border */
1124
+ --warning-border: var(--warning-200-scrim);
1125
+ --warning-border-muted: var(--warning-100-scrim);
1126
+ --warning-border-hover: var(--warning-300-scrim);
1127
+ --warning-border-active: var(--warning-400-scrim);
1128
+ --warning-border-disabled: var(--warning-scrim-tint-weaker);
1129
+
1130
+ /* Surface */
1131
+ --warning-surface: var(--warning-500);
1132
+ --warning-surface-hover: var(--warning-400);
1133
+ --warning-surface-active: var(--warning-600);
1134
+ --warning-surface-disabled: var(--warning-scrim-tint-weaker);
1135
+
1136
+ /* Surface Ink */
1137
+ --warning-surface-ink: white;
1138
+ --warning-surface-ink-hover: white;
1139
+ --warning-surface-ink-active: var(--warning-950);
1140
+ --warning-surface-ink-disabled: var(--warning-scrim-tint-weaker);
1141
+
1142
+
1143
+ /* ── Danger ── */
1144
+
1145
+ /* Grounds */
1146
+ --danger-doc: var(--danger-lowest);
1147
+ --danger-doc-hover: var(--danger-lower);
1148
+ --danger-doc-active: var(--danger-low);
1149
+ --danger-doc-disabled: var(--danger-base);
1150
+
1151
+ --danger-body: var(--danger-low);
1152
+ --danger-body-hover: var(--danger-bright);
1153
+ --danger-body-active: var(--danger-brighter);
1154
+ --danger-body-disabled: var(--danger-base);
1155
+
1156
+ --danger-panel: var(--danger-bright);
1157
+ --danger-panel-hover: var(--danger-brighter);
1158
+ --danger-panel-active: var(--danger-brightest);
1159
+ --danger-panel-disabled: var(--danger-base);
1160
+
1161
+ --danger-control: var(--danger-base);
1162
+ --danger-control-hover: var(--danger-bright);
1163
+ --danger-control-active: var(--danger-brighter);
1164
+ --danger-control-disabled: var(--danger-base);
1165
+
1166
+ --danger-button: var(--danger-higher);
1167
+ --danger-button-hover: var(--danger-highest);
1168
+ --danger-button-active: var(--danger-highest);
1169
+ --danger-button-disabled: var(--danger-base);
1170
+
1171
+ --danger-card: var(--danger-brighter);
1172
+ --danger-card-hover: var(--danger-brightest);
1173
+ --danger-card-active: var(--danger-brightest);
1174
+ --danger-card-disabled: var(--danger-base);
1175
+
1176
+ --danger-modal: var(--danger-brightest);
1177
+ --danger-modal-hover: var(--danger-brightest);
1178
+ --danger-modal-active: var(--danger-brightest);
1179
+ --danger-modal-disabled: var(--danger-base);
1180
+
1181
+ /* Ink */
1182
+ --danger-ink: var(--danger-700);
1183
+ --danger-ink-strong: var(--danger-950);
1184
+ --danger-ink-inverse: var(--danger-11);
1185
+ --danger-ink-muted: var(--danger-600);
1186
+ --danger-ink-placeholder: var(--danger-400);
1187
+ --danger-ink-hover: var(--danger-950);
1188
+ --danger-ink-active: var(--danger-500);
1189
+ --danger-ink-disabled: var(--danger-scrim-tint-weaker);
1190
+
1191
+ /* Border */
1192
+ --danger-border: var(--danger-200-scrim);
1193
+ --danger-border-muted: var(--danger-100-scrim);
1194
+ --danger-border-hover: var(--danger-300-scrim);
1195
+ --danger-border-active: var(--danger-400-scrim);
1196
+ --danger-border-disabled: var(--danger-scrim-tint-weaker);
1197
+
1198
+ /* Surface */
1199
+ --danger-surface: var(--danger-500);
1200
+ --danger-surface-hover: var(--danger-400);
1201
+ --danger-surface-active: var(--danger-600);
1202
+ --danger-surface-disabled: var(--danger-scrim-tint-weaker);
1203
+
1204
+ /* Surface Ink */
1205
+ --danger-surface-ink: white;
1206
+ --danger-surface-ink-hover: white;
1207
+ --danger-surface-ink-active: var(--danger-950);
1208
+ --danger-surface-ink-disabled: var(--danger-scrim-tint-weaker);
1209
+
1210
+ }
1211
+ }
1212
+
1213
+ /* ================================================================
1214
+ nonoun-css Theme Presets
1215
+
1216
+ Override family params and env params per theme.
1217
+ Apply via attribute: <html theme="forest">
1218
+ Uses :where() for zero specificity — easy to override.
1219
+
1220
+ Requires colors.css to be loaded first.
1221
+ ================================================================ */
1222
+
1223
+ :where([theme="forest"]) {
1224
+ --color-env-hue-neutral: 155;
1225
+ --color-env-chroma-neutral: 0.25;
1226
+ --color-env-hue-accent: 155;
1227
+ --color-env-chroma-accent: 1.0;
1228
+ }
1229
+
1230
+ :where([theme="rose"]) {
1231
+ --color-env-hue-neutral: 350;
1232
+ --color-env-chroma-neutral: 0.35;
1233
+ --color-env-hue-accent: 350;
1234
+ --color-env-chroma-accent: 1.0;
1235
+ }
1236
+
1237
+ :where([theme="zinc"]) {
1238
+ --color-env-hue-neutral: 240;
1239
+ --color-env-chroma-neutral: 0.15;
1240
+ --color-env-hue-accent: 240;
1241
+ --color-env-chroma-accent: 1.0;
1242
+ --color-env-chroma: 0.18;
1243
+ }
1244
+
1245
+ /* ================================================================
1246
+ nonoun-css Base Reset & Document Defaults
1247
+
1248
+ Universal reset uses real specificity to override UA defaults.
1249
+ Document defaults use :where() for zero specificity so consumers
1250
+ can override font-family, background, etc. without fighting.
1251
+ ================================================================ */
1252
+
1253
+ @layer ui {
1254
+
1255
+ /* ── Universal Reset ── */
1256
+
1257
+ *,
1258
+ *::before,
1259
+ *::after {
1260
+ box-sizing: border-box;
1261
+ margin: 0;
1262
+ }
1263
+
1264
+ /* WHY: UA [hidden]{display:none} loses to author-layer :where() display values.
1265
+ Real specificity (0,1,0) ensures [hidden] always wins over :where() components. */
1266
+ [hidden] {
1267
+ display: none;
1268
+ }
1269
+
1270
+ /* ── Document Defaults ── */
1271
+
1272
+ :where(:root) {
1273
+ color-scheme: light dark;
1274
+ -webkit-font-smoothing: antialiased;
1275
+ -moz-osx-font-smoothing: grayscale;
1276
+ text-rendering: optimizeLegibility;
1277
+ }
1278
+
1279
+ :where(body) {
1280
+ font-family: system-ui, -apple-system, sans-serif;
1281
+ line-height: var(--ui-line-height-text);
1282
+ background: var(--neutral-doc);
1283
+ color: var(--neutral-ink);
1284
+ min-height: 100dvh;
1285
+ }
1286
+
1287
+ /* ── Control Defaults ──
1288
+ All interactive/control-like elements default to nowrap so labels
1289
+ never line-break. Uses :where() for zero specificity — components
1290
+ that need wrapping (e.g. ui-textarea) can override freely. */
1291
+
1292
+ :where(
1293
+ button, [role="button"], .ui-btn,
1294
+ ui-button, ui-input, ui-select, ui-combobox,
1295
+ ui-checkbox, ui-switch, ui-range,
1296
+ ui-badge, ui-tab, ui-option, ui-command-item,
1297
+ ui-segmented-control
1298
+ ) {
1299
+ white-space: nowrap;
1300
+ }
1301
+
1302
+ /* ── Transition Defaults ──
1303
+ Standard 5-property transition for interactive components.
1304
+ Components inherit this automatically — override --_duration / --_easing
1305
+ locally if needed, or set transition: none for instant response. */
1306
+
1307
+ :where(
1308
+ ui-button, ui-input, ui-textarea,
1309
+ ui-option, ui-command-item,
1310
+ ui-listbox, ui-command,
1311
+ ui-select, ui-combobox,
1312
+ ui-segmented-control, ui-segment,
1313
+ ui-tab, ui-accordion-item,
1314
+ ui-tree-item, ui-nav-item,
1315
+ ui-breadcrumb-item, ui-table-row,
1316
+ ui-calendar, ui-range,
1317
+ ui-card, ui-slideshow
1318
+ ) {
1319
+ transition:
1320
+ background var(--_duration) var(--_easing),
1321
+ color var(--_duration) var(--_easing),
1322
+ border-color var(--_duration) var(--_easing),
1323
+ opacity var(--_duration) var(--_easing),
1324
+ transform var(--_duration) var(--_easing);
1325
+ }
1326
+
1327
+
1328
+
1329
+ /* ── Popover Anchor Positioning ──
1330
+ Shared anchor-to-trigger positioning for dropdown popovers.
1331
+ Coordinators (select, combobox) use this for their popover listbox. */
1332
+
1333
+ :where(ui-select) > :where(ui-listbox[popover]),
1334
+ :where(ui-combobox) > :where(ui-listbox[popover]) {
1335
+ position: fixed;
1336
+ position-area: block-end span-inline-end;
1337
+ position-try-fallbacks: flip-block;
1338
+ margin: var(--ui-popover-gap) 0 0;
1339
+ min-width: anchor-size(inline);
1340
+ max-height: var(--ui-popover-max-height);
1341
+ overflow-y: auto;
1342
+ }
1343
+
1344
+ /* ── Container-Level Disabled ──
1345
+ Containers that disable all children use aria-disabled="true".
1346
+ Disabled colors propagate via inheritance — children inherit the muted text.
1347
+ Components with additional disabled styles (cursor, bg) keep their own rules. */
1348
+
1349
+ :where(
1350
+ ui-listbox, ui-command,
1351
+ ui-segmented-control, ui-tabs,
1352
+ ui-accordion, ui-tree,
1353
+ ui-calendar, ui-pagination, ui-nav
1354
+ )[aria-disabled="true"] {
1355
+ color: var(--_ink-disabled);
1356
+ pointer-events: none;
1357
+ }
1358
+
1359
+ /* ── Scroll Defaults ──
1360
+ Modern scroll styling for all scrollable surfaces.
1361
+ scrollbar-width: thin — narrow track, less visual noise.
1362
+ scrollbar-color — thumb from neutral border, transparent track.
1363
+ overscroll-behavior: contain — prevents scroll chaining on overlays. */
1364
+
1365
+ :where(
1366
+ ui-listbox, ui-command-list,
1367
+ ui-textarea, ui-drawer
1368
+ ) {
1369
+ scrollbar-width: thin;
1370
+ scrollbar-color: var(--neutral-border-muted) transparent;
1371
+ }
1372
+
1373
+ :where(
1374
+ ui-listbox[popover],
1375
+ ui-drawer,
1376
+ ui-dialog > dialog
1377
+ ) {
1378
+ overscroll-behavior: contain;
1379
+ }
1380
+
1381
+ /* ── Reduced Motion ── */
1382
+
1383
+ @media (prefers-reduced-motion: reduce) {
1384
+ :root {
1385
+ --ui-duration: 0s;
1386
+ }
1387
+ }
1388
+ }
1389
+
1390
+ /* ================================================================
1391
+ nonoun-css UI Primitives
1392
+
1393
+ Three-tier token architecture:
1394
+ 1. Public (--ui-*) — themeable scale definitions on :root
1395
+ 2. Local (--_*) — resolved by attribute selectors
1396
+ 3. Component — reads locals directly
1397
+
1398
+ Intent/variant selectors map color tokens to --_background/--_color/--_border-color.
1399
+ All attribute selectors use :where() for zero specificity.
1400
+ ================================================================ */
1401
+
1402
+ @layer ui {
1403
+ /* ── Tier 1: Public Scale + Local Defaults (md) ── */
1404
+
1405
+ :root {
1406
+ /* Scale: xs */
1407
+ --ui-size-xs: 1.5rem;
1408
+ --ui-font-xs: 0.75rem;
1409
+ --ui-tracking-xs: 0.01em;
1410
+ --ui-space-xs: 0.125rem;
1411
+
1412
+ /* Scale: sm */
1413
+ --ui-size-sm: 1.75rem;
1414
+ --ui-font-sm: 0.8125rem;
1415
+ --ui-tracking-sm: 0.005em;
1416
+ --ui-space-sm: 0.1875rem;
1417
+
1418
+ /* Scale: md (default) */
1419
+ --ui-size-md: 2.25rem;
1420
+ --ui-font-md: 0.875rem;
1421
+ --ui-tracking-md: 0em;
1422
+ --ui-space-md: 0.25rem;
1423
+ --ui-radius-md: 0.75rem;
1424
+
1425
+ /* Scale: lg */
1426
+ --ui-size-lg: 2.75rem;
1427
+ --ui-font-lg: 0.9375rem;
1428
+ --ui-tracking-lg: -0.005em;
1429
+ --ui-space-lg: 0.25rem;
1430
+
1431
+ /* Scale: xl */
1432
+ --ui-size-xl: 3.25rem;
1433
+ --ui-font-xl: 1rem;
1434
+ --ui-tracking-xl: -0.01em;
1435
+ --ui-space-xl: 0.25rem;
1436
+
1437
+ /* Icon sizes */
1438
+ --ui-icon-xs: 0.75rem;
1439
+ --ui-icon-sm: 0.875rem;
1440
+ --ui-icon-md: 1rem;
1441
+ --ui-icon-lg: 1.125rem;
1442
+ --ui-icon-xl: 1.25rem;
1443
+
1444
+ /* Radius: sharp + round caps */
1445
+ --ui-radius-sharp: 0.125rem;
1446
+ --ui-radius-round: 1.125rem;
1447
+
1448
+ /* Typography */
1449
+ --ui-font-weight-button: 500;
1450
+ --ui-font-weight-input: 400;
1451
+ --ui-font-weight-text: 400;
1452
+ --ui-line-height-control: 1;
1453
+ --ui-line-height-text: 1.5;
1454
+
1455
+ /* Animation */
1456
+ --ui-duration: 0.225s;
1457
+ --ui-easing: cubic-bezier(0.2, 0, 0, 1);
1458
+
1459
+ /* Tooltip */
1460
+ --ui-tooltip-max-width: 20rem;
1461
+
1462
+ /* Popover (select / combobox / command) */
1463
+ --ui-popover-max-height: 18rem;
1464
+ --ui-popover-gap: 0.25rem;
1465
+
1466
+ /* Drawer */
1467
+ --ui-drawer-width: 24rem;
1468
+ --ui-drawer-height: 24rem;
1469
+
1470
+ /* Layout sidebar */
1471
+ --ui-layout-sidebar-width: 240px;
1472
+
1473
+ /* Bar height (header, breadcrumb, sidebar header/footer) */
1474
+ --ui-layout-bar-height: 3.5rem;
1475
+
1476
+ /* Toggle widgets (checkbox / radio / switch / range) */
1477
+ --ui-widget-xs: 0.75rem;
1478
+ --ui-widget-sm: 1rem;
1479
+ --ui-widget-md: 1.25rem;
1480
+ --ui-widget-lg: 1.5rem;
1481
+ --ui-widget-xl: 1.75rem;
1482
+
1483
+ /* Badge */
1484
+ --ui-badge-font-xs: 0.5625rem;
1485
+ --ui-badge-font-sm: 0.625rem;
1486
+ --ui-badge-font-md: 0.625rem;
1487
+ --ui-badge-font-lg: 0.625rem;
1488
+ --ui-badge-font-xl: 0.75rem;
1489
+ --ui-badge-size-xs: 0.875rem;
1490
+ --ui-badge-size-sm: 1rem;
1491
+ --ui-badge-size-md: 1.125rem;
1492
+ --ui-badge-size-lg: 1.25rem;
1493
+ --ui-badge-size-xl: 1.375rem;
1494
+ --ui-badge-dot: 0.5rem;
1495
+
1496
+ /* Group header (option-group, table category) */
1497
+ --ui-group-header-font: 0.625rem;
1498
+
1499
+ /* Tabs indicator */
1500
+ --ui-tabs-indicator: 2px;
1501
+
1502
+ /* Focus ring */
1503
+ --ui-focus-ring: var(--accent-600-scrim);
1504
+
1505
+ /* Backdrop */
1506
+ --ui-backdrop-color: oklch(0% 0 0);
1507
+ --ui-backdrop-opacity: 0.3;
1508
+
1509
+ /* Shadows */
1510
+ --ui-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.06), 0 1px 3px oklch(0% 0 0 / 0.1);
1511
+ --ui-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.12);
1512
+ --ui-shadow-md: 0 2px 4px oklch(0% 0 0 / 0.08), 0 4px 12px oklch(0% 0 0 / 0.12);
1513
+ --ui-shadow-lg: 0 8px 32px oklch(0% 0 0 / 0.15);
1514
+ --ui-shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.15);
1515
+
1516
+ /* Local defaults (md) */
1517
+ --_min-height: var(--ui-size-md);
1518
+ --_font-size: var(--ui-font-md);
1519
+ --_letter-spacing: var(--ui-tracking-md);
1520
+ --_space: var(--ui-space-md);
1521
+ --_radius: min(calc(var(--_min-height) / 2), var(--ui-radius-round));
1522
+ --_space-k: 4;
1523
+ --_line-height: var(--ui-line-height-text);
1524
+ --_font-weight: var(--ui-font-weight-text);
1525
+ --_duration: var(--ui-duration);
1526
+ --_easing: var(--ui-easing);
1527
+ --_icon-size: var(--ui-icon-md);
1528
+ --_widget-size: var(--ui-widget-md);
1529
+ }
1530
+
1531
+ /* ── Tier 2: Size ── */
1532
+
1533
+ :where([size="xs"]) {
1534
+ --_min-height: var(--ui-size-xs);
1535
+ --_font-size: var(--ui-font-xs);
1536
+ --_letter-spacing: var(--ui-tracking-xs);
1537
+ --_space: var(--ui-space-xs);
1538
+ --_icon-size: var(--ui-icon-xs);
1539
+ --_widget-size: var(--ui-widget-xs);
1540
+ font-size: var(--_font-size);
1541
+ letter-spacing: var(--_letter-spacing);
1542
+ }
1543
+
1544
+ :where([size="sm"]) {
1545
+ --_min-height: var(--ui-size-sm);
1546
+ --_font-size: var(--ui-font-sm);
1547
+ --_letter-spacing: var(--ui-tracking-sm);
1548
+ --_space: var(--ui-space-sm);
1549
+ --_icon-size: var(--ui-icon-sm);
1550
+ --_widget-size: var(--ui-widget-sm);
1551
+ font-size: var(--_font-size);
1552
+ letter-spacing: var(--_letter-spacing);
1553
+ }
1554
+
1555
+ :where([size="md"]) {
1556
+ --_min-height: var(--ui-size-md);
1557
+ --_font-size: var(--ui-font-md);
1558
+ --_letter-spacing: var(--ui-tracking-md);
1559
+ --_space: var(--ui-space-md);
1560
+ --_icon-size: var(--ui-icon-md);
1561
+ --_widget-size: var(--ui-widget-md);
1562
+ font-size: var(--_font-size);
1563
+ letter-spacing: var(--_letter-spacing);
1564
+ }
1565
+
1566
+ :where([size="lg"]) {
1567
+ --_min-height: var(--ui-size-lg);
1568
+ --_font-size: var(--ui-font-lg);
1569
+ --_letter-spacing: var(--ui-tracking-lg);
1570
+ --_space: var(--ui-space-lg);
1571
+ --_icon-size: var(--ui-icon-lg);
1572
+ --_widget-size: var(--ui-widget-lg);
1573
+ font-size: var(--_font-size);
1574
+ letter-spacing: var(--_letter-spacing);
1575
+ }
1576
+
1577
+ :where([size="xl"]) {
1578
+ --_min-height: var(--ui-size-xl);
1579
+ --_font-size: var(--ui-font-xl);
1580
+ --_letter-spacing: var(--ui-tracking-xl);
1581
+ --_space: var(--ui-space-xl);
1582
+ --_icon-size: var(--ui-icon-xl);
1583
+ --_widget-size: var(--ui-widget-xl);
1584
+ font-size: var(--_font-size);
1585
+ letter-spacing: var(--_letter-spacing);
1586
+ }
1587
+
1588
+ /* ── Tier 2: Density ── */
1589
+
1590
+ :where([density="compact"]) { --_space-k: 2; }
1591
+ :where([density="default"]) { --_space-k: 4; }
1592
+ :where([density="loose"]) { --_space-k: 6; }
1593
+
1594
+ /* ── Tier 2: Radius ── */
1595
+
1596
+ :where([radius="round"]) {
1597
+ --_radius: min(calc(var(--_min-height) / 2), var(--ui-radius-round));
1598
+ }
1599
+ :where([radius="rounded"]) {
1600
+ --_radius: calc(var(--_space) * 2);
1601
+ }
1602
+ :where([radius="sharp"]) {
1603
+ --_radius: var(--ui-radius-sharp);
1604
+ }
1605
+
1606
+ /* ── Intent (maps to color token families) ── */
1607
+
1608
+ :root {
1609
+ --_card: var(--neutral-card);
1610
+ --_card-hover: var(--neutral-card-hover);
1611
+
1612
+ --_panel: var(--neutral-panel);
1613
+ --_panel-hover: var(--neutral-panel-hover);
1614
+ --_panel-active: var(--neutral-panel-active);
1615
+ --_panel-disabled: var(--neutral-panel-disabled);
1616
+
1617
+ --_button: var(--neutral-button);
1618
+ --_button-hover: var(--neutral-button-hover);
1619
+ --_button-active: var(--neutral-button-active);
1620
+ --_button-disabled: var(--neutral-button-disabled);
1621
+
1622
+ --_control: var(--neutral-control);
1623
+ --_control-hover: var(--neutral-control-hover);
1624
+ --_control-active: var(--neutral-control-active);
1625
+ --_control-disabled: var(--neutral-control-disabled);
1626
+
1627
+ --_widget: var(--neutral-higher);
1628
+ --_widget-hover: var(--neutral-control-hover);
1629
+ --_widget-active: var(--neutral-control-active);
1630
+ --_widget-disabled: var(--neutral-control-disabled);
1631
+
1632
+ --_surface: var(--neutral-surface);
1633
+ --_surface-hover: var(--neutral-surface-hover);
1634
+ --_surface-active: var(--neutral-surface-active);
1635
+ --_surface-disabled: var(--neutral-surface-disabled);
1636
+
1637
+ --_surface-ink: var(--neutral-surface-ink);
1638
+ --_surface-ink-hover: var(--neutral-surface-ink-hover);
1639
+ --_surface-ink-active: var(--neutral-surface-ink-active);
1640
+ --_surface-ink-disabled: var(--neutral-surface-ink-disabled);
1641
+
1642
+ --_border: var(--neutral-border);
1643
+ --_border-hover: var(--neutral-border-hover);
1644
+ --_border-active: var(--neutral-border-active);
1645
+ --_border-disabled: var(--neutral-highest);
1646
+ --_border-muted: var(--neutral-border-muted);
1647
+ --_border-rest: var(--neutral-highest);
1648
+
1649
+
1650
+ --_ink: var(--neutral-ink);
1651
+ --_ink-strong: var(--neutral-ink-strong);
1652
+ --_ink-inverse: var(--neutral-ink-inverse);
1653
+ --_ink-muted: var(--neutral-ink-muted);
1654
+ --_ink-placeholder: var(--neutral-ink-placeholder);
1655
+ --_ink-hover: var(--neutral-ink-hover);
1656
+ --_ink-active: var(--neutral-ink-active);
1657
+ --_ink-disabled: var(--neutral-ink-disabled);
1658
+ }
1659
+
1660
+ :where([intent="neutral"]) {
1661
+ --_card: var(--neutral-card);
1662
+ --_card-hover: var(--neutral-card-hover);
1663
+ --_panel: var(--neutral-panel);
1664
+ --_panel-hover: var(--neutral-panel-hover);
1665
+ --_panel-active: var(--neutral-panel-active);
1666
+ --_panel-disabled: var(--neutral-panel-disabled);
1667
+ --_button: var(--neutral-button);
1668
+ --_button-hover: var(--neutral-button-hover);
1669
+ --_button-active: var(--neutral-button-active);
1670
+ --_button-disabled: var(--neutral-button-disabled);
1671
+ --_control: var(--neutral-control);
1672
+ --_control-hover: var(--neutral-control-hover);
1673
+ --_control-active: var(--neutral-control-active);
1674
+ --_control-disabled: var(--neutral-control-disabled);
1675
+ --_widget: var(--neutral-higher);
1676
+ --_widget-hover: var(--neutral-control-hover);
1677
+ --_widget-active: var(--neutral-control-active);
1678
+ --_widget-disabled: var(--neutral-control-disabled);
1679
+ --_surface: var(--neutral-surface);
1680
+ --_surface-hover: var(--neutral-surface-hover);
1681
+ --_surface-active: var(--neutral-surface-active);
1682
+ --_surface-disabled: var(--neutral-surface-disabled);
1683
+ --_surface-ink: var(--neutral-surface-ink);
1684
+ --_surface-ink-hover: var(--neutral-surface-ink-hover);
1685
+ --_surface-ink-active: var(--neutral-surface-ink-active);
1686
+ --_surface-ink-disabled: var(--neutral-surface-ink-disabled);
1687
+ --_border: var(--neutral-border);
1688
+ --_border-hover: var(--neutral-border-hover);
1689
+ --_border-active: var(--neutral-border-active);
1690
+ --_border-disabled: var(--neutral-highest);
1691
+ --_border-muted: var(--neutral-border-muted);
1692
+ --_ink: var(--neutral-ink);
1693
+ --_ink-strong: var(--neutral-ink-strong);
1694
+ --_ink-inverse: var(--neutral-ink-inverse);
1695
+ --_ink-muted: var(--neutral-ink-muted);
1696
+ --_ink-placeholder: var(--neutral-ink-placeholder);
1697
+ --_ink-hover: var(--neutral-ink-hover);
1698
+ --_ink-active: var(--neutral-ink-active);
1699
+ --_ink-disabled: var(--neutral-ink-disabled);
1700
+ }
1701
+
1702
+ :where([intent="accent"]) {
1703
+ --_card: var(--accent-card);
1704
+ --_card-hover: var(--accent-card-hover);
1705
+ --_panel: var(--accent-panel);
1706
+ --_panel-hover: var(--accent-panel-hover);
1707
+ --_panel-active: var(--accent-panel-active);
1708
+ --_panel-disabled: var(--accent-panel-disabled);
1709
+ --_button: var(--accent-button);
1710
+ --_button-hover: var(--accent-button-hover);
1711
+ --_button-active: var(--accent-button-active);
1712
+ --_button-disabled: var(--accent-button-disabled);
1713
+ --_control: var(--accent-control);
1714
+ --_control-hover: var(--accent-control-hover);
1715
+ --_control-active: var(--accent-control-active);
1716
+ --_control-disabled: var(--accent-control-disabled);
1717
+ --_widget: var(--accent-higher);
1718
+ --_widget-hover: var(--accent-control-hover);
1719
+ --_widget-active: var(--accent-control-active);
1720
+ --_widget-disabled: var(--accent-control-disabled);
1721
+ --_surface: var(--accent-surface);
1722
+ --_surface-hover: var(--accent-surface-hover);
1723
+ --_surface-active: var(--accent-surface-active);
1724
+ --_surface-disabled: var(--accent-surface-disabled);
1725
+ --_surface-ink: var(--accent-surface-ink);
1726
+ --_surface-ink-hover: var(--accent-surface-ink-hover);
1727
+ --_surface-ink-active: var(--accent-surface-ink-active);
1728
+ --_surface-ink-disabled: var(--accent-surface-ink-disabled);
1729
+ --_border: var(--accent-border);
1730
+ --_border-hover: var(--accent-border-hover);
1731
+ --_border-active: var(--accent-border-active);
1732
+ --_border-disabled: var(--neutral-highest);
1733
+ --_border-muted: var(--accent-border-muted);
1734
+ --_ink: var(--accent-ink);
1735
+ --_ink-strong: var(--accent-ink-strong);
1736
+ --_ink-inverse: var(--accent-ink-inverse);
1737
+ --_ink-muted: var(--accent-ink-muted);
1738
+ --_ink-placeholder: var(--accent-ink-placeholder);
1739
+ --_ink-hover: var(--accent-ink-hover);
1740
+ --_ink-active: var(--accent-ink-active);
1741
+ --_ink-disabled: var(--accent-ink-disabled);
1742
+ }
1743
+
1744
+ :where([intent="info"]) {
1745
+ --_card: var(--info-card);
1746
+ --_card-hover: var(--info-card-hover);
1747
+ --_panel: var(--info-panel);
1748
+ --_panel-hover: var(--info-panel-hover);
1749
+ --_panel-active: var(--info-panel-active);
1750
+ --_panel-disabled: var(--info-panel-disabled);
1751
+ --_button: var(--info-button);
1752
+ --_button-hover: var(--info-button-hover);
1753
+ --_button-active: var(--info-button-active);
1754
+ --_button-disabled: var(--info-button-disabled);
1755
+ --_control: var(--info-control);
1756
+ --_control-hover: var(--info-control-hover);
1757
+ --_control-active: var(--info-control-active);
1758
+ --_control-disabled: var(--info-control-disabled);
1759
+ --_widget: var(--info-higher);
1760
+ --_widget-hover: var(--info-control-hover);
1761
+ --_widget-active: var(--info-control-active);
1762
+ --_widget-disabled: var(--info-control-disabled);
1763
+ --_surface: var(--info-surface);
1764
+ --_surface-hover: var(--info-surface-hover);
1765
+ --_surface-active: var(--info-surface-active);
1766
+ --_surface-disabled: var(--info-surface-disabled);
1767
+ --_surface-ink: var(--info-surface-ink);
1768
+ --_surface-ink-hover: var(--info-surface-ink-hover);
1769
+ --_surface-ink-active: var(--info-surface-ink-active);
1770
+ --_surface-ink-disabled: var(--info-surface-ink-disabled);
1771
+ --_border: var(--info-border);
1772
+ --_border-hover: var(--info-border-hover);
1773
+ --_border-active: var(--info-border-active);
1774
+ --_border-disabled: var(--neutral-highest);
1775
+ --_border-muted: var(--info-border-muted);
1776
+ --_ink: var(--info-ink);
1777
+ --_ink-strong: var(--info-ink-strong);
1778
+ --_ink-inverse: var(--info-ink-inverse);
1779
+ --_ink-muted: var(--info-ink-muted);
1780
+ --_ink-placeholder: var(--info-ink-placeholder);
1781
+ --_ink-hover: var(--info-ink-hover);
1782
+ --_ink-active: var(--info-ink-active);
1783
+ --_ink-disabled: var(--info-ink-disabled);
1784
+ }
1785
+
1786
+ :where([intent="success"]) {
1787
+ --_card: var(--success-card);
1788
+ --_card-hover: var(--success-card-hover);
1789
+ --_panel: var(--success-panel);
1790
+ --_panel-hover: var(--success-panel-hover);
1791
+ --_panel-active: var(--success-panel-active);
1792
+ --_panel-disabled: var(--success-panel-disabled);
1793
+ --_button: var(--success-button);
1794
+ --_button-hover: var(--success-button-hover);
1795
+ --_button-active: var(--success-button-active);
1796
+ --_button-disabled: var(--success-button-disabled);
1797
+ --_control: var(--success-control);
1798
+ --_control-hover: var(--success-control-hover);
1799
+ --_control-active: var(--success-control-active);
1800
+ --_control-disabled: var(--success-control-disabled);
1801
+ --_widget: var(--success-higher);
1802
+ --_widget-hover: var(--success-control-hover);
1803
+ --_widget-active: var(--success-control-active);
1804
+ --_widget-disabled: var(--success-control-disabled);
1805
+ --_surface: var(--success-surface);
1806
+ --_surface-hover: var(--success-surface-hover);
1807
+ --_surface-active: var(--success-surface-active);
1808
+ --_surface-disabled: var(--success-surface-disabled);
1809
+ --_surface-ink: var(--success-surface-ink);
1810
+ --_surface-ink-hover: var(--success-surface-ink-hover);
1811
+ --_surface-ink-active: var(--success-surface-ink-active);
1812
+ --_surface-ink-disabled: var(--success-surface-ink-disabled);
1813
+ --_border: var(--success-border);
1814
+ --_border-hover: var(--success-border-hover);
1815
+ --_border-active: var(--success-border-active);
1816
+ --_border-disabled: var(--neutral-highest);
1817
+ --_border-muted: var(--success-border-muted);
1818
+ --_ink: var(--success-ink);
1819
+ --_ink-strong: var(--success-ink-strong);
1820
+ --_ink-inverse: var(--success-ink-inverse);
1821
+ --_ink-muted: var(--success-ink-muted);
1822
+ --_ink-placeholder: var(--success-ink-placeholder);
1823
+ --_ink-hover: var(--success-ink-hover);
1824
+ --_ink-active: var(--success-ink-active);
1825
+ --_ink-disabled: var(--success-ink-disabled);
1826
+ }
1827
+
1828
+ :where([intent="warning"]) {
1829
+ --_card: var(--warning-card);
1830
+ --_card-hover: var(--warning-card-hover);
1831
+ --_panel: var(--warning-panel);
1832
+ --_panel-hover: var(--warning-panel-hover);
1833
+ --_panel-active: var(--warning-panel-active);
1834
+ --_panel-disabled: var(--warning-panel-disabled);
1835
+ --_button: var(--warning-button);
1836
+ --_button-hover: var(--warning-button-hover);
1837
+ --_button-active: var(--warning-button-active);
1838
+ --_button-disabled: var(--warning-button-disabled);
1839
+ --_control: var(--warning-control);
1840
+ --_control-hover: var(--warning-control-hover);
1841
+ --_control-active: var(--warning-control-active);
1842
+ --_control-disabled: var(--warning-control-disabled);
1843
+ --_widget: var(--warning-higher);
1844
+ --_widget-hover: var(--warning-control-hover);
1845
+ --_widget-active: var(--warning-control-active);
1846
+ --_widget-disabled: var(--warning-control-disabled);
1847
+ --_surface: var(--warning-surface);
1848
+ --_surface-hover: var(--warning-surface-hover);
1849
+ --_surface-active: var(--warning-surface-active);
1850
+ --_surface-disabled: var(--warning-surface-disabled);
1851
+ --_surface-ink: var(--warning-surface-ink);
1852
+ --_surface-ink-hover: var(--warning-surface-ink-hover);
1853
+ --_surface-ink-active: var(--warning-surface-ink-active);
1854
+ --_surface-ink-disabled: var(--warning-surface-ink-disabled);
1855
+ --_border: var(--warning-border);
1856
+ --_border-hover: var(--warning-border-hover);
1857
+ --_border-active: var(--warning-border-active);
1858
+ --_border-disabled: var(--neutral-highest);
1859
+ --_border-muted: var(--warning-border-muted);
1860
+ --_ink: var(--warning-ink);
1861
+ --_ink-strong: var(--warning-ink-strong);
1862
+ --_ink-inverse: var(--warning-ink-inverse);
1863
+ --_ink-muted: var(--warning-ink-muted);
1864
+ --_ink-placeholder: var(--warning-ink-placeholder);
1865
+ --_ink-hover: var(--warning-ink-hover);
1866
+ --_ink-active: var(--warning-ink-active);
1867
+ --_ink-disabled: var(--warning-ink-disabled);
1868
+ }
1869
+
1870
+ :where([intent="danger"]) {
1871
+ --_card: var(--danger-card);
1872
+ --_card-hover: var(--danger-card-hover);
1873
+ --_panel: var(--danger-panel);
1874
+ --_panel-hover: var(--danger-panel-hover);
1875
+ --_panel-active: var(--danger-panel-active);
1876
+ --_panel-disabled: var(--danger-panel-disabled);
1877
+ --_button: var(--danger-button);
1878
+ --_button-hover: var(--danger-button-hover);
1879
+ --_button-active: var(--danger-button-active);
1880
+ --_button-disabled: var(--danger-button-disabled);
1881
+ --_control: var(--danger-control);
1882
+ --_control-hover: var(--danger-control-hover);
1883
+ --_control-active: var(--danger-control-active);
1884
+ --_control-disabled: var(--danger-control-disabled);
1885
+ --_widget: var(--danger-higher);
1886
+ --_widget-hover: var(--danger-control-hover);
1887
+ --_widget-active: var(--danger-control-active);
1888
+ --_widget-disabled: var(--danger-control-disabled);
1889
+ --_surface: var(--danger-surface);
1890
+ --_surface-hover: var(--danger-surface-hover);
1891
+ --_surface-active: var(--danger-surface-active);
1892
+ --_surface-disabled: var(--danger-surface-disabled);
1893
+ --_surface-ink: var(--danger-surface-ink);
1894
+ --_surface-ink-hover: var(--danger-surface-ink-hover);
1895
+ --_surface-ink-active: var(--danger-surface-ink-active);
1896
+ --_surface-ink-disabled: var(--danger-surface-ink-disabled);
1897
+ --_border: var(--danger-border);
1898
+ --_border-hover: var(--danger-border-hover);
1899
+ --_border-active: var(--danger-border-active);
1900
+ --_border-disabled: var(--neutral-highest);
1901
+ --_border-muted: var(--danger-border-muted);
1902
+ --_ink: var(--danger-ink);
1903
+ --_ink-strong: var(--danger-ink-strong);
1904
+ --_ink-inverse: var(--danger-ink-inverse);
1905
+ --_ink-muted: var(--danger-ink-muted);
1906
+ --_ink-placeholder: var(--danger-ink-placeholder);
1907
+ --_ink-hover: var(--danger-ink-hover);
1908
+ --_ink-active: var(--danger-ink-active);
1909
+ --_ink-disabled: var(--danger-ink-disabled);
1910
+ }
1911
+
1912
+ /* ── Variant (maps intent colors to --_background/--_color/--_border-color) ── */
1913
+
1914
+ :where([variant="primary"]) {
1915
+ --_background: var(--_surface);
1916
+ --_background-hover: var(--_surface-hover);
1917
+ --_background-active: var(--_surface-active);
1918
+ --_background-disabled: var(--_surface-disabled);
1919
+ --_color: var(--_surface-ink);
1920
+ --_color-hover: var(--_surface-ink-hover);
1921
+ --_color-active: var(--_surface-ink-active);
1922
+ --_color-disabled: var(--_surface-ink-disabled);
1923
+ --_border-color: transparent;
1924
+ --_border-color-hover: transparent;
1925
+ --_border-color-active: transparent;
1926
+ --_border-color-disabled: transparent;
1927
+ }
1928
+
1929
+ :where([variant="secondary"]) {
1930
+ --_background: var(--_button);
1931
+ --_background-hover: var(--_button-hover);
1932
+ --_background-active: var(--_button-active);
1933
+ --_background-disabled: var(--_button-disabled);
1934
+ --_color: var(--_ink);
1935
+ --_color-hover: var(--_ink-hover);
1936
+ --_color-active: var(--_ink-active);
1937
+ --_color-disabled: var(--_ink-disabled);
1938
+ --_border-color: var(--_border-muted);
1939
+ --_border-color-hover: var(--_border-hover);
1940
+ --_border-color-active: var(--_border-active);
1941
+ --_border-color-disabled: var(--_border-disabled);
1942
+ }
1943
+
1944
+ :where([variant="default"]) {
1945
+ --_background: var(--neutral-button);
1946
+ --_background-hover: var(--neutral-button-hover);
1947
+ --_background-active: var(--neutral-button-active);
1948
+ --_background-disabled: var(--neutral-button-disabled);
1949
+ --_color: var(--_ink);
1950
+ --_color-hover: var(--_ink-hover);
1951
+ --_color-active: var(--_ink-active);
1952
+ --_color-disabled: var(--_ink-disabled);
1953
+ --_border-color: var(--neutral-border-muted);
1954
+ --_border-color-hover: var(--neutral-border-hover);
1955
+ --_border-color-active: var(--neutral-border-active);
1956
+ --_border-color-disabled: var(--_border-disabled);
1957
+ }
1958
+
1959
+ :where([variant="ghost"]) {
1960
+ --_background: transparent;
1961
+ --_background-hover: transparent;
1962
+ --_background-active: transparent;
1963
+ --_background-disabled: transparent;
1964
+ --_color: var(--_ink);
1965
+ --_color-hover: var(--_ink-hover);
1966
+ --_color-active: var(--_ink-active);
1967
+ --_color-disabled: var(--_ink-disabled);
1968
+ --_border-color: transparent;
1969
+ --_border-color-hover: transparent;
1970
+ --_border-color-active: transparent;
1971
+ --_border-color-disabled: transparent;
1972
+ }
1973
+
1974
+ :where([variant="outline"]) {
1975
+ --_background: transparent;
1976
+ --_background-hover: var(--_panel-hover);
1977
+ --_background-active: var(--_panel-active);
1978
+ --_background-disabled: transparent;
1979
+ --_color: var(--_ink);
1980
+ --_color-hover: var(--_ink-hover);
1981
+ --_color-active: var(--_ink-active);
1982
+ --_color-disabled: var(--_ink-disabled);
1983
+ --_border-color: var(--_border);
1984
+ --_border-color-hover: var(--_border-hover);
1985
+ --_border-color-active: var(--_border-active);
1986
+ --_border-color-disabled: var(--_border-disabled);
1987
+ }
1988
+
1989
+ :where([variant="selected"]) {
1990
+ --_background: white;
1991
+ --_background-hover: var(--_panel-hover);
1992
+ --_background-active: var(--_panel-active);
1993
+ --_background-disabled: var(--_panel-disabled);
1994
+ --_color: var(--_ink-inverse);
1995
+ --_color-hover: var(--_ink-hover);
1996
+ --_color-active: var(--_ink-active);
1997
+ --_color-disabled: var(--_ink-disabled);
1998
+ --_border-color: transparent;
1999
+ --_border-color-hover: var(--_border-hover);
2000
+ --_border-color-active: var(--_border-active);
2001
+ --_border-color-disabled: var(--_border-disabled);
2002
+ }
2003
+ }