@cyberskill/design 2.5.0 → 2.6.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 (459) hide show
  1. package/DESIGN.md +3 -3
  2. package/README.md +6 -5
  3. package/SECURITY.md +4 -4
  4. package/VERSION +1 -1
  5. package/_ds_bundle.js +2 -2
  6. package/_ds_bundle.js.map +1 -1
  7. package/_ds_manifest.json +0 -96
  8. package/_esm/cs.mjs +2 -2
  9. package/base/a11y.css +6 -11
  10. package/components/ai/ai-conversation.card.html +1 -1
  11. package/components/ai/ai-lumi.card.html +1 -1
  12. package/components/ai/ai.card.html +1 -1
  13. package/components/brand/brand.card.html +1 -1
  14. package/components/button/buttons.card.html +1 -1
  15. package/components/data/collections.card.html +1 -1
  16. package/components/data/data.card.html +1 -1
  17. package/components/datatable/datatable.card.html +1 -1
  18. package/components/dialog/dialog.card.html +1 -1
  19. package/components/feedback/feedback-2.card.html +1 -1
  20. package/components/feedback/feedback.card.html +2 -2
  21. package/components/forms/forms-2.card.html +1 -1
  22. package/components/forms/forms.card.html +1 -1
  23. package/components/i18n/i18n.card.html +1 -1
  24. package/components/icon/icon.card.html +1 -1
  25. package/components/logo/logo.card.html +2 -2
  26. package/components/navigation/navigation.card.html +1 -1
  27. package/components/navigation/shell.card.html +1 -1
  28. package/components/overlays/alertdialog.card.html +1 -1
  29. package/components/overlays/overlays.card.html +1 -1
  30. package/components/prompt-api.json +1 -1
  31. package/components/release-compatibility.json +1 -1
  32. package/components/specifications.json +1 -1
  33. package/components/static-html-reference.json +20 -20
  34. package/components/textfield/textfield.card.html +1 -1
  35. package/dist/esm/build.json +1 -1
  36. package/dist/styles.css +3177 -0
  37. package/dist/styles.min.css +1 -1
  38. package/docs/UPSTREAM.md +39 -0
  39. package/docs/consuming.md +1 -1
  40. package/docs/contrast-report.md +1 -1
  41. package/docs/conventions.md +1 -1
  42. package/docs/guideline-language.md +2 -2
  43. package/docs/reference-catalog.json +34 -22
  44. package/docs/release-notes.md +14 -1
  45. package/docs/static-html-reference.md +18 -18
  46. package/docs/template-inventory.json +125 -125
  47. package/docs/vi/UPSTREAM.md +39 -0
  48. package/docs/vi/consuming.md +1 -1
  49. package/docs/vi/contrast-report.md +1 -1
  50. package/docs/vi/conventions.md +1 -1
  51. package/docs/vi/entrypoints/DESIGN.md +3 -3
  52. package/docs/vi/entrypoints/README.md +6 -5
  53. package/docs/vi/guideline-language.md +2 -2
  54. package/docs/vi/release-notes.md +14 -1
  55. package/docs/vi/static-html-reference.md +18 -18
  56. package/docs/viewer.html +2 -2
  57. package/guidelines/atomic-view.html +5 -5
  58. package/guidelines/brand-iconography.html +1 -1
  59. package/guidelines/brand-imagery.html +1 -1
  60. package/guidelines/brand-interaction.html +1 -1
  61. package/guidelines/brand-voice.html +1 -1
  62. package/guidelines/colors-anchors.html +1 -1
  63. package/guidelines/colors-semantic.html +1 -1
  64. package/guidelines/colors-surfaces.html +1 -1
  65. package/guidelines/colors-text.html +1 -1
  66. package/guidelines/documents.html +1 -1
  67. package/guidelines/elements-components.html +1 -1
  68. package/guidelines/elements-concept.html +1 -1
  69. package/guidelines/elements-geometry.html +1 -1
  70. package/guidelines/elements-variants.html +1 -1
  71. package/guidelines/guideline-language.js +6 -5
  72. package/guidelines/motion-interaction.html +1 -1
  73. package/guidelines/motion.html +1 -1
  74. package/guidelines/responsive-bilingual.html +1 -1
  75. package/guidelines/rtl-preview.html +1 -1
  76. package/guidelines/spacing-breakpoints.html +1 -1
  77. package/guidelines/spacing-radius.html +1 -1
  78. package/guidelines/spacing-scale.html +1 -1
  79. package/guidelines/surfaces-aurora.html +1 -1
  80. package/guidelines/surfaces-depth.html +1 -1
  81. package/guidelines/surfaces-glass.html +1 -1
  82. package/guidelines/surfaces-shadow.html +1 -1
  83. package/guidelines/type-families.html +1 -1
  84. package/guidelines/type-lineheight.html +1 -1
  85. package/guidelines/type-scale.html +1 -1
  86. package/guidelines/type-weights.html +1 -1
  87. package/package.json +8 -4
  88. package/styles/components/manifest.json +124 -124
  89. package/styles.layered.css +8 -10
  90. package/styles.layered.provenance.json +3 -3
  91. package/templates/_ds-base.canonical.js +6 -4
  92. package/templates/app-shell/ds-base.js +6 -4
  93. package/templates/article/ds-base.js +6 -4
  94. package/templates/auth/ds-base.js +6 -4
  95. package/templates/bod-deck/ds-base.js +6 -4
  96. package/templates/bod-investor-update/ds-base.js +6 -4
  97. package/templates/bod-memo/ds-base.js +6 -4
  98. package/templates/bod-minutes/ds-base.js +6 -4
  99. package/templates/bod-report/ds-base.js +6 -4
  100. package/templates/bod-resolution/ds-base.js +6 -4
  101. package/templates/culture-event-invite/ds-base.js +6 -4
  102. package/templates/dashboard/ds-base.js +6 -4
  103. package/templates/delivery-change-note/ds-base.js +6 -4
  104. package/templates/delivery-kickoff/ds-base.js +6 -4
  105. package/templates/delivery-qbr-deck/ds-base.js +6 -4
  106. package/templates/delivery-runbook/ds-base.js +6 -4
  107. package/templates/delivery-status-email/ds-base.js +6 -4
  108. package/templates/doc-style-guide/ds-base.js +6 -4
  109. package/templates/doc-suite-index/ds-base.js +6 -4
  110. package/templates/doc-templates/ds-base.js +6 -4
  111. package/templates/email/ds-base.js +6 -4
  112. package/templates/finance-dunning-email/ds-base.js +6 -4
  113. package/templates/finance-expense-report/ds-base.js +6 -4
  114. package/templates/finance-invoice/ds-base.js +6 -4
  115. package/templates/finance-quote/ds-base.js +6 -4
  116. package/templates/hr-announcement/ds-base.js +6 -4
  117. package/templates/hr-interview-kit/ds-base.js +6 -4
  118. package/templates/hr-offboarding/ds-base.js +6 -4
  119. package/templates/hr-performance-review/ds-base.js +6 -4
  120. package/templates/hr-pip/ds-base.js +6 -4
  121. package/templates/kitchen-sink.html +1 -1
  122. package/templates/legal-msa/ds-base.js +6 -4
  123. package/templates/legal-sow/ds-base.js +6 -4
  124. package/templates/marketing-campaign-brief/ds-base.js +6 -4
  125. package/templates/marketing-case-study/ds-base.js +6 -4
  126. package/templates/marketing-launch/ds-base.js +6 -4
  127. package/templates/marketing-newsletter/ds-base.js +6 -4
  128. package/templates/marketing-page/ds-base.js +6 -4
  129. package/templates/marketing-press-release/ds-base.js +6 -4
  130. package/templates/marketing-social-kit/ds-base.js +6 -4
  131. package/templates/sales-one-pager/ds-base.js +6 -4
  132. package/templates/sales-proposal-deck/ds-base.js +6 -4
  133. package/templates/settings/ds-base.js +6 -4
  134. package/templates/slide-deck/ds-base.js +6 -4
  135. package/templates/team-meeting-agenda/ds-base.js +6 -4
  136. package/templates/tech-incident-report/ds-base.js +6 -4
  137. package/templates/tech-release-notes/ds-base.js +6 -4
  138. package/templates/tech-retro/ds-base.js +6 -4
  139. package/templates/tech-rfc/ds-base.js +6 -4
  140. package/templates/vn-appointment-transfer/ds-base.js +6 -4
  141. package/templates/vn-certificate-of-employment/ds-base.js +6 -4
  142. package/templates/vn-code-of-conduct/ds-base.js +6 -4
  143. package/templates/vn-compensation-regulation/ds-base.js +6 -4
  144. package/templates/vn-contract-amendment/ds-base.js +6 -4
  145. package/templates/vn-contractor-agreement/ds-base.js +6 -4
  146. package/templates/vn-data-protection-policy/ds-base.js +6 -4
  147. package/templates/vn-disciplinary-case-file/ds-base.js +6 -4
  148. package/templates/vn-disciplinary-schedule/ds-base.js +6 -4
  149. package/templates/vn-employee-request/ds-base.js +6 -4
  150. package/templates/vn-exit-handover/ds-base.js +6 -4
  151. package/templates/vn-foreign-employee-pack/ds-base.js +6 -4
  152. package/templates/vn-framework-agreement/ds-base.js +6 -4
  153. package/templates/vn-grassroots-democracy/ds-base.js +6 -4
  154. package/templates/vn-infosec-policy/ds-base.js +6 -4
  155. package/templates/vn-internal-labor-regulations/ds-base.js +6 -4
  156. package/templates/vn-internship-agreement/ds-base.js +6 -4
  157. package/templates/vn-job-description/ds-base.js +6 -4
  158. package/templates/vn-labor-contract/ds-base.js +6 -4
  159. package/templates/vn-labour-management-book/ds-base.js +6 -4
  160. package/templates/vn-mutual-nda/ds-base.js +6 -4
  161. package/templates/vn-ndnca-ip/ds-base.js +6 -4
  162. package/templates/vn-offer-letter/ds-base.js +6 -4
  163. package/templates/vn-onboarding-checklist/ds-base.js +6 -4
  164. package/templates/vn-pdpl-consent/ds-base.js +6 -4
  165. package/templates/vn-performance-evaluation-regulation/ds-base.js +6 -4
  166. package/templates/vn-performance-review-form/ds-base.js +6 -4
  167. package/templates/vn-phantom-stock/ds-base.js +6 -4
  168. package/templates/vn-probation-contract/ds-base.js +6 -4
  169. package/templates/vn-receipt-acknowledgement/ds-base.js +6 -4
  170. package/templates/vn-remote-work-policy/ds-base.js +6 -4
  171. package/templates/vn-resignation-letter/ds-base.js +6 -4
  172. package/templates/vn-salary-scale/ds-base.js +6 -4
  173. package/templates/vn-sow-appendix/ds-base.js +6 -4
  174. package/templates/vn-termination-decision/ds-base.js +6 -4
  175. package/templates/vn-total-rewards-appendix/ds-base.js +6 -4
  176. package/templates/vn-training-commitment/ds-base.js +6 -4
  177. package/templates/vn-travel-expense-policy/ds-base.js +6 -4
  178. package/tokens/declarations.json +2 -128
  179. package/tokens/element-seeds.json +1 -1
  180. package/tokens/modes/dark__default__comfortable__high.dtcg.json +1 -1
  181. package/tokens/modes/dark__default__comfortable__standard.dtcg.json +1 -1
  182. package/tokens/modes/dark__default__compact__high.dtcg.json +1 -1
  183. package/tokens/modes/dark__default__compact__standard.dtcg.json +1 -1
  184. package/tokens/modes/dark__hoa-lava__comfortable__high.dtcg.json +1 -1
  185. package/tokens/modes/dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
  186. package/tokens/modes/dark__hoa-lava__compact__high.dtcg.json +1 -1
  187. package/tokens/modes/dark__hoa-lava__compact__standard.dtcg.json +1 -1
  188. package/tokens/modes/dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
  189. package/tokens/modes/dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  190. package/tokens/modes/dark__hoa-plasma__compact__high.dtcg.json +1 -1
  191. package/tokens/modes/dark__hoa-plasma__compact__standard.dtcg.json +1 -1
  192. package/tokens/modes/dark__hoa__comfortable__high.dtcg.json +1 -1
  193. package/tokens/modes/dark__hoa__comfortable__standard.dtcg.json +1 -1
  194. package/tokens/modes/dark__hoa__compact__high.dtcg.json +1 -1
  195. package/tokens/modes/dark__hoa__compact__standard.dtcg.json +1 -1
  196. package/tokens/modes/dark__kim-steel__comfortable__high.dtcg.json +1 -1
  197. package/tokens/modes/dark__kim-steel__comfortable__standard.dtcg.json +1 -1
  198. package/tokens/modes/dark__kim-steel__compact__high.dtcg.json +1 -1
  199. package/tokens/modes/dark__kim-steel__compact__standard.dtcg.json +1 -1
  200. package/tokens/modes/dark__kim-titanium__comfortable__high.dtcg.json +1 -1
  201. package/tokens/modes/dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
  202. package/tokens/modes/dark__kim-titanium__compact__high.dtcg.json +1 -1
  203. package/tokens/modes/dark__kim-titanium__compact__standard.dtcg.json +1 -1
  204. package/tokens/modes/dark__kim__comfortable__high.dtcg.json +1 -1
  205. package/tokens/modes/dark__kim__comfortable__standard.dtcg.json +1 -1
  206. package/tokens/modes/dark__kim__compact__high.dtcg.json +1 -1
  207. package/tokens/modes/dark__kim__compact__standard.dtcg.json +1 -1
  208. package/tokens/modes/dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
  209. package/tokens/modes/dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  210. package/tokens/modes/dark__moc-bamboo__compact__high.dtcg.json +1 -1
  211. package/tokens/modes/dark__moc-bamboo__compact__standard.dtcg.json +1 -1
  212. package/tokens/modes/dark__moc-forest__comfortable__high.dtcg.json +1 -1
  213. package/tokens/modes/dark__moc-forest__comfortable__standard.dtcg.json +1 -1
  214. package/tokens/modes/dark__moc-forest__compact__high.dtcg.json +1 -1
  215. package/tokens/modes/dark__moc-forest__compact__standard.dtcg.json +1 -1
  216. package/tokens/modes/dark__moc__comfortable__high.dtcg.json +1 -1
  217. package/tokens/modes/dark__moc__comfortable__standard.dtcg.json +1 -1
  218. package/tokens/modes/dark__moc__compact__high.dtcg.json +1 -1
  219. package/tokens/modes/dark__moc__compact__standard.dtcg.json +1 -1
  220. package/tokens/modes/dark__tho-clay__comfortable__high.dtcg.json +1 -1
  221. package/tokens/modes/dark__tho-clay__comfortable__standard.dtcg.json +1 -1
  222. package/tokens/modes/dark__tho-clay__compact__high.dtcg.json +1 -1
  223. package/tokens/modes/dark__tho-clay__compact__standard.dtcg.json +1 -1
  224. package/tokens/modes/dark__tho-sand__comfortable__high.dtcg.json +1 -1
  225. package/tokens/modes/dark__tho-sand__comfortable__standard.dtcg.json +1 -1
  226. package/tokens/modes/dark__tho-sand__compact__high.dtcg.json +1 -1
  227. package/tokens/modes/dark__tho-sand__compact__standard.dtcg.json +1 -1
  228. package/tokens/modes/dark__tho__comfortable__high.dtcg.json +1 -1
  229. package/tokens/modes/dark__tho__comfortable__standard.dtcg.json +1 -1
  230. package/tokens/modes/dark__tho__compact__high.dtcg.json +1 -1
  231. package/tokens/modes/dark__tho__compact__standard.dtcg.json +1 -1
  232. package/tokens/modes/dark__thuy-mist__comfortable__high.dtcg.json +1 -1
  233. package/tokens/modes/dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
  234. package/tokens/modes/dark__thuy-mist__compact__high.dtcg.json +1 -1
  235. package/tokens/modes/dark__thuy-mist__compact__standard.dtcg.json +1 -1
  236. package/tokens/modes/dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
  237. package/tokens/modes/dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  238. package/tokens/modes/dark__thuy-ocean__compact__high.dtcg.json +1 -1
  239. package/tokens/modes/dark__thuy-ocean__compact__standard.dtcg.json +1 -1
  240. package/tokens/modes/dark__thuy__comfortable__high.dtcg.json +1 -1
  241. package/tokens/modes/dark__thuy__comfortable__standard.dtcg.json +1 -1
  242. package/tokens/modes/dark__thuy__compact__high.dtcg.json +1 -1
  243. package/tokens/modes/dark__thuy__compact__standard.dtcg.json +1 -1
  244. package/tokens/modes/index.json +260 -260
  245. package/tokens/modes/light__default__comfortable__high.dtcg.json +1 -1
  246. package/tokens/modes/light__default__comfortable__standard.dtcg.json +1 -1
  247. package/tokens/modes/light__default__compact__high.dtcg.json +1 -1
  248. package/tokens/modes/light__default__compact__standard.dtcg.json +1 -1
  249. package/tokens/modes/light__hoa-lava__comfortable__high.dtcg.json +1 -1
  250. package/tokens/modes/light__hoa-lava__comfortable__standard.dtcg.json +1 -1
  251. package/tokens/modes/light__hoa-lava__compact__high.dtcg.json +1 -1
  252. package/tokens/modes/light__hoa-lava__compact__standard.dtcg.json +1 -1
  253. package/tokens/modes/light__hoa-plasma__comfortable__high.dtcg.json +1 -1
  254. package/tokens/modes/light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  255. package/tokens/modes/light__hoa-plasma__compact__high.dtcg.json +1 -1
  256. package/tokens/modes/light__hoa-plasma__compact__standard.dtcg.json +1 -1
  257. package/tokens/modes/light__hoa__comfortable__high.dtcg.json +1 -1
  258. package/tokens/modes/light__hoa__comfortable__standard.dtcg.json +1 -1
  259. package/tokens/modes/light__hoa__compact__high.dtcg.json +1 -1
  260. package/tokens/modes/light__hoa__compact__standard.dtcg.json +1 -1
  261. package/tokens/modes/light__kim-steel__comfortable__high.dtcg.json +1 -1
  262. package/tokens/modes/light__kim-steel__comfortable__standard.dtcg.json +1 -1
  263. package/tokens/modes/light__kim-steel__compact__high.dtcg.json +1 -1
  264. package/tokens/modes/light__kim-steel__compact__standard.dtcg.json +1 -1
  265. package/tokens/modes/light__kim-titanium__comfortable__high.dtcg.json +1 -1
  266. package/tokens/modes/light__kim-titanium__comfortable__standard.dtcg.json +1 -1
  267. package/tokens/modes/light__kim-titanium__compact__high.dtcg.json +1 -1
  268. package/tokens/modes/light__kim-titanium__compact__standard.dtcg.json +1 -1
  269. package/tokens/modes/light__kim__comfortable__high.dtcg.json +1 -1
  270. package/tokens/modes/light__kim__comfortable__standard.dtcg.json +1 -1
  271. package/tokens/modes/light__kim__compact__high.dtcg.json +1 -1
  272. package/tokens/modes/light__kim__compact__standard.dtcg.json +1 -1
  273. package/tokens/modes/light__moc-bamboo__comfortable__high.dtcg.json +1 -1
  274. package/tokens/modes/light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  275. package/tokens/modes/light__moc-bamboo__compact__high.dtcg.json +1 -1
  276. package/tokens/modes/light__moc-bamboo__compact__standard.dtcg.json +1 -1
  277. package/tokens/modes/light__moc-forest__comfortable__high.dtcg.json +1 -1
  278. package/tokens/modes/light__moc-forest__comfortable__standard.dtcg.json +1 -1
  279. package/tokens/modes/light__moc-forest__compact__high.dtcg.json +1 -1
  280. package/tokens/modes/light__moc-forest__compact__standard.dtcg.json +1 -1
  281. package/tokens/modes/light__moc__comfortable__high.dtcg.json +1 -1
  282. package/tokens/modes/light__moc__comfortable__standard.dtcg.json +1 -1
  283. package/tokens/modes/light__moc__compact__high.dtcg.json +1 -1
  284. package/tokens/modes/light__moc__compact__standard.dtcg.json +1 -1
  285. package/tokens/modes/light__tho-clay__comfortable__high.dtcg.json +1 -1
  286. package/tokens/modes/light__tho-clay__comfortable__standard.dtcg.json +1 -1
  287. package/tokens/modes/light__tho-clay__compact__high.dtcg.json +1 -1
  288. package/tokens/modes/light__tho-clay__compact__standard.dtcg.json +1 -1
  289. package/tokens/modes/light__tho-sand__comfortable__high.dtcg.json +1 -1
  290. package/tokens/modes/light__tho-sand__comfortable__standard.dtcg.json +1 -1
  291. package/tokens/modes/light__tho-sand__compact__high.dtcg.json +1 -1
  292. package/tokens/modes/light__tho-sand__compact__standard.dtcg.json +1 -1
  293. package/tokens/modes/light__tho__comfortable__high.dtcg.json +1 -1
  294. package/tokens/modes/light__tho__comfortable__standard.dtcg.json +1 -1
  295. package/tokens/modes/light__tho__compact__high.dtcg.json +1 -1
  296. package/tokens/modes/light__tho__compact__standard.dtcg.json +1 -1
  297. package/tokens/modes/light__thuy-mist__comfortable__high.dtcg.json +1 -1
  298. package/tokens/modes/light__thuy-mist__comfortable__standard.dtcg.json +1 -1
  299. package/tokens/modes/light__thuy-mist__compact__high.dtcg.json +1 -1
  300. package/tokens/modes/light__thuy-mist__compact__standard.dtcg.json +1 -1
  301. package/tokens/modes/light__thuy-ocean__comfortable__high.dtcg.json +1 -1
  302. package/tokens/modes/light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  303. package/tokens/modes/light__thuy-ocean__compact__high.dtcg.json +1 -1
  304. package/tokens/modes/light__thuy-ocean__compact__standard.dtcg.json +1 -1
  305. package/tokens/modes/light__thuy__comfortable__high.dtcg.json +1 -1
  306. package/tokens/modes/light__thuy__comfortable__standard.dtcg.json +1 -1
  307. package/tokens/modes/light__thuy__compact__high.dtcg.json +1 -1
  308. package/tokens/modes/light__thuy__compact__standard.dtcg.json +1 -1
  309. package/tokens/modes/system-dark__default__comfortable__high.dtcg.json +1 -1
  310. package/tokens/modes/system-dark__default__comfortable__standard.dtcg.json +1 -1
  311. package/tokens/modes/system-dark__default__compact__high.dtcg.json +1 -1
  312. package/tokens/modes/system-dark__default__compact__standard.dtcg.json +1 -1
  313. package/tokens/modes/system-dark__hoa-lava__comfortable__high.dtcg.json +1 -1
  314. package/tokens/modes/system-dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
  315. package/tokens/modes/system-dark__hoa-lava__compact__high.dtcg.json +1 -1
  316. package/tokens/modes/system-dark__hoa-lava__compact__standard.dtcg.json +1 -1
  317. package/tokens/modes/system-dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
  318. package/tokens/modes/system-dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  319. package/tokens/modes/system-dark__hoa-plasma__compact__high.dtcg.json +1 -1
  320. package/tokens/modes/system-dark__hoa-plasma__compact__standard.dtcg.json +1 -1
  321. package/tokens/modes/system-dark__hoa__comfortable__high.dtcg.json +1 -1
  322. package/tokens/modes/system-dark__hoa__comfortable__standard.dtcg.json +1 -1
  323. package/tokens/modes/system-dark__hoa__compact__high.dtcg.json +1 -1
  324. package/tokens/modes/system-dark__hoa__compact__standard.dtcg.json +1 -1
  325. package/tokens/modes/system-dark__kim-steel__comfortable__high.dtcg.json +1 -1
  326. package/tokens/modes/system-dark__kim-steel__comfortable__standard.dtcg.json +1 -1
  327. package/tokens/modes/system-dark__kim-steel__compact__high.dtcg.json +1 -1
  328. package/tokens/modes/system-dark__kim-steel__compact__standard.dtcg.json +1 -1
  329. package/tokens/modes/system-dark__kim-titanium__comfortable__high.dtcg.json +1 -1
  330. package/tokens/modes/system-dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
  331. package/tokens/modes/system-dark__kim-titanium__compact__high.dtcg.json +1 -1
  332. package/tokens/modes/system-dark__kim-titanium__compact__standard.dtcg.json +1 -1
  333. package/tokens/modes/system-dark__kim__comfortable__high.dtcg.json +1 -1
  334. package/tokens/modes/system-dark__kim__comfortable__standard.dtcg.json +1 -1
  335. package/tokens/modes/system-dark__kim__compact__high.dtcg.json +1 -1
  336. package/tokens/modes/system-dark__kim__compact__standard.dtcg.json +1 -1
  337. package/tokens/modes/system-dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
  338. package/tokens/modes/system-dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  339. package/tokens/modes/system-dark__moc-bamboo__compact__high.dtcg.json +1 -1
  340. package/tokens/modes/system-dark__moc-bamboo__compact__standard.dtcg.json +1 -1
  341. package/tokens/modes/system-dark__moc-forest__comfortable__high.dtcg.json +1 -1
  342. package/tokens/modes/system-dark__moc-forest__comfortable__standard.dtcg.json +1 -1
  343. package/tokens/modes/system-dark__moc-forest__compact__high.dtcg.json +1 -1
  344. package/tokens/modes/system-dark__moc-forest__compact__standard.dtcg.json +1 -1
  345. package/tokens/modes/system-dark__moc__comfortable__high.dtcg.json +1 -1
  346. package/tokens/modes/system-dark__moc__comfortable__standard.dtcg.json +1 -1
  347. package/tokens/modes/system-dark__moc__compact__high.dtcg.json +1 -1
  348. package/tokens/modes/system-dark__moc__compact__standard.dtcg.json +1 -1
  349. package/tokens/modes/system-dark__tho-clay__comfortable__high.dtcg.json +1 -1
  350. package/tokens/modes/system-dark__tho-clay__comfortable__standard.dtcg.json +1 -1
  351. package/tokens/modes/system-dark__tho-clay__compact__high.dtcg.json +1 -1
  352. package/tokens/modes/system-dark__tho-clay__compact__standard.dtcg.json +1 -1
  353. package/tokens/modes/system-dark__tho-sand__comfortable__high.dtcg.json +1 -1
  354. package/tokens/modes/system-dark__tho-sand__comfortable__standard.dtcg.json +1 -1
  355. package/tokens/modes/system-dark__tho-sand__compact__high.dtcg.json +1 -1
  356. package/tokens/modes/system-dark__tho-sand__compact__standard.dtcg.json +1 -1
  357. package/tokens/modes/system-dark__tho__comfortable__high.dtcg.json +1 -1
  358. package/tokens/modes/system-dark__tho__comfortable__standard.dtcg.json +1 -1
  359. package/tokens/modes/system-dark__tho__compact__high.dtcg.json +1 -1
  360. package/tokens/modes/system-dark__tho__compact__standard.dtcg.json +1 -1
  361. package/tokens/modes/system-dark__thuy-mist__comfortable__high.dtcg.json +1 -1
  362. package/tokens/modes/system-dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
  363. package/tokens/modes/system-dark__thuy-mist__compact__high.dtcg.json +1 -1
  364. package/tokens/modes/system-dark__thuy-mist__compact__standard.dtcg.json +1 -1
  365. package/tokens/modes/system-dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
  366. package/tokens/modes/system-dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  367. package/tokens/modes/system-dark__thuy-ocean__compact__high.dtcg.json +1 -1
  368. package/tokens/modes/system-dark__thuy-ocean__compact__standard.dtcg.json +1 -1
  369. package/tokens/modes/system-dark__thuy__comfortable__high.dtcg.json +1 -1
  370. package/tokens/modes/system-dark__thuy__comfortable__standard.dtcg.json +1 -1
  371. package/tokens/modes/system-dark__thuy__compact__high.dtcg.json +1 -1
  372. package/tokens/modes/system-dark__thuy__compact__standard.dtcg.json +1 -1
  373. package/tokens/modes/system-light__default__comfortable__high.dtcg.json +1 -1
  374. package/tokens/modes/system-light__default__comfortable__standard.dtcg.json +1 -1
  375. package/tokens/modes/system-light__default__compact__high.dtcg.json +1 -1
  376. package/tokens/modes/system-light__default__compact__standard.dtcg.json +1 -1
  377. package/tokens/modes/system-light__hoa-lava__comfortable__high.dtcg.json +1 -1
  378. package/tokens/modes/system-light__hoa-lava__comfortable__standard.dtcg.json +1 -1
  379. package/tokens/modes/system-light__hoa-lava__compact__high.dtcg.json +1 -1
  380. package/tokens/modes/system-light__hoa-lava__compact__standard.dtcg.json +1 -1
  381. package/tokens/modes/system-light__hoa-plasma__comfortable__high.dtcg.json +1 -1
  382. package/tokens/modes/system-light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  383. package/tokens/modes/system-light__hoa-plasma__compact__high.dtcg.json +1 -1
  384. package/tokens/modes/system-light__hoa-plasma__compact__standard.dtcg.json +1 -1
  385. package/tokens/modes/system-light__hoa__comfortable__high.dtcg.json +1 -1
  386. package/tokens/modes/system-light__hoa__comfortable__standard.dtcg.json +1 -1
  387. package/tokens/modes/system-light__hoa__compact__high.dtcg.json +1 -1
  388. package/tokens/modes/system-light__hoa__compact__standard.dtcg.json +1 -1
  389. package/tokens/modes/system-light__kim-steel__comfortable__high.dtcg.json +1 -1
  390. package/tokens/modes/system-light__kim-steel__comfortable__standard.dtcg.json +1 -1
  391. package/tokens/modes/system-light__kim-steel__compact__high.dtcg.json +1 -1
  392. package/tokens/modes/system-light__kim-steel__compact__standard.dtcg.json +1 -1
  393. package/tokens/modes/system-light__kim-titanium__comfortable__high.dtcg.json +1 -1
  394. package/tokens/modes/system-light__kim-titanium__comfortable__standard.dtcg.json +1 -1
  395. package/tokens/modes/system-light__kim-titanium__compact__high.dtcg.json +1 -1
  396. package/tokens/modes/system-light__kim-titanium__compact__standard.dtcg.json +1 -1
  397. package/tokens/modes/system-light__kim__comfortable__high.dtcg.json +1 -1
  398. package/tokens/modes/system-light__kim__comfortable__standard.dtcg.json +1 -1
  399. package/tokens/modes/system-light__kim__compact__high.dtcg.json +1 -1
  400. package/tokens/modes/system-light__kim__compact__standard.dtcg.json +1 -1
  401. package/tokens/modes/system-light__moc-bamboo__comfortable__high.dtcg.json +1 -1
  402. package/tokens/modes/system-light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  403. package/tokens/modes/system-light__moc-bamboo__compact__high.dtcg.json +1 -1
  404. package/tokens/modes/system-light__moc-bamboo__compact__standard.dtcg.json +1 -1
  405. package/tokens/modes/system-light__moc-forest__comfortable__high.dtcg.json +1 -1
  406. package/tokens/modes/system-light__moc-forest__comfortable__standard.dtcg.json +1 -1
  407. package/tokens/modes/system-light__moc-forest__compact__high.dtcg.json +1 -1
  408. package/tokens/modes/system-light__moc-forest__compact__standard.dtcg.json +1 -1
  409. package/tokens/modes/system-light__moc__comfortable__high.dtcg.json +1 -1
  410. package/tokens/modes/system-light__moc__comfortable__standard.dtcg.json +1 -1
  411. package/tokens/modes/system-light__moc__compact__high.dtcg.json +1 -1
  412. package/tokens/modes/system-light__moc__compact__standard.dtcg.json +1 -1
  413. package/tokens/modes/system-light__tho-clay__comfortable__high.dtcg.json +1 -1
  414. package/tokens/modes/system-light__tho-clay__comfortable__standard.dtcg.json +1 -1
  415. package/tokens/modes/system-light__tho-clay__compact__high.dtcg.json +1 -1
  416. package/tokens/modes/system-light__tho-clay__compact__standard.dtcg.json +1 -1
  417. package/tokens/modes/system-light__tho-sand__comfortable__high.dtcg.json +1 -1
  418. package/tokens/modes/system-light__tho-sand__comfortable__standard.dtcg.json +1 -1
  419. package/tokens/modes/system-light__tho-sand__compact__high.dtcg.json +1 -1
  420. package/tokens/modes/system-light__tho-sand__compact__standard.dtcg.json +1 -1
  421. package/tokens/modes/system-light__tho__comfortable__high.dtcg.json +1 -1
  422. package/tokens/modes/system-light__tho__comfortable__standard.dtcg.json +1 -1
  423. package/tokens/modes/system-light__tho__compact__high.dtcg.json +1 -1
  424. package/tokens/modes/system-light__tho__compact__standard.dtcg.json +1 -1
  425. package/tokens/modes/system-light__thuy-mist__comfortable__high.dtcg.json +1 -1
  426. package/tokens/modes/system-light__thuy-mist__comfortable__standard.dtcg.json +1 -1
  427. package/tokens/modes/system-light__thuy-mist__compact__high.dtcg.json +1 -1
  428. package/tokens/modes/system-light__thuy-mist__compact__standard.dtcg.json +1 -1
  429. package/tokens/modes/system-light__thuy-ocean__comfortable__high.dtcg.json +1 -1
  430. package/tokens/modes/system-light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  431. package/tokens/modes/system-light__thuy-ocean__compact__high.dtcg.json +1 -1
  432. package/tokens/modes/system-light__thuy-ocean__compact__standard.dtcg.json +1 -1
  433. package/tokens/modes/system-light__thuy__comfortable__high.dtcg.json +1 -1
  434. package/tokens/modes/system-light__thuy__comfortable__standard.dtcg.json +1 -1
  435. package/tokens/modes/system-light__thuy__compact__high.dtcg.json +1 -1
  436. package/tokens/modes/system-light__thuy__compact__standard.dtcg.json +1 -1
  437. package/tokens/native/CSModes.kt +3 -3
  438. package/tokens/native/CSModes.swift +3 -3
  439. package/tokens/native/CSTokens.kt +1 -1
  440. package/tokens/native/CSTokens.swift +1 -1
  441. package/tokens/native/cs_modes.dart +3 -3
  442. package/tokens/native/cs_tokens.dart +1 -1
  443. package/tokens/native/mode-provenance.json +6 -6
  444. package/tokens/provenance.json +6 -6
  445. package/tokens/styles.css +1 -1
  446. package/tokens/tokens.dtcg.json +4 -4
  447. package/tokens/tokens.js +5 -5
  448. package/tokens/tokens.json +4 -4
  449. package/tokens/variables.css +0 -9
  450. package/ui_kits/deck/index.html +1 -1
  451. package/ui_kits/status-hub/index.html +1 -1
  452. package/ui_kits/status-hub/login.html +1 -1
  453. package/ui_kits/status-hub/project.html +1 -1
  454. package/ui_kits/status-hub/settings.html +1 -1
  455. package/ui_kits/status-hub/static-locale.js +2 -0
  456. package/ui_kits/website/careers.html +1 -1
  457. package/ui_kits/website/chat.html +1 -1
  458. package/ui_kits/website/index.html +1 -1
  459. package/ui_kits/website/work.html +1 -1
package/dist/styles.css ADDED
@@ -0,0 +1,3177 @@
1
+ /* CyberSkill Design System v2.6.0 — flattened build of ../styles.css (same closure, same order, no @import chain).
2
+ * Link THIS file from cards, kits and templates; keep editing the modular sources under tokens/ and base/ and
3
+ * regenerate this file after any change. url() paths are already relative to dist/ (../fonts, ../assets). */
4
+
5
+ /* ===== tokens/fonts.css ===== */
6
+ /* CyberSkill — self-hosted webfonts.
7
+ * Be Vietnam Pro (UI, 300-800 + italics), JetBrains Mono (code/data,
8
+ * 400/500/700), and Space Grotesk (display/headline, variable 300-700) are
9
+ * self-hosted from fonts/ as subset-split woff2 (latin, latin-ext,
10
+ * vietnamese). Vietnamese subset coverage is a brand anchor.
11
+ * Files fetched from Google Fonts and committed locally; no CDN dependency. */
12
+
13
+ /* Be Vietnam Pro */
14
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
15
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
16
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
17
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
18
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
19
+ @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
20
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
21
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
22
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
23
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
24
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
25
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
26
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
27
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
28
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
29
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
30
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
31
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
32
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
33
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
34
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-700-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
35
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
36
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
37
+ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
38
+
39
+ /* JetBrains Mono */
40
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
41
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
42
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
43
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
44
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
45
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
46
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
47
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
48
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-400-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
49
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
50
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
51
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-400-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
52
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
53
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
54
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-400-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
55
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
56
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
57
+ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-400-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
58
+
59
+ /* Space Grotesk — display / headline face (--cs-font-family-display).
60
+ * One variable file per subset covers the whole 300-700 axis; the family has no
61
+ * 800, so --cs-heading-weight-strong (800) under .cs-display-face clamps to 700
62
+ * within Space Grotesk (see guidelines/type-families.html). */
63
+ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
64
+ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
65
+ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-latin.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0303,U+0306,U+0309,U+031B,U+0323,U+1EA0-1EF9,U+20AB,U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
66
+
67
+ /* ===== tokens/colors.css ===== */
68
+ /* CyberSkill — colour tokens.
69
+ * Anchors are IMMUTABLE: Umber #45210E (primary brand), Ochre #F4BA17 (accent).
70
+ * Warm earth palette; every neutral is warmed toward umber, never cold grey.
71
+ * Light is the default theme; dark/system are opt-in via [data-theme]. */
72
+ /* Literal neutral palette and reset fallback. elements.css composes this with
73
+ * inherited element and contrast channels at each explicit scope boundary. */
74
+ [data-theme="light"], [data-theme="system"], :root {
75
+ color-scheme: light;
76
+
77
+ /* ---- Anchor brand (immutable) ---- */
78
+ --cs-color-brand-umber: #45210E; /* oklch(0.265 0.073 44.3) */
79
+ --cs-color-brand-ochre: #F4BA17; /* oklch(0.811 0.162 83.7) */
80
+
81
+ /* ---- Surfaces (warm paper → white → raised) ---- */
82
+ --cs-color-surface-page: #FFFDF8; /* default page background */
83
+ --cs-color-surface-panel: #FFFFFF; /* cards, panels */
84
+ --cs-color-surface-raised: #FBF4E9; /* hover / secondary fill */
85
+
86
+ /* ---- Text ---- */
87
+ --cs-color-text-primary: #45210E; /* = Umber */
88
+ --cs-color-text-inverse: #FFFFFF;
89
+ --cs-color-text-accent: #6E3B0E; /* accessible ochre-adjacent link/accent text */
90
+ --cs-color-text-muted: #3F2D21; /* Secondary text: APCA75 on page/panel/raised, including all element variants */
91
+
92
+ /* ---- Semantic fills + paired foregrounds (literal-on-semantic, UX-008) ---- */
93
+ --cs-color-semantic-success: #166534;
94
+ --cs-color-semantic-danger: #B42318;
95
+ --cs-color-semantic-warning: #92400E;
96
+ --cs-color-semantic-info: #1D4ED8;
97
+ --cs-color-semantic-success-fg: #FFFFFF;
98
+ --cs-color-semantic-danger-fg: #FFFFFF;
99
+ --cs-color-semantic-warning-fg: #FFFFFF;
100
+ --cs-color-semantic-info-fg: #FFFFFF;
101
+ /* Semantic text is separate from fills; target APCA75 on actual element surfaces. */
102
+ --cs-color-semantic-success-text: #042D13;
103
+ --cs-color-semantic-danger-text: #4B0502;
104
+ --cs-color-semantic-warning-text: #441801;
105
+ --cs-color-semantic-info-text: #000A75;
106
+
107
+ /* ---- Document palette (Style Guide Articles · legal A4 instruments) ---- */
108
+ --cs-doc-ink: #1A1614;
109
+ --cs-doc-slate: #26323A;
110
+ --cs-doc-fill: #FDE68A;
111
+ --cs-doc-fill-ink: #1A1614;
112
+
113
+ /* ---- Accent alias + border ---- */
114
+ --cs-color-accent-ochre: #F4BA17; /* focus rings */
115
+ --cs-color-border-default: #E7D9C6; /* warm hairline */
116
+
117
+ /* ---- Link convention (add here so editor-added links inherit brand) ---- */
118
+ --cs-color-link: #6E3B0E;
119
+ --cs-color-link-hover: #45210E;
120
+ }
121
+
122
+ a { color: var(--cs-color-link); text-underline-offset: 0.15em; }
123
+ a:hover { color: var(--cs-color-link-hover); }
124
+
125
+ /* ---- Theme layer: warm-dark (hue retained, never cold). Opt-in. ---- */
126
+ [data-theme="dark"] {
127
+ color-scheme: dark;
128
+ --cs-color-surface-page: #1a1108;
129
+ --cs-color-surface-panel: #221710;
130
+ --cs-color-surface-raised: #2b1e14;
131
+ --cs-color-text-primary: #f5ead9;
132
+ --cs-color-text-inverse: #1a1108;
133
+ --cs-color-text-accent: #FECD5D;
134
+ --cs-color-text-muted: #E9D6C2;
135
+ --cs-color-semantic-success: #4ADE80;
136
+ --cs-color-semantic-danger: #FC9895;
137
+ --cs-color-semantic-warning: #FBBF24;
138
+ --cs-color-semantic-info: #B5D4FD; /* paired small text: APCA78.6 on this fill */
139
+ --cs-color-semantic-success-fg: #1a1108;
140
+ --cs-color-semantic-danger-fg: #1a1108;
141
+ --cs-color-semantic-warning-fg: #1a1108;
142
+ --cs-color-semantic-info-fg: #1a1108;
143
+ /* Semantic text is separate from fills; target APCA75 on actual element surfaces. */
144
+ --cs-color-semantic-success-text: #68F798;
145
+ --cs-color-semantic-danger-text: #FFD2CF;
146
+ --cs-color-semantic-warning-text: #FFD887;
147
+ --cs-color-semantic-info-text: #C7DFFF;
148
+ --cs-color-border-default: #4a3a2c;
149
+ --cs-color-link: #FECD5D;
150
+ --cs-color-link-hover: #f5ead9;
151
+ }
152
+ @media (prefers-color-scheme: dark) {
153
+ [data-theme="system"] {
154
+ color-scheme: dark;
155
+ --cs-color-surface-page: #1a1108;
156
+ --cs-color-surface-panel: #221710;
157
+ --cs-color-surface-raised: #2b1e14;
158
+ --cs-color-text-primary: #f5ead9;
159
+ --cs-color-text-inverse: #1a1108;
160
+ --cs-color-text-accent: #FECD5D;
161
+ --cs-color-text-muted: #E9D6C2;
162
+ --cs-color-semantic-success: #4ADE80;
163
+ --cs-color-semantic-danger: #FC9895;
164
+ --cs-color-semantic-warning: #FBBF24;
165
+ --cs-color-semantic-info: #B5D4FD; /* paired small text: APCA78.6 on this fill */
166
+ --cs-color-semantic-success-fg: #1a1108;
167
+ --cs-color-semantic-danger-fg: #1a1108;
168
+ --cs-color-semantic-warning-fg: #1a1108;
169
+ --cs-color-semantic-info-fg: #1a1108;
170
+ /* Semantic text is separate from fills; target APCA75 on actual element surfaces. */
171
+ --cs-color-semantic-success-text: #68F798;
172
+ --cs-color-semantic-danger-text: #FFD2CF;
173
+ --cs-color-semantic-warning-text: #FFD887;
174
+ --cs-color-semantic-info-text: #C7DFFF;
175
+ --cs-color-border-default: #4a3a2c;
176
+ --cs-color-link: #FECD5D;
177
+ --cs-color-link-hover: #f5ead9;
178
+ }
179
+ }
180
+
181
+ /* ===== tokens/typography.css ===== */
182
+ /* CyberSkill — typography tokens.
183
+ * Family + line-height come straight from @cyberskill/tokens. The size ramp,
184
+ * weights, and icon sizes are a documented convention layered on top (the token
185
+ * source ships families + line-heights only); the scale mirrors real in-product
186
+ * usage (status hub: 11–24px chrome; hero display larger). Vietnamese-safe
187
+ * line-heights (body 1.5 / heading 1.35) leave room for stacked diacritics. */
188
+ :root {
189
+ /* Families.
190
+ * `display` is the opt-in headline face (Space Grotesk, self-hosted 300-700,
191
+ * Vietnamese subset included) used by cyberskill.world / Lumi. Nothing points
192
+ * at it by default: opt a scope in with `--cs-heading-family:
193
+ * var(--cs-font-family-display)` or the `.cs-display-face` utility. Space
194
+ * Grotesk has no 800, so extrabold headings clamp to 700 within that family
195
+ * (CSS does not hop to the next stack family for a missing weight); Be
196
+ * Vietnam Pro in the stack covers glyphs outside Space Grotesk's subsets. */
197
+ --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
198
+ --cs-font-family-display: 'Space Grotesk', 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
199
+ --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
200
+
201
+ /* Weights */
202
+ --cs-font-weight-regular: 400;
203
+ --cs-font-weight-medium: 500;
204
+ --cs-font-weight-semibold: 600;
205
+ --cs-font-weight-bold: 700;
206
+ --cs-font-weight-extrabold: 800;
207
+
208
+ /* Line-heights (Vietnamese-safe) */
209
+ --cs-font-lineHeight-body: var(--cs-font-line-height-body);
210
+ --cs-font-line-height-body: 1.5;
211
+ --cs-font-lineHeight-heading: var(--cs-font-line-height-heading);
212
+ --cs-font-line-height-heading: 1.35;
213
+ --cs-font-lineHeight-tight: var(--cs-font-line-height-tight);
214
+ --cs-font-line-height-tight: 1.15;
215
+
216
+ /* Size ramp (rem-based, 16px root) */
217
+ --cs-font-size-2xs: 0.6875rem; /* 11 — micro numerals only (documented exception) */
218
+ --cs-font-size-xs: 0.75rem; /* 12 — captions, chips */
219
+ --cs-font-size-sm: 0.875rem; /* 14 — secondary UI */
220
+ --cs-font-size-base: 1rem; /* 16 — body */
221
+ --cs-font-size-md: 1.125rem; /* 18 — lead body */
222
+ --cs-font-size-lg: 1.25rem; /* 20 — H4 / dialog title */
223
+ --cs-font-size-xl: 1.5rem; /* 24 — H3 */
224
+ --cs-font-size-2xl: 1.875rem; /* 30 — H2 */
225
+ --cs-font-size-3xl: 2.25rem; /* 36 — H1 */
226
+ --cs-font-size-4xl: 3rem; /* 48 — display */
227
+ --cs-font-size-5xl: 3.75rem; /* 60 — hero display */
228
+
229
+ /* Semantic role aliases — write intent, not magic numbers.
230
+ * Pair each size with the matching line-height + weight (see base/typography.css
231
+ * for the .cs-display/.cs-h1/… utilities that bundle all three). */
232
+ --cs-text-display: var(--cs-font-size-5xl); /* hero display */
233
+ --cs-text-h1: var(--cs-font-size-3xl);
234
+ --cs-text-h2: var(--cs-font-size-2xl);
235
+ --cs-text-h3: var(--cs-font-size-xl);
236
+ --cs-text-h4: var(--cs-font-size-lg);
237
+ --cs-text-body-lg: var(--cs-font-size-md); /* lead paragraphs */
238
+ --cs-text-body: var(--cs-font-size-base);
239
+ --cs-text-secondary: var(--cs-font-size-sm);
240
+ --cs-text-micro: var(--cs-font-size-2xs);
241
+ --cs-text-caption: var(--cs-font-size-xs);
242
+ --cs-text-eyebrow: var(--cs-font-size-xs); /* uppercase, tracked */
243
+
244
+ /* Tracking */
245
+ --cs-letter-spacing-tight: -0.01em;
246
+ --cs-letter-spacing-normal: 0;
247
+ --cs-letter-spacing-caps: 0.08em; /* uppercase eyebrows / table headers */
248
+
249
+ /* Heading treatment — semantic heading family, weight, and tracking roles
250
+ * consumed by .cs-display and .cs-h1…h4 in base/typography.css. */
251
+ --cs-heading-family: var(--cs-font-family-ui);
252
+ --cs-heading-weight-strong: var(--cs-font-weight-extrabold); /* display · h1 */
253
+ --cs-heading-weight: var(--cs-font-weight-bold); /* h2 · h3 */
254
+ --cs-heading-tracking: var(--cs-letter-spacing-tight);
255
+
256
+ /* Icon sizes (line-icon set) */
257
+ --cs-icon-sm: 16px;
258
+ --cs-icon-md: 20px;
259
+ --cs-icon-lg: 24px;
260
+ }
261
+
262
+ /* ===== tokens/spacing.css ===== */
263
+ /* CyberSkill — spacing, radius, sizing tokens.
264
+ * 4px base grid. Section padding floor 64px, ceiling 96px. */
265
+ :root {
266
+ --cs-space-0: 0px;
267
+ --cs-space-1: 4px;
268
+ --cs-space-2: 8px;
269
+ --cs-space-3: 12px;
270
+ --cs-space-4: 16px;
271
+ --cs-space-5: 20px;
272
+ --cs-space-6: 24px;
273
+ --cs-space-8: 32px;
274
+ --cs-space-10: 40px;
275
+ --cs-space-12: 48px;
276
+ --cs-space-16: 64px; /* section padding floor */
277
+ --cs-space-20: 80px;
278
+ --cs-space-24: 96px; /* section padding ceiling */
279
+
280
+ /* Radius */
281
+ --cs-radius-sm: 4px;
282
+ --cs-radius-md: 8px; /* default */
283
+ --cs-radius-lg: 14px; /* cards/panels in product surfaces */
284
+ --cs-radius-full: 999px;
285
+
286
+ /* Breakpoints (desktop-first). `phone` is the justified 320-reflow stop (UX-003). */
287
+ --cs-breakpoint-xs: 0px;
288
+ --cs-breakpoint-phone: 360px;
289
+ --cs-breakpoint-sm: 640px;
290
+ --cs-breakpoint-md: 768px;
291
+ --cs-breakpoint-lg: 1024px;
292
+ --cs-breakpoint-xl: 1280px;
293
+ --cs-breakpoint-2xl: 1536px;
294
+
295
+ /* Layout */
296
+ --cs-container-max: 1320px;
297
+ /* Readable prose measure (UX-024) — ~65–75ch for long-form kit/tool copy */
298
+ --cs-prose-measure: 45rem;
299
+ /* Focus-not-obscured scroll offset (WCAG 2.2 AA) — sticky nav / bottom bars */
300
+ --cs-scroll-padding-block-start: var(--cs-space-4);
301
+ --cs-scroll-padding-block-end: var(--cs-space-4);
302
+ }
303
+
304
+ /* ===== tokens/elevation.css ===== */
305
+ /* CyberSkill — elevation: depth (z), Liquid Glass material scalars, shadows.
306
+ * Liquid Glass (DESIGN.md Part 21) is the default surface treatment — five
307
+ * materials (Whisper / Light / Standard / Heavy / Solid). Scalars live here;
308
+ * the material composition + classes live in base/glass.css.
309
+ * Shadow values are warm (umber-tinted), taken from the shipped surfaces. */
310
+ :root {
311
+ /* ---- Depth (z-index) ----
312
+ * Order (low → high): bg < section < card < nav < dropdown < overlay < modal < toast.
313
+ * Toasts intentionally stack above modals so save-confirmation feedback stays visible
314
+ * while a dialog is open (UX-009). Dropdown sits above sticky nav; overlay (scrims
315
+ * that are not modal-owned) sits between dropdown and modal. */
316
+ --cs-depth-bg: 0; /* @kind other */ /* page background / hero washes */
317
+ --cs-depth-section: 5; /* @kind other */ /* major sections (matte, no glass) */
318
+ --cs-depth-card: 10; /* @kind other */ /* cards/panels (Standard Glass) */
319
+ --cs-depth-nav: 50; /* @kind other */ /* sticky nav (Light Glass) */
320
+ --cs-depth-dropdown: 60; /* @kind other */ /* menus, combobox, datepicker pops */
321
+ --cs-depth-overlay: 80; /* @kind other */ /* non-modal scrims / light overlays */
322
+ --cs-depth-modal: 100; /* @kind other */ /* modals, command palette (Heavy Glass) */
323
+ --cs-depth-toast: 200; /* @kind other */ /* toasts above modals (Heavy Glass) */
324
+
325
+ /* ---- Glass material scalars (blur / saturate / surface opacity) ---- */
326
+ --cs-glass-whisper-blur: 8px; --cs-glass-whisper-saturate: 110%; --cs-glass-whisper-opacity: 60%;
327
+ --cs-glass-light-blur: 12px; --cs-glass-light-saturate: 130%; --cs-glass-light-opacity: 70%;
328
+ --cs-glass-standard-blur: 16px; --cs-glass-standard-saturate: 150%; --cs-glass-standard-opacity: 80%;
329
+ --cs-glass-heavy-blur: 24px; --cs-glass-heavy-saturate: 180%; --cs-glass-heavy-opacity: 90%;
330
+
331
+ /* ---- Shadow scale (warm; umber-tinted) ---- */
332
+ --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06);
333
+ --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); /* standard glass card */
334
+ --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18); /* popover / AI panel */
335
+ --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18); /* heavy glass */
336
+ --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26); /* dialog */
337
+ }
338
+
339
+ /* Dark theme: warm-umber shadows vanish on dark surfaces, so switch to deeper
340
+ * near-black shadows that actually read as elevation. Opt-in with the light ones. */
341
+ [data-theme="dark"] {
342
+ --cs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
343
+ --cs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42);
344
+ --cs-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50);
345
+ --cs-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
346
+ --cs-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
347
+ }
348
+ @media (prefers-color-scheme: dark) {
349
+ [data-theme="system"] {
350
+ --cs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
351
+ --cs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42);
352
+ --cs-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50);
353
+ --cs-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
354
+ --cs-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
355
+ }
356
+ }
357
+
358
+ /* ===== tokens/motion.css ===== */
359
+ /* CyberSkill — motion tokens (convention).
360
+ * The system favours calm, purposeful motion and always honours
361
+ * prefers-reduced-motion. Durations are short; easing is a soft
362
+ * decelerate. These are conventions layered on the doctrine, not raw
363
+ * source tokens — keep motion subtle (fades, small translate/scale). */
364
+ :root {
365
+ --cs-duration-instant: 80ms; /* @kind other */
366
+ --cs-duration-fast: 120ms; /* @kind other */
367
+ --cs-duration-base: 200ms; /* @kind other */
368
+ --cs-duration-slow: 320ms; /* @kind other */
369
+
370
+ --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ /* decelerate — most transitions */
371
+ --cs-ease-entrance: cubic-bezier(0, 0, 0, 1); /* @kind other */ /* enter */
372
+ --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ /* exit */
373
+ --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
374
+ }
375
+
376
+ @media (prefers-reduced-motion: reduce) {
377
+ :root {
378
+ --cs-duration-instant: 0ms; /* @kind other */
379
+ --cs-duration-fast: 0ms; /* @kind other */
380
+ --cs-duration-base: 0ms; /* @kind other */
381
+ --cs-duration-slow: 0ms; /* @kind other */
382
+ }
383
+ }
384
+
385
+ /* ===== tokens/component-tokens.css ===== */
386
+ /* CyberSkill — component-level tokens (Button, TextField). File: component-tokens.css.
387
+ * Exact values from @cyberskill/tokens. Buttons carry a full size ramp with a
388
+ * 44px comfortable default touch target; TextField matches. */
389
+ :root {
390
+ --cs-focus-ring: 3px; /* @kind other */ /* signature focus outline width */
391
+ /* Button */
392
+ --cs-component-button-primary-bg: #45210E;
393
+ --cs-component-button-primary-fg: #FFFFFF;
394
+ --cs-component-button-gap: 8px;
395
+ --cs-component-button-radius: 8px;
396
+ --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
397
+ --cs-component-button-xs-padding-y: 4px;
398
+ --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
399
+ --cs-component-button-xs-padding-x: 10px;
400
+ --cs-component-button-xs-minHeight: var(--cs-component-button-xs-min-height);
401
+ --cs-component-button-xs-min-height: 28px;
402
+ --cs-component-button-xs-minWidth: var(--cs-component-button-xs-min-width);
403
+ --cs-component-button-xs-min-width: 28px;
404
+ --cs-component-button-xs-minHeight-coarse: var(--cs-component-button-xs-min-height-coarse);
405
+ --cs-component-button-xs-min-height-coarse: 44px;
406
+ --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
407
+ --cs-component-button-sm-padding-y: 8px;
408
+ --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
409
+ --cs-component-button-sm-padding-x: 14px;
410
+ --cs-component-button-sm-minHeight: var(--cs-component-button-sm-min-height);
411
+ --cs-component-button-sm-min-height: 36px;
412
+ --cs-component-button-sm-minHeight-coarse: var(--cs-component-button-sm-min-height-coarse);
413
+ --cs-component-button-sm-min-height-coarse: 44px;
414
+ --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
415
+ --cs-component-button-md-padding-y: 12px;
416
+ --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
417
+ --cs-component-button-md-padding-x: 20px;
418
+ --cs-component-button-md-minHeight: var(--cs-component-button-md-min-height);
419
+ --cs-component-button-md-min-height: 44px;
420
+ --cs-component-button-md-minHeight-coarse: var(--cs-component-button-md-min-height-coarse);
421
+ --cs-component-button-md-min-height-coarse: 44px;
422
+ --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
423
+ --cs-component-button-lg-padding-y: 16px;
424
+ --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
425
+ --cs-component-button-lg-padding-x: 28px;
426
+ --cs-component-button-lg-minHeight: var(--cs-component-button-lg-min-height);
427
+ --cs-component-button-lg-min-height: 52px;
428
+
429
+ /* TextField */
430
+ --cs-component-textfield-border-default: #BFA58F;
431
+ --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
432
+ --cs-component-textfield-padding-y: 10px;
433
+ --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
434
+ --cs-component-textfield-padding-x: 12px;
435
+ --cs-component-textfield-minHeight: var(--cs-component-textfield-min-height);
436
+ --cs-component-textfield-min-height: 44px;
437
+ }
438
+
439
+ /* Dark theme: CTA becomes Ochre-on-dark; field border warms up. */
440
+ [data-theme="dark"] {
441
+ --cs-component-button-primary-bg: #f4ba17;
442
+ --cs-component-button-primary-fg: #1a1108;
443
+ --cs-component-textfield-border-default: #5a4636;
444
+ }
445
+ @media (prefers-color-scheme: dark) {
446
+ [data-theme="system"] {
447
+ --cs-component-button-primary-bg: #f4ba17;
448
+ --cs-component-button-primary-fg: #1a1108;
449
+ --cs-component-textfield-border-default: #5a4636;
450
+ }
451
+ }
452
+
453
+ /* ===== tokens/elements.css ===== */
454
+ /* CyberSkill — Ngũ Hành elemental identity (the L1 product layer).
455
+ * GENERATED from tokens/element-seeds.json by scripts/generate-element-packs.mjs
456
+ * DO NOT HAND-EDIT pack values — change seeds and re-run the generator.
457
+ *
458
+ * Five elements: Kim (metal) · Mộc (wood) · Thủy (water) · Hỏa (fire) · Thổ (earth).
459
+ * Soft / middle / deep intensity ladder (middle = default). Thổ middle pins logo ochre.
460
+ *
461
+ * Contract — every element/variant sets exactly these 10 role tokens:
462
+ * --cs-accent · --cs-accent-strong · --cs-accent-bright · --cs-accent-on
463
+ * --cs-accent-on-strong · --cs-accent-tint · --cs-accent-ink
464
+ * --cs-accent-glow · --cs-accent-grad-a/b
465
+ * TEXT RULE: body accent text uses --cs-color-text-accent; strong fills pair with on-strong.
466
+ * The ten accent roles retain their palette duties; never assume -bright supports small text.
467
+ * Text on -strong uses --cs-accent-on-strong (WCAG AA ≥4.5:1 light and dark).
468
+ * Focus indicator (text-primary contour + ochre halo) and semantic status tokens NEVER remap.
469
+ * Generative cycle (Tương sinh) only for grad-b: Mộc→Hỏa→Thổ→Kim→Thủy→Mộc. */
470
+ :root {
471
+ --cs-accent: #F4BA17;
472
+ --cs-accent-strong: #916D11;
473
+ --cs-accent-bright: #F4BA17;
474
+ --cs-accent-on: #45210E;
475
+ --cs-accent-on-strong: #FFFFFF;
476
+ --cs-accent-tint: #FBF4E9;
477
+ --cs-accent-ink: #45210E;
478
+ --cs-accent-glow: rgba(244, 186, 23, 0.48);
479
+ --cs-accent-grad-a: #F4BA17;
480
+ --cs-accent-grad-b: #C4B78F;
481
+ }
482
+
483
+ /* ---- Aurora washes ---- */
484
+ .cs-aurora-wash { background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; }
485
+ [data-cs-element="hoa"] .cs-aurora-wash { background-image: url("../assets/aurora-hoa.webp"); }
486
+ [data-cs-element="thuy"] .cs-aurora-wash { background-image: url("../assets/aurora-thuy.webp"); }
487
+ [data-cs-element="moc"] .cs-aurora-wash { background-image: url("../assets/aurora-moc.webp"); }
488
+ [data-cs-element="kim"] .cs-aurora-wash { background-image: url("../assets/aurora-kim.webp"); }
489
+
490
+ /* ---- Generated scope resolver ----
491
+ * Private channels carry both palettes independently of the selected theme.
492
+ * Empty/initial custom-property switches select one channel without JS or a
493
+ * newer color-function requirement. Rebinding at each scope avoids stale
494
+ * inherited public values. Unmarked descendants simply inherit.
495
+ * The selector list matches the maximum existing element/variant specificity;
496
+ * it supersedes legacy contextual declarations without !important.
497
+ */
498
+ :root {
499
+ --_cs-light-color-brand-umber: #45210E;
500
+ --_cs-dark-color-brand-umber: #45210E;
501
+ --_cs-light-color-brand-ochre: #F4BA17;
502
+ --_cs-dark-color-brand-ochre: #F4BA17;
503
+ --_cs-light-color-surface-page: #FFFDF8;
504
+ --_cs-dark-color-surface-page: #1a1108;
505
+ --_cs-light-color-surface-panel: #FFFFFF;
506
+ --_cs-dark-color-surface-panel: #221710;
507
+ --_cs-light-color-surface-raised: #FBF4E9;
508
+ --_cs-dark-color-surface-raised: #2b1e14;
509
+ --_cs-light-color-text-primary: #45210E;
510
+ --_cs-dark-color-text-primary: #f5ead9;
511
+ --_cs-light-color-text-inverse: #FFFFFF;
512
+ --_cs-dark-color-text-inverse: #1a1108;
513
+ --_cs-light-color-text-accent: #6E3B0E;
514
+ --_cs-dark-color-text-accent: #FECD5D;
515
+ --_cs-light-color-text-muted: #3F2D21;
516
+ --_cs-dark-color-text-muted: #E9D6C2;
517
+ --_cs-light-color-semantic-success: #166534;
518
+ --_cs-dark-color-semantic-success: #4ADE80;
519
+ --_cs-light-color-semantic-danger: #B42318;
520
+ --_cs-dark-color-semantic-danger: #FC9895;
521
+ --_cs-light-color-semantic-warning: #92400E;
522
+ --_cs-dark-color-semantic-warning: #FBBF24;
523
+ --_cs-light-color-semantic-info: #1D4ED8;
524
+ --_cs-dark-color-semantic-info: #B5D4FD;
525
+ --_cs-light-color-semantic-success-fg: #FFFFFF;
526
+ --_cs-dark-color-semantic-success-fg: #1a1108;
527
+ --_cs-light-color-semantic-danger-fg: #FFFFFF;
528
+ --_cs-dark-color-semantic-danger-fg: #1a1108;
529
+ --_cs-light-color-semantic-warning-fg: #FFFFFF;
530
+ --_cs-dark-color-semantic-warning-fg: #1a1108;
531
+ --_cs-light-color-semantic-info-fg: #FFFFFF;
532
+ --_cs-dark-color-semantic-info-fg: #1a1108;
533
+ --_cs-light-color-semantic-success-text: #042D13;
534
+ --_cs-dark-color-semantic-success-text: #68F798;
535
+ --_cs-light-color-semantic-danger-text: #4B0502;
536
+ --_cs-dark-color-semantic-danger-text: #FFD2CF;
537
+ --_cs-light-color-semantic-warning-text: #441801;
538
+ --_cs-dark-color-semantic-warning-text: #FFD887;
539
+ --_cs-light-color-semantic-info-text: #000A75;
540
+ --_cs-dark-color-semantic-info-text: #C7DFFF;
541
+ --_cs-light-doc-ink: #1A1614;
542
+ --_cs-dark-doc-ink: #1A1614;
543
+ --_cs-light-doc-slate: #26323A;
544
+ --_cs-dark-doc-slate: #26323A;
545
+ --_cs-light-doc-fill: #FDE68A;
546
+ --_cs-dark-doc-fill: #FDE68A;
547
+ --_cs-light-doc-fill-ink: #1A1614;
548
+ --_cs-dark-doc-fill-ink: #1A1614;
549
+ --_cs-light-color-accent-ochre: #F4BA17;
550
+ --_cs-dark-color-accent-ochre: #F4BA17;
551
+ --_cs-light-color-border-default: #E7D9C6;
552
+ --_cs-dark-color-border-default: #4a3a2c;
553
+ --_cs-light-color-link: #6E3B0E;
554
+ --_cs-dark-color-link: #FECD5D;
555
+ --_cs-light-color-link-hover: #45210E;
556
+ --_cs-dark-color-link-hover: #f5ead9;
557
+ --_cs-light-component-button-primary-bg: #45210E;
558
+ --_cs-dark-component-button-primary-bg: #f4ba17;
559
+ --_cs-light-component-button-primary-fg: #FFFFFF;
560
+ --_cs-dark-component-button-primary-fg: #1a1108;
561
+ --_cs-light-component-textfield-border-default: #BFA58F;
562
+ --_cs-dark-component-textfield-border-default: #5a4636;
563
+ --_cs-light-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06);
564
+ --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
565
+ --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06);
566
+ --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42);
567
+ --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18);
568
+ --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50);
569
+ --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18);
570
+ --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
571
+ --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26);
572
+ --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
573
+ --_cs-light-accent: #F4BA17;
574
+ --_cs-dark-accent: #F4BA17;
575
+ --_cs-light-accent-strong: #916D11;
576
+ --_cs-dark-accent-strong: #916D11;
577
+ --_cs-light-accent-bright: #F4BA17;
578
+ --_cs-dark-accent-bright: #F4BA17;
579
+ --_cs-light-accent-on: #45210E;
580
+ --_cs-dark-accent-on: #45210E;
581
+ --_cs-light-accent-on-strong: #FFFFFF;
582
+ --_cs-dark-accent-on-strong: #FFFFFF;
583
+ --_cs-light-accent-tint: #FBF4E9;
584
+ --_cs-dark-accent-tint: #FBF4E9;
585
+ --_cs-light-accent-ink: #45210E;
586
+ --_cs-dark-accent-ink: #45210E;
587
+ --_cs-light-accent-glow: rgba(244, 186, 23, 0.48);
588
+ --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48);
589
+ --_cs-light-accent-grad-a: #F4BA17;
590
+ --_cs-dark-accent-grad-a: #F4BA17;
591
+ --_cs-light-accent-grad-b: #C4B78F;
592
+ --_cs-dark-accent-grad-b: #C4B78F;
593
+ --_cs-standard: initial;
594
+ --_cs-high: ;
595
+ }
596
+
597
+ :root, [data-theme="light"], [data-theme="system"] { --_cs-light: initial; --_cs-dark: ; }
598
+ [data-theme="dark"] { --_cs-light: ; --_cs-dark: initial; }
599
+ @media (prefers-color-scheme: dark) {
600
+ [data-theme="system"] { --_cs-light: ; --_cs-dark: initial; }
601
+ }
602
+ @media (prefers-contrast: more) {
603
+ :root:where(:not([data-cs-contrast])) { --_cs-standard: ; --_cs-high: initial; }
604
+ }
605
+ [data-cs-contrast="standard"] { --_cs-standard: initial; --_cs-high: ; }
606
+ [data-cs-contrast="high"] { --_cs-standard: ; --_cs-high: initial; }
607
+
608
+ [data-cs-element="tho"][data-cs-variant="sand"] {
609
+ --_cs-light-accent: #F9E3A7;
610
+ --_cs-dark-accent: #E6CD88;
611
+ --_cs-light-accent-strong: #856A03;
612
+ --_cs-dark-accent-strong: #80671A;
613
+ --_cs-light-accent-bright: #FDEAB7;
614
+ --_cs-dark-accent-bright: #F9E5AE;
615
+ --_cs-light-accent-on: #271E06;
616
+ --_cs-dark-accent-on: #f5ead9;
617
+ --_cs-light-accent-on-strong: #FFFFFF;
618
+ --_cs-dark-accent-on-strong: #FFFFFF;
619
+ --_cs-light-accent-tint: #FEF8E7;
620
+ --_cs-dark-accent-tint: #342C15;
621
+ --_cs-light-accent-ink: #292108;
622
+ --_cs-dark-accent-ink: #F9E5AE;
623
+ --_cs-light-accent-glow: rgba(249, 227, 167, 0.48);
624
+ --_cs-dark-accent-glow: rgba(249, 227, 167, 0.48);
625
+ --_cs-light-accent-grad-a: #F9E3A7;
626
+ --_cs-dark-accent-grad-a: #F9E3A7;
627
+ --_cs-light-accent-grad-b: #C4B78F;
628
+ --_cs-dark-accent-grad-b: #C4B78F;
629
+ --_cs-light-color-text-accent: #695300;
630
+ --_cs-dark-color-text-accent: #F9E5AE;
631
+ --_cs-light-color-link: #695300;
632
+ --_cs-dark-color-link: #F9E5AE;
633
+ --_cs-light-color-link-hover: #45210E;
634
+ --_cs-dark-color-link-hover: #f5ead9;
635
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
636
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
637
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
638
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
639
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
640
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
641
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
642
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
643
+ --_cs-light-component-button-primary-bg: #856A03;
644
+ --_cs-dark-component-button-primary-bg: #80671A;
645
+ --_cs-light-component-button-primary-fg: #FFFFFF;
646
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
647
+ }
648
+
649
+ [data-cs-element="tho"] {
650
+ --_cs-light-accent: #F4BA17;
651
+ --_cs-dark-accent: #E9B321;
652
+ --_cs-light-accent-strong: #916D11;
653
+ --_cs-dark-accent-strong: #6E5205;
654
+ --_cs-light-accent-bright: #F4BA17;
655
+ --_cs-dark-accent-bright: #FDD378;
656
+ --_cs-light-accent-on: #45210E;
657
+ --_cs-dark-accent-on: #f5ead9;
658
+ --_cs-light-accent-on-strong: #FFFFFF;
659
+ --_cs-dark-accent-on-strong: #FFFFFF;
660
+ --_cs-light-accent-tint: #FBF4E9;
661
+ --_cs-dark-accent-tint: #2B1E00;
662
+ --_cs-light-accent-ink: #45210E;
663
+ --_cs-dark-accent-ink: #FDD378;
664
+ --_cs-light-accent-glow: rgba(244, 186, 23, 0.48);
665
+ --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48);
666
+ --_cs-light-accent-grad-a: #F4BA17;
667
+ --_cs-dark-accent-grad-a: #F4BA17;
668
+ --_cs-light-accent-grad-b: #C4B78F;
669
+ --_cs-dark-accent-grad-b: #C4B78F;
670
+ --_cs-light-color-text-accent: #6E3B0E;
671
+ --_cs-dark-color-text-accent: #FFD57A;
672
+ --_cs-light-color-link: #644A05;
673
+ --_cs-dark-color-link: #FFD57A;
674
+ --_cs-light-color-link-hover: #45210E;
675
+ --_cs-dark-color-link-hover: #f5ead9;
676
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
677
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
678
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
679
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
680
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
681
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
682
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
683
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
684
+ --_cs-light-component-button-primary-bg: #45210E;
685
+ --_cs-dark-component-button-primary-bg: #6E5205;
686
+ --_cs-light-component-button-primary-fg: #FFFFFF;
687
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
688
+ }
689
+
690
+ [data-cs-element="tho"][data-cs-variant="clay"] {
691
+ --_cs-light-accent: #723E06;
692
+ --_cs-dark-accent: #E0A97C;
693
+ --_cs-light-accent-strong: #5A3004;
694
+ --_cs-dark-accent-strong: #5C3001;
695
+ --_cs-light-accent-bright: #F2C5A3;
696
+ --_cs-dark-accent-bright: #F8C7A1;
697
+ --_cs-light-accent-on: #080200;
698
+ --_cs-dark-accent-on: #f5ead9;
699
+ --_cs-light-accent-on-strong: #FFFFFF;
700
+ --_cs-dark-accent-on-strong: #FFFFFF;
701
+ --_cs-light-accent-tint: #FCEEE3;
702
+ --_cs-dark-accent-tint: #220F01;
703
+ --_cs-light-accent-ink: #321B07;
704
+ --_cs-dark-accent-ink: #FBCAA4;
705
+ --_cs-light-accent-glow: rgba(114, 62, 6, 0.48);
706
+ --_cs-dark-accent-glow: rgba(114, 62, 6, 0.48);
707
+ --_cs-light-accent-grad-a: #723E06;
708
+ --_cs-dark-accent-grad-a: #723E06;
709
+ --_cs-light-accent-grad-b: #C4B78F;
710
+ --_cs-dark-accent-grad-b: #C4B78F;
711
+ --_cs-light-color-text-accent: #462402;
712
+ --_cs-dark-color-text-accent: #FFD2AF;
713
+ --_cs-light-color-link: #462402;
714
+ --_cs-dark-color-link: #FFD2AF;
715
+ --_cs-light-color-link-hover: #45210E;
716
+ --_cs-dark-color-link-hover: #f5ead9;
717
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
718
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
719
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
720
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
721
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
722
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
723
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
724
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
725
+ --_cs-light-component-button-primary-bg: #5A3004;
726
+ --_cs-dark-component-button-primary-bg: #5C3001;
727
+ --_cs-light-component-button-primary-fg: #FFFFFF;
728
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
729
+ }
730
+
731
+ [data-cs-element="hoa"][data-cs-variant="plasma"] {
732
+ --_cs-light-accent: #FEDBDC;
733
+ --_cs-dark-accent: #EBC4C5;
734
+ --_cs-light-accent-strong: #896163;
735
+ --_cs-dark-accent-strong: #836061;
736
+ --_cs-light-accent-bright: #FFE3E4;
737
+ --_cs-dark-accent-bright: #FDDDDE;
738
+ --_cs-light-accent-on: #281B1C;
739
+ --_cs-dark-accent-on: #f5ead9;
740
+ --_cs-light-accent-on-strong: #FFFFFF;
741
+ --_cs-dark-accent-on-strong: #FFFFFF;
742
+ --_cs-light-accent-tint: #FFF5F5;
743
+ --_cs-dark-accent-tint: #352929;
744
+ --_cs-light-accent-ink: #2B1E1E;
745
+ --_cs-dark-accent-ink: #FDDDDE;
746
+ --_cs-light-accent-glow: rgba(254, 219, 220, 0.48);
747
+ --_cs-dark-accent-glow: rgba(254, 219, 220, 0.48);
748
+ --_cs-light-accent-grad-a: #FEDBDC;
749
+ --_cs-dark-accent-grad-a: #FEDBDC;
750
+ --_cs-light-accent-grad-b: #F4BA17;
751
+ --_cs-dark-accent-grad-b: #F4BA17;
752
+ --_cs-light-color-text-accent: #714B4D;
753
+ --_cs-dark-color-text-accent: #FDDDDE;
754
+ --_cs-light-color-link: #714B4D;
755
+ --_cs-dark-color-link: #FDDDDE;
756
+ --_cs-light-color-link-hover: #45210E;
757
+ --_cs-dark-color-link-hover: #f5ead9;
758
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
759
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
760
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
761
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
762
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
763
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
764
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
765
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
766
+ --_cs-light-component-button-primary-bg: #896163;
767
+ --_cs-dark-component-button-primary-bg: #836061;
768
+ --_cs-light-component-button-primary-fg: #FFFFFF;
769
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
770
+ }
771
+
772
+ [data-cs-element="hoa"] {
773
+ --_cs-light-accent: #FC9C69;
774
+ --_cs-dark-accent: #FEA272;
775
+ --_cs-light-accent-strong: #96440B;
776
+ --_cs-dark-accent-strong: #883E0D;
777
+ --_cs-light-accent-bright: #FFD3BD;
778
+ --_cs-dark-accent-bright: #FECDB4;
779
+ --_cs-light-accent-on: #361402;
780
+ --_cs-dark-accent-on: #f5ead9;
781
+ --_cs-light-accent-on-strong: #FFFFFF;
782
+ --_cs-dark-accent-on-strong: #FFFFFF;
783
+ --_cs-light-accent-tint: #FFF1EA;
784
+ --_cs-dark-accent-tint: #351706;
785
+ --_cs-light-accent-ink: #3A1501;
786
+ --_cs-dark-accent-ink: #FECDB4;
787
+ --_cs-light-accent-glow: rgba(252, 156, 105, 0.48);
788
+ --_cs-dark-accent-glow: rgba(252, 156, 105, 0.48);
789
+ --_cs-light-accent-grad-a: #FC9C69;
790
+ --_cs-dark-accent-grad-a: #FC9C69;
791
+ --_cs-light-accent-grad-b: #F4BA17;
792
+ --_cs-dark-accent-grad-b: #F4BA17;
793
+ --_cs-light-color-text-accent: #793609;
794
+ --_cs-dark-color-text-accent: #FFD1BA;
795
+ --_cs-light-color-link: #793609;
796
+ --_cs-dark-color-link: #FFD1BA;
797
+ --_cs-light-color-link-hover: #45210E;
798
+ --_cs-dark-color-link-hover: #f5ead9;
799
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
800
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
801
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
802
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
803
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
804
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
805
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
806
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
807
+ --_cs-light-component-button-primary-bg: #96440B;
808
+ --_cs-dark-component-button-primary-bg: #883E0D;
809
+ --_cs-light-component-button-primary-fg: #FFFFFF;
810
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
811
+ }
812
+
813
+ [data-cs-element="hoa"][data-cs-variant="lava"] {
814
+ --_cs-light-accent: #93050F;
815
+ --_cs-dark-accent: #FC9A8F;
816
+ --_cs-light-accent-strong: #760008;
817
+ --_cs-dark-accent-strong: #6D1D19;
818
+ --_cs-light-accent-bright: #FFBCB4;
819
+ --_cs-dark-accent-bright: #FFC1B9;
820
+ --_cs-light-accent-on: #0D0000;
821
+ --_cs-dark-accent-on: #f5ead9;
822
+ --_cs-light-accent-on-strong: #FFFFFF;
823
+ --_cs-dark-accent-on-strong: #FFFFFF;
824
+ --_cs-light-accent-tint: #FFEBE9;
825
+ --_cs-dark-accent-tint: #2A0806;
826
+ --_cs-light-accent-ink: #400C0B;
827
+ --_cs-dark-accent-ink: #FFC6BF;
828
+ --_cs-light-accent-glow: rgba(147, 5, 15, 0.48);
829
+ --_cs-dark-accent-glow: rgba(147, 5, 15, 0.48);
830
+ --_cs-light-accent-grad-a: #93050F;
831
+ --_cs-dark-accent-grad-a: #93050F;
832
+ --_cs-light-accent-grad-b: #F4BA17;
833
+ --_cs-dark-accent-grad-b: #F4BA17;
834
+ --_cs-light-color-text-accent: #550306;
835
+ --_cs-dark-color-text-accent: #FDD0CA;
836
+ --_cs-light-color-link: #550306;
837
+ --_cs-dark-color-link: #FDD0CA;
838
+ --_cs-light-color-link-hover: #45210E;
839
+ --_cs-dark-color-link-hover: #f5ead9;
840
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
841
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
842
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
843
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
844
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
845
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
846
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
847
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
848
+ --_cs-light-component-button-primary-bg: #760008;
849
+ --_cs-dark-component-button-primary-bg: #6D1D19;
850
+ --_cs-light-component-button-primary-fg: #FFFFFF;
851
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
852
+ }
853
+
854
+ [data-cs-element="thuy"][data-cs-variant="mist"] {
855
+ --_cs-light-accent: #9DF7F5;
856
+ --_cs-dark-accent: #79E4E2;
857
+ --_cs-light-accent-strong: #037D7D;
858
+ --_cs-dark-accent-strong: #077A79;
859
+ --_cs-light-accent-bright: #B1FBF9;
860
+ --_cs-dark-accent-bright: #A6F8F6;
861
+ --_cs-light-accent-on: #012525;
862
+ --_cs-dark-accent-on: #f5ead9;
863
+ --_cs-light-accent-on-strong: #FFFFFF;
864
+ --_cs-dark-accent-on-strong: #FFFFFF;
865
+ --_cs-light-accent-tint: #E6FDFC;
866
+ --_cs-dark-accent-tint: #0D3333;
867
+ --_cs-light-accent-ink: #032727;
868
+ --_cs-dark-accent-ink: #A6F8F6;
869
+ --_cs-light-accent-glow: rgba(157, 247, 245, 0.48);
870
+ --_cs-dark-accent-glow: rgba(157, 247, 245, 0.48);
871
+ --_cs-light-accent-grad-a: #9DF7F5;
872
+ --_cs-dark-accent-grad-a: #9DF7F5;
873
+ --_cs-light-accent-grad-b: #82CF66;
874
+ --_cs-dark-accent-grad-b: #82CF66;
875
+ --_cs-light-color-text-accent: #116060;
876
+ --_cs-dark-color-text-accent: #A6F8F6;
877
+ --_cs-light-color-link: #116060;
878
+ --_cs-dark-color-link: #A6F8F6;
879
+ --_cs-light-color-link-hover: #45210E;
880
+ --_cs-dark-color-link-hover: #f5ead9;
881
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
882
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
883
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
884
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
885
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
886
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
887
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
888
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
889
+ --_cs-light-component-button-primary-bg: #037D7D;
890
+ --_cs-dark-component-button-primary-bg: #077A79;
891
+ --_cs-light-component-button-primary-fg: #FFFFFF;
892
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
893
+ }
894
+
895
+ [data-cs-element="thuy"] {
896
+ --_cs-light-accent: #00CEE4;
897
+ --_cs-dark-accent: #32D2E7;
898
+ --_cs-light-accent-strong: #166B76;
899
+ --_cs-dark-accent-strong: #04626D;
900
+ --_cs-light-accent-bright: #94EFFD;
901
+ --_cs-dark-accent-bright: #79EDFF;
902
+ --_cs-light-accent-on: #012429;
903
+ --_cs-dark-accent-on: #f5ead9;
904
+ --_cs-light-accent-on-strong: #FFFFFF;
905
+ --_cs-dark-accent-on-strong: #FFFFFF;
906
+ --_cs-light-accent-tint: #DFFBFF;
907
+ --_cs-dark-accent-tint: #03252A;
908
+ --_cs-light-accent-ink: #03272C;
909
+ --_cs-dark-accent-ink: #79EDFF;
910
+ --_cs-light-accent-glow: rgba(0, 206, 228, 0.48);
911
+ --_cs-dark-accent-glow: rgba(0, 206, 228, 0.48);
912
+ --_cs-light-accent-grad-a: #00CEE4;
913
+ --_cs-dark-accent-grad-a: #00CEE4;
914
+ --_cs-light-accent-grad-b: #82CF66;
915
+ --_cs-dark-accent-grad-b: #82CF66;
916
+ --_cs-light-color-text-accent: #0D535C;
917
+ --_cs-dark-color-text-accent: #79EDFF;
918
+ --_cs-light-color-link: #0D535C;
919
+ --_cs-dark-color-link: #79EDFF;
920
+ --_cs-light-color-link-hover: #45210E;
921
+ --_cs-dark-color-link-hover: #f5ead9;
922
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
923
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
924
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
925
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
926
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
927
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
928
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
929
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
930
+ --_cs-light-component-button-primary-bg: #166B76;
931
+ --_cs-dark-component-button-primary-bg: #04626D;
932
+ --_cs-light-component-button-primary-fg: #FFFFFF;
933
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
934
+ }
935
+
936
+ [data-cs-element="thuy"][data-cs-variant="ocean"] {
937
+ --_cs-light-accent: #06556F;
938
+ --_cs-dark-accent: #80BDD8;
939
+ --_cs-light-accent-strong: #034257;
940
+ --_cs-dark-accent-strong: #00445A;
941
+ --_cs-light-accent-bright: #A9D8ED;
942
+ --_cs-dark-accent-bright: #A5D8F0;
943
+ --_cs-light-accent-on: #001721;
944
+ --_cs-dark-accent-on: #f5ead9;
945
+ --_cs-light-accent-on-strong: #FFFFFF;
946
+ --_cs-dark-accent-on-strong: #FFFFFF;
947
+ --_cs-light-accent-tint: #E5F3FA;
948
+ --_cs-dark-accent-tint: #021821;
949
+ --_cs-light-accent-ink: #092531;
950
+ --_cs-dark-accent-ink: #A8DBF3;
951
+ --_cs-light-accent-glow: rgba(6, 85, 111, 0.48);
952
+ --_cs-dark-accent-glow: rgba(6, 85, 111, 0.48);
953
+ --_cs-light-accent-grad-a: #06556F;
954
+ --_cs-dark-accent-grad-a: #06556F;
955
+ --_cs-light-accent-grad-b: #82CF66;
956
+ --_cs-dark-accent-grad-b: #82CF66;
957
+ --_cs-light-color-text-accent: #003142;
958
+ --_cs-dark-color-text-accent: #AFE2FA;
959
+ --_cs-light-color-link: #003142;
960
+ --_cs-dark-color-link: #AFE2FA;
961
+ --_cs-light-color-link-hover: #45210E;
962
+ --_cs-dark-color-link-hover: #f5ead9;
963
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
964
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
965
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
966
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
967
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
968
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
969
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
970
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
971
+ --_cs-light-component-button-primary-bg: #034257;
972
+ --_cs-dark-component-button-primary-bg: #00445A;
973
+ --_cs-light-component-button-primary-fg: #FFFFFF;
974
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
975
+ }
976
+
977
+ [data-cs-element="moc"][data-cs-variant="bamboo"] {
978
+ --_cs-light-accent: #DAEFAA;
979
+ --_cs-dark-accent: #C4DB8C;
980
+ --_cs-light-accent-strong: #62780E;
981
+ --_cs-dark-accent-strong: #607420;
982
+ --_cs-light-accent-bright: #E2F4BA;
983
+ --_cs-dark-accent-bright: #DCF0B1;
984
+ --_cs-light-accent-on: #1C2307;
985
+ --_cs-dark-accent-on: #f5ead9;
986
+ --_cs-light-accent-on-strong: #FFFFFF;
987
+ --_cs-dark-accent-on-strong: #FFFFFF;
988
+ --_cs-light-accent-tint: #F5FBE8;
989
+ --_cs-dark-accent-tint: #293016;
990
+ --_cs-light-accent-ink: #1E250A;
991
+ --_cs-dark-accent-ink: #DCF0B1;
992
+ --_cs-light-accent-glow: rgba(218, 239, 170, 0.48);
993
+ --_cs-dark-accent-glow: rgba(218, 239, 170, 0.48);
994
+ --_cs-light-accent-grad-a: #DAEFAA;
995
+ --_cs-dark-accent-grad-a: #DAEFAA;
996
+ --_cs-light-accent-grad-b: #FC9C69;
997
+ --_cs-dark-accent-grad-b: #FC9C69;
998
+ --_cs-light-color-text-accent: #4A5B02;
999
+ --_cs-dark-color-text-accent: #DCF0B1;
1000
+ --_cs-light-color-link: #4A5B02;
1001
+ --_cs-dark-color-link: #DCF0B1;
1002
+ --_cs-light-color-link-hover: #45210E;
1003
+ --_cs-dark-color-link-hover: #f5ead9;
1004
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
1005
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
1006
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
1007
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
1008
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
1009
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1010
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1011
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1012
+ --_cs-light-component-button-primary-bg: #62780E;
1013
+ --_cs-dark-component-button-primary-bg: #607420;
1014
+ --_cs-light-component-button-primary-fg: #FFFFFF;
1015
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
1016
+ }
1017
+
1018
+ [data-cs-element="moc"] {
1019
+ --_cs-light-accent: #82CF66;
1020
+ --_cs-dark-accent: #8AD370;
1021
+ --_cs-light-accent-strong: #2B7100;
1022
+ --_cs-dark-accent-strong: #286704;
1023
+ --_cs-light-accent-bright: #B9F0A6;
1024
+ --_cs-dark-accent-bright: #B2EC9E;
1025
+ --_cs-light-accent-on: #0A2700;
1026
+ --_cs-dark-accent-on: #f5ead9;
1027
+ --_cs-light-accent-on-strong: #FFFFFF;
1028
+ --_cs-dark-accent-on-strong: #FFFFFF;
1029
+ --_cs-light-accent-tint: #EAFAE5;
1030
+ --_cs-dark-accent-tint: #12260B;
1031
+ --_cs-light-accent-ink: #0D2902;
1032
+ --_cs-dark-accent-ink: #B2EC9E;
1033
+ --_cs-light-accent-glow: rgba(130, 207, 102, 0.48);
1034
+ --_cs-dark-accent-glow: rgba(130, 207, 102, 0.48);
1035
+ --_cs-light-accent-grad-a: #82CF66;
1036
+ --_cs-dark-accent-grad-a: #82CF66;
1037
+ --_cs-light-accent-grad-b: #FC9C69;
1038
+ --_cs-dark-accent-grad-b: #FC9C69;
1039
+ --_cs-light-color-text-accent: #24570B;
1040
+ --_cs-dark-color-text-accent: #B2EC9E;
1041
+ --_cs-light-color-link: #24570B;
1042
+ --_cs-dark-color-link: #B2EC9E;
1043
+ --_cs-light-color-link-hover: #45210E;
1044
+ --_cs-dark-color-link-hover: #f5ead9;
1045
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
1046
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
1047
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
1048
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
1049
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
1050
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1051
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1052
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1053
+ --_cs-light-component-button-primary-bg: #2B7100;
1054
+ --_cs-dark-component-button-primary-bg: #286704;
1055
+ --_cs-light-component-button-primary-fg: #FFFFFF;
1056
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
1057
+ }
1058
+
1059
+ [data-cs-element="moc"][data-cs-variant="forest"] {
1060
+ --_cs-light-accent: #105C36;
1061
+ --_cs-dark-accent: #84C49B;
1062
+ --_cs-light-accent-strong: #0A4829;
1063
+ --_cs-dark-accent-strong: #074A29;
1064
+ --_cs-light-accent-bright: #ACDDBD;
1065
+ --_cs-dark-accent-bright: #A8DFBB;
1066
+ --_cs-light-accent-on: #011C0D;
1067
+ --_cs-dark-accent-on: #f5ead9;
1068
+ --_cs-light-accent-on-strong: #FFFFFF;
1069
+ --_cs-dark-accent-on-strong: #FFFFFF;
1070
+ --_cs-light-accent-tint: #E6F5EB;
1071
+ --_cs-dark-accent-tint: #031A0C;
1072
+ --_cs-light-accent-ink: #0B2818;
1073
+ --_cs-dark-accent-ink: #A8DFBB;
1074
+ --_cs-light-accent-glow: rgba(16, 92, 54, 0.48);
1075
+ --_cs-dark-accent-glow: rgba(16, 92, 54, 0.48);
1076
+ --_cs-light-accent-grad-a: #105C36;
1077
+ --_cs-dark-accent-grad-a: #105C36;
1078
+ --_cs-light-accent-grad-b: #FC9C69;
1079
+ --_cs-dark-accent-grad-b: #FC9C69;
1080
+ --_cs-light-color-text-accent: #04361D;
1081
+ --_cs-dark-color-text-accent: #B0E7C3;
1082
+ --_cs-light-color-link: #04361D;
1083
+ --_cs-dark-color-link: #B0E7C3;
1084
+ --_cs-light-color-link-hover: #45210E;
1085
+ --_cs-dark-color-link-hover: #f5ead9;
1086
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
1087
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
1088
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
1089
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
1090
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
1091
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1092
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1093
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1094
+ --_cs-light-component-button-primary-bg: #0A4829;
1095
+ --_cs-dark-component-button-primary-bg: #074A29;
1096
+ --_cs-light-component-button-primary-fg: #FFFFFF;
1097
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
1098
+ }
1099
+
1100
+ [data-cs-element="kim"][data-cs-variant="titanium"] {
1101
+ --_cs-light-accent: #D3E7FC;
1102
+ --_cs-dark-accent: #BCD2EA;
1103
+ --_cs-light-accent-strong: #56708B;
1104
+ --_cs-dark-accent-strong: #576D83;
1105
+ --_cs-light-accent-bright: #DDEDFF;
1106
+ --_cs-dark-accent-bright: #D6E9FD;
1107
+ --_cs-light-accent-on: #182029;
1108
+ --_cs-dark-accent-on: #f5ead9;
1109
+ --_cs-light-accent-on-strong: #FFFFFF;
1110
+ --_cs-dark-accent-on-strong: #FFFFFF;
1111
+ --_cs-light-accent-tint: #F3F8FE;
1112
+ --_cs-dark-accent-tint: #262D35;
1113
+ --_cs-light-accent-ink: #1A232B;
1114
+ --_cs-dark-accent-ink: #D6E9FD;
1115
+ --_cs-light-accent-glow: rgba(211, 231, 252, 0.48);
1116
+ --_cs-dark-accent-glow: rgba(211, 231, 252, 0.48);
1117
+ --_cs-light-accent-grad-a: #D3E7FC;
1118
+ --_cs-dark-accent-grad-a: #D3E7FC;
1119
+ --_cs-light-accent-grad-b: #00CEE4;
1120
+ --_cs-dark-accent-grad-b: #00CEE4;
1121
+ --_cs-light-color-text-accent: #3D5670;
1122
+ --_cs-dark-color-text-accent: #D6E9FD;
1123
+ --_cs-light-color-link: #3D5670;
1124
+ --_cs-dark-color-link: #D6E9FD;
1125
+ --_cs-light-color-link-hover: #45210E;
1126
+ --_cs-dark-color-link-hover: #f5ead9;
1127
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
1128
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
1129
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
1130
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
1131
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
1132
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1133
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1134
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1135
+ --_cs-light-component-button-primary-bg: #56708B;
1136
+ --_cs-dark-component-button-primary-bg: #576D83;
1137
+ --_cs-light-component-button-primary-fg: #FFFFFF;
1138
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
1139
+ }
1140
+
1141
+ [data-cs-element="kim"] {
1142
+ --_cs-light-accent: #C4B78F;
1143
+ --_cs-dark-accent: #C8BC96;
1144
+ --_cs-light-accent-strong: #6A5E3A;
1145
+ --_cs-dark-accent-strong: #615633;
1146
+ --_cs-light-accent-bright: #E8DEBD;
1147
+ --_cs-dark-accent-bright: #E3D9B8;
1148
+ --_cs-light-accent-on: #241F0F;
1149
+ --_cs-dark-accent-on: #f5ead9;
1150
+ --_cs-light-accent-on-strong: #FFFFFF;
1151
+ --_cs-dark-accent-on-strong: #FFFFFF;
1152
+ --_cs-light-accent-tint: #F8F4EA;
1153
+ --_cs-dark-accent-tint: #242013;
1154
+ --_cs-light-accent-ink: #262112;
1155
+ --_cs-dark-accent-ink: #E3D9B8;
1156
+ --_cs-light-accent-glow: rgba(196, 183, 143, 0.48);
1157
+ --_cs-dark-accent-glow: rgba(196, 183, 143, 0.48);
1158
+ --_cs-light-accent-grad-a: #C4B78F;
1159
+ --_cs-dark-accent-grad-a: #C4B78F;
1160
+ --_cs-light-accent-grad-b: #00CEE4;
1161
+ --_cs-dark-accent-grad-b: #00CEE4;
1162
+ --_cs-light-color-text-accent: #564B27;
1163
+ --_cs-dark-color-text-accent: #E5DBBA;
1164
+ --_cs-light-color-link: #564B27;
1165
+ --_cs-dark-color-link: #E5DBBA;
1166
+ --_cs-light-color-link-hover: #45210E;
1167
+ --_cs-dark-color-link-hover: #f5ead9;
1168
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
1169
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
1170
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
1171
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
1172
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
1173
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1174
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1175
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1176
+ --_cs-light-component-button-primary-bg: #6A5E3A;
1177
+ --_cs-dark-component-button-primary-bg: #615633;
1178
+ --_cs-light-component-button-primary-fg: #FFFFFF;
1179
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
1180
+ }
1181
+
1182
+ [data-cs-element="kim"][data-cs-variant="steel"] {
1183
+ --_cs-light-accent: #384D72;
1184
+ --_cs-dark-accent: #9FB7E0;
1185
+ --_cs-light-accent-strong: #293C5C;
1186
+ --_cs-dark-accent-strong: #2B3D5D;
1187
+ --_cs-light-accent-bright: #BED0F0;
1188
+ --_cs-dark-accent-bright: #BBD0F4;
1189
+ --_cs-light-accent-on: #020818;
1190
+ --_cs-dark-accent-on: #f5ead9;
1191
+ --_cs-light-accent-on-strong: #FFFFFF;
1192
+ --_cs-dark-accent-on-strong: #FFFFFF;
1193
+ --_cs-light-accent-tint: #EBF1FB;
1194
+ --_cs-dark-accent-tint: #0D1523;
1195
+ --_cs-light-accent-ink: #182232;
1196
+ --_cs-dark-accent-ink: #BED3F7;
1197
+ --_cs-light-accent-glow: rgba(56, 77, 114, 0.48);
1198
+ --_cs-dark-accent-glow: rgba(56, 77, 114, 0.48);
1199
+ --_cs-light-accent-grad-a: #384D72;
1200
+ --_cs-dark-accent-grad-a: #384D72;
1201
+ --_cs-light-accent-grad-b: #00CEE4;
1202
+ --_cs-dark-accent-grad-b: #00CEE4;
1203
+ --_cs-light-color-text-accent: #1B2E4C;
1204
+ --_cs-dark-color-text-accent: #C8DBFD;
1205
+ --_cs-light-color-link: #1B2E4C;
1206
+ --_cs-dark-color-link: #C8DBFD;
1207
+ --_cs-light-color-link-hover: #45210E;
1208
+ --_cs-dark-color-link-hover: #f5ead9;
1209
+ --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
1210
+ --_cs-dark-color-surface-panel: color-mix(in oklab, var(--_cs-dark-accent) 10%, #221710);
1211
+ --_cs-light-color-surface-page: color-mix(in oklab, var(--_cs-light-accent) 8%, #FFFDF8);
1212
+ --_cs-dark-color-surface-page: color-mix(in oklab, var(--_cs-dark-accent) 8%, #1a1108);
1213
+ --_cs-light-color-surface-raised: color-mix(in oklab, var(--_cs-light-accent) 15%, #FBF4E9);
1214
+ --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1215
+ --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1216
+ --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1217
+ --_cs-light-component-button-primary-bg: #293C5C;
1218
+ --_cs-dark-component-button-primary-bg: #2B3D5D;
1219
+ --_cs-light-component-button-primary-fg: #FFFFFF;
1220
+ --_cs-dark-component-button-primary-fg: #FFFFFF;
1221
+ }
1222
+
1223
+ :is(:root, [data-theme], [data-cs-element], [data-cs-contrast], [data-theme][data-cs-element][data-cs-variant]) {
1224
+ --cs-color-brand-umber: var(--_cs-light, var(--_cs-light-color-brand-umber))var(--_cs-dark, var(--_cs-dark-color-brand-umber));
1225
+ --cs-color-brand-ochre: var(--_cs-light, var(--_cs-light-color-brand-ochre))var(--_cs-dark, var(--_cs-dark-color-brand-ochre));
1226
+ --cs-color-surface-page: var(--_cs-light, var(--_cs-light-color-surface-page))var(--_cs-dark, var(--_cs-dark-color-surface-page));
1227
+ --cs-color-surface-panel: var(--_cs-light, var(--_cs-light-color-surface-panel))var(--_cs-dark, var(--_cs-dark-color-surface-panel));
1228
+ --cs-color-surface-raised: var(--_cs-light, var(--_cs-light-color-surface-raised))var(--_cs-dark, var(--_cs-dark-color-surface-raised));
1229
+ --cs-color-text-primary: var(--_cs-light, var(--_cs-light-color-text-primary))var(--_cs-dark, var(--_cs-dark-color-text-primary));
1230
+ --cs-color-text-inverse: var(--_cs-light, var(--_cs-light-color-text-inverse))var(--_cs-dark, var(--_cs-dark-color-text-inverse));
1231
+ --cs-color-text-accent: var(--_cs-light, var(--_cs-light-color-text-accent))var(--_cs-dark, var(--_cs-dark-color-text-accent));
1232
+ --cs-color-text-muted: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-text-muted))var(--_cs-dark, var(--_cs-dark-color-text-muted)))var(--_cs-high, var(--_cs-light, #45210E)var(--_cs-dark, #F5EAD9));
1233
+ --cs-color-semantic-success: var(--_cs-light, var(--_cs-light-color-semantic-success))var(--_cs-dark, var(--_cs-dark-color-semantic-success));
1234
+ --cs-color-semantic-danger: var(--_cs-light, var(--_cs-light-color-semantic-danger))var(--_cs-dark, var(--_cs-dark-color-semantic-danger));
1235
+ --cs-color-semantic-warning: var(--_cs-light, var(--_cs-light-color-semantic-warning))var(--_cs-dark, var(--_cs-dark-color-semantic-warning));
1236
+ --cs-color-semantic-info: var(--_cs-light, var(--_cs-light-color-semantic-info))var(--_cs-dark, var(--_cs-dark-color-semantic-info));
1237
+ --cs-color-semantic-success-fg: var(--_cs-light, var(--_cs-light-color-semantic-success-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-success-fg));
1238
+ --cs-color-semantic-danger-fg: var(--_cs-light, var(--_cs-light-color-semantic-danger-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-danger-fg));
1239
+ --cs-color-semantic-warning-fg: var(--_cs-light, var(--_cs-light-color-semantic-warning-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-warning-fg));
1240
+ --cs-color-semantic-info-fg: var(--_cs-light, var(--_cs-light-color-semantic-info-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-info-fg));
1241
+ --cs-color-semantic-success-text: var(--_cs-light, var(--_cs-light-color-semantic-success-text))var(--_cs-dark, var(--_cs-dark-color-semantic-success-text));
1242
+ --cs-color-semantic-danger-text: var(--_cs-light, var(--_cs-light-color-semantic-danger-text))var(--_cs-dark, var(--_cs-dark-color-semantic-danger-text));
1243
+ --cs-color-semantic-warning-text: var(--_cs-light, var(--_cs-light-color-semantic-warning-text))var(--_cs-dark, var(--_cs-dark-color-semantic-warning-text));
1244
+ --cs-color-semantic-info-text: var(--_cs-light, var(--_cs-light-color-semantic-info-text))var(--_cs-dark, var(--_cs-dark-color-semantic-info-text));
1245
+ --cs-doc-ink: var(--_cs-light, var(--_cs-light-doc-ink))var(--_cs-dark, var(--_cs-dark-doc-ink));
1246
+ --cs-doc-slate: var(--_cs-light, var(--_cs-light-doc-slate))var(--_cs-dark, var(--_cs-dark-doc-slate));
1247
+ --cs-doc-fill: var(--_cs-light, var(--_cs-light-doc-fill))var(--_cs-dark, var(--_cs-dark-doc-fill));
1248
+ --cs-doc-fill-ink: var(--_cs-light, var(--_cs-light-doc-fill-ink))var(--_cs-dark, var(--_cs-dark-doc-fill-ink));
1249
+ --cs-color-accent-ochre: var(--_cs-light, var(--_cs-light-color-accent-ochre))var(--_cs-dark, var(--_cs-dark-color-accent-ochre));
1250
+ --cs-color-border-default: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-border-default))var(--_cs-dark, var(--_cs-dark-color-border-default)))var(--_cs-high, var(--_cs-light, #9a8060)var(--_cs-dark, #7a6450));
1251
+ --cs-color-link: var(--_cs-light, var(--_cs-light-color-link))var(--_cs-dark, var(--_cs-dark-color-link));
1252
+ --cs-color-link-hover: var(--_cs-light, var(--_cs-light-color-link-hover))var(--_cs-dark, var(--_cs-dark-color-link-hover));
1253
+ --cs-component-button-primary-bg: var(--_cs-light, var(--_cs-light-component-button-primary-bg))var(--_cs-dark, var(--_cs-dark-component-button-primary-bg));
1254
+ --cs-component-button-primary-fg: var(--_cs-light, var(--_cs-light-component-button-primary-fg))var(--_cs-dark, var(--_cs-dark-component-button-primary-fg));
1255
+ --cs-component-textfield-border-default: var(--_cs-light, var(--_cs-light-component-textfield-border-default))var(--_cs-dark, var(--_cs-dark-component-textfield-border-default));
1256
+ --cs-shadow-xs: var(--_cs-light, var(--_cs-light-shadow-xs))var(--_cs-dark, var(--_cs-dark-shadow-xs));
1257
+ --cs-shadow-sm: var(--_cs-light, var(--_cs-light-shadow-sm))var(--_cs-dark, var(--_cs-dark-shadow-sm));
1258
+ --cs-shadow-md: var(--_cs-light, var(--_cs-light-shadow-md))var(--_cs-dark, var(--_cs-dark-shadow-md));
1259
+ --cs-shadow-lg: var(--_cs-light, var(--_cs-light-shadow-lg))var(--_cs-dark, var(--_cs-dark-shadow-lg));
1260
+ --cs-shadow-xl: var(--_cs-light, var(--_cs-light-shadow-xl))var(--_cs-dark, var(--_cs-dark-shadow-xl));
1261
+ --cs-accent: var(--_cs-light, var(--_cs-light-accent))var(--_cs-dark, var(--_cs-dark-accent));
1262
+ --cs-accent-strong: var(--_cs-light, var(--_cs-light-accent-strong))var(--_cs-dark, var(--_cs-dark-accent-strong));
1263
+ --cs-accent-bright: var(--_cs-light, var(--_cs-light-accent-bright))var(--_cs-dark, var(--_cs-dark-accent-bright));
1264
+ --cs-accent-on: var(--_cs-light, var(--_cs-light-accent-on))var(--_cs-dark, var(--_cs-dark-accent-on));
1265
+ --cs-accent-on-strong: var(--_cs-light, var(--_cs-light-accent-on-strong))var(--_cs-dark, var(--_cs-dark-accent-on-strong));
1266
+ --cs-accent-tint: var(--_cs-light, var(--_cs-light-accent-tint))var(--_cs-dark, var(--_cs-dark-accent-tint));
1267
+ --cs-accent-ink: var(--_cs-light, var(--_cs-light-accent-ink))var(--_cs-dark, var(--_cs-dark-accent-ink));
1268
+ --cs-accent-glow: var(--_cs-light, var(--_cs-light-accent-glow))var(--_cs-dark, var(--_cs-dark-accent-glow));
1269
+ --cs-accent-grad-a: var(--_cs-light, var(--_cs-light-accent-grad-a))var(--_cs-dark, var(--_cs-dark-accent-grad-a));
1270
+ --cs-accent-grad-b: var(--_cs-light, var(--_cs-light-accent-grad-b))var(--_cs-dark, var(--_cs-dark-accent-grad-b));
1271
+ color-scheme: var(--_cs-light, light)var(--_cs-dark, dark);
1272
+ }
1273
+
1274
+ /* ===== tokens/styles.css ===== */
1275
+ /* Style axis — data-cs-style packs.
1276
+ *
1277
+ * Sole pack today: liquid-glass ≡ current elevation + base/glass.css materials.
1278
+ * Absent attribute ≡ liquid-glass (same default pattern as light theme / Thổ middle).
1279
+ * Future packs override glass scalars / material composition only and must consume
1280
+ * the existing 10 --cs-accent-* roles (including on-strong) — never invent parallel Element packs.
1281
+ */
1282
+
1283
+ :root {
1284
+ --cs-style-pack: liquid-glass; /* @kind other */
1285
+ }
1286
+
1287
+ [data-cs-style="liquid-glass"] {
1288
+ --cs-style-pack: liquid-glass; /* @kind other */
1289
+ }
1290
+
1291
+ /* ===== tokens/theme-attributes.css ===== */
1292
+ /* CyberSkill — Theme attributes: density + contrast (TASK-IMP-027 / CDS-THEME-002).
1293
+ * NOT a fifth product identity axis. Compose with data-theme only.
1294
+ * At the root, defaults are comfortable density and standard contrast.
1295
+ * Descendants inherit; an explicit density attribute starts a new density scope.
1296
+ * Compact MUST NOT drop control min-heights below 44px (immutable touch floor).
1297
+ * See docs/decisions/theme-density-contrast.md. */
1298
+
1299
+ :root {
1300
+ /* Density space aliases — comfortable mirrors the spacing scale 1–6. */
1301
+ --cs-density-space-1: var(--cs-space-1);
1302
+ --cs-density-space-2: var(--cs-space-2);
1303
+ --cs-density-space-3: var(--cs-space-3);
1304
+ --cs-density-space-4: var(--cs-space-4);
1305
+ --cs-density-space-5: var(--cs-space-5);
1306
+ --cs-density-space-6: var(--cs-space-6);
1307
+ --cs-density-control-gap: var(--cs-component-button-gap);
1308
+ }
1309
+
1310
+ /* Compact density: tighter padding/gaps; minHeights stay ≥44px. */
1311
+ [data-cs-density="compact"] {
1312
+ --cs-density-space-1: 3px;
1313
+ --cs-density-space-2: 6px;
1314
+ --cs-density-space-3: 9px;
1315
+ --cs-density-space-4: 12px;
1316
+ --cs-density-space-5: 16px;
1317
+ --cs-density-space-6: 18px;
1318
+ --cs-density-control-gap: 6px;
1319
+
1320
+ --cs-component-button-gap: 6px;
1321
+ --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
1322
+ --cs-component-button-xs-padding-y: 3px;
1323
+ --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
1324
+ --cs-component-button-xs-padding-x: 8px;
1325
+ --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
1326
+ --cs-component-button-sm-padding-y: 6px;
1327
+ --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
1328
+ --cs-component-button-sm-padding-x: 12px;
1329
+ --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
1330
+ --cs-component-button-md-padding-y: 10px;
1331
+ --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
1332
+ --cs-component-button-md-padding-x: 16px;
1333
+ /* md minHeight stays 44px — immutable touch floor */
1334
+ --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
1335
+ --cs-component-button-lg-padding-y: 12px;
1336
+ --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
1337
+ --cs-component-button-lg-padding-x: 22px;
1338
+
1339
+ --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
1340
+ --cs-component-textfield-padding-y: 8px;
1341
+ --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
1342
+ --cs-component-textfield-padding-x: 10px;
1343
+ /* textfield minHeight stays 44px */
1344
+ }
1345
+
1346
+ /* Explicit comfortable resets every density-controlled value, even inside compact.
1347
+ * Keep component defaults aligned with component-tokens.css; browser parity tests
1348
+ * compare this complete reset with an independent comfortable scope. */
1349
+ [data-cs-density="comfortable"] {
1350
+ --cs-density-space-1: var(--cs-space-1);
1351
+ --cs-density-space-2: var(--cs-space-2);
1352
+ --cs-density-space-3: var(--cs-space-3);
1353
+ --cs-density-space-4: var(--cs-space-4);
1354
+ --cs-density-space-5: var(--cs-space-5);
1355
+ --cs-density-space-6: var(--cs-space-6);
1356
+ --cs-density-control-gap: var(--cs-component-button-gap);
1357
+ --cs-component-button-gap: 8px;
1358
+ --cs-component-button-xs-padding-y: 4px;
1359
+ --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
1360
+ --cs-component-button-xs-padding-x: 10px;
1361
+ --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
1362
+ --cs-component-button-sm-padding-y: 8px;
1363
+ --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
1364
+ --cs-component-button-sm-padding-x: 14px;
1365
+ --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
1366
+ --cs-component-button-md-padding-y: 12px;
1367
+ --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
1368
+ --cs-component-button-md-padding-x: 20px;
1369
+ --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
1370
+ --cs-component-button-lg-padding-y: 16px;
1371
+ --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
1372
+ --cs-component-button-lg-padding-x: 28px;
1373
+ --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
1374
+ --cs-component-textfield-padding-y: 10px;
1375
+ --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
1376
+ --cs-component-textfield-padding-x: 12px;
1377
+ --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
1378
+ }
1379
+
1380
+ /* High contrast Theme attribute — strengthens muted text + borders.
1381
+ * Mirrors prefers-contrast: more intent; does not touch anchors or primary text. */
1382
+ [data-cs-contrast="high"] {
1383
+ --cs-color-border-default: #9a8060;
1384
+ --cs-color-text-muted: #45210E;
1385
+ }
1386
+
1387
+ [data-theme="dark"][data-cs-contrast="high"],
1388
+ [data-cs-contrast="high"][data-theme="dark"] {
1389
+ --cs-color-border-default: #7a6450;
1390
+ --cs-color-text-muted: #F5EAD9;
1391
+ }
1392
+
1393
+ @media (prefers-color-scheme: dark) {
1394
+ [data-theme="system"][data-cs-contrast="high"],
1395
+ [data-cs-contrast="high"][data-theme="system"] {
1396
+ --cs-color-border-default: #7a6450;
1397
+ --cs-color-text-muted: #F5EAD9;
1398
+ }
1399
+ }
1400
+
1401
+ /* ===== base/reset.css ===== */
1402
+ /* CyberSkill — minimal base reset. Products opt in by linking styles.css. */
1403
+ *, *::before, *::after { box-sizing: border-box; }
1404
+ html {
1405
+ -webkit-text-size-adjust: 100%;
1406
+ overflow-x: clip;
1407
+ scroll-padding-block-start: var(--cs-scroll-padding-block-start, var(--cs-space-4, 16px));
1408
+ scroll-padding-block-end: var(--cs-scroll-padding-block-end, var(--cs-space-4, 16px));
1409
+ }
1410
+ body {
1411
+ margin: 0;
1412
+ overflow-x: clip;
1413
+ background: var(--cs-color-surface-page, #fffdf8);
1414
+ color: var(--cs-color-text-primary, #45210e);
1415
+ font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
1416
+ font-size: var(--cs-font-size-base, 1rem);
1417
+ line-height: var(--cs-font-lineHeight-body, 1.5);
1418
+ -webkit-font-smoothing: antialiased;
1419
+ text-rendering: optimizeLegibility;
1420
+ }
1421
+ :where(h1, h2, h3, h4, h5, h6) { line-height: var(--cs-font-lineHeight-heading, 1.35); text-wrap: balance; }
1422
+ :where(p) { text-wrap: pretty; }
1423
+ :where(code, pre, kbd, samp) { font-family: var(--cs-font-family-mono, ui-monospace, monospace); }
1424
+ /* Composite focus indicator (FIND-032): high-contrast text-primary contour (≥3:1
1425
+ * on light + dark surfaces) + ochre outer brand halo. Ochre alone is ~1.7:1 on cream. */
1426
+ :where(:focus-visible) {
1427
+ outline: 2px solid var(--cs-color-text-primary, #45210e);
1428
+ outline-offset: 2px;
1429
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre, #f4ba17);
1430
+ }
1431
+ /* WebKit can suppress box-shadow on native button/range/check/radio surfaces.
1432
+ * Keep their browser-owned appearance and use a painted Ochre glow fallback;
1433
+ * the solid text-primary outline remains the contrast-bearing contour. */
1434
+ :where(button, input[type="range"], input[type="checkbox"], input[type="radio"]):focus-visible {
1435
+ filter: drop-shadow(0 0 2px var(--cs-color-accent-ochre, #f4ba17));
1436
+ }
1437
+
1438
+ /* Skip link — shared by templates, kits, and product shells (UX-002). */
1439
+ .cs-skip {
1440
+ position: absolute;
1441
+ left: -999px;
1442
+ top: auto;
1443
+ width: 1px;
1444
+ height: 1px;
1445
+ overflow: hidden;
1446
+ text-decoration: none;
1447
+ font-weight: 700;
1448
+ font-family: var(--cs-font-family-ui);
1449
+ }
1450
+ .cs-skip:focus,
1451
+ .cs-skip:focus-visible {
1452
+ position: fixed;
1453
+ left: 12px;
1454
+ top: 12px;
1455
+ z-index: calc(var(--cs-depth-toast, 200) + 1);
1456
+ width: auto;
1457
+ height: auto;
1458
+ padding: 10px 14px;
1459
+ background: var(--cs-color-surface-panel);
1460
+ color: var(--cs-color-text-primary);
1461
+ border: 2px solid var(--cs-color-brand-ochre);
1462
+ border-radius: var(--cs-radius-md, 8px);
1463
+ overflow: visible;
1464
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-md);
1465
+ }
1466
+
1467
+ /* ===== base/typography.css ===== */
1468
+ /* CyberSkill — typographic role utilities. Each bundles size + line-height +
1469
+ * weight + tracking so consumers write intent (.cs-h1) not magic numbers.
1470
+ * Built on the semantic aliases in tokens/typography.css. */
1471
+ .cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
1472
+ .cs-display--fluid { font-family: var(--cs-heading-family); font-size: clamp(2.25rem, 1.5rem + 3.5vw, var(--cs-text-display)); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
1473
+ :is(.cs-display, .cs-display--fluid):lang(vi) { line-height: 1.22; } /* element's own language: EN display inside a VI page keeps 1.15 */
1474
+ .cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
1475
+ .cs-h1--fluid { font-family: var(--cs-heading-family); font-size: clamp(1.75rem, 1.25rem + 2vw, var(--cs-text-h1)); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
1476
+ .cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
1477
+ .cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); overflow-wrap: break-word; }
1478
+ .cs-h4 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h4); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-font-weight-semibold); }
1479
+ .cs-body-lg { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body-lg); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }
1480
+ .cs-body { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }
1481
+ .cs-secondary { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-secondary); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
1482
+ .cs-caption { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-caption); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
1483
+ .cs-eyebrow { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-eyebrow); font-weight: var(--cs-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-accent); }
1484
+ .cs-mono { font-family: var(--cs-font-family-mono); }
1485
+ .cs-tabular { font-variant-numeric: tabular-nums; }
1486
+ .cs-prose { max-inline-size: var(--cs-prose-measure, 45rem); line-height: var(--cs-font-lineHeight-body, 1.5); }
1487
+ /* Opt in to the display face for a subtree — retargets --cs-heading-family so
1488
+ * .cs-display/.cs-h1…h4 and bare headings follow, body copy stays on the UI
1489
+ * face. Space Grotesk tops out at 700, so --cs-heading-weight-strong (800)
1490
+ * clamps to 700 within that family (CSS does not hop to Be Vietnam Pro for a
1491
+ * missing weight). Sanctioned path for cyberskill.world / Lumi headline face. */
1492
+ .cs-display-face { --cs-heading-family: var(--cs-font-family-display); }
1493
+
1494
+ /* ===== base/components.css ===== */
1495
+ /* CyberSkill — base component styles (.cs-*).
1496
+ * Ported verbatim from @cyberskill/react base styles, with the button variants
1497
+ * (tertiary, danger-ghost) and xs size that the TypeScript contract declares
1498
+ * added in the same token vocabulary. Light default; dark/system opt-in. */
1499
+
1500
+ /* ---- Button ---- */
1501
+ .cs-button {
1502
+ align-items: center;
1503
+ background: var(--cs-component-button-primary-bg, #45210e);
1504
+ border: 1px solid transparent;
1505
+ border-radius: var(--cs-component-button-radius, var(--cs-radius-md, 8px));
1506
+ color: var(--cs-component-button-primary-fg, #ffffff);
1507
+ cursor: pointer;
1508
+ display: inline-flex;
1509
+ font: inherit;
1510
+ font-weight: 700;
1511
+ gap: var(--cs-component-button-gap, 0.5rem);
1512
+ justify-content: center;
1513
+ line-height: 1.2;
1514
+ min-height: var(--cs-component-button-md-minHeight, 44px);
1515
+ min-width: var(--cs-component-button-md-minHeight, 44px);
1516
+ padding-block: var(--cs-component-button-md-paddingY, 12px);
1517
+ padding-inline: var(--cs-component-button-md-paddingX, 20px);
1518
+ transition: background var(--cs-duration-fast, 120ms) var(--cs-ease-standard, ease),
1519
+ border-color var(--cs-duration-fast, 120ms) var(--cs-ease-standard, ease),
1520
+ filter var(--cs-duration-fast, 120ms) var(--cs-ease-standard, ease);
1521
+ }
1522
+ .cs-button:hover { filter: brightness(1.08); }
1523
+ .cs-button:active { transform: translateY(0.5px); }
1524
+
1525
+ .cs-button:focus-visible,
1526
+ .cs-field__control:focus-visible,
1527
+ .cs-ai-disclosure__badge:focus-visible {
1528
+ outline: 2px solid var(--cs-color-text-primary);
1529
+ outline-offset: 2px;
1530
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
1531
+ }
1532
+
1533
+ .cs-button--secondary {
1534
+ background: var(--cs-color-surface-panel, #ffffff);
1535
+ border-color: var(--_cs-light, var(--cs-accent-strong, #45210e))var(--_cs-dark, var(--cs-accent, #f4ba17));
1536
+ color: var(--_cs-light, var(--cs-color-text-accent, #45210e))var(--_cs-dark, var(--cs-color-text-accent, #f4ba17));
1537
+ }
1538
+ .cs-button--secondary:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }
1539
+
1540
+ .cs-button--tertiary {
1541
+ background: var(--cs-color-surface-raised, #fbf4e9);
1542
+ border-color: transparent;
1543
+ color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-text-primary));
1544
+ }
1545
+ .cs-button--tertiary:hover { filter: none; border-color: var(--cs-color-border-default, #e7d9c6); }
1546
+
1547
+ .cs-button--ghost {
1548
+ background: transparent;
1549
+ color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-text-primary));
1550
+ }
1551
+ .cs-button--ghost:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }
1552
+
1553
+ /* Dark theme: umber text/border on the low-emphasis buttons is invisible on dark surfaces —
1554
+ remap so secondary reads as an ochre outline and tertiary/ghost use the light body colour. */
1555
+
1556
+ .cs-button--danger {
1557
+ background: var(--cs-color-semantic-danger, #b42318);
1558
+ color: var(--cs-color-semantic-danger-fg, #ffffff);
1559
+ }
1560
+
1561
+ .cs-button--danger-ghost {
1562
+ background: transparent;
1563
+ color: var(--cs-color-semantic-danger-text, #4b0502);
1564
+ }
1565
+ .cs-button--danger-ghost:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger, #b42318) 3%, transparent); filter: none; }
1566
+
1567
+ .cs-button--xs {
1568
+ min-height: var(--cs-component-button-xs-minHeight, 28px);
1569
+ min-width: var(--cs-component-button-xs-minWidth, 28px);
1570
+ padding-block: var(--cs-component-button-xs-paddingY, 4px);
1571
+ padding-inline: var(--cs-component-button-xs-paddingX, 10px);
1572
+ font-size: var(--cs-font-size-sm, 0.875rem);
1573
+ }
1574
+ .cs-button--sm {
1575
+ min-height: var(--cs-component-button-sm-minHeight, 36px);
1576
+ min-width: var(--cs-component-button-sm-minHeight, 36px);
1577
+ padding-block: var(--cs-component-button-sm-paddingY, 8px);
1578
+ padding-inline: var(--cs-component-button-sm-paddingX, 14px);
1579
+ }
1580
+ .cs-button--lg {
1581
+ min-height: var(--cs-component-button-lg-minHeight, 52px);
1582
+ padding-block: var(--cs-component-button-lg-paddingY, 16px);
1583
+ padding-inline: var(--cs-component-button-lg-paddingX, 28px);
1584
+ }
1585
+ .cs-button--full { inline-size: 100%; }
1586
+
1587
+ .cs-button.is-disabled,
1588
+ .cs-field.is-disabled { opacity: 0.58; cursor: not-allowed; }
1589
+ .cs-button.is-loading { opacity: 0.88; cursor: progress; }
1590
+
1591
+ .cs-button__spinner {
1592
+ inline-size: 1em; block-size: 1em; border-radius: 999px;
1593
+ border: 2px solid currentColor; border-right-color: transparent;
1594
+ animation: cs-spin 0.6s linear infinite;
1595
+ }
1596
+ @keyframes cs-spin { to { transform: rotate(360deg); } }
1597
+ @media (prefers-reduced-motion: reduce) { .cs-button__spinner { animation: none; } }
1598
+
1599
+ /* Touch ergonomics: bump small sizes on coarse pointers (tokenized). */
1600
+ @media (pointer: coarse) {
1601
+ .cs-button { min-height: var(--cs-component-button-md-minHeight-coarse, var(--cs-component-button-md-minHeight, 44px)); }
1602
+ .cs-button--sm { min-height: var(--cs-component-button-sm-minHeight-coarse, 44px); }
1603
+ .cs-button--xs { min-height: var(--cs-component-button-xs-minHeight-coarse, 44px); }
1604
+ }
1605
+
1606
+ /* ---- TextField ---- */
1607
+ .cs-field { align-content: start; color: var(--cs-color-text-primary, #45210e); display: grid; gap: 0.375rem; }
1608
+ .cs-field__label { font-weight: 700; }
1609
+ .cs-field__description { color: var(--cs-color-text-muted, #3f2d21); font-size: 0.875rem; }
1610
+ .cs-field__control {
1611
+ border: 1px solid var(--cs-component-textfield-border-default, #bfa58f);
1612
+ border-radius: var(--cs-radius-md, 8px);
1613
+ background: var(--cs-color-surface-panel, #fff);
1614
+ color: var(--cs-color-text-primary, #45210e);
1615
+ font: inherit;
1616
+ min-height: var(--cs-component-textfield-minHeight, 44px);
1617
+ padding-block: var(--cs-component-textfield-paddingY, 10px);
1618
+ padding-inline: var(--cs-component-textfield-paddingX, 12px);
1619
+ }
1620
+ .cs-field__control::placeholder { color: var(--cs-color-text-muted, #3f2d21); opacity: 0.7; }
1621
+ .cs-field.is-invalid .cs-field__control, .cs-field__control.is-invalid, .cs-field__control[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
1622
+ .cs-field__error { color: var(--cs-color-semantic-danger-text, #4b0502); font-size: 0.875rem; }
1623
+
1624
+ /* ---- Dialog ---- */
1625
+ .cs-dialog-layer { inset: 0; position: fixed; z-index: var(--cs-depth-modal); }
1626
+ .cs-dialog__overlay { background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); inset: 0; position: absolute; }
1627
+ .cs-dialog {
1628
+ background: var(--cs-color-surface-panel, #ffffff);
1629
+ border-radius: var(--cs-radius-lg, 14px);
1630
+ box-shadow: var(--cs-shadow-xl, 0 24px 80px rgba(31, 19, 11, 0.26));
1631
+ color: var(--cs-color-text-primary, #45210e);
1632
+ left: 0;
1633
+ right: 0;
1634
+ margin-inline: auto;
1635
+ z-index: 2;
1636
+ max-inline-size: min(42rem, calc(100vw - 2rem));
1637
+ max-block-size: min(80vh, calc(100vh - 4rem));
1638
+ overflow: auto;
1639
+ padding: var(--cs-space-6, 24px);
1640
+ position: absolute;
1641
+ top: 12vh;
1642
+ /* Transforms/translate would capture and clip fixed nested overlay layers. */
1643
+ width: 100%;
1644
+ }
1645
+ .cs-dialog__header,
1646
+ .cs-dialog__actions,
1647
+ .cs-review-gate__actions {
1648
+ align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
1649
+ }
1650
+ .cs-dialog__actions { justify-content: flex-end; }
1651
+ .cs-dialog__title { font-size: 1.25rem; line-height: 1.35; margin: 0; }
1652
+ .cs-dialog__body { margin-block: 1rem; }
1653
+ /* AlertDialog — confirm/destructive modal (shares dialog layer; tighter panel) */
1654
+ .cs-alert-dialog { max-inline-size: min(28rem, calc(100vw - 2rem)); }
1655
+ .cs-alert-dialog--destructive .cs-dialog__title { color: var(--cs-color-semantic-danger-text, #4b0502); }
1656
+ @media (max-width: 640px) {
1657
+ .cs-dialog { max-inline-size: calc(100vw - 1rem); top: 4vh; padding: var(--cs-space-4, 16px); }
1658
+ .cs-dialog__actions .cs-button, .cs-review-gate__actions .cs-button { flex: 1 1 auto; }
1659
+ }
1660
+
1661
+
1662
+ /* Progressive viewport geometry: preserve the vh fallback above. Safe-area
1663
+ bounds are physical viewport edges; direction does not swap a device notch. */
1664
+ @supports (height: 100dvh) and (top: max(1px, env(safe-area-inset-top, 0px))) {
1665
+ .cs-dialog {
1666
+ --_cs-dialog-safe-top: max(12dvh, env(safe-area-inset-top, 0px));
1667
+ left: env(safe-area-inset-left, 0px);
1668
+ right: env(safe-area-inset-right, 0px);
1669
+ max-inline-size: min(42rem, calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
1670
+ max-block-size: min(80dvh, calc(100dvh - 4rem), calc(100dvh - var(--_cs-dialog-safe-top) - env(safe-area-inset-bottom, 0px) - 1rem));
1671
+ top: var(--_cs-dialog-safe-top);
1672
+ }
1673
+ .cs-alert-dialog { max-inline-size: min(28rem, calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
1674
+ @media (max-width: 640px) {
1675
+ .cs-dialog {
1676
+ --_cs-dialog-safe-top: max(4dvh, env(safe-area-inset-top, 0px));
1677
+ max-inline-size: calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
1678
+ }
1679
+ }
1680
+ }
1681
+
1682
+ /* ---- DataTable ---- */
1683
+ .cs-table-wrap { overflow: auto; }
1684
+ .cs-table-wrap--status { padding: var(--cs-space-4, 16px) 0; }
1685
+ .cs-table { border-collapse: collapse; color: var(--cs-color-text-primary, #45210e); inline-size: 100%; }
1686
+ .cs-table th, .cs-table td {
1687
+ border-block-end: 1px solid var(--cs-color-border-subtle, var(--_cs-border-subtle));
1688
+ padding: 0.625rem 0.75rem; text-align: start;
1689
+ }
1690
+ .cs-table th.cs-table__cell--numeric,
1691
+ .cs-table td.cs-table__cell--numeric {
1692
+ font-variant-numeric: tabular-nums;
1693
+ text-align: end;
1694
+ }
1695
+ .cs-table thead th {
1696
+ font-size: var(--cs-font-size-xs, 0.75rem); text-transform: uppercase;
1697
+ letter-spacing: var(--cs-letter-spacing-caps, 0.08em); color: var(--cs-color-text-muted, #3f2d21);
1698
+ }
1699
+ .cs-table caption { font-weight: 700; margin-block-end: 0.5rem; text-align: start; }
1700
+ .cs-table__empty { color: var(--cs-color-text-muted, #3f2d21); }
1701
+
1702
+ /* ---- AIDisclosureBadge ---- */
1703
+ .cs-ai-disclosure { display: inline-block; position: relative; }
1704
+ .cs-ai-disclosure__badge {
1705
+ background: var(--cs-color-semantic-info, #1d4ed8); border: 0; border-radius: 999px;
1706
+ color: var(--cs-color-semantic-info-fg, #ffffff); font: inherit; font-size: 0.875rem; font-weight: 700;
1707
+ min-block-size: 32px; padding: 0.25rem 0.75rem; cursor: pointer;
1708
+ }
1709
+ .cs-ai-disclosure__panel {
1710
+ background: var(--cs-color-surface-panel, #ffffff);
1711
+ color: var(--cs-color-text-primary, #45210e);
1712
+ border: 1px solid var(--cs-color-border-subtle, var(--_cs-border-subtle)); border-radius: var(--cs-radius-md, 8px);
1713
+ box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(31, 19, 11, 0.08));
1714
+ display: grid; gap: 0.375rem; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
1715
+ min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);
1716
+ }
1717
+ .cs-ai-disclosure__sources { color: var(--cs-color-text-muted, #3f2d21); font-size: 0.8125rem; }
1718
+
1719
+ /* ---- HumanReviewGate ---- */
1720
+ .cs-review-gate {
1721
+ border: 1px solid var(--cs-color-semantic-warning, #92400e);
1722
+ border-radius: var(--cs-radius-md, 8px); color: var(--cs-color-text-primary, #45210e);
1723
+ display: grid; gap: 0.75rem; padding: var(--cs-space-4, 16px);
1724
+ background: color-mix(in oklab, var(--cs-color-semantic-warning, #92400e) 5%, var(--cs-color-surface-panel, #fff));
1725
+ }
1726
+ .cs-review-gate__risk {
1727
+ color: var(--cs-color-semantic-warning-text, #441801); font-weight: 700;
1728
+ text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8125rem;
1729
+ }
1730
+ .cs-review-gate__summary { margin: 0; }
1731
+ .cs-review-gate__reviewer { margin: 0; color: var(--cs-color-text-muted, #3f2d21); font-size: 0.875rem; }
1732
+
1733
+ /* ---- Logo ---- */
1734
+ .cs-logo { block-size: auto; display: inline-block; vertical-align: middle; }
1735
+
1736
+ /* ---- UI font binding: components consume the brand UI-font token ---- */
1737
+ .cs-button, .cs-field, .cs-field__control, .cs-dialog, .cs-table,
1738
+ .cs-ai-disclosure, .cs-review-gate, .cs-logo {
1739
+ font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
1740
+ }
1741
+
1742
+ /* ===== base/forms.css ===== */
1743
+ /* CyberSkill — form controls (.cs-*). Built on the design tokens; native
1744
+ * controls use accent-color for brand-tinted checks/radios (accessible + minimal). */
1745
+
1746
+ /* Select — reuses .cs-field label/description/error */
1747
+ .cs-select { position: relative; display: block; }
1748
+ .cs-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
1749
+ .cs-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
1750
+ .cs-select select.cs-field__control:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
1751
+
1752
+ /* NativeSelect — lean progressive-enhancement companion beside Select */
1753
+ .cs-native-select { position: relative; display: block; }
1754
+ .cs-native-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
1755
+ .cs-native-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
1756
+ .cs-native-select select.cs-field__control:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
1757
+ .cs-native-select--sm select.cs-field__control { min-block-size: 36px; padding-block: 6px; font-size: var(--cs-font-size-sm); }
1758
+ .cs-native-select--md select.cs-field__control { min-block-size: 44px; }
1759
+
1760
+ /* Checkbox + Radio — native, brand accent */
1761
+ .cs-check, .cs-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); line-height: 1.4; }
1762
+ .cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); cursor: pointer; }
1763
+ .cs-check.is-disabled, .cs-radio.is-disabled { opacity: 0.55; cursor: not-allowed; }
1764
+ .cs-check__text, .cs-radio__text { display: grid; gap: 2px; }
1765
+ .cs-check__desc, .cs-radio__desc { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }
1766
+ .cs-radio-group { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
1767
+ .cs-radio-group > legend { font-weight: 700; padding: 0; margin-block-end: 6px; }
1768
+
1769
+ /* Switch — custom track/knob */
1770
+ .cs-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
1771
+ .cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
1772
+ .cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }
1773
+ .cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cs-color-surface-panel, #fff); box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
1774
+ .cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); }
1775
+ .cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }
1776
+ .cs-switch input:focus-visible + .cs-switch__track { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
1777
+ .cs-switch:focus-within { outline-style: solid; outline-width: 2px; outline-color: var(--cs-color-text-primary); outline-offset: 4px; border-radius: 6px; }
1778
+ .cs-switch.is-disabled { opacity: 0.55; cursor: not-allowed; }
1779
+
1780
+ /* Textarea reuses .cs-field; give it sane sizing */
1781
+ textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: var(--cs-font-lineHeight-body); }
1782
+
1783
+ /* ===== base/feedback.css ===== */
1784
+ /* CyberSkill — feedback + status (.cs-*). Semantic colour never the only signal. */
1785
+
1786
+ /* Badge — compact status label */
1787
+ .cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; padding: 3px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
1788
+ .cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
1789
+ .cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }
1790
+ [data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--solid { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); }
1791
+ [data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--ochre { background: var(--cs-accent-tint); color: var(--cs-color-text-accent); border-color: color-mix(in oklab, var(--cs-accent) 55%, transparent); }
1792
+ .cs-badge--success { background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg); border-color: transparent; }
1793
+ .cs-badge--danger { background: var(--cs-color-semantic-danger); color: var(--cs-color-semantic-danger-fg); border-color: transparent; }
1794
+ .cs-badge--warning { background: var(--cs-color-semantic-warning); color: var(--cs-color-semantic-warning-fg); border-color: transparent; }
1795
+ .cs-badge--info { background: var(--cs-color-semantic-info); color: var(--cs-color-semantic-info-fg); border-color: transparent; }
1796
+ .cs-badge__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
1797
+
1798
+ /* Tag / Chip — removable */
1799
+ .cs-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; padding: 5px 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
1800
+ .cs-tag__close { display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; padding: 0; }
1801
+ .cs-tag__close:hover { background: color-mix(in oklab, var(--cs-color-brand-umber) 12%, transparent); }
1802
+
1803
+ /* Alert / Banner */
1804
+ .cs-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 16px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); align-items: start; }
1805
+ .cs-alert__icon { color: var(--cs-color-text-accent); display: grid; place-items: start; padding-block-start: 1px; }
1806
+ .cs-alert__title { font-weight: 700; margin: 0 0 2px; }
1807
+ .cs-alert__body { margin: 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
1808
+ .cs-alert__dismiss { appearance: none; border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; font-size: var(--cs-font-size-md, 1.125rem); line-height: 1; padding: 0 2px; border-radius: var(--cs-radius-sm); }
1809
+ .cs-alert__dismiss:hover { color: var(--cs-color-text-primary); }
1810
+ .cs-alert__dismiss:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
1811
+ .cs-alert--info { border-inline-start: 4px solid var(--cs-color-semantic-info); }
1812
+ .cs-alert--info .cs-alert__icon { color: var(--cs-color-semantic-info-text); }
1813
+ .cs-alert--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }
1814
+ .cs-alert--success .cs-alert__icon { color: var(--cs-color-semantic-success-text); }
1815
+ .cs-alert--warning { border-inline-start: 4px solid var(--cs-color-semantic-warning); }
1816
+ .cs-alert--warning .cs-alert__icon { color: var(--cs-color-semantic-warning-text); }
1817
+ .cs-alert--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }
1818
+ .cs-alert--danger .cs-alert__icon { color: var(--cs-color-semantic-danger-text); }
1819
+
1820
+ /* Toast */
1821
+ .cs-toast-stack { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: var(--cs-depth-toast); display: grid; gap: 10px; max-inline-size: min(380px, calc(100% - 40px)); }
1822
+ .cs-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-md); color: var(--cs-color-text-primary); animation: cs-toast-in var(--cs-duration-base) var(--cs-ease-entrance); }
1823
+ .cs-toast__icon { color: var(--cs-color-text-accent); }
1824
+ .cs-toast--default { border-inline-start: 4px solid var(--cs-color-semantic-info); }
1825
+ .cs-toast--default .cs-toast__icon { color: var(--cs-color-semantic-info-text); }
1826
+ .cs-toast--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }
1827
+ .cs-toast--success .cs-toast__icon { color: var(--cs-color-semantic-success-text); }
1828
+ .cs-toast--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }
1829
+ .cs-toast--danger .cs-toast__icon { color: var(--cs-color-semantic-danger-text); }
1830
+ .cs-toast__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
1831
+ .cs-toast__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 2px; }
1832
+ .cs-toast__close { border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); padding: 0; display: grid; place-items: center; }
1833
+ @keyframes cs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
1834
+ @media (prefers-reduced-motion: reduce) { .cs-toast { animation: none; } }
1835
+
1836
+ /* Spinner */
1837
+ .cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-accent-strong) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-accent-strong) 22%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); animation: cs-spin 0.62s linear infinite; }
1838
+ @media (prefers-reduced-motion: reduce) { .cs-spinner { animation: none; } }
1839
+
1840
+ /* Progress bar */
1841
+ .cs-progress { inline-size: 100%; block-size: 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); overflow: hidden; }
1842
+ .cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-color-text-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
1843
+ .cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
1844
+ .cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); box-shadow: none; }
1845
+
1846
+ /* Skeleton */
1847
+ .cs-skeleton { display: block; border-radius: var(--cs-radius-sm); background: linear-gradient(90deg, var(--cs-color-surface-raised) 25%, color-mix(in oklab, var(--cs-color-surface-raised) 55%, var(--cs-color-surface-panel)) 37%, var(--cs-color-surface-raised) 63%); background-size: 400% 100%; animation: cs-shimmer 1.4s ease infinite; }
1848
+ .cs-skeleton--text { block-size: 0.75em; margin-block: 0.25em; }
1849
+ .cs-skeleton--circle { border-radius: 50%; }
1850
+ @keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
1851
+ @media (prefers-reduced-motion: reduce) { .cs-skeleton { animation: none; } }
1852
+
1853
+ /* ===== base/data.css ===== */
1854
+ /* CyberSkill — data display + layout (.cs-*). */
1855
+
1856
+ /* Card */
1857
+ .cs-card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); color: var(--cs-color-text-primary); overflow: hidden; }
1858
+ .cs-card--flat { box-shadow: none; }
1859
+ .cs-card--raised { background: var(--cs-color-surface-raised); }
1860
+ .cs-card--featured { background: color-mix(in oklab, var(--cs-accent) 12%, var(--cs-color-surface-raised)); border-color: var(--cs-accent); box-shadow: var(--cs-shadow-md); }
1861
+ .cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
1862
+ .cs-card--interactive:hover { border-color: var(--cs-accent); box-shadow: var(--cs-shadow-md); }
1863
+ .cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-sm); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
1864
+ .cs-card--flat.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
1865
+ .cs-card--interactive:active { transform: translateY(1px); }
1866
+ .cs-card__media { display: block; inline-size: 100%; }
1867
+ .cs-card__header { padding: 18px 20px 0; }
1868
+ .cs-card__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; line-height: var(--cs-font-lineHeight-heading); }
1869
+ .cs-card__subtitle { margin: 4px 0 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
1870
+ .cs-card__body { padding: 16px 20px; }
1871
+ .cs-card__body > :first-child { margin-block-start: 0; }
1872
+ .cs-card__body > :last-child { margin-block-end: 0; }
1873
+ .cs-card__footer { padding: 12px 20px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
1874
+
1875
+ /* Stat */
1876
+ .cs-stat { display: grid; gap: 3px; }
1877
+ .cs-stat__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
1878
+ .cs-stat__value { font-size: var(--cs-font-size-3xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--cs-letter-spacing-tight); font-variant-numeric: tabular-nums; }
1879
+ .cs-stat__value:lang(vi) { line-height: 1.22; }
1880
+ .cs-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cs-font-size-sm); font-weight: 700; }
1881
+ .cs-stat__delta--up { color: var(--cs-color-semantic-success-text); }
1882
+ .cs-stat__delta--down { color: var(--cs-color-semantic-danger-text); }
1883
+ .cs-stat__delta--flat { color: var(--cs-color-text-muted); }
1884
+
1885
+ /* Avatar */
1886
+ .cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }
1887
+ .cs-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
1888
+ .cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--cs-font-size-xs); }
1889
+ .cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: var(--cs-font-size-sm); }
1890
+ .cs-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--cs-font-size-lg); }
1891
+ .cs-avatar--square { border-radius: var(--cs-radius-md); }
1892
+ .cs-avatar-group { display: inline-flex; }
1893
+ .cs-avatar-group > .cs-avatar { box-shadow: 0 0 0 2px var(--cs-color-surface-panel); }
1894
+ .cs-avatar-group > .cs-avatar + .cs-avatar { margin-inline-start: -10px; }
1895
+
1896
+ /* Tooltip */
1897
+ .cs-tooltip { position: relative; display: inline-flex; }
1898
+ .cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: normal; inline-size: max-content; max-inline-size: 240px; overflow-wrap: break-word; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent), var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
1899
+ .cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }
1900
+ .cs-tooltip:not([data-managed]):hover .cs-tooltip__bubble, .cs-tooltip:not([data-managed]):focus-within .cs-tooltip__bubble, .cs-tooltip[data-open="true"] .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
1901
+
1902
+ /* Divider */
1903
+ .cs-divider { border: 0; block-size: 1px; background: var(--cs-color-border-default); margin-block: var(--cs-space-4); }
1904
+ .cs-divider--label { display: flex; align-items: center; gap: 12px; background: none; block-size: auto; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
1905
+ .cs-divider--label::before, .cs-divider--label::after { content: ""; flex: 1; block-size: 1px; background: var(--cs-color-border-default); }
1906
+ .cs-divider--vertical { inline-size: 1px; block-size: auto; align-self: stretch; margin-inline: var(--cs-space-4); margin-block: 0; }
1907
+
1908
+ /* ScrollArea — focusable overflow for dense panels */
1909
+ .cs-scroll-area {
1910
+ overflow: auto;
1911
+ overscroll-behavior: contain;
1912
+ outline: none;
1913
+ border-radius: var(--cs-radius-md);
1914
+ scrollbar-color: color-mix(in oklab, var(--cs-color-brand-umber) 35%, transparent) transparent;
1915
+ scrollbar-width: thin;
1916
+ }
1917
+ .cs-scroll-area:focus-visible {
1918
+ outline: 2px solid var(--cs-color-text-primary);
1919
+ outline-offset: -2px;
1920
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
1921
+ }
1922
+
1923
+ /* AspectRatio — CSS aspect-ratio lock for media */
1924
+ .cs-aspect-ratio {
1925
+ position: relative;
1926
+ display: block;
1927
+ inline-size: 100%;
1928
+ overflow: hidden;
1929
+ border-radius: var(--cs-radius-md);
1930
+ }
1931
+ .cs-aspect-ratio > * {
1932
+ position: absolute;
1933
+ inset: 0;
1934
+ inline-size: 100%;
1935
+ block-size: 100%;
1936
+ }
1937
+ .cs-aspect-ratio > img,
1938
+ .cs-aspect-ratio > video {
1939
+ object-fit: cover;
1940
+ display: block;
1941
+ }
1942
+
1943
+ /* Hoverable tooltip and a transparent bridge across the visual trigger gap. */
1944
+ .cs-tooltip[data-open="true"] .cs-tooltip__bubble { pointer-events: auto; }
1945
+ .cs-tooltip[data-managed] .cs-tooltip__bubble::before { content: ""; position: absolute; inset-block-start: 100%; inset-inline: 0; block-size: 8px; }
1946
+
1947
+ /* Portaled tooltip arrows/hover bridges follow the resolved physical side. */
1948
+ .cs-tooltip__bubble[data-cs-placement^="bottom"]::after { top: auto; bottom: 100%; left: 50%; right: auto; transform: translateX(-50%); border-color: transparent; border-bottom-color: var(--cs-color-brand-umber); }
1949
+ .cs-tooltip__bubble[data-cs-placement^="left"]::after { top: 50%; bottom: auto; left: 100%; right: auto; transform: translateY(-50%); border-color: transparent; border-left-color: var(--cs-color-brand-umber); }
1950
+ .cs-tooltip__bubble[data-cs-placement^="right"]::after { top: 50%; bottom: auto; left: auto; right: 100%; transform: translateY(-50%); border-color: transparent; border-right-color: var(--cs-color-brand-umber); }
1951
+ .cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="bottom"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="bottom"]::before { top: auto; bottom: 100%; left: 0; right: 0; block-size: 8px; }
1952
+ .cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="left"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="left"]::before { top: 0; bottom: 0; left: 100%; right: auto; inline-size: 8px; block-size: auto; }
1953
+ .cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="right"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="right"]::before { top: 0; bottom: 0; left: auto; right: 100%; inline-size: 8px; block-size: auto; }
1954
+
1955
+ .cs-tooltip__bubble[data-cs-placement] { white-space: normal; overflow-wrap: anywhere; }
1956
+
1957
+ [data-cs-floating-root][data-open="true"] > .cs-tooltip__bubble { opacity: 1; pointer-events: auto; }
1958
+ [data-cs-floating-root][data-managed] > .cs-tooltip__bubble::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
1959
+
1960
+ /* ===== base/navigation.css ===== */
1961
+ /* CyberSkill — navigation (.cs-*). */
1962
+
1963
+ /* Tabs */
1964
+ .cs-tabs { display: flex; gap: 4px; overflow-x: auto; border-block-end: 1px solid var(--cs-color-border-default); }
1965
+ .cs-tab { flex-shrink: 0; appearance: none; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); padding: 10px 14px; cursor: pointer; position: relative; border-block-end: 2px solid transparent; margin-block-end: 0; display: inline-flex; align-items: center; gap: 7px; }
1966
+ .cs-tab:hover { color: var(--cs-color-text-primary); }
1967
+ .cs-tab[aria-selected="true"] { color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); border-block-end-color: var(--cs-accent); }
1968
+ .cs-tab:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: -3px; border-radius: var(--cs-radius-sm); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
1969
+ .cs-tab__count { font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-full); padding: 1px 7px; }
1970
+
1971
+ /* Breadcrumb */
1972
+ .cs-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }
1973
+ .cs-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
1974
+ .cs-breadcrumb a { color: var(--cs-color-text-muted); text-decoration: none; }
1975
+ .cs-breadcrumb a:hover { color: var(--cs-color-text-accent); }
1976
+ .cs-breadcrumb__sep { color: var(--cs-color-border-default); }
1977
+ .cs-breadcrumb__current { color: var(--cs-color-text-primary); font-weight: 600; }
1978
+
1979
+ /* Pagination */
1980
+ .cs-pagination { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
1981
+ .cs-pagination button { min-inline-size: 38px; block-size: 38px; padding: 0 10px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md); font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); cursor: pointer; display: inline-grid; place-items: center; }
1982
+ .cs-pagination button:hover:not(:disabled) { border-color: var(--cs-accent); }
1983
+ .cs-pagination button[aria-current="page"] { background: var(--_cs-light, var(--cs-component-button-primary-bg))var(--_cs-dark, var(--cs-component-button-primary-bg)); color: var(--_cs-light, var(--cs-component-button-primary-fg))var(--_cs-dark, var(--cs-component-button-primary-fg)); border-color: transparent; }
1984
+ .cs-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
1985
+ .cs-pagination__ellipsis { padding: 0 4px; color: var(--cs-color-text-muted); }
1986
+
1987
+ /* Menu / Dropdown */
1988
+ .cs-menu { position: relative; display: inline-block; }
1989
+ .cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; z-index: var(--cs-depth-dropdown, 60); display: grid; gap: 2px; }
1990
+ .cs-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }
1991
+ .cs-menu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
1992
+ .cs-menu__item:hover { background: var(--cs-color-surface-raised); }
1993
+ .cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -3px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
1994
+ .cs-menu__item--danger { color: var(--cs-color-semantic-danger-text); }
1995
+ .cs-menu__item--danger:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger) 10%, transparent); }
1996
+ .cs-menu__sep { block-size: 1px; background: var(--cs-color-border-default); margin: 4px 2px; }
1997
+ .cs-menu__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 6px 10px 2px; }
1998
+
1999
+ /* ===== base/ai.css ===== */
2000
+ /* CyberSkill — AI-native surfaces (.cs-*). The brand is AI-native: Lumi (the
2001
+ * golden genie) converses, then hands clear wishes to a human. These pair with
2002
+ * AIDisclosureBadge + HumanReviewGate (base/components.css). */
2003
+
2004
+ /* PromptInput */
2005
+ .cs-prompt { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); padding: 10px 12px; display: grid; gap: 8px; }
2006
+ .cs-prompt.is-invalid, .is-invalid .cs-prompt, .cs-prompt[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2007
+ .cs-prompt:focus-within {
2008
+ border-color: var(--cs-color-text-primary);
2009
+ outline: 2px solid var(--cs-color-text-primary);
2010
+ outline-offset: 2px;
2011
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
2012
+ }
2013
+ .cs-prompt__field { border: 0; background: transparent; resize: none; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); min-height: 44px; outline: 0; inline-size: 100%; line-height: var(--cs-font-lineHeight-body); }
2014
+ .cs-prompt__field::placeholder { color: var(--cs-color-text-muted); }
2015
+ .cs-prompt__bar { display: flex; align-items: center; gap: 10px; }
2016
+ .cs-prompt__hint { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: auto; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
2017
+ .cs-prompt__hint svg { color: var(--cs-color-brand-ochre); }
2018
+
2019
+ /* ChatMessage */
2020
+ .cs-chat { display: grid; gap: 14px; }
2021
+ .cs-chat-msg { display: flex; gap: 10px; align-items: flex-start; }
2022
+ .cs-chat-msg--user { flex-direction: row-reverse; }
2023
+ .cs-chat-msg__avatar { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
2024
+ .cs-chat-msg--lumi .cs-chat-msg__avatar { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
2025
+ .cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-weight: 700; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
2026
+ .cs-chat-msg__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
2027
+ .cs-chat-msg__col { display: grid; gap: 3px; max-inline-size: 80%; }
2028
+ .cs-chat-msg--user .cs-chat-msg__col { justify-items: end; }
2029
+ .cs-chat-msg__name { font-size: var(--cs-font-size-xs); font-weight: 700; color: var(--cs-color-text-muted); }
2030
+ .cs-chat-msg__bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
2031
+ .cs-chat-msg--lumi .cs-chat-msg__bubble { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-end-start-radius: 4px; color: var(--cs-color-text-primary); }
2032
+ .cs-chat-msg--user .cs-chat-msg__bubble { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-end-end-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
2033
+
2034
+ /* ConfidenceMeter */
2035
+ .cs-confidence { display: grid; gap: 6px; font-family: var(--cs-font-family-ui); }
2036
+ .cs-confidence__head { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); }
2037
+ .cs-confidence__level { font-weight: 700; letter-spacing: 0; text-transform: none; font-size: var(--cs-font-size-sm); }
2038
+ .cs-confidence__track { display: flex; gap: 3px; }
2039
+ .cs-confidence__seg { block-size: 8px; flex: 1; border-radius: 2px; background: var(--cs-color-surface-raised); }
2040
+
2041
+ /* ---- AI-native wave 2 — Lumi's conversational surfaces (merged from ai2.css) ---- */
2042
+
2043
+ /* PromptSuggestions (wish chips) */
2044
+ .cs-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
2045
+ .cs-suggest button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); border-radius: var(--cs-radius-full); padding: 8px 14px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
2046
+ .cs-suggest button:hover { border-color: var(--cs-color-brand-ochre); background: color-mix(in oklab, var(--cs-color-brand-ochre) 8%, var(--cs-color-surface-panel)); }
2047
+ .cs-suggest button svg { color: var(--cs-color-brand-ochre); }
2048
+
2049
+ /* TypingIndicator */
2050
+ .cs-typing { display: inline-flex; align-items: center; gap: 5px; padding: 12px 16px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: 14px; border-end-start-radius: 4px; }
2051
+ .cs-typing span { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--cs-color-text-muted); animation: cs-typing 1.2s var(--cs-ease-standard) infinite; }
2052
+ .cs-typing span:nth-child(2) { animation-delay: 0.18s; }
2053
+ .cs-typing span:nth-child(3) { animation-delay: 0.36s; }
2054
+ @keyframes cs-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
2055
+ @media (prefers-reduced-motion: reduce) { .cs-typing span { animation: none; opacity: 0.7; } }
2056
+
2057
+ /* CitationList */
2058
+ .cs-citations { display: grid; gap: 8px; }
2059
+ .cs-citations__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
2060
+ .cs-citation { display: flex; align-items: flex-start; gap: 9px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); text-decoration: none; }
2061
+ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
2062
+ .cs-citation__num { flex: none; inline-size: 20px; block-size: 20px; border-radius: 6px; background: color-mix(in oklab, var(--cs-color-semantic-info) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-info-text); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-2xs); font-weight: 700; display: grid; place-items: center; }
2063
+ .cs-citation__text { line-height: 1.4; }
2064
+ .cs-citation__src { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }
2065
+
2066
+ /* LumiAvatar */
2067
+ .cs-lumi { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ffd873, var(--cs-color-brand-ochre)); color: var(--cs-color-brand-umber); flex: none; }
2068
+ .cs-lumi img { inline-size: 100%; block-size: 100%; object-fit: cover; }
2069
+ .cs-lumi--sm { inline-size: 32px; block-size: 32px; }
2070
+ .cs-lumi--md { inline-size: 44px; block-size: 44px; }
2071
+ .cs-lumi--lg { inline-size: 64px; block-size: 64px; }
2072
+ .cs-lumi--ring { box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-color-brand-ochre) 34%, transparent); }
2073
+
2074
+ /* ===== base/controls.css ===== */
2075
+ /* CyberSkill — controls wave 2 (.cs-*). */
2076
+
2077
+ /* SearchField */
2078
+ .cs-search { display: flex; align-items: center; gap: var(--cs-space-2); border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-full); padding: 0 14px; min-height: 44px; background: var(--cs-color-surface-panel); }
2079
+ .cs-search.is-invalid, .is-invalid .cs-search, .cs-search[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2080
+ .cs-search:focus-within {
2081
+ border-color: var(--cs-color-text-primary);
2082
+ outline: 2px solid var(--cs-color-text-primary);
2083
+ outline-offset: 2px;
2084
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
2085
+ }
2086
+ .cs-search svg { color: var(--cs-color-text-muted); flex: none; }
2087
+ .cs-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: 0; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
2088
+ .cs-search input::placeholder { color: var(--cs-color-text-muted); }
2089
+ .cs-search__clear { border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 50%; }
2090
+ .cs-search__clear:hover { color: var(--cs-color-text-primary); }
2091
+
2092
+ /* NumberField / stepper */
2093
+ .cs-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
2094
+ .cs-stepper.is-invalid, .is-invalid .cs-stepper, .cs-stepper[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2095
+ .cs-stepper:focus-within {
2096
+ border-color: var(--cs-color-text-primary);
2097
+ outline: 2px solid var(--cs-color-text-primary);
2098
+ outline-offset: 2px;
2099
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
2100
+ }
2101
+ .cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: var(--cs-font-size-md); font-weight: 700; display: grid; place-items: center; }
2102
+ .cs-stepper button:hover:not(:disabled) { color: var(--cs-color-text-accent); }
2103
+ .cs-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }
2104
+ .cs-stepper input { inline-size: 56px; text-align: center; border: 0; border-inline: 1px solid var(--cs-color-border-default); background: transparent; font: inherit; font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); outline: 0; min-height: 42px; -moz-appearance: textfield; }
2105
+ .cs-stepper input::-webkit-outer-spin-button, .cs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
2106
+
2107
+ /* Slider (native range) */
2108
+ .cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); block-size: 22px; cursor: pointer; }
2109
+ .cs-slider:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 4px; border-radius: var(--cs-radius-full); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2110
+
2111
+ /* FileUpload / dropzone */
2112
+ .cs-dropzone { display: grid; gap: 6px; justify-items: center; text-align: center; border: 2px dashed var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 28px 24px; background: var(--cs-color-surface-raised); cursor: pointer; color: var(--cs-color-text-primary); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), background var(--cs-duration-fast) var(--cs-ease-standard); }
2113
+ .cs-dropzone:hover, .cs-dropzone.is-dragging { border-color: var(--cs-accent); background: color-mix(in oklab, var(--cs-accent) 8%, var(--cs-color-surface-panel)); }
2114
+ .cs-dropzone__icon { color: var(--cs-color-text-accent); }
2115
+ .cs-dropzone__title { font-weight: 700; }
2116
+ .cs-dropzone__hint { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }
2117
+
2118
+ /* SegmentedControl (matches Status Hub lens switcher) */
2119
+ .cs-segmented { display: inline-flex; gap: 4px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }
2120
+ .cs-segmented button { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
2121
+ .cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--_cs-light, var(--cs-component-button-primary-bg))var(--_cs-dark, var(--cs-component-button-primary-bg)); color: var(--_cs-light, var(--cs-component-button-primary-fg))var(--_cs-dark, var(--cs-component-button-primary-fg)); }
2122
+
2123
+ /* StatusIndicator */
2124
+ .cs-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; color: var(--cs-color-text-primary); }
2125
+ .cs-status__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cs-color-text-muted); flex: none; }
2126
+ .cs-status--online .cs-status__dot { background: var(--cs-color-semantic-success); }
2127
+ .cs-status--busy .cs-status__dot { background: var(--cs-color-brand-ochre); }
2128
+ .cs-status--offline .cs-status__dot { background: var(--cs-color-text-muted); }
2129
+ .cs-status--error .cs-status__dot { background: var(--cs-color-semantic-danger); }
2130
+ .cs-status--pulse .cs-status__dot { box-shadow: 0 0 0 0 currentColor; animation: cs-pulse 1.8s var(--cs-ease-standard) infinite; color: var(--cs-color-semantic-success-text); }
2131
+ @keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cs-color-semantic-success) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
2132
+ @media (prefers-reduced-motion: reduce) { .cs-status--pulse .cs-status__dot { animation: none; } }
2133
+
2134
+ /* Kbd */
2135
+ .cs-kbd { display: inline-block; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); line-height: 1; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-block-end-width: 2px; border-radius: 6px; padding: 3px 7px; box-shadow: var(--cs-shadow-xs); }
2136
+
2137
+ /* ---- v3 Batch 2 inputs (Jul 2026): Toggle · Rating · InputOTP · ButtonGroup ---- */
2138
+ .cs-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 14px; min-block-size: 40px; cursor: pointer; transition: background var(--cs-duration-fast, 120ms), border-color var(--cs-duration-fast, 120ms); }
2139
+ .cs-toggle:hover { background: var(--cs-color-surface-raised); }
2140
+ .cs-toggle[aria-pressed="true"] { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); border-color: var(--cs-accent); color: var(--cs-color-text-primary); }
2141
+ .cs-toggle:disabled { opacity: .5; cursor: not-allowed; }
2142
+ .cs-rating { display: inline-flex; gap: 4px; }
2143
+ .cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }
2144
+ .cs-rating button.on { color: var(--cs-color-text-accent); }
2145
+ .cs-rating[data-readonly="true"] button { cursor: default; }
2146
+ .cs-rating button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2147
+ .cs-otp { display: inline-flex; gap: 8px; }
2148
+ .cs-otp input { inline-size: 44px; block-size: 52px; text-align: center; font: 700 22px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); }
2149
+ .cs-otp.is-invalid input, .is-invalid .cs-otp input, .cs-otp input.is-invalid, .cs-otp input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2150
+ .cs-otp input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; border-color: var(--cs-accent); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2151
+ .cs-otp input:disabled { opacity: .5; cursor: not-allowed; background: var(--cs-color-surface-raised); }
2152
+ .cs-btngroup { display: inline-flex; }
2153
+ .cs-btngroup .cs-button { border-radius: 0; }
2154
+ .cs-btngroup .cs-button:first-child { border-start-start-radius: var(--cs-component-button-radius, 8px); border-end-start-radius: var(--cs-component-button-radius, 8px); }
2155
+ .cs-btngroup .cs-button:last-child { border-start-end-radius: var(--cs-component-button-radius, 8px); border-end-end-radius: var(--cs-component-button-radius, 8px); }
2156
+ .cs-btngroup .cs-button + .cs-button { margin-inline-start: -1px; }
2157
+
2158
+ /* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */
2159
+ .cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }
2160
+ .cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px var(--cs-space-3); min-block-size: 44px; }
2161
+ .is-invalid .cs-combobox input, .cs-combobox.is-invalid input, .cs-combobox input.is-invalid, .cs-combobox[aria-invalid="true"] input, .cs-combobox input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
2162
+ .cs-combobox input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2163
+ .cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }
2164
+ .cs-combobox__popup { color: var(--cs-color-text-primary); position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; }
2165
+ .cs-combobox__list { padding: 0; margin: 0; list-style: none; }
2166
+ .cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: var(--cs-font-size-sm); }
2167
+ .cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-primary))var(--_cs-dark, var(--cs-accent-bright)); }
2168
+ .cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
2169
+ .cs-igroup { display: inline-flex; align-items: stretch; min-inline-size: 260px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; }
2170
+ .cs-igroup.is-invalid, .is-invalid .cs-igroup, .cs-igroup[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2171
+ .cs-igroup:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2172
+ .cs-igroup > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 10px 12px; min-block-size: 44px; box-sizing: border-box; }
2173
+ .cs-igroup > input:focus { outline: none; }
2174
+ .cs-igroup__fix { display: flex; align-items: center; padding: 0 10px; color: var(--cs-color-text-muted); background: var(--cs-color-surface-raised); border-inline-end: 1px solid var(--cs-color-border-default); font-size: var(--cs-font-size-sm); }
2175
+ .cs-igroup__fix--suffix { border-inline-end: 0; border-inline-start: 1px solid var(--cs-color-border-default); }
2176
+ .cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }
2177
+ .cs-igroup__btn:hover { color: var(--cs-color-text-primary); }
2178
+ .cs-taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 6px var(--cs-space-2); min-block-size: 44px; box-sizing: border-box; }
2179
+ .cs-taginput.is-invalid, .is-invalid .cs-taginput, .cs-taginput[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2180
+ .cs-taginput:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2181
+ .cs-taginput > input { flex: 1; min-inline-size: 120px; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 6px var(--cs-space-1); }
2182
+ .cs-taginput > input:focus { outline: none; }
2183
+ /* Disabled editing must not dim already committed, noninteractive values. */
2184
+ .cs-field.is-disabled:has(> .cs-taginput) { opacity: 1; }
2185
+ .cs-field.is-disabled > .cs-taginput { background: var(--cs-color-surface-raised); }
2186
+
2187
+ /* ---- v3 Batch 3 (Jul 2026): Calendar · DatePicker · TimePicker ---- */
2188
+ .cs-cal { display: inline-block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: var(--cs-space-3); min-inline-size: 272px; box-shadow: var(--cs-shadow-sm); }
2189
+ .cs-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 700 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
2190
+ .cs-cal__head button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-sm); inline-size: 30px; block-size: 30px; cursor: pointer; font-size: var(--cs-font-size-base); }
2191
+ .cs-cal__head button:hover { background: var(--cs-color-surface-raised); }
2192
+ .cs-cal__wd, .cs-cal__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
2193
+ .cs-cal__wd span { text-align: center; font: 700 10.5px/2 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-color-text-muted); }
2194
+ .cs-cal__grid button { border: 0; background: none; color: var(--cs-color-text-primary); font: 500 13px var(--cs-font-family-ui); block-size: 34px; border-radius: var(--cs-radius-sm); cursor: pointer; }
2195
+ .cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }
2196
+ .cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-color-text-accent); }
2197
+ .cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
2198
+ .cs-cal__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2199
+ .cs-datepicker { position: relative; display: inline-block; max-inline-size: 100%; }
2200
+ .cs-datepicker__field { display: inline-flex; align-items: center; gap: var(--cs-space-2); min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }
2201
+ .cs-datepicker.is-invalid .cs-datepicker__field, .is-invalid .cs-datepicker__field, .cs-datepicker__field.is-invalid, .cs-datepicker__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2202
+ .cs-datepicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2203
+ .cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
2204
+ .cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: max-content; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); }
2205
+ .cs-datepicker__pop .cs-cal { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; overflow-x: auto; }
2206
+ .cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }
2207
+ .cs-timepicker.is-invalid, .is-invalid .cs-timepicker, .cs-timepicker[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2208
+ .cs-timepicker:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2209
+ .cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }
2210
+ .cs-timepicker select:focus { outline: none; }
2211
+
2212
+ /* ---- v3 Batch 4 (Jul 2026): HoverCard · Popconfirm · ContextMenu · FAB · Result · InlineEdit ---- */
2213
+ .cs-hovercard { position: relative; display: inline-block; }
2214
+ .cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }
2215
+ .cs-popconfirm { position: relative; display: inline-block; }
2216
+ .cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }
2217
+ .cs-popconfirm__title { display: block; font: 600 13.5px/1.45 var(--cs-font-family-ui); color: var(--cs-color-text-primary); margin-bottom: 10px; }
2218
+ .cs-popconfirm__actions { display: flex; gap: 8px; justify-content: flex-end; }
2219
+ .cs-ctxmenu-zone { position: relative; }
2220
+ .cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
2221
+ .cs-fab--static { position: static; align-items: flex-start; }
2222
+ .cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), var(--cs-shadow-lg); }
2223
+ .cs-fab__main:hover { filter: brightness(1.05); }
2224
+ .cs-fab__main:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-md); }
2225
+ .cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }
2226
+ .cs-fab--static .cs-fab__dial, .cs-fab__dial--static { flex-direction: row; }
2227
+ .cs-fab__mini { inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-sm); }
2228
+ .cs-result { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px 24px; }
2229
+ .cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); color: var(--cs-color-text-accent); }
2230
+ .cs-result--success .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-success) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-success-text); }
2231
+ .cs-result--error .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-danger) 12%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-danger-text); }
2232
+ .cs-result--warning .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-warning) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-warning-text); }
2233
+ .cs-result__title { margin: 0; font: 800 22px/1.3 var(--cs-heading-family, var(--cs-font-family-ui)); letter-spacing: var(--cs-heading-tracking, -0.01em); color: var(--cs-color-text-primary); }
2234
+ .cs-result__body { margin: 0; max-inline-size: 46ch; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: 1.55; }
2235
+ .cs-result__actions { display: flex; gap: 10px; margin-top: 6px; }
2236
+ .cs-inline-edit__view { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed transparent; background: none; font: inherit; color: var(--cs-color-text-primary); padding: 4px 8px; border-radius: var(--cs-radius-sm); cursor: pointer; }
2237
+ .cs-inline-edit__view:hover { border-color: var(--cs-color-border-default); background: var(--cs-color-surface-raised); }
2238
+ .cs-inline-edit__view svg { color: var(--cs-color-text-muted); }
2239
+ .cs-inline-edit__view .ph { color: var(--cs-color-text-muted); }
2240
+ .cs-inline-edit input { font: inherit; color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-accent); border-radius: var(--cs-radius-sm); padding: 4px 8px; }
2241
+ .cs-inline-edit input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2242
+
2243
+ /* ---- v3 Batch 5 part 1 (Jul 2026): Link · Anchor · Image · Toolbar ---- */
2244
+ .cs-link { color: var(--cs-color-link); text-underline-offset: .15em; }
2245
+ .cs-link:hover { color: var(--cs-color-link-hover); }
2246
+ .cs-link--muted { color: var(--cs-color-text-muted); }
2247
+ .cs-link--standalone { font-weight: 700; text-decoration: none; }
2248
+ .cs-link--standalone:hover { text-decoration: underline; }
2249
+ .cs-anchor { display: grid; gap: 2px; min-inline-size: 180px; border-inline-start: 2px solid var(--cs-color-border-default); }
2250
+ .cs-anchor__title { font: 700 10.5px/1.4 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-text-muted); padding: 2px 12px 6px; }
2251
+ .cs-anchor__item { display: block; padding: 5px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }
2252
+ .cs-anchor__item:hover { color: var(--cs-color-text-primary); }
2253
+ .cs-anchor__item.is-active { color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent-bright)); border-inline-start-color: var(--cs-accent); font-weight: 600; }
2254
+ .cs-image { position: relative; display: inline-block; overflow: hidden; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); max-inline-size: 100%; }
2255
+ .cs-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
2256
+ .cs-image.is-loading { min-inline-size: 120px; min-block-size: 80px; animation: cs-img-shimmer 1.2s ease-in-out infinite alternate; }
2257
+ @keyframes cs-img-shimmer { from { opacity: .55; } to { opacity: .9; } }
2258
+ .cs-image.is-zoomable { cursor: zoom-in; }
2259
+ .cs-image__fallback { display: grid; place-items: center; min-block-size: 80px; block-size: 100%; color: var(--cs-color-text-muted); }
2260
+ .cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 82%, transparent); display: grid; place-items: center; cursor: zoom-out; }
2261
+ .cs-image__zoom img { max-inline-size: 88vw; max-block-size: 86vh; border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-xl); }
2262
+ .cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; /* on-dark-chrome ink */ font-size: var(--cs-font-size-base); cursor: pointer; }
2263
+ .cs-toolbar { display: inline-flex; align-items: center; gap: 4px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 4px; }
2264
+ .cs-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--cs-color-text-primary); font: 600 13px var(--cs-font-family-ui); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; min-block-size: 32px; }
2265
+ .cs-toolbar__btn:hover { background: var(--cs-color-surface-raised); }
2266
+ .cs-toolbar__btn:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2267
+ .cs-toolbar__sep { inline-size: 1px; block-size: 20px; background: var(--cs-color-border-default); margin: 0 4px; }
2268
+ .cs-toolbar__more { position: relative; }
2269
+ .cs-toolbar__more .cs-menu__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); }
2270
+
2271
+ /* ---- v3 Batch 5 part 2 (Jul 2026): Menubar · NavigationMenu · Carousel · Comment ---- */
2272
+ .cs-menubar { display: inline-flex; gap: 2px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 3px; }
2273
+ .cs-menubar__wrap { position: relative; }
2274
+ .cs-menubar__top { border: 0; background: none; font: 600 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 7px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }
2275
+ .cs-menubar__top:hover, .cs-menubar__top.is-open { background: var(--cs-color-surface-raised); }
2276
+ .cs-menubar__wrap .cs-menu__list { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 5px); }
2277
+ .cs-navmenu { display: inline-flex; gap: 4px; align-items: center; }
2278
+ .cs-navmenu__wrap { position: relative; }
2279
+ .cs-navmenu__top { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; text-decoration: none; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 9px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }
2280
+ .cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }
2281
+ .cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: 468px; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); box-sizing: border-box; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }
2282
+ .cs-navmenu__card { min-inline-size: 0; overflow-wrap: anywhere; display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }
2283
+ .cs-navmenu__card:hover { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
2284
+ .cs-navmenu__card b { font-size: var(--cs-font-size-sm); }
2285
+ .cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }
2286
+ .cs-carousel { display: grid; gap: 10px; }
2287
+ .cs-carousel__view { position: relative; overflow: hidden; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
2288
+ .cs-carousel__window { overflow: hidden; min-inline-size: 0; }
2289
+ .cs-carousel__track { display: flex; transition: transform var(--cs-duration-base, 240ms) cubic-bezier(0.2, 0, 0, 1); }
2290
+ .cs-carousel__slide { flex: 0 0 100%; min-inline-size: 100%; }
2291
+ .cs-carousel__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 36px; block-size: 36px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); cursor: pointer; font-size: var(--cs-font-size-md); box-shadow: var(--cs-shadow-sm); }
2292
+ .cs-carousel__nav.prev { inset-inline-start: 10px; }
2293
+ .cs-carousel__nav.next { inset-inline-end: 10px; }
2294
+ /* Keep the 9px mark inside a real, non-overlapping 24px fine-pointer target.
2295
+ * Coarse-pointer rules retain their existing 44px targets and dot paint. */
2296
+ .cs-carousel__dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
2297
+ .cs-carousel__dots button { inline-size: 24px; block-size: 24px; flex: 0 0 24px; border-radius: 999px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; }
2298
+ .cs-carousel__dots button::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 9px; block-size: 9px; border-radius: inherit; background: var(--cs-color-border-default); pointer-events: none; }
2299
+ .cs-carousel__dots button[aria-current="true"]::before { background: var(--cs-color-text-accent); }
2300
+ @media (prefers-reduced-motion: reduce) { .cs-carousel__track { transition: none; } }
2301
+ .cs-comment { display: flex; gap: 10px; }
2302
+ .cs-comment__main { flex: 1; min-inline-size: 0; }
2303
+ .cs-comment__head { display: flex; align-items: baseline; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
2304
+ .cs-comment__meta { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }
2305
+ .cs-comment__body { font-size: var(--cs-font-size-sm); line-height: 1.55; color: var(--cs-color-text-primary); margin: 3px 0 6px; }
2306
+ .cs-comment__actions { display: flex; gap: 12px; }
2307
+ .cs-comment__actions button { border: 0; background: none; padding: 0; font: 600 12.5px var(--cs-font-family-ui); color: var(--cs-color-text-accent); cursor: pointer; }
2308
+ .cs-comment__replies { margin-top: 12px; padding-inline-start: 14px; border-inline-start: 2px solid var(--cs-color-border-default); display: grid; gap: 12px; }
2309
+
2310
+ /* ---- v3 Batch 6a (Jul 2026): Form · Tree · BackTop · Watermark ---- */
2311
+ .cs-form { display: grid; gap: var(--cs-space-4); }
2312
+ /* FIND-015 — visible pending + interaction lock while asyncRules / submit run. */
2313
+ .cs-form.is-pending { opacity: 0.72; }
2314
+ .cs-form.is-pending :is(button, input, select, textarea, [role="button"]) {
2315
+ pointer-events: none;
2316
+ cursor: wait;
2317
+ }
2318
+ .cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: var(--cs-space-3) 14px; font-size: var(--cs-font-size-sm); }
2319
+ .cs-form__summary b { color: var(--cs-color-semantic-danger-text); }
2320
+ .cs-form__summary ul { margin: 6px 0 0; padding-inline-start: 18px; }
2321
+ .cs-formfield { display: grid; gap: 6px; }
2322
+ .cs-formfield__label { font: 600 13px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
2323
+ .cs-formfield__label em { color: var(--cs-color-semantic-danger-text); font-style: normal; }
2324
+ .cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
2325
+ .cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger-text); font-weight: 600; }
2326
+ .cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select, .cs-formfield.is-invalid input, .cs-formfield.is-invalid textarea, .cs-formfield.is-invalid select, .cs-formfield input[aria-invalid="true"], .cs-formfield textarea[aria-invalid="true"], .cs-formfield select[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2327
+ .cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }
2328
+ .cs-tree ul { list-style: none; margin: 0; padding: 0; }
2329
+ .cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }
2330
+ .cs-tree__row:hover { background: var(--cs-color-surface-raised); }
2331
+ .cs-tree__row.is-selected { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }
2332
+ .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-color-text-primary); font-weight: 600; }
2333
+ .cs-tree__twist { inline-size: 20px; block-size: 28px; border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }
2334
+ .cs-tree__label { border: 0; background: none; color: var(--cs-color-text-primary); font: inherit; padding: 4px 6px; cursor: pointer; border-radius: var(--cs-radius-sm); }
2335
+ .cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 80); inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-md); }
2336
+ .cs-backtop:hover { border-color: var(--cs-accent); }
2337
+
2338
+ /* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */
2339
+ .cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
2340
+ .cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
2341
+ .cs-treeselect.is-invalid .cs-treeselect__field, .cs-cascader.is-invalid .cs-treeselect__field, .is-invalid .cs-treeselect__field, .cs-treeselect__field.is-invalid, .cs-treeselect__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
2342
+ .cs-treeselect__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2343
+ .cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
2344
+ .cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
2345
+ .cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }
2346
+ .cs-cascader__col { list-style: none; margin: 0; padding: 6px; min-inline-size: 150px; max-block-size: 240px; overflow: auto; }
2347
+ .cs-cascader__col + .cs-cascader__col { border-inline-start: 1px solid var(--cs-color-border-default); }
2348
+ .cs-cascader__opt { display: flex; justify-content: space-between; gap: 8px; inline-size: 100%; border: 0; background: none; text-align: start; font: 500 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
2349
+ .cs-cascader__opt:hover { background: var(--cs-color-surface-raised); }
2350
+ .cs-cascader__opt.on { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent-bright)); font-weight: 600; }
2351
+ .cs-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; min-inline-size: 0; }
2352
+ .cs-transfer__list { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); min-inline-size: 0; overflow-wrap: anywhere; }
2353
+ .cs-transfer__title { font: 700 12px var(--cs-font-family-ui); padding: 9px 12px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
2354
+ .cs-transfer__list ul { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; max-block-size: 200px; overflow: auto; }
2355
+ .cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; }
2356
+ .cs-transfer__ops { display: grid; gap: 6px; align-content: center; }
2357
+ .cs-mentions { position: relative; display: block; max-inline-size: 420px; }
2358
+ .cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }
2359
+ .cs-mentions__pop button { border: 0; background: none; text-align: start; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
2360
+ .cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--cs-color-text-primary); }
2361
+
2362
+ /* ---- v3 Batch 6c (Jul 2026): ColorPicker · Tour · QRCode ---- */
2363
+ .cs-colorpicker { position: relative; display: inline-block; }
2364
+ .cs-colorpicker__field { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }
2365
+ .cs-colorpicker__field i { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1px solid var(--cs-color-border-default); }
2366
+ .cs-colorpicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2367
+ .cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }
2368
+ .cs-colorpicker__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }
2369
+ .cs-colorpicker__grid button { inline-size: 26px; block-size: 26px; border-radius: 7px; border: 1px solid var(--cs-color-border-default); cursor: pointer; }
2370
+ .cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
2371
+ .cs-colorpicker__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2372
+ .cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }
2373
+ .cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); }
2374
+ .cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
2375
+ .cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 14px 16px; }
2376
+ .cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
2377
+ .cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }
2378
+ .cs-tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
2379
+ .cs-tour__count { font: 600 11px var(--cs-font-family-mono); color: var(--cs-color-text-muted); }
2380
+ .cs-tour__btns { display: flex; gap: 6px; }
2381
+ .cs-qrcode { display: inline-block; padding: 10px; background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }
2382
+
2383
+ /* ---- v3 Batch 7a (Jul 2026): Masonry · Splitter · HotKeys · Dock ---- */
2384
+ .cs-masonry__item { break-inside: avoid; }
2385
+ .cs-splitter { display: flex; align-items: stretch; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
2386
+ .cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }
2387
+ .cs-splitter__bar { inline-size: 8px; cursor: col-resize; background: var(--cs-color-surface-raised); border-inline: 1px solid var(--cs-color-border-default); touch-action: none; }
2388
+ .cs-splitter__bar:hover { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
2389
+ .cs-splitter__bar:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2390
+ .cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); display: grid; place-items: center; }
2391
+ .cs-hotkeys__card { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }
2392
+ .cs-hotkeys__card b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
2393
+ .cs-hotkeys__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
2394
+ .cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
2395
+ .cs-dock { display: inline-flex; align-items: flex-end; gap: 8px; background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); border: 1px solid var(--cs-color-border-default); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(10px); }
2396
+ .cs-dock__item { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; transition: transform var(--cs-duration-fast, 120ms); position: relative; }
2397
+ .cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-color-text-accent); }
2398
+ @media (prefers-reduced-motion: reduce) { .cs-dock__item { transition: none; } }
2399
+
2400
+ /* ---- v3 Batch 7b (Jul 2026): DataGrid · TreeTable · Sortable ---- */
2401
+ .cs-datagrid { overflow: auto; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); }
2402
+ .cs-datagrid .cs-table { margin: 0; }
2403
+ .cs-datagrid thead th { position: sticky; inset-block-start: 0; background: var(--cs-color-surface-raised); z-index: 1; }
2404
+ .cs-datagrid__check { display: inline-flex; align-items: center; justify-content: center; }
2405
+ .cs-datagrid__selcol { inline-size: 36px; text-align: center; }
2406
+ .cs-datagrid__sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
2407
+ .cs-datagrid tr.is-selected td { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }
2408
+ .cs-treetable .cs-treetable__cell { display: inline-flex; align-items: center; gap: 2px; }
2409
+ .cs-sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-inline-size: 380px; }
2410
+ .cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: grab; }
2411
+ .cs-sortable__item.is-dragging { opacity: .5; }
2412
+ .cs-sortable__item.is-over { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }
2413
+ .cs-sortable__grip { color: var(--cs-color-text-muted); }
2414
+ .cs-sortable__label { flex: 1; min-inline-size: 0; }
2415
+ .cs-sortable__ops { display: inline-flex; gap: 4px; margin-inline-start: auto; }
2416
+ .cs-sortable__ops .cs-button { cursor: pointer; }
2417
+ .cs-sortable__ops .cs-button:disabled { opacity: .4; cursor: not-allowed; }
2418
+
2419
+ /* ---- v3 Batch 7c (Jul 2026): Chart · Editor · Terminal ---- */
2420
+ .cs-chart { margin: 0; display: grid; gap: 8px; max-inline-size: 420px; }
2421
+ .cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
2422
+ .cs-chart__legend b { color: var(--cs-color-text-primary); }
2423
+ .cs-editor { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); max-inline-size: 460px; }
2424
+ .cs-editor__bar { display: flex; gap: 2px; padding: 6px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
2425
+ .cs-editor__area { padding: 12px 14px; font: 400 14px/1.6 var(--cs-font-family-ui); color: var(--cs-color-text-primary); outline: none; }
2426
+ .cs-editor__area:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: inset 0 0 0 5px var(--cs-color-accent-ochre); border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md); }
2427
+ /* Terminal — always-dark chrome (FIND-010: hex only in local custom props) */
2428
+ .cs-terminal {
2429
+ --cs-term-border: #3a2a1c;
2430
+ --cs-term-bar: #2a1a0d;
2431
+ --cs-term-dot: #5b4331;
2432
+ --cs-term-bg: #1a1108;
2433
+ --cs-term-fg: #f5ead9;
2434
+ --cs-term-muted: #c9b7a3;
2435
+ max-inline-size: 480px; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-term-border); box-shadow: var(--cs-shadow-md);
2436
+ }
2437
+ .cs-terminal__bar { display: flex; align-items: center; gap: 6px; background: var(--cs-term-bar); color: var(--cs-term-muted); font: 600 11px var(--cs-font-family-mono); padding: 8px 12px; }
2438
+ .cs-terminal__bar i { inline-size: 10px; block-size: 10px; border-radius: 999px; background: var(--cs-term-dot); }
2439
+ .cs-terminal__bar span { margin-inline-start: 8px; }
2440
+ .cs-terminal__body { background: var(--cs-term-bg); color: var(--cs-term-fg); font: 500 13px/1.7 var(--cs-font-family-mono); padding: 12px 14px; min-block-size: 130px; }
2441
+ .cs-terminal__line { display: flex; gap: 8px; align-items: center; }
2442
+ .cs-terminal__line .p { color: var(--cs-color-brand-ochre); }
2443
+ .cs-terminal__line input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
2444
+ /* Wrapper ring — input clears outline for chrome; focus-within restores ≥3:1 indicator (FIND-038). */
2445
+ .cs-terminal:focus-within {
2446
+ outline: 2px solid var(--cs-color-text-primary);
2447
+ outline-offset: 2px;
2448
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
2449
+ }
2450
+ .cs-terminal__out { color: var(--cs-term-muted); white-space: pre-wrap; }
2451
+
2452
+ /* ===== base/collections.css ===== */
2453
+ /* CyberSkill — collections + content wave 2 (.cs-*). */
2454
+
2455
+ /* List */
2456
+ .cs-list { display: grid; gap: 2px; }
2457
+ .cs-list__item { display: flex; align-items: center; gap: var(--cs-space-3); padding: 10px var(--cs-space-3); border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); text-align: start; }
2458
+ .cs-list__item--button { border: 0; background: transparent; font: inherit; inline-size: 100%; cursor: pointer; }
2459
+ @media (hover: hover) {
2460
+ .cs-list__item--button:hover { background: var(--cs-color-surface-raised); }
2461
+ }
2462
+ .cs-list__lead { flex: none; color: var(--cs-color-text-accent); display: grid; place-items: center; }
2463
+ .cs-list__main { flex: 1; min-inline-size: 0; display: grid; gap: 1px; }
2464
+ .cs-list__title { font-weight: 600; font-size: var(--cs-font-size-sm); }
2465
+ .cs-list__sub { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
2466
+ .cs-list__trail { flex: none; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
2467
+
2468
+ /* Item — settings / nav / list row chrome (sibling of ListItem, first-class) */
2469
+ .cs-item {
2470
+ display: flex; align-items: center; gap: 14px;
2471
+ padding: var(--cs-space-3) 14px; border-radius: var(--cs-radius-md);
2472
+ color: var(--cs-color-text-primary); text-align: start;
2473
+ text-decoration: none; border: 1px solid transparent;
2474
+ background: var(--cs-color-surface-panel);
2475
+ }
2476
+ .cs-item--interactive { cursor: pointer; font: inherit; inline-size: 100%; }
2477
+ button.cs-item--interactive { border: 1px solid transparent; background: var(--cs-color-surface-panel); }
2478
+ @media (hover: hover) {
2479
+ .cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
2480
+ }
2481
+ .cs-item--interactive:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
2482
+ .cs-item.is-selected { border-color: var(--cs-color-text-accent); background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
2483
+ .cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
2484
+ /* Static Item text remains information, rather than an inactive control. */
2485
+ div.cs-item.is-disabled { opacity: 1; }
2486
+ .cs-item__leading { flex: none; display: grid; place-items: center; color: var(--cs-color-text-accent); }
2487
+ .cs-item__main { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
2488
+ .cs-item__title { font-weight: 600; font-size: var(--cs-font-size-sm); line-height: 1.35; }
2489
+ .cs-item__description { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); line-height: 1.4; }
2490
+ .cs-item__trailing { flex: none; display: grid; place-items: center; color: var(--cs-color-text-muted); }
2491
+
2492
+ /* DescriptionList */
2493
+ .cs-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 24px; margin: 0; }
2494
+ .cs-dl dt { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
2495
+ .cs-dl dd { margin: 2px 0 0; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
2496
+
2497
+ /* Timeline */
2498
+ .cs-timeline { display: grid; }
2499
+ .cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: var(--cs-space-5); position: relative; }
2500
+ .cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }
2501
+ .cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }
2502
+ .cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
2503
+ .cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }
2504
+ .cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }
2505
+ .cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }
2506
+ .cs-timeline__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 4px; }
2507
+
2508
+ /* Accordion */
2509
+ .cs-accordion { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); overflow: hidden; background: var(--cs-color-surface-panel); }
2510
+ .cs-accordion__item + .cs-accordion__item { border-block-start: 1px solid var(--cs-color-border-default); }
2511
+ .cs-accordion__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-3); padding: 15px 18px; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; color: var(--cs-color-text-primary); cursor: pointer; text-align: start; }
2512
+ @media (hover: hover) {
2513
+ .cs-accordion__trigger:hover { background: var(--cs-color-surface-raised); }
2514
+ }
2515
+ .cs-accordion__chevron { flex: none; color: var(--cs-color-text-muted); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
2516
+ .cs-accordion__trigger[aria-expanded="true"] .cs-accordion__chevron { transform: rotate(180deg); }
2517
+ .cs-accordion__panel { padding: 0 18px 16px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
2518
+
2519
+ /* Collapsible — light single-panel expand (no Accordion chrome) */
2520
+ .cs-collapsible { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); overflow: hidden; }
2521
+ .cs-collapsible__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; text-align: start; }
2522
+ .cs-collapsible__trigger:hover { background: var(--cs-color-surface-raised); }
2523
+ .cs-collapsible__label { flex: 1; min-inline-size: 0; }
2524
+ .cs-collapsible__chevron { flex: none; color: var(--cs-color-text-muted); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
2525
+ .cs-collapsible__trigger[aria-expanded="true"] .cs-collapsible__chevron { transform: rotate(180deg); }
2526
+ .cs-collapsible__panel { padding: 0 16px 14px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
2527
+ .cs-collapsible__panel > :first-child { margin-block-start: 0; }
2528
+ .cs-collapsible__panel > :last-child { margin-block-end: 0; }
2529
+
2530
+ /* CodeBlock — always-dark chrome (FIND-010: hex only in local custom props) */
2531
+ .cs-code {
2532
+ --cs-code-bg: #2b1e14;
2533
+ --cs-code-fg: #f5ead9;
2534
+ --cs-code-border: #4a3a2c;
2535
+ --cs-code-muted: #c9b7a3;
2536
+ position: relative; background: var(--cs-code-bg); color: var(--cs-code-fg); border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-code-border);
2537
+ }
2538
+ .cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid var(--cs-code-border); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: var(--cs-code-muted); }
2539
+ .cs-code__copy { border: 0; background: transparent; color: var(--cs-code-muted); cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; min-block-size: 32px; padding-inline: 8px; border-radius: var(--cs-radius-sm); }
2540
+ .cs-code__copy:hover { color: var(--cs-color-brand-ochre); }
2541
+ .cs-code__copy:focus-visible { outline-color: var(--cs-code-fg); }
2542
+ .cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-sm); line-height: 1.6; }
2543
+ .cs-code code { font-family: inherit; }
2544
+
2545
+ /* EmptyState */
2546
+ .cs-empty { text-align: center; padding: 48px 24px; display: grid; gap: 8px; justify-items: center; }
2547
+ .cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 24%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); margin-block-end: 6px; }
2548
+ .cs-empty__title { font-size: var(--cs-text-h4); font-weight: 700; }
2549
+ .cs-empty__body { color: var(--cs-color-text-muted); max-inline-size: 380px; }
2550
+ .cs-empty__actions { margin-block-start: 12px; display: flex; gap: 10px; }
2551
+
2552
+ /* ===== base/shell.css ===== */
2553
+ /* CyberSkill — app shell + overlays wave 2 (.cs-*). */
2554
+
2555
+ /* Sidebar + NavItem */
2556
+ .cs-sidebar { inline-size: 248px; background: var(--cs-color-surface-panel); border-inline-end: 1px solid var(--cs-color-border-default); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }
2557
+ .cs-sidebar__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 12px 12px 4px; }
2558
+ .cs-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); text-decoration: none; cursor: pointer; border: 0; background: transparent; inline-size: 100%; text-align: start; }
2559
+ .cs-nav-item:hover { background: var(--cs-color-surface-raised); }
2560
+ .cs-nav-item__icon { flex: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
2561
+ .cs-nav-item.is-active { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); }
2562
+ .cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); }
2563
+ .cs-nav-item__trail { margin-inline-start: auto; }
2564
+
2565
+ /* Steps */
2566
+ .cs-steps { display: flex; gap: 0; }
2567
+ .cs-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding-inline-end: 12px; }
2568
+ .cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }
2569
+ .cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
2570
+ .cs-step--done .cs-step__marker { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); border-color: transparent; }
2571
+ .cs-step--done:not(:last-child)::after { background: var(--cs-color-text-accent); }
2572
+ .cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
2573
+ .cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
2574
+ .cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
2575
+
2576
+ /* Popover */
2577
+ .cs-popover { position: relative; display: inline-block; }
2578
+ .cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px; z-index: var(--cs-depth-dropdown, 60); }
2579
+ .cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
2580
+
2581
+ /* Drawer */
2582
+ .cs-drawer-scrim { position: fixed; inset: 0; background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); z-index: var(--cs-depth-modal); }
2583
+ .cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-xl); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
2584
+ .cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-xl); animation-name: cs-drawer-in-left; }
2585
+ .cs-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
2586
+ .cs-drawer__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; }
2587
+ .cs-drawer__close { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); display: grid; place-items: center; padding: 4px; }
2588
+ .cs-drawer__close:hover { color: var(--cs-color-semantic-danger-text); }
2589
+ .cs-drawer__body { flex: 1; overflow: auto; padding: 20px; }
2590
+ .cs-drawer__footer { padding: 14px 20px; border-block-start: 1px solid var(--cs-color-border-default); display: flex; gap: 10px; justify-content: flex-end; }
2591
+ @keyframes cs-drawer-in { from { margin-inline-end: calc(-1 * min(480px, 100%)); } to { margin-inline-end: 0; } }
2592
+ @keyframes cs-drawer-in-left { from { margin-inline-start: calc(-1 * min(480px, 100%)); } to { margin-inline-start: 0; } }
2593
+ @media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }
2594
+
2595
+ /* CommandPalette */
2596
+ .cs-cmdk-scrim { position: fixed; inset: 0; background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }
2597
+ .cs-cmdk { inline-size: min(560px, 92vw); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); overflow: hidden; }
2598
+ .cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }
2599
+ .cs-cmdk__search svg { color: var(--cs-color-text-muted); }
2600
+ .cs-cmdk__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-md); color: var(--cs-color-text-primary); }
2601
+ /* Wrapper ring — search input clears outline; focus-within restores ≥3:1 indicator (FIND-038). */
2602
+ .cs-cmdk__search:focus-within {
2603
+ outline: 2px solid var(--cs-color-text-primary);
2604
+ outline-offset: -2px;
2605
+ }
2606
+ .cs-cmdk__list { max-block-size: 340px; overflow: auto; padding: 8px; display: grid; gap: 2px; }
2607
+ .cs-cmdk__status { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; }
2608
+ .cs-cmdk__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 8px 10px 2px; }
2609
+ .cs-cmdk__item { display: flex; align-items: center; gap: 11px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 10px 12px; border-radius: var(--cs-radius-md); cursor: pointer; }
2610
+ .cs-cmdk__item:hover, .cs-cmdk__item[aria-selected="true"] { background: var(--cs-color-surface-raised); }
2611
+ .cs-cmdk__item .cs-kbd { margin-inline-start: auto; }
2612
+
2613
+ /* ===== base/glass.css ===== */
2614
+ /*
2615
+ * CyberSkill — Liquid Glass material layer (DESIGN.md Part 21).
2616
+ * Five materials over the immutable Umber + Ochre anchors. Scalars come from
2617
+ * tokens/elevation.css; this file composes the materials, classes, lens edge,
2618
+ * depth utilities, and accessibility fallbacks. Additive & opt-in: apply a
2619
+ * .cs-surface-* class to a surface after checking APCA against its backdrop.
2620
+ * LOAD ORDER: tokens → base/components → base/glass. A style pack would win over it.
2621
+ */
2622
+
2623
+ /* ---- 1. Composition from token scalars ---- */
2624
+ :root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast] {
2625
+ --_cs-border-subtle: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 76%, transparent);
2626
+ --_cs-border-strong: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e));
2627
+ --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) 25%, #050403) 68%, transparent); /* light: umber-led veil · dark: near-black veil so modals dim dark surfaces (v2.4.0 audit D2) */
2628
+ --cs-glass-whisper-bg: color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent);
2629
+ --cs-glass-whisper-border: transparent;
2630
+ --cs-glass-light-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent);
2631
+ --cs-glass-light-border: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 50%, transparent);
2632
+ --cs-glass-standard-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-standard-opacity, 80%), transparent);
2633
+ --cs-glass-standard-border: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 60%, transparent);
2634
+ --cs-glass-heavy-bg: color-mix(in oklab, var(--cs-color-surface-raised, #fbf4e9) var(--cs-glass-heavy-opacity, 90%), transparent);
2635
+ --cs-glass-heavy-border: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 80%, transparent);
2636
+ }
2637
+
2638
+ /* ---- 2. Material classes ---- */
2639
+ .cs-surface-whisper {
2640
+ background: var(--cs-glass-whisper-bg);
2641
+ -webkit-backdrop-filter: blur(var(--cs-glass-whisper-blur, 8px)) saturate(var(--cs-glass-whisper-saturate, 110%));
2642
+ backdrop-filter: blur(var(--cs-glass-whisper-blur, 8px)) saturate(var(--cs-glass-whisper-saturate, 110%));
2643
+ }
2644
+ .cs-surface-light {
2645
+ background: var(--cs-glass-light-bg);
2646
+ -webkit-backdrop-filter: blur(var(--cs-glass-light-blur, 12px)) saturate(var(--cs-glass-light-saturate, 130%));
2647
+ backdrop-filter: blur(var(--cs-glass-light-blur, 12px)) saturate(var(--cs-glass-light-saturate, 130%));
2648
+ border: 1px solid var(--cs-glass-light-border);
2649
+ }
2650
+ .cs-surface-standard, .cs-glass-card {
2651
+ background: var(--cs-glass-standard-bg);
2652
+ -webkit-backdrop-filter: blur(var(--cs-glass-standard-blur, 16px)) saturate(var(--cs-glass-standard-saturate, 150%));
2653
+ backdrop-filter: blur(var(--cs-glass-standard-blur, 16px)) saturate(var(--cs-glass-standard-saturate, 150%));
2654
+ border: 1px solid var(--cs-glass-standard-border);
2655
+ box-shadow: var(--cs-shadow-sm, 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06));
2656
+ }
2657
+ .cs-surface-heavy {
2658
+ background: var(--cs-glass-heavy-bg);
2659
+ -webkit-backdrop-filter: blur(var(--cs-glass-heavy-blur, 24px)) saturate(var(--cs-glass-heavy-saturate, 180%));
2660
+ backdrop-filter: blur(var(--cs-glass-heavy-blur, 24px)) saturate(var(--cs-glass-heavy-saturate, 180%));
2661
+ border: 1px solid var(--cs-glass-heavy-border);
2662
+ box-shadow: var(--cs-shadow-lg, 0 20px 60px rgba(69, 33, 14, 0.18));
2663
+ }
2664
+ .cs-surface-solid, .cs-surface-matte {
2665
+ background: var(--cs-color-surface-panel, #fff);
2666
+ -webkit-backdrop-filter: none; backdrop-filter: none;
2667
+ border: 1px solid var(--cs-color-border-default, #e7d9c6);
2668
+ }
2669
+
2670
+ /* ---- 3. Lens edge — refraction at the boundary ---- */
2671
+ .cs-surface-standard, .cs-surface-heavy, .cs-glass-card { position: relative; }
2672
+ .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before {
2673
+ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
2674
+ background: linear-gradient(135deg,
2675
+ color-mix(in oklab, #fff 30%, transparent) 0%, transparent 30%, transparent 70%,
2676
+ color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 15%, transparent) 100%);
2677
+ -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
2678
+ -webkit-mask-composite: xor;
2679
+ mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
2680
+ mask-composite: exclude;
2681
+ }
2682
+
2683
+ /* ---- 4. Depth utilities ---- */
2684
+ .cs-depth-bg { z-index: var(--cs-depth-bg, 0); }
2685
+ .cs-depth-section { z-index: var(--cs-depth-section, 5); }
2686
+ .cs-depth-card { z-index: var(--cs-depth-card, 10); }
2687
+ .cs-depth-nav { position: sticky; z-index: var(--cs-depth-nav, 50); }
2688
+ .cs-depth-modal { z-index: var(--cs-depth-modal, 100); }
2689
+ .cs-depth-toast { z-index: var(--cs-depth-toast, 200); }
2690
+
2691
+ /* ---- 5. Accessibility + capability fallbacks ---- */
2692
+ @media (prefers-reduced-transparency: reduce) {
2693
+ .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy,
2694
+ .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
2695
+ -webkit-backdrop-filter: none; backdrop-filter: none;
2696
+ background: var(--cs-color-surface-panel, #fff); color: var(--cs-color-text-primary, #45210e); border: 1px solid var(--cs-color-border-default, #e7d9c6);
2697
+ }
2698
+ .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before { display: none; }
2699
+ }
2700
+ @media (forced-colors: active) {
2701
+ .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy, .cs-surface-solid,
2702
+ .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
2703
+ -webkit-backdrop-filter: none; backdrop-filter: none;
2704
+ background: Canvas; border: 1px solid CanvasText; color: CanvasText;
2705
+ }
2706
+ .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before { display: none; }
2707
+ }
2708
+ @media print {
2709
+ [class*="cs-surface-"], .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
2710
+ -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
2711
+ background: #fff !important; box-shadow: none !important; border: 1px solid #ccc !important;
2712
+ }
2713
+ }
2714
+ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
2715
+ .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy,
2716
+ .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel { background: var(--cs-color-surface-panel, #fff); color: var(--cs-color-text-primary, #45210e); }
2717
+ }
2718
+
2719
+ /* ---- 6. Brand aurora wash — the signature warm-gold-on-umber hero glow.
2720
+ * A CSS-only stand-in for aurora-gold.jpg: layer .cs-aurora on any full-bleed
2721
+ * hero/section. Text on it is #fff; keep an umber protection overlay if content
2722
+ * gets busy. .cs-aurora--photo layers the real asset when you have the path. */
2723
+ .cs-aurora {
2724
+ background-color: var(--cs-color-brand-umber);
2725
+ background-image:
2726
+ radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-accent, var(--cs-color-brand-ochre)) 46%, transparent), transparent 55%),
2727
+ radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, var(--cs-accent-grad-b, #ffcf5c) 32%, transparent), transparent 60%),
2728
+ radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, #1a1108 60%, transparent), transparent 60%);
2729
+ color: #fff; /* on-aurora wash */
2730
+ }
2731
+ .cs-aurora--photo { background-size: cover; background-position: center; }
2732
+
2733
+ /* Modal material backings are siblings of content: filters must not capture
2734
+ * fixed nested layers, and scrolling content must not move the backing away. */
2735
+ .cs-dialog[data-cs-overlay-material][data-cs-overlay-surface-ready],
2736
+ .cs-drawer[data-cs-overlay-material][data-cs-overlay-surface-ready] {
2737
+ -webkit-backdrop-filter: none; backdrop-filter: none;
2738
+ }
2739
+ .cs-dialog[data-cs-overlay-material] { position: absolute; }
2740
+ .cs-drawer[data-cs-overlay-material] { position: fixed; }
2741
+ .cs-overlay-surface {
2742
+ position: absolute; inset: auto; margin: 0; box-sizing: border-box;
2743
+ pointer-events: none; border: 0; box-shadow: none; background: transparent;
2744
+ }
2745
+ .cs-overlay-surface::before { display: none; }
2746
+
2747
+ /* ===== base/interaction.css ===== */
2748
+ /* CyberSkill — interaction layer: hover depth, focus glow, entrance motion.
2749
+ * Additive layer loaded after component sheets so it enhances base components without changing
2750
+ * their structure. Everything degrades under prefers-reduced-motion. Anchors
2751
+ * (Umber/Ochre) unchanged — this only adds warmth to elevation + interaction. */
2752
+
2753
+ /* ---- 1. Warm hover depth — filled controls lift on a warm umber shadow ---- */
2754
+ .cs-button--primary, .cs-button--secondary, .cs-button--tertiary, .cs-button--danger {
2755
+ transition: background var(--cs-duration-fast) var(--cs-ease-standard),
2756
+ border-color var(--cs-duration-fast) var(--cs-ease-standard),
2757
+ filter var(--cs-duration-fast) var(--cs-ease-standard),
2758
+ transform var(--cs-duration-fast) var(--cs-ease-standard);
2759
+ }
2760
+ .cs-button--primary:hover:not(.is-disabled),
2761
+ .cs-button--danger:hover:not(.is-disabled) {
2762
+ box-shadow: var(--cs-shadow-md);
2763
+ transform: translateY(-1px);
2764
+ }
2765
+ .cs-button--primary:active:not(.is-disabled),
2766
+ .cs-button--danger:active:not(.is-disabled) {
2767
+ transform: translateY(0);
2768
+ box-shadow: var(--cs-shadow-xs);
2769
+ }
2770
+
2771
+ /* ---- 2. Focus halo — ochre brand ring outside the high-contrast contour (FIND-032) ---- */
2772
+ .cs-button:focus-visible,
2773
+ .cs-field__control:focus-visible,
2774
+ .cs-select select.cs-field__control:focus-visible,
2775
+ .cs-native-select select.cs-field__control:focus-visible,
2776
+ .cs-search:focus-within,
2777
+ .cs-stepper:focus-within,
2778
+ .cs-prompt:focus-within,
2779
+ .cs-terminal:focus-within,
2780
+ .cs-ai-disclosure__badge:focus-visible,
2781
+ .cs-switch input:focus-visible + .cs-switch__track {
2782
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
2783
+ }
2784
+ .cs-button:focus-visible {
2785
+ transition: background var(--cs-duration-fast) var(--cs-ease-standard),
2786
+ border-color var(--cs-duration-fast) var(--cs-ease-standard),
2787
+ filter var(--cs-duration-fast) var(--cs-ease-standard),
2788
+ transform var(--cs-duration-fast) var(--cs-ease-standard);
2789
+ }
2790
+ .cs-cmdk__search:focus-within {
2791
+ box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), inset 0 0 0 4px var(--cs-color-accent-ochre);
2792
+ }
2793
+
2794
+ /* ---- 3. Entrance motion utilities (opt-in) + a gentle Dialog entrance ---- */
2795
+ @keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }
2796
+ @keyframes cs-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
2797
+ .cs-fade-in { animation: cs-fade-in var(--cs-duration-slow) var(--cs-ease-entrance) both; }
2798
+ .cs-rise-in { animation: cs-rise-in var(--cs-duration-slow) var(--cs-ease-entrance) both; }
2799
+ .cs-rise-in--2 { animation-delay: 80ms; }
2800
+ .cs-rise-in--3 { animation-delay: 160ms; }
2801
+ .cs-rise-in--4 { animation-delay: 240ms; }
2802
+ .cs-dialog { animation: cs-fade-in var(--cs-duration-base) var(--cs-ease-entrance) both; }
2803
+ .cs-dialog__overlay { animation: cs-fade-in var(--cs-duration-base) var(--cs-ease-standard) both; }
2804
+
2805
+ /* Fade preserves target size and avoids a containing block for nested overlays. */
2806
+
2807
+ @media (prefers-reduced-motion: reduce) {
2808
+ .cs-button--primary:hover, .cs-button--danger:hover { transform: none; }
2809
+ .cs-fade-in, .cs-rise-in, .cs-dialog, .cs-dialog__overlay { animation: none; }
2810
+ }
2811
+
2812
+ /* ===== base/a11y.css ===== */
2813
+ /* CyberSkill — accessibility layer. Loaded after the component base styles so its
2814
+ * touch-target sizes win, and before the responsive layer. Two concerns:
2815
+ * 1. Touch ergonomics — guarantee a 44px hit target on COARSE pointers (finger),
2816
+ * while desktop mouse density is preserved. `pointer: coarse` is more correct
2817
+ * than a width breakpoint: a 1280px touch laptop still needs 44px targets.
2818
+ * (Button already carries its own coarse block in components.css.)
2819
+ * 2. Reduced motion — honour the OS "reduce motion" setting globally, so every
2820
+ * animation/transition across components and templates calms down at once.
2821
+ * Focus rings are NOT here — they are already systematic (global :focus-visible in
2822
+ * reset.css + component rules preserve a text-primary contour and ochre halo). */
2823
+
2824
+ /* Visually hidden but available to AT / file inputs (FileUpload keyboard path). */
2825
+ .cs-sr-only {
2826
+ position: absolute !important;
2827
+ inline-size: 1px !important;
2828
+ block-size: 1px !important;
2829
+ padding: 0 !important;
2830
+ margin: -1px !important;
2831
+ overflow: hidden !important;
2832
+ clip: rect(0, 0, 0, 0) !important;
2833
+ white-space: nowrap !important;
2834
+ border: 0 !important;
2835
+ }
2836
+
2837
+ /* ---- 1. Touch targets: 44px minimum on coarse pointers ---- */
2838
+ @media (pointer: coarse) {
2839
+ /* Authored template links opt in without changing desktop prose spacing. */
2840
+ .cs-touch-target {
2841
+ display: inline-flex; align-items: center; box-sizing: border-box;
2842
+ min-inline-size: 44px; min-block-size: 44px;
2843
+ }
2844
+
2845
+ /* Primary navigation & action targets → full 44px */
2846
+ .cs-tab { min-height: 44px; min-inline-size: 44px; }
2847
+ .cs-pagination button { block-size: 44px; min-inline-size: 44px; }
2848
+ .cs-menu__item { min-height: 44px; min-inline-size: 44px; }
2849
+ .cs-stepper button { min-block-size: 44px; }
2850
+ .cs-stepper input { min-height: 44px; }
2851
+ .cs-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; min-inline-size: 44px; }
2852
+
2853
+ /* The button itself is the target; track padding does not enlarge its hit area. */
2854
+ .cs-segmented button { min-height: 44px; min-inline-size: 44px; }
2855
+
2856
+ /* Selection controls: enlarge the native box; the label extends the target */
2857
+ .cs-check input, .cs-radio input { inline-size: 24px; block-size: 24px; }
2858
+ .cs-check, .cs-radio { min-inline-size: 44px; min-height: 44px; align-items: center; }
2859
+ .cs-switch { min-height: 44px; min-inline-size: 44px; }
2860
+
2861
+ /* Icon-only affordances inside a larger row */
2862
+ .cs-search__clear { min-inline-size: 44px; min-block-size: 44px; flex-shrink: 0; }
2863
+ .cs-ai-disclosure__badge { min-height: 44px; min-inline-size: 44px; }
2864
+
2865
+ /* Tree expansion and selection are separate pointer actions. */
2866
+ .cs-tree__twist { min-inline-size: 44px; min-block-size: 44px; flex-shrink: 0; }
2867
+ .cs-tree__label { min-inline-size: 44px; min-block-size: 44px; display: inline-flex; align-items: center; }
2868
+
2869
+ /* Keep the actual control boxes disjoint. Expanding pseudo-elements alone
2870
+ * can steal taps from neighboring actions in compact rows. */
2871
+ .cs-button, .cs-button--sm, .cs-button--xs,
2872
+ .cs-anchor__item, .cs-code__copy, .cs-cmdk__item,
2873
+ .cs-fab__mini, .cs-list__item--button, .cs-image[role="button"],
2874
+ .cs-ctxmenu-zone, .cs-menu > button, .cs-popconfirm > button,
2875
+ .cs-cmdk__search input, .cs-comment__actions button,
2876
+ .cs-drawer__close, .cs-toolbar__btn, .cs-inline-edit__view,
2877
+ .cs-alert__dismiss, .cs-toast__close, .cs-image__zoom button,
2878
+ .cs-datagrid__check, .cs-datagrid__sort, .cs-datagrid__pin,
2879
+ .cs-igroup__btn, .cs-menubar__top, .cs-navmenu__top, .cs-navmenu__card,
2880
+ .cs-stepper button, .cs-rating button, .cs-tag__close,
2881
+ .cs-taginput > input, .cs-terminal__line input, .cs-timepicker select,
2882
+ .cs-toggle, .cs-cal button, .cs-carousel__nav,
2883
+ .cs-suggest button, .cs-colorpicker__grid button, .cs-colorpicker__hex input,
2884
+ .cs-cascader__opt, .cs-combobox__opt, .cs-inline-edit input, .cs-mentions__pop button,
2885
+ .cs-search input, .cs-search select, .cs-nav-item,
2886
+ .cs-field__control, .cs-native-select--sm select.cs-field__control,
2887
+ .cs-ctxmenu-zone > button, .cs-hovercard > button,
2888
+ .cs-popover > button, .cs-tooltip > button {
2889
+ min-inline-size: 44px;
2890
+ min-block-size: 44px;
2891
+ }
2892
+ /* Touch and keyboard focus scroll the tablist; an overlay scrollbar must not
2893
+ * intercept the required action disk immediately after a horizontal scroll. */
2894
+ .cs-tabs { scrollbar-width: none; }
2895
+ .cs-tabs::-webkit-scrollbar { display: none; }
2896
+ /* Adjacent InputGroup actions/addons can win fractional border hit tests.
2897
+ * Reserve 1px at each inline edge around the required 44px action disk. */
2898
+ .cs-igroup__btn { min-inline-size: 46px; }
2899
+ /* Text fallbacks and focusable native/custom trigger roots may be inline.
2900
+ * Minimum dimensions require a layout box; do not target the popup panels. */
2901
+ :is(.cs-menu, .cs-popover, .cs-popconfirm, .cs-tooltip, .cs-hovercard)
2902
+ > :is(a[href], [role="button"], [tabindex="0"]) {
2903
+ display: inline-flex; align-items: center;
2904
+ min-inline-size: 44px; min-block-size: 44px;
2905
+ }
2906
+ /* WebKit native selects ignore min-block-size under automatic appearance. */
2907
+ .cs-timepicker select { block-size: 44px; }
2908
+ .cs-colorpicker__grid { grid-template-columns: repeat(5, 44px); }
2909
+ .cs-transfer__list label { min-block-size: 44px; }
2910
+ .cs-link, .cs-citation {
2911
+ display: inline-flex; align-items: center;
2912
+ min-inline-size: 44px; min-block-size: 44px;
2913
+ }
2914
+ /* Seven real day targets need 308px before gaps. Keep a narrow host usable
2915
+ * through local scrolling rather than overlapping adjacent dates. */
2916
+ .cs-cal { min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; box-sizing: border-box; }
2917
+ .cs-cal__wd, .cs-cal__grid { grid-template-columns: repeat(7, 44px); }
2918
+ .cs-cal__head { min-inline-size: 0; position: sticky; inset-inline-start: 0; }
2919
+ .cs-carousel__view { min-block-size: 64px; padding-inline: 64px; }
2920
+ .cs-carousel__dots { flex-wrap: wrap; }
2921
+ .cs-carousel__dots button {
2922
+ inline-size: 44px; block-size: 44px; flex: 0 0 44px;
2923
+ background: radial-gradient(circle, var(--cs-color-border-default) 4.5px, transparent 5px);
2924
+ }
2925
+ .cs-carousel__dots button[aria-current="true"] {
2926
+ background: radial-gradient(circle, var(--cs-color-text-accent) 4.5px, transparent 5px);
2927
+ }
2928
+ .cs-carousel__dots button::before { content: none; }
2929
+ /* The container's two 1px borders must not clip a short requested divider. */
2930
+ .cs-splitter { min-block-size: 46px; }
2931
+ .cs-splitter__bar { min-inline-size: 44px; min-block-size: 44px; flex-shrink: 0; }
2932
+
2933
+ /* Slider: native <input type=range> thumb size is browser-controlled (no custom
2934
+ * ::-webkit-slider-thumb here) so an exact 44px hit region can't be guaranteed —
2935
+ * widen the track's rendered band to give the thumb more room to land. */
2936
+ .cs-slider { min-inline-size: 44px; block-size: 44px !important; }
2937
+ }
2938
+
2939
+ /* ---- 2. Reduced motion: honour the user's OS setting everywhere ---- */
2940
+ @media (prefers-reduced-motion: reduce) {
2941
+ *, *::before, *::after {
2942
+ animation-duration: 0.01ms !important;
2943
+ animation-iteration-count: 1 !important;
2944
+ transition-duration: 0.01ms !important;
2945
+ scroll-behavior: auto !important;
2946
+ }
2947
+ }
2948
+
2949
+ /* ---- 3. High contrast: honour prefers-contrast: more by strengthening the
2950
+ * warm hairline border and muted text (both are intentionally soft by default).
2951
+ * Only activates on user request; anchors (Umber/Ochre) and focus rings are
2952
+ * already high-contrast and untouched. ---- */
2953
+ /* The values live in tokens/elements.css: the scope resolver derives
2954
+ * --cs-color-border-default / --cs-color-text-muted from the --_cs-standard /
2955
+ * --_cs-high channel toggles, which flip to high under prefers-contrast: more
2956
+ * (light #9a8060 / #45210e · dark #7a6450 / #f5ead9) unless a scope sets
2957
+ * data-cs-contrast explicitly. The former contextual overrides here were
2958
+ * already superseded by that resolver's higher specificity. */
2959
+
2960
+ /* Forced colors removes authored backgrounds and shadows. State must survive
2961
+ * that substitution using real borders, system colors and knob position. */
2962
+ @media (forced-colors: active) {
2963
+ .cs-switch__track {
2964
+ box-sizing: border-box;
2965
+ border: 1px solid ButtonText;
2966
+ background: Canvas;
2967
+ forced-color-adjust: none;
2968
+ }
2969
+ .cs-switch__track::after { background: ButtonText; box-shadow: none; }
2970
+ .cs-switch input:checked + .cs-switch__track { background: Highlight; border-color: Highlight; }
2971
+ .cs-switch input:checked + .cs-switch__track::after { background: HighlightText; }
2972
+ .cs-switch.is-disabled .cs-switch__track { border-color: GrayText; }
2973
+ .cs-carousel__dots button { border: 1px solid ButtonText; background: Canvas; forced-color-adjust: none; }
2974
+ .cs-carousel__dots button::before { background: ButtonText; }
2975
+ .cs-carousel__dots button[aria-current="true"] { border: 3px double Highlight; background: Canvas; }
2976
+ .cs-carousel__dots button[aria-current="true"]::before { background: Highlight; }
2977
+ .cs-tab[aria-selected="true"] { border-block-end: 3px solid Highlight; }
2978
+ .cs-segmented button { border: 2px solid transparent; }
2979
+ .cs-segmented button[aria-checked="true"],
2980
+ .cs-segmented button[aria-selected="true"],
2981
+ .cs-segmented button[aria-pressed="true"] { border-color: Highlight; }
2982
+ .cs-toggle[aria-pressed="true"]:not(:focus-visible) { outline: 2px solid Highlight; outline-offset: -4px; }
2983
+ }
2984
+
2985
+ /* ===== base/responsive.css ===== */
2986
+ /* CyberSkill — global responsive layer (loaded LAST so it can adapt any surface).
2987
+ * FIND-007: width stops ⊆ token breakpoints (incl. justified `phone` 360).
2988
+ * The system is desktop-first but every artifact must read on tablet and phone.
2989
+ * Strategy: (1) media never overflows; (2) the print-doc archetype (cs-desk /
2990
+ * cs-sheet) relaxes its generous desktop padding on small screens; (3) shared class
2991
+ * hooks (sidebar, tables) reflow; (4) inline fixed-column grids collapse; (5) wide
2992
+ * fixed-pixel export canvases (decks, social) scroll to keep their exact geometry.
2993
+ *
2994
+ * NOTE on the [style*=…] selectors below: Design-Component templates compile inline
2995
+ * `style="…"` into React style objects, so the RENDERED attribute is serialized with
2996
+ * a space after the colon and after commas — e.g. `grid-template-columns: repeat(4, 1fr)`.
2997
+ * Both the spaced DOM serialization and compact authored property forms are supported below. */
2998
+
2999
+ /* 1 — Media and embeds never blow out a column */
3000
+ img, svg, video, canvas { max-width: 100%; height: auto; }
3001
+
3002
+ /* G1 / CDS-RESP-001 — container-query migration (compatibility layer).
3003
+ * Opt-in hosts mark a sizing context with `.cs-cq`. Children can use
3004
+ * `@container cs (max-width: …)` without waiting for a full layout rewrite.
3005
+ * Media queries remain the default authority; CQ helpers apply when the
3006
+ * *parent* is narrow (sidebar / split panes) even if the viewport is wide.
3007
+ * Breakpoints ⊆ token scale (sm 640 · md 768). */
3008
+ .cs-cq { container-type: inline-size; container-name: cs; }
3009
+ @container cs (max-width: 768px) {
3010
+ .cs-cq-cols-2,
3011
+ .cs-cq-cols-3,
3012
+ .cs-cq-cols-4 { grid-template-columns: 1fr !important; }
3013
+ .cs-cq-hide-narrow { display: none !important; }
3014
+ }
3015
+ @container cs (max-width: 640px) {
3016
+ .cs-cq-stack { display: flex !important; flex-direction: column !important; }
3017
+ .cs-cq-stack > * { min-inline-size: 0; max-inline-size: 100%; }
3018
+ }
3019
+
3020
+ /* 2 — Print-doc archetype: shrink desk + sheet chrome as the screen narrows.
3021
+ * cs-desk is the grey backing; cs-sheet is the white page. */
3022
+ @media screen and (max-width: 768px) {
3023
+ .cs-desk { padding: 24px 10px !important; }
3024
+ .cs-sheet { padding: 40px 40px !important; }
3025
+ .cs-display:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-4xl); }
3026
+ .cs-h1:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-2xl); }
3027
+ }
3028
+ @media screen and (max-width: 640px) {
3029
+ .cs-desk { padding: 12px 6px !important; }
3030
+ .cs-sheet { padding: 26px 20px !important; border-radius: 8px !important; }
3031
+ .cs-display:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-3xl); }
3032
+ .cs-h1:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-xl); }
3033
+ }
3034
+ @media screen and (max-width: 360px) {
3035
+ .cs-sheet { padding: 20px 15px !important; }
3036
+ }
3037
+
3038
+ /* 3 — Wide tables inside sheets/panels scroll horizontally instead of clipping */
3039
+ @media screen and (max-width: 768px) {
3040
+ .cs-sheet table, .cs-table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
3041
+ }
3042
+
3043
+ /* 4 — App shell: the sidebar + main is a fixed two-column inline grid on desktop.
3044
+ * Collapse it to a stacked layout; the sidebar becomes a horizontal nav strip. */
3045
+ @media screen and (max-width: 768px) {
3046
+ .cs-sidebar { position: static !important; width: auto !important; height: auto !important;
3047
+ display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important;
3048
+ align-items: center !important; border-inline-end: 0 !important;
3049
+ border-block-end: 1px solid var(--cs-color-border-default) !important; }
3050
+ .cs-sidebar__label { width: 100% !important; }
3051
+ }
3052
+
3053
+ /* 5 — Fixed-pixel export canvases (16:9 decks, social 1080/1200 canvases) sit in a
3054
+ * dark desk wrapper tagged .cs-canvas-desk. It is ALWAYS a horizontal scroll viewport,
3055
+ * so a slide/canvas wider than the window scrolls INSIDE the desk instead of pushing
3056
+ * the whole page wide — a 16:9 slide's content min-width can exceed the window a little
3057
+ * even on a laptop (≈1280), which otherwise overflowed the document. The legible
3058
+ * min-width floor for the inner track only applies once the window itself is narrow. */
3059
+ .cs-canvas-desk { overflow-x: auto; -webkit-overflow-scrolling: touch; }
3060
+ @media screen and (max-width: 1280px) {
3061
+ .cs-canvas-desk > * { min-width: 960px; }
3062
+ }
3063
+
3064
+ /* 6 — Very wide section padding eases in on phones */
3065
+ @media screen and (max-width: 640px) {
3066
+ section[style*="padding: 84px"], section[style*="padding: 80px"],
3067
+ section[style*="padding: 72px"] { padding-inline: 22px !important; }
3068
+ }
3069
+
3070
+ /* 7 — Inline fixed-column grids reflow on small screens. Templates set
3071
+ * `grid-template-columns` inline, which beats external rules — so override with
3072
+ * !important via substring selectors (spaced form, see the note above). Fluid
3073
+ * repeat(auto-fit/auto-fill,…) grids are never matched (they read `repeat(a`).
3074
+ * Tablet: 3+ cols → 2. Phone: everything → 1 (declared after, so it wins at the
3075
+ * narrow width). Print is unaffected — the @page is wide, so these screen
3076
+ * breakpoints never fire during print/export. Fixed canvas descendants keep their
3077
+ * authored columns because the canvas track scrolls independently (see §5). */
3078
+ @media screen and (max-width: 768px) {
3079
+ [style*="grid-template-columns: repeat(3"]:where(:not(.cs-canvas-desk *)),
3080
+ [style*="grid-template-columns:repeat(3"]:where(:not(.cs-canvas-desk *)),
3081
+ [style*="grid-template-columns: repeat(4"]:where(:not(.cs-canvas-desk *)),
3082
+ [style*="grid-template-columns:repeat(4"]:where(:not(.cs-canvas-desk *)),
3083
+ [style*="grid-template-columns: repeat(5"]:where(:not(.cs-canvas-desk *)),
3084
+ [style*="grid-template-columns:repeat(5"]:where(:not(.cs-canvas-desk *)),
3085
+ [style*="grid-template-columns: repeat(6"]:where(:not(.cs-canvas-desk *)),
3086
+ [style*="grid-template-columns:repeat(6"]:where(:not(.cs-canvas-desk *)) { grid-template-columns: repeat(2, 1fr) !important; }
3087
+ }
3088
+ @media screen and (max-width: 640px) {
3089
+ [style*="grid-template-columns: repeat(2"]:where(:not(.cs-canvas-desk *)),
3090
+ [style*="grid-template-columns:repeat(2"]:where(:not(.cs-canvas-desk *)),
3091
+ [style*="grid-template-columns: repeat(3"]:where(:not(.cs-canvas-desk *)),
3092
+ [style*="grid-template-columns:repeat(3"]:where(:not(.cs-canvas-desk *)),
3093
+ [style*="grid-template-columns: repeat(4"]:where(:not(.cs-canvas-desk *)),
3094
+ [style*="grid-template-columns:repeat(4"]:where(:not(.cs-canvas-desk *)),
3095
+ [style*="grid-template-columns: repeat(5"]:where(:not(.cs-canvas-desk *)),
3096
+ [style*="grid-template-columns:repeat(5"]:where(:not(.cs-canvas-desk *)),
3097
+ [style*="grid-template-columns: repeat(6"]:where(:not(.cs-canvas-desk *)),
3098
+ [style*="grid-template-columns:repeat(6"]:where(:not(.cs-canvas-desk *)),
3099
+ [style*="grid-template-columns: 1fr 1fr"]:where(:not(.cs-canvas-desk *)),
3100
+ [style*="grid-template-columns:1fr 1fr"]:where(:not(.cs-canvas-desk *)),
3101
+ [style*="grid-template-columns: 1.15fr 1fr"]:where(:not(.cs-canvas-desk *)),
3102
+ [style*="grid-template-columns:1.15fr 1fr"]:where(:not(.cs-canvas-desk *)),
3103
+ [style*="grid-template-columns: 1fr 1.15fr"]:where(:not(.cs-canvas-desk *)),
3104
+ [style*="grid-template-columns:1fr 1.15fr"]:where(:not(.cs-canvas-desk *)),
3105
+ [style*="grid-template-columns: 2fr 1fr"]:where(:not(.cs-canvas-desk *)),
3106
+ [style*="grid-template-columns:2fr 1fr"]:where(:not(.cs-canvas-desk *)),
3107
+ [style*="grid-template-columns: 1fr 2fr"]:where(:not(.cs-canvas-desk *)),
3108
+ [style*="grid-template-columns:1fr 2fr"]:where(:not(.cs-canvas-desk *)),
3109
+ [style*="grid-template-columns: auto 1fr"]:where(:not(.cs-canvas-desk *)),
3110
+ [style*="grid-template-columns:auto 1fr"]:where(:not(.cs-canvas-desk *)) { grid-template-columns: 1fr !important; }
3111
+ }
3112
+ /* Decks & social canvases keep their authored columns — they scroll (see §5), so their
3113
+ * internal grids must not collapse. Unscoped + higher specificity, so they win at every width. */
3114
+ .cs-canvas-desk [style*="grid-template-columns: repeat(3, 1fr)"],
3115
+ .cs-canvas-desk [style*="grid-template-columns: repeat(3,1fr)"],
3116
+ .cs-canvas-desk [style*="grid-template-columns:repeat(3, 1fr)"],
3117
+ .cs-canvas-desk [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
3118
+ .cs-canvas-desk [style*="grid-template-columns: repeat(4, 1fr)"],
3119
+ .cs-canvas-desk [style*="grid-template-columns: repeat(4,1fr)"],
3120
+ .cs-canvas-desk [style*="grid-template-columns:repeat(4, 1fr)"],
3121
+ .cs-canvas-desk [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
3122
+
3123
+ /* 8 — Touch targets reach the 44px minimum on phones/tablets (the system's a11y
3124
+ * floor). Base sidebar nav rows (39px) and the topbar search input (26px) are
3125
+ * fine for mouse on desktop but too small to tap; grow them on small screens. */
3126
+ @media screen and (max-width: 768px) {
3127
+ .cs-sidebar .cs-nav-item, .cs-nav-item { min-height: 44px; }
3128
+ .cs-search { display: flex; align-items: center; min-height: 44px; }
3129
+ .cs-search input, .cs-search select { min-height: 44px; }
3130
+ }
3131
+
3132
+ /* 9 — Unbreakable long tokens force horizontal overflow on narrow screens.
3133
+ * Write-on lines ("______"), long URLs, IDs, hashes, and account numbers have a
3134
+ * min-content width that can exceed a phone column and push the page wider than the
3135
+ * viewport (observed: the agenda / review / PIP fill-in lines overflowed at 390px).
3136
+ * `overflow-wrap: anywhere` lets them break — and unlike `break-word` it ALSO shrinks
3137
+ * the min-content contribution, so grid/flex tracks size down correctly instead of
3138
+ * being propped open. It only breaks a token when it would otherwise overflow, so
3139
+ * ordinary prose is untouched. Scoped to the print-doc wrapper; the print @page is
3140
+ * wide, so this screen breakpoint never fires during export. */
3141
+ @media screen and (max-width: 768px) {
3142
+ .cs-desk, .cs-sheet { overflow-wrap: anywhere; }
3143
+ }
3144
+
3145
+ /* 10 — App-shell layout: sidebar + main is a fixed two-column INLINE grid
3146
+ * (grid-template-columns: 248px 1fr). §4 restyles the .cs-sidebar itself, but the
3147
+ * parent grid still reserved the 248px column, so on a phone the main column (and its
3148
+ * DataTable) was squeezed and overflowed. Collapse the shell grid to one column with
3149
+ * an attribute selector — the compiler serializes the inline value with spaces, and an
3150
+ * attribute selector reliably overrides an inline grid-template-columns (a class
3151
+ * selector does not). Then let the app-region grids shrink (min-width:0) and the data
3152
+ * table scroll inside its panel instead of forcing the page wide. */
3153
+ @media screen and (max-width: 768px) {
3154
+ [style*="grid-template-columns: 248px 1fr"],
3155
+ [style*="grid-template-columns:248px 1fr"] { grid-template-columns: 1fr !important; }
3156
+ main { min-width: 0; }
3157
+ main > * { min-width: 0; }
3158
+ .cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
3159
+ }
3160
+
3161
+ /* ---- 320 reflow (UX-003 / WCAG 1.4.10) ---- */
3162
+ @media (max-width: 360px) {
3163
+ .cs-tabs { overflow-x: auto; overscroll-behavior-x: contain; }
3164
+ .cs-pagination { flex-wrap: wrap; max-inline-size: 100%; }
3165
+ /* Keep the inherited 44px coarse-pointer floor; wrap controls instead of shrinking targets. */
3166
+ .cs-otp { flex-wrap: wrap; gap: 4px; }
3167
+ .cs-dl { grid-template-columns: 1fr; }
3168
+ .cs-field { min-inline-size: 0; }
3169
+ .cs-field__control { min-inline-size: 0; }
3170
+ [style*="minmax(320px"] { grid-template-columns: 1fr !important; }
3171
+ }
3172
+
3173
+ /* Preserve the narrow fine-pointer scrollbar without overriding coarse hit regions. */
3174
+ @media (max-width: 360px) and (pointer: fine) {
3175
+ .cs-tabs { scrollbar-width: thin; }
3176
+ .cs-otp input { inline-size: 36px; block-size: 40px; font-size: var(--cs-font-size-base); }
3177
+ }