@vestow/theme 0.1.0

package/css/components/button.css

@@ -0,0 +1,143 @@
+/* =============================================================================
+   TOKEN CỦA RIÊNG BUTTON — tầng token theo COMPONENT, kiểu PrimeVue.
+
+   Vì sao có tầng này. Cho tới nay Button đọc thẳng 42 token DÙNG CHUNG
+   (`--primary`, `--destructive-soft`…), tức muốn chỉnh riêng cái nút thì phải
+   đổi một token mà Badge, Alert và hai chục chỗ khác cũng đang đọc. PrimeVue
+   giải bằng cách cho mỗi component một không gian tên riêng — 176 token cho
+   riêng Button của họ. Đây là bản tương đương cho repo này.
+
+   MỖI TOKEN MẶC ĐỊNH TRỎ VÀO TOKEN NGỮ NGHĨA. Đó là điều kiện để tầng này
+   không phá thứ đang có: chín trục theme vẫn chảy qua (`--primary` đổi theo
+   bảng màu thì `--button-default-bg` đổi theo), và diện mạo không dịch một
+   pixel. Cái được thêm là một mặt phẳng để ghi đè RIÊNG nút.
+
+   VÌ SAO ÍT HƠN 176. Bên họ 8 severity × 11, cộng `outlined` và `text` mỗi cái
+   nhân 8 nữa. Ở đây `soft` là MỘT trục tone áp cho 5 sắc, và `outline`/`ghost`/
+   `link` không nhân theo sắc — nên cùng độ phủ mà còn 65 token.
+
+   Đếm lại, đừng tin con số trên (nó đã sai một lần, ghi 73):
+
+       grep -cP '^\s*--button-[a-z-]+:' css/components/button.css
+
+   Nhóm `--ui-control-*` KHÔNG chép vào đây: chiều cao và đệm ngang dùng chung
+   với Toggle theo đúng chủ ý đã ghi ở `CLAUDE.md`, tách ra là dựng lại đúng
+   thứ việc gom chúng sinh ra để dập.
+   ========================================================================== */
+
+:root {
+  /* --- cấu trúc --- */
+  --button-radius: var(--radius-lg);
+  --button-radius-sm: var(--radius-md);
+  --button-gap: calc(var(--spacing) * 1.5);
+  --button-gap-xs: var(--spacing);
+  --button-font-weight: 500;
+  --button-font-size: var(--text-sm);
+  --button-font-size-sm: 0.8rem;
+  --button-font-size-xs: var(--text-xs);
+  --button-icon-size: calc(var(--spacing) * 4);
+  --button-icon-size-xs: calc(var(--spacing) * 3);
+  --button-duration: var(--ui-control-duration);
+
+  /* Hai con số này TRƯỚC ĐÂY là literal nằm trong bảng cva — `active:scale-[0.97]`
+     và `disabled:opacity-50`. Đó đúng là thứ tầng token sinh ra để rút. */
+  --button-press-scale: 0.97;
+  --button-press-duration: var(--ui-control-duration-press);
+  --button-disabled-opacity: 0.5;
+
+  /* --- tone SOLID, sáu sắc ---
+     `-active` là nấc MỚI: repo chưa từng có token cho trạng thái nhấn, chỉ có
+     một phép thu nhỏ. Dẫn xuất theo đúng khuôn của `-fill-hover` (90% độ đục),
+     đi tiếp một nấc còn 80%. */
+  --button-default-bg: var(--primary-fill);
+  --button-default-bg-hover: var(--primary-fill-hover);
+  --button-default-bg-active: color-mix(in oklab, var(--primary) 80%, transparent);
+  --button-default-fg: var(--primary-foreground);
+
+  --button-secondary-bg: var(--secondary-fill);
+  --button-secondary-bg-hover: var(--secondary-fill-hover);
+  --button-secondary-bg-active: color-mix(in oklab, var(--secondary) 80%, transparent);
+  --button-secondary-fg: var(--secondary-foreground);
+
+  --button-destructive-bg: var(--destructive-fill);
+  --button-destructive-bg-hover: var(--destructive-fill-hover);
+  --button-destructive-bg-active: color-mix(in oklab, var(--destructive) 80%, transparent);
+  --button-destructive-fg: var(--destructive-foreground);
+
+  --button-success-bg: var(--success-fill);
+  --button-success-bg-hover: var(--success-fill-hover);
+  --button-success-bg-active: color-mix(in oklab, var(--success) 80%, transparent);
+  --button-success-fg: var(--success-foreground);
+
+  --button-warning-bg: var(--warning-fill);
+  --button-warning-bg-hover: var(--warning-fill-hover);
+  --button-warning-bg-active: color-mix(in oklab, var(--warning) 80%, transparent);
+  --button-warning-fg: var(--warning-foreground);
+
+  --button-info-bg: var(--info-fill);
+  --button-info-bg-hover: var(--info-fill-hover);
+  --button-info-bg-active: color-mix(in oklab, var(--info) 80%, transparent);
+  --button-info-fg: var(--info-foreground);
+
+  /* --- tone SOFT, năm sắc màu ---
+     Hover đổi THẲNG sang nền đặc và chữ trắng, không nội suy — lý do đo được ở
+     mục "Hover nút soft" trong CLAUDE.md: giữa transition tương phản sập còn
+     1,09:1. Vì vậy `-soft-bg-hover` trỏ vào màu đặc chứ không phải một nấc pha. */
+  --button-default-soft-bg: var(--primary-soft);
+  --button-default-soft-bg-hover: var(--primary);
+  --button-default-soft-fg: var(--primary-soft-foreground);
+  --button-default-soft-fg-hover: var(--primary-foreground);
+
+  --button-destructive-soft-bg: var(--destructive-soft);
+  --button-destructive-soft-bg-hover: var(--destructive);
+  --button-destructive-soft-fg: var(--destructive-soft-foreground);
+  --button-destructive-soft-fg-hover: var(--destructive-foreground);
+
+  --button-success-soft-bg: var(--success-soft);
+  --button-success-soft-bg-hover: var(--success);
+  --button-success-soft-fg: var(--success-soft-foreground);
+  --button-success-soft-fg-hover: var(--success-foreground);
+
+  --button-warning-soft-bg: var(--warning-soft);
+  --button-warning-soft-bg-hover: var(--warning);
+  --button-warning-soft-fg: var(--warning-soft-foreground);
+  --button-warning-soft-fg-hover: var(--warning-foreground);
+
+  --button-info-soft-bg: var(--info-soft);
+  --button-info-soft-bg-hover: var(--info);
+  --button-info-soft-fg: var(--info-soft-foreground);
+  --button-info-soft-fg-hover: var(--info-foreground);
+
+  /* --- ba variant không mang sắc --- */
+  --button-outline-bg: var(--background);
+  --button-outline-bg-hover: var(--accent);
+  --button-outline-fg-hover: var(--accent-foreground);
+  /* KHÔNG dùng `--input`. Viền của nút outline là RANH GIỚI của control — nút
+     đó không có nền, nên không còn gì khác để nhận ra nó — mà `--input` chỉ đạt
+     1,18 trên nền trang. Đo 20 tổ hợp (5 bảng màu × sáng/tối × trên nền trang
+     và trên card), WCAG 1.4.11 đòi 3:1:
+
+       --input                 1,18   20/20 trượt
+       --border                1,03   20/20 trượt
+       --foreground 34%        2,23   10/20
+       --foreground 44%        3,22   0
+       --foreground 46%        3,45   0      <- chọn
+       --muted-foreground      4,57   0      (qua, nhưng đậm như chữ phụ)
+
+     Lấy 46% chứ không 44%: dư 0,22 là quá mỏng, repo từng bác đúng một biên như
+     vậy ở mục vòng focus. Và không lấy `--muted-foreground` vì viền đậm ngang
+     chữ phụ thì nút outline đọc ra như một cái khung.
+
+     Pha từ `--foreground` chứ không chốt một nấc xám — cùng cơ chế `styles.css`
+     dùng cho `--border`: một khai báo đúng cho cả hai chế độ, và tự ám theo
+     bảng màu.
+
+     `--input` GIỮ NGUYÊN cho ô nhập: ô nhập có nền riêng nên viền của nó không
+     phải thứ duy nhất nhận ra control. */
+  --button-outline-border: color-mix(in oklab, var(--foreground) 46%, transparent);
+
+  --button-ghost-bg-hover: var(--accent);
+  --button-ghost-fg-hover: var(--accent-foreground);
+
+  --button-link-fg: var(--primary);
+}

package/css/index.css

@@ -0,0 +1,63 @@
+/* =============================================================================
+   Bộ Design Token của WoodBlock — CSS THUẦN, không phụ thuộc framework nào.
+
+       @import "@vestow/theme/css/index.css";
+
+   App dùng Tailwind v4 thì nạp `tailwind.css` thay cho file này: nó nạp lại
+   đúng bốn file dưới đây rồi thêm phần ánh xạ sang utility.
+
+   Thứ tự nạp là BẮT BUỘC, và mỗi lần đảo đều đã có lỗi thật:
+     1. primitives — nấc màu gốc, mọi token bên dưới trỏ vào đây.
+     2. tokens     — token ngữ nghĩa của bảng màu mặc định.
+     3. palettes   — ghi đè primary + nhóm trung tính theo `data-palette`.
+     4. surfaces   — ghi đè token bề mặt theo `data-surface`, phải sau palettes
+                     nếu không bảng màu sẽ đè token kính và mặt kính đục hoàn toàn.
+     5. bases      — ghi đè HỌ TRUNG TÍNH theo `data-base`, tức chỉ `--tint-hue`
+                     và `--tint-scale`. Phải sau palettes vì bảng màu cũng khai
+                     hai token đó; cùng cái bẫy của (4).
+     6. menus      — ghi đè highlight của mục menu theo `data-menu-accent`.
+     7. styles     — ghi đè bo góc / đường kẻ / độ thoáng theo `data-style`.
+                     Phải sau palettes vì hai bên khai chung `--radius`,
+                     `--border`, `--input` ở cùng độ đặc hiệu (0,3,0), nên thứ
+                     tự nạp mới là thứ quyết định. Cùng cái bẫy của (4).
+
+   HAI FILE CỐ Ý ĐỨNG NGOÀI danh sách này, và cùng một lý do: chúng chỉ có ích
+   cho app thật sự dùng tới, còn `index.css` thì mọi app đều nạp.
+
+   `charts.css` (trục `data-chart`, chọn bộ màu cho năm chuỗi biểu đồ) nạp riêng
+   bằng `@import "@vestow/theme/css/charts.css"`. Đo được **3.084 byte** CSS
+   thô — hơn cả `typeset.css`, mà app không có biểu đồ thì không dùng một dòng
+   nào. Bỏ qua nó KHÔNG làm gãy gì: biểu đồ vẫn lấy `--chart-*` theo bảng màu
+   như trước, chỉ là `data-chart` không còn tác dụng.
+
+   ⚠ Hệ quả phải biết: `themeController` VẪN ghi `data-chart` lên `<html>` dù
+   app có nạp file này hay không — controller không đọc được CSS. Gọi
+   `setChart('neutral')` trong một app quên `@import` thì thuộc tính hiện ra mà
+   màu không đổi, và không có gì báo. App nào phơi ô chọn bộ màu biểu đồ ra giao
+   diện thì phải nạp file này.
+
+   `typeset.css` CỐ Ý ĐỨNG NGOÀI danh sách này — nó là lớp văn xuôi opt-in, nạp
+   riêng bằng `@import "@vestow/theme/css/typeset.css"`. Đo được: gộp vào
+   đây thì mọi app phải trả **2.703 byte** CSS thô cho một lớp mà hôm nay chỉ
+   `vue/apps/kit` dựng ra.
+
+   `bases.css` thì Ở LẠI: nó chỉ khai hai token mỗi khối nên rẻ, và nó đổi MỌI
+   mặt trung tính — nền trang, card, viền, chữ mờ — nên app nào cũng thấy.
+
+   `styles.css` thì Ở LẠI (1.061 byte). Nó cũng là một trục theme như
+   `charts.css`, nên ranh giới ở đây không phải "trục thì vào, lớp thì ra" mà là
+   GIÁ trên SỐ NGƯỜI DÙNG: `data-style` đổi bo góc và độ thoáng của MỌI
+   component nên app nào cũng thấy, còn `data-chart` chỉ chạm vào biểu đồ.
+   ========================================================================== */
+
+@import "./primitives.css";
+@import "./tokens.css";
+@import "./palettes.css";
+@import "./surfaces.css";
+@import "./bases.css";
+@import "./menus.css";
+@import "./styles.css";
+
+/* 8. components — token của RIÊNG từng component, mỗi cái mặc định trỏ vào một
+      token ngữ nghĩa ở trên. Phải nạp SAU cả bảy file kia vì nó đọc chúng. */
+@import "./components/button.css";

package/css/menus.css

@@ -0,0 +1,165 @@
+/* =============================================================================
+   Trục HIGHLIGHT CỦA MENU — `data-menu-accent`, trục theme thứ bảy.
+
+   Trục nhỏ nhất trong bảy: mỗi khối chỉ khai HAI token. Nó đổi cách mục menu
+   đang trỏ tới được tô — mục hover, mục đang mở submenu, mục đang giữ tiêu điểm
+   bàn phím.
+
+   VÌ SAO KHÔNG ĐỔI THẲNG `--accent`: token đó còn được Sidebar, ô ngày trong
+   Calendar và vài chỗ hover khác đọc. Đổi nó là đổi cả những chỗ không ai xin.
+   `tokens.css` vì vậy tách ra `--menu-accent` / `--menu-accent-foreground`, mặc
+   định trỏ vào `--accent` nên không dịch một pixel nào cho tới khi trục này bật.
+   Người đọc hai token đó là `menu-styles.ts` của `src/variants` — bốn
+   chỗ, dùng chung cho DropdownMenu, ContextMenu, Menubar và Select.
+
+   `subtle` là mặc định nên KHÔNG có khối — cùng lẽ với `hyperion` / `solid` /
+   `default` / `theme` / `slate`.
+
+   Tương phản: `solid` dùng cặp `--primary` / `--primary-foreground`, đã nằm
+   trong 150 tổ hợp đo ở mục "Số đo sau khi neo" (thấp nhất 4,56). `muted` dùng
+   `--muted` với `--foreground`, tức mặt nền nhạt nhất với chữ đậm nhất — không
+   có cách nào để nó trượt.
+
+   ĐỘ ĐẶC HIỆU: attribute lặp ba lần. `tokens.css` khai hai token này ở `:root`
+   và `.dark`; khối `.dark` là (0,1,0) ngang với một attribute trần, nên ở chế độ
+   tối một `[data-menu-accent]` trần sẽ hoà rồi thua theo thứ tự nạp. Cùng cái
+   bẫy của `styles.css`, `charts.css` và `bases.css`.
+   ========================================================================== */
+
+[data-menu-accent="solid"][data-menu-accent="solid"][data-menu-accent="solid"] {
+  --menu-accent: var(--primary);
+  --menu-accent-foreground: var(--primary-foreground);
+}
+
+/* Bản ĐẬM HƠN của `subtle`, không phải một màu khác.
+
+   Bản đầu của khối này viết `var(--muted)` và hoá ra là một no-op: đo được
+   `--muted` và `--accent` TRÙNG GIÁ TRỊ ở cả năm bảng màu (cùng nấc 100 của họ
+   trung tính). Một tuỳ chọn không đổi gì thì tệ hơn là không có tuỳ chọn — nó
+   bắt người dùng thử rồi tự hỏi mình bấm hụt chỗ nào.
+
+   Pha từ `--foreground` chứ không chốt một nấc xám, đúng cách `styles.css` làm
+   đường kẻ của style phẳng: một khai báo đúng cho cả hai chế độ, vì nền tối thì
+   `--foreground` gần trắng nên ra vệt sáng mờ. */
+[data-menu-accent="muted"][data-menu-accent="muted"][data-menu-accent="muted"] {
+  --menu-accent: color-mix(in oklab, var(--foreground) 12%, transparent);
+  --menu-accent-foreground: var(--foreground);
+}
+
+/* =============================================================================
+   Trục MÀU CỦA MẶT MENU — `data-menu-color`, trục theme thứ tám.
+
+   `inverted` lật tấm menu sang phía đối diện của chế độ đang bật: menu tối trên
+   giao diện sáng, menu sáng trên giao diện tối.
+
+   KHÔNG ĐẺ TOKEN MỚI, và đây là chỗ khác `--menu-accent` ở đầu file. Token đó
+   buộc phải tách vì `--accent` bị đọc bởi Sidebar và Calendar — những phần tử
+   NGOÀI menu. Ở đây thì phạm vi đã tự khoanh bằng cây DOM: khối này đặt lại
+   `--popover` và bạn bè NGAY TRÊN phần tử `.ui-menu`, nên Popover và Tooltip
+   không dịch một pixel nào.
+
+   ĐỘ ĐẶC HIỆU: KHÔNG phải lặp attribute ba lần như `styles.css` / `charts.css`
+   / `bases.css`. Ba file đó khai lại token trên `:root`, tức đấu tay đôi với
+   khối `.dark` của `tokens.css`; còn ở đây khai trên một phần tử CON, mà khai
+   báo trực tiếp luôn thắng giá trị thừa kế bất kể độ đặc hiệu.
+
+   Giá trị lấy nguyên từ khối đối diện trong `tokens.css`, không nghĩ nấc mới —
+   nên cặp chữ/nền của menu lật đúng là cặp đã nằm trong 150 tổ hợp đã đo.
+
+   `--foreground` phải lật theo dù menu không dùng nó trực tiếp: `menu-accent`
+   ở giá trị `muted` pha từ chính nó, giữ nguyên là mục đang trỏ tới bị tô bằng
+   sắc của mặt nền BÊN NGOÀI menu.
+
+   `--border` thì KHÔNG chép: bản tối trong `tokens.css` là trắng 12% trong
+   suốt, mà một tấm menu tối nằm trên trang sáng thì viền đó tan mất. Pha từ
+   chính chữ của menu, đúng cách `styles.css` dựng đường kẻ của style phẳng. */
+:root:not(.dark)[data-menu-color="inverted"] .ui-menu,
+.light [data-menu-color="inverted"] .ui-menu {
+  --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));
+  --foreground: oklch(from var(--color-slate-100) l var(--tint-c-100) 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));
+  --menu-surface: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+  --border: color-mix(in oklab, var(--popover-foreground) 16%, transparent);
+}
+
+:root.dark[data-menu-color="inverted"] .ui-menu,
+.dark [data-menu-color="inverted"] .ui-menu {
+  --popover: var(--color-white);
+  --popover-foreground: oklch(from var(--color-slate-900) l var(--tint-c-900) var(--tint-hue));
+  --foreground: oklch(from var(--color-slate-900) l var(--tint-c-900) 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));
+  --accent-foreground: oklch(from var(--color-slate-800) l var(--tint-c-800) var(--tint-hue));
+  --menu-surface: var(--color-white);
+  --border: color-mix(in oklab, var(--popover-foreground) 16%, transparent);
+}
+
+/* =============================================================================
+   Trục VẬT LIỆU CỦA MẶT MENU — `data-menu-appearance`, trục theme thứ chín.
+
+   TỰ LOẠI MÌNH RA KHI THEME KÍNH ĐANG BẬT. Đó là điều tài liệu Liquid Glass của
+   Apple dặn thẳng: đừng chồng kính lên kính. Ở `data-surface="glass"` thì
+   `--popover` đã trong mờ và rule `[class~="bg-menu-surface"]` bên `surfaces.css`
+   đã gắn `backdrop-filter` cho đúng tấm menu này rồi — bật thêm ở đây là hai lớp
+   làm mờ chồng nhau, mà `backdrop-filter` không cộng dồn nên chỉ tổ đè mất bộ
+   lọc của theme kính.
+
+   Trộn từ `--popover` chứ không từ `--menu-surface`: một custom property tham
+   chiếu CHÍNH NÓ trên cùng phần tử là vòng lặp, CSS coi cả hai là không hợp lệ.
+   Đọc `--popover` thì vừa tránh được vòng lặp vừa tự ăn theo trục `inverted` ở
+   trên — hai trục ghép được, tấm menu lật màu vẫn trong mờ đúng nền của nó.
+
+   Độ đục 82%: dưới mức đó thì chữ mờ trong menu bắt đầu ăn màu của thứ nằm sau,
+   đúng ngưỡng mà mục "Tương phản trên nền kính" ở CLAUDE.md đã đo cho `--card`. */
+:root:not([data-surface="glass"])[data-menu-appearance="translucent"] .ui-menu {
+  --menu-surface: color-mix(in oklab, var(--popover) 82%, transparent);
+
+  /* CHỮ MỜ PHẢI ĐẬM LÊN, nếu không trục này trượt AA.
+
+     Số đo trước khi sửa, lấy ở CẬN — tấm menu trong mờ nằm trên nội dung bất
+     kỳ nên phải kẹp giữa nền trắng thuần và đen thuần, không đo trên nền trang
+     tiện tay nhất:
+
+       | tổ hợp                  | chữ chính | chữ mờ   |
+       | menu sáng (82%)         | 11,68     | **3,12** |
+       | menu tối  (82%)         |  9,29     | **3,89** |
+
+     Hai đường chữa, đo cả hai rồi mới chọn:
+
+       | cách                          | chữ mờ                        |
+       | nâng độ đục 82 → 86%          | 4,49 — **trượt**              |
+       | nâng độ đục 82 → 90%          | 5,14 — qua, nhưng hết trong   |
+       | pha 68% về phía chữ chính     | 4,19 — **vẫn trượt**          |
+       | pha 78% về phía chữ chính     | **5,48**, giữ nguyên 82%      |
+
+     Chọn cách sau, đúng tiền lệ của mục "Tương phản trên nền kính": nâng độ đục
+     là hy sinh chính thứ trục này sinh ra để làm, còn màu chữ thì còn chỗ xoay.
+     Ở 5,48 chữ mờ vẫn nhạt hơn chữ chính rất xa (9,29–11,68) nên vẫn đọc ra là
+     "mờ".
+
+     Đừng chọn tỉ lệ bằng một phép quét viết tay trong JS: phép quét đó trộn
+     trong sRGB còn `color-mix(in oklab, …)` thì không, nên nó cho 4,57 ở mức
+     68% trong khi giá trị THẬT là 4,19. Đặt số vào CSS rồi đọc lại computed
+     style mới là phép đo đúng.
+     Pha từ `--popover-foreground` và `--popover`, KHÔNG pha từ chính
+     `--muted-foreground`: nó được khai ngay trên phần tử này, nên đọc lại chính
+     nó là vòng lặp và CSS coi cả hai khai báo là không hợp lệ — cùng cái bẫy đã
+     ghi cho `--menu-surface` ngay dưới đây. */
+  --muted-foreground: color-mix(in oklab, var(--popover-foreground) 78%, var(--popover));
+
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+  backdrop-filter: blur(12px) saturate(1.5);
+}
+
+/* Cùng lý do với khối kính: người dùng tắt hiệu ứng trong suốt thì menu phải
+   đục hẳn, không chỉ bớt mờ. */
+@media (prefers-reduced-transparency: reduce) {
+  :root[data-menu-appearance="translucent"] .ui-menu {
+    --menu-surface: var(--popover);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/css/palettes.css

@@ -0,0 +1,292 @@
+/* =============================================================================
+   Bảng màu thay thế, chép từ mockup "Vue3 Shadcn UI mockups".
+
+   Mỗi bảng chỉ khai lại những token nó đổi; phần còn lại vẫn kế thừa từ
+   tokens.css. Chọn bảng bằng `usePalette()` — nó đặt `data-palette` lên
+   thẻ <html>.
+
+   Selector khoá theo `.dark` là bắt buộc: nếu để `[data-palette="x"]` trần
+   thì file này nạp sau tokens.css sẽ đè luôn cả khối `.dark`, và bản tối
+   quay về màu của bản sáng.
+   ========================================================================== */
+
+/* PHẠM VI: bảng màu chỉ đổi --primary và bộ trung tính (background, card,
+   secondary, muted, accent, border, sidebar…).
+
+   KHÔNG đụng tới --destructive / --success / --warning / --info. Hai lý do:
+   - Eclipse từng đặt chroma 0 cho chúng -> thông báo lỗi thành màu xám, mất
+     hết ý nghĩa. Bảng màu đơn sắc là nói về primary, không phải về trạng thái.
+   - Ba bảng kia ghi đè bằng giá trị riêng, vô hiệu hoá luôn phần chỉnh tương
+     phản làm ở tokens.css (--success sáng từng chỉ đạt 3.57:1).
+
+   Cũng không khai --code-* ở đây: xem ghi chú trong CLAUDE.md. */
+
+/* MỘT HỌ TRUNG TÍNH cho mỗi bảng, ở CẢ khối sáng lẫn khối tối:
+   solar -> stone, nebula -> zinc, aurora -> mist, eclipse -> neutral.
+   Chỉ --primary / --accent / --sidebar-accent / --chart-* được ra khỏi họ đó.
+
+   Ở chroma 0,006 thì góc hue gần như vô nghĩa về mặt số học nên rất dễ mượn nhầm
+   họ mà không ai thấy: khối tối của nebula từng lấy gray + mauve, của aurora từng
+   lấy gray, và card lệch tông so với nền tới ΔE 0,03 (bốn ca đúng đều ≤ 0,002).
+   check-tokens.mjs KHÔNG bắt được — nó chỉ hỏi tên token, không hỏi họ màu. */
+
+/* --- Solar: Cam nóng trên nền than ấm --- */
+
+:root:not(.dark)[data-palette="solar"],
+.light[data-palette="solar"] {
+  --tint-hue: 56.043;
+  --background:oklch(from var(--color-stone-50) l var(--tint-c-50) var(--tint-hue));
+  --foreground:oklch(from var(--color-stone-900) l var(--tint-c-900) var(--tint-hue));
+  --card:var(--color-white);
+  --popover:var(--color-white);
+  --primary:var(--color-orange-700);
+  --primary-foreground:oklch(from var(--color-stone-50) l var(--tint-c-50) var(--tint-hue));
+  --secondary:oklch(from var(--color-stone-100) l var(--tint-c-100) var(--tint-hue));
+  --secondary-foreground:oklch(from var(--color-stone-800) l var(--tint-c-800) var(--tint-hue));
+  --muted:oklch(from var(--color-stone-100) l var(--tint-c-100) var(--tint-hue));
+  --muted-foreground:oklch(from var(--color-stone-500) l var(--tint-c-500) var(--tint-hue));
+  --accent:var(--color-orange-100);
+  --accent-foreground:oklch(from var(--color-stone-800) l var(--tint-c-800) var(--tint-hue));
+  --border:oklch(from var(--color-stone-200) l var(--tint-c-200) var(--tint-hue));
+  --input:oklch(from var(--color-stone-200) l var(--tint-c-200) var(--tint-hue));
+  --ring:var(--color-orange-700);
+  --sidebar:oklch(from var(--color-stone-100) l var(--tint-c-100) var(--tint-hue));
+  --sidebar-accent:oklch(from var(--color-stone-200) l var(--tint-c-200) var(--tint-hue));
+  --radius:0.625rem;
+  /* Màu chuỗi biểu đồ, lấy các họ lân cận sắc của --primary.
+     Khoảng cách xám nhỏ nhất 0,048; thấp nhất 3,2:1 trên mặt card. */
+  --chart-1: var(--color-orange-700);
+  --chart-2: var(--color-yellow-800);
+  --chart-3: var(--color-rose-500);
+  --chart-4: var(--color-red-900);
+  --chart-5: var(--color-amber-600);
+}
+
+:root.dark[data-palette="solar"],
+.dark[data-palette="solar"] {
+  --tint-hue: 56.043;
+  /* Hue cam-vàng cũng hẹp ở vùng tối: nấc 950 trần 0,045 nên kẹp ở 85%. */
+  --tint-c-950: calc(0.038 * var(--tint-scale));
+  --background:oklch(from var(--color-stone-950) l var(--tint-c-950) var(--tint-hue));
+  --foreground:oklch(from var(--color-stone-100) l var(--tint-c-100) var(--tint-hue));
+  --card:oklch(from var(--color-stone-900) l var(--tint-c-900) var(--tint-hue));
+  --popover:oklch(from var(--color-stone-900) l var(--tint-c-900) var(--tint-hue));
+  --primary:var(--color-orange-700);
+  --primary-foreground:oklch(from var(--color-stone-50) l var(--tint-c-50) var(--tint-hue));
+  --secondary:oklch(from var(--color-stone-800) l var(--tint-c-800) var(--tint-hue));
+  --secondary-foreground:oklch(from var(--color-stone-100) l var(--tint-c-100) var(--tint-hue));
+  --muted:oklch(from var(--color-stone-800) l var(--tint-c-800) var(--tint-hue));
+  --muted-foreground:oklch(from var(--color-stone-400) l var(--tint-c-400) var(--tint-hue));
+  --accent:oklch(from var(--color-stone-800) l var(--tint-c-800) var(--tint-hue));
+  --accent-foreground:oklch(from var(--color-stone-100) l var(--tint-c-100) var(--tint-hue));
+  --border:color-mix(in oklab, var(--color-white) 13%, transparent);
+  --input:color-mix(in oklab, var(--color-white) 17%, transparent);
+  --ring:var(--color-orange-700);
+  --sidebar:oklch(from var(--color-stone-900) l var(--tint-c-900) var(--tint-hue));
+  --sidebar-accent:oklch(from var(--color-stone-800) l var(--tint-c-800) var(--tint-hue));
+  /* Màu chuỗi biểu đồ, lấy các họ lân cận sắc của --primary.
+     Khoảng cách xám nhỏ nhất 0,072; thấp nhất 3,67:1 trên mặt card. */
+  --chart-1: var(--color-orange-600);
+  --chart-2: var(--color-yellow-400);
+  --chart-3: var(--color-rose-400);
+  --chart-4: var(--color-red-600);
+  --chart-5: var(--color-amber-500);
+}
+
+/* --- Nebula: Tím điện, nền trung tính lạnh --- */
+
+:root:not(.dark)[data-palette="nebula"],
+.light[data-palette="nebula"] {
+  --tint-hue: 285.885;
+  --background:var(--color-white);
+  --foreground:oklch(from var(--color-zinc-900) l var(--tint-c-900) var(--tint-hue));
+  --card:var(--color-white);
+  --popover:var(--color-white);
+  --primary:var(--color-purple-600);
+  --primary-foreground:oklch(from var(--color-zinc-50) l var(--tint-c-50) var(--tint-hue));
+  --secondary:oklch(from var(--color-zinc-100) l var(--tint-c-100) var(--tint-hue));
+  --secondary-foreground:oklch(from var(--color-zinc-800) l var(--tint-c-800) var(--tint-hue));
+  --muted:oklch(from var(--color-zinc-100) l var(--tint-c-100) var(--tint-hue));
+  --muted-foreground:oklch(from var(--color-zinc-500) l var(--tint-c-500) var(--tint-hue));
+  --accent:var(--color-purple-100);
+  --accent-foreground:oklch(from var(--color-zinc-800) l var(--tint-c-800) var(--tint-hue));
+  --border:oklch(from var(--color-zinc-200) l var(--tint-c-200) var(--tint-hue));
+  --input:oklch(from var(--color-zinc-200) l var(--tint-c-200) var(--tint-hue));
+  --ring:var(--color-purple-600);
+  --sidebar:oklch(from var(--color-zinc-50) l var(--tint-c-50) var(--tint-hue));
+  --sidebar-accent:var(--color-violet-100);
+  /* Màu chuỗi biểu đồ, lấy các họ lân cận sắc của --primary.
+     Khoảng cách xám nhỏ nhất 0,043; thấp nhất 3,13:1 trên mặt card. */
+  --chart-1: var(--color-purple-600);
+  --chart-2: var(--color-pink-500);
+  --chart-3: var(--color-indigo-400);
+  --chart-4: var(--color-fuchsia-800);
+  --chart-5: var(--color-violet-500);
+}
+
+:root.dark[data-palette="nebula"],
+.dark[data-palette="nebula"] {
+  --tint-hue: 285.885;
+  --background:oklch(from var(--color-zinc-950) l var(--tint-c-950) var(--tint-hue));
+  --foreground:oklch(from var(--color-zinc-100) l var(--tint-c-100) var(--tint-hue));
+  --card:oklch(from var(--color-zinc-900) l var(--tint-c-900) var(--tint-hue));
+  --popover:oklch(from var(--color-zinc-900) l var(--tint-c-900) var(--tint-hue));
+  --primary:var(--color-purple-600);
+  --primary-foreground:oklch(from var(--color-zinc-50) l var(--tint-c-50) var(--tint-hue));
+  --secondary:oklch(from var(--color-zinc-800) l var(--tint-c-800) var(--tint-hue));
+  --secondary-foreground:oklch(from var(--color-zinc-100) l var(--tint-c-100) var(--tint-hue));
+  --muted:oklch(from var(--color-zinc-800) l var(--tint-c-800) var(--tint-hue));
+  --muted-foreground:oklch(from var(--color-zinc-400) l var(--tint-c-400) var(--tint-hue));
+  --accent:oklch(from var(--color-zinc-800) l var(--tint-c-800) var(--tint-hue));
+  --accent-foreground:oklch(from var(--color-zinc-100) l var(--tint-c-100) var(--tint-hue));
+  --border:color-mix(in oklab, var(--color-white) 13%, transparent);
+  --input:color-mix(in oklab, var(--color-white) 17%, transparent);
+  --ring:var(--color-purple-600);
+  --sidebar:oklch(from var(--color-zinc-900) l var(--tint-c-900) var(--tint-hue));
+  --sidebar-accent:oklch(from var(--color-zinc-800) l var(--tint-c-800) var(--tint-hue));
+  /* Màu chuỗi biểu đồ, lấy các họ lân cận sắc của --primary.
+     Khoảng cách xám nhỏ nhất 0,041; thấp nhất 4,31:1 trên mặt card. */
+  --chart-1: var(--color-purple-500);
+  --chart-2: var(--color-pink-300);
+  --chart-3: var(--color-indigo-300);
+  --chart-4: var(--color-fuchsia-500);
+  --chart-5: var(--color-violet-400);
+}
+
+/* --- Aurora: Xanh mòng két trên navy sâu --- */
+
+:root:not(.dark)[data-palette="aurora"],
+.light[data-palette="aurora"] {
+  --tint-hue: 223.9;
+  --background:var(--color-white);
+  --foreground:oklch(from var(--color-mist-900) l var(--tint-c-900) var(--tint-hue));
+  --card:var(--color-white);
+  --popover:var(--color-white);
+  --primary:var(--color-teal-700);
+  --primary-foreground:oklch(from var(--color-mist-50) l var(--tint-c-50) var(--tint-hue));
+  --secondary:oklch(from var(--color-mist-100) l var(--tint-c-100) var(--tint-hue));
+  --secondary-foreground:oklch(from var(--color-mist-800) l var(--tint-c-800) var(--tint-hue));
+  --muted:oklch(from var(--color-mist-100) l var(--tint-c-100) var(--tint-hue));
+  --muted-foreground:oklch(from var(--color-mist-500) l var(--tint-c-500) var(--tint-hue));
+  --accent:var(--color-sky-100);
+  --accent-foreground:oklch(from var(--color-mist-800) l var(--tint-c-800) var(--tint-hue));
+  --border:oklch(from var(--color-mist-200) l var(--tint-c-200) var(--tint-hue));
+  --input:oklch(from var(--color-mist-200) l var(--tint-c-200) var(--tint-hue));
+  --ring:var(--color-teal-700);
+  --sidebar:oklch(from var(--color-mist-50) l var(--tint-c-50) var(--tint-hue));
+  --sidebar-accent:oklch(from var(--color-mist-200) l var(--tint-c-200) var(--tint-hue));
+  /* Màu chuỗi biểu đồ, lấy các họ lân cận sắc của --primary.
+     Khoảng cách xám nhỏ nhất 0,035; thấp nhất 3,22:1 trên mặt card. */
+  --chart-1: var(--color-teal-700);
+  --chart-2: var(--color-sky-900);
+  --chart-3: var(--color-green-600);
+  --chart-4: var(--color-cyan-800);
+  --chart-5: var(--color-emerald-600);
+}
+
+:root.dark[data-palette="aurora"],
+.dark[data-palette="aurora"] {
+  --tint-hue: 223.9;
+  /* Hue teal-lam nằm đúng đáy gamut sRGB ở vùng tối: trần chỉ 0,033 (950)
+     và 0,043 (900), nên hai nấc này kẹp ở 85% trần thay vì theo slate. */
+  --tint-c-900: calc(0.037 * var(--tint-scale));
+  --tint-c-950: calc(0.028 * var(--tint-scale));
+  --background:oklch(from var(--color-mist-950) l var(--tint-c-950) var(--tint-hue));
+  --foreground:oklch(from var(--color-mist-100) l var(--tint-c-100) var(--tint-hue));
+  --card:oklch(from var(--color-mist-900) l var(--tint-c-900) var(--tint-hue));
+  --popover:oklch(from var(--color-mist-900) l var(--tint-c-900) var(--tint-hue));
+  --primary:var(--color-teal-700);
+  --primary-foreground:oklch(from var(--color-mist-50) l var(--tint-c-50) var(--tint-hue));
+  --secondary:oklch(from var(--color-mist-800) l var(--tint-c-800) var(--tint-hue));
+  --secondary-foreground:oklch(from var(--color-mist-100) l var(--tint-c-100) var(--tint-hue));
+  --muted:oklch(from var(--color-mist-800) l var(--tint-c-800) var(--tint-hue));
+  --muted-foreground:oklch(from var(--color-mist-400) l var(--tint-c-400) var(--tint-hue));
+  --accent:var(--color-cyan-950);
+  --accent-foreground:oklch(from var(--color-mist-100) l var(--tint-c-100) var(--tint-hue));
+  --border:color-mix(in oklab, var(--color-white) 13%, transparent);
+  --input:color-mix(in oklab, var(--color-white) 17%, transparent);
+  --ring:var(--color-teal-700);
+  --sidebar:oklch(from var(--color-mist-900) l var(--tint-c-900) var(--tint-hue));
+  --sidebar-accent:var(--color-cyan-950);
+  /* Màu chuỗi biểu đồ, lấy các họ lân cận sắc của --primary.
+     Khoảng cách xám nhỏ nhất 0,074; thấp nhất 3,59:1 trên mặt card. */
+  --chart-1: var(--color-teal-600);
+  --chart-2: var(--color-sky-300);
+  --chart-3: var(--color-green-700);
+  --chart-4: var(--color-cyan-500);
+  --chart-5: var(--color-emerald-400);
+}
+
+/* Eclipse = default theme của shadcn, chép nguyên. Cả chín giá trị xám shadcn
+   dùng đều trùng KHÍT một nấc của thang `neutral` trong Tailwind (0.145 -> 950,
+   0.205 -> 900, 0.269 -> 800, 0.371 -> 700, 0.556 -> 500, 0.708 -> 400,
+   0.922 -> 200, 0.97 -> 100, 0.985 -> 50) nên viết bằng token là khớp tuyệt đối,
+   không phải chép số. */
+/* --- Eclipse: Đen trắng thuần, chroma bằng 0 --- */
+
+:root:not(.dark)[data-palette="eclipse"],
+.light[data-palette="eclipse"] {
+  /* Đơn sắc: tắt trục ám màu, xem --tint-scale trong tokens.css. */
+  --tint-scale: 0;
+  --background:var(--color-white);
+  --foreground:var(--color-black);
+  --card:var(--color-white);
+  --card-foreground:var(--color-black);
+  --popover:var(--color-white);
+  --popover-foreground:var(--color-black);
+  --primary:var(--color-black);
+  --primary-foreground:var(--color-neutral-50);
+  --secondary:var(--color-neutral-100);
+  --secondary-foreground:var(--color-neutral-900);
+  --muted:var(--color-neutral-100);
+  --muted-foreground:var(--color-neutral-500);
+  --accent:var(--color-neutral-100);
+  --accent-foreground:var(--color-neutral-900);
+  --border:var(--color-neutral-200);
+  --input:var(--color-neutral-200);
+  /* neutral-400 chỉ đạt 2.58:1 trên nền card — chỉ báo focus cần tối thiểu
+     3:1 (WCAG 2.4.11). neutral-500 lên 4.68 mà vẫn đơn sắc. Bốn bảng kia
+     dùng primary có màu nên không dính; Eclipse lấy chính sắc xám làm ring. */
+  --ring:var(--color-neutral-500);
+  --sidebar:var(--color-neutral-50);
+  --sidebar-accent:var(--color-neutral-100);
+  /* Màu chuỗi biểu đồ, lấy các họ lân cận sắc của --primary.
+     Khoảng cách xám nhỏ nhất 0,016; thấp nhất 4,74:1 trên mặt card. */
+  --chart-1: var(--color-neutral-800);
+  --chart-2: var(--color-neutral-500);
+  --chart-3: var(--color-neutral-600);
+  --chart-4: var(--color-neutral-700);
+  --chart-5: var(--color-neutral-950);
+}
+
+:root.dark[data-palette="eclipse"],
+.dark[data-palette="eclipse"] {
+  /* Đơn sắc: tắt trục ám màu, xem --tint-scale trong tokens.css. */
+  --tint-scale: 0;
+  --background:var(--color-neutral-950);
+  --foreground:var(--color-neutral-50);
+  --card:var(--color-neutral-900);
+  --card-foreground:var(--color-neutral-50);
+  --popover:var(--color-neutral-900);
+  --popover-foreground:var(--color-neutral-50);
+  --primary:var(--color-neutral-200);
+  --primary-foreground:var(--color-neutral-900);
+  --secondary:var(--color-neutral-800);
+  --secondary-foreground:var(--color-neutral-50);
+  --muted:var(--color-neutral-800);
+  --muted-foreground:var(--color-neutral-400);
+  --accent:var(--color-neutral-700);
+  --accent-foreground:var(--color-neutral-50);
+  --border:color-mix(in oklab, var(--color-white) 10%, transparent);
+  --input:color-mix(in oklab, var(--color-white) 15%, transparent);
+  --ring:var(--color-neutral-500);
+  --sidebar:var(--color-neutral-900);
+  --sidebar-accent:var(--color-neutral-800);
+  /* Màu chuỗi biểu đồ, lấy các họ lân cận sắc của --primary.
+     Khoảng cách xám nhỏ nhất 0,125; thấp nhất 3,78:1 trên mặt card. */
+  --chart-1: var(--color-neutral-300);
+  --chart-2: var(--color-neutral-100);
+  --chart-3: var(--color-neutral-200);
+  --chart-4: var(--color-neutral-400);
+  --chart-5: var(--color-neutral-500);
+}