@vestow/theme 0.1.0

package/css/tokens.css

@@ -0,0 +1,627 @@
+/* =============================================================================
+   Design tokens — nguồn duy nhất của màu sắc / bo tròn / spacing ngữ nghĩa.
+   KHÔNG hardcode màu trong component. Mọi component chỉ dùng utility Tailwind
+   trỏ tới các token dưới đây (vd: bg-background, text-muted-foreground).
+
+   Hệ màu dùng oklch: nội suy đều hơn hsl, chỉnh độ sáng không lệch tone.
+
+   File này là CSS THUẦN — không `@theme`, không `@custom-variant`, không
+   `@apply`. Trình duyệt nào cũng đọc được, framework nào cũng nạp được.
+   Phần cầu nối sang Tailwind v4 nằm riêng ở `tailwind.css`; đừng thêm at-rule
+   của Tailwind vào đây, nếu không woodblock-angular (không có Tailwind) sẽ
+   không dùng được bộ token này nữa.
+
+   Các nấc màu gốc (`--color-slate-900`…) đến từ `primitives.css` — file tự
+   sinh, chép đúng giá trị của bảng màu Tailwind. Xem `scripts/gen-primitives.mjs`.
+   ========================================================================== */
+/* `.light` đi kèm `:root` để có thể ép một VÙNG về theme sáng — trang docs cần
+   hiện màu của cả hai theme cạnh nhau. `.dark` vốn đã là class nên dùng được
+   ngay; light thì trước đây chỉ có ở :root, không scope được. */
+:root,
+.light {
+  /* --- radius --- */
+  --radius: 0.625rem;
+
+  /* --- ám màu mặt nền ---
+     Nấc màu gốc chỉ còn góp ĐỘ SÁNG; chroma và hue của cả nhóm trung tính do
+     hai token dưới đây quyết định, và mỗi bảng màu khai đè `--tint-hue` của
+     riêng nó.
+
+     Vì sao không chỉ chọn một họ trung tính có sẵn: Tailwind chỉ cho HAI họ có
+     sắc thật — slate 0,042 và gray 0,034 — và cả hai đều ở hue xanh lam ~265.
+     Không có bản cam, tím hay teal tương đương, nên Solar/Nebula/Aurora dùng họ
+     nào cũng chỉ tới 0,006–0,011, tức nhạt gấp bốn tới bảy lần bảng mặc định.
+
+     Và KHÔNG lấy hue từ chính nấc gốc (`oklch(from … l var(…) h)`): ở chroma
+     0,001 thì hue là số vô nghĩa — `stone-50` khai hue 106, tức OLIVE. Nâng
+     chroma lên mà giữ hue đó là mặt nền Solar ra xanh lá. Hue phải khai tay.
+
+     Đường cong chroma dưới đây chép đúng của thang slate, nên Hyperion giữ
+     nguyên mọi giá trị (chỉ hue phẳng lại: thang slate vốn trôi 248 -> 266 dọc
+     ramp, ở chroma này lệch đó không nhìn ra). Bảng nào không với tới trần sRGB
+     thì kẹp ở 85% trần và khai đè tại chỗ — chỉ Solar (950) và Aurora (900,
+     950) rơi vào diện đó, xem palettes.css. */
+  --tint-hue: 265.755;
+  /* Hệ số cho cả thang, để một bảng tắt hẳn trục này mà không phải khai đè
+     chín con số. Eclipse là ca duy nhất: chroma 0 chính là định nghĩa của nó,
+     mà nó KHÔNG tự khai hết mọi mặt nền — `surfaces.css` ở theme kính khai đè
+     --card/--popover/--sidebar/--code-bg, nên thiếu hệ số này thì bật kính lên
+     là Eclipse ám xanh lam theo slate. */
+  --tint-scale: 1;
+  --tint-c-50: calc(0.003 * var(--tint-scale));
+  --tint-c-100: calc(0.007 * var(--tint-scale));
+  --tint-c-200: calc(0.013 * var(--tint-scale));
+  --tint-c-300: calc(0.022 * var(--tint-scale));
+  --tint-c-400: calc(0.04 * var(--tint-scale));
+  --tint-c-500: calc(0.046 * var(--tint-scale));
+  --tint-c-700: calc(0.044 * var(--tint-scale));
+  --tint-c-800: calc(0.041 * var(--tint-scale));
+  --tint-c-900: calc(0.042 * var(--tint-scale));
+  --tint-c-950: calc(0.042 * var(--tint-scale));
+
+  /* --- surface --- */
+  --background: var(--color-white);
+  --foreground: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+
+  --card: var(--color-white);
+  --card-foreground: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+
+  --popover: var(--color-white);
+  --popover-foreground: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+
+  /* --- brand --- */
+  --primary: var(--color-blue-600);
+  --primary-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+
+  --secondary: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+  --secondary-foreground: oklch(from var(--color-slate-800) l var(--tint-c-800) var(--tint-hue));
+
+  --muted: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+  --muted-foreground: oklch(from var(--color-slate-500) l var(--tint-c-500) var(--tint-hue));
+
+  --accent: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+  /* Highlight của MỤC MENU đang trỏ tới. Tách khỏi `--accent` vì trục
+     `data-menu-accent` phải đổi được riêng phần menu: `--accent` còn được
+     Sidebar, Calendar và vài chỗ hover khác đọc, đổi thẳng nó là đổi cả những
+     chỗ không ai xin. Mặc định trỏ vào `--accent` nên không đổi gì sẵn có. */
+  --menu-accent: var(--accent);
+  --menu-accent-foreground: var(--accent-foreground);
+  /* Mặt nền của tấm menu. Tách khỏi `--popover` vì trục `data-menu-appearance`
+     phải hạ được độ đục của RIÊNG menu — Popover và Tooltip cũng đọc
+     `--popover` thì không được đi theo. Mặc định trỏ thẳng vào nó nên không đổi
+     gì sẵn có.
+
+     Không tự trộn được từ chính `--popover` trong khối `translucent` nếu dùng
+     chung một tên: custom property tham chiếu chính nó trên CÙNG phần tử là một
+     vòng lặp, CSS coi cả hai là không hợp lệ. Hai tên thì không. */
+  --menu-surface: var(--popover);
+  --accent-foreground: oklch(from var(--color-slate-800) l var(--tint-c-800) var(--tint-hue));
+
+  /* --- status: admin cần đủ 4 trạng thái, không chỉ destructive ---
+     Các cặp nền/chữ ở đây đều đã ĐO đạt WCAG AA (>= 4.5:1). Đổi một trong hai
+     thì đo lại, đừng chỉnh theo cảm giác: --success và --info từng là 0.6/0.62
+     và chỉ đạt 3.57 / 3.36 với chữ trắng. */
+  --destructive: var(--color-red-600);
+  --destructive-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+
+  --success: var(--color-green-700);
+  --success-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+
+  /* NGOẠI LỆ về màu CHỮ, không phải về việc neo: nó vẫn trỏ vào một nấc như
+     mọi token khác (luật 3 của check-tokens cũng không cho phép literal).
+     Chỗ khác biệt là bốn sắc kia đặt chữ TRẮNG lên nền, còn vàng thì không
+     nấc amber/yellow nào vừa đủ tối cho chữ trắng vừa còn ra màu vàng — sớm
+     nhất là amber-700, đã ngả nâu. Vàng vốn là màu sáng nên nó dùng chữ TỐI. */
+  --warning: var(--color-amber-500);
+  --warning-foreground: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+
+  --info: var(--color-cyan-700);
+  --info-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+
+  /* --- soft: nền pha loãng + chữ giữ nguyên sắc, kiểu "soft-danger" của Bootstrap.
+     Để trong suốt chứ không trộn với màu nền cụ thể: chip soft nằm trên card, trên
+     nền trang, và cả trong Alert đã có tint — trong suốt thì tự hoà theo mặt dưới.
+     Khai riêng cho sáng/tối vì modifier kiểu `bg-x/10` chỉ được một con số cho cả
+     hai theme, mà nền tối nuốt tint nên cần đậm gần gấp đôi. */
+  /* Chữ soft: hạ độ sáng và ĐẨY chroma lên 1.2×. Pha với đen như trước vừa
+     tối vừa làm mất độ tươi (chroma 0.245 -> 0.17) nên nhìn đục.
+     Vàng phải hạ sâu hơn hẳn (0.24 so với 0.08) vì sắc vàng vốn sáng. */
+
+  /* Nền của nút, tách khỏi --x để theme kính hạ được độ đục mà không kéo theo
+     `text-primary`, `border-primary`, `ring-primary`. Mặc định là màu đặc. */
+  --primary-fill: var(--primary);
+  --primary-fill-hover: color-mix(in oklab, var(--primary) 90%, transparent);
+  --secondary-fill: var(--secondary);
+  --secondary-fill-hover: color-mix(in oklab, var(--secondary) 90%, transparent);
+  --destructive-fill: var(--destructive);
+  --destructive-fill-hover: color-mix(in oklab, var(--destructive) 90%, transparent);
+  --success-fill: var(--success);
+  --success-fill-hover: color-mix(in oklab, var(--success) 90%, transparent);
+  --warning-fill: var(--warning);
+  --warning-fill-hover: color-mix(in oklab, var(--warning) 90%, transparent);
+  --info-fill: var(--info);
+  --info-fill-hover: color-mix(in oklab, var(--info) 90%, transparent);
+
+  /* Ba mặt của thanh trượt, tách khỏi --muted / --primary / --background vì
+     theme kính phải hạ độ đục của RIÊNG chúng: `bg-muted` thì đã trong mờ sẵn,
+     nhưng `bg-primary` và `bg-background` vẫn đục kín, nên phần đã chọn và cái
+     núm là hai mảng đặc nằm giữa một giao diện kính. Mặc định là màu đặc,
+     surfaces.css khai đè khi bật data-surface="glass". */
+  --slider-track: var(--muted);
+  --slider-range: var(--primary);
+  --slider-thumb: var(--background);
+  --slider-thumb-border: var(--primary);
+
+  --primary-soft: color-mix(in oklab, var(--primary) 14%, var(--control-base));
+  --primary-soft-border: color-mix(in oklab, var(--primary) 26%, var(--control-base));
+  --primary-soft-foreground: oklch(from var(--primary) calc(l - 0.08) calc(c * 1.2) h);
+  --primary-soft-hover: color-mix(in oklab, var(--primary) 20%, var(--control-base));
+
+  --destructive-soft: color-mix(in oklab, var(--destructive) 14%, var(--control-base));
+  --destructive-soft-border: color-mix(in oklab, var(--destructive) 26%, var(--control-base));
+  --destructive-soft-foreground: oklch(from var(--destructive) calc(l - 0.14) calc(c * 1.2) h);
+  --destructive-soft-hover: color-mix(in oklab, var(--destructive) 20%, var(--control-base));
+
+  --success-soft: color-mix(in oklab, var(--success) 14%, var(--control-base));
+  --success-soft-border: color-mix(in oklab, var(--success) 26%, var(--control-base));
+  --success-soft-foreground: oklch(from var(--success) calc(l - 0.08) calc(c * 1.2) h);
+  --success-soft-hover: color-mix(in oklab, var(--success) 20%, var(--control-base));
+
+  /* Chữ soft ở chế độ sáng phải tối hơn màu gốc — ĐO mới biết: để nguyên
+     var(--x) thì primary 3.4:1, success 3.2:1, destructive 4.4:1, trượt hết AA.
+     Pha với đen theo tỉ lệ nên nó vẫn đổi đúng theo bảng màu đang chọn. */
+  --warning-soft: color-mix(in oklab, var(--warning) 14%, var(--control-base));
+  --warning-soft-border: color-mix(in oklab, var(--warning) 30%, var(--control-base));
+  --warning-soft-foreground: oklch(from var(--warning) calc(l - 0.24) calc(c * 1.2) h);
+  --warning-soft-hover: color-mix(in oklab, var(--warning) 22%, var(--control-base));
+
+  --info-soft: color-mix(in oklab, var(--info) 14%, var(--control-base));
+  --info-soft-border: color-mix(in oklab, var(--info) 26%, var(--control-base));
+  --info-soft-foreground: oklch(from var(--info) calc(l - 0.08) calc(c * 1.2) h);
+  --info-soft-hover: color-mix(in oklab, var(--info) 20%, var(--control-base));
+
+  /* Bề mặt: mặc định không lọc gì, không nền gì.
+     surfaces.css bật cả hai lên khi chọn glass. */
+  /* Nền mà các tint soft tô đè lên. `transparent` nghĩa là soft ăn theo mặt
+     nền phía sau — đúng ở theme thường, nhưng ở glass thì phía sau là gradient
+     sáng nên chữ soft mất tương phản. surfaces.css đổi nó thành màu đục. */
+  --control-base: transparent;
+
+  /* Hai mặt của vật liệu kính, dùng bởi surfaces.css khi bật
+     data-surface="glass": viền sáng ở mép, và vệt sáng bên trong tạo cảm giác
+     tấm kính có ĐỘ DÀY. Thiếu cái thứ hai thì bề mặt chỉ là một ô mờ phẳng.
+
+     Luôn trắng, cố tình KHÔNG đổi theo sáng/tối: đây là mặt phản sáng của vật
+     liệu, không phải màu chữ.
+
+     Từng có cả một BỘ nút kính đi kèm ở đây — nền, nền hover, chữ, và một style
+     "shade" nền tối, nhân thêm cho năm sắc màu. Đã gỡ: kính là vật liệu của BỀ
+     MẶT (`data-surface`), không phải một biến thể của nút, nên mọi nút tự thành
+     kính mà không nút nào phải khai gì.
+
+     Con số đáng giữ lại từ đợt đó, vì nó giải thích vì sao KHÔNG nên dựng lại:
+     chữ trắng trên kính trong suốt đo được 10,7:1 ở chỗ ảnh tối nhưng chỉ
+     **1,35:1** ở chỗ sáng, và blur không cứu được (pixel xấu nhất
+     187,224,224 → 185,224,224). Trách nhiệm tương phản thuộc về MẶT NỀN chứ
+     không phải cái nút: media phải đủ tối, hoặc phủ scrim lên media. Nút không
+     tự biết phía sau nó là gì. */
+  --glass-border: color-mix(in oklab, var(--color-white) 30%, transparent);
+  --glass-highlight: color-mix(in oklab, var(--color-white) 22%, transparent);
+
+  --surface-filter: none;
+  --surface-backdrop: none;
+  /* Nền header dính trên cùng. Là token để theme glass hạ độ đục xuống được —
+     88% đục thì kính ở dưới trông rất lệch so với phần thân trang. */
+  --header-surface: color-mix(in oklab, var(--background) 88%, transparent);
+
+  /* --- line / focus --- */
+  --border: oklch(from var(--color-slate-200) l var(--tint-c-200) var(--tint-hue));
+  --input: oklch(from var(--color-slate-200) l var(--tint-c-200) var(--tint-hue));
+  --ring: var(--color-blue-600);
+
+  /* Vòng focus HAI LỚP, dùng chung cho mọi control nhập liệu.
+
+     Lớp trong ĐẶC và lớp ngoài loãng, không phải hai lớp loãng: viền 1px đổi
+     sang `--ring` cộng lớp trong 1px là chỉ báo focus dày 2px liền mạch —
+     đúng mức WCAG 2.4.13 đòi. Lớp ngoài chỉ là quầng trang trí, hạ nó xuống
+     dưới ngưỡng tương phản cũng không mất chỉ báo.
+
+     Bản không hợp lệ đổi sắc chứ KHÔNG bỏ quầng: bỏ đi thì field sai lại là
+     field khó thấy đang focus nhất. */
+  --focus-ring: 0 0 0 1px var(--ring), 0 0 0 4px color-mix(in oklab, var(--ring) 18%, transparent);
+  --focus-ring-invalid: 0 0 0 1px var(--destructive), 0 0 0 4px color-mix(in oklab, var(--destructive) 18%, transparent);
+
+  /* --- sidebar: tách riêng để đổi theme sidebar không đụng tới app --- */
+  --sidebar: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+  --sidebar-foreground: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+  --sidebar-primary: var(--color-blue-600);
+  --sidebar-primary-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+  --sidebar-accent: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+  --sidebar-accent-foreground: oklch(from var(--color-slate-800) l var(--tint-c-800) var(--tint-hue));
+  --sidebar-border: oklch(from var(--color-slate-200) l var(--tint-c-200) var(--tint-hue));
+  --sidebar-ring: var(--color-blue-600);
+
+  /* --- chart: năm màu chuỗi, neo theo sắc của --primary ---
+     Trải theo CẢ sắc lẫn ĐỘ SÁNG. Trải theo sắc thôi là chưa đủ: đo bằng
+     luminance thì bản cũ có hai màu chỉ chênh 0,007 — in đen trắng hay với
+     người khiếm sắc là trùng nhau. Bản này khoảng cách nhỏ nhất 0,045, và mọi
+     màu đạt tối thiểu 3,13:1 trên mặt card (WCAG 1.4.11).
+     Bốn bảng màu còn lại khai đè bộ này trong palettes.css. */
+  --chart-1: var(--color-blue-600);
+  --chart-2: var(--color-cyan-600);
+  --chart-3: var(--color-violet-900);
+  --chart-4: var(--color-sky-800);
+  --chart-5: var(--color-indigo-400);
+
+  /* Chữ/icon đặt TRỰC TIẾP trên một màu chuỗi (nhãn trong cột, chữ cái trong
+     avatar). Không thể dùng chung MỘT màu chữ cho cả năm: thang màu chuỗi cố ý
+     trải rộng độ sáng, nên cùng một màu chữ sẽ đọc được ở đầu này và biến mất ở
+     đầu kia — bản cũ chỉ có --chart-foreground trắng và đã hỏng sẵn (chữ trắng
+     trên chart-3 sáng chỉ đạt 3,0:1, trên blue-400 tối chỉ 2,64:1).
+     Cú pháp màu tương đối tự chọn đen hay trắng theo độ sáng của chính nền:
+     L < 0,58 thì chữ trắng, ngược lại chữ đen. Ngưỡng dò bằng cách quét 0,46–0,68
+     trên cả 50 màu chuỗi: 0,58 cho tương phản thấp nhất cao nhất (4,74:1).
+     HỆ SỐ 1000 KHÔNG PHẢI SỐ TUỲ Ý. Nó quyết định độ dốc của bậc thang: với
+     hệ số 100, một màu nằm sát ngưỡng cho ra giá trị NẰM GIỮA 0 và 1, tức chữ
+     màu xám. Đã dính thật — red-600 có L = 0,577, lệch ngưỡng 0,003, ra
+     clamp(0; 0,3; 1) = 0,3 và tương phản tụt còn 2,85:1. Hệ số 1000 thu dải mập
+     mờ xuống 0,001, mà màu gần ngưỡng nhất trong cả 50 màu vẫn cách 0,003. Khai một lần là đủ cho cả năm
+     bảng màu, vì var(--chart-N) resolve theo bảng đang bật. */
+  --chart-1-foreground: oklch(from var(--chart-1) clamp(0, (0.58 - l) * 1000, 1) 0 h);
+  --chart-2-foreground: oklch(from var(--chart-2) clamp(0, (0.58 - l) * 1000, 1) 0 h);
+  --chart-3-foreground: oklch(from var(--chart-3) clamp(0, (0.58 - l) * 1000, 1) 0 h);
+  --chart-4-foreground: oklch(from var(--chart-4) clamp(0, (0.58 - l) * 1000, 1) 0 h);
+  --chart-5-foreground: oklch(from var(--chart-5) clamp(0, (0.58 - l) * 1000, 1) 0 h);
+  /* --- code: bảng màu tô cú pháp, neo theo GitHub Light ---
+     Đây là theme shiki mà shadcn dùng cho khối code trong tài liệu. Mỗi dòng
+     là nấc Tailwind gần nhất với màu tương ứng của nó (ΔE ≤ 0.08). Nền dùng
+     luôn --secondary nên tự đổi theo bảng màu đang chọn. */
+  --code-bg: var(--secondary);
+  --code-fg: var(--foreground);
+  --code-comment: var(--color-gray-600);
+  --code-keyword: var(--color-red-700);
+  --code-entity: var(--color-purple-700);
+  --code-tag: var(--color-green-800);
+  --code-component: var(--color-blue-700);
+  --code-string: var(--color-blue-950);
+  --code-number: var(--color-blue-700);
+}
+
+.dark {
+  --background: oklch(from var(--color-slate-950) l var(--tint-c-950) var(--tint-hue));
+  --foreground: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+
+  --card: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+  --card-foreground: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+
+  --popover: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+  --popover-foreground: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+
+  --primary: var(--color-blue-600);
+  --primary-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+
+  --secondary: oklch(from var(--color-slate-800) l var(--tint-c-800) var(--tint-hue));
+  --secondary-foreground: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+
+  --muted: oklch(from var(--color-slate-800) l var(--tint-c-800) var(--tint-hue));
+  --muted-foreground: oklch(from var(--color-slate-400) l var(--tint-c-400) var(--tint-hue));
+
+  --accent: oklch(from var(--color-slate-800) l var(--tint-c-800) var(--tint-hue));
+  --accent-foreground: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+
+  /* Bản tối dùng CÙNG nấc với bản sáng. Trần độ sáng của nền nút do chữ trắng
+     quyết định (>= 4.5:1), không liên quan tới nền trang — nên nấc sáng nhất
+     còn đạt là một, cho cả hai theme. Nấc tối hơn thì chữ dễ đọc hơn nhưng nút
+     chìm vào nền tối: blue-700 tách còn 2.76, blue-800 còn 2.13.
+     Vì vậy chữ ở đây là màu SÁNG, khác bản trước. */
+  --destructive: var(--color-red-600);
+  --destructive-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+
+  --success: var(--color-green-700);
+  --success-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+
+  --warning: var(--color-yellow-500);
+  --warning-foreground: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+
+  --info: var(--color-cyan-700);
+  --info-foreground: oklch(from var(--color-slate-50) l var(--tint-c-50) var(--tint-hue));
+
+  /* Nền tối cần tint đậm hơn. Chữ phải pha thêm trắng: dùng thẳng màu gốc thì
+     destructive chỉ đạt 4.0:1 trên nền soft — đo được, không phải phỏng đoán. */
+  --primary-soft: color-mix(in oklab, var(--primary) 22%, var(--control-base));
+  --primary-soft-border: color-mix(in oklab, var(--primary) 34%, var(--control-base));
+  --primary-soft-hover: color-mix(in oklab, var(--primary) 32%, var(--control-base));
+
+  --destructive-soft: color-mix(in oklab, var(--destructive) 22%, var(--control-base));
+  --destructive-soft-border: color-mix(in oklab, var(--destructive) 34%, var(--control-base));
+  --destructive-soft-hover: color-mix(in oklab, var(--destructive) 32%, var(--control-base));
+
+  --success-soft: color-mix(in oklab, var(--success) 22%, var(--control-base));
+  --success-soft-border: color-mix(in oklab, var(--success) 34%, var(--control-base));
+  --success-soft-hover: color-mix(in oklab, var(--success) 32%, var(--control-base));
+
+  --warning-soft: color-mix(in oklab, var(--warning) 22%, var(--control-base));
+  --warning-soft-border: color-mix(in oklab, var(--warning) 34%, var(--control-base));
+  --warning-soft-hover: color-mix(in oklab, var(--warning) 32%, var(--control-base));
+
+  --info-soft: color-mix(in oklab, var(--info) 22%, var(--control-base));
+  --info-soft-border: color-mix(in oklab, var(--info) 34%, var(--control-base));
+  --info-soft-hover: color-mix(in oklab, var(--info) 32%, var(--control-base));
+
+  --primary-soft-foreground: oklch(from var(--primary) calc(l + 0.18) calc(c * 1.1) h);
+  /* Đỏ cộng 0.21 chứ không 0.18 như bốn sắc kia: chip soft đặt trên `--card`
+     (chứ không trên nền trang) ở Solar tối đo được 4.49 — hụt AA đúng 0.008.
+     Solar có --card sáng nhất trong năm bảng nên lớp tint đỏ 22% nằm trên đó
+     bị nâng lên cao nhất. Xem mục đo lại trong CLAUDE.md. */
+  --destructive-soft-foreground: oklch(from var(--destructive) calc(l + 0.21) calc(c * 1.1) h);
+  --success-soft-foreground: oklch(from var(--success) calc(l + 0.18) calc(c * 1.1) h);
+  --warning-soft-foreground: oklch(from var(--warning) calc(l + 0.06) calc(c * 1.1) h);
+  --info-soft-foreground: oklch(from var(--info) calc(l + 0.18) calc(c * 1.1) h);
+
+  --border: color-mix(in oklab, var(--color-white) 12%, transparent);
+  --input: color-mix(in oklab, var(--color-white) 16%, transparent);
+  --ring: var(--color-blue-400);
+
+  /* Quầng đậm hơn bản sáng (18% -> 30%): nền tối nuốt tint, để nguyên 18%
+     thì lớp ngoài gần như không thấy. Cùng cách xử lý như nhóm token soft. */
+  --focus-ring: 0 0 0 1px var(--ring), 0 0 0 4px color-mix(in oklab, var(--ring) 30%, transparent);
+  --focus-ring-invalid: 0 0 0 1px var(--destructive), 0 0 0 4px color-mix(in oklab, var(--destructive) 30%, transparent);
+
+  --sidebar: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+  --sidebar-foreground: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+  --sidebar-primary: var(--color-blue-400);
+  --sidebar-primary-foreground: oklch(from var(--color-slate-950) l var(--tint-c-950) var(--tint-hue));
+  --sidebar-accent: oklch(from var(--color-slate-800) l var(--tint-c-800) var(--tint-hue));
+  --sidebar-accent-foreground: oklch(from var(--color-slate-100) l var(--tint-c-100) var(--tint-hue));
+  --sidebar-border: color-mix(in oklab, var(--color-white) 12%, transparent);
+  --sidebar-ring: var(--color-blue-400);
+
+  --chart-1: var(--color-blue-400);
+  --chart-2: var(--color-cyan-400);
+  --chart-3: var(--color-violet-500);
+  --chart-4: var(--color-sky-400);
+  --chart-5: var(--color-indigo-400);
+  --code-bg: var(--secondary);
+  --code-fg: var(--foreground);
+  --code-comment: var(--color-gray-400);
+  --code-keyword: var(--color-red-400);
+  --code-entity: var(--color-violet-400);
+  --code-tag: var(--color-green-300);
+  --code-component: var(--color-blue-300);
+  --code-string: var(--color-sky-300);
+  --code-number: var(--color-blue-300);
+}
+
+/* Bo tròn suy ra từ `--radius`. Khai ở đây (chứ không chỉ trong `@theme` của
+   Tailwind) để consumer không dùng Tailwind vẫn có `var(--radius-md)`.
+
+   Thang NHÂN TỈ LỆ, không cộng trừ px. Trước đây là -4 / -2 / 0 / +4 / +8, và
+   ở mỏ neo mặc định 0.625rem hai cách cho KẾT QUẢ TRÙNG KHÍT (6 / 8 / 10 / 14 /
+   18px) — các hệ số dưới đây chính là tỉ lệ đo được từ thang cũ, nên đổi sang
+   nhân không dịch một pixel nào của bảng gốc lẫn bốn bảng màu hiện có.
+
+   Cộng trừ px SỤP ở mỏ neo nhỏ, và đó là lý do phải đổi. Ở `--radius: 3px`
+   thang cũ ra -1 / 1 / 3 / 7 / 11: nấc nhỏ bị kẹp về 0, nấc lớn vọt lên gần
+   gấp bốn lần mỏ neo, tức hai đầu thang giãn ra đúng lúc thiết kế muốn nó co
+   lại. Nhân tỉ lệ ra 1,8 / 2,4 / 3 / 4,2 / 5,4 — cả thang nằm gọn trong 2-5px,
+   giữ nguyên thứ tự và giữ nguyên tương quan.
+
+   Hệ quả là `--radius` mới thật sự là MỘT mặc định cho cả hệ: đổi nó thì mọi
+   component đi theo cùng tỉ lệ, còn chỗ nào cần khác thì tự khai class tại chỗ.
+   Trước khi đổi, một mỏ neo nhỏ làm thang vỡ ra chứ không co lại.
+   `[data-style]` PHẢI có trong danh sách này, và đó không phải chỗ thừa.
+   `calc(var(--radius) …)` giải ngay tại phần tử mang khai báo, rồi chỉ có KẾT
+   QUẢ mới thừa kế xuống. Nên đặt `--radius` trên một phần tử CON của `.light`
+   thì năm nấc đã tính xong ở `.light` bằng giá trị CŨ — ghi đè im lặng không
+   có tác dụng. Đã đo trên `/create`: `--radius` chạy 0rem → 1.4rem mà
+   `rounded-lg` đứng nguyên 10px, tức cả ô chọn bo góc lẫn `data-style="nova"`
+   đều vô hiệu khi trục hình khối nằm ở một khối lồng thay vì ở `<html>`.
+
+   Cùng lớp lỗi với "bảng màu đè token kính" và với ba lần lặp attribute ở
+   `styles.css`: quy tắc đúng ở `:root` không tự đúng ở khối lồng. */
+:root,
+.light,
+.dark,
+[data-style] {
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+}
+
+/* Geist cho chữ, Geist Mono cho code — đúng bộ font bản thiết kế dùng.
+   Webfont nạp từ Google Fonts trong index.html của app (có subset vietnamese),
+   không thêm package nào.
+   `tailwind.css` ánh xạ hai biến này vào `@theme`, nhờ đó Tailwind lấy chúng
+   làm --default-font-family / --default-mono-font-family. */
+:root {
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  /* Họ chữ cho TIÊU ĐỀ. Mặc định trỏ vào `--font-sans` nên không đổi gì cho tới
+     khi có người đặt lại nó — nhưng nó là một token RIÊNG, không phải bí danh:
+     đổi nó không kéo theo chữ thân bài, và ngược lại.
+
+     Người đọc nó là rule `h1..h6` trong `@layer base` của `src/variants`,
+     và `--typeset-font-heading` của lớp văn xuôi rơi lui về đây. */
+  --font-heading: var(--font-sans);
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+/* Số đo của CONTROL — tầng component, và nó phải TỰ KIẾM chỗ đứng.
+
+   TIÊU CHÍ KẾT NẠP: một số đo chỉ thành token khi có thứ BÊN NGOÀI component
+   phải với vào trong nó — một trục theme, một ràng buộc CSS, hoặc một component
+   khác đang chép lại nó. Muốn đổi số đo cho vui thì ghi đè bằng `class`; `cn()`
+   lo việc đó và tailwind-merge đã đo là thắng.
+
+   Đây đúng là tiêu chí mà 30 token component sẵn có (--sidebar-*, --code-*,
+   --slider-*, --header-surface, --chart-active-bar) vốn đã tuân theo: cả 30 đều
+   sinh ra vì theme kính hoặc bảng màu phải với vào trong một component, không
+   cái nào sinh ra vì ai đó muốn tuỳ biến. Khác biệt duy nhất là chúng đều là
+   MÀU, còn nhóm dưới đây là SỐ ĐO.
+
+   ĐỪNG làm bản cạn kiệt kiểu PrimeVue. Đo rồi: 44 cỡ trên 12 component, mỗi cỡ
+   3–5 số đo là ra 130–220 token — nhiều hơn cả bộ token ngữ nghĩa hiện có, và
+   mỗi token là một lời hứa tương thích ngược không rút lại được.
+
+   Neo vào `--spacing` chứ không ghi rem cứng, để bên rescale thang spacing thì
+   control đi theo. */
+:root {
+  /* Ô nhập. `h-[30px]` từng bị chép nguyên văn vào 4 component, và cỡ `sm` đã
+     TRÔI thành ba số khác nhau — xem chú thích ở cuối khối. 30px cố ý nằm giữa
+     h-7 (28) và h-8 (32), nên hệ số là 7.5. */
+  --ui-field-height-sm: calc(var(--spacing) * 7.5);
+  --ui-field-height-md: calc(var(--spacing) * 9);
+  --ui-field-padding-x-sm: calc(var(--spacing) * 2.5);
+  --ui-field-padding-x-md: calc(var(--spacing) * 3);
+  --ui-field-text-sm: 12px;
+
+  /* Nút và Toggle. `Toggle` là một nút giữ trạng thái nên nó CỐ Ý soi theo
+     thang cỡ của `Button` — trước đây bằng cách chép nguyên văn cả chuỗi class.
+     Chỉ có xs lệch padding, ba cỡ còn lại dùng chung một giá trị, nên khai một
+     token thay vì ba. */
+  --ui-control-height-xs: calc(var(--spacing) * 6);
+  --ui-control-height-sm: calc(var(--spacing) * 7);
+  --ui-control-height-md: calc(var(--spacing) * 8);
+  --ui-control-height-lg: calc(var(--spacing) * 9);
+  --ui-control-padding-x-xs: calc(var(--spacing) * 2);
+  --ui-control-padding-x: calc(var(--spacing) * 2.5);
+
+  /* Nhịp phản hồi khi bấm. `140ms` bị chép ở 4 component control (Button,
+     Toggle, Checkbox, RadioGroup) và `100ms` ở 2 — cùng lớp lỗi với h-[30px].
+     Không nằm trong thang `--duration-*` chung vì đây là nhịp riêng của control:
+     nó phải nhanh hơn 150ms để cú bấm thấy "dính tay". */
+  --ui-control-duration: 140ms;
+  --ui-control-duration-press: 100ms;
+}
+
+/* Tầng chồng.
+
+   Tailwind KHÔNG có thang z-index (utility `z-10` là số tĩnh, không đọc token),
+   nên repo tự khai. Bảy nấc dưới đây ĐO trên toàn repo chứ không bịa cho tròn —
+   mỗi nấc đều đang có chỗ dùng thật:
+
+     1    NavigationMenuIndicator, cột sticky của DataTable
+     10   nút copy trong CodeBlock, header dính của bảng, tay cầm Splitter (14 chỗ)
+     20   nội dung nổi trên phần trang trí của cùng khối — SidebarRail
+     30   thanh dính của layout — AdminLayout
+     40   đảo nổi — KitTocIsland
+     50   overlay: Dialog, Popover, Tooltip, Select, Sheet, HoverCard (9 chỗ)
+     100  SkipLink — phải trên tất cả, kể cả overlay
+
+   Đọc bằng `z-(--z-overlay)`; không cần khai trong `@theme inline` vì Tailwind
+   không có namespace z-index để mà ánh xạ vào.
+
+   Thang này chỉ nói về tầng TOÀN CỤC. Thứ tự chồng CỤC BỘ giữa các phần tử anh
+   em trong cùng một component thì không thuộc về đây và cứ viết thẳng — lớp phủ
+   của SpeedDial dùng `-z-10` để nằm dưới nút và các mục của chính nó, đặt tên
+   cho nó trong thang toàn cục là nói sai về phạm vi của nó. */
+:root {
+  --z-base: 1;
+  --z-raised: 10;
+  --z-elevated: 20;
+  --z-sticky: 30;
+  --z-floating: 40;
+  --z-overlay: 50;
+  --z-skip-link: 100;
+}
+
+/* Thời lượng chuyển động. Tailwind cũng không có thang này (`duration-200` là
+   số tĩnh). Ba giá trị, đúng bằng ba giá trị repo đang dùng: 150ms ở 5 chỗ,
+   200ms ở 22 chỗ, 300ms ở 2 chỗ.
+
+   CẨN THẬN khi đụng tới easing: `--ease-out` mà `primitives.css` chép từ
+   Tailwind là `cubic-bezier(0, 0, 0.2, 1)`, còn TỪ KHOÁ `ease-out` của CSS là
+   `cubic-bezier(0, 0, 0.58, 1)`. Hai đường cong khác nhau — đổi từ khoá sang
+   token là đổi cả cảm giác chuyển động, không phải dọn dẹp. */
+:root {
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+}
+
+/* Animation mở/đóng theo chiều cao.
+
+   Khai riêng cho Collapsible và Accordion cho khớp tên biến của reka. ĐÃ ĐO:
+   AccordionContent thực ra đặt CẢ HAI biến cùng lúc
+   (--reka-accordion-content-height và --reka-collapsible-content-height đều ra
+   59.5px), nên dùng chung cũng chạy. Tách ra là để đọc code khỏi phải nhớ chi
+   tiết đó, không phải vì bắt buộc.
+
+   ĐỌC BA TÊN BIẾN, vì mỗi bên đặt một tiền tố: reka ghi
+   `--reka-*-content-height`, Radix ghi `--radix-*-content-height`, và cây
+   vanilla — không có primitive nào để mà mượn tên — ghi `--hy-*-content-height`.
+   Một phần tử chỉ do MỘT bên dựng nên không bao giờ có hai cái cùng lúc, và
+   `var()` lồng rơi lui đúng sang tên còn lại. Đây là chỗ duy nhất trong bộ token
+   phải biết tên riêng của primitive — thà nhận nó ở một chỗ còn hơn để mỗi cây
+   khai một bản `@keyframes` rồi bốn bản trôi khỏi nhau.
+   (Radix cũng đặt cả hai: nó gán
+   `--radix-accordion-content-height: var(--radix-collapsible-content-height)`.)
+
+   `@keyframes` để ở tầng ngoài cùng chứ không lồng trong `@theme`: đây là CSS
+   thuần nên consumer không dùng Tailwind vẫn viết được
+   `animation: var(--animate-accordion-down)`. */
+:root {
+  --animate-collapsible-down: collapsible-down var(--duration-base) ease-out;
+  --animate-collapsible-up: collapsible-up var(--duration-base) ease-out;
+  --animate-accordion-down: accordion-down var(--duration-base) ease-out;
+  --animate-accordion-up: accordion-up var(--duration-base) ease-out;
+}
+
+@keyframes collapsible-down {
+  from { height: 0; }
+  to { height: var(--reka-collapsible-content-height, var(--radix-collapsible-content-height, var(--hy-collapsible-content-height))); }
+}
+
+@keyframes collapsible-up {
+  from { height: var(--reka-collapsible-content-height, var(--radix-collapsible-content-height, var(--hy-collapsible-content-height))); }
+  to { height: 0; }
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--reka-accordion-content-height, var(--radix-accordion-content-height, var(--hy-accordion-content-height))); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--reka-accordion-content-height, var(--radix-accordion-content-height, var(--hy-accordion-content-height))); }
+  to { height: 0; }
+}
+
+/* Người bị rối loạn tiền đình có thể chóng mặt, buồn nôn vì chuyển động trên
+   màn hình. Hệ điều hành cho họ bật cờ này và CSS phải nghe theo.
+
+   Trước đó repo chỉ rắc `motion-reduce:` ở 8 component — nghĩa là phần lớn
+   transition và toàn bộ animation vào/ra của Dialog, Sheet, Accordion vẫn chạy.
+   Đặt ở đây thì không component nào phải nhớ nữa.
+
+   BA điều cố ý KHÔNG làm:
+
+   1. Không đụng `transform`. Nghe thì hợp lý vì slide/scale là thứ cần bỏ,
+      nhưng SpeedDial dùng `translate()` để ĐẶT VỊ TRÍ chứ không phải để tạo
+      hiệu ứng — vô hiệu hoá nó là dồn cả tám mục chồng lên nút chính.
+   2. Không hạ `animation-iteration-count` xuống 1. Spinner quay vô hạn, cắt đi
+      là chỉ báo tải đứng im — hỏng chứ không phải trợ năng. Chuyển động lặp
+      liên tục, không có điểm đầu cuối, vốn không phải thứ cờ này nhắm tới.
+   3. Không xoá hẳn transition, chỉ rút còn 1ms. Tài liệu nói rõ: giảm chuyển
+      động KHÔNG phải bỏ phản hồi — trạng thái vẫn phải đổi, chỉ là đổi ngay
+      thay vì trượt tới. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 1ms !important;
+    transition-delay: 0ms !important;
+    animation-duration: 1ms !important;
+    animation-delay: 0ms !important;
+  }
+
+  /* Spinner là ngoại lệ — xem lý do 2 ở trên. */
+  .animate-spin {
+    animation-duration: 1s !important;
+  }
+
+  html {
+    scroll-behavior: auto !important;
+  }
+}