@felloinnovations/brand-kit 0.4.0 → 0.5.1

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 (363) hide show
  1. package/AGENTS.md +198 -24
  2. package/CHANGELOG.md +221 -0
  3. package/README.md +38 -9
  4. package/design-system/01-how-claude-decides.md +26 -17
  5. package/design-system/02-principles.md +11 -6
  6. package/design-system/03-colour.md +135 -47
  7. package/design-system/04-type.md +45 -23
  8. package/design-system/05-space-and-layout.md +175 -52
  9. package/design-system/06-sizing-profiles.md +4 -4
  10. package/design-system/07-scrolling.md +66 -20
  11. package/design-system/08-choosing-components.md +50 -22
  12. package/design-system/09-charts.md +71 -28
  13. package/design-system/10-patterns.md +33 -10
  14. package/design-system/11-page-recipes.md +110 -23
  15. package/design-system/12-content.md +2 -1
  16. package/design-system/13-motion.md +330 -47
  17. package/design-system/14-accessibility.md +47 -24
  18. package/design-system/15-ai-experiences.md +11 -6
  19. package/design-system/16-creativity.md +1 -1
  20. package/design-system/17-decisions.md +367 -1
  21. package/design-system/18-checklist.md +79 -16
  22. package/design-system/19-public-pages.md +6 -4
  23. package/design-system/20-palettes.md +275 -0
  24. package/design-system/README.md +30 -17
  25. package/design-system/components/ActionList/README.md +96 -10
  26. package/design-system/components/ActionList/preview.html +52 -7
  27. package/design-system/components/ActionList/style.css +64 -0
  28. package/design-system/components/ActivityGrid/README.md +38 -2
  29. package/design-system/components/ActivityGrid/preview.html +1 -1
  30. package/design-system/components/ActivityGrid/style.css +35 -0
  31. package/design-system/components/AppShell/README.md +205 -75
  32. package/design-system/components/AppShell/preview.html +339 -58
  33. package/design-system/components/AppShell/style.css +154 -0
  34. package/design-system/components/Avatar/README.md +37 -10
  35. package/design-system/components/Avatar/preview.html +13 -4
  36. package/design-system/components/Avatar/style.css +14 -0
  37. package/design-system/components/Badge/README.md +41 -19
  38. package/design-system/components/Badge/preview.html +13 -10
  39. package/design-system/components/Badge/style.css +23 -0
  40. package/design-system/components/Banner/README.md +30 -9
  41. package/design-system/components/Banner/preview.html +1 -1
  42. package/design-system/components/Banner/style.css +19 -0
  43. package/design-system/components/Breadcrumb/README.md +58 -46
  44. package/design-system/components/Breadcrumb/preview.html +16 -16
  45. package/design-system/components/Breadcrumb/style.css +17 -0
  46. package/design-system/components/Button/README.md +113 -55
  47. package/design-system/components/Button/preview.html +98 -25
  48. package/design-system/components/Button/style.css +86 -0
  49. package/design-system/components/Card/README.md +158 -49
  50. package/design-system/components/Card/preview.html +141 -19
  51. package/design-system/components/Card/style.css +115 -0
  52. package/design-system/components/CardBoard/README.md +58 -37
  53. package/design-system/components/CardBoard/preview.html +26 -29
  54. package/design-system/components/ChatCard/README.md +115 -29
  55. package/design-system/components/ChatCard/preview.html +149 -32
  56. package/design-system/components/ChatCard/style.css +49 -0
  57. package/design-system/components/ChatShell/README.md +116 -0
  58. package/design-system/components/ChatShell/preview.html +201 -0
  59. package/design-system/components/ChatShell/style.css +86 -0
  60. package/design-system/components/ChatTurn/README.md +78 -35
  61. package/design-system/components/ChatTurn/preview.html +60 -28
  62. package/design-system/components/ChatTurn/style.css +50 -0
  63. package/design-system/components/CheckRow/README.md +141 -0
  64. package/design-system/components/CheckRow/preview.html +140 -0
  65. package/design-system/components/CheckRow/style.css +88 -0
  66. package/design-system/components/Checkbox/README.md +58 -22
  67. package/design-system/components/Checkbox/preview.html +112 -50
  68. package/design-system/components/Checkbox/style.css +45 -0
  69. package/design-system/components/Chip/README.md +78 -47
  70. package/design-system/components/Chip/preview.html +29 -4
  71. package/design-system/components/Chip/style.css +17 -0
  72. package/design-system/components/Combobox/README.md +44 -11
  73. package/design-system/components/Combobox/preview.html +35 -12
  74. package/design-system/components/Combobox/style.css +54 -0
  75. package/design-system/components/Composer/README.md +137 -35
  76. package/design-system/components/Composer/preview.html +115 -40
  77. package/design-system/components/Composer/style.css +81 -0
  78. package/design-system/components/ConfirmDialog/README.md +73 -52
  79. package/design-system/components/ConfirmDialog/preview.html +70 -26
  80. package/design-system/components/ConfirmDialog/style.css +5 -0
  81. package/design-system/components/Cover/preview.html +3 -3
  82. package/design-system/components/Cover/style.css +19 -0
  83. package/design-system/components/DateInput/README.md +77 -12
  84. package/design-system/components/DateInput/preview.html +27 -12
  85. package/design-system/components/DateInput/style.css +38 -0
  86. package/design-system/components/Dialog/README.md +112 -44
  87. package/design-system/components/Dialog/preview.html +141 -18
  88. package/design-system/components/Dialog/style.css +74 -0
  89. package/design-system/components/EmptyState/README.md +42 -12
  90. package/design-system/components/EmptyState/preview.html +11 -11
  91. package/design-system/components/EmptyState/style.css +9 -0
  92. package/design-system/components/EntryShell/README.md +73 -48
  93. package/design-system/components/EntryShell/preview.html +60 -27
  94. package/design-system/components/EntryShell/style.css +19 -0
  95. package/design-system/components/FeatureGrid/README.md +61 -39
  96. package/design-system/components/FeatureGrid/preview.html +2 -2
  97. package/design-system/components/FeatureGrid/style.css +20 -0
  98. package/design-system/components/FileUpload/README.md +33 -3
  99. package/design-system/components/FileUpload/preview.html +18 -4
  100. package/design-system/components/FileUpload/style.css +23 -0
  101. package/design-system/components/FilterBar/README.md +114 -0
  102. package/design-system/components/FilterBar/preview.html +82 -0
  103. package/design-system/components/FilterBar/style.css +22 -0
  104. package/design-system/components/Fold/README.md +84 -26
  105. package/design-system/components/Fold/preview.html +77 -34
  106. package/design-system/components/Fold/style.css +48 -0
  107. package/design-system/components/Footer/README.md +62 -39
  108. package/design-system/components/Footer/preview.html +5 -5
  109. package/design-system/components/Footer/style.css +30 -0
  110. package/design-system/components/FunnelBars/README.md +24 -3
  111. package/design-system/components/FunnelBars/preview.html +5 -5
  112. package/design-system/components/FunnelBars/style.css +13 -0
  113. package/design-system/components/GoalBars/README.md +54 -10
  114. package/design-system/components/GoalBars/preview.html +69 -28
  115. package/design-system/components/GoalBars/style.css +51 -0
  116. package/design-system/components/GoalTicks/README.md +74 -58
  117. package/design-system/components/GoalTicks/preview.html +41 -118
  118. package/design-system/components/GoalTicks/style.css +37 -0
  119. package/design-system/components/GoalTubes/README.md +29 -3
  120. package/design-system/components/GoalTubes/preview.html +6 -6
  121. package/design-system/components/GoalTubes/style.css +23 -0
  122. package/design-system/components/Heatmap/README.md +133 -0
  123. package/design-system/components/Heatmap/preview.html +168 -0
  124. package/design-system/components/Heatmap/style.css +119 -0
  125. package/design-system/components/Hero/README.md +58 -40
  126. package/design-system/components/Hero/preview.html +1 -1
  127. package/design-system/components/Hero/style.css +19 -0
  128. package/design-system/components/HoverCard/README.md +114 -0
  129. package/design-system/components/HoverCard/preview.html +107 -0
  130. package/design-system/components/HoverCard/style.css +59 -0
  131. package/design-system/components/IconButton/README.md +69 -38
  132. package/design-system/components/IconButton/preview.html +77 -43
  133. package/design-system/components/IconButton/style.css +45 -0
  134. package/design-system/components/Input/README.md +36 -11
  135. package/design-system/components/Input/preview.html +1 -1
  136. package/design-system/components/Input/style.css +23 -0
  137. package/design-system/components/KanbanBoard/README.md +93 -45
  138. package/design-system/components/KanbanBoard/preview.html +159 -43
  139. package/design-system/components/KanbanBoard/style.css +53 -0
  140. package/design-system/components/Kbd/README.md +25 -9
  141. package/design-system/components/Kbd/preview.html +6 -2
  142. package/design-system/components/Kbd/style.css +9 -0
  143. package/design-system/components/KitButton/README.md +81 -47
  144. package/design-system/components/KitButton/preview.html +35 -13
  145. package/design-system/components/KitButton/style.css +46 -0
  146. package/design-system/components/KitCard/README.md +75 -44
  147. package/design-system/components/KitCard/preview.html +18 -10
  148. package/design-system/components/KitCard/style.css +15 -0
  149. package/design-system/components/KitInput/README.md +54 -39
  150. package/design-system/components/KitInput/preview.html +7 -7
  151. package/design-system/components/KitInput/style.css +23 -0
  152. package/design-system/components/Leaderboard/README.md +76 -49
  153. package/design-system/components/Leaderboard/preview.html +61 -26
  154. package/design-system/components/Leaderboard/style.css +44 -0
  155. package/design-system/components/ListDetail/README.md +222 -0
  156. package/design-system/components/ListDetail/preview.html +213 -0
  157. package/design-system/components/ListDetail/style.css +148 -0
  158. package/design-system/components/LoadBar/README.md +79 -0
  159. package/design-system/components/LoadBar/preview.html +40 -0
  160. package/design-system/components/LoadBar/style.css +17 -0
  161. package/design-system/components/MarketingNav/README.md +76 -42
  162. package/design-system/components/MarketingNav/preview.html +37 -8
  163. package/design-system/components/MarketingNav/style.css +45 -0
  164. package/design-system/components/Matrix/README.md +129 -0
  165. package/design-system/components/Matrix/preview.html +99 -0
  166. package/design-system/components/Matrix/style.css +84 -0
  167. package/design-system/components/Menu/README.md +117 -41
  168. package/design-system/components/Menu/preview.html +85 -23
  169. package/design-system/components/Menu/style.css +61 -0
  170. package/design-system/components/Meter/README.md +39 -4
  171. package/design-system/components/Meter/preview.html +18 -1
  172. package/design-system/components/Meter/style.css +23 -0
  173. package/design-system/components/MetricTile/README.md +237 -0
  174. package/design-system/components/MetricTile/preview.html +241 -0
  175. package/design-system/components/MetricTile/style.css +129 -0
  176. package/design-system/components/Morph/README.md +106 -0
  177. package/design-system/components/Morph/preview.html +103 -0
  178. package/design-system/components/Morph/style.css +31 -0
  179. package/design-system/components/Motion/README.md +164 -0
  180. package/design-system/components/Motion/preview.html +2537 -0
  181. package/design-system/components/NumberInput/README.md +27 -8
  182. package/design-system/components/NumberInput/preview.html +21 -5
  183. package/design-system/components/NumberInput/style.css +34 -0
  184. package/design-system/components/PaceBar/README.md +75 -0
  185. package/design-system/components/PaceBar/preview.html +67 -0
  186. package/design-system/components/PaceBar/style.css +25 -0
  187. package/design-system/components/Page/README.md +57 -18
  188. package/design-system/components/Page/preview.html +15 -17
  189. package/design-system/components/Page/style.css +7 -0
  190. package/design-system/components/PageBar/README.md +90 -34
  191. package/design-system/components/PageBar/preview.html +60 -19
  192. package/design-system/components/PageBar/style.css +35 -0
  193. package/design-system/components/PageHero/README.md +87 -51
  194. package/design-system/components/PageHero/preview.html +35 -6
  195. package/design-system/components/PageHero/style.css +31 -0
  196. package/design-system/components/Pagination/README.md +70 -49
  197. package/design-system/components/Pagination/preview.html +24 -15
  198. package/design-system/components/Pagination/style.css +12 -0
  199. package/design-system/components/Panel/README.md +109 -51
  200. package/design-system/components/Panel/preview.html +118 -20
  201. package/design-system/components/Panel/style.css +51 -0
  202. package/design-system/components/PasswordInput/README.md +50 -18
  203. package/design-system/components/PasswordInput/preview.html +71 -21
  204. package/design-system/components/PasswordInput/style.css +31 -0
  205. package/design-system/components/Plate/README.md +75 -17
  206. package/design-system/components/Plate/preview.html +40 -7
  207. package/design-system/components/Plate/style.css +37 -0
  208. package/design-system/components/Popover/README.md +70 -49
  209. package/design-system/components/Popover/preview.html +44 -22
  210. package/design-system/components/Popover/style.css +41 -0
  211. package/design-system/components/PricingTable/README.md +69 -49
  212. package/design-system/components/PricingTable/preview.html +21 -21
  213. package/design-system/components/PricingTable/style.css +21 -0
  214. package/design-system/components/ProgressPetals/README.md +31 -3
  215. package/design-system/components/ProgressPetals/preview.html +14 -15
  216. package/design-system/components/ProgressPetals/style.css +27 -0
  217. package/design-system/components/README.md +151 -0
  218. package/design-system/components/Radio/README.md +40 -17
  219. package/design-system/components/Radio/preview.html +16 -1
  220. package/design-system/components/Radio/style.css +21 -0
  221. package/design-system/components/RankBar/README.md +29 -2
  222. package/design-system/components/RankBar/preview.html +14 -12
  223. package/design-system/components/RankBar/style.css +18 -0
  224. package/design-system/components/Ring/README.md +61 -11
  225. package/design-system/components/Ring/preview.html +55 -10
  226. package/design-system/components/Ring/style.css +49 -0
  227. package/design-system/components/ScoreHero/README.md +91 -0
  228. package/design-system/components/ScoreHero/preview.html +104 -0
  229. package/design-system/components/ScoreHero/style.css +32 -0
  230. package/design-system/components/Section/README.md +72 -33
  231. package/design-system/components/Section/preview.html +46 -16
  232. package/design-system/components/Section/style.css +18 -0
  233. package/design-system/components/Segmented/README.md +100 -55
  234. package/design-system/components/Segmented/preview.html +107 -26
  235. package/design-system/components/Segmented/style.css +94 -0
  236. package/design-system/components/SegmentedProgress/README.md +64 -0
  237. package/design-system/components/SegmentedProgress/preview.html +69 -0
  238. package/design-system/components/SegmentedProgress/style.css +11 -0
  239. package/design-system/components/Select/README.md +47 -12
  240. package/design-system/components/Select/preview.html +28 -2
  241. package/design-system/components/Select/style.css +22 -0
  242. package/design-system/components/ShareBar/README.md +69 -0
  243. package/design-system/components/ShareBar/preview.html +72 -0
  244. package/design-system/components/ShareBar/style.css +25 -0
  245. package/design-system/components/SideList/README.md +147 -0
  246. package/design-system/components/SideList/preview.html +139 -0
  247. package/design-system/components/SideList/style.css +94 -0
  248. package/design-system/components/Skeleton/README.md +53 -16
  249. package/design-system/components/Skeleton/preview.html +35 -23
  250. package/design-system/components/Skeleton/style.css +17 -0
  251. package/design-system/components/Slider/README.md +95 -0
  252. package/design-system/components/Slider/preview.html +49 -0
  253. package/design-system/components/Slider/style.css +13 -0
  254. package/design-system/components/Split/README.md +112 -0
  255. package/design-system/components/Split/preview.html +105 -0
  256. package/design-system/components/Split/style.css +30 -0
  257. package/design-system/components/Starter/README.md +21 -9
  258. package/design-system/components/Starter/preview.html +5 -5
  259. package/design-system/components/Stat/README.md +64 -43
  260. package/design-system/components/Stat/preview.html +3 -3
  261. package/design-system/components/Stat/style.css +15 -0
  262. package/design-system/components/StatTiles/README.md +88 -44
  263. package/design-system/components/StatTiles/preview.html +142 -71
  264. package/design-system/components/StatTiles/style.css +64 -0
  265. package/design-system/components/StatusLine/README.md +85 -0
  266. package/design-system/components/StatusLine/preview.html +49 -0
  267. package/design-system/components/StatusLine/style.css +14 -0
  268. package/design-system/components/StatusScreen/README.md +49 -35
  269. package/design-system/components/StatusScreen/preview.html +20 -5
  270. package/design-system/components/StatusScreen/style.css +9 -0
  271. package/design-system/components/StepLine/README.md +97 -0
  272. package/design-system/components/StepLine/preview.html +108 -0
  273. package/design-system/components/StepLine/style.css +62 -0
  274. package/design-system/components/Stepper/README.md +35 -13
  275. package/design-system/components/Stepper/style.css +13 -0
  276. package/design-system/components/StreakCalendar/README.md +22 -1
  277. package/design-system/components/StreakCalendar/preview.html +10 -10
  278. package/design-system/components/StreakCalendar/style.css +12 -0
  279. package/design-system/components/SuggestionChip/README.md +87 -0
  280. package/design-system/components/SuggestionChip/preview.html +42 -0
  281. package/design-system/components/SuggestionChip/style.css +20 -0
  282. package/design-system/components/Switch/README.md +44 -24
  283. package/design-system/components/Switch/preview.html +23 -8
  284. package/design-system/components/Switch/style.css +31 -0
  285. package/design-system/components/Table/README.md +129 -58
  286. package/design-system/components/Table/preview.html +106 -72
  287. package/design-system/components/Table/style.css +104 -0
  288. package/design-system/components/Tabs/README.md +71 -46
  289. package/design-system/components/Tabs/preview.html +56 -24
  290. package/design-system/components/Tabs/style.css +44 -0
  291. package/design-system/components/Testimonial/README.md +48 -32
  292. package/design-system/components/Testimonial/preview.html +14 -14
  293. package/design-system/components/Testimonial/style.css +12 -0
  294. package/design-system/components/TextArea/README.md +27 -11
  295. package/design-system/components/TextArea/preview.html +8 -2
  296. package/design-system/components/TextArea/style.css +12 -0
  297. package/design-system/components/ThemeSwitch/README.md +116 -0
  298. package/design-system/components/ThemeSwitch/preview.html +57 -0
  299. package/design-system/components/ThemeSwitch/style.css +6 -0
  300. package/design-system/components/TickRow/README.md +52 -36
  301. package/design-system/components/TickRow/preview.html +64 -41
  302. package/design-system/components/TickRow/style.css +23 -0
  303. package/design-system/components/TickStrip/README.md +95 -0
  304. package/design-system/components/TickStrip/preview.html +88 -0
  305. package/design-system/components/TickStrip/style.css +42 -0
  306. package/design-system/components/Tile/README.md +79 -18
  307. package/design-system/components/Tile/preview.html +91 -40
  308. package/design-system/components/Tile/style.css +36 -0
  309. package/design-system/components/Timeline/README.md +68 -48
  310. package/design-system/components/Timeline/preview.html +27 -15
  311. package/design-system/components/Timeline/style.css +25 -0
  312. package/design-system/components/Toast/README.md +70 -38
  313. package/design-system/components/Toast/preview.html +43 -8
  314. package/design-system/components/Toast/style.css +25 -0
  315. package/design-system/components/Tooltip/README.md +93 -35
  316. package/design-system/components/Tooltip/preview.html +69 -15
  317. package/design-system/components/Tooltip/style.css +78 -0
  318. package/design-system/components/TopBar/README.md +67 -53
  319. package/design-system/components/TopBar/preview.html +14 -27
  320. package/design-system/components/TopBar/style.css +35 -0
  321. package/design-system/components/TopicRail/README.md +108 -0
  322. package/design-system/components/TopicRail/preview.html +58 -0
  323. package/design-system/components/TopicRail/style.css +48 -0
  324. package/design-system/components/TrendBars/README.md +52 -14
  325. package/design-system/components/TrendBars/preview.html +65 -32
  326. package/design-system/components/TrendBars/style.css +25 -0
  327. package/design-system/components/TrendLine/README.md +164 -0
  328. package/design-system/components/TrendLine/preview.html +373 -0
  329. package/design-system/components/TrendLine/style.css +155 -0
  330. package/design-system/components/Well/README.md +64 -22
  331. package/design-system/components/Well/preview.html +14 -14
  332. package/design-system/components/Well/style.css +22 -0
  333. package/design-system/components/_house.css +324 -0
  334. package/design-system/components/bundle.css +4086 -744
  335. package/design-system/tokens.json +1310 -124
  336. package/dist/fello-core.css +2 -2
  337. package/dist/fello.css +6 -1369
  338. package/dist/fello.scoped.css +7 -0
  339. package/dist/index.d.ts +109 -10
  340. package/dist/index.js +781 -96
  341. package/dist/palettes.d.ts +464 -0
  342. package/dist/palettes.js +497 -0
  343. package/dist/scoped.d.ts +3 -0
  344. package/dist/scoped.js +16 -0
  345. package/dist/toast.d.ts +14 -0
  346. package/dist/toast.js +33 -29
  347. package/dist/tokens.d.ts +1686 -62
  348. package/dist/tokens.js +1668 -61
  349. package/package.json +20 -4
  350. package/scripts/check-palette.mjs +295 -0
  351. package/scripts/token-model.mjs +552 -0
  352. package/tokens/_dark.css +173 -0
  353. package/tokens/_palettes.css +46 -0
  354. package/tokens/_product.css +266 -53
  355. package/tokens/_source.hubl.css +39 -19
  356. package/tokens/design-tokens.json +319 -0
  357. package/tokens/palettes.ts +504 -0
  358. package/tokens/shadcn-compat.css +19 -19
  359. package/tokens/shadcn-compat.hsl.css +76 -0
  360. package/tokens/tokens.css +1287 -62
  361. package/tokens/tokens.md +587 -61
  362. package/tokens/tokens.root.css +1293 -62
  363. package/tokens/tokens.ts +1677 -64
package/tokens/tokens.css CHANGED
@@ -1,11 +1,13 @@
1
1
  /* Generated by scripts/generate-tokens.mjs. Do not edit.
2
2
  Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
3
- and tokens/_product.css (the product layer).
4
- 225 tokens: 106 kit, 119 product layer. */
3
+ tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
4
+ 422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
5
5
 
6
6
  /* "static" so every token is emitted as a custom property even when no
7
7
  utility references it. Without it Tailwind prunes the unused ones and a
8
- consumer's var(--shadow-btn) silently resolves to nothing. */
8
+ consumer's var(--shadow-btn) silently resolves to nothing.
9
+ Left out, so the host's Tailwind theme keeps them: --radius-xs, --radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-2xl
10
+ (tokens.root.css and fello.css still carry them, under the host's own). */
9
11
  @theme static {
10
12
  --color-brand-salmon: #FF725C;
11
13
  --color-brand-navy: #093555;
@@ -16,8 +18,9 @@
16
18
  --color-tertiary-dark-blue: var(--color-brand-navy);
17
19
  --color-background: #FEFBF9;
18
20
  --color-white: #FFFFFF;
21
+ --color-surface: var(--color-white);
19
22
  --color-gray-1: #F9F9F9;
20
- --color-surface-stripe: #F7F4F4;
23
+ --color-surface-stripe: var(--ws-tint-accent);
21
24
  --color-gray-2: #EDEDED;
22
25
  --color-gray-stroke: #E8E8E8;
23
26
  --color-gray-3: #D3D3D3;
@@ -25,7 +28,7 @@
25
28
  --color-gray-6: #7F7F7F;
26
29
  --color-gray-7: #545454;
27
30
  --color-gray-8: #292929;
28
- --color-text-primary: #353E5A;
31
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 50%, #61475f);
29
32
  --color-ai-cyan: #14BACB;
30
33
  --color-ai-blue: #3898F0;
31
34
  --color-ai-violet: #8D6AE6;
@@ -34,25 +37,25 @@
34
37
  --gradient-ai: linear-gradient( 90deg, var(--color-ai-cyan) 0%, var(--color-ai-blue) 25%, var(--color-ai-violet) 50%, var(--color-ai-pink) 75%, var(--color-ai-rose) 100% );
35
38
  --color-dropdown-bg: #fcfaf9;
36
39
  --gradient-scrim-dropdown: linear-gradient( 180deg, rgba(237, 237, 237, 0) -2.85%, rgba(45, 45, 45, 0.5) 93.85% );
37
- --color-feedback-error: #ef6b51;
40
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04);
38
41
  --color-feedback-success-text: #4f7d24;
39
- --color-feedback-success-bg: #cde3cc;
42
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5));
40
43
  --color-alert: #e90f0f;
41
- --color-stat-positive: #098486;
42
- --color-bg-page: var(--color-background);
44
+ --color-stat-positive: var(--ws-chart-finished);
45
+ --color-bg-page: #FEFBF9;
43
46
  --color-text-heading: var(--color-brand-navy);
44
47
  --color-text-body: var(--color-gray-7);
45
- --color-text-muted: #6E6E6E;
46
- --color-text-brand-strong: #B35040;
47
- --color-text-error-strong: #AE4E3B;
48
- --color-text-success-strong: #3C601B;
49
- --color-text-placeholder: #6E6E6E;
48
+ --color-text-muted: #666666;
49
+ --color-text-brand-strong: var(--ws-word-needs);
50
+ --color-text-error-strong: color-mix(in srgb, var(--ws-word-needs) 95%, #944b00);
51
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19));
52
+ --color-text-placeholder: color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6);
50
53
  --color-text-interactive: var(--color-brand-mid-blue);
51
- --color-border-default: var(--color-gray-stroke);
52
- --color-border-hairline: var(--color-gray-3);
54
+ --color-border-default: var(--ws-edge);
55
+ --color-border-hairline: var(--ws-edge-card);
53
56
  --color-border-btn: var(--color-button-border);
54
57
  --color-bg-dark: var(--color-brand-navy);
55
- --color-nav-hover-bg: color-mix(in srgb, var(--color-brand-mid-blue) 5%, transparent);
58
+ --color-nav-hover-bg: color-mix(in srgb, var(--color-text-interactive) 5%, transparent);
56
59
  --gradient-btn-primary: linear-gradient( 180deg, var(--color-button-grad-start), var(--color-button-grad-end) );
57
60
  --font-body: "Instrument Sans", sans-serif;
58
61
  --font-size-3xs: 10px;
@@ -70,9 +73,13 @@
70
73
  --font-size-6xl: 64px;
71
74
  --font-size-7xl: 72px;
72
75
  --font-size-8xl: 193px;
76
+ --space-3xs: 2px;
73
77
  --space-xxs: 4px;
78
+ --space-xxs-plus: 6px;
74
79
  --space-xs: 8px;
80
+ --space-xs-plus: 10px;
75
81
  --space-sm: 12px;
82
+ --space-sm-plus: 14px;
76
83
  --space-md: 16px;
77
84
  --space-lg: 24px;
78
85
  --space-xl: 32px;
@@ -89,12 +96,6 @@
89
96
  --layout-content-max: 1344px;
90
97
  --layout-margin: 48px;
91
98
  --layout-col-gap: 24px;
92
- --radius-xs: 2px;
93
- --radius-sm: 4px;
94
- --radius-md: 6px;
95
- --radius-lg: 8px;
96
- --radius-xl: 16px;
97
- --radius-2xl: 24px;
98
99
  --radius-full: 9999px;
99
100
  --z-base: 0;
100
101
  --z-sticky: 50;
@@ -103,40 +104,86 @@
103
104
  --z-modal: 300;
104
105
  --z-toast: 400;
105
106
  --shadow-label-pill: 2px 22px 6px 0 rgba(0, 0, 0, 0), 1px 14px 6px 0 rgba(0, 0, 0, 0.01), 1px 8px 5px 0 rgba(0, 0, 0, 0.04), 0 3px 4px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
106
- --shadow-card-default: 0 1px 2px rgba(9, 53, 85, 0.04), 0 4px 8px rgba(9, 53, 85, 0.06);
107
- --shadow-card-hover: 0 4px 8px rgba(9, 53, 85, 0.06), 0 8px 24px rgba(9, 53, 85, 0.08);
107
+ --shadow-card-default: 0 1px 2px color-mix(in srgb, var(--color-text-heading) 4%, transparent), 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent);
108
+ --shadow-card-hover: 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--color-text-heading) 8%, transparent);
108
109
  --shadow-pill: 0 8px 17px rgba(0, 0, 0, 0.07), 0 30px 30px rgba(0, 0, 0, 0.06), 0 68px 41px rgba(0, 0, 0, 0.04), 0 121px 48px rgba(0, 0, 0, 0.01);
109
110
  --shadow-dropdown: var(--shadow-pill);
110
111
  --shadow-btn: 0 21px 6px rgba(0, 0, 0, 0), 0 13px 5px rgba(0, 0, 0, 0.02), 0 7px 4px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.09), 0 1px 2px rgba(0, 0, 0, 0.11);
111
112
  --shadow-btn-hover: 0 32px 9px rgba(0, 0, 0, 0), 0 20px 8px rgba(0, 0, 0, 0.02), 0 11px 7px rgba(0, 0, 0, 0.06), 0 5px 5px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.11);
112
- --shadow-focus-ring: 0 0 0 3px rgba(255, 114, 92, 0.2);
113
+ --shadow-focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-text-heading);
113
114
  --transition-fast: 150ms ease-out;
114
115
  --transition-default: 200ms ease;
115
116
  --transition-slow: 300ms ease;
116
- --ws-page: var(--color-gray-stroke);
117
+ --ws-page: color-mix(in srgb, var(--ws-tray) 97.5%, #252525);
117
118
  --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
118
119
  --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8));
119
- --ws-sidebar-hover: color-mix(in srgb, var(--color-gray-2) 85%, var(--color-white));
120
- --ws-sidebar-press: var(--color-gray-2);
120
+ --ws-sidebar-hover: color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface));
121
+ --ws-sidebar-press: var(--ws-tray);
121
122
  --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8));
122
123
  --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8));
123
- --ws-well: var(--color-gray-2);
124
- --ws-field: var(--color-white);
125
- --ws-tint-accent: var(--color-surface-stripe);
126
- --ws-tint-needs: color-mix(in srgb, var(--color-brand-salmon) 10%, var(--color-white));
127
- --ws-tint-live: color-mix(in srgb, var(--color-stat-positive) 12%, var(--color-white));
128
- --ws-edge: var(--color-border-default);
124
+ --ws-well: var(--ws-tray);
125
+ --ws-field: var(--color-surface);
126
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
127
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
128
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
129
+ --ws-edge: var(--color-gray-stroke);
129
130
  --ws-edge-card: var(--color-gray-3);
130
- --ws-edge-chip: #d9d5d0;
131
- --ws-edge-slot: #e2e2e2;
132
- --ws-edge-tray: #d9d3cb;
131
+ --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
132
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
133
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
134
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5));
133
135
  --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
134
- --ws-word-needs: var(--color-text-brand-strong);
135
- --ws-word-positive: color-mix(in srgb, var(--color-stat-positive) 85%, var(--color-brand-navy));
136
- --ws-chart-finished: var(--color-stat-positive);
136
+ --ws-raised: var(--color-bg-page);
137
+ --ws-track: var(--ws-tray);
138
+ --ws-field-ink: color-mix(in srgb, var(--color-text-body) 46.25%, #040404);
139
+ --ws-field-mark: var(--color-text-heading);
140
+ --ws-on-act: var(--color-white);
141
+ --ws-ink: var(--color-text-heading);
142
+ --ws-shade: var(--color-text-heading);
143
+ --ws-ink-rgb: 9, 53, 85;
144
+ --ws-shade-rgb: 9, 53, 85;
145
+ --ws-inverse: var(--color-text-heading);
146
+ --ws-on-inverse: var(--ws-on-act);
147
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
148
+ --ws-raised-sunk: var(--ws-surface-sunk);
149
+ --ws-edge-hover: #aaa49d;
150
+ --ws-act-hover: #0f4a73;
151
+ --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
152
+ --ws-agent-tally: #2c4870;
153
+ --ws-agent-coach: var(--color-stat-positive);
154
+ --ws-agent-growth: var(--ws-chart-past-half);
155
+ --ws-agent-recruit: var(--ws-chart-under-half);
156
+ --ws-mask: #000;
157
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
158
+ --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
159
+ --ws-ghost: color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17);
160
+ --ws-veil: color-mix(in srgb, var(--ws-page) 30%, transparent);
161
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 71.25%, #040404);
162
+ --ws-tray: var(--color-gray-2);
163
+ --ws-rim: var(--ws-line);
164
+ --ws-divider: var(--ws-hairline) solid var(--ws-edge);
165
+ --ws-divider-inset: inset 0 var(--ws-hairline) 0 var(--ws-edge);
166
+ --ws-well-hover: #e4e2df;
167
+ --ws-frame-top: #ebf0f5;
168
+ --ws-stage-foot: #fef9f6;
169
+ --ws-frame: linear-gradient(180deg, var(--ws-frame-top) 0, var(--color-bg-page) 640px) var(--color-bg-page);
170
+ --ws-stage-wash: linear-gradient(180deg, var(--color-bg-page), var(--ws-stage-foot));
171
+ --ws-glass: color-mix(in srgb, var(--color-surface) 59%, transparent);
172
+ --ws-glass-blur: 4px;
173
+ --ws-glass-blur-chat: 28px;
174
+ --ws-edge-stage: var(--ws-page);
175
+ --ws-stage-inset-top: 13px;
176
+ --ws-stage-inset: var(--space-sm);
177
+ --ws-word-needs: #A84B3C;
178
+ --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
179
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
180
+ --ws-word-alert: var(--ws-chart-alert);
181
+ --ws-word-past-half: var(--ws-chart-past-half);
182
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
183
+ --ws-chart-finished: #098486;
137
184
  --ws-chart-past-half: #6d4fc2;
138
185
  --ws-chart-under-half: var(--color-brand-salmon);
139
- --ws-chart-empty: var(--color-gray-1);
186
+ --ws-chart-empty: #f9f9f9;
140
187
  --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8));
141
188
  --ws-chart-navy-light: #2e6088;
142
189
  --ws-chart-navy-fade: #a8c0d3;
@@ -147,11 +194,22 @@
147
194
  --ws-chart-past-half-tint: #cbbdf3;
148
195
  --ws-chart-under-half-tint: #f9dfc6;
149
196
  --ws-chart-cell-edge: var(--ws-edge-slot);
150
- --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 10%, var(--color-white));
151
- --ws-card-tint-done: color-mix(in srgb, var(--color-stat-positive) 10%, var(--color-white));
152
- --ws-scrim: color-mix(in srgb, var(--color-brand-navy) 35%, transparent);
153
- --ws-team-glow: radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-brand-mid-blue) 14%, transparent), transparent), radial-gradient(70% 75% at 95% 100%, color-mix(in srgb, var(--color-ai-rose) 22%, transparent), transparent), radial-gradient(55% 60% at 70% 45%, color-mix(in srgb, var(--color-ai-pink) 8%, transparent), transparent);
154
- --ws-cool-glow: radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-brand-mid-blue) 16%, transparent), transparent), radial-gradient(60% 70% at 92% 30%, color-mix(in srgb, var(--color-ai-blue) 10%, transparent), transparent), radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--color-brand-navy) 6%, transparent), transparent);
197
+ --ws-chart-needs-work: #f370a4;
198
+ --ws-chart-alert: #b1042f;
199
+ --ws-rating-strong: var(--color-stat-positive);
200
+ --ws-rating-middle: var(--color-brand-mid-blue);
201
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
202
+ --ws-shimmer-ground: var(--ws-ghost);
203
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
204
+ --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
205
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
206
+ --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
207
+ --ws-glow-rose: color-mix(in srgb, var(--ws-chart-under-half) 50%, #ebb8ca);
208
+ --ws-glow-pink: color-mix(in srgb, var(--ws-chart-needs-work) 90%, #ad167c);
209
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556));
210
+ --ws-team-glow: radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 14%, transparent), transparent), radial-gradient(70% 75% at 95% 100%, color-mix(in srgb, var(--ws-glow-rose) 22%, transparent), transparent), radial-gradient(55% 60% at 70% 45%, color-mix(in srgb, var(--ws-glow-pink) 8%, transparent), transparent);
211
+ --ws-cool-glow: radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 16%, transparent), transparent), radial-gradient(60% 70% at 92% 30%, color-mix(in srgb, var(--ws-glow-blue) 10%, transparent), transparent), radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--color-text-heading) 6%, transparent), transparent);
212
+ --ws-orb: radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 37.5%, rgb(26.6 218.4 244.4)), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 37.5%, rgb(160.2 122.2 251.6)) 80%);
155
213
  --ws-text-micro: 11px;
156
214
  --ws-text-dense: var(--font-size-2xs);
157
215
  --ws-text-meta: var(--font-size-xs);
@@ -163,33 +221,66 @@
163
221
  --ws-text-display: var(--font-size-7xl);
164
222
  --ws-leading-message: var(--space-lg);
165
223
  --ws-leading-title: calc(var(--space-lg) + var(--space-xxs));
224
+ --ws-text-control: var(--font-size-xs);
225
+ --ws-leading-control: 18px;
226
+ --ws-text-section: var(--ws-text-chart);
227
+ --ws-leading-section: 22px;
228
+ --ws-leading-row: calc(var(--space-md) + var(--space-xxs));
229
+ --ws-leading-micro: 13px;
230
+ --ws-text-figure-row: 28px;
231
+ --ws-leading-figure-row: var(--space-xl);
232
+ --ws-text-figure: var(--space-xl);
233
+ --ws-leading-figure: 38px;
234
+ --ws-text-figure-lg: 44px;
235
+ --ws-leading-figure-lg: var(--space-3xl);
236
+ --ws-text-score: var(--space-6xl);
237
+ --ws-leading-score: var(--space-6xl);
166
238
  --ws-gap-tight: var(--space-xxs);
167
239
  --ws-gap: var(--space-xs);
168
240
  --ws-gap-loose: var(--space-sm);
169
241
  --ws-gap-component: var(--space-md);
170
242
  --ws-gap-group: var(--space-lg);
171
- --ws-gap-turn: calc(var(--space-lg) - var(--space-xxs) / 2);
172
- --ws-gutter: var(--space-lg);
243
+ --ws-gap-turn: calc(var(--space-lg) + var(--space-xxs));
244
+ --ws-gap-block: var(--space-xl);
245
+ --ws-gap-section: calc(var(--space-3xl) + var(--space-xs));
246
+ --ws-gutter: var(--space-xl);
173
247
  --ws-card-padding: var(--space-sm);
174
248
  --ws-card-padding-lg: var(--space-md);
175
249
  --ws-card-inset: calc(var(--space-md) + var(--space-xxs));
176
250
  --ws-band-inset: calc(var(--space-lg) + var(--space-xxs));
177
251
  --ws-rise: calc(var(--space-xxs) * 1.5);
178
252
  --ws-chart-dot-gap: calc(var(--space-xs) * 0.8125);
179
- --ws-radius-bar: calc(var(--radius-xs) / 2);
180
- --ws-radius-chip: var(--radius-xs);
181
- --ws-radius-control: var(--radius-sm);
182
- --ws-radius-row: var(--radius-md);
183
- --ws-radius-card: var(--radius-lg);
184
- --ws-radius-bubble: calc(var(--radius-lg) + var(--radius-sm));
185
- --ws-radius-panel: var(--radius-xl);
253
+ --ws-radius-bar: 1px;
254
+ --ws-radius-chip: 2px;
255
+ --ws-radius-control: 4px;
256
+ --ws-radius-row: 6px;
257
+ --ws-radius-card: 8px;
258
+ --ws-radius-menu: 10px;
259
+ --ws-radius-card-inner: calc(var(--ws-radius-card) - var(--ws-rim));
260
+ --ws-radius-bubble: 12px;
261
+ --ws-radius-drawer: var(--ws-radius-bubble);
262
+ --ws-radius-drawer-inner: calc(var(--ws-radius-drawer) - var(--ws-rim));
263
+ --ws-radius-panel: 16px;
186
264
  --ws-shadow-hairline: 0 0 0 var(--ws-hairline) var(--ws-edge-card);
265
+ --ws-shadow-hairline-in: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card);
187
266
  --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray), inset 0 28px 8px 0 rgba(0, 0, 0, 0), inset 0 18px 7px 0 rgba(0, 0, 0, 0.01), inset 0 10px 6px 0 rgba(0, 0, 0, 0.03), inset 0 4px 4px 0 rgba(0, 0, 0, 0.05), inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
188
267
  --ws-shadow-lift: var(--shadow-card-hover);
189
- --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 55%, transparent);
190
- --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 30%, transparent);
191
- --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-navy) 12%, transparent);
192
- --ws-focus-inset: inset 0 0 0 2px var(--color-text-interactive);
268
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent);
269
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent);
270
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent);
271
+ --ws-float-rim: 0 0 0 0 transparent;
272
+ --ws-shadow-pop: var(--ws-float-rim), 0 12px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
273
+ --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
274
+ --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
275
+ --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
276
+ --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent);
277
+ --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
278
+ --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
279
+ --ws-hover-strong: color-mix(in srgb, var(--ws-ink) 5.8823529412%, transparent);
280
+ --ws-focus-color: var(--color-text-heading);
281
+ --ws-focus-width: var(--ws-ring);
282
+ --ws-focus-offset: var(--ws-ring);
283
+ --ws-focus-inset: inset 0 0 0 var(--ws-focus-width) var(--ws-focus-color);
193
284
  --ws-hairline: 0.5px;
194
285
  --ws-line: 1px;
195
286
  --ws-chart-line: 1.5px;
@@ -199,18 +290,20 @@
199
290
  --ws-control-h: var(--space-xl);
200
291
  --ws-control-h-md: calc(var(--space-xl) + var(--space-xxs));
201
292
  --ws-touch: 40px;
293
+ --ws-touch-public: 44px;
202
294
  --ws-row-h: var(--space-3xl);
203
295
  --ws-row-h-dense: var(--space-2xl);
204
296
  --ws-composer-h: 52px;
205
297
  --ws-header-h: calc(var(--space-3xl) + var(--space-xs));
206
298
  --ws-topbar-h: var(--space-3xl);
207
299
  --ws-band-h: 80px;
208
- --ws-rail-width: calc(var(--space-2xl) + var(--space-xl));
300
+ --ws-rail-width: var(--space-4xl);
209
301
  --ws-sidebar-width: calc(var(--space-9xl) + var(--space-xl));
210
302
  --ws-thing-width: calc(var(--space-9xl) * 2 + var(--space-2xl));
211
303
  --ws-chart-card-w: calc(var(--space-9xl) * 2 + var(--space-8xl) - var(--space-xxs));
212
304
  --ws-chart-card-min: 480px;
213
305
  --ws-column-width: calc(var(--space-9xl) * 3 + var(--space-3xl) + var(--space-xs));
306
+ --ws-float-width: calc(var(--space-9xl) * 1.5);
214
307
  --ws-icon-sm: 12px;
215
308
  --ws-icon: 16px;
216
309
  --ws-icon-lg: 20px;
@@ -218,18 +311,1150 @@
218
311
  --ws-tracking-title: -0.005em;
219
312
  --ws-tracking-display: -0.03em;
220
313
  --ws-duration-instant: 120ms;
314
+ --ws-duration-exit: 120ms;
221
315
  --ws-duration-gentle: 200ms;
316
+ --ws-duration-hover: 200ms;
317
+ --ws-duration-text: 250ms;
222
318
  --ws-duration-settle: 320ms;
319
+ --ws-duration-reveal: 350ms;
320
+ --ws-duration-shrink: 400ms;
223
321
  --ws-duration-calm: 420ms;
224
322
  --ws-duration-glide: 400ms;
323
+ --ws-duration-morph: 450ms;
324
+ --ws-duration-grow: 550ms;
325
+ --ws-duration-shift: 550ms;
326
+ --ws-duration-fill: 700ms;
327
+ --ws-duration-draw: 900ms;
328
+ --ws-duration-draw-chat: 1500ms;
329
+ --ws-duration-fill-page: 1700ms;
330
+ --ws-duration-build: 2400ms;
225
331
  --ws-stagger: 30ms;
332
+ --ws-stagger-detail: 22ms;
333
+ --ws-stagger-row: 45ms;
334
+ --ws-stagger-part: 70ms;
335
+ --ws-ripple: 4ms;
336
+ --ws-stagger-square: 35ms;
337
+ --ws-hover-intent: 40ms;
338
+ --ws-hover-leave: 60ms;
339
+ --ws-hover-grace: 180ms;
340
+ --ws-close-delay: 160ms;
226
341
  --ws-sweep: calc(var(--ws-duration-calm) - var(--ws-duration-gentle));
227
- --ws-loop: 1.2s;
342
+ --ws-loop: 1s;
343
+ --ws-loop-status: 1.6s;
344
+ --ws-loop-shimmer: 1.8s;
228
345
  --ws-loop-slow: 2.4s;
346
+ --ws-loop-ambient: 6s;
229
347
  --ws-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
230
348
  --ws-ease-exit: cubic-bezier(0.4, 0, 1, 1);
231
349
  --ws-ease-glide: cubic-bezier(0.75, 0, 0.25, 1);
232
350
  --ws-ease-steady: linear;
233
351
  --ws-ease-spring: var(--ws-ease-soft);
352
+ --ws-ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
353
+ --ws-ease-grow: cubic-bezier(0.32, 0.72, 0, 1);
354
+ --ws-ease-shift: cubic-bezier(0.25, 1, 0.5, 1);
355
+ --ws-ease-morph: cubic-bezier(0.5, 0, 0.15, 1);
356
+ --ws-ease-sweep: cubic-bezier(0.45, 0, 0.55, 1);
357
+ --ws-ease-commit: cubic-bezier(0.65, 0, 0.35, 1);
358
+ --ws-ease-shimmer: cubic-bezier(0.4, 0, 0.2, 1);
359
+ --ws-ease-ambient: cubic-bezier(0.45, 0, 0.3, 1);
360
+ --ws-ease-loop: cubic-bezier(0.42, 0, 0.58, 1);
361
+ --ws-ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
362
+ --ws-ease-lift: cubic-bezier(0.22, 1.25, 0.36, 1);
234
363
  --ws-press-scale: 0.97;
364
+ --ws-press-scale-round: 0.94;
365
+ --ws-press-scale-send: 0.92;
366
+ --ws-open-scale: 0.97;
367
+ --ws-open-scale-pane: 0.98;
368
+ --ws-open-scale-toast: 0.96;
369
+ --ws-pop-scale: 0.94;
370
+ --ws-grow-scale: 1.16;
371
+ --ws-dim: 0.3;
372
+ --ws-nudge: var(--space-xxs);
373
+ --ws-drop: var(--space-sm);
374
+ --ws-blur-arrive: 3px;
375
+ --ws-blur-panel: 8px;
376
+ --ws-spring-press: linear(0, 0.0207, 0.0748, 0.1513, 0.2416, 0.3384, 0.4362, 0.531, 0.6197, 0.7005, 0.7722, 0.8343, 0.8868, 0.9302, 0.9651, 0.9924, 1.0129, 1.0275, 1.0373, 1.0431, 1.0457, 1.0458, 1.044, 1.041, 1.0372, 1.0328, 1.0283, 1.0239, 1.0196, 1.0157, 1.0122, 1.0091, 1.0065, 1.0042, 1.0024, 1.001, 0.9999, 0.9991, 0.9985, 0.9981, 0.9979, 0.9979, 0.9979, 0.998, 0.9982, 0.9984, 0.9986, 0.9988, 0.999, 0.9992, 0.9994, 0.9995, 0.9996, 0.9998, 0.9998, 1);
377
+ --ws-spring-press-duration: 450ms;
378
+ --ws-spring-follow: linear(0, 0.0215, 0.0744, 0.1452, 0.2248, 0.3067, 0.3868, 0.4627, 0.5327, 0.5962, 0.653, 0.7032, 0.7472, 0.7855, 0.8186, 0.847, 0.8713, 0.892, 0.9096, 0.9245, 0.937, 0.9475, 0.9564, 0.9638, 0.97, 0.9751, 0.9794, 0.983, 0.986, 0.9884, 0.9905, 0.9922, 0.9935, 0.9947, 0.9956, 0.9964, 0.9971, 0.9976, 0.998, 0.9984, 0.9987, 0.9989, 0.9991, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 1);
379
+ --ws-spring-follow-duration: 450ms;
380
+ --ws-spring-pop: linear(0, 0.0212, 0.0745, 0.1471, 0.23, 0.3164, 0.4018, 0.483, 0.5583, 0.6265, 0.6873, 0.7407, 0.7869, 0.8265, 0.8601, 0.8882, 0.9116, 0.9309, 0.9466, 0.9593, 0.9695, 0.9775, 0.9838, 0.9887, 0.9925, 0.9953, 0.9974, 0.9989, 1, 1.0007, 1.0011, 1.0014, 1.0015, 1.0015, 1);
381
+ --ws-spring-pop-duration: 500ms;
382
+ --ws-spring-settle: linear(0, 0.0206, 0.0724, 0.1434, 0.2246, 0.3096, 0.3939, 0.4744, 0.5493, 0.6174, 0.6783, 0.732, 0.7788, 0.819, 0.8532, 0.8821, 0.9062, 0.9261, 0.9425, 0.9558, 0.9665, 0.9751, 0.9819, 0.9871, 0.9912, 0.9943, 0.9966, 0.9983, 0.9995, 1.0004, 1.0009, 1.0013, 1.0015, 1.0015, 1);
383
+ --ws-spring-settle-duration: 450ms;
384
+ --ws-spring-fold: linear(0, 0.0215, 0.0744, 0.1452, 0.2248, 0.3067, 0.3868, 0.4627, 0.5327, 0.5962, 0.653, 0.7032, 0.7472, 0.7855, 0.8186, 0.847, 0.8713, 0.892, 0.9096, 0.9245, 0.937, 0.9475, 0.9564, 0.9638, 0.97, 0.9751, 0.9794, 0.983, 0.986, 0.9884, 0.9905, 0.9922, 0.9935, 0.9947, 0.9956, 0.9964, 0.9971, 0.9976, 0.998, 0.9984, 0.9987, 0.9989, 0.9991, 0.9993, 1);
385
+ --ws-spring-fold-duration: 600ms;
386
+ --ws-spring-indicator: linear(0, 0.0212, 0.0751, 0.1495, 0.2349, 0.3247, 0.4139, 0.499, 0.578, 0.6495, 0.7131, 0.7685, 0.8162, 0.8565, 0.8901, 0.9178, 0.9402, 0.9582, 0.9722, 0.9831, 0.9913, 0.9973, 1.0016, 1.0044, 1.0063, 1.0073, 1.0077, 1.0077, 1.0073, 1.0068, 1.0062, 1.0055, 1.0048, 1.0041, 1.0035, 1.0029, 1.0024, 1.002, 1.0016, 1.0012, 1.0009, 1.0007, 1.0005, 1.0004, 1);
387
+ --ws-spring-indicator-duration: 700ms;
388
+ --ws-spring-highlight: linear(0, 0.0207, 0.0731, 0.1454, 0.2285, 0.3158, 0.4027, 0.4858, 0.5631, 0.6334, 0.6962, 0.7513, 0.7989, 0.8396, 0.8739, 0.9024, 0.9259, 0.9449, 0.9602, 0.9723, 0.9817, 0.9889, 0.9943, 0.9982, 1.001, 1.0029, 1.0041, 1.0047, 1.005, 1.005, 1.0048, 1.0045, 1.0041, 1.0036, 1.0032, 1.0028, 1.0024, 1.002, 1.0017, 1.0014, 1.0011, 1.0009, 1.0007, 1);
389
+ --ws-spring-highlight-duration: 800ms;
390
+ --ws-spring-nav: linear(0, 0.0209, 0.0734, 0.1452, 0.2271, 0.3128, 0.3976, 0.4784, 0.5535, 0.6217, 0.6826, 0.7361, 0.7826, 0.8225, 0.8565, 0.885, 0.9088, 0.9284, 0.9444, 0.9575, 0.9679, 0.9763, 0.9828, 0.9879, 0.9918, 0.9948, 0.997, 0.9986, 0.9997, 1.0005, 1.001, 1.0013, 1.0015, 1);
391
+ --ws-spring-nav-duration: 550ms;
392
+ --ws-spring-reorder: linear(0, 0.0215, 0.0744, 0.1452, 0.2248, 0.3067, 0.3868, 0.4627, 0.5327, 0.5962, 0.653, 0.7032, 0.7472, 0.7855, 0.8186, 0.847, 0.8713, 0.892, 0.9096, 0.9245, 0.937, 0.9475, 0.9564, 0.9638, 0.97, 0.9751, 0.9794, 0.983, 0.986, 0.9884, 0.9905, 0.9922, 0.9935, 0.9947, 0.9956, 0.9964, 0.9971, 0.9976, 0.998, 0.9984, 0.9987, 0.9989, 0.9991, 0.9993, 1);
393
+ --ws-spring-reorder-duration: 750ms;
394
+ --ws-spring-tile: linear(0, 0.0213, 0.0743, 0.1461, 0.2276, 0.312, 0.3952, 0.4741, 0.5472, 0.6134, 0.6725, 0.7246, 0.7699, 0.809, 0.8424, 0.8707, 0.8945, 0.9144, 0.931, 0.9447, 0.9559, 0.9651, 0.9725, 0.9785, 0.9833, 0.9872, 0.9902, 0.9926, 0.9945, 0.996, 0.9971, 0.9979, 0.9986, 0.9991, 0.9994, 0.9997, 0.9999, 1, 1.0001, 1.0001, 1.0002, 1);
395
+ --ws-spring-tile-duration: 450ms;
396
+ --ws-spring-lane: linear(0, 0.0208, 0.0727, 0.1429, 0.2224, 0.3049, 0.3862, 0.4635, 0.5352, 0.6004, 0.6588, 0.7104, 0.7557, 0.7949, 0.8286, 0.8575, 0.882, 0.9027, 0.9201, 0.9346, 0.9467, 0.9567, 0.965, 0.9718, 0.9773, 0.9819, 0.9856, 0.9886, 0.991, 0.9929, 0.9944, 0.9957, 0.9966, 0.9974, 0.998, 0.9985, 0.9989, 0.9992, 0.9994, 1);
397
+ --ws-spring-lane-duration: 750ms;
398
+ --ws-spring-lens: linear(0, 0.0207, 0.0723, 0.1421, 0.2213, 0.3035, 0.3846, 0.4618, 0.5334, 0.5985, 0.657, 0.7087, 0.754, 0.7933, 0.8272, 0.8561, 0.8808, 0.9016, 0.9191, 0.9338, 0.946, 0.9561, 0.9644, 0.9713, 0.9769, 0.9815, 0.9853, 0.9883, 0.9908, 0.9927, 0.9943, 0.9956, 0.9966, 0.9973, 0.998, 0.9985, 0.9988, 0.9991, 0.9994, 0.9995, 1);
399
+ --ws-spring-lens-duration: 750ms;
400
+ --ws-spring-swap: linear(0, 0.0208, 0.0726, 0.1431, 0.2232, 0.3066, 0.3888, 0.4672, 0.5399, 0.6061, 0.6653, 0.7176, 0.7633, 0.8028, 0.8367, 0.8655, 0.8899, 0.9104, 0.9274, 0.9415, 0.9532, 0.9628, 0.9705, 0.9769, 0.9819, 0.986, 0.9893, 0.9919, 0.9939, 0.9955, 0.9967, 0.9976, 0.9983, 0.9989, 0.9993, 0.9996, 1);
401
+ --ws-spring-swap-duration: 900ms;
402
+ --ws-spring-panel: linear(0, 0.0202, 0.0715, 0.142, 0.223, 0.3082, 0.393, 0.4743, 0.55, 0.6192, 0.6811, 0.7357, 0.7832, 0.8241, 0.8588, 0.888, 0.9123, 0.9323, 0.9486, 0.9617, 0.9722, 0.9804, 0.9868, 0.9917, 0.9954, 0.9981, 1, 1.0013, 1.0022, 1.0027, 1.0029, 1.003, 1);
403
+ --ws-spring-panel-duration: 550ms;
404
+ --ws-spring-card: linear(0, 0.0215, 0.0753, 0.1484, 0.2312, 0.3173, 0.4021, 0.4825, 0.5568, 0.6241, 0.6839, 0.7365, 0.782, 0.8211, 0.8542, 0.8821, 0.9054, 0.9247, 0.9406, 0.9535, 0.964, 0.9724, 0.9791, 0.9844, 0.9886, 0.9918, 0.9942, 0.9961, 0.9975, 0.9986, 0.9993, 0.9998, 1.0002, 1);
405
+ --ws-spring-card-duration: 700ms;
406
+ --ws-spring-text: linear(0, 0.0204, 0.0726, 0.1454, 0.2301, 0.3199, 0.4099, 0.4966, 0.5776, 0.6514, 0.7173, 0.775, 0.8246, 0.8666, 0.9016, 0.9303, 0.9533, 0.9715, 0.9855, 0.996, 1.0036, 1.0089, 1.0123, 1.0142, 1.0151, 1.0151, 1.0145, 1.0135, 1.0123, 1.011, 1.0096, 1.0083, 1.007, 1.0058, 1.0048, 1.0038, 1.003, 1.0023, 1.0017, 1.0013, 1.0009, 1.0006, 1);
407
+ --ws-spring-text-duration: 1200ms;
408
+ --ws-spring-badge: linear(0, 0.0203, 0.0741, 0.1519, 0.2453, 0.3473, 0.4519, 0.5545, 0.6515, 0.7405, 0.8197, 0.8883, 0.946, 0.9929, 1.0296, 1.057, 1.076, 1.0879, 1.0937, 1.0946, 1.0916, 1.0857, 1.0778, 1.0686, 1.0588, 1.0489, 1.0393, 1.0303, 1.0222, 1.015, 1.0088, 1.0036, 0.9995, 0.9963, 0.994, 0.9924, 0.9914, 0.991, 0.9911, 0.9915, 0.9921, 0.9929, 0.9938, 0.9947, 0.9956, 0.9965, 0.9974, 0.9981, 0.9988, 0.9993, 0.9998, 1.0001, 1.0004, 1.0006, 1);
409
+ --ws-spring-badge-duration: 650ms;
410
+ --ws-spring-tab: linear(0, 0.0209, 0.0738, 0.1462, 0.2291, 0.316, 0.4021, 0.4843, 0.5605, 0.6298, 0.6915, 0.7457, 0.7927, 0.8328, 0.8667, 0.8951, 0.9185, 0.9377, 0.9532, 0.9656, 0.9754, 0.9831, 0.9889, 0.9934, 0.9967, 0.999, 1.0007, 1.0018, 1.0025, 1.0028, 1);
411
+ --ws-spring-tab-duration: 500ms;
412
+ --ws-spring-chip: linear(0, 0.0204, 0.0719, 0.1424, 0.2231, 0.3077, 0.3917, 0.472, 0.5467, 0.6148, 0.6758, 0.7296, 0.7765, 0.8168, 0.8513, 0.8803, 0.9046, 0.9248, 0.9413, 0.9548, 0.9657, 0.9744, 0.9813, 0.9867, 0.9908, 0.994, 0.9964, 0.9981, 0.9994, 1.0003, 1.0009, 1.0012, 1.0014, 1.0015, 1);
413
+ --ws-spring-chip-duration: 350ms;
414
+ --ws-spring-glow: linear(0, 0.0214, 0.0742, 0.1449, 0.2243, 0.3061, 0.3862, 0.4619, 0.5319, 0.5954, 0.6522, 0.7025, 0.7465, 0.7849, 0.818, 0.8465, 0.8708, 0.8916, 0.9092, 0.9241, 0.9367, 0.9473, 0.9561, 0.9636, 0.9698, 0.975, 0.9793, 0.9829, 0.9859, 0.9883, 0.9904, 0.9921, 0.9935, 0.9946, 0.9956, 0.9964, 0.997, 0.9976, 0.998, 0.9984, 0.9987, 0.9989, 0.9991, 0.9993, 0.9994, 0.9995, 0.9996, 1);
415
+ --ws-spring-glow-duration: 600ms;
416
+ --ws-spring-roll: linear(0, 0.0211, 0.0736, 0.1447, 0.2252, 0.3088, 0.391, 0.4692, 0.5416, 0.6073, 0.666, 0.7179, 0.7631, 0.8023, 0.8358, 0.8644, 0.8885, 0.9088, 0.9258, 0.9398, 0.9515, 0.9611, 0.9689, 0.9753, 0.9805, 0.9846, 0.988, 0.9907, 0.9928, 0.9945, 0.9958, 0.9969, 0.9977, 0.9983, 0.9988, 0.9991, 0.9994, 1);
417
+ --ws-spring-roll-duration: 700ms;
418
+ --ws-spring-flag: linear(0, 0.0213, 0.0743, 0.1461, 0.2276, 0.312, 0.3952, 0.4741, 0.5472, 0.6134, 0.6725, 0.7246, 0.7699, 0.809, 0.8424, 0.8707, 0.8945, 0.9144, 0.931, 0.9447, 0.9559, 0.9651, 0.9725, 0.9785, 0.9833, 0.9872, 0.9902, 0.9926, 0.9945, 0.996, 0.9971, 0.9979, 0.9986, 0.9991, 0.9994, 0.9997, 0.9999, 1, 1.0001, 1.0001, 1.0002, 1);
419
+ --ws-spring-flag-duration: 450ms;
420
+ --ws-spring-mark: linear(0, 0.0203, 0.0737, 0.1502, 0.2413, 0.34, 0.4407, 0.5388, 0.6313, 0.716, 0.7913, 0.8567, 0.9119, 0.9573, 0.9935, 1.0212, 1.0415, 1.0553, 1.0636, 1.0675, 1.0678, 1.0655, 1.0611, 1.0554, 1.049, 1.0422, 1.0353, 1.0288, 1.0227, 1.0172, 1.0123, 1.0082, 1.0047, 1.0018, 0.9996, 0.9979, 0.9967, 0.996, 0.9955, 1);
421
+ --ws-spring-mark-duration: 550ms;
422
+ --ws-spring-morph-chart: linear(0, 0.0211, 0.0737, 0.145, 0.226, 0.3101, 0.3929, 0.4716, 0.5446, 0.6108, 0.6699, 0.7221, 0.7675, 0.8068, 0.8403, 0.8688, 0.8929, 0.913, 0.9297, 0.9436, 0.9549, 0.9643, 0.9718, 0.9779, 0.9828, 0.9868, 0.9899, 0.9924, 0.9943, 0.9958, 0.9969, 0.9978, 0.9985, 0.999, 0.9994, 1);
423
+ --ws-spring-morph-chart-duration: 1250ms;
424
+ --ws-spring-orb: linear(0, 0.0206, 0.0749, 0.1526, 0.2449, 0.3447, 0.4463, 0.5451, 0.638, 0.7227, 0.7978, 0.8628, 0.9175, 0.9622, 0.9976, 1.0245, 1.0439, 1.057, 1.0646, 1.0678, 1.0676, 1.0647, 1.06, 1.0541, 1.0475, 1.0405, 1.0337, 1.0272, 1.0212, 1.0158, 1.0111, 1.0071, 1.0038, 1.0011, 0.999, 0.9975, 0.9964, 0.9958, 1);
425
+ --ws-spring-orb-duration: 850ms;
426
+ --ws-spring-default: linear(0, 0.021, 0.0743, 0.1478, 0.2322, 0.3209, 0.409, 0.4932, 0.5714, 0.6423, 0.7055, 0.7607, 0.8083, 0.8487, 0.8826, 0.9107, 0.9336, 0.952, 0.9666, 0.978, 0.9868, 0.9933, 0.9981, 1.0015, 1.0038, 1.0052, 1.006, 1.0063, 1.0062, 1.006, 1.0055, 1.005, 1.0045, 1.0039, 1.0034, 1.0029, 1.0024, 1.002, 1.0016, 1.0013, 1.001, 1.0008, 1.0006, 1.0005, 1.0003, 1);
427
+ --ws-spring-default-duration: 750ms;
428
+ }
429
+
430
+ /* Derived tokens again on every carrier, so a palette or theme set on any element reaches what derives from it. */
431
+ [data-palette], [data-theme], .fello {
432
+ --color-surface-stripe: var(--ws-tint-accent);
433
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 50%, #61475f);
434
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04);
435
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5));
436
+ --color-stat-positive: var(--ws-chart-finished);
437
+ --color-text-brand-strong: var(--ws-word-needs);
438
+ --color-text-error-strong: color-mix(in srgb, var(--ws-word-needs) 95%, #944b00);
439
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19));
440
+ --color-text-placeholder: color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6);
441
+ --color-border-default: var(--ws-edge);
442
+ --color-border-hairline: var(--ws-edge-card);
443
+ --color-nav-hover-bg: color-mix(in srgb, var(--color-text-interactive) 5%, transparent);
444
+ --shadow-card-default: 0 1px 2px color-mix(in srgb, var(--color-text-heading) 4%, transparent), 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent);
445
+ --shadow-card-hover: 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--color-text-heading) 8%, transparent);
446
+ --shadow-dropdown: var(--shadow-pill);
447
+ --shadow-focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-text-heading);
448
+ --ws-page: color-mix(in srgb, var(--ws-tray) 97.5%, #252525);
449
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
450
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8));
451
+ --ws-sidebar-hover: color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface));
452
+ --ws-sidebar-press: var(--ws-tray);
453
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8));
454
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8));
455
+ --ws-well: var(--ws-tray);
456
+ --ws-field: var(--color-surface);
457
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
458
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
459
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
460
+ --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
461
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
462
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
463
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5));
464
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
465
+ --ws-track: var(--ws-tray);
466
+ --ws-field-ink: color-mix(in srgb, var(--color-text-body) 46.25%, #040404);
467
+ --ws-field-mark: var(--color-text-heading);
468
+ --ws-ink: var(--color-text-heading);
469
+ --ws-shade: var(--color-text-heading);
470
+ --ws-inverse: var(--color-text-heading);
471
+ --ws-on-inverse: var(--ws-on-act);
472
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
473
+ --ws-raised-sunk: var(--ws-surface-sunk);
474
+ --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
475
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
476
+ --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
477
+ --ws-ghost: color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17);
478
+ --ws-veil: color-mix(in srgb, var(--ws-page) 30%, transparent);
479
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 71.25%, #040404);
480
+ --ws-divider: var(--ws-hairline) solid var(--ws-edge);
481
+ --ws-divider-inset: inset 0 var(--ws-hairline) 0 var(--ws-edge);
482
+ --ws-frame: linear-gradient(180deg, var(--ws-frame-top) 0, var(--color-bg-page) 640px) var(--color-bg-page);
483
+ --ws-stage-wash: linear-gradient(180deg, var(--color-bg-page), var(--ws-stage-foot));
484
+ --ws-glass: color-mix(in srgb, var(--color-surface) 59%, transparent);
485
+ --ws-edge-stage: var(--ws-page);
486
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
487
+ --ws-word-past-half: var(--ws-chart-past-half);
488
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
489
+ --ws-chart-empty: color-mix(in srgb, var(--color-surface) 97.6%, #050505);
490
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8));
491
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(198.5 216 229.75));
492
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 25%, #fff2ec);
493
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 10%, rgb(227.8888888889 217.8888888889 251.7777777778));
494
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(217.75 249.5 242.75));
495
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(196.5 243.25 234));
496
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235));
497
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5));
498
+ --ws-chart-cell-edge: var(--ws-edge-slot);
499
+ --ws-shimmer-ground: var(--ws-ghost);
500
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
501
+ --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
502
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
503
+ --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
504
+ --ws-glow-rose: color-mix(in srgb, var(--ws-chart-under-half) 50%, #ebb8ca);
505
+ --ws-glow-pink: color-mix(in srgb, var(--ws-chart-needs-work) 90%, #ad167c);
506
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556));
507
+ --ws-team-glow: radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 14%, transparent), transparent), radial-gradient(70% 75% at 95% 100%, color-mix(in srgb, var(--ws-glow-rose) 22%, transparent), transparent), radial-gradient(55% 60% at 70% 45%, color-mix(in srgb, var(--ws-glow-pink) 8%, transparent), transparent);
508
+ --ws-cool-glow: radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 16%, transparent), transparent), radial-gradient(60% 70% at 92% 30%, color-mix(in srgb, var(--ws-glow-blue) 10%, transparent), transparent), radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--color-text-heading) 6%, transparent), transparent);
509
+ --ws-orb: radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 37.5%, rgb(26.6 218.4 244.4)), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 37.5%, rgb(160.2 122.2 251.6)) 80%);
510
+ --ws-shadow-hairline: 0 0 0 var(--ws-hairline) var(--ws-edge-card);
511
+ --ws-shadow-hairline-in: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card);
512
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray), inset 0 28px 8px 0 rgba(0, 0, 0, 0), inset 0 18px 7px 0 rgba(0, 0, 0, 0.01), inset 0 10px 6px 0 rgba(0, 0, 0, 0.03), inset 0 4px 4px 0 rgba(0, 0, 0, 0.05), inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
513
+ --ws-shadow-lift: var(--shadow-card-hover);
514
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent);
515
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent);
516
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent);
517
+ --ws-shadow-pop: var(--ws-float-rim), 0 12px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
518
+ --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
519
+ --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
520
+ --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
521
+ --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent);
522
+ --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
523
+ --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
524
+ --ws-hover-strong: color-mix(in srgb, var(--ws-ink) 5.8823529412%, transparent);
525
+ --ws-focus-inset: inset 0 0 0 var(--ws-focus-width) var(--ws-focus-color);
526
+ }
527
+ /* Every palette element starts from the kit's contract values (light here, each theme's below), at no specificity. */
528
+ :where([data-palette]) {
529
+ --color-bg-page: #FEFBF9;
530
+ --ws-frame-top: #ebf0f5;
531
+ --ws-stage-foot: #fef9f6;
532
+ --color-surface: var(--color-white);
533
+ --ws-raised: var(--color-bg-page);
534
+ --ws-tray: var(--color-gray-2);
535
+ --ws-edge-card: var(--color-gray-3);
536
+ --ws-edge: var(--color-gray-stroke);
537
+ --ws-edge-hover: #aaa49d;
538
+ --ws-well-hover: #e4e2df;
539
+ --color-text-heading: var(--color-brand-navy);
540
+ --color-text-body: var(--color-gray-7);
541
+ --color-text-muted: #666666;
542
+ --color-text-interactive: var(--color-brand-mid-blue);
543
+ --ws-on-act: var(--color-white);
544
+ --ws-act-hover: #0f4a73;
545
+ --ws-word-needs: #A84B3C;
546
+ --ws-focus-color: var(--color-text-heading);
547
+ --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
548
+ --ws-word-alert: var(--ws-chart-alert);
549
+ --ws-chart-finished: #098486;
550
+ --ws-chart-past-half: #6d4fc2;
551
+ --ws-chart-under-half: var(--color-brand-salmon);
552
+ --ws-chart-navy-light: #2e6088;
553
+ --ws-chart-needs-work: #f370a4;
554
+ --ws-chart-alert: #b1042f;
555
+ --ws-rating-strong: var(--color-stat-positive);
556
+ --ws-rating-middle: var(--color-brand-mid-blue);
557
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
558
+ --ws-agent-coach: var(--color-stat-positive);
559
+ --ws-agent-growth: var(--ws-chart-past-half);
560
+ --ws-agent-recruit: var(--ws-chart-under-half);
561
+ --ws-agent-tally: #2c4870;
562
+ }
563
+ /* Light: data-theme="light" (and "system" on a light OS) inside a dark element. */
564
+ [data-theme="light"], [data-theme="system"] {
565
+ color-scheme: light;
566
+ --color-bg-page: #FEFBF9;
567
+ --color-surface: var(--color-white);
568
+ --ws-raised: var(--color-bg-page);
569
+ --ws-edge: var(--color-gray-stroke);
570
+ --ws-edge-card: var(--color-gray-3);
571
+ --color-text-heading: var(--color-brand-navy);
572
+ --color-text-body: var(--color-gray-7);
573
+ --color-text-muted: #666666;
574
+ --color-text-interactive: var(--color-brand-mid-blue);
575
+ --ws-word-needs: #A84B3C;
576
+ --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
577
+ --ws-on-act: var(--color-white);
578
+ --ws-chart-finished: #098486;
579
+ --ws-chart-past-half: #6d4fc2;
580
+ --ws-chart-navy-light: #2e6088;
581
+ --color-alert: #e90f0f;
582
+ --ws-ink-rgb: 9, 53, 85;
583
+ --ws-shade-rgb: 9, 53, 85;
584
+ --ws-tray: var(--color-gray-2);
585
+ --ws-well-hover: #e4e2df;
586
+ --ws-frame-top: #ebf0f5;
587
+ --ws-stage-foot: #fef9f6;
588
+ --ws-chart-alert: #b1042f;
589
+ --ws-rating-middle: var(--color-brand-mid-blue);
590
+ --ws-edge-hover: #aaa49d;
591
+ --ws-act-hover: #0f4a73;
592
+ --ws-agent-tally: #2c4870;
593
+ --ws-word-alert: var(--ws-chart-alert);
594
+ --ws-focus-color: var(--color-text-heading);
595
+ --ws-chart-under-half: var(--color-brand-salmon);
596
+ --ws-rating-strong: var(--color-stat-positive);
597
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
598
+ --ws-agent-coach: var(--color-stat-positive);
599
+ --ws-agent-growth: var(--ws-chart-past-half);
600
+ --ws-agent-recruit: var(--ws-chart-under-half);
601
+ }
602
+ @scope ([data-theme="light"], [data-theme="system"]) {
603
+ :scope, [data-palette], .fello {
604
+ --ws-page: color-mix(in srgb, var(--ws-tray) 97.5%, #252525);
605
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
606
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8));
607
+ --ws-well: var(--ws-tray);
608
+ --ws-field: var(--color-surface);
609
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
610
+ --ws-sidebar-hover: color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface));
611
+ --ws-sidebar-press: var(--ws-tray);
612
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8));
613
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8));
614
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
615
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
616
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
617
+ --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
618
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
619
+ --ws-track: var(--ws-tray);
620
+ --color-dropdown-bg: #fcfaf9;
621
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5));
622
+ --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
623
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
624
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
625
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5));
626
+ --color-text-placeholder: color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6);
627
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 50%, #61475f);
628
+ --color-text-error-strong: color-mix(in srgb, var(--ws-word-needs) 95%, #944b00);
629
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19));
630
+ --color-feedback-success-text: #4f7d24;
631
+ --ws-field-ink: color-mix(in srgb, var(--color-text-body) 46.25%, #040404);
632
+ --color-stat-positive: var(--ws-chart-finished);
633
+ --ws-chart-empty: color-mix(in srgb, var(--color-surface) 97.6%, #050505);
634
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8));
635
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(198.5 216 229.75));
636
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 25%, #fff2ec);
637
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 10%, rgb(227.8888888889 217.8888888889 251.7777777778));
638
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(217.75 249.5 242.75));
639
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(196.5 243.25 234));
640
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235));
641
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5));
642
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04);
643
+ --ws-shade: var(--color-text-heading);
644
+ --color-nav-hover-bg: color-mix(in srgb, var(--color-text-interactive) 5%, transparent);
645
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray), inset 0 28px 8px 0 rgba(0, 0, 0, 0), inset 0 18px 7px 0 rgba(0, 0, 0, 0.01), inset 0 10px 6px 0 rgba(0, 0, 0, 0.03), inset 0 4px 4px 0 rgba(0, 0, 0, 0.05), inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
646
+ --ws-shadow-lift: var(--shadow-card-hover);
647
+ --shadow-card-default: 0 1px 2px color-mix(in srgb, var(--color-text-heading) 4%, transparent), 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent);
648
+ --shadow-card-hover: 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--color-text-heading) 8%, transparent);
649
+ --shadow-dropdown: var(--shadow-pill);
650
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent);
651
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent);
652
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent);
653
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556));
654
+ --ws-cool-glow: radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 16%, transparent), transparent), radial-gradient(60% 70% at 92% 30%, color-mix(in srgb, var(--ws-glow-blue) 10%, transparent), transparent), radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--color-text-heading) 6%, transparent), transparent);
655
+ --ws-team-glow: radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 14%, transparent), transparent), radial-gradient(70% 75% at 95% 100%, color-mix(in srgb, var(--ws-glow-rose) 22%, transparent), transparent), radial-gradient(55% 60% at 70% 45%, color-mix(in srgb, var(--ws-glow-pink) 8%, transparent), transparent);
656
+ --ws-orb: radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 37.5%, rgb(26.6 218.4 244.4)), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 37.5%, rgb(160.2 122.2 251.6)) 80%);
657
+ --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
658
+ --ws-frame: linear-gradient(180deg, var(--ws-frame-top) 0, var(--color-bg-page) 640px) var(--color-bg-page);
659
+ --ws-stage-wash: linear-gradient(180deg, var(--color-bg-page), var(--ws-stage-foot));
660
+ --ws-glass: color-mix(in srgb, var(--color-surface) 59%, transparent);
661
+ --ws-edge-stage: var(--ws-page);
662
+ --ws-float-rim: 0 0 0 0 transparent;
663
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
664
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
665
+ --ws-raised-sunk: var(--ws-surface-sunk);
666
+ --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
667
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
668
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
669
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%, var(--ws-shimmer-ground) 66% 100%);
670
+ --ws-inverse: var(--color-text-heading);
671
+ --ws-on-inverse: var(--ws-on-act);
672
+ --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
673
+ --ws-ghost: color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17);
674
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 71.25%, #040404);
675
+ --ws-field-mark: var(--color-text-heading);
676
+ --ws-word-past-half: var(--ws-chart-past-half);
677
+ }
678
+ }
679
+ @scope ([data-theme="light"], [data-theme="system"]) {
680
+ :where([data-palette]) {
681
+ --color-bg-page: #FEFBF9;
682
+ --ws-frame-top: #ebf0f5;
683
+ --ws-stage-foot: #fef9f6;
684
+ --color-surface: var(--color-white);
685
+ --ws-raised: var(--color-bg-page);
686
+ --ws-tray: var(--color-gray-2);
687
+ --ws-edge-card: var(--color-gray-3);
688
+ --ws-edge: var(--color-gray-stroke);
689
+ --ws-edge-hover: #aaa49d;
690
+ --ws-well-hover: #e4e2df;
691
+ --color-text-heading: var(--color-brand-navy);
692
+ --color-text-body: var(--color-gray-7);
693
+ --color-text-muted: #666666;
694
+ --color-text-interactive: var(--color-brand-mid-blue);
695
+ --ws-on-act: var(--color-white);
696
+ --ws-act-hover: #0f4a73;
697
+ --ws-word-needs: #A84B3C;
698
+ --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
699
+ --ws-word-alert: var(--ws-chart-alert);
700
+ --ws-chart-finished: #098486;
701
+ --ws-chart-past-half: #6d4fc2;
702
+ --ws-chart-navy-light: #2e6088;
703
+ --ws-chart-alert: #b1042f;
704
+ --ws-rating-middle: var(--color-brand-mid-blue);
705
+ --ws-agent-tally: #2c4870;
706
+ }
707
+ }
708
+ /* Night: data-theme="dark", and "system" on a dark OS. */
709
+ [data-theme="dark"] {
710
+ color-scheme: dark;
711
+ --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e);
712
+ --color-bg-page: #0F1922;
713
+ --color-surface: #131E28;
714
+ --ws-raised: #16222D;
715
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2);
716
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe);
717
+ --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21));
718
+ --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16);
719
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509);
720
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea);
721
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe);
722
+ --ws-menu-hover: var(--ws-surface-press);
723
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8);
724
+ --ws-tint-accent: var(--color-surface);
725
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
726
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
727
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
728
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
729
+ --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
730
+ --color-dropdown-bg: var(--ws-raised);
731
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75));
732
+ --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent);
733
+ --ws-edge: #1E2A36;
734
+ --ws-edge-card: #273544;
735
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3);
736
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118);
737
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6);
738
+ --color-text-heading: #E8EDF3;
739
+ --color-text-body: #B0BBC7;
740
+ --color-text-muted: #8494A5;
741
+ --color-text-placeholder: var(--color-text-muted);
742
+ --color-text-interactive: #93A6DC;
743
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body));
744
+ --ws-word-needs: #FF8B78;
745
+ --color-text-error-strong: var(--ws-word-needs);
746
+ --ws-word-positive: #4FC7BE;
747
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f);
748
+ --color-feedback-success-text: var(--color-text-success-strong);
749
+ --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body));
750
+ --ws-on-act: var(--color-bg-page);
751
+ --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee);
752
+ --ws-chart-finished: #23A8A3;
753
+ --ws-chart-past-half: #9A84EE;
754
+ --ws-chart-navy-light: #6E9CC4;
755
+ --ws-chart-empty: var(--ws-track);
756
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6);
757
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
758
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
759
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
760
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
761
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
762
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
763
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
764
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2);
765
+ --color-alert: #FF5A5A;
766
+ --ws-ink-rgb: 232, 237, 243;
767
+ --ws-shade-rgb: 0, 0, 0;
768
+ --ws-shade: #000;
769
+ --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
770
+ --ws-shadow-band: inset 0 0.5px 0 color-mix(in srgb, var(--ws-tray) 96%, #82a8ce), inset 0 10px 6px 0 rgba(0, 0, 0, 0.06), inset 0 4px 4px 0 rgba(0, 0, 0, 0.1), inset 0 1px 2px 0 rgba(0, 0, 0, 0.14);
771
+ --ws-shadow-lift: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.42);
772
+ --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
773
+ --shadow-card-hover: var(--ws-shadow-lift);
774
+ --shadow-dropdown: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 8px 17px rgba(0, 0, 0, 0.3), 0 30px 30px rgba(0, 0, 0, 0.26), 0 68px 41px rgba(0, 0, 0, 0.16);
775
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
776
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
777
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
778
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251));
779
+ --ws-cool-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
780
+ --ws-team-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), radial-gradient(70% 80% at 0% 90%, color-mix(in srgb, var(--ws-chart-under-half) 12%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
781
+ --ws-orb: radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 50%, #05ccf3), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 80%, #5902c6) 80%);
782
+ --ws-tray: #1E2B38;
783
+ --ws-edge-card-1x: var(--ws-edge-card);
784
+ --ws-well-hover: #273544;
785
+ --ws-frame: var(--ws-frame-top);
786
+ --ws-frame-top: var(--ws-page);
787
+ --ws-stage-foot: var(--color-bg-page);
788
+ --ws-stage-wash: var(--color-bg-page);
789
+ --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent);
790
+ --ws-edge-stage: var(--ws-edge-card);
791
+ --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
792
+ --ws-chart-alert: #FF5470;
793
+ --ws-word-needs-work: var(--ws-chart-needs-work);
794
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
795
+ --ws-rating-middle: var(--color-text-interactive);
796
+ --ws-raised-sunk: var(--ws-surface-press);
797
+ --ws-edge-hover: var(--color-text-muted);
798
+ --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act));
799
+ --ws-act-light: transparent;
800
+ --ws-agent-tally: var(--color-text-heading);
801
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
802
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
803
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
804
+ --ws-inverse: var(--color-bg-dark);
805
+ --ws-on-inverse: var(--color-white);
806
+ --ws-chart-rest: var(--ws-edge-card);
807
+ --ws-ghost: var(--ws-well-hover);
808
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink));
809
+ --ws-focus-color: var(--color-text-heading);
810
+ --ws-word-alert: var(--ws-chart-alert);
811
+ --ws-chart-under-half: var(--color-brand-salmon);
812
+ --ws-rating-strong: var(--color-stat-positive);
813
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
814
+ --ws-agent-coach: var(--color-stat-positive);
815
+ --ws-agent-growth: var(--ws-chart-past-half);
816
+ --ws-agent-recruit: var(--ws-chart-under-half);
817
+ }
818
+ @scope ([data-theme="dark"]) {
819
+ :scope, [data-palette], .fello {
820
+ --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e);
821
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2);
822
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe);
823
+ --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21));
824
+ --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16);
825
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509);
826
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea);
827
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe);
828
+ --ws-menu-hover: var(--ws-surface-press);
829
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8);
830
+ --ws-tint-accent: var(--color-surface);
831
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
832
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
833
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
834
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
835
+ --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
836
+ --color-dropdown-bg: var(--ws-raised);
837
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75));
838
+ --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent);
839
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3);
840
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118);
841
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6);
842
+ --color-text-placeholder: var(--color-text-muted);
843
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body));
844
+ --color-text-error-strong: var(--ws-word-needs);
845
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f);
846
+ --color-feedback-success-text: var(--color-text-success-strong);
847
+ --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body));
848
+ --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee);
849
+ --ws-chart-empty: var(--ws-track);
850
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6);
851
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
852
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
853
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
854
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
855
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
856
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
857
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
858
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2);
859
+ --ws-shade: #000;
860
+ --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
861
+ --ws-shadow-band: inset 0 0.5px 0 color-mix(in srgb, var(--ws-tray) 96%, #82a8ce), inset 0 10px 6px 0 rgba(0, 0, 0, 0.06), inset 0 4px 4px 0 rgba(0, 0, 0, 0.1), inset 0 1px 2px 0 rgba(0, 0, 0, 0.14);
862
+ --ws-shadow-lift: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.42);
863
+ --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
864
+ --shadow-card-hover: var(--ws-shadow-lift);
865
+ --shadow-dropdown: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 8px 17px rgba(0, 0, 0, 0.3), 0 30px 30px rgba(0, 0, 0, 0.26), 0 68px 41px rgba(0, 0, 0, 0.16);
866
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
867
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
868
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
869
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251));
870
+ --ws-cool-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
871
+ --ws-team-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), radial-gradient(70% 80% at 0% 90%, color-mix(in srgb, var(--ws-chart-under-half) 12%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
872
+ --ws-orb: radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 50%, #05ccf3), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 80%, #5902c6) 80%);
873
+ --ws-edge-card-1x: var(--ws-edge-card);
874
+ --ws-frame: var(--ws-frame-top);
875
+ --ws-stage-wash: var(--color-bg-page);
876
+ --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent);
877
+ --ws-edge-stage: var(--ws-edge-card);
878
+ --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
879
+ --ws-word-needs-work: var(--ws-chart-needs-work);
880
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
881
+ --ws-raised-sunk: var(--ws-surface-press);
882
+ --ws-act-light: transparent;
883
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
884
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
885
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
886
+ --ws-inverse: var(--color-bg-dark);
887
+ --ws-on-inverse: var(--color-white);
888
+ --ws-chart-rest: var(--ws-edge-card);
889
+ --ws-ghost: var(--ws-well-hover);
890
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink));
891
+ }
892
+ }
893
+ @scope ([data-theme="dark"]) {
894
+ :where([data-palette]) {
895
+ --color-bg-page: #0F1922;
896
+ --ws-frame-top: var(--ws-page);
897
+ --ws-stage-foot: var(--color-bg-page);
898
+ --color-surface: #131E28;
899
+ --ws-raised: #16222D;
900
+ --ws-tray: #1E2B38;
901
+ --ws-edge-card: #273544;
902
+ --ws-edge: #1E2A36;
903
+ --ws-edge-hover: var(--color-text-muted);
904
+ --ws-well-hover: #273544;
905
+ --color-text-heading: #E8EDF3;
906
+ --color-text-body: #B0BBC7;
907
+ --color-text-muted: #8494A5;
908
+ --color-text-interactive: #93A6DC;
909
+ --ws-on-act: var(--color-bg-page);
910
+ --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act));
911
+ --ws-word-needs: #FF8B78;
912
+ --ws-word-positive: #4FC7BE;
913
+ --ws-chart-finished: #23A8A3;
914
+ --ws-chart-past-half: #9A84EE;
915
+ --ws-chart-navy-light: #6E9CC4;
916
+ --ws-chart-alert: #FF5470;
917
+ --ws-rating-middle: var(--color-text-interactive);
918
+ --ws-agent-tally: var(--color-text-heading);
919
+ }
920
+ }
921
+ @media (prefers-color-scheme: dark) {
922
+ [data-theme="system"] {
923
+ color-scheme: dark;
924
+ --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e);
925
+ --color-bg-page: #0F1922;
926
+ --color-surface: #131E28;
927
+ --ws-raised: #16222D;
928
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2);
929
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe);
930
+ --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21));
931
+ --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16);
932
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509);
933
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea);
934
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe);
935
+ --ws-menu-hover: var(--ws-surface-press);
936
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8);
937
+ --ws-tint-accent: var(--color-surface);
938
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
939
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
940
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
941
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
942
+ --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
943
+ --color-dropdown-bg: var(--ws-raised);
944
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75));
945
+ --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent);
946
+ --ws-edge: #1E2A36;
947
+ --ws-edge-card: #273544;
948
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3);
949
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118);
950
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6);
951
+ --color-text-heading: #E8EDF3;
952
+ --color-text-body: #B0BBC7;
953
+ --color-text-muted: #8494A5;
954
+ --color-text-placeholder: var(--color-text-muted);
955
+ --color-text-interactive: #93A6DC;
956
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body));
957
+ --ws-word-needs: #FF8B78;
958
+ --color-text-error-strong: var(--ws-word-needs);
959
+ --ws-word-positive: #4FC7BE;
960
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f);
961
+ --color-feedback-success-text: var(--color-text-success-strong);
962
+ --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body));
963
+ --ws-on-act: var(--color-bg-page);
964
+ --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee);
965
+ --ws-chart-finished: #23A8A3;
966
+ --ws-chart-past-half: #9A84EE;
967
+ --ws-chart-navy-light: #6E9CC4;
968
+ --ws-chart-empty: var(--ws-track);
969
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6);
970
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
971
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
972
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
973
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
974
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
975
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
976
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
977
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2);
978
+ --color-alert: #FF5A5A;
979
+ --ws-ink-rgb: 232, 237, 243;
980
+ --ws-shade-rgb: 0, 0, 0;
981
+ --ws-shade: #000;
982
+ --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
983
+ --ws-shadow-band: inset 0 0.5px 0 color-mix(in srgb, var(--ws-tray) 96%, #82a8ce), inset 0 10px 6px 0 rgba(0, 0, 0, 0.06), inset 0 4px 4px 0 rgba(0, 0, 0, 0.1), inset 0 1px 2px 0 rgba(0, 0, 0, 0.14);
984
+ --ws-shadow-lift: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.42);
985
+ --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
986
+ --shadow-card-hover: var(--ws-shadow-lift);
987
+ --shadow-dropdown: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 8px 17px rgba(0, 0, 0, 0.3), 0 30px 30px rgba(0, 0, 0, 0.26), 0 68px 41px rgba(0, 0, 0, 0.16);
988
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
989
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
990
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
991
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251));
992
+ --ws-cool-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
993
+ --ws-team-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), radial-gradient(70% 80% at 0% 90%, color-mix(in srgb, var(--ws-chart-under-half) 12%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
994
+ --ws-orb: radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 50%, #05ccf3), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 80%, #5902c6) 80%);
995
+ --ws-tray: #1E2B38;
996
+ --ws-edge-card-1x: var(--ws-edge-card);
997
+ --ws-well-hover: #273544;
998
+ --ws-frame: var(--ws-frame-top);
999
+ --ws-frame-top: var(--ws-page);
1000
+ --ws-stage-foot: var(--color-bg-page);
1001
+ --ws-stage-wash: var(--color-bg-page);
1002
+ --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent);
1003
+ --ws-edge-stage: var(--ws-edge-card);
1004
+ --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
1005
+ --ws-chart-alert: #FF5470;
1006
+ --ws-word-needs-work: var(--ws-chart-needs-work);
1007
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
1008
+ --ws-rating-middle: var(--color-text-interactive);
1009
+ --ws-raised-sunk: var(--ws-surface-press);
1010
+ --ws-edge-hover: var(--color-text-muted);
1011
+ --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act));
1012
+ --ws-act-light: transparent;
1013
+ --ws-agent-tally: var(--color-text-heading);
1014
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
1015
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
1016
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
1017
+ --ws-inverse: var(--color-bg-dark);
1018
+ --ws-on-inverse: var(--color-white);
1019
+ --ws-chart-rest: var(--ws-edge-card);
1020
+ --ws-ghost: var(--ws-well-hover);
1021
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink));
1022
+ --ws-focus-color: var(--color-text-heading);
1023
+ --ws-word-alert: var(--ws-chart-alert);
1024
+ --ws-chart-under-half: var(--color-brand-salmon);
1025
+ --ws-rating-strong: var(--color-stat-positive);
1026
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
1027
+ --ws-agent-coach: var(--color-stat-positive);
1028
+ --ws-agent-growth: var(--ws-chart-past-half);
1029
+ --ws-agent-recruit: var(--ws-chart-under-half);
1030
+ }
1031
+ @scope ([data-theme="system"]) {
1032
+ :scope, [data-palette], .fello {
1033
+ --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e);
1034
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2);
1035
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe);
1036
+ --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21));
1037
+ --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16);
1038
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509);
1039
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea);
1040
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe);
1041
+ --ws-menu-hover: var(--ws-surface-press);
1042
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8);
1043
+ --ws-tint-accent: var(--color-surface);
1044
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
1045
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
1046
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
1047
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
1048
+ --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
1049
+ --color-dropdown-bg: var(--ws-raised);
1050
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75));
1051
+ --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent);
1052
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3);
1053
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118);
1054
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6);
1055
+ --color-text-placeholder: var(--color-text-muted);
1056
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body));
1057
+ --color-text-error-strong: var(--ws-word-needs);
1058
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f);
1059
+ --color-feedback-success-text: var(--color-text-success-strong);
1060
+ --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body));
1061
+ --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee);
1062
+ --ws-chart-empty: var(--ws-track);
1063
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6);
1064
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
1065
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
1066
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
1067
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
1068
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
1069
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
1070
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
1071
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2);
1072
+ --ws-shade: #000;
1073
+ --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
1074
+ --ws-shadow-band: inset 0 0.5px 0 color-mix(in srgb, var(--ws-tray) 96%, #82a8ce), inset 0 10px 6px 0 rgba(0, 0, 0, 0.06), inset 0 4px 4px 0 rgba(0, 0, 0, 0.1), inset 0 1px 2px 0 rgba(0, 0, 0, 0.14);
1075
+ --ws-shadow-lift: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.42);
1076
+ --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
1077
+ --shadow-card-hover: var(--ws-shadow-lift);
1078
+ --shadow-dropdown: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 8px 17px rgba(0, 0, 0, 0.3), 0 30px 30px rgba(0, 0, 0, 0.26), 0 68px 41px rgba(0, 0, 0, 0.16);
1079
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
1080
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
1081
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
1082
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251));
1083
+ --ws-cool-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
1084
+ --ws-team-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), radial-gradient(70% 80% at 0% 90%, color-mix(in srgb, var(--ws-chart-under-half) 12%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
1085
+ --ws-orb: radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 50%, #05ccf3), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 80%, #5902c6) 80%);
1086
+ --ws-edge-card-1x: var(--ws-edge-card);
1087
+ --ws-frame: var(--ws-frame-top);
1088
+ --ws-stage-wash: var(--color-bg-page);
1089
+ --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent);
1090
+ --ws-edge-stage: var(--ws-edge-card);
1091
+ --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
1092
+ --ws-word-needs-work: var(--ws-chart-needs-work);
1093
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
1094
+ --ws-raised-sunk: var(--ws-surface-press);
1095
+ --ws-act-light: transparent;
1096
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
1097
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
1098
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
1099
+ --ws-inverse: var(--color-bg-dark);
1100
+ --ws-on-inverse: var(--color-white);
1101
+ --ws-chart-rest: var(--ws-edge-card);
1102
+ --ws-ghost: var(--ws-well-hover);
1103
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink));
1104
+ }
1105
+ }
1106
+ @scope ([data-theme="system"]) {
1107
+ :where([data-palette]) {
1108
+ --color-bg-page: #0F1922;
1109
+ --ws-frame-top: var(--ws-page);
1110
+ --ws-stage-foot: var(--color-bg-page);
1111
+ --color-surface: #131E28;
1112
+ --ws-raised: #16222D;
1113
+ --ws-tray: #1E2B38;
1114
+ --ws-edge-card: #273544;
1115
+ --ws-edge: #1E2A36;
1116
+ --ws-edge-hover: var(--color-text-muted);
1117
+ --ws-well-hover: #273544;
1118
+ --color-text-heading: #E8EDF3;
1119
+ --color-text-body: #B0BBC7;
1120
+ --color-text-muted: #8494A5;
1121
+ --color-text-interactive: #93A6DC;
1122
+ --ws-on-act: var(--color-bg-page);
1123
+ --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act));
1124
+ --ws-word-needs: #FF8B78;
1125
+ --ws-word-positive: #4FC7BE;
1126
+ --ws-chart-finished: #23A8A3;
1127
+ --ws-chart-past-half: #9A84EE;
1128
+ --ws-chart-navy-light: #6E9CC4;
1129
+ --ws-chart-alert: #FF5470;
1130
+ --ws-rating-middle: var(--color-text-interactive);
1131
+ --ws-agent-tally: var(--color-text-heading);
1132
+ }
1133
+ }
1134
+ }
1135
+ /* The palettes (tokens/_palettes.css): cool, warm. */
1136
+ /* cool */
1137
+ [data-palette="cool"] {
1138
+ --ws-stage-foot: #fefbf9;
1139
+ --ws-edge: #e2e2e2;
1140
+ --color-text-interactive: var(--color-text-heading);
1141
+ }
1142
+ [data-palette="cool"][data-theme="light"], [data-palette="cool"][data-theme="system"] {
1143
+ --ws-stage-foot: #fefbf9;
1144
+ --ws-edge: #e2e2e2;
1145
+ --color-text-interactive: var(--color-text-heading);
1146
+ }
1147
+ @scope ([data-theme="light"], [data-theme="system"]) {
1148
+ [data-palette="cool"] {
1149
+ --ws-stage-foot: #fefbf9;
1150
+ --ws-edge: #e2e2e2;
1151
+ --color-text-interactive: var(--color-text-heading);
1152
+ }
1153
+ }
1154
+ @scope ([data-palette="cool"]) {
1155
+ [data-theme="light"], [data-theme="system"] {
1156
+ --ws-stage-foot: #fefbf9;
1157
+ --ws-edge: #e2e2e2;
1158
+ --color-text-interactive: var(--color-text-heading);
1159
+ }
1160
+ }
1161
+ [data-palette="cool"][data-theme="dark"] {
1162
+ --ws-stage-foot: var(--color-bg-page);
1163
+ --ws-edge: #1E2A36;
1164
+ --color-text-interactive: var(--color-text-heading);
1165
+ }
1166
+ @scope ([data-theme="dark"]) {
1167
+ [data-palette="cool"] {
1168
+ --ws-stage-foot: var(--color-bg-page);
1169
+ --ws-edge: #1E2A36;
1170
+ --color-text-interactive: var(--color-text-heading);
1171
+ }
1172
+ }
1173
+ @scope ([data-palette="cool"]) {
1174
+ [data-theme="dark"] {
1175
+ --ws-stage-foot: var(--color-bg-page);
1176
+ --ws-edge: #1E2A36;
1177
+ --color-text-interactive: var(--color-text-heading);
1178
+ }
1179
+ }
1180
+ @media (prefers-color-scheme: dark) {
1181
+ [data-palette="cool"][data-theme="system"] {
1182
+ --ws-stage-foot: var(--color-bg-page);
1183
+ --ws-edge: #1E2A36;
1184
+ --color-text-interactive: var(--color-text-heading);
1185
+ }
1186
+ @scope ([data-theme="system"]) {
1187
+ [data-palette="cool"] {
1188
+ --ws-stage-foot: var(--color-bg-page);
1189
+ --ws-edge: #1E2A36;
1190
+ --color-text-interactive: var(--color-text-heading);
1191
+ }
1192
+ }
1193
+ @scope ([data-palette="cool"]) {
1194
+ [data-theme="system"] {
1195
+ --ws-stage-foot: var(--color-bg-page);
1196
+ --ws-edge: #1E2A36;
1197
+ --color-text-interactive: var(--color-text-heading);
1198
+ }
1199
+ }
1200
+ }
1201
+ /* warm */
1202
+ [data-palette="warm"] {
1203
+ --ws-frame-top: #fefbf9;
1204
+ }
1205
+ [data-palette="warm"][data-theme="light"], [data-palette="warm"][data-theme="system"] {
1206
+ --ws-frame-top: #fefbf9;
1207
+ }
1208
+ @scope ([data-theme="light"], [data-theme="system"]) {
1209
+ [data-palette="warm"] {
1210
+ --ws-frame-top: #fefbf9;
1211
+ }
1212
+ }
1213
+ @scope ([data-palette="warm"]) {
1214
+ [data-theme="light"], [data-theme="system"] {
1215
+ --ws-frame-top: #fefbf9;
1216
+ }
1217
+ }
1218
+ [data-palette="warm"][data-theme="dark"] {
1219
+ --ws-frame-top: var(--ws-page);
1220
+ }
1221
+ @scope ([data-theme="dark"]) {
1222
+ [data-palette="warm"] {
1223
+ --ws-frame-top: var(--ws-page);
1224
+ }
1225
+ }
1226
+ @scope ([data-palette="warm"]) {
1227
+ [data-theme="dark"] {
1228
+ --ws-frame-top: var(--ws-page);
1229
+ }
1230
+ }
1231
+ @media (prefers-color-scheme: dark) {
1232
+ [data-palette="warm"][data-theme="system"] {
1233
+ --ws-frame-top: var(--ws-page);
1234
+ }
1235
+ @scope ([data-theme="system"]) {
1236
+ [data-palette="warm"] {
1237
+ --ws-frame-top: var(--ws-page);
1238
+ }
1239
+ }
1240
+ @scope ([data-palette="warm"]) {
1241
+ [data-theme="system"] {
1242
+ --ws-frame-top: var(--ws-page);
1243
+ }
1244
+ }
1245
+ }
1246
+ /* The navy ground, beside data-theme="dark" (or "system" on a dark OS): over night, and over a palette. */
1247
+ [data-theme="dark"][data-ground="navy"] {
1248
+ --ws-page: var(--color-bg-page);
1249
+ --color-bg-page: #021A32;
1250
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1251
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1252
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1253
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1254
+ --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1255
+ --ws-field: var(--color-white);
1256
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1257
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1258
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1259
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1260
+ --ws-menu-line: var(--ws-edge-card);
1261
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1262
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1263
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1264
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1265
+ --ws-card-tint-done: var(--ws-tint-live);
1266
+ --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1267
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1268
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1269
+ --ws-edge-chip: var(--ws-edge-card);
1270
+ --ws-edge-slot: var(--ws-edge-card);
1271
+ --ws-edge-tray: var(--ws-edge-card);
1272
+ --color-text-heading: #FFFFFF;
1273
+ --color-text-body: #D3D3D3;
1274
+ --color-text-muted: #A9A9A9;
1275
+ --color-text-placeholder: #6E6E6E;
1276
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000);
1277
+ --ws-field-ink: var(--color-brand-navy);
1278
+ --ws-field-mark: var(--ws-field-ink);
1279
+ --ws-chart-empty: var(--ws-track);
1280
+ --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
1281
+ --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
1282
+ --ws-ink-rgb: 255, 255, 255;
1283
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
1284
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1285
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0);
1286
+ --ws-word-alert: #FF8282;
1287
+ --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd);
1288
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3);
1289
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading));
1290
+ }
1291
+ @scope ([data-theme="dark"][data-ground="navy"]) {
1292
+ :scope, [data-palette], .fello {
1293
+ --ws-page: var(--color-bg-page);
1294
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1295
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1296
+ --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1297
+ --ws-field: var(--color-white);
1298
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1299
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1300
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1301
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1302
+ --ws-menu-line: var(--ws-edge-card);
1303
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1304
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1305
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1306
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1307
+ --ws-card-tint-done: var(--ws-tint-live);
1308
+ --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1309
+ --ws-edge-chip: var(--ws-edge-card);
1310
+ --ws-edge-slot: var(--ws-edge-card);
1311
+ --ws-edge-tray: var(--ws-edge-card);
1312
+ --color-text-placeholder: #6E6E6E;
1313
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000);
1314
+ --ws-field-ink: var(--color-brand-navy);
1315
+ --ws-field-mark: var(--ws-field-ink);
1316
+ --ws-chart-empty: var(--ws-track);
1317
+ --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
1318
+ --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
1319
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
1320
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0);
1321
+ --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd);
1322
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3);
1323
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading));
1324
+ }
1325
+ }
1326
+ @media (prefers-color-scheme: dark) {
1327
+ [data-theme="system"][data-ground="navy"] {
1328
+ --ws-page: var(--color-bg-page);
1329
+ --color-bg-page: #021A32;
1330
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1331
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1332
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1333
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1334
+ --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1335
+ --ws-field: var(--color-white);
1336
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1337
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1338
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1339
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1340
+ --ws-menu-line: var(--ws-edge-card);
1341
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1342
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1343
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1344
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1345
+ --ws-card-tint-done: var(--ws-tint-live);
1346
+ --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1347
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1348
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1349
+ --ws-edge-chip: var(--ws-edge-card);
1350
+ --ws-edge-slot: var(--ws-edge-card);
1351
+ --ws-edge-tray: var(--ws-edge-card);
1352
+ --color-text-heading: #FFFFFF;
1353
+ --color-text-body: #D3D3D3;
1354
+ --color-text-muted: #A9A9A9;
1355
+ --color-text-placeholder: #6E6E6E;
1356
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000);
1357
+ --ws-field-ink: var(--color-brand-navy);
1358
+ --ws-field-mark: var(--ws-field-ink);
1359
+ --ws-chart-empty: var(--ws-track);
1360
+ --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
1361
+ --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
1362
+ --ws-ink-rgb: 255, 255, 255;
1363
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
1364
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1365
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0);
1366
+ --ws-word-alert: #FF8282;
1367
+ --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd);
1368
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3);
1369
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading));
1370
+ }
1371
+ @scope ([data-theme="system"][data-ground="navy"]) {
1372
+ :scope, [data-palette], .fello {
1373
+ --ws-page: var(--color-bg-page);
1374
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1375
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1376
+ --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1377
+ --ws-field: var(--color-white);
1378
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1379
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1380
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1381
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1382
+ --ws-menu-line: var(--ws-edge-card);
1383
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1384
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1385
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1386
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1387
+ --ws-card-tint-done: var(--ws-tint-live);
1388
+ --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1389
+ --ws-edge-chip: var(--ws-edge-card);
1390
+ --ws-edge-slot: var(--ws-edge-card);
1391
+ --ws-edge-tray: var(--ws-edge-card);
1392
+ --color-text-placeholder: #6E6E6E;
1393
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000);
1394
+ --ws-field-ink: var(--color-brand-navy);
1395
+ --ws-field-mark: var(--ws-field-ink);
1396
+ --ws-chart-empty: var(--ws-track);
1397
+ --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
1398
+ --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
1399
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
1400
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0);
1401
+ --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd);
1402
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3);
1403
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading));
1404
+ }
1405
+ }
1406
+ }
1407
+ [data-palette][data-theme="dark"][data-ground="navy"] {
1408
+ --color-bg-page: #021A32;
1409
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1410
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1411
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1412
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1413
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1414
+ --color-text-heading: #FFFFFF;
1415
+ --color-text-body: #D3D3D3;
1416
+ --color-text-muted: #A9A9A9;
1417
+ --ws-word-alert: #FF8282;
1418
+ }
1419
+ @scope ([data-theme="dark"][data-ground="navy"]) to ([data-theme]) {
1420
+ [data-palette][data-palette] {
1421
+ --color-bg-page: #021A32;
1422
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1423
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1424
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1425
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1426
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1427
+ --color-text-heading: #FFFFFF;
1428
+ --color-text-body: #D3D3D3;
1429
+ --color-text-muted: #A9A9A9;
1430
+ --ws-word-alert: #FF8282;
1431
+ }
1432
+ }
1433
+ @media (prefers-color-scheme: dark) {
1434
+ [data-palette][data-theme="system"][data-ground="navy"] {
1435
+ --color-bg-page: #021A32;
1436
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1437
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1438
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1439
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1440
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1441
+ --color-text-heading: #FFFFFF;
1442
+ --color-text-body: #D3D3D3;
1443
+ --color-text-muted: #A9A9A9;
1444
+ --ws-word-alert: #FF8282;
1445
+ }
1446
+ @scope ([data-theme="system"][data-ground="navy"]) to ([data-theme]) {
1447
+ [data-palette][data-palette] {
1448
+ --color-bg-page: #021A32;
1449
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1450
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1451
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1452
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1453
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1454
+ --color-text-heading: #FFFFFF;
1455
+ --color-text-body: #D3D3D3;
1456
+ --color-text-muted: #A9A9A9;
1457
+ --ws-word-alert: #FF8282;
1458
+ }
1459
+ }
235
1460
  }