@comitor/ui 0.1.0

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Design token dạng TS object — dành cho nơi KHÔNG có Tailwind: canvas, biểu đồ tuỳ biến,\n * email HTML, xuất PDF, (sau này) React Native.\n *\n * ⚠ Nguồn sự thật của giá trị là `styles.css` (CSS variable). File này chỉ MIRROR hằng số.\n * Sửa màu ở styles.css thì phải sửa kèm ở đây — và ngược lại.\n *\n * Trong môi trường có Tailwind, LUÔN dùng class token (`bg-primary`, `text-ash-500`),\n * đừng đọc hex từ đây rồi nhét vào style inline: làm vậy là mất dark mode.\n */\n\n/** Thang GOLD 7 bậc — trục màu chính của brand Comitor. */\nexport const gold = {\n  50: \"#FBF5DC\",\n  100: \"#F8E89D\",\n  200: \"#F5D060\",\n  /** primary ở light mode */\n  300: \"#E8B824\",\n  400: \"#B88A00\",\n  500: \"#7A5800\",\n  600: \"#5C4006\"\n} as const;\n\n/** Trung tính brand (khác thang ash — đây là màu \"giấy/mực\" của brand book). */\nexport const brandNeutral = {\n  ink: \"#0E1116\",\n  inkSoft: \"#3A3F4A\",\n  paper: \"#FBF7EE\",\n  warm: \"#EDE8D8\"\n} as const;\n\n/**\n * Thang xám Comitor — namespace `ash`, KHÔNG phải `gray`.\n * Chỉ có 6 bậc; các bậc khuyết (200/400/600/800) cố ý không khai để không lẫn với\n * thang gray dựng sẵn của Tailwind (xem chú thích trong styles.css).\n */\nexport const ash = {\n  50: \"#F7F7F8\",\n  100: \"#EDEEF1\",\n  300: \"#C8CBD3\",\n  500: \"#7E8290\",\n  700: \"#3A3F4A\",\n  900: \"#16181D\"\n} as const;\n\n/**\n * Màu phụ. Bản `dark` được nâng sáng để đạt tương phản AA khi làm CHỮ trên nền #0E1116 —\n * bản `light` quá tối cho việc đó.\n */\nexport const accent = {\n  light: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\"\n  },\n  dark: {\n    navy: \"#0F1E3D\",\n    teal: \"#2DD4BF\",\n    red: \"#F87171\",\n    green: \"#4ADE80\",\n    yellow: \"#FACC15\"\n  }\n} as const;\n\n/** Semantic token của shadcn — mirror khối `:root` / `.dark` trong styles.css. */\nexport const semantic = {\n  light: {\n    background: \"#FFFFFF\",\n    foreground: \"#0E1116\",\n    card: \"#FFFFFF\",\n    cardForeground: \"#0E1116\",\n    popover: \"#FFFFFF\",\n    popoverForeground: \"#0E1116\",\n    primary: \"#E8B824\",\n    primaryForeground: \"#0E1116\",\n    secondary: \"#EDE8D8\",\n    secondaryForeground: \"#0E1116\",\n    muted: \"#F7F7F8\",\n    mutedForeground: \"#7E8290\",\n    accent: \"#FBF5DC\",\n    accentForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    border: \"#EDEEF1\",\n    input: \"#EDEEF1\",\n    ring: \"#E8B824\",\n    sidebar: \"#FAFAF9\",\n    sidebarForeground: \"#0E1116\",\n    sidebarBorder: \"#EDEEF1\",\n    sidebarAccent: \"#FBF5DC\",\n    sidebarAccentForeground: \"#0E1116\"\n  },\n  dark: {\n    background: \"#0E1116\",\n    foreground: \"#F7F7F8\",\n    card: \"#16181D\",\n    cardForeground: \"#F7F7F8\",\n    popover: \"#16181D\",\n    popoverForeground: \"#F7F7F8\",\n    primary: \"#F5D060\",\n    primaryForeground: \"#0E1116\",\n    secondary: \"#1E2128\",\n    secondaryForeground: \"#F7F7F8\",\n    muted: \"#1E2128\",\n    mutedForeground: \"#7E8290\",\n    accent: \"#1E2128\",\n    accentForeground: \"#F7F7F8\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    border: \"#1E2128\",\n    input: \"#1E2128\",\n    ring: \"#F5D060\",\n    sidebar: \"#16181D\",\n    sidebarForeground: \"#F7F7F8\",\n    sidebarBorder: \"#1E2128\",\n    sidebarAccent: \"#1E2128\",\n    sidebarAccentForeground: \"#F7F7F8\"\n  }\n} as const;\n\n/** Alias trạng thái — success/warning/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ. */\nexport const status = {\n  light: {\n    success: accent.light.green,\n    successForeground: \"#FFFFFF\",\n    warning: accent.light.yellow,\n    warningForeground: \"#0E1116\",\n    info: accent.light.teal,\n    infoForeground: \"#FFFFFF\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\"\n  },\n  dark: {\n    success: accent.dark.green,\n    successForeground: \"#0E1116\",\n    warning: accent.dark.yellow,\n    warningForeground: \"#0E1116\",\n    info: accent.dark.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\"\n  }\n} as const;\n\n/** Bảng màu biểu đồ (chart-1…chart-5). Thứ tự = thứ tự series mặc định. */\nexport const chart = {\n  light: [gold[300], accent.light.teal, accent.light.navy, accent.light.green, accent.light.red],\n  dark: [gold[200], accent.dark.teal, \"#7EA2E8\", accent.dark.green, accent.dark.red]\n} as const;\n\n/** Màu avatar chữ cái — chọn deterministic theo tên, lấy từ token nên luôn hợp tông brand. */\nexport const avatarPalette = [\n  gold[400],\n  gold[600],\n  accent.light.teal,\n  accent.light.navy,\n  accent.light.green,\n  accent.light.red,\n  ash[500],\n  brandNeutral.inkSoft\n] as const;\n\n/** Số đo khung ứng dụng — mirror --sidebar-width / --sidebar-width-icon / --header-height. */\nexport const layout = {\n  /** px — --header-height 3.5rem */\n  headerHeight: 56,\n  /** px — --sidebar-width 16rem */\n  sidebarWidth: 256,\n  /** px — --sidebar-width-icon 3.5rem */\n  sidebarCollapsedWidth: 56,\n  /** px — --radius 0.375rem */\n  radius: 6,\n  breakpoints: { mobile: 768, tablet: 1024, desktop: 1280 },\n  pageSizes: [20, 50, 100],\n  /** px — kích thước tối thiểu của vùng chạm trên mobile (WCAG 2.5.5) */\n  minTapTarget: 44\n} as const;\n\n/** Font stack — app phải tự nạp Inter (subsets latin + vietnamese) và gán --font-inter. */\nexport const typography = {\n  fontSans: '\"Inter\", system-ui, sans-serif',\n  fontMono: '\"Geist Mono\", ui-monospace, monospace'\n} as const;\n\nexport type ThemeMode = \"light\" | \"dark\";\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "@comitor/ui",
+  "version": "0.1.0",
+  "description": "Comitor design system — Shadcn/UI tùy biến theo brand Comitor + component dùng chung cho hệ sinh thái SaaS (Tasks, Chat, CRM, HR…)",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/comitor-ai/comitor-ui.git"
+  },
+  "homepage": "https://github.com/comitor-ai/comitor-ui#readme",
+  "bugs": {
+    "url": "https://github.com/comitor-ai/comitor-ui/issues"
+  },
+  "keywords": [
+    "comitor",
+    "design-system",
+    "react",
+    "shadcn",
+    "tailwindcss",
+    "ui"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "styles.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./shell": {
+      "types": "./dist/shell/index.d.ts",
+      "import": "./dist/shell/index.js"
+    },
+    "./chart": {
+      "types": "./dist/chart/index.d.ts",
+      "import": "./dist/chart/index.js"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./styles.css": "./styles.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "verify:directives": "node scripts/verify-directives.mjs",
+    "check:exports": "publint --strict && attw --pack . --profile esm-only --exclude-entrypoints styles.css",
+    "prepublishOnly": "pnpm run typecheck && pnpm run build && pnpm run verify:directives"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.540.0",
+    "next": ">=15",
+    "next-themes": ">=0.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.0",
+    "recharts": "^2.15.0",
+    "tailwindcss": "^4.1.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "next-themes": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "1.2.12",
+    "@radix-ui/react-alert-dialog": "1.1.15",
+    "@radix-ui/react-aspect-ratio": "1.1.8",
+    "@radix-ui/react-avatar": "1.1.11",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-collapsible": "1.1.12",
+    "@radix-ui/react-context-menu": "2.2.16",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-hover-card": "1.1.15",
+    "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-menubar": "1.1.16",
+    "@radix-ui/react-navigation-menu": "1.2.14",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-progress": "1.1.8",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-scroll-area": "1.2.10",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slider": "1.3.6",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-toggle": "1.1.10",
+    "@radix-ui/react-toggle-group": "1.1.11",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.1.1",
+    "date-fns": "4.1.0",
+    "embla-carousel-react": "8.6.0",
+    "input-otp": "1.4.2",
+    "react-day-picker": "9.13.2",
+    "react-resizable-panels": "^2.1.7",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "1.3.3",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.4",
+    "@biomejs/biome": "^2.4.11",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^0.564.0",
+    "next": "^16.0.0",
+    "next-themes": "^0.4.6",
+    "publint": "^0.3.21",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.1",
+    "recharts": "^2.15.0",
+    "tailwindcss": "^4.2.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.0"
+  }
+}

package/styles.css

@@ -0,0 +1,357 @@
+/*
+ * @comitor/ui — NGUỒN TOKEN của hệ thống thiết kế Comitor (Tailwind v4, CSS-first).
+ *
+ * ⚠ CÁCH DÙNG (dễ sai nhất khi tới từ Tailwind 3):
+ *     Đặt trong app/globals.css của app tiêu thụ, NGAY SAU @import "tailwindcss":
+ *
+ *         @import "tailwindcss";
+ *         @import "@comitor/ui/styles.css";
+ *
+ *     KHÔNG import file này trong layout.tsx. File này chứa @theme / @custom-variant /
+ *     @source — những at-rule chỉ có nghĩa khi ĐƯỢC TAILWIND BIÊN DỊCH. Import ở
+ *     layout.tsx thì biến CSS vẫn có, nhưng không utility nào (bg-gold-300, dark:*) được
+ *     sinh ra → giao diện vỡ.
+ *
+ * Thứ tự các khối bên dưới là bắt buộc, đừng đảo.
+ */
+
+/* 1. Animation utility (animate-in / fade-in-0 / zoom-in-95 …) mà primitive shadcn dùng. */
+@import "tw-animate-css";
+
+/* 2. Cho Tailwind của app quét class nằm trong dist của package.
+      Tailwind v4 KHÔNG tự quét node_modules → thiếu dòng này là mất sạch style.
+      Đường dẫn resolve tương đối theo chính file CSS này (nằm ở gốc package). */
+@source "./dist";
+
+/* 3. Dark mode theo class — khớp next-themes attribute="class".
+      Lưu ý: (&:is(.dark *)) chỉ khớp CON CHÁU của .dark, không khớp chính phần tử .dark.
+      next-themes gắn class lên <html> nên thực tế luôn đúng; nếu tự dựng preview 2 theme
+      cạnh nhau thì phải bọc thêm một lớp: <div class="dark"><div>…</div></div>. */
+@custom-variant dark (&:is(.dark *));
+
+/* ────────────────────────────────────────────────────────────────────────────
+   4. BIẾN — LIGHT
+   ──────────────────────────────────────────────────────────────────────────── */
+:root {
+  /* ─ Brand: thang GOLD 7 bậc (trục chính của Comitor) ─ */
+  --gold-50: #fbf5dc;
+  --gold-100: #f8e89d;
+  --gold-200: #f5d060;
+  --gold-300: #e8b824; /* primary ở light */
+  --gold-400: #b88a00;
+  --gold-500: #7a5800;
+  --gold-600: #5c4006;
+
+  /* ─ Brand neutral ─ */
+  --ink: #0e1116;
+  --ink-soft: #3a3f4a;
+  --paper: #fbf7ee;
+  --warm: #ede8d8;
+
+  /* ─ Thang xám riêng của Comitor: namespace ASH (không phải gray) ─
+     Vì sao đổi tên: chỉ khai 6 bậc (50/100/300/500/700/900); nếu vẫn gọi là gray-*
+     thì gray-200/400/600/800 rơi về gray mặc định của Tailwind (ám xanh) và trộn
+     với gray Comitor (ám tím) → lệch tông. Đặt tên ash-* để hai thang không đụng nhau. */
+  --ash-50: #f7f7f8;
+  --ash-100: #edeef1;
+  --ash-300: #c8cbd3;
+  --ash-500: #7e8290;
+  --ash-700: #3a3f4a;
+  --ash-900: #16181d;
+
+  /* Alias tương thích ngược với comitor-ds — KHÔNG dùng cho code mới, sẽ bỏ ở 1.0. */
+  --gray-50: var(--ash-50);
+  --gray-100: var(--ash-100);
+  --gray-300: var(--ash-300);
+  --gray-500: var(--ash-500);
+  --gray-700: var(--ash-700);
+  --gray-900: var(--ash-900);
+
+  /* ─ Màu phụ ─ */
+  --navy: #0f1e3d;
+  --teal: #1f8a8b;
+  --red: #d64545;
+  --green: #2ea56a;
+  --yellow: #f2c94c;
+
+  /* ─ Semantic shadcn ─ */
+  --background: #ffffff;
+  --foreground: #0e1116;
+  --card: #ffffff;
+  --card-foreground: #0e1116;
+  --popover: #ffffff;
+  --popover-foreground: #0e1116;
+  --primary: #e8b824;
+  --primary-foreground: #0e1116;
+  --secondary: #ede8d8;
+  --secondary-foreground: #0e1116;
+  --muted: #f7f7f8;
+  --muted-foreground: #7e8290;
+  --accent: #fbf5dc;
+  --accent-foreground: #0e1116;
+  --destructive: #d64545;
+  --destructive-foreground: #ffffff;
+  --border: #edeef1;
+  --input: #edeef1;
+  --ring: #e8b824;
+
+  --sidebar: #fafaf9;
+  --sidebar-foreground: #0e1116;
+  --sidebar-border: #edeef1;
+  --sidebar-accent: #fbf5dc;
+  --sidebar-accent-foreground: #0e1116;
+
+  /* ─ Alias trạng thái (package bổ sung; comitor-ds chưa có) ─
+     Trỏ vào màu phụ để đổi tông trạng thái mà không đụng brand.
+     Vì trỏ bằng var(), khối .dark bên dưới đổi --green/--yellow/--teal là
+     --success/--warning/--info tự sáng theo, không cần khai lại. */
+  --success: var(--green);
+  --success-foreground: #ffffff;
+  --warning: var(--yellow);
+  --warning-foreground: #0e1116;
+  --info: var(--teal);
+  --info-foreground: #ffffff;
+
+  /* ─ Bảng màu biểu đồ (đổi độc lập với brand) ─ */
+  --chart-1: var(--gold-300);
+  --chart-2: var(--teal);
+  --chart-3: var(--navy);
+  --chart-4: var(--green);
+  --chart-5: var(--red);
+
+  /* ─ Accent theo từng app trong hệ sinh thái (Tasks/Chat/CRM/HR…) ─
+     App set lại 2 biến này ở <body> là đổi được ô app trong AppLauncher và
+     thanh active của sidebar, không cần build lại package. */
+  --app-accent: var(--primary);
+  --app-accent-foreground: var(--primary-foreground);
+
+  /* ─ Số đo khung ứng dụng (shell dùng ở cả CSS lẫn TS — xem tokens.ts) ─ */
+  --sidebar-width: 16rem; /* 256px */
+  --sidebar-width-icon: 3.5rem; /* 56px, sidebar thu gọn */
+  --header-height: 3.5rem; /* 56px */
+
+  /* ─ Thang ĐỔ BÓNG (elevation) ─
+     Giá trị THÔ nằm ở đây chứ không nằm trong @theme, vì bóng phải đổi theo light/dark:
+     @theme thường "đóng băng" giá trị lúc build, chỉ biến CSS thật mới được khối .dark
+     ghi đè lúc chạy. Section 6 map --elevation-* → --shadow-* trong @theme inline để sinh
+     utility shadow-surface / shadow-control / shadow-card / shadow-overlay.
+     App muốn chỉnh độ nổi thì ghi đè đúng 4 biến này (ví dụ ở <body>), không cần build lại.
+
+     Bốn bậc, thấp → cao:
+       surface  — mặt phẳng nghỉ, viền mới là tín hiệu chính (Card mặc định)
+       control  — control tương tác nhấc nhẹ khỏi nền (Button nền đặc)
+       card     — thẻ/panel nổi (StatCard, Toast, Card elevated, tooltip biểu đồ)
+       overlay  — lớp phủ lên nội dung (Dialog, Sheet, Popover, menu, Select, Tooltip) */
+  --elevation-surface: 0 1px 2px rgba(14, 17, 22, 0.04);
+  --elevation-control: 0 1px 2px rgba(14, 17, 22, 0.08);
+  --elevation-card: 0 1px 2px rgba(14, 17, 22, 0.04), 0 8px 24px rgba(14, 17, 22, 0.04);
+  --elevation-overlay: 0 8px 32px rgba(14, 17, 22, 0.16);
+
+  --radius: 0.375rem; /* 6px — chữ ký thị giác của Comitor */
+}
+
+/* ────────────────────────────────────────────────────────────────────────────
+   5. BIẾN — DARK (chỉ override, không khai lại thứ không đổi)
+   ──────────────────────────────────────────────────────────────────────────── */
+.dark {
+  --background: #0e1116;
+  --foreground: #f7f7f8;
+  --card: #16181d;
+  --card-foreground: #f7f7f8;
+  --popover: #16181d;
+  --popover-foreground: #f7f7f8;
+  --primary: #f5d060;
+  --primary-foreground: #0e1116;
+  --secondary: #1e2128;
+  --secondary-foreground: #f7f7f8;
+  --muted: #1e2128;
+  --muted-foreground: #7e8290;
+  --accent: #1e2128;
+  --accent-foreground: #f7f7f8;
+  --destructive: #d64545;
+  --destructive-foreground: #ffffff;
+  --border: #1e2128;
+  --input: #1e2128;
+  --ring: #f5d060;
+
+  --sidebar: #16181d;
+  --sidebar-foreground: #f7f7f8;
+  --sidebar-border: #1e2128;
+  --sidebar-accent: #1e2128;
+  --sidebar-accent-foreground: #f7f7f8;
+
+  /* Màu phụ bản dark — bản light quá tối để làm CHỮ trên nền #0E1116 (không đạt AA).
+     Các giá trị dưới đây đều ≥ 6:1 trên nền dark. Cần đo lại nếu đổi nền. */
+  --teal: #2dd4bf;
+  --red: #f87171;
+  --green: #4ade80;
+  --yellow: #facc15;
+
+  /* Foreground của trạng thái phải lật lại: nền sáng → chữ tối. */
+  --success-foreground: #0e1116;
+  --info-foreground: #0e1116;
+
+  /* Đổ bóng bản dark — bóng "mực" 4–16% trên nền #0E1116 gần như vô hình, lớp overlay
+     mất sạch tín hiệu độ cao (dialog/popover trông như dán phẳng vào nền). Trên nền tối,
+     bóng là chỗ VẮNG ÁNH SÁNG chứ không phải mực loang: dùng đen thuần với alpha cao hơn
+     hẳn. Giữ nguyên hình học (offset/blur) để ngôn ngữ độ cao không lệch giữa hai theme. */
+  --elevation-surface: 0 1px 2px rgba(0, 0, 0, 0.32);
+  --elevation-control: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.4);
+  --elevation-overlay: 0 8px 32px rgba(0, 0, 0, 0.64);
+
+  /* navy nguyên bản chìm hẳn vào nền dark → chỉ nâng ở vai trò biểu đồ. */
+  --chart-3: #7ea2e8;
+}
+
+/* ────────────────────────────────────────────────────────────────────────────
+   6. MAP BIẾN → NAMESPACE TAILWIND (sinh bg-*, text-*, border-*, rounded-*…)
+
+   @theme *inline* là chủ ý: `inline` nhúng thẳng var(--x) vào utility, nhờ đó
+   .dark { --primary: … } đổi được màu tại runtime. Dùng @theme thường sẽ "đóng băng"
+   giá trị lúc build → dark mode chết.
+   ──────────────────────────────────────────────────────────────────────────── */
+@theme inline {
+  /* Font: app tự khai Inter (subsets latin + vietnamese) qua next/font và gán
+     --font-inter; package chỉ tiêu thụ biến. --font-inter-mono là TUỲ CHỌN (README §2).
+
+     Vì sao --font-inter-mono phải có fallback ngay trong var() còn --font-inter thì không:
+     app nào cũng gán --font-inter (README §2 bắt buộc), nhưng --font-inter-mono thì hiếm.
+     Mà var() không fallback + biến chưa khai = CẢ khai báo thành invalid at
+     computed-value time → class font-mono rơi về font kế thừa, KHÔNG rơi về "Geist Mono"
+     hay ui-monospace của danh sách này. */
+  --font-sans: var(--font-inter), "Inter", system-ui, sans-serif;
+  --font-mono: var(--font-inter-mono, "Geist Mono"), ui-monospace, monospace;
+
+  /* Semantic shadcn */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+
+  /* Gold scale */
+  --color-gold-50: var(--gold-50);
+  --color-gold-100: var(--gold-100);
+  --color-gold-200: var(--gold-200);
+  --color-gold-300: var(--gold-300);
+  --color-gold-400: var(--gold-400);
+  --color-gold-500: var(--gold-500);
+  --color-gold-600: var(--gold-600);
+
+  /* Brand neutral */
+  --color-ink: var(--ink);
+  --color-ink-soft: var(--ink-soft);
+  --color-paper: var(--paper);
+  --color-warm: var(--warm);
+
+  /* Thang xám Comitor (ash-*, KHÔNG phải gray-*) */
+  --color-ash-50: var(--ash-50);
+  --color-ash-100: var(--ash-100);
+  --color-ash-300: var(--ash-300);
+  --color-ash-500: var(--ash-500);
+  --color-ash-700: var(--ash-700);
+  --color-ash-900: var(--ash-900);
+
+  /* Màu phụ */
+  --color-navy: var(--navy);
+  --color-teal: var(--teal);
+  --color-red: var(--red);
+  --color-green: var(--green);
+  --color-yellow: var(--yellow);
+
+  /* Trạng thái */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  /* Biểu đồ */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Accent theo app */
+  --color-app-accent: var(--app-accent);
+  --color-app-accent-foreground: var(--app-accent-foreground);
+
+  /* Đổ bóng — sinh shadow-surface / shadow-control / shadow-card / shadow-overlay.
+     BẮT BUỘC là @theme *inline* và tên biến nguồn phải KHÁC (--elevation-*): khai
+     @theme inline { --shadow-card: var(--shadow-card) } là biến tự trỏ chính nó → hỏng.
+     Đánh đổi đã cân nhắc: giá trị là var() nên Tailwind không tách được phần màu, do đó
+     modifier `shadow-card/50` và đổi màu bóng bằng `shadow-<color>` mất tác dụng. Muốn
+     đổi tông/độ đậm thì ghi đè --elevation-* ở tầng app — đúng chỗ nên đổi. */
+  --shadow-surface: var(--elevation-surface);
+  --shadow-control: var(--elevation-control);
+  --shadow-card: var(--elevation-card);
+  --shadow-overlay: var(--elevation-overlay);
+
+  /* Bo góc */
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 4px);
+  --radius-xl: 0.75rem;
+
+  /* Số đo khung: sinh w-sidebar / w-sidebar-icon / h-header cho tầng shell,
+     tránh magic number rải rác trong component. */
+  --spacing-sidebar: var(--sidebar-width);
+  --spacing-sidebar-icon: var(--sidebar-width-icon);
+  --spacing-header: var(--header-height);
+}
+
+/* ────────────────────────────────────────────────────────────────────────────
+   7. BASE LAYER + utility riêng của Comitor
+   ──────────────────────────────────────────────────────────────────────────── */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+
+  /* Chữ ký thị giác: focus dày 2px, cách viền 2px, màu ring. */
+  :focus-visible {
+    @apply outline-2 outline-offset-2 outline-ring;
+  }
+}
+
+/* Thanh cuộn mảnh — dùng cho sidebar, panel danh sách dài. */
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ash-300) transparent;
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}