@cyberskill/design 2.8.0 → 2.9.0

package/docs/storybook.md

@@ -19,7 +19,7 @@ Storybook **10** is the **product site** for operators on `design.cyberskill.wor
   - `States` (or a Matrix subsection) covering `disabled` / `loading` / `error` / `busy` when those argTypes exist
   - Every discrete `size` / `variant` enum option mounted in a matrix-family story
   - `FullMatrix` when ≥1 of {size enums, variant enums, state keys} exist — the size × variant × key-state product via shared helpers in `stories/lib/matrix.jsx`
-- Toolbar globals: Theme (light · dark · **system**) × Element × Language × Style (same axes as templates / Atomic View). Element lists **all 15** Ngũ Hành packs (`tokens.elements` / template EL maps / Storybook toolbar) — not a subset. Style’s sole pack is **liquid-glass**.
+- Toolbar globals: Theme (light · dark · **system**) × Element × Language (`vi` · `en`) × Style (`liquid-glass` · `matte-paper`; same axes as templates / Atomic View). Element lists **all 15** Ngũ Hành packs (`tokens.elements` / template EL maps / Storybook toolbar) — not a subset.
 - **Docs/** published operator documentation — nested **Start / Guides / Maintainers**, curated MDX for high-traffic pages, one sidebar story per public catalog markdown page, and a Documentation Library iframe of `/docs/viewer.html` (EN·VI). Canonical prose remains `docs/*.md`; Storybook is the live reading surface. **Release Notes/** curated product prose (**no CHANGELOG.md**); **Status/** embeds `_audit/run.html` full-bleed
 - **Templates/** public starting points — Gallery (Atomic View Templates tier + kitchen-sink/playground) and every manifest template under Atomic View categories (including **HR** / `vn-*`). Regen CSF with `node scripts/generate-template-stories.mjs` after template renames
 - **Pages/** public UI kits (Status Hub, Marketing site, Slide deck)

package/docs/template-inventory.json

@@ -5,7 +5,7 @@
     {
       "name": "App shell",
       "path": "templates/app-shell/AppShell.dc.html",
-      "sha256": "f71017a26f12b71d9e653dff79635ed14d5eb4a3dac9c5ce095188c537b858e3",
+      "sha256": "db367cea935919c4ad90d7fdb3513309d04bebb575269ee756b2be6f074e82b7",
       "declaredProps": [
         {
           "language": {
@@ -946,7 +946,7 @@
     {
       "name": "Board · Meeting deck",
       "path": "templates/bod-deck/BodDeck.dc.html",
-      "sha256": "83a2ea61af568fef5600a002bf646af8fda7467e83778439524edc51514b2431",
+      "sha256": "ce30fa21a80ab6eb6f198e16f13c928d1a9c8ab73883b83fcd53d087b9423fb4",
       "declaredProps": [
         {
           "language": {
@@ -1248,7 +1248,7 @@
     {
       "name": "Board · Investor update email",
       "path": "templates/bod-investor-update/BodInvestorUpdate.dc.html",
-      "sha256": "3d62bb7dc28fd362ba9b2d28fb37829b5c0a64019bb158aa3cccf56e32e87449",
+      "sha256": "88c598968753b234520386d60124fdda2b28692b4c27fd6b096b9c36c0fe2817",
       "declaredProps": [
         {
           "language": {
@@ -2529,7 +2529,7 @@
     {
       "name": "Dashboard",
       "path": "templates/dashboard/Dashboard.dc.html",
-      "sha256": "e39de5367d3b0309a9c29ad61ab379707b327fb71cb19d1fe87f8e7b9ab64f6d",
+      "sha256": "abf3996bfbaaf7deb62e5ce0a6958c16b73db630237be8135f9838436bec76aa",
       "declaredProps": [
         {
           "language": {
@@ -3535,7 +3535,7 @@
     {
       "name": "Delivery · QBR deck",
       "path": "templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html",
-      "sha256": "2463e404a33208fca14222473d571c58e096ca6b97cfa1de788bd1490299d011",
+      "sha256": "05de5ad0d238f840edb63c6b014bd2b03ebe7f8598f8bdf83560949178434047",
       "declaredProps": [
         {
           "language": {
@@ -4180,7 +4180,7 @@
     {
       "name": "Delivery · Weekly status email",
       "path": "templates/delivery-status-email/DeliveryStatusEmail.dc.html",
-      "sha256": "fed3c9b079806e96a2db546ffb730fe1a89743fef73f77735c6ace53062f6377",
+      "sha256": "6734c66af11496ee1d4bd2d3d65e44aaf807e795c3d947cff3db536ef6cfbd3b",
       "declaredProps": [
         {
           "language": {
@@ -4831,7 +4831,7 @@
         },
         {
           "path": "templates/email/Email-VN-standalone.html",
-          "sha256": "d9e5ff722c8558d086212dc5cbcc03c80302cd1be5bd4469e20530dae399f940"
+          "sha256": "90ec1856210e2de7ead5e6664bb8b31754bd0978e69c71bf2ec58a7d18c72acc"
         },
         {
           "path": "templates/email/content-schema.json",
@@ -8073,7 +8073,7 @@
     {
       "name": "Marketing · Newsletter",
       "path": "templates/marketing-newsletter/MarketingNewsletter.dc.html",
-      "sha256": "b87b3d465883dbdcb3325572caf3a025b1396788b1995e6f42193de7bfeabfbc",
+      "sha256": "e4d585ae9e5a59619e19497b5bab1d738a218a91dbb8e4c3cca250c681dfdcb4",
       "declaredProps": [
         {
           "element": {
@@ -8246,7 +8246,7 @@
     {
       "name": "Marketing page",
       "path": "templates/marketing-page/MarketingPage.dc.html",
-      "sha256": "54fa23a31a7037210672fe43548ff07229d58faf818ef90afcf5898d1d50db83",
+      "sha256": "7fecead46d1c300013885f0e8b0e247379858c70c52e514560185854d487660c",
       "declaredProps": [
         {
           "language": {
@@ -9243,7 +9243,7 @@
     {
       "name": "Sales · Proposal deck",
       "path": "templates/sales-proposal-deck/SalesProposalDeck.dc.html",
-      "sha256": "1ce3b5aa09d263b7fdab25002ed6975bafff9b503d2e58d3b0cbfe0d7f023fff",
+      "sha256": "5669ae23ec2e63eff285ff9fe83fd2df0defaca8124f3eb78b2925b0cae345bf",
       "declaredProps": [
         {
           "language": {
@@ -15883,7 +15883,7 @@
   "staticTemplates": [
     {
       "path": "templates/ai-cluster-demo.html",
-      "sha256": "3210cd4aee5846a5d8c4a6122da2ad30db518d481c394fc9f667661b0e7c74fc",
+      "sha256": "9cf7e96ec61eba60798ac07c26365449374137d09053ca2a328567320d893c74",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -15924,7 +15924,7 @@
     },
     {
       "path": "templates/email-safe/email-announcement.html",
-      "sha256": "29cad37338838444a77b0936b9bbde1a06a5fc34636010e24e09f1503be37e34",
+      "sha256": "4a3d54e89f42114daf58f5ea369209a3daf335b54f9103db65a12c7c26608a18",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -15953,7 +15953,7 @@
     },
     {
       "path": "templates/email-safe/email-dunning.html",
-      "sha256": "9100096d9c98b0d4b2b69a35252d7570be598fc7190aa0894470a0254cdb7c8a",
+      "sha256": "07bb3e41aab075f49b89aa0c6fd5f301462402d92722c6b23db33101d25b8950",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -15978,7 +15978,7 @@
     },
     {
       "path": "templates/email-safe/email-investor.html",
-      "sha256": "ac5657a766c611df061c8f7749c3daaeedc23ff938e9d4f863b875f1e2e03108",
+      "sha256": "5f60931d1c202d1959a5043d98f458ca1acf2d38c18d7c9e2f738d727e88aa3c",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -16007,7 +16007,7 @@
     },
     {
       "path": "templates/email-safe/email-launch.html",
-      "sha256": "fb7ba5ae2edb3183819af9d03759559fb4fbd40998c164c2cb455a0b4eb826f2",
+      "sha256": "2760d0fdfcb783b9c0d774b5e4f65979d85247e9b752d89830ba2e820cdbff72",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -16036,7 +16036,7 @@
     },
     {
       "path": "templates/email-safe/email-newsletter.html",
-      "sha256": "ae18d0e6ea9601cdcb40a0338fe531a59e3e09261dcca9d0bdaf37b4ac89aca8",
+      "sha256": "c9f2d5cc58ca5d06e93f0efdd781d2010afa8d2ab09bb12d6c20330672b22afe",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -16061,7 +16061,7 @@
     },
     {
       "path": "templates/email-safe/email-status.html",
-      "sha256": "4cbad8501f53d82db895393929fe99a32bb265e47f1a62f822cfe0f09afc289d",
+      "sha256": "8da3bdfbe87b239e4dcca944cc4c5f741f54e87279818197c324a5b079a50a30",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -16090,7 +16090,7 @@
     },
     {
       "path": "templates/email-safe/email-transactional.html",
-      "sha256": "c0149ff3410b4750bf54d6435d7f0a761ef33a96642c6dd53d721e94f130b451",
+      "sha256": "c53f93020d4e00ca29f77179cf07bf04dd7fe24018d4fe725e0263ba9fa30f85",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -16119,7 +16119,7 @@
     },
     {
       "path": "templates/email/Email-VN-standalone.html",
-      "sha256": "d9e5ff722c8558d086212dc5cbcc03c80302cd1be5bd4469e20530dae399f940",
+      "sha256": "90ec1856210e2de7ead5e6664bb8b31754bd0978e69c71bf2ec58a7d18c72acc",
       "declaredProps": [
         {
           "element": {
@@ -16213,7 +16213,7 @@
     },
     {
       "path": "templates/kitchen-sink.html",
-      "sha256": "d5ac87fd3552c4dd6a98cf49556cace99913643a063cef2e6db841902e9020fe",
+      "sha256": "99d628a06f5c9cf7add246f2224eca7000dd9c7f57c60918ea5e008e95614fd0",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -16264,7 +16264,7 @@
     },
     {
       "path": "templates/playground.html",
-      "sha256": "2f297972aa67d79199f45b39bce09fbd180d8094002132f497df78538ccea92c",
+      "sha256": "5b1c198164f7568f5b43ad49baacab0a578e8217b28967244c7037121e2189a3",
       "declaredProps": [],
       "componentImports": [],
       "references": [
@@ -16370,15 +16370,15 @@
         },
         {
           "path": "ui_kits/status-hub/login.html",
-          "sha256": "633642cf574f171c5b570e10a4a0df4403dcd64ad5b7a5188625e1df6bacd35d"
+          "sha256": "f46e9006291737031236c813628650508781491455976fffc2f03dcbb2acadf9"
         },
         {
           "path": "ui_kits/status-hub/project.html",
-          "sha256": "abd4f5f7fb4fa6bb96c9550795eb64fa695fecfdfbf7fd913952c29336cc8ca1"
+          "sha256": "e6611104e329d66ccf0f64f3d9fe9cdc307b6f95aa440945fc449053884cef3a"
         },
         {
           "path": "ui_kits/status-hub/settings.html",
-          "sha256": "cc4405af38350a0b9b71eddeadcdfb827274017d78d96f0f7b2a8ca140402780"
+          "sha256": "786a5eec1bf5cdf96279e5c1bc6abcb8dff5e3d7add00ad488acd601aee83b73"
         },
         {
           "path": "ui_kits/status-hub/static-locale.js",
@@ -16386,7 +16386,7 @@
         },
         {
           "path": "ui_kits/status-hub/status.css",
-          "sha256": "d4f602209ab8b46eabeaf57e1fcb9de23003c6a9f0f8a28add8d84e736bfa4fc"
+          "sha256": "af221fa3f0aa6bf88bb6f37bc4b10ff537e88ed10f7e27118ca4ccbfd502d3db"
         }
       ],
       "pages": [
@@ -16457,7 +16457,7 @@
         },
         {
           "path": "ui_kits/status-hub/login.html",
-          "sha256": "633642cf574f171c5b570e10a4a0df4403dcd64ad5b7a5188625e1df6bacd35d",
+          "sha256": "f46e9006291737031236c813628650508781491455976fffc2f03dcbb2acadf9",
           "declaredProps": [],
           "componentImports": [],
           "references": [
@@ -16502,7 +16502,7 @@
         },
         {
           "path": "ui_kits/status-hub/project.html",
-          "sha256": "abd4f5f7fb4fa6bb96c9550795eb64fa695fecfdfbf7fd913952c29336cc8ca1",
+          "sha256": "e6611104e329d66ccf0f64f3d9fe9cdc307b6f95aa440945fc449053884cef3a",
           "declaredProps": [],
           "componentImports": [],
           "references": [
@@ -16559,7 +16559,7 @@
         },
         {
           "path": "ui_kits/status-hub/settings.html",
-          "sha256": "cc4405af38350a0b9b71eddeadcdfb827274017d78d96f0f7b2a8ca140402780",
+          "sha256": "786a5eec1bf5cdf96279e5c1bc6abcb8dff5e3d7add00ad488acd601aee83b73",
           "declaredProps": [],
           "componentImports": [],
           "references": [
@@ -16625,11 +16625,11 @@
         },
         {
           "path": "ui_kits/website/careers.html",
-          "sha256": "81860652897199c92191df0ccf9f8df6dcca7154b4b7e96ffee16556878d5600"
+          "sha256": "8cd1fdc601fd2a811dc4dccffd283874514fad4ce0e6b06bf41a9b918fb7cd75"
         },
         {
           "path": "ui_kits/website/chat.html",
-          "sha256": "541914b9e553f074acba60b7afa57a1424d1c350bce6d104b1a8f521bdea596c"
+          "sha256": "99e55034cc8df4d7e36e368bb23b49fc9f428d0694d6bca2b5470a82a4a5bc26"
         },
         {
           "path": "ui_kits/website/copy.js",
@@ -16641,17 +16641,17 @@
         },
         {
           "path": "ui_kits/website/site.css",
-          "sha256": "e6f142d768535b0116d33c58a1c99ce31c2e4075363456a76a062f0635de6fa1"
+          "sha256": "7d7bf4f1df1b83c9e0506a7a23a8e31f046ad0af3cff1e70234ef01a2aaadb19"
         },
         {
           "path": "ui_kits/website/work.html",
-          "sha256": "305357e2c9b2c08f13c5c2b903ad62b924495b270d874d92b8169be9ffb39741"
+          "sha256": "d67ff33970d1b737f9c8c61c186abe58deb0d359f6ec7b3e478ee3de7151aad7"
         }
       ],
       "pages": [
         {
           "path": "ui_kits/website/careers.html",
-          "sha256": "81860652897199c92191df0ccf9f8df6dcca7154b4b7e96ffee16556878d5600",
+          "sha256": "8cd1fdc601fd2a811dc4dccffd283874514fad4ce0e6b06bf41a9b918fb7cd75",
           "declaredProps": [],
           "componentImports": [],
           "references": [
@@ -16736,7 +16736,7 @@
         },
         {
           "path": "ui_kits/website/chat.html",
-          "sha256": "541914b9e553f074acba60b7afa57a1424d1c350bce6d104b1a8f521bdea596c",
+          "sha256": "99e55034cc8df4d7e36e368bb23b49fc9f428d0694d6bca2b5470a82a4a5bc26",
           "declaredProps": [],
           "componentImports": [],
           "references": [
@@ -16864,7 +16864,7 @@
         },
         {
           "path": "ui_kits/website/work.html",
-          "sha256": "305357e2c9b2c08f13c5c2b903ad62b924495b270d874d92b8169be9ffb39741",
+          "sha256": "d67ff33970d1b737f9c8c61c186abe58deb0d359f6ec7b3e478ee3de7151aad7",
           "declaredProps": [],
           "componentImports": [],
           "references": [

package/docs/vi/benchmark-rubric.md

@@ -28,7 +28,7 @@ Checklist tự kiểm khi tiến hóa CyberSkill Design System — chuẩn bên
 
 ## Checklist mở rộng style (`data-cs-style`)
 
-Sole pack hôm nay: **liquid-glass** (`tokens/styles.css`, gate `_audit/style-contract.html`). Khi thêm style pack ngoài liquid-glass:
+Các pack hiện hành: **liquid-glass** (mặc định; vắng ≡ mặc định) và **matte-paper** (`tokens/styles.css` + `base/glass.css`, gate `_audit/style-contract.html`). Khi thêm style pack mới:
 
 1. Overlay token **tiêu thụ** 10 role `--cs-accent-*` sẵn có, gồm `--cs-accent-on-strong` (không invent pack Element song song).
 2. Specimen card + Storybook / Atomic View nếu style chọn được ở sản phẩm.

package/docs/vi/consuming.md

@@ -1,6 +1,6 @@
 # Tiêu thụ & nâng cấp CyberSkill Design System
 
-**Checkout nguồn:** VERSION **<!-- cs-source-version:checkout -->2.8.0<!-- /cs-source-version -->** là định danh nguồn cục bộ, không xác nhận phiên bản có trên registry. Với bản ứng viên chưa công bố, kiểm chứng tarball gói cục bộ hoặc checkout nguồn đã rà soát. Lệnh registry bên dưới chỉ bản ổn định 2.7.0 đã công bố (và inventory sibling ADOPT-001 ghi ngày tại 1.7.2), không tự đổi khi chuẩn bị bản phát hành. Chuẩn bị không cấp quyền công bố.
+**Checkout nguồn:** VERSION **<!-- cs-source-version:checkout -->2.9.0<!-- /cs-source-version -->** là định danh nguồn cục bộ, không xác nhận phiên bản có trên registry. Với bản ứng viên chưa công bố, kiểm chứng tarball gói cục bộ hoặc checkout nguồn đã rà soát. Lệnh registry bên dưới chỉ bản ổn định 2.8.0 đã công bố (và inventory sibling ADOPT-001 ghi ngày tại 1.7.2), không tự đổi khi chuẩn bị bản phát hành. Chuẩn bị không cấp quyền công bố.
 
 Cách mọi project — do người hoặc agent điều khiển — áp dụng design system HTML-first này, và cách nhận update an toàn. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 

package/docs/vi/contrast-report.md

@@ -1,6 +1,6 @@
 # Báo cáo contrast — cặp elemental (APCA)
 
-Tạo · quét tại VERSION 2.8.0.
+Tạo · quét tại VERSION 2.9.0.
 
 Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
@@ -104,10 +104,10 @@ Các dòng dùng màu `--cs-color-link` đã khai báo cho light hoặc dark. N
 | tho · sand | liên kết trên tint (chữ thân) | #695300 / #FEF8E7 | 6.98:1 | ✓ |
 | tho · sand | liên kết trên nền kem nâng tham chiếu (chữ thân) | #695300 / #FBF4E9 | 6.77:1 | ✓ |
 | tho · sand | liên kết trên panel tối tham chiếu (chữ thân) | #F9E5AE / #221710 | 14.06:1 | ✓ |
-| tho | liên kết trên trắng (chữ thân) | #644A05 / #FFFFFF | 8.32:1 | ✓ |
-| tho | liên kết trên trang tham chiếu (chữ thân) | #644A05 / #FFFDF8 | 8.19:1 | ✓ |
-| tho | liên kết trên tint (chữ thân) | #644A05 / #FBF4E9 | 7.62:1 | ✓ |
-| tho | liên kết trên nền kem nâng tham chiếu (chữ thân) | #644A05 / #FBF4E9 | 7.62:1 | ✓ |
+| tho | liên kết trên trắng (chữ thân) | #744000 / #FFFFFF | 8.48:1 | ✓ |
+| tho | liên kết trên trang tham chiếu (chữ thân) | #744000 / #FFFDF8 | 8.34:1 | ✓ |
+| tho | liên kết trên tint (chữ thân) | #744000 / #FBF4E9 | 7.76:1 | ✓ |
+| tho | liên kết trên nền kem nâng tham chiếu (chữ thân) | #744000 / #FBF4E9 | 7.76:1 | ✓ |
 | tho | liên kết trên panel tối tham chiếu (chữ thân) | #FFD57A / #221710 | 12.56:1 | ✓ |
 | tho · clay | liên kết trên trắng (chữ thân) | #462402 / #FFFFFF | 13.87:1 | ✓ |
 | tho · clay | liên kết trên trang tham chiếu (chữ thân) | #462402 / #FFFDF8 | 13.65:1 | ✓ |
@@ -184,8 +184,8 @@ Ghép `--cs-accent-strong` với `--cs-accent-on-strong`: cả pack light và da
 |---|---|---|---|---|
 | tho · sand | sáng | #FFFFFF / #856A03 | 80.8 | ✓ |
 | tho · sand | tối | #FFFFFF / #80671A | 82.2 | ✓ |
-| tho | sáng | #FFFFFF / #916D11 | 78.4 | ✓ |
-| tho | tối | #FFFFFF / #6E5205 | 90.1 | ✓ |
+| tho | sáng | #FFFFFF / #A4631E | 78.4 | ✓ |
+| tho | tối | #FFFFFF / #7D480C | 90.5 | ✓ |
 | tho · clay | sáng | #FFFFFF / #5A3004 | 99.5 | ✓ |
 | tho · clay | tối | #FFFFFF / #5C3001 | 99.3 | ✓ |
 | hoa · plasma | sáng | #FFFFFF / #896163 | 81.7 | ✓ |
@@ -221,7 +221,7 @@ Các ngưỡng đề xuất trong `_audit/apca-dark-preview.html`: bright ≥ 75
 | Pack | bright | accent | on | ink |
 |---|---|---|---|---|
 | tho · sand | 90.5 | 76.1 | 82.2 | 87.4 |
-| tho | 81.9 | 64.7 | 90.1 | 81 |
+| tho | 81.9 | 64.7 | 90.5 | 81 |
 | tho · clay | 77.1 | 60.6 | 99.3 | 79.4 |
 | hoa · plasma | 89.4 | 75.1 | 82.8 | 86.4 |
 | hoa | 81.2 | 63.2 | 90.9 | 80.3 |

package/docs/vi/conventions.md

@@ -13,10 +13,10 @@ Mọi bề mặt render resolve bốn scope trực giao — không bao giờ mã
 |---|---|---|---|
 | **Theme** | `data-theme="dark\|system"` | light / dark / system (OS) | `tokens/colors.css` |
 | **Element** (Ngũ Hành) | `data-cs-element` + `data-cs-variant` | bản sắc hue theo sản phẩm | `tokens/elements.css` |
-| **Language** | `lang` / Language tweak | EN · VI bắt buộc; spike `ja` (primary subtag BCP-47) | registry component + props template — xem `docs/decisions/locale-architecture.md` |
-| **Style** | `data-cs-style` (tuỳ chọn; vắng ≡ `liquid-glass`) | pack vật liệu bề mặt | `tokens/styles.css` |
+| **Language** | `lang` / Language tweak | EN · VI (`vi` mặc định trên bề mặt UI; spike `ja` nội bộ) | registry component + props template — xem `docs/decisions/locale-architecture.md` |
+| **Style** | `data-cs-style` (tuỳ chọn; vắng ≡ `liquid-glass`) | pack vật liệu bề mặt (`liquid-glass` · `matte-paper`) | `tokens/styles.css` + `base/glass.css` |
 
-Pack Style duy nhất hiện nay là **liquid-glass**. Bất biến dưới mọi trục: anchors Umber/Ochre, voice, họ chữ, màu semantic status, chỉ báo focus ghép (contour text-primary + halo ochre), sàn APCA, target ≥44px.
+Trục Style có hai pack: **liquid-glass** (mặc định) và **matte-paper** (bề mặt giấy mờ đặc sắc nét). Bất biến dưới mọi trục: anchors Umber/Ochre, voice, họ chữ, màu semantic status, chỉ báo focus ghép (contour text-primary + halo ochre), sàn APCA, target ≥44px.
 
 ## Ngữ pháp đặt tên
 
@@ -79,13 +79,13 @@ phần tử HTML, không dùng trong URL, thuộc tính, CSS hay script.
 
 **Element variant mới** — ở trong envelope oklch của element; đặt 10 token hợp đồng `--cs-accent-*` (gồm `--cs-accent-on-strong` ≥4.5:1 và APCA75 cho nội dung thường trên `-strong`) cộng `--cs-color-text-accent`/`--cs-color-link` (APCA-check cả hai); aurora wash kế thừa từ element qua `.cs-aurora-wash` (chỉ override class rule nếu variant thật sự cần ảnh riêng); đối tác gradient (`grad-b`) phải theo Tương sinh.
 
-**Ship check** — theo gate kiểm chứng portable trong `docs/doctrine.md`, rồi chạy `_audit/docs-consistency.html` **và** `_audit/namespace-portability.html` (cả hai phải xanh). VERSION của checkout nguồn **<!-- cs-source-version:checkout -->2.8.0<!-- /cs-source-version -->**.
+**Ship check** — theo gate kiểm chứng portable trong `docs/doctrine.md`, rồi chạy `_audit/docs-consistency.html` **và** `_audit/namespace-portability.html` (cả hai phải xanh). VERSION của checkout nguồn **<!-- cs-source-version:checkout -->2.9.0<!-- /cs-source-version -->**.
 
 ## Decision log (owner duyệt)
 
 - Element thay thế hoàn toàn Ochre trong scope sản phẩm; cạnh hot-pink của plasma được duyệt (Th7 2026).
 
-- Trục: Theme × Element × Language × Style. Pack Style liquid-glass (sole pack; vắng ≡ mặc định).
+- Trục: Theme × Element × Language × Style. Pack Style gồm `liquid-glass` (mặc định; vắng ≡ mặc định) và `matte-paper`.
 
 - Product registry **đã khóa** (Th7 2026) — tám ánh xạ portfolio trong `docs/products.md`; không invent ánh xạ product → element mới.
 

package/docs/vi/decisions.md

@@ -104,7 +104,7 @@ Theo dõi vận hành — không phải marketing sản phẩm, không phải ba
 
 7. **Hình học màu Element** (Th7 2026; thanh palette owner Th7 2026) — **30** bộ mặc định (5 × soft/middle/deep × light/dark) từ `tokens/element-seeds.json` (`npm run tokens:elements`): soft = pastel wash, middle = mặc định đồng bộ cường độ (Thổ middle ghim ochre logo), deep = anh em tối hơn rõ trong cùng họ hue; role hài hòa; khóa hue light↔dark; sàn APCA dark. Gate geometry yêu cầu cả minΔE và minΔL cộng L đơn điệu. Tên variant công khai không đổi. Hard gate: `_audit/element-geometry.html`. Rubric: `docs/benchmark-rubric.md`.
 
-8. **Trục Style (`data-cs-style`)** (Th7 2026) — Trục sản phẩm thứ tư; sole pack live **liquid-glass** (vắng ≡ liquid-glass). Hợp đồng: `tokens/styles.css` + hard gate `_audit/style-contract.html`. Pack Style tương lai có thể mở rộng vô hạn, mỗi pack một ngôn ngữ phối màu riêng — chỉ qua owner + checklist Expansion Rule trong `docs/benchmark-rubric.md` (không invent pack tùy tiện).
+8. **Trục Style (`data-cs-style`)** (Th7 2026; mở rộng Th11 2026) — Trục sản phẩm thứ tư; hai pack hiện hành **liquid-glass** (mặc định; vắng ≡ liquid-glass) và **matte-paper** (bề mặt giấy mờ đặc sắc nét, không làm mờ nền, dành cho không gian biên tập/dày dữ liệu). Hợp đồng: `tokens/styles.css` + `base/glass.css` + hard gate `_audit/style-contract.html`. Pack Style tương lai chỉ mở rộng qua owner + checklist Expansion Rule trong `docs/benchmark-rubric.md` (không invent pack tùy tiện).
 
 9. **Identity Lab đã gỡ** (Th7 2026) — Lựa chọn owner: xóa `ui_kits/status-hub/identity-lab.html` và mọi tham chiếu product/docs/Storybook. Demo trục nằm ở Storybook toolbar Theme × Element × Language × Style, Atomic View, và specimen Elements Geometry. Các trục Theme × Element × Language × Style **vẫn là** hạ tầng sản phẩm (template, token, kit trung thành Thổ). Không hồi sinh Lab dưới tên khác nếu chưa có quyết định mới.
 
@@ -130,7 +130,7 @@ Quy tắc:
 
 Bản ghi chuẩn: [`docs/decisions/locale-architecture.md`](../decisions/locale-architecture.md) (EN).
 
-- Language vẫn là trục sản phẩm (Theme × Element × Language × Style). Giá trị là primary language subtag (`en` · `vi` · spike `ja`), không phải trục locale lồng, chưa dùng full region tag.
+- Language vẫn là trục sản phẩm (Theme × Element × Language × Style). Trên bề mặt UI chỉ hiển thị `vi` · `en` (`vi` mặc định); `ja` giữ làm spike fallback BCP-47 nội bộ cho Pagination, không đưa lên thanh công cụ UI.
 - Registry giữ cặp EN·VI bắt buộc; bảng spike tùy chọn phải khớp key `en` khi có.
 - Mặc định tiếng Việt trước không đổi (`lang` trống → `vi`). Plural/ICU và biến thể vùng là follow-on.
 

package/docs/vi/deploy.md

@@ -5,7 +5,7 @@ Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 Hai track:
 
 1. **Design system portable (consumers)** — consumer HTML có thể link `styles.css` đã review và `_ds_bundle.js` tùy chọn, hoặc dùng entry legacy cho trình duyệt `_esm/cs.mjs`, mà không cần bundler. Import npm mặc định (`dist/esm/_esm/react.mjs`) là ESM đã biên dịch với React peer; app React cần bộ phân giải module tương thích. JSX nguồn vẫn có qua export nguồn tường minh. Storybook là công cụ của host. Payload npm portable theo `package.json` → `files`; hosting public dùng allowlist đã review trong `scripts/public-site-policy.json`.
-2. **Host site (`design.cyberskill.world`)** — output tĩnh đóng gói cho Vercel. Packaging **có** chạy Node một lần lúc deploy để Storybook ship làm bề mặt sản phẩm tại `/`. Vẫn không có app server chạy dài.
+2. **Host site (`design.cyberskill.world`)** — output tĩnh đóng gói cho GitHub Pages (`.github/workflows/pages.yml` xuất bản `.vercel-static/` kèm `.nojekyll` và `CNAME`) hoặc mọi static host. Packaging **có** chạy Node một lần lúc deploy để Storybook ship làm bề mặt sản phẩm tại `/`. Vẫn không có app server chạy dài.
 
 Production **`/`** là build tĩnh Storybook. Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, và `/playground/:path*` redirect về `/`.
 

package/docs/vi/design-styles.md

@@ -1,13 +1,13 @@
 # Phong cách thiết kế
 
-Các trục styling sống là **Theme × Element × Language × Style**. Pack Style duy nhất hiện tại là **liquid-glass**; khi không có attribute style, pack này được dùng. Phần tử con không có attribute kế thừa phạm vi theme và element gần nhất; root trung tính mặc định sáng với các màu neo thương hiệu studio. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+Các trục styling sống là **Theme × Element × Language × Style**. Trục Style có hai pack vật liệu bề mặt: **liquid-glass** (mặc định; khi không có attribute style, pack này được dùng) và **matte-paper** (bề mặt giấy mờ đặc sắc nét, không làm mờ nền). Phần tử con không có attribute kế thừa phạm vi theme và element gần nhất; root trung tính mặc định sáng với các màu neo thương hiệu studio. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 | Trục | Cách đặt | Thay đổi gì |
 |---|---|---|
 | **Theme** | `data-theme="light"`, `"dark"` hoặc `"system"`; khi không có attribute, kế thừa phạm vi gần nhất (root trung tính mặc định sáng) | màu semantic sáng/tối (trục UI sản phẩm). Light tường minh đặt lại phạm vi dưới tổ tiên dark. System theo tuỳ chọn sáng/tối của OS qua `prefers-color-scheme`; Storybook toolbar và Atomic View có cả ba giá trị |
 | **Element** | `data-cs-element` + tùy chọn `data-cs-variant` | bản sắc sản phẩm Ngũ Hành (**15 pack** = 5 element × soft/middle/deep) |
-| **Language** | `lang` / Language tweak | nội dung dựng sẵn EN · VI, mặc định tiếng Việt; `ja` tuỳ chọn chỉ là thử nghiệm Pagination có giới hạn, không phải bao phủ tiếng Nhật đầy đủ |
-| **Style** | `data-cs-style` (tuỳ chọn; vắng ≡ `liquid-glass`) | Pack vật liệu bề mặt. Sole pack hôm nay: **liquid-glass** (`tokens/styles.css` + `base/glass.css`) |
+| **Language** | `lang` / Language tweak | nội dung dựng sẵn EN · VI (`vi` mặc định trên các bề mặt UI); `ja` chỉ là thử nghiệm i18n nội bộ cho Pagination, không phải tùy chọn trên thanh công cụ UI |
+| **Style** | `data-cs-style` (tuỳ chọn; vắng ≡ `liquid-glass`) | Pack vật liệu bề mặt: **liquid-glass** (kính mờ quang học mặc định) · **matte-paper** (bề mặt giấy mờ đặc sắc nét, `tokens/styles.css` + `base/glass.css`) |
 
 ## Hợp đồng màu Element
 
@@ -24,11 +24,12 @@ Nguồn sự thật: [`tokens/element-seeds.json`](../../tokens/element-seeds.js
 | **Không bao giờ remap** | Chỉ báo focus tổ hợp (viền text-primary + hào quang ochre) · màu semantic status |
 | **Gate hình học** | [`_audit/element-geometry.html`](../../_audit/element-geometry.html) — sync cường độ · tách variant · khóa hue |
 
-## Pack Style — liquid-glass
+## Các pack Style — liquid-glass & matte-paper
 
-- Vật liệu liquid-glass (`cs-surface-*`) là ngôn ngữ bề mặt mặc định.
+- **liquid-glass** (`cs-surface-*`, mặc định khi vắng `data-cs-style`) là ngôn ngữ bề mặt kính mờ quang học.
+- **matte-paper** (`data-cs-style="matte-paper"`) tắt làm mờ nền, chuyển `.cs-surface-*` và `.cs-card` / `.cs-dialog` / `.cs-drawer` / `.cs-popover__panel` / `.cs-menu__list` sang nền đặc `--cs-color-surface-panel` / `--cs-color-surface-raised` với viền liền `1px` `--cs-color-border-default` và độ nổi phẳng (`--cs-shadow-xs`), phù hợp cho trình soạn thảo pháp lý/biên tập, bảng ERP dày dữ liệu và War-Room; phạm vi con `[data-cs-style="liquid-glass"]` khôi phục hiệu ứng kính mờ.
 - Radius, shadow và token kính đến từ `tokens/elevation.css` + `base/glass.css`; hợp đồng trục Style nằm ở [`tokens/styles.css`](../../tokens/styles.css).
-- Gate: [`_audit/style-contract.html`](../../_audit/style-contract.html) — allowlist chỉ `liquid-glass`.
+- Gate: [`_audit/style-contract.html`](../../_audit/style-contract.html) — allowlist `liquid-glass` và `matte-paper`.
 - Từ chối theo doctrine: hue neon/cyberpunk lạnh, memphis vui nhộn, skeuomorphism đầy đủ, emoji trong chrome UI.
 - Họ chữ cố định và có tên token: Be Vietnam Pro (UI) · Space Grotesk (`--cs-font-family-display`, mặt chữ tiêu đề opt-in) · JetBrains Mono (code). Mặt chữ display là **role một scope có thể chọn dùng** qua `.cs-display-face`, không phải trục sản phẩm.
 
@@ -40,7 +41,7 @@ Nguồn sự thật: [`tokens/element-seeds.json`](../../tokens/element-seeds.js
 3. Pattern đã ghi trong `docs/conventions.md` + specimen card khi pattern cần tái sử dụng.
 4. Pack **`data-cs-style`** mới chỉ sau Expansion Rule — xem checklist trong [`docs/vi/benchmark-rubric.md`](benchmark-rubric.md). Style tiêu thụ cùng 10 role accent (gồm `on-strong`); không invent pack Element song song.
 
-Không invent trục sản phẩm thứ năm, và không thêm Style pack thứ hai khi chưa đủ checklist Expansion Rule.
+Không invent trục sản phẩm thứ năm, và không thêm Style pack chưa rà soát khi chưa đủ checklist Expansion Rule.
 
 ## Công tắc theme nội bộ
 
@@ -53,7 +54,7 @@ Bảo trì generator nguồn rồi chạy `npm run tokens:generate` và `npm run
 
 ## Mật độ và vai trò khoảng cách công khai
 
-`data-cs-density="compact"` hiện tác động đến Button và các chỉ số dùng chung của `.cs-field__control`. TextField, Textarea, Select, NativeSelect và Mentions dùng lớp này. Các token của component mang giá trị ghi đè trực tiếp; các utility `--cs-density-*` riêng không chứng minh mức áp dụng rộng hơn. Mức tối thiểu của vùng bấm cho con trỏ thô vẫn được giữ.
+`data-cs-density="compact"` thu gọn Button, chỉ số `.cs-field__control` dùng chung (TextField, Textarea, Select, NativeSelect, Mentions), và nhịp điệu khung chứa của `.cs-card`, `.cs-table`, `.cs-dialog`, `.cs-field`, `.cs-review-gate`, `.cs-alert`, `.cs-toast`, `.cs-tag`, `.cs-tab`, `.cs-menu`, `.cs-stat` và `.cs-divider` (có đặt lại cho `[data-cs-density="comfortable"]` lồng bên trong). Mức tối thiểu `>= 44px` của vùng bấm cho con trỏ thô vẫn được giữ nghiêm ngặt. `data-cs-contrast="high"` (và `prefers-contrast: more`) tăng cường tương phản cho token chữ/viền cùng các ô nhập biểu mẫu, viền tấm kính và đường kẻ ô bảng/datagrid.
 
 Chỉ thay giá trị trực tiếp bằng token khoảng cách khi chúng biểu đạt cùng một vai trò bố cục. Các sửa đổi hiện tại xác minh hình học không đổi và tác động thực tế khi thay token cho control và bố cục collection. Độ dày viền, cỡ chữ, hình học cố định và vùng bấm không tự động là ứng viên cho token khoảng cách. Vì vậy, thống kê `px` đo số giá trị, không đo số lỗi.
 

package/docs/vi/doctrine.md

@@ -42,7 +42,7 @@ Kiểm sâu, không điểm danh bề mặt. Phủ **cả tập và mọi trạn
 | Ngôn ngữ | Việt Nam trước; mọi chuỗi UI gửi cặp EN + VN |
 | Sàn a11y | APCA Lc ≥ 75 chữ thân; không bao giờ gỡ focus ring; mục tiêu chạm ≥ 44px |
 | Trục | Theme × Element × Language × Style (độc lập) |
-| Gói Style | liquid-glass (gói duy nhất; vắng ≡ mặc định) |
+| Gói Style | liquid-glass (mặc định; vắng ≡ mặc định) · matte-paper |
 
 Một accent mỗi bề mặt. Trạng thái ngữ nghĩa và chỉ báo focus tổ hợp (viền text-primary + hào quang ochre) không bao giờ elemental. Lumi luôn vàng trong mọi element.
 

package/docs/vi/entrypoints/CONTRIBUTING.md

@@ -15,7 +15,7 @@ Tệp này không thay thế doctrine, registry sản phẩm hay hướng dẫn
 - **Các màu neo tuân theo bảng doctrine suy ra từ nguồn bên dưới.** Mỗi bề mặt chỉ một accent (Ochre ở lõi; accent Ngũ Hành của sản phẩm trong scope `data-cs-element`). Mọi màu trung tính ngả ấm về umber — không dùng xám lạnh.
 - **Ưu tiên tiếng Việt và song ngữ** — cung cấp EN + VN, giữ dấu, dùng line-height phù hợp tiếng Việt. Mọi template song ngữ có `lang` ở gốc (xem quy ước → Ngôn ngữ trình đọc màn hình).
 - **Ngưỡng tiếp cận tối thiểu** — giữ chỉ báo tiêu điểm kết hợp (viền text-primary và quầng Ochre); vùng chạm ≥44px trên con trỏ thô; văn bản nội dung APCA Lc ≥ 75; tôn trọng `prefers-reduced-motion`/`prefers-contrast`. Kiểu tiêu điểm nằm trong `base/reset.css` và CSS component; `base/a11y.css` bao phủ kích thước con trỏ thô và cơ chế dự phòng tùy chọn. Kiểm chứng trạng thái tiêu điểm hiển thị sau thay đổi.
-- **Ngữ pháp** — Theme × Element × Language × Style là các trục độc lập. Gói phong cách là liquid-glass (gói duy nhất; không khai báo ≡ mặc định).
+- **Ngữ pháp** — Theme × Element × Language × Style là các trục độc lập. Các gói phong cách gồm `liquid-glass` (mặc định; không khai báo ≡ mặc định) và `matte-paper`.
 - **Giọng điệu** — ấm áp / trực tiếp / trung thực / tôn trọng. Sản phẩm là “điều ước” mà Lumi giúp hiện thực hóa. Lumi luôn màu vàng trong mọi hành.
 
 ## Mở rộng và kiểm chứng
@@ -30,6 +30,13 @@ Quy tắc mở rộng và yêu cầu độ sâu kiểm chứng nằm trong **[`d
 - **Card / guideline** — `.html` với dòng đầu `<!-- @dsCard group="…" … -->`.
 - **Tài liệu** — EN + VI cho mọi `docs/*.md`; thêm trang vào thanh bên Storybook Docs (catalog + story) và `docs/viewer.html`. `docs-storybook-coverage` thất bại nếu trang chỉ tồn tại trong git.
 
+## Thiết lập, chạy, benchmark & quy trình phát hành
+
+- **1. Toolchain & máy chủ cục bộ** — Chạy `node scripts/bootstrap-toolchain.mjs` và `node scripts/npm.mjs ci` trên Node >=22.12.0. Khởi chạy Storybook bằng `node scripts/npm.mjs run storybook` (`http://127.0.0.1:6006`) hoặc phục vụ kho nguồn tĩnh bằng `node scripts/npm.mjs run verify:serve` (`http://127.0.0.1:8765/_audit/run.html`). Trước khi chạy bảng cổng headless trên bản checkout mới, hãy tạo biên nhận pixel bằng `node _audit/ci/pixel-diff.mjs http://127.0.0.1:8765`, sau đó chạy `node _audit/ci/run-gates.mjs http://127.0.0.1:8765/_audit/run.html`.
+- **2. Benchmark trình duyệt trực tiếp 20 chiều (`D1`–`D20`)** — Chạy `node scripts/npm.mjs run test:audit-regression` (`node _audit/ci/verify-audit-benchmarks-browser.mjs`) để kiểm chứng toàn bộ `129/129` phép kiểm tra `D1`–`D20` (`_audit/ci/fixtures/benchmark-20d.html`), `64/64` phép kiểm tra cơ sở (`_audit/ci/fixtures/benchmark-baseline.html`), `192/192` ô tương phản phi văn bản trên 32 scope `Theme × Element × Variant`, và `3/3` màn hình sản phẩm chịu tải Generation-2 (`_audit/ci/fixtures/benchmark-gen2.html`). Để thêm chiều đo mới (`D21+`) hoặc phép kiểm tra màn hình phức hợp, cập nhật `_audit/ci/lib/benchmark-checks.mjs` và fixture tương ứng trong `_audit/ci/fixtures/`.
+- **3. Vòng lặp benchmark thiết kế AI bên ngoài (Google Stitch & Claude Design)** — Cung cấp `DESIGN.md` cho Google Stitch và `@cyberskill/design` + `DESIGN.md` cho Claude Design cùng các prompt chịu tải đa trục (ví dụ: bảng dữ liệu mật độ cao, split-pane lồng nhau, ngăn kéo di động con trỏ thô, theme tối Ngũ Hành). Kiểm tra kết quả render trên Chromium headless về độ tương phản, tràn bố cục, đồng nhất trạng thái lỗi và khoảng hở dấu tiếng Việt. Vá nguyên nhân gốc trong `tokens/*.css`, `base/*.css`, `components/` hoặc `scripts/design-md-lib.mjs`, khóa quy tắc mới vào `_audit/ci/lib/benchmark-checks.mjs`, rồi xóa các tệp HTML/ảnh chụp benchmark tạm thời để giữ kho nguồn sạch.
+- **4. CI cục bộ nhanh, GitHub Pages & phát hành npm OIDC** — Chạy `node scripts/npm.mjs run build:check` để kiểm chứng toàn bộ độ mới và unit test, hoặc `node scripts/run-act-ci.mjs --stamp-current --with-status` để ghi biên nhận `ci/act/*` gắn với commit. Các bản đẩy lên nhánh `main` tự động xuất bản trang tĩnh (`npm run build:site` → `.vercel-static/` kèm `.nojekyll` và `CNAME`) lên `https://design.cyberskill.world/` qua `.github/workflows/pages.yml`. Để phát hành bản npm mới, chạy `node scripts/prepare-release.mjs --version X.Y.Z --source-sha <SHA> --write`, commit, gắn thẻ `vX.Y.Z` và đẩy lên để `.github/workflows/npm-publish.yml` phát hành `@cyberskill/design` với chứng thực nguồn gốc OIDC.
+
 Danh tính người bảo trì và đường đóng góp được ghi trong [MAINTAINERS.md](../../../MAINTAINERS.md). `.github/CODEOWNERS` chuyển yêu cầu review đến chủ sở hữu đã được bổ nhiệm; nó không bật quy tắc phê duyệt từ xa hay cấp quyền phát hành.
 
 ## Quy trình agent
@@ -71,7 +78,7 @@ Các bất biến của doctrine (suy ra từ nguồn):
 | Ngôn ngữ | Ưu tiên tiếng Việt; mỗi chuỗi giao diện có cặp EN + VN |
 | Ngưỡng tiếp cận tối thiểu | APCA Lc ≥ 75 cho văn bản nội dung; không bao giờ bỏ vòng tiêu điểm; vùng chạm ≥ 44px |
 | Các trục | Theme × Element × Language × Style (độc lập) |
-| Gói phong cách | liquid-glass (gói duy nhất; không khai báo ≡ mặc định) |
+| Gói phong cách | liquid-glass (mặc định; không khai báo ≡ mặc định) · matte-paper |
 
 - **static-html** — `styles.css`; [hướng dẫn](../../../DESIGN.md). Dùng lớp .cs-*; .dc.html còn cần trình thông dịch được cung cấp hoặc runtime hiểu ngữ pháp đã được kiểm chứng.
 - **react** — `@cyberskill/design`; [hướng dẫn](../../../docs/consuming.md). ESM đã biên dịch với peer React; @cyberskill/design/source tường minh là JSX thô. Không cam kết CommonJS.

package/docs/vi/entrypoints/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: "CyberSkill Design System"
-version: "2.8.0"
+version: "2.9.0"
 generated: "2026-07-23"
 generator: "scripts/generate-design-md.mjs (npm run build:design-md)"
 sources:
@@ -21,7 +21,7 @@ gate: "_audit/design-md-parity.html (window.__designmd)"
 
 - **Khẩu hiệu:** *Turn Your Will Into Real — Hiện Thực Hoá Ý Chí*.
 - **Điểm neo bất biến:** Umber `#45210E` (màu thương hiệu chính) · Ochre `#F4BA17` (màu nhấn). Không ánh xạ lại; chỉ báo focus kết hợp (đường viền text-primary + quầng ochre) là dấu hiệu nhận diện khả năng tiếp cận của toàn studio.
-- **Bốn trục:** Chủ đề (sáng · tối · theo hệ thống) × Nguyên tố (Ngũ Hành — Kim · Mộc · Thủy · Hỏa · Thổ, 15 gói nguyên tố×biến thể) × Ngôn ngữ (EN · VI) × Phong cách (`data-cs-style` — chỉ có gói **liquid-glass**; không khai báo ≡ mặc định).
+- **Bốn trục:** Chủ đề (sáng · tối · theo hệ thống) × Nguyên tố (Ngũ Hành — Kim · Mộc · Thủy · Hỏa · Thổ, 15 gói nguyên tố×biến thể) × Ngôn ngữ (EN · VI) × Phong cách (`data-cs-style` — **liquid-glass** mặc định, không khai báo ≡ mặc định · **matte-paper** bề mặt giấy mờ đặc sắc nét).
 - **Phạm vi ngôn ngữ:** ưu tiên tiếng Việt; chuỗi của thành phần đã đăng ký phải có cặp EN + VI. Khả năng ngôn ngữ của từng mẫu được khai báo riêng; nội dung do bên dùng cung cấp cần được dịch và rà soát riêng. Giữ đầy đủ dấu; cặp ngôn ngữ được khai báo không chứng nhận chất lượng dịch hay cách phát âm của trình đọc màn hình.
 - **Không đặt chữ trên sắc độ trung gian `-accent`:** dùng `-bright` hoặc `-tint`, hoặc kết hợp nền `-strong` với `--cs-accent-on-strong` cho văn bản nội dung. `-accent` dành cho thanh, đường viền, phần tô tiến trình và mảng màu lớn không chứa chữ.
 - **Ngưỡng khả năng tiếp cận:** APCA Lc ≥ 75 cho văn bản nội dung · vùng chạm ≥ 44px · không loại bỏ vòng focus · tôn trọng `prefers-reduced-motion` / `prefers-contrast`.
@@ -45,7 +45,7 @@ Màu ngữ nghĩa cốt lõi. Giá trị tối là phần ghi đè `[data-theme=
 | `--cs-color-text-primary` | `#45210E` | `#f5ead9` |
 | `--cs-color-text-inverse` | `#FFFFFF` | `#1a1108` |
 | `--cs-color-text-accent` | `#6E3B0E` | `#FECD5D` |
-| `--cs-color-text-muted` | `#3F2D21` | `#E9D6C2` |
+| `--cs-color-text-muted` | `#5E4436` | `#E9D6C2` |
 | `--cs-color-semantic-success` | `#166534` | `#4ADE80` |
 | `--cs-color-semantic-danger` | `#B42318` | `#FC9895` |
 | `--cs-color-semantic-warning` | `#92400E` | `#FBBF24` |
@@ -76,7 +76,7 @@ Gói màu nhấn mặc định = Thổ (nguyên tố của studio). Toàn bộ 1
 | Token | Giá trị |
 |---|---|
 | `--cs-accent` | `#F4BA17` |
-| `--cs-accent-strong` | `#916D11` |
+| `--cs-accent-strong` | `#A4631E` |
 | `--cs-accent-bright` | `#F4BA17` |
 | `--cs-accent-on` | `#45210E` |
 | `--cs-accent-tint` | `#FBF4E9` |
@@ -297,9 +297,9 @@ Giá trị bóng là chuỗi CSS box-shadow nguyên gốc từ `$extensions["com
 |---|---|---|
 | `--cs-shadow-xs` | `0 1px 2px rgba(69, 33, 14, 0.06)` | `0 1px 2px rgba(0, 0, 0, 0.40)` |
 | `--cs-shadow-sm` | `0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06)` | `0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42)` |
-| `--cs-shadow-md` | `0 12px 30px rgba(31, 19, 11, 0.18)` | `0 12px 30px rgba(0, 0, 0, 0.50)` |
+| `--cs-shadow-md` | `0 12px 30px rgba(69, 33, 14, 0.14)` | `0 12px 30px rgba(0, 0, 0, 0.50)` |
 | `--cs-shadow-lg` | `0 20px 60px rgba(69, 33, 14, 0.18)` | `0 20px 60px rgba(0, 0, 0, 0.55)` |
-| `--cs-shadow-xl` | `0 24px 80px rgba(31, 19, 11, 0.26)` | `0 24px 80px rgba(0, 0, 0, 0.62)` |
+| `--cs-shadow-xl` | `0 24px 80px rgba(69, 33, 14, 0.24)` | `0 24px 80px rgba(0, 0, 0, 0.62)` |
 
 ### Thang chiều sâu và vật liệu Liquid Glass
 
@@ -432,7 +432,7 @@ Bố cục dựa trên nhịp không gian `4px` (`--cs-space-1` đến `--cs-spa
 
 ## Hướng dẫn prompt cho Agent và khung khởi tạo
 
-- **Thuộc tính gốc (`<html>`):** đặt `lang="vi"` (hoặc `lang="en"`), `data-theme="light"` (`"dark"` | `"system"`), tùy chọn `data-cs-element="tho"` (`"kim"` | `"moc"` | `"thuy"` | `"hoa"` | `"tho"`), tùy chọn `data-cs-density="comfortable"` (`"compact"`), và tùy chọn `data-cs-contrast="high"`.
+- **Thuộc tính gốc (`<html>`):** đặt `lang="vi"` (hoặc `lang="en"`), `data-theme="light"` (`"dark"` | `"system"`), tùy chọn `data-cs-element="tho"` cùng `data-cs-variant` chính xác (`tho` `#45210E`/`#F4BA17`: mặc định/không khai báo, `"sand"`, `"clay"`, bí danh `"studio"`/`"ochre"`; `hoa` `#992515`/`#F26C4F`: mặc định/không khai báo, `"plasma"`, `"lava"`, bí danh `"ember"`; `thuy` `#0D5A8A`/`#58B4E8`: mặc định/không khai báo, `"mist"`, `"ocean"`, bí danh `"river"`; `moc` `#1F5C3A`/`#62C389`: mặc định/không khai báo, `"bamboo"`, `"forest"`, bí danh `"jade"`/`"leaf"`; `kim` `#374151`/`#D6DCE5`: mặc định/không khai báo, `"titanium"`, `"steel"`, bí danh `"gold"`/`"champagne"`/`"silver"`), tùy chọn `data-cs-style="liquid-glass"` (`"matte-paper"` cho bề mặt biên tập/mật độ cao đặc không nhòe kính), tùy chọn `data-cs-density="comfortable"` (`"compact"`), và tùy chọn `data-cs-contrast="standard"` (`"high"`). Các bí danh lớp CSS theo tên thành phần (`.cs-review-gate` / `.cs-human-review-gate`, `.cs-otp` / `.cs-input-otp`, `.cs-select` / `.cs-select__trigger`, và `.cs-datagrid tr.is-selected` / `tr.cs-item.is-selected`) cùng các lớp tài liệu pháp lý (`.cs-doc-sheet`, `.cs-doc-motto`, `.cs-doc-section-bar`, `.cs-doc-blank`, `.cs-doc-field`) được định kiểu tự nhiên.
 - **Chọn runtime:** nạp `styles.css` (hoặc `styles.layered.css`) cho HTML tĩnh `.cs-*`; nhập `@cyberskill/design` (`dist/esm/_esm/react.mjs`) cho React ESM đã biên dịch hoặc `@cyberskill/design/source` (`_esm/react.mjs`) cho JSX nguồn; chỉ dùng `templates/_vendor/support.js` khi xem trước tài liệu `.dc.html`.
 - **Danh sách kiểm tra khi viết prompt cho AI:** nêu rõ (1) runtime đích (`static-html` hay `react`), (2) chủ đề và nguyên tố Ngũ Hành (`data-theme`, `data-cs-element`), (3) cặp nội dung song ngữ (`vi` + `en` giữ nguyên dấu tiếng Việt), (4) khung chứa đáp ứng (`max-width: var(--cs-container-xl)` hoặc `.cs-cq`), và (5) căn chỉnh chữ số dạng bảng (`.cs-tabular` / `.cs-table__cell--numeric`) cho chỉ số và bảng.
 - **Tham chiếu nhanh màu sắc và token:** Màu thương hiệu chính Umber `#45210E` (`--cs-color-brand-umber`) · Màu nhấn Ochre `#F4BA17` (`--cs-color-brand-ochre`) · Nền trang `#FFFDF8` / tối `#1a1108` (`--cs-color-surface-page`) · Nền bảng `#FFFFFF` / tối `#221710` (`--cs-color-surface-panel`) · Nền nổi `#FBF4E9` / tối `#2b1e14` (`--cs-color-surface-raised`) · Viền mặc định `#E7D9C6` / tối `#4a3a2c` (`--cs-color-border-default`).