@felloinnovations/brand-kit 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (363) hide show
  1. package/AGENTS.md +198 -24
  2. package/CHANGELOG.md +197 -0
  3. package/README.md +34 -7
  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 +134 -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 +357 -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 +52 -16
  249. package/design-system/components/Skeleton/preview.html +35 -23
  250. package/design-system/components/Skeleton/style.css +22 -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 +4091 -744
  335. package/design-system/tokens.json +1314 -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 +110 -11
  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 +174 -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 +1292 -62
  361. package/tokens/tokens.md +588 -61
  362. package/tokens/tokens.root.css +1298 -62
  363. package/tokens/tokens.ts +1677 -64
package/tokens/tokens.root.css CHANGED
@@ -1,7 +1,7 @@
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: 99 night, 42 navy ground. */
5
5
 
6
6
  :root {
7
7
  --color-brand-salmon: #FF725C;
@@ -14,7 +14,7 @@
14
14
  --color-background: #FEFBF9;
15
15
  --color-white: #FFFFFF;
16
16
  --color-gray-1: #F9F9F9;
17
- --color-surface-stripe: #F7F4F4;
17
+ --color-surface-stripe: var(--ws-tint-accent);
18
18
  --color-gray-2: #EDEDED;
19
19
  --color-gray-stroke: #E8E8E8;
20
20
  --color-gray-3: #D3D3D3;
@@ -22,7 +22,7 @@
22
22
  --color-gray-6: #7F7F7F;
23
23
  --color-gray-7: #545454;
24
24
  --color-gray-8: #292929;
25
- --color-text-primary: #353E5A;
25
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 50%, #61475f);
26
26
  --color-ai-cyan: #14BACB;
27
27
  --color-ai-blue: #3898F0;
28
28
  --color-ai-violet: #8D6AE6;
@@ -31,25 +31,20 @@
31
31
  --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% );
32
32
  --color-dropdown-bg: #fcfaf9;
33
33
  --gradient-scrim-dropdown: linear-gradient( 180deg, rgba(237, 237, 237, 0) -2.85%, rgba(45, 45, 45, 0.5) 93.85% );
34
- --color-feedback-error: #ef6b51;
34
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04);
35
35
  --color-feedback-success-text: #4f7d24;
36
- --color-feedback-success-bg: #cde3cc;
36
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5));
37
37
  --color-alert: #e90f0f;
38
- --color-stat-positive: #098486;
39
- --color-bg-page: var(--color-background);
40
- --color-text-heading: var(--color-brand-navy);
41
- --color-text-body: var(--color-gray-7);
42
- --color-text-muted: #6E6E6E;
43
- --color-text-brand-strong: #B35040;
44
- --color-text-error-strong: #AE4E3B;
45
- --color-text-success-strong: #3C601B;
46
- --color-text-placeholder: #6E6E6E;
47
- --color-text-interactive: var(--color-brand-mid-blue);
48
- --color-border-default: var(--color-gray-stroke);
49
- --color-border-hairline: var(--color-gray-3);
38
+ --color-stat-positive: var(--ws-chart-finished);
39
+ --color-text-brand-strong: var(--ws-word-needs);
40
+ --color-text-error-strong: color-mix(in srgb, var(--ws-word-needs) 95%, #944b00);
41
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19));
42
+ --color-text-placeholder: color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6);
43
+ --color-border-default: var(--ws-edge);
44
+ --color-border-hairline: var(--ws-edge-card);
50
45
  --color-border-btn: var(--color-button-border);
51
46
  --color-bg-dark: var(--color-brand-navy);
52
- --color-nav-hover-bg: color-mix(in srgb, var(--color-brand-mid-blue) 5%, transparent);
47
+ --color-nav-hover-bg: color-mix(in srgb, var(--color-text-interactive) 5%, transparent);
53
48
  --gradient-btn-primary: linear-gradient( 180deg, var(--color-button-grad-start), var(--color-button-grad-end) );
54
49
  --font-body: "Instrument Sans", sans-serif;
55
50
  --font-size-3xs: 10px;
@@ -67,9 +62,13 @@
67
62
  --font-size-6xl: 64px;
68
63
  --font-size-7xl: 72px;
69
64
  --font-size-8xl: 193px;
65
+ --space-3xs: 2px;
70
66
  --space-xxs: 4px;
67
+ --space-xxs-plus: 6px;
71
68
  --space-xs: 8px;
69
+ --space-xs-plus: 10px;
72
70
  --space-sm: 12px;
71
+ --space-sm-plus: 14px;
73
72
  --space-md: 16px;
74
73
  --space-lg: 24px;
75
74
  --space-xl: 32px;
@@ -100,42 +99,67 @@
100
99
  --z-modal: 300;
101
100
  --z-toast: 400;
102
101
  --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);
103
- --shadow-card-default: 0 1px 2px rgba(9, 53, 85, 0.04), 0 4px 8px rgba(9, 53, 85, 0.06);
104
- --shadow-card-hover: 0 4px 8px rgba(9, 53, 85, 0.06), 0 8px 24px rgba(9, 53, 85, 0.08);
102
+ --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);
103
+ --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);
105
104
  --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);
106
105
  --shadow-dropdown: var(--shadow-pill);
107
106
  --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);
108
107
  --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);
109
- --shadow-focus-ring: 0 0 0 3px rgba(255, 114, 92, 0.2);
108
+ --shadow-focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-text-heading);
110
109
  --transition-fast: 150ms ease-out;
111
110
  --transition-default: 200ms ease;
112
111
  --transition-slow: 300ms ease;
113
- --ws-page: var(--color-gray-stroke);
112
+ --ws-page: color-mix(in srgb, var(--ws-tray) 97.5%, #252525);
114
113
  --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
115
114
  --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8));
116
- --ws-sidebar-hover: color-mix(in srgb, var(--color-gray-2) 85%, var(--color-white));
117
- --ws-sidebar-press: var(--color-gray-2);
115
+ --ws-sidebar-hover: color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface));
116
+ --ws-sidebar-press: var(--ws-tray);
118
117
  --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8));
119
118
  --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8));
120
- --ws-well: var(--color-gray-2);
121
- --ws-field: var(--color-white);
122
- --ws-tint-accent: var(--color-surface-stripe);
123
- --ws-tint-needs: color-mix(in srgb, var(--color-brand-salmon) 10%, var(--color-white));
124
- --ws-tint-live: color-mix(in srgb, var(--color-stat-positive) 12%, var(--color-white));
125
- --ws-edge: var(--color-border-default);
126
- --ws-edge-card: var(--color-gray-3);
127
- --ws-edge-chip: #d9d5d0;
128
- --ws-edge-slot: #e2e2e2;
129
- --ws-edge-tray: #d9d3cb;
119
+ --ws-well: var(--ws-tray);
120
+ --ws-field: var(--color-surface);
121
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
122
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
123
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
124
+ --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
125
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
126
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
127
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5));
130
128
  --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
131
- --ws-word-needs: var(--color-text-brand-strong);
132
- --ws-word-positive: color-mix(in srgb, var(--color-stat-positive) 85%, var(--color-brand-navy));
133
- --ws-chart-finished: var(--color-stat-positive);
134
- --ws-chart-past-half: #6d4fc2;
135
- --ws-chart-under-half: var(--color-brand-salmon);
136
- --ws-chart-empty: var(--color-gray-1);
129
+ --ws-track: var(--ws-tray);
130
+ --ws-field-ink: color-mix(in srgb, var(--color-text-body) 46.25%, #040404);
131
+ --ws-field-mark: var(--color-text-heading);
132
+ --ws-ink: var(--color-text-heading);
133
+ --ws-shade: var(--color-text-heading);
134
+ --ws-ink-rgb: 9, 53, 85;
135
+ --ws-shade-rgb: 9, 53, 85;
136
+ --ws-inverse: var(--color-text-heading);
137
+ --ws-on-inverse: var(--ws-on-act);
138
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
139
+ --ws-raised-sunk: var(--ws-surface-sunk);
140
+ --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
141
+ --ws-mask: #000;
142
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
143
+ --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
144
+ --ws-ghost: color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17);
145
+ --ws-veil: color-mix(in srgb, var(--ws-page) 30%, transparent);
146
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 71.25%, #040404);
147
+ --ws-rim: var(--ws-line);
148
+ --ws-divider: var(--ws-hairline) solid var(--ws-edge);
149
+ --ws-divider-inset: inset 0 var(--ws-hairline) 0 var(--ws-edge);
150
+ --ws-frame: linear-gradient(180deg, var(--ws-frame-top) 0, var(--color-bg-page) 640px) var(--color-bg-page);
151
+ --ws-stage-wash: linear-gradient(180deg, var(--color-bg-page), var(--ws-stage-foot));
152
+ --ws-glass: color-mix(in srgb, var(--color-surface) 59%, transparent);
153
+ --ws-glass-blur: 4px;
154
+ --ws-glass-blur-chat: 28px;
155
+ --ws-edge-stage: var(--ws-page);
156
+ --ws-stage-inset-top: 13px;
157
+ --ws-stage-inset: var(--space-sm);
158
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
159
+ --ws-word-past-half: var(--ws-chart-past-half);
160
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
161
+ --ws-chart-empty: #f9f9f9;
137
162
  --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8));
138
- --ws-chart-navy-light: #2e6088;
139
163
  --ws-chart-navy-fade: #a8c0d3;
140
164
  --ws-chart-salmon-fade: #ffd2c8;
141
165
  --ws-chart-purple-fade: #d8ccf6;
@@ -144,11 +168,17 @@
144
168
  --ws-chart-past-half-tint: #cbbdf3;
145
169
  --ws-chart-under-half-tint: #f9dfc6;
146
170
  --ws-chart-cell-edge: var(--ws-edge-slot);
147
- --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 10%, var(--color-white));
148
- --ws-card-tint-done: color-mix(in srgb, var(--color-stat-positive) 10%, var(--color-white));
149
- --ws-scrim: color-mix(in srgb, var(--color-brand-navy) 35%, transparent);
150
- --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);
151
- --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);
171
+ --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
172
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
173
+ --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
174
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
175
+ --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
176
+ --ws-glow-rose: color-mix(in srgb, var(--ws-chart-under-half) 50%, #ebb8ca);
177
+ --ws-glow-pink: color-mix(in srgb, var(--ws-chart-needs-work) 90%, #ad167c);
178
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556));
179
+ --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);
180
+ --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);
181
+ --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%);
152
182
  --ws-text-micro: 11px;
153
183
  --ws-text-dense: var(--font-size-2xs);
154
184
  --ws-text-meta: var(--font-size-xs);
@@ -160,33 +190,65 @@
160
190
  --ws-text-display: var(--font-size-7xl);
161
191
  --ws-leading-message: var(--space-lg);
162
192
  --ws-leading-title: calc(var(--space-lg) + var(--space-xxs));
193
+ --ws-text-control: var(--font-size-xs);
194
+ --ws-leading-control: 18px;
195
+ --ws-text-section: var(--ws-text-chart);
196
+ --ws-leading-section: 22px;
197
+ --ws-leading-row: calc(var(--space-md) + var(--space-xxs));
198
+ --ws-leading-micro: 13px;
199
+ --ws-text-figure-row: 28px;
200
+ --ws-leading-figure-row: var(--space-xl);
201
+ --ws-text-figure: var(--space-xl);
202
+ --ws-leading-figure: 38px;
203
+ --ws-text-figure-lg: 44px;
204
+ --ws-leading-figure-lg: var(--space-3xl);
205
+ --ws-text-score: var(--space-6xl);
206
+ --ws-leading-score: var(--space-6xl);
163
207
  --ws-gap-tight: var(--space-xxs);
164
208
  --ws-gap: var(--space-xs);
165
209
  --ws-gap-loose: var(--space-sm);
166
210
  --ws-gap-component: var(--space-md);
167
211
  --ws-gap-group: var(--space-lg);
168
- --ws-gap-turn: calc(var(--space-lg) - var(--space-xxs) / 2);
169
- --ws-gutter: var(--space-lg);
212
+ --ws-gap-turn: calc(var(--space-lg) + var(--space-xxs));
213
+ --ws-gap-block: var(--space-xl);
214
+ --ws-gap-section: calc(var(--space-3xl) + var(--space-xs));
215
+ --ws-gutter: var(--space-xl);
170
216
  --ws-card-padding: var(--space-sm);
171
217
  --ws-card-padding-lg: var(--space-md);
172
218
  --ws-card-inset: calc(var(--space-md) + var(--space-xxs));
173
219
  --ws-band-inset: calc(var(--space-lg) + var(--space-xxs));
174
220
  --ws-rise: calc(var(--space-xxs) * 1.5);
175
221
  --ws-chart-dot-gap: calc(var(--space-xs) * 0.8125);
176
- --ws-radius-bar: calc(var(--radius-xs) / 2);
177
- --ws-radius-chip: var(--radius-xs);
178
- --ws-radius-control: var(--radius-sm);
179
- --ws-radius-row: var(--radius-md);
180
- --ws-radius-card: var(--radius-lg);
181
- --ws-radius-bubble: calc(var(--radius-lg) + var(--radius-sm));
182
- --ws-radius-panel: var(--radius-xl);
222
+ --ws-radius-bar: 1px;
223
+ --ws-radius-chip: 2px;
224
+ --ws-radius-control: 4px;
225
+ --ws-radius-row: 6px;
226
+ --ws-radius-card: 8px;
227
+ --ws-radius-menu: 10px;
228
+ --ws-radius-card-inner: calc(var(--ws-radius-card) - var(--ws-rim));
229
+ --ws-radius-bubble: 12px;
230
+ --ws-radius-drawer: var(--ws-radius-bubble);
231
+ --ws-radius-drawer-inner: calc(var(--ws-radius-drawer) - var(--ws-rim));
232
+ --ws-radius-panel: 16px;
183
233
  --ws-shadow-hairline: 0 0 0 var(--ws-hairline) var(--ws-edge-card);
234
+ --ws-shadow-hairline-in: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card);
184
235
  --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);
185
236
  --ws-shadow-lift: var(--shadow-card-hover);
186
- --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 55%, transparent);
187
- --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 30%, transparent);
188
- --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-navy) 12%, transparent);
189
- --ws-focus-inset: inset 0 0 0 2px var(--color-text-interactive);
237
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent);
238
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent);
239
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent);
240
+ --ws-float-rim: 0 0 0 0 transparent;
241
+ --ws-shadow-pop: var(--ws-float-rim), 0 12px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
242
+ --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
243
+ --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
244
+ --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);
245
+ --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);
246
+ --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
247
+ --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
248
+ --ws-hover-strong: color-mix(in srgb, var(--ws-ink) 5.8823529412%, transparent);
249
+ --ws-focus-width: var(--ws-ring);
250
+ --ws-focus-offset: var(--ws-ring);
251
+ --ws-focus-inset: inset 0 0 0 var(--ws-focus-width) var(--ws-focus-color);
190
252
  --ws-hairline: 0.5px;
191
253
  --ws-line: 1px;
192
254
  --ws-chart-line: 1.5px;
@@ -196,18 +258,20 @@
196
258
  --ws-control-h: var(--space-xl);
197
259
  --ws-control-h-md: calc(var(--space-xl) + var(--space-xxs));
198
260
  --ws-touch: 40px;
261
+ --ws-touch-public: 44px;
199
262
  --ws-row-h: var(--space-3xl);
200
263
  --ws-row-h-dense: var(--space-2xl);
201
264
  --ws-composer-h: 52px;
202
265
  --ws-header-h: calc(var(--space-3xl) + var(--space-xs));
203
266
  --ws-topbar-h: var(--space-3xl);
204
267
  --ws-band-h: 80px;
205
- --ws-rail-width: calc(var(--space-2xl) + var(--space-xl));
268
+ --ws-rail-width: var(--space-4xl);
206
269
  --ws-sidebar-width: calc(var(--space-9xl) + var(--space-xl));
207
270
  --ws-thing-width: calc(var(--space-9xl) * 2 + var(--space-2xl));
208
271
  --ws-chart-card-w: calc(var(--space-9xl) * 2 + var(--space-8xl) - var(--space-xxs));
209
272
  --ws-chart-card-min: 480px;
210
273
  --ws-column-width: calc(var(--space-9xl) * 3 + var(--space-3xl) + var(--space-xs));
274
+ --ws-float-width: calc(var(--space-9xl) * 1.5);
211
275
  --ws-icon-sm: 12px;
212
276
  --ws-icon: 16px;
213
277
  --ws-icon-lg: 20px;
@@ -215,18 +279,1190 @@
215
279
  --ws-tracking-title: -0.005em;
216
280
  --ws-tracking-display: -0.03em;
217
281
  --ws-duration-instant: 120ms;
282
+ --ws-duration-exit: 120ms;
218
283
  --ws-duration-gentle: 200ms;
284
+ --ws-duration-hover: 200ms;
285
+ --ws-duration-text: 250ms;
219
286
  --ws-duration-settle: 320ms;
287
+ --ws-duration-reveal: 350ms;
288
+ --ws-duration-shrink: 400ms;
220
289
  --ws-duration-calm: 420ms;
221
290
  --ws-duration-glide: 400ms;
291
+ --ws-duration-morph: 450ms;
292
+ --ws-duration-grow: 550ms;
293
+ --ws-duration-shift: 550ms;
294
+ --ws-duration-fill: 700ms;
295
+ --ws-duration-draw: 900ms;
296
+ --ws-duration-draw-chat: 1500ms;
297
+ --ws-duration-fill-page: 1700ms;
298
+ --ws-duration-build: 2400ms;
222
299
  --ws-stagger: 30ms;
300
+ --ws-stagger-detail: 22ms;
301
+ --ws-stagger-row: 45ms;
302
+ --ws-stagger-part: 70ms;
303
+ --ws-ripple: 4ms;
304
+ --ws-stagger-square: 35ms;
305
+ --ws-hover-intent: 40ms;
306
+ --ws-hover-leave: 60ms;
307
+ --ws-hover-grace: 180ms;
308
+ --ws-close-delay: 160ms;
223
309
  --ws-sweep: calc(var(--ws-duration-calm) - var(--ws-duration-gentle));
224
- --ws-loop: 1.2s;
310
+ --ws-loop: 1s;
311
+ --ws-loop-status: 1.6s;
312
+ --ws-loop-shimmer: 1.8s;
225
313
  --ws-loop-slow: 2.4s;
314
+ --ws-loop-ambient: 6s;
226
315
  --ws-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
227
316
  --ws-ease-exit: cubic-bezier(0.4, 0, 1, 1);
228
317
  --ws-ease-glide: cubic-bezier(0.75, 0, 0.25, 1);
229
318
  --ws-ease-steady: linear;
230
319
  --ws-ease-spring: var(--ws-ease-soft);
320
+ --ws-ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
321
+ --ws-ease-grow: cubic-bezier(0.32, 0.72, 0, 1);
322
+ --ws-ease-shift: cubic-bezier(0.25, 1, 0.5, 1);
323
+ --ws-ease-morph: cubic-bezier(0.5, 0, 0.15, 1);
324
+ --ws-ease-sweep: cubic-bezier(0.45, 0, 0.55, 1);
325
+ --ws-ease-commit: cubic-bezier(0.65, 0, 0.35, 1);
326
+ --ws-ease-shimmer: cubic-bezier(0.4, 0, 0.2, 1);
327
+ --ws-ease-ambient: cubic-bezier(0.45, 0, 0.3, 1);
328
+ --ws-ease-loop: cubic-bezier(0.42, 0, 0.58, 1);
329
+ --ws-ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
330
+ --ws-ease-lift: cubic-bezier(0.22, 1.25, 0.36, 1);
231
331
  --ws-press-scale: 0.97;
332
+ --ws-press-scale-round: 0.94;
333
+ --ws-press-scale-send: 0.92;
334
+ --ws-open-scale: 0.97;
335
+ --ws-open-scale-pane: 0.98;
336
+ --ws-open-scale-toast: 0.96;
337
+ --ws-pop-scale: 0.94;
338
+ --ws-grow-scale: 1.16;
339
+ --ws-dim: 0.3;
340
+ --ws-nudge: var(--space-xxs);
341
+ --ws-drop: var(--space-sm);
342
+ --ws-blur-arrive: 3px;
343
+ --ws-blur-panel: 8px;
344
+ --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);
345
+ --ws-spring-press-duration: 450ms;
346
+ --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);
347
+ --ws-spring-follow-duration: 450ms;
348
+ --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);
349
+ --ws-spring-pop-duration: 500ms;
350
+ --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);
351
+ --ws-spring-settle-duration: 450ms;
352
+ --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);
353
+ --ws-spring-fold-duration: 600ms;
354
+ --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);
355
+ --ws-spring-indicator-duration: 700ms;
356
+ --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);
357
+ --ws-spring-highlight-duration: 800ms;
358
+ --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);
359
+ --ws-spring-nav-duration: 550ms;
360
+ --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);
361
+ --ws-spring-reorder-duration: 750ms;
362
+ --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);
363
+ --ws-spring-tile-duration: 450ms;
364
+ --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);
365
+ --ws-spring-lane-duration: 750ms;
366
+ --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);
367
+ --ws-spring-lens-duration: 750ms;
368
+ --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);
369
+ --ws-spring-swap-duration: 900ms;
370
+ --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);
371
+ --ws-spring-panel-duration: 550ms;
372
+ --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);
373
+ --ws-spring-card-duration: 700ms;
374
+ --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);
375
+ --ws-spring-text-duration: 1200ms;
376
+ --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);
377
+ --ws-spring-badge-duration: 650ms;
378
+ --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);
379
+ --ws-spring-tab-duration: 500ms;
380
+ --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);
381
+ --ws-spring-chip-duration: 350ms;
382
+ --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);
383
+ --ws-spring-glow-duration: 600ms;
384
+ --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);
385
+ --ws-spring-roll-duration: 700ms;
386
+ --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);
387
+ --ws-spring-flag-duration: 450ms;
388
+ --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);
389
+ --ws-spring-mark-duration: 550ms;
390
+ --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);
391
+ --ws-spring-morph-chart-duration: 1250ms;
392
+ --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);
393
+ --ws-spring-orb-duration: 850ms;
394
+ --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);
395
+ --ws-spring-default-duration: 750ms;
396
+ }
397
+ :where(:root) {
398
+ --color-surface: var(--color-white);
399
+ --color-bg-page: #FEFBF9;
400
+ --color-text-heading: var(--color-brand-navy);
401
+ --color-text-body: var(--color-gray-7);
402
+ --color-text-muted: #666666;
403
+ --color-text-interactive: var(--color-brand-mid-blue);
404
+ --ws-edge: var(--color-gray-stroke);
405
+ --ws-edge-card: var(--color-gray-3);
406
+ --ws-raised: var(--color-bg-page);
407
+ --ws-on-act: var(--color-white);
408
+ --ws-edge-hover: #aaa49d;
409
+ --ws-act-hover: #0f4a73;
410
+ --ws-agent-tally: #2c4870;
411
+ --ws-agent-coach: var(--color-stat-positive);
412
+ --ws-agent-growth: var(--ws-chart-past-half);
413
+ --ws-agent-recruit: var(--ws-chart-under-half);
414
+ --ws-tray: var(--color-gray-2);
415
+ --ws-well-hover: #e4e2df;
416
+ --ws-frame-top: #ebf0f5;
417
+ --ws-stage-foot: #fef9f6;
418
+ --ws-word-needs: #A84B3C;
419
+ --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
420
+ --ws-word-alert: var(--ws-chart-alert);
421
+ --ws-chart-finished: #098486;
422
+ --ws-chart-past-half: #6d4fc2;
423
+ --ws-chart-under-half: var(--color-brand-salmon);
424
+ --ws-chart-navy-light: #2e6088;
425
+ --ws-chart-needs-work: #f370a4;
426
+ --ws-chart-alert: #b1042f;
427
+ --ws-rating-strong: var(--color-stat-positive);
428
+ --ws-rating-middle: var(--color-brand-mid-blue);
429
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
430
+ --ws-focus-color: var(--color-text-heading);
431
+ }
432
+
433
+ /* Derived tokens again on every carrier, so a palette or theme set on any element reaches what derives from it. */
434
+ [data-palette], [data-theme], .fello {
435
+ --color-surface-stripe: var(--ws-tint-accent);
436
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 50%, #61475f);
437
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04);
438
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5));
439
+ --color-stat-positive: var(--ws-chart-finished);
440
+ --color-text-brand-strong: var(--ws-word-needs);
441
+ --color-text-error-strong: color-mix(in srgb, var(--ws-word-needs) 95%, #944b00);
442
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19));
443
+ --color-text-placeholder: color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6);
444
+ --color-border-default: var(--ws-edge);
445
+ --color-border-hairline: var(--ws-edge-card);
446
+ --color-nav-hover-bg: color-mix(in srgb, var(--color-text-interactive) 5%, transparent);
447
+ --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);
448
+ --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);
449
+ --shadow-dropdown: var(--shadow-pill);
450
+ --shadow-focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-text-heading);
451
+ --ws-page: color-mix(in srgb, var(--ws-tray) 97.5%, #252525);
452
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
453
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8));
454
+ --ws-sidebar-hover: color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface));
455
+ --ws-sidebar-press: var(--ws-tray);
456
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8));
457
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8));
458
+ --ws-well: var(--ws-tray);
459
+ --ws-field: var(--color-surface);
460
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
461
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
462
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
463
+ --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
464
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
465
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
466
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5));
467
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
468
+ --ws-track: var(--ws-tray);
469
+ --ws-field-ink: color-mix(in srgb, var(--color-text-body) 46.25%, #040404);
470
+ --ws-field-mark: var(--color-text-heading);
471
+ --ws-ink: var(--color-text-heading);
472
+ --ws-shade: var(--color-text-heading);
473
+ --ws-inverse: var(--color-text-heading);
474
+ --ws-on-inverse: var(--ws-on-act);
475
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
476
+ --ws-raised-sunk: var(--ws-surface-sunk);
477
+ --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
478
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
479
+ --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
480
+ --ws-ghost: color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17);
481
+ --ws-veil: color-mix(in srgb, var(--ws-page) 30%, transparent);
482
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 71.25%, #040404);
483
+ --ws-divider: var(--ws-hairline) solid var(--ws-edge);
484
+ --ws-divider-inset: inset 0 var(--ws-hairline) 0 var(--ws-edge);
485
+ --ws-frame: linear-gradient(180deg, var(--ws-frame-top) 0, var(--color-bg-page) 640px) var(--color-bg-page);
486
+ --ws-stage-wash: linear-gradient(180deg, var(--color-bg-page), var(--ws-stage-foot));
487
+ --ws-glass: color-mix(in srgb, var(--color-surface) 59%, transparent);
488
+ --ws-edge-stage: var(--ws-page);
489
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
490
+ --ws-word-past-half: var(--ws-chart-past-half);
491
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
492
+ --ws-chart-empty: color-mix(in srgb, var(--color-surface) 97.6%, #050505);
493
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8));
494
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(198.5 216 229.75));
495
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 25%, #fff2ec);
496
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 10%, rgb(227.8888888889 217.8888888889 251.7777777778));
497
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(217.75 249.5 242.75));
498
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(196.5 243.25 234));
499
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235));
500
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5));
501
+ --ws-chart-cell-edge: var(--ws-edge-slot);
502
+ --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
503
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
504
+ --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
505
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
506
+ --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
507
+ --ws-glow-rose: color-mix(in srgb, var(--ws-chart-under-half) 50%, #ebb8ca);
508
+ --ws-glow-pink: color-mix(in srgb, var(--ws-chart-needs-work) 90%, #ad167c);
509
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556));
510
+ --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);
511
+ --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);
512
+ --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%);
513
+ --ws-shadow-hairline: 0 0 0 var(--ws-hairline) var(--ws-edge-card);
514
+ --ws-shadow-hairline-in: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card);
515
+ --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);
516
+ --ws-shadow-lift: var(--shadow-card-hover);
517
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent);
518
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent);
519
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent);
520
+ --ws-shadow-pop: var(--ws-float-rim), 0 12px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
521
+ --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
522
+ --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
523
+ --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);
524
+ --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);
525
+ --ws-hover-faint: color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent);
526
+ --ws-hover: color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent);
527
+ --ws-hover-strong: color-mix(in srgb, var(--ws-ink) 5.8823529412%, transparent);
528
+ --ws-focus-inset: inset 0 0 0 var(--ws-focus-width) var(--ws-focus-color);
529
+ }
530
+ /* Every palette element starts from the kit's contract values (light here, each theme's below), at no specificity. */
531
+ :where([data-palette]) {
532
+ --color-bg-page: #FEFBF9;
533
+ --ws-frame-top: #ebf0f5;
534
+ --ws-stage-foot: #fef9f6;
535
+ --color-surface: var(--color-white);
536
+ --ws-raised: var(--color-bg-page);
537
+ --ws-tray: var(--color-gray-2);
538
+ --ws-edge-card: var(--color-gray-3);
539
+ --ws-edge: var(--color-gray-stroke);
540
+ --ws-edge-hover: #aaa49d;
541
+ --ws-well-hover: #e4e2df;
542
+ --color-text-heading: var(--color-brand-navy);
543
+ --color-text-body: var(--color-gray-7);
544
+ --color-text-muted: #666666;
545
+ --color-text-interactive: var(--color-brand-mid-blue);
546
+ --ws-on-act: var(--color-white);
547
+ --ws-act-hover: #0f4a73;
548
+ --ws-word-needs: #A84B3C;
549
+ --ws-focus-color: var(--color-text-heading);
550
+ --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
551
+ --ws-word-alert: var(--ws-chart-alert);
552
+ --ws-chart-finished: #098486;
553
+ --ws-chart-past-half: #6d4fc2;
554
+ --ws-chart-under-half: var(--color-brand-salmon);
555
+ --ws-chart-navy-light: #2e6088;
556
+ --ws-chart-needs-work: #f370a4;
557
+ --ws-chart-alert: #b1042f;
558
+ --ws-rating-strong: var(--color-stat-positive);
559
+ --ws-rating-middle: var(--color-brand-mid-blue);
560
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
561
+ --ws-agent-coach: var(--color-stat-positive);
562
+ --ws-agent-growth: var(--ws-chart-past-half);
563
+ --ws-agent-recruit: var(--ws-chart-under-half);
564
+ --ws-agent-tally: #2c4870;
565
+ }
566
+ /* Light: data-theme="light" (and "system" on a light OS) inside a dark element. */
567
+ [data-theme="light"], [data-theme="system"] {
568
+ color-scheme: light;
569
+ --color-bg-page: #FEFBF9;
570
+ --color-surface: var(--color-white);
571
+ --ws-raised: var(--color-bg-page);
572
+ --ws-edge: var(--color-gray-stroke);
573
+ --ws-edge-card: var(--color-gray-3);
574
+ --color-text-heading: var(--color-brand-navy);
575
+ --color-text-body: var(--color-gray-7);
576
+ --color-text-muted: #666666;
577
+ --color-text-interactive: var(--color-brand-mid-blue);
578
+ --ws-word-needs: #A84B3C;
579
+ --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
580
+ --ws-on-act: var(--color-white);
581
+ --ws-chart-finished: #098486;
582
+ --ws-chart-past-half: #6d4fc2;
583
+ --ws-chart-navy-light: #2e6088;
584
+ --color-alert: #e90f0f;
585
+ --ws-ink-rgb: 9, 53, 85;
586
+ --ws-shade-rgb: 9, 53, 85;
587
+ --ws-tray: var(--color-gray-2);
588
+ --ws-well-hover: #e4e2df;
589
+ --ws-frame-top: #ebf0f5;
590
+ --ws-stage-foot: #fef9f6;
591
+ --ws-chart-alert: #b1042f;
592
+ --ws-rating-middle: var(--color-brand-mid-blue);
593
+ --ws-edge-hover: #aaa49d;
594
+ --ws-act-hover: #0f4a73;
595
+ --ws-agent-tally: #2c4870;
596
+ --ws-word-alert: var(--ws-chart-alert);
597
+ --ws-focus-color: var(--color-text-heading);
598
+ --ws-chart-under-half: var(--color-brand-salmon);
599
+ --ws-rating-strong: var(--color-stat-positive);
600
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
601
+ --ws-agent-coach: var(--color-stat-positive);
602
+ --ws-agent-growth: var(--ws-chart-past-half);
603
+ --ws-agent-recruit: var(--ws-chart-under-half);
604
+ }
605
+ @scope ([data-theme="light"], [data-theme="system"]) {
606
+ :scope, [data-palette], .fello {
607
+ --ws-page: color-mix(in srgb, var(--ws-tray) 97.5%, #252525);
608
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
609
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8));
610
+ --ws-well: var(--ws-tray);
611
+ --ws-field: var(--color-surface);
612
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
613
+ --ws-sidebar-hover: color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface));
614
+ --ws-sidebar-press: var(--ws-tray);
615
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8));
616
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8));
617
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c);
618
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
619
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
620
+ --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
621
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
622
+ --ws-track: var(--ws-tray);
623
+ --color-dropdown-bg: #fcfaf9;
624
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5));
625
+ --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
626
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7);
627
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb);
628
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5));
629
+ --color-text-placeholder: color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6);
630
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 50%, #61475f);
631
+ --color-text-error-strong: color-mix(in srgb, var(--ws-word-needs) 95%, #944b00);
632
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19));
633
+ --color-feedback-success-text: #4f7d24;
634
+ --ws-field-ink: color-mix(in srgb, var(--color-text-body) 46.25%, #040404);
635
+ --color-stat-positive: var(--ws-chart-finished);
636
+ --ws-chart-empty: color-mix(in srgb, var(--color-surface) 97.6%, #050505);
637
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8));
638
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(198.5 216 229.75));
639
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 25%, #fff2ec);
640
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 10%, rgb(227.8888888889 217.8888888889 251.7777777778));
641
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(217.75 249.5 242.75));
642
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(196.5 243.25 234));
643
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235));
644
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5));
645
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04);
646
+ --ws-shade: var(--color-text-heading);
647
+ --color-nav-hover-bg: color-mix(in srgb, var(--color-text-interactive) 5%, transparent);
648
+ --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);
649
+ --ws-shadow-lift: var(--shadow-card-hover);
650
+ --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);
651
+ --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);
652
+ --shadow-dropdown: var(--shadow-pill);
653
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent);
654
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent);
655
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent);
656
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556));
657
+ --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);
658
+ --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);
659
+ --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%);
660
+ --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent);
661
+ --ws-frame: linear-gradient(180deg, var(--ws-frame-top) 0, var(--color-bg-page) 640px) var(--color-bg-page);
662
+ --ws-stage-wash: linear-gradient(180deg, var(--color-bg-page), var(--ws-stage-foot));
663
+ --ws-glass: color-mix(in srgb, var(--color-surface) 59%, transparent);
664
+ --ws-edge-stage: var(--ws-page);
665
+ --ws-float-rim: 0 0 0 0 transparent;
666
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
667
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
668
+ --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
669
+ --ws-raised-sunk: var(--ws-surface-sunk);
670
+ --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
671
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
672
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
673
+ --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
674
+ --ws-inverse: var(--color-text-heading);
675
+ --ws-on-inverse: var(--ws-on-act);
676
+ --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
677
+ --ws-ghost: color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17);
678
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 71.25%, #040404);
679
+ --ws-field-mark: var(--color-text-heading);
680
+ --ws-word-past-half: var(--ws-chart-past-half);
681
+ }
682
+ }
683
+ @scope ([data-theme="light"], [data-theme="system"]) {
684
+ :where([data-palette]) {
685
+ --color-bg-page: #FEFBF9;
686
+ --ws-frame-top: #ebf0f5;
687
+ --ws-stage-foot: #fef9f6;
688
+ --color-surface: var(--color-white);
689
+ --ws-raised: var(--color-bg-page);
690
+ --ws-tray: var(--color-gray-2);
691
+ --ws-edge-card: var(--color-gray-3);
692
+ --ws-edge: var(--color-gray-stroke);
693
+ --ws-edge-hover: #aaa49d;
694
+ --ws-well-hover: #e4e2df;
695
+ --color-text-heading: var(--color-brand-navy);
696
+ --color-text-body: var(--color-gray-7);
697
+ --color-text-muted: #666666;
698
+ --color-text-interactive: var(--color-brand-mid-blue);
699
+ --ws-on-act: var(--color-white);
700
+ --ws-act-hover: #0f4a73;
701
+ --ws-word-needs: #A84B3C;
702
+ --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
703
+ --ws-word-alert: var(--ws-chart-alert);
704
+ --ws-chart-finished: #098486;
705
+ --ws-chart-past-half: #6d4fc2;
706
+ --ws-chart-navy-light: #2e6088;
707
+ --ws-chart-alert: #b1042f;
708
+ --ws-rating-middle: var(--color-brand-mid-blue);
709
+ --ws-agent-tally: #2c4870;
710
+ }
711
+ }
712
+ /* Night: data-theme="dark", and "system" on a dark OS. */
713
+ [data-theme="dark"] {
714
+ color-scheme: dark;
715
+ --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e);
716
+ --color-bg-page: #0F1922;
717
+ --color-surface: #131E28;
718
+ --ws-raised: #16222D;
719
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2);
720
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe);
721
+ --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21));
722
+ --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16);
723
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509);
724
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea);
725
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe);
726
+ --ws-menu-hover: var(--ws-surface-press);
727
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8);
728
+ --ws-tint-accent: var(--color-surface);
729
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
730
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
731
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
732
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
733
+ --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
734
+ --color-dropdown-bg: var(--ws-raised);
735
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75));
736
+ --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent);
737
+ --ws-edge: #1E2A36;
738
+ --ws-edge-card: #273544;
739
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3);
740
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118);
741
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6);
742
+ --color-text-heading: #E8EDF3;
743
+ --color-text-body: #B0BBC7;
744
+ --color-text-muted: #8494A5;
745
+ --color-text-placeholder: var(--color-text-muted);
746
+ --color-text-interactive: #93A6DC;
747
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body));
748
+ --ws-word-needs: #FF8B78;
749
+ --color-text-error-strong: var(--ws-word-needs);
750
+ --ws-word-positive: #4FC7BE;
751
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f);
752
+ --color-feedback-success-text: var(--color-text-success-strong);
753
+ --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body));
754
+ --ws-on-act: var(--color-bg-page);
755
+ --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee);
756
+ --ws-chart-finished: #23A8A3;
757
+ --ws-chart-past-half: #9A84EE;
758
+ --ws-chart-navy-light: #6E9CC4;
759
+ --ws-chart-empty: var(--ws-track);
760
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6);
761
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
762
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
763
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
764
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
765
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
766
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
767
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
768
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2);
769
+ --color-alert: #FF5A5A;
770
+ --ws-ink-rgb: 232, 237, 243;
771
+ --ws-shade-rgb: 0, 0, 0;
772
+ --ws-shade: #000;
773
+ --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
774
+ --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);
775
+ --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);
776
+ --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
777
+ --shadow-card-hover: var(--ws-shadow-lift);
778
+ --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);
779
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
780
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
781
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
782
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251));
783
+ --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));
784
+ --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));
785
+ --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%);
786
+ --ws-tray: #1E2B38;
787
+ --ws-edge-card-1x: var(--ws-edge-card);
788
+ --ws-well-hover: #273544;
789
+ --ws-frame: var(--ws-frame-top);
790
+ --ws-frame-top: var(--ws-page);
791
+ --ws-stage-foot: var(--color-bg-page);
792
+ --ws-stage-wash: var(--color-bg-page);
793
+ --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent);
794
+ --ws-edge-stage: var(--ws-edge-card);
795
+ --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
796
+ --ws-chart-alert: #FF5470;
797
+ --ws-word-needs-work: var(--ws-chart-needs-work);
798
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
799
+ --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
800
+ --ws-rating-middle: var(--color-text-interactive);
801
+ --ws-raised-sunk: var(--ws-surface-press);
802
+ --ws-edge-hover: var(--color-text-muted);
803
+ --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act));
804
+ --ws-act-light: transparent;
805
+ --ws-agent-tally: var(--color-text-heading);
806
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
807
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
808
+ --ws-shimmer-ground: var(--ws-track);
809
+ --ws-inverse: var(--color-bg-dark);
810
+ --ws-on-inverse: var(--color-white);
811
+ --ws-chart-rest: var(--ws-edge-card);
812
+ --ws-ghost: var(--ws-well-hover);
813
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink));
814
+ --ws-focus-color: var(--color-text-heading);
815
+ --ws-word-alert: var(--ws-chart-alert);
816
+ --ws-chart-under-half: var(--color-brand-salmon);
817
+ --ws-rating-strong: var(--color-stat-positive);
818
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
819
+ --ws-agent-coach: var(--color-stat-positive);
820
+ --ws-agent-growth: var(--ws-chart-past-half);
821
+ --ws-agent-recruit: var(--ws-chart-under-half);
822
+ }
823
+ @scope ([data-theme="dark"]) {
824
+ :scope, [data-palette], .fello {
825
+ --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e);
826
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2);
827
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe);
828
+ --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21));
829
+ --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16);
830
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509);
831
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea);
832
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe);
833
+ --ws-menu-hover: var(--ws-surface-press);
834
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8);
835
+ --ws-tint-accent: var(--color-surface);
836
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
837
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
838
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
839
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
840
+ --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
841
+ --color-dropdown-bg: var(--ws-raised);
842
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75));
843
+ --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent);
844
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3);
845
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118);
846
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6);
847
+ --color-text-placeholder: var(--color-text-muted);
848
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body));
849
+ --color-text-error-strong: var(--ws-word-needs);
850
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f);
851
+ --color-feedback-success-text: var(--color-text-success-strong);
852
+ --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body));
853
+ --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee);
854
+ --ws-chart-empty: var(--ws-track);
855
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6);
856
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
857
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
858
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
859
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
860
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
861
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
862
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
863
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2);
864
+ --ws-shade: #000;
865
+ --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
866
+ --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);
867
+ --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);
868
+ --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
869
+ --shadow-card-hover: var(--ws-shadow-lift);
870
+ --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);
871
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
872
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
873
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
874
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251));
875
+ --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));
876
+ --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));
877
+ --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%);
878
+ --ws-edge-card-1x: var(--ws-edge-card);
879
+ --ws-frame: var(--ws-frame-top);
880
+ --ws-stage-wash: var(--color-bg-page);
881
+ --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent);
882
+ --ws-edge-stage: var(--ws-edge-card);
883
+ --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
884
+ --ws-word-needs-work: var(--ws-chart-needs-work);
885
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
886
+ --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
887
+ --ws-raised-sunk: var(--ws-surface-press);
888
+ --ws-act-light: transparent;
889
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
890
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
891
+ --ws-shimmer-ground: var(--ws-track);
892
+ --ws-inverse: var(--color-bg-dark);
893
+ --ws-on-inverse: var(--color-white);
894
+ --ws-chart-rest: var(--ws-edge-card);
895
+ --ws-ghost: var(--ws-well-hover);
896
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink));
897
+ }
898
+ }
899
+ @scope ([data-theme="dark"]) {
900
+ :where([data-palette]) {
901
+ --color-bg-page: #0F1922;
902
+ --ws-frame-top: var(--ws-page);
903
+ --ws-stage-foot: var(--color-bg-page);
904
+ --color-surface: #131E28;
905
+ --ws-raised: #16222D;
906
+ --ws-tray: #1E2B38;
907
+ --ws-edge-card: #273544;
908
+ --ws-edge: #1E2A36;
909
+ --ws-edge-hover: var(--color-text-muted);
910
+ --ws-well-hover: #273544;
911
+ --color-text-heading: #E8EDF3;
912
+ --color-text-body: #B0BBC7;
913
+ --color-text-muted: #8494A5;
914
+ --color-text-interactive: #93A6DC;
915
+ --ws-on-act: var(--color-bg-page);
916
+ --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act));
917
+ --ws-word-needs: #FF8B78;
918
+ --ws-word-positive: #4FC7BE;
919
+ --ws-chart-finished: #23A8A3;
920
+ --ws-chart-past-half: #9A84EE;
921
+ --ws-chart-navy-light: #6E9CC4;
922
+ --ws-chart-alert: #FF5470;
923
+ --ws-rating-middle: var(--color-text-interactive);
924
+ --ws-agent-tally: var(--color-text-heading);
925
+ }
926
+ }
927
+ @media (prefers-color-scheme: dark) {
928
+ [data-theme="system"] {
929
+ color-scheme: dark;
930
+ --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e);
931
+ --color-bg-page: #0F1922;
932
+ --color-surface: #131E28;
933
+ --ws-raised: #16222D;
934
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2);
935
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe);
936
+ --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21));
937
+ --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16);
938
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509);
939
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea);
940
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe);
941
+ --ws-menu-hover: var(--ws-surface-press);
942
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8);
943
+ --ws-tint-accent: var(--color-surface);
944
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
945
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
946
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
947
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
948
+ --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
949
+ --color-dropdown-bg: var(--ws-raised);
950
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75));
951
+ --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent);
952
+ --ws-edge: #1E2A36;
953
+ --ws-edge-card: #273544;
954
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3);
955
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118);
956
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6);
957
+ --color-text-heading: #E8EDF3;
958
+ --color-text-body: #B0BBC7;
959
+ --color-text-muted: #8494A5;
960
+ --color-text-placeholder: var(--color-text-muted);
961
+ --color-text-interactive: #93A6DC;
962
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body));
963
+ --ws-word-needs: #FF8B78;
964
+ --color-text-error-strong: var(--ws-word-needs);
965
+ --ws-word-positive: #4FC7BE;
966
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f);
967
+ --color-feedback-success-text: var(--color-text-success-strong);
968
+ --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body));
969
+ --ws-on-act: var(--color-bg-page);
970
+ --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee);
971
+ --ws-chart-finished: #23A8A3;
972
+ --ws-chart-past-half: #9A84EE;
973
+ --ws-chart-navy-light: #6E9CC4;
974
+ --ws-chart-empty: var(--ws-track);
975
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6);
976
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
977
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
978
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
979
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
980
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
981
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
982
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
983
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2);
984
+ --color-alert: #FF5A5A;
985
+ --ws-ink-rgb: 232, 237, 243;
986
+ --ws-shade-rgb: 0, 0, 0;
987
+ --ws-shade: #000;
988
+ --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
989
+ --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);
990
+ --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);
991
+ --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
992
+ --shadow-card-hover: var(--ws-shadow-lift);
993
+ --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);
994
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
995
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
996
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
997
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251));
998
+ --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));
999
+ --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));
1000
+ --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%);
1001
+ --ws-tray: #1E2B38;
1002
+ --ws-edge-card-1x: var(--ws-edge-card);
1003
+ --ws-well-hover: #273544;
1004
+ --ws-frame: var(--ws-frame-top);
1005
+ --ws-frame-top: var(--ws-page);
1006
+ --ws-stage-foot: var(--color-bg-page);
1007
+ --ws-stage-wash: var(--color-bg-page);
1008
+ --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent);
1009
+ --ws-edge-stage: var(--ws-edge-card);
1010
+ --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
1011
+ --ws-chart-alert: #FF5470;
1012
+ --ws-word-needs-work: var(--ws-chart-needs-work);
1013
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
1014
+ --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
1015
+ --ws-rating-middle: var(--color-text-interactive);
1016
+ --ws-raised-sunk: var(--ws-surface-press);
1017
+ --ws-edge-hover: var(--color-text-muted);
1018
+ --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act));
1019
+ --ws-act-light: transparent;
1020
+ --ws-agent-tally: var(--color-text-heading);
1021
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
1022
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
1023
+ --ws-shimmer-ground: var(--ws-track);
1024
+ --ws-inverse: var(--color-bg-dark);
1025
+ --ws-on-inverse: var(--color-white);
1026
+ --ws-chart-rest: var(--ws-edge-card);
1027
+ --ws-ghost: var(--ws-well-hover);
1028
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink));
1029
+ --ws-focus-color: var(--color-text-heading);
1030
+ --ws-word-alert: var(--ws-chart-alert);
1031
+ --ws-chart-under-half: var(--color-brand-salmon);
1032
+ --ws-rating-strong: var(--color-stat-positive);
1033
+ --ws-rating-needs-work: var(--ws-chart-needs-work);
1034
+ --ws-agent-coach: var(--color-stat-positive);
1035
+ --ws-agent-growth: var(--ws-chart-past-half);
1036
+ --ws-agent-recruit: var(--ws-chart-under-half);
1037
+ }
1038
+ @scope ([data-theme="system"]) {
1039
+ :scope, [data-palette], .fello {
1040
+ --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e);
1041
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2);
1042
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe);
1043
+ --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21));
1044
+ --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16);
1045
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509);
1046
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea);
1047
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe);
1048
+ --ws-menu-hover: var(--ws-surface-press);
1049
+ --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8);
1050
+ --ws-tint-accent: var(--color-surface);
1051
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page));
1052
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page));
1053
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4);
1054
+ --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page));
1055
+ --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215);
1056
+ --color-dropdown-bg: var(--ws-raised);
1057
+ --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75));
1058
+ --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent);
1059
+ --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3);
1060
+ --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118);
1061
+ --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6);
1062
+ --color-text-placeholder: var(--color-text-muted);
1063
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body));
1064
+ --color-text-error-strong: var(--ws-word-needs);
1065
+ --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f);
1066
+ --color-feedback-success-text: var(--color-text-success-strong);
1067
+ --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body));
1068
+ --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee);
1069
+ --ws-chart-empty: var(--ws-track);
1070
+ --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6);
1071
+ --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
1072
+ --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
1073
+ --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
1074
+ --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
1075
+ --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
1076
+ --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
1077
+ --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
1078
+ --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2);
1079
+ --ws-shade: #000;
1080
+ --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
1081
+ --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);
1082
+ --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);
1083
+ --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
1084
+ --shadow-card-hover: var(--ws-shadow-lift);
1085
+ --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);
1086
+ --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
1087
+ --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
1088
+ --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
1089
+ --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251));
1090
+ --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));
1091
+ --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));
1092
+ --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%);
1093
+ --ws-edge-card-1x: var(--ws-edge-card);
1094
+ --ws-frame: var(--ws-frame-top);
1095
+ --ws-stage-wash: var(--color-bg-page);
1096
+ --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent);
1097
+ --ws-edge-stage: var(--ws-edge-card);
1098
+ --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
1099
+ --ws-word-needs-work: var(--ws-chart-needs-work);
1100
+ --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
1101
+ --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
1102
+ --ws-raised-sunk: var(--ws-surface-press);
1103
+ --ws-act-light: transparent;
1104
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
1105
+ --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
1106
+ --ws-shimmer-ground: var(--ws-track);
1107
+ --ws-inverse: var(--color-bg-dark);
1108
+ --ws-on-inverse: var(--color-white);
1109
+ --ws-chart-rest: var(--ws-edge-card);
1110
+ --ws-ghost: var(--ws-well-hover);
1111
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink));
1112
+ }
1113
+ }
1114
+ @scope ([data-theme="system"]) {
1115
+ :where([data-palette]) {
1116
+ --color-bg-page: #0F1922;
1117
+ --ws-frame-top: var(--ws-page);
1118
+ --ws-stage-foot: var(--color-bg-page);
1119
+ --color-surface: #131E28;
1120
+ --ws-raised: #16222D;
1121
+ --ws-tray: #1E2B38;
1122
+ --ws-edge-card: #273544;
1123
+ --ws-edge: #1E2A36;
1124
+ --ws-edge-hover: var(--color-text-muted);
1125
+ --ws-well-hover: #273544;
1126
+ --color-text-heading: #E8EDF3;
1127
+ --color-text-body: #B0BBC7;
1128
+ --color-text-muted: #8494A5;
1129
+ --color-text-interactive: #93A6DC;
1130
+ --ws-on-act: var(--color-bg-page);
1131
+ --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act));
1132
+ --ws-word-needs: #FF8B78;
1133
+ --ws-word-positive: #4FC7BE;
1134
+ --ws-chart-finished: #23A8A3;
1135
+ --ws-chart-past-half: #9A84EE;
1136
+ --ws-chart-navy-light: #6E9CC4;
1137
+ --ws-chart-alert: #FF5470;
1138
+ --ws-rating-middle: var(--color-text-interactive);
1139
+ --ws-agent-tally: var(--color-text-heading);
1140
+ }
1141
+ }
1142
+ }
1143
+ /* The palettes (tokens/_palettes.css): cool, warm. */
1144
+ /* cool */
1145
+ [data-palette="cool"] {
1146
+ --ws-stage-foot: #fefbf9;
1147
+ --ws-edge: #e2e2e2;
1148
+ --color-text-interactive: var(--color-text-heading);
1149
+ }
1150
+ [data-palette="cool"][data-theme="light"], [data-palette="cool"][data-theme="system"] {
1151
+ --ws-stage-foot: #fefbf9;
1152
+ --ws-edge: #e2e2e2;
1153
+ --color-text-interactive: var(--color-text-heading);
1154
+ }
1155
+ @scope ([data-theme="light"], [data-theme="system"]) {
1156
+ [data-palette="cool"] {
1157
+ --ws-stage-foot: #fefbf9;
1158
+ --ws-edge: #e2e2e2;
1159
+ --color-text-interactive: var(--color-text-heading);
1160
+ }
1161
+ }
1162
+ @scope ([data-palette="cool"]) {
1163
+ [data-theme="light"], [data-theme="system"] {
1164
+ --ws-stage-foot: #fefbf9;
1165
+ --ws-edge: #e2e2e2;
1166
+ --color-text-interactive: var(--color-text-heading);
1167
+ }
1168
+ }
1169
+ [data-palette="cool"][data-theme="dark"] {
1170
+ --ws-stage-foot: var(--color-bg-page);
1171
+ --ws-edge: #1E2A36;
1172
+ --color-text-interactive: var(--color-text-heading);
1173
+ }
1174
+ @scope ([data-theme="dark"]) {
1175
+ [data-palette="cool"] {
1176
+ --ws-stage-foot: var(--color-bg-page);
1177
+ --ws-edge: #1E2A36;
1178
+ --color-text-interactive: var(--color-text-heading);
1179
+ }
1180
+ }
1181
+ @scope ([data-palette="cool"]) {
1182
+ [data-theme="dark"] {
1183
+ --ws-stage-foot: var(--color-bg-page);
1184
+ --ws-edge: #1E2A36;
1185
+ --color-text-interactive: var(--color-text-heading);
1186
+ }
1187
+ }
1188
+ @media (prefers-color-scheme: dark) {
1189
+ [data-palette="cool"][data-theme="system"] {
1190
+ --ws-stage-foot: var(--color-bg-page);
1191
+ --ws-edge: #1E2A36;
1192
+ --color-text-interactive: var(--color-text-heading);
1193
+ }
1194
+ @scope ([data-theme="system"]) {
1195
+ [data-palette="cool"] {
1196
+ --ws-stage-foot: var(--color-bg-page);
1197
+ --ws-edge: #1E2A36;
1198
+ --color-text-interactive: var(--color-text-heading);
1199
+ }
1200
+ }
1201
+ @scope ([data-palette="cool"]) {
1202
+ [data-theme="system"] {
1203
+ --ws-stage-foot: var(--color-bg-page);
1204
+ --ws-edge: #1E2A36;
1205
+ --color-text-interactive: var(--color-text-heading);
1206
+ }
1207
+ }
1208
+ }
1209
+ /* warm */
1210
+ [data-palette="warm"] {
1211
+ --ws-frame-top: #fefbf9;
1212
+ }
1213
+ [data-palette="warm"][data-theme="light"], [data-palette="warm"][data-theme="system"] {
1214
+ --ws-frame-top: #fefbf9;
1215
+ }
1216
+ @scope ([data-theme="light"], [data-theme="system"]) {
1217
+ [data-palette="warm"] {
1218
+ --ws-frame-top: #fefbf9;
1219
+ }
1220
+ }
1221
+ @scope ([data-palette="warm"]) {
1222
+ [data-theme="light"], [data-theme="system"] {
1223
+ --ws-frame-top: #fefbf9;
1224
+ }
1225
+ }
1226
+ [data-palette="warm"][data-theme="dark"] {
1227
+ --ws-frame-top: var(--ws-page);
1228
+ }
1229
+ @scope ([data-theme="dark"]) {
1230
+ [data-palette="warm"] {
1231
+ --ws-frame-top: var(--ws-page);
1232
+ }
1233
+ }
1234
+ @scope ([data-palette="warm"]) {
1235
+ [data-theme="dark"] {
1236
+ --ws-frame-top: var(--ws-page);
1237
+ }
1238
+ }
1239
+ @media (prefers-color-scheme: dark) {
1240
+ [data-palette="warm"][data-theme="system"] {
1241
+ --ws-frame-top: var(--ws-page);
1242
+ }
1243
+ @scope ([data-theme="system"]) {
1244
+ [data-palette="warm"] {
1245
+ --ws-frame-top: var(--ws-page);
1246
+ }
1247
+ }
1248
+ @scope ([data-palette="warm"]) {
1249
+ [data-theme="system"] {
1250
+ --ws-frame-top: var(--ws-page);
1251
+ }
1252
+ }
1253
+ }
1254
+ /* The navy ground, beside data-theme="dark" (or "system" on a dark OS): over night, and over a palette. */
1255
+ [data-theme="dark"][data-ground="navy"] {
1256
+ --ws-page: var(--color-bg-page);
1257
+ --color-bg-page: #021A32;
1258
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1259
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1260
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1261
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1262
+ --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1263
+ --ws-field: var(--color-white);
1264
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1265
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1266
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1267
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1268
+ --ws-menu-line: var(--ws-edge-card);
1269
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1270
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1271
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1272
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1273
+ --ws-card-tint-done: var(--ws-tint-live);
1274
+ --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1275
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1276
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1277
+ --ws-edge-chip: var(--ws-edge-card);
1278
+ --ws-edge-slot: var(--ws-edge-card);
1279
+ --ws-edge-tray: var(--ws-edge-card);
1280
+ --color-text-heading: #FFFFFF;
1281
+ --color-text-body: #D3D3D3;
1282
+ --color-text-muted: #A9A9A9;
1283
+ --color-text-placeholder: #6E6E6E;
1284
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000);
1285
+ --ws-field-ink: var(--color-brand-navy);
1286
+ --ws-field-mark: var(--ws-field-ink);
1287
+ --ws-chart-empty: var(--ws-track);
1288
+ --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
1289
+ --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
1290
+ --ws-ink-rgb: 255, 255, 255;
1291
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
1292
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1293
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0);
1294
+ --ws-word-alert: #FF8282;
1295
+ --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd);
1296
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3);
1297
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading));
1298
+ }
1299
+ @scope ([data-theme="dark"][data-ground="navy"]) {
1300
+ :scope, [data-palette], .fello {
1301
+ --ws-page: var(--color-bg-page);
1302
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1303
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1304
+ --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1305
+ --ws-field: var(--color-white);
1306
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1307
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1308
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1309
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1310
+ --ws-menu-line: var(--ws-edge-card);
1311
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1312
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1313
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1314
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1315
+ --ws-card-tint-done: var(--ws-tint-live);
1316
+ --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1317
+ --ws-edge-chip: var(--ws-edge-card);
1318
+ --ws-edge-slot: var(--ws-edge-card);
1319
+ --ws-edge-tray: var(--ws-edge-card);
1320
+ --color-text-placeholder: #6E6E6E;
1321
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000);
1322
+ --ws-field-ink: var(--color-brand-navy);
1323
+ --ws-field-mark: var(--ws-field-ink);
1324
+ --ws-chart-empty: var(--ws-track);
1325
+ --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
1326
+ --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
1327
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
1328
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0);
1329
+ --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd);
1330
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3);
1331
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading));
1332
+ }
1333
+ }
1334
+ @media (prefers-color-scheme: dark) {
1335
+ [data-theme="system"][data-ground="navy"] {
1336
+ --ws-page: var(--color-bg-page);
1337
+ --color-bg-page: #021A32;
1338
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1339
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1340
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1341
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1342
+ --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1343
+ --ws-field: var(--color-white);
1344
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1345
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1346
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1347
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1348
+ --ws-menu-line: var(--ws-edge-card);
1349
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1350
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1351
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1352
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1353
+ --ws-card-tint-done: var(--ws-tint-live);
1354
+ --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1355
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1356
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1357
+ --ws-edge-chip: var(--ws-edge-card);
1358
+ --ws-edge-slot: var(--ws-edge-card);
1359
+ --ws-edge-tray: var(--ws-edge-card);
1360
+ --color-text-heading: #FFFFFF;
1361
+ --color-text-body: #D3D3D3;
1362
+ --color-text-muted: #A9A9A9;
1363
+ --color-text-placeholder: #6E6E6E;
1364
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000);
1365
+ --ws-field-ink: var(--color-brand-navy);
1366
+ --ws-field-mark: var(--ws-field-ink);
1367
+ --ws-chart-empty: var(--ws-track);
1368
+ --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
1369
+ --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
1370
+ --ws-ink-rgb: 255, 255, 255;
1371
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
1372
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1373
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0);
1374
+ --ws-word-alert: #FF8282;
1375
+ --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd);
1376
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3);
1377
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading));
1378
+ }
1379
+ @scope ([data-theme="system"][data-ground="navy"]) {
1380
+ :scope, [data-palette], .fello {
1381
+ --ws-page: var(--color-bg-page);
1382
+ --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1383
+ --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1384
+ --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1385
+ --ws-field: var(--color-white);
1386
+ --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1387
+ --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1388
+ --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
1389
+ --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1390
+ --ws-menu-line: var(--ws-edge-card);
1391
+ --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
1392
+ --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
1393
+ --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page));
1394
+ --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
1395
+ --ws-card-tint-done: var(--ws-tint-live);
1396
+ --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
1397
+ --ws-edge-chip: var(--ws-edge-card);
1398
+ --ws-edge-slot: var(--ws-edge-card);
1399
+ --ws-edge-tray: var(--ws-edge-card);
1400
+ --color-text-placeholder: #6E6E6E;
1401
+ --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000);
1402
+ --ws-field-ink: var(--color-brand-navy);
1403
+ --ws-field-mark: var(--ws-field-ink);
1404
+ --ws-chart-empty: var(--ws-track);
1405
+ --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
1406
+ --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
1407
+ --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
1408
+ --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0);
1409
+ --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd);
1410
+ --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3);
1411
+ --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading));
1412
+ }
1413
+ }
1414
+ }
1415
+ [data-palette][data-theme="dark"][data-ground="navy"] {
1416
+ --color-bg-page: #021A32;
1417
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1418
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1419
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1420
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1421
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1422
+ --color-text-heading: #FFFFFF;
1423
+ --color-text-body: #D3D3D3;
1424
+ --color-text-muted: #A9A9A9;
1425
+ --ws-word-alert: #FF8282;
1426
+ }
1427
+ @scope ([data-theme="dark"][data-ground="navy"]) to ([data-theme]) {
1428
+ [data-palette][data-palette] {
1429
+ --color-bg-page: #021A32;
1430
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1431
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1432
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1433
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1434
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1435
+ --color-text-heading: #FFFFFF;
1436
+ --color-text-body: #D3D3D3;
1437
+ --color-text-muted: #A9A9A9;
1438
+ --ws-word-alert: #FF8282;
1439
+ }
1440
+ }
1441
+ @media (prefers-color-scheme: dark) {
1442
+ [data-palette][data-theme="system"][data-ground="navy"] {
1443
+ --color-bg-page: #021A32;
1444
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1445
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1446
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1447
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1448
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1449
+ --color-text-heading: #FFFFFF;
1450
+ --color-text-body: #D3D3D3;
1451
+ --color-text-muted: #A9A9A9;
1452
+ --ws-word-alert: #FF8282;
1453
+ }
1454
+ @scope ([data-theme="system"][data-ground="navy"]) to ([data-theme]) {
1455
+ [data-palette][data-palette] {
1456
+ --color-bg-page: #021A32;
1457
+ --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
1458
+ --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
1459
+ --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
1460
+ --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
1461
+ --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
1462
+ --color-text-heading: #FFFFFF;
1463
+ --color-text-body: #D3D3D3;
1464
+ --color-text-muted: #A9A9A9;
1465
+ --ws-word-alert: #FF8282;
1466
+ }
1467
+ }
232
1468
  }