@edmicro/olkit 1.1.1 → 1.1.3

package/styles/tokens.css

@@ -6,6 +6,23 @@
 */
 
 :root {
+  /* -------------------------------------------------------------------------
+     -1. COLOR SCHEME — thanh cuộn, ô chọn gốc, ô nhập gốc
+     -------------------------------------------------------------------------
+     `color-scheme` là thứ DUY NHẤT nói cho trình duyệt biết trang đang sáng
+     hay tối. Nó đổi màu những phần do TRÌNH DUYỆT vẽ, không phải CSS của ta:
+     thanh cuộn, mũi tên `<select>`, nút tăng giảm `<input type=number>`, lịch
+     của `<input type=date>`, nền ô nhập tự điền.
+
+     Thiếu nó: đo /select ở chế độ tối được `color-scheme: normal`, nên thanh
+     cuộn vẫn SÁNG trên nền tối — ba vệt trắng chói ở mép phải trang, cạnh
+     sidebar và trong cột thuộc tính.
+
+     Đặt ở `:root`/`.dark` chứ không ở `body`: thanh cuộn của trang do phần tử
+     gốc quyết định, đặt ở `body` là không ăn.
+     ------------------------------------------------------------------------- */
+  color-scheme: light;
+
   /* -------------------------------------------------------------------------
      0. BORDER RADIUS SCALE (Default Figma - Modern)
      ------------------------------------------------------------------------- */
@@ -99,6 +116,16 @@
   --bg-brand-medium: var(--color-brand-200);
   --bg-brand-strong: var(--color-brand-800);
 
+  /* --------------------------------------------------------------------------
+     Nền thanh điều hướng ứng dụng (`ol-app-nav`).
+
+     KHÔNG đổi ở chế độ tối: thanh này vốn đã tối, và Figma chốt một màu duy
+     nhất cho cả hai chế độ. Chữ trên đó luôn trắng.
+     -------------------------------------------------------------------------- */
+  --bg-app-nav-from: var(--color-navy-from);
+  --bg-app-nav-to: var(--color-navy-to);
+  --bg-app-nav-hover: var(--color-brand-600);
+
   /* Dark Background Tokens */
   --bg-dark: var(--color-gray-800);
   --bg-dark-strong: var(--color-gray-900);
@@ -219,6 +246,9 @@
    DARK MODE
    ============================================================================= */
 .dark {
+  /* Xem chú thích ở `:root`. Đây là thứ làm thanh cuộn chuyển sang màu tối. */
+  color-scheme: dark;
+
   /* 1. Colors / Text - Dark */
   --text-white: #ffffff;
   /* Theo Figma colors/text/text-black: giữ gray/900 ở CẢ light lẫn dark.
@@ -227,8 +257,22 @@
      làm mất ý nghĩa đó. Chữ tiêu đề đổi theo theme dùng --text-heading. */
   --text-black: var(--color-gray-900);
   --text-heading: var(--color-white);
-  --text-body: var(--color-gray-400);
-  --text-body-subtle: var(--color-gray-400);
+  /* `gray-300`, KHÔNG phải `gray-400`, cho CẢ HAI token dưới đây: trên nền
+     `tertiary`/`quaternary` (đều là `gray-700` ở chế độ tối) thì `gray-400`
+     chỉ cho **3,96** — dưới chuẩn 4,5 cho chữ 12px.
+
+     Đo `/banner`: chip `role="banner"` 110×24px, sáng 6,10 đạt mà tối 3,96
+     hỏng (BUG-032 §5). Chip đó thừa kế màu từ `text-body` của khung layout,
+     KHÔNG dùng `text-body-subtle` — nên phải đổi cả hai, sửa mỗi
+     `body-subtle` không chạm tới nó (đã thử, chip vẫn 3,96).
+
+     `gray-300` đưa hai nền đó lên **7,00** và không kéo nền nào xuống:
+     primary 12,05 · secondary 9,96 (trước là 6,82 · 5,64). */
+  --text-body: var(--color-gray-300);
+  /* `--text-body-subtle` đang bằng HỆT `--text-body` ở nhánh tối, tức "subtle"
+     không còn nhạt hơn gì cả. Giữ nguyên tương quan đó ở đây; muốn tách hai
+     bậc thì phải đo lại cả bốn nền. */
+  --text-body-subtle: var(--color-gray-300);
 
   --text-brand: var(--color-brand-400);
   --text-brand-strong: var(--color-brand-300);
@@ -354,661 +398,34 @@
 }
 
 /* =============================================================================
-   THEME MODE: MINIMAL (0px Sharp Radius, Slate Monochrome)
-   ============================================================================= */
-[data-theme='minimal'] {
-  --radius-xxs: 0px;
-  --radius-xs: 0px;
-  --radius-sm: 0px;
-  --radius: 0px;
-  --radius-base: 0px;
-  --radius-md: 0px;
-  --radius-lg: 0px;
-  --radius-xl: 0px;
-  --radius-2xl: 0px;
-  --radius-3xl: 0px;
-
-  --text-heading: #0f172a;
-  --text-body: #475569;
-  --text-body-subtle: #64748b;
-  --bg-primary: #ffffff;
-  --bg-primary-soft: #f8fafc;
-  --bg-secondary: #f1f5f9;
-  --bg-secondary-medium: #e2e8f0;
-  --border-default: #cbd5e1;
-  --bg-brand: #0f172a;
-  --bg-brand-strong: #020617;
-  --bg-brand-soft: #e2e8f0;
-  --text-brand: #0f172a;
-
-  /* Bo sung dai trung tinh - truoc day thieu nen khong doi theo theme */
-  --bg-primary-medium: #f8fafc;
-  --bg-primary-strong: #f1f5f9;
-  --bg-secondary-soft: #f8fafc;
-  --bg-secondary-strong: #cbd5e1;
-  --bg-tertiary: #f1f5f9;
-  --bg-tertiary-soft: #f8fafc;
-  --bg-tertiary-medium: #e2e8f0;
-  --bg-quaternary: #e2e8f0;
-  --bg-quaternary-medium: #cbd5e1;
-  --bg-disabled: #f1f5f9;
-  --border-default-subtle: #e2e8f0;
-  --border-default-medium: #94a3b8;
-  --border-default-strong: #64748b;
-  --border-light: #e2e8f0;
-  --border-light-subtle: #f1f5f9;
-  --border-muted: #f8fafc;
-  --text-disabled: #94a3b8;
-  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
-     badge, toast vẫn ra đúng màu của theme Modern. */
-  --text-success: var(--color-emerald-700);
-  --text-success-strong: var(--color-emerald-800);
-  --text-danger: var(--color-rose-600);
-  --text-danger-strong: var(--color-rose-800);
-  --text-warning: var(--color-orange-600);
-  --text-warning-strong: var(--color-orange-950);
-  --text-warning-subtle: var(--color-orange-600);
-  --text-info: var(--color-brand-700);
-  --text-info-strong: var(--color-brand-800);
-  --bg-success: var(--color-emerald-600);
-  --bg-success-soft: var(--color-emerald-50);
-  --bg-success-medium: var(--color-emerald-100);
-  --bg-success-strong: var(--color-emerald-700);
-  --bg-danger: var(--color-rose-600);
-  --bg-danger-soft: var(--color-rose-50);
-  --bg-danger-medium: var(--color-rose-100);
-  --bg-danger-strong: var(--color-rose-700);
-  --bg-warning: var(--color-orange-500);
-  --bg-warning-soft: var(--color-orange-50);
-  --bg-warning-medium: var(--color-orange-100);
-  --bg-warning-strong: var(--color-orange-700);
-  --bg-warning-strongest: var(--color-orange-800);
-  --border-success: var(--color-emerald-300);
-  --border-success-subtle: var(--color-emerald-200);
-  --border-danger: var(--color-rose-600);
-  --border-danger-subtle: var(--color-rose-200);
-  --border-warning: var(--color-orange-500);
-  --border-warning-subtle: var(--color-orange-200);
-  --border-info: var(--color-brand-300);
-
-  /* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
-  --bg-brand-softer: #f1f5f9;
-  --border-brand: #0f172a;
-}
-
-.dark[data-theme='minimal'],
-[data-theme='minimal'].dark {
-  --radius-xxs: 0px;
-  --radius-xs: 0px;
-  --radius-sm: 0px;
-  --radius: 0px;
-  --radius-base: 0px;
-  --radius-md: 0px;
-  --radius-lg: 0px;
-  --radius-xl: 0px;
-  --radius-2xl: 0px;
-  --radius-3xl: 0px;
-
-  --text-heading: #f8fafc;
-  --text-body: #94a3b8;
-  --text-body-subtle: #64748b;
-  --bg-primary: #020617;
-  --bg-primary-soft: #0b0f19;
-  --bg-secondary: #0f172a;
-  --bg-secondary-medium: #1e293b;
-  --border-default: #334155;
-  --bg-brand: #38bdf8;
-  --bg-brand-strong: #7dd3fc;
-  --bg-brand-soft: #082f49;
-  --text-brand: #38bdf8;
-
-  /* Bo sung dai trung tinh cho dark - truoc day roi ve gia tri LIGHT */
-  --bg-primary-medium: #0f172a;
-  --bg-primary-strong: #1e293b;
-  --bg-secondary-soft: #0b0f19;
-  --bg-secondary-strong: #334155;
-  --bg-tertiary: #1e293b;
-  --bg-tertiary-soft: #0f172a;
-  --bg-tertiary-medium: #334155;
-  --bg-quaternary: #334155;
-  --bg-quaternary-medium: #475569;
-  --bg-disabled: #1e293b;
-  --border-default-subtle: #1e293b;
-  --border-default-medium: #475569;
-  --border-default-strong: #64748b;
-  --border-light: #334155;
-  --border-light-subtle: #1e293b;
-  --border-muted: #0f172a;
-  --text-disabled: #64748b;
-  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
-     badge, toast vẫn ra đúng màu của theme Modern. */
-  --text-success: var(--color-emerald-400);
-  --text-success-strong: var(--color-emerald-300);
-  --text-danger: var(--color-rose-400);
-  --text-danger-strong: var(--color-rose-300);
-  --text-warning: var(--color-orange-300);
-  --text-warning-strong: var(--color-orange-200);
-  --text-warning-subtle: var(--color-orange-500);
-  --text-info: var(--color-brand-400);
-  --text-info-strong: var(--color-brand-300);
-  --bg-success: var(--color-emerald-700);
-  --bg-success-soft: var(--color-emerald-950);
-  --bg-success-medium: var(--color-emerald-900);
-  --bg-success-strong: var(--color-emerald-600);
-  --bg-danger: var(--color-rose-700);
-  --bg-danger-soft: var(--color-rose-950);
-  --bg-danger-medium: var(--color-rose-900);
-  --bg-danger-strong: var(--color-rose-600);
-  --bg-warning: var(--color-orange-600);
-  --bg-warning-soft: var(--color-orange-950);
-  --bg-warning-medium: var(--color-orange-900);
-  --bg-warning-strong: var(--color-orange-700);
-  --bg-warning-strongest: var(--color-orange-800);
-  --border-success: var(--color-emerald-600);
-  --border-success-subtle: var(--color-emerald-900);
-  --border-danger: var(--color-rose-600);
-  --border-danger-subtle: var(--color-rose-900);
-  --border-warning: var(--color-orange-500);
-  --border-warning-subtle: var(--color-orange-900);
-  --border-info: var(--color-brand-600);
-
-  /* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
-  --bg-brand-softer: #020617;
-  --border-brand: #38bdf8;
-}
-
-/* =============================================================================
-   THEME MODE: ENTERPRISE (Compact 4-6px Radius, Corporate Zinc)
-   ============================================================================= */
-[data-theme='enterprise'] {
-  --radius-xxs: 1px;
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius: 4px;
-  --radius-base: 6px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 8px;
-  --radius-2xl: 10px;
-  --radius-3xl: 12px;
-
-  --text-heading: #18181b;
-  --text-body: #52525b;
-  --text-body-subtle: #71717a;
-  --bg-primary: #ffffff;
-  --bg-primary-soft: #fafafa;
-  --bg-secondary: #f4f4f5;
-  --bg-secondary-medium: #e4e4e7;
-  --border-default: #d4d4d8;
-  --bg-brand: #1e3a8a;
-  --bg-brand-strong: #172554;
-  --bg-brand-soft: #dbeafe;
-  --text-brand: #1e3a8a;
-
-  /* Bo sung dai trung tinh - truoc day thieu nen khong doi theo theme */
-  --bg-primary-medium: #f8fafc;
-  --bg-primary-strong: #f1f5f9;
-  --bg-secondary-soft: #f8fafc;
-  --bg-secondary-strong: #cbd5e1;
-  --bg-tertiary: #f1f5f9;
-  --bg-tertiary-soft: #f8fafc;
-  --bg-tertiary-medium: #e2e8f0;
-  --bg-quaternary: #e2e8f0;
-  --bg-quaternary-medium: #cbd5e1;
-  --bg-disabled: #f1f5f9;
-  --border-default-subtle: #e2e8f0;
-  --border-default-medium: #94a3b8;
-  --border-default-strong: #64748b;
-  --border-light: #e2e8f0;
-  --border-light-subtle: #f1f5f9;
-  --border-muted: #f8fafc;
-  --text-disabled: #94a3b8;
-  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
-     badge, toast vẫn ra đúng màu của theme Modern. */
-  --text-success: var(--color-emerald-700);
-  --text-success-strong: var(--color-emerald-800);
-  --text-danger: var(--color-rose-600);
-  --text-danger-strong: var(--color-rose-800);
-  --text-warning: var(--color-orange-600);
-  --text-warning-strong: var(--color-orange-950);
-  --text-warning-subtle: var(--color-orange-600);
-  --text-info: var(--color-brand-700);
-  --text-info-strong: var(--color-brand-800);
-  --bg-success: var(--color-emerald-700);
-  --bg-success-soft: var(--color-emerald-50);
-  --bg-success-medium: var(--color-emerald-100);
-  --bg-success-strong: var(--color-emerald-700);
-  --bg-danger: var(--color-rose-600);
-  --bg-danger-soft: var(--color-rose-50);
-  --bg-danger-medium: var(--color-rose-100);
-  --bg-danger-strong: var(--color-rose-700);
-  --bg-warning: var(--color-orange-700);
-  --bg-warning-soft: var(--color-orange-50);
-  --bg-warning-medium: var(--color-orange-100);
-  --bg-warning-strong: var(--color-orange-700);
-  --bg-warning-strongest: var(--color-orange-800);
-  --border-success: var(--color-emerald-300);
-  --border-success-subtle: var(--color-emerald-200);
-  --border-danger: var(--color-rose-600);
-  --border-danger-subtle: var(--color-rose-200);
-  --border-warning: var(--color-orange-500);
-  --border-warning-subtle: var(--color-orange-200);
-  --border-info: var(--color-brand-300);
+   THEME: TIỂU HỌC  —  KHUNG, CHƯA ĐỔ GIÁ TRỊ
 
-  /* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
-  --bg-brand-softer: #eff6ff;
-  --border-brand: #1e3a8a;
-}
+   Bốn theme phụ cũ (`minimal` · `enterprise` · `playful` · `mono`) đã gỡ
+   2026-09-21 theo VIỆC-029: Figma chỉ có Ôn Luyện, code có 5 theme nên 661
+   dòng ở đây không ứng với thiết kế nào.
 
-.dark[data-theme='enterprise'],
-[data-theme='enterprise'].dark {
-  --radius-xxs: 1px;
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius: 4px;
-  --radius-base: 6px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 8px;
-  --radius-2xl: 10px;
-  --radius-3xl: 12px;
-
-  --text-heading: #fafafa;
-  --text-body: #a1a1aa;
-  --text-body-subtle: #71717a;
-  --bg-primary: #09090b;
-  --bg-primary-soft: #121215;
-  --bg-secondary: #18181b;
-  --bg-secondary-medium: #27272a;
-  --border-default: #27272a;
-  --bg-brand: #3b82f6;
-  --bg-brand-strong: #60a5fa;
-  --bg-brand-soft: #172554;
-  --text-brand: #60a5fa;
-
-  /* Bo sung dai trung tinh cho dark - truoc day roi ve gia tri LIGHT */
-  --bg-primary-medium: #0f172a;
-  --bg-primary-strong: #1e293b;
-  --bg-secondary-soft: #0b0f19;
-  --bg-secondary-strong: #334155;
-  --bg-tertiary: #1e293b;
-  --bg-tertiary-soft: #0f172a;
-  --bg-tertiary-medium: #334155;
-  --bg-quaternary: #334155;
-  --bg-quaternary-medium: #475569;
-  --bg-disabled: #1e293b;
-  --border-default-subtle: #1e293b;
-  --border-default-medium: #475569;
-  --border-default-strong: #64748b;
-  --border-light: #334155;
-  --border-light-subtle: #1e293b;
-  --border-muted: #0f172a;
-  --text-disabled: #64748b;
-  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
-     badge, toast vẫn ra đúng màu của theme Modern. */
-  --text-success: var(--color-emerald-400);
-  --text-success-strong: var(--color-emerald-300);
-  --text-danger: var(--color-rose-400);
-  --text-danger-strong: var(--color-rose-300);
-  --text-warning: var(--color-orange-300);
-  --text-warning-strong: var(--color-orange-200);
-  --text-warning-subtle: var(--color-orange-500);
-  --text-info: var(--color-brand-400);
-  --text-info-strong: var(--color-brand-300);
-  --bg-success: var(--color-emerald-800);
-  --bg-success-soft: var(--color-emerald-950);
-  --bg-success-medium: var(--color-emerald-900);
-  --bg-success-strong: var(--color-emerald-600);
-  --bg-danger: var(--color-rose-800);
-  --bg-danger-soft: var(--color-rose-950);
-  --bg-danger-medium: var(--color-rose-900);
-  --bg-danger-strong: var(--color-rose-600);
-  --bg-warning: var(--color-orange-800);
-  --bg-warning-soft: var(--color-orange-950);
-  --bg-warning-medium: var(--color-orange-900);
-  --bg-warning-strong: var(--color-orange-700);
-  --bg-warning-strongest: var(--color-orange-800);
-  --border-success: var(--color-emerald-600);
-  --border-success-subtle: var(--color-emerald-900);
-  --border-danger: var(--color-rose-600);
-  --border-danger-subtle: var(--color-rose-900);
-  --border-warning: var(--color-orange-500);
-  --border-warning-subtle: var(--color-orange-900);
-  --border-info: var(--color-brand-600);
+   Giữ lại đúng CƠ CHẾ `data-theme` cho theme này. Hai khối dưới đây cố ý để
+   TRỐNG: đổi sang `tieu-hoc` lúc này thì giao diện y hệt Ôn Luyện, không vỡ
+   gì — an toàn để ghép dần.
 
-  /* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
-  --bg-brand-softer: #0b1220;
-  --border-brand: #3b82f6;
-}
+   ## Cách đổ giá trị
 
-/* =============================================================================
-   THEME MODE: PLAYFUL (Super Rounded 16-32px, Vibrant Purple)
-   ============================================================================= */
-[data-theme='playful'] {
-  --radius-xxs: 4px;
-  --radius-xs: 8px;
-  --radius-sm: 12px;
-  --radius: 14px;
-  --radius-base: 18px;
-  --radius-md: 18px;
-  --radius-lg: 24px;
-  --radius-xl: 28px;
-  --radius-2xl: 32px;
-  --radius-3xl: 40px;
-
-  --bg-brand: #9333ea;
-  --bg-brand-strong: #7e22ce;
-  --bg-brand-soft: #f3e8ff;
-  --bg-brand-softer: #faf5ff;
-  --text-brand: #7e22ce;
-  --border-brand: #c084fc;
+   Chỉ override TOKEN NGỮ NGHĨA (`--bg-*`, `--text-*`, `--border-*`,
+   `--radius-*`). ĐỪNG override primitive (`--color-brand-700`) — primitive là
+   bảng màu gốc dùng chung, sửa nó là đổi cả Ôn Luyện.
 
-  --bg-primary: #ffffff;
-  --bg-primary-soft: #faf5ff;
-  --bg-secondary: #f3e8ff;
-  --bg-secondary-medium: #e9d5ff;
-  --border-default: #e9d5ff;
-  --text-heading: #3b0764;
-  --text-body: #6b21a8;
-
-  /* Bo sung dai trung tinh - truoc day thieu nen khong doi theo theme */
-  --bg-primary-medium: #faf5ff;
-  --bg-primary-strong: #f3e8ff;
-  --bg-secondary-soft: #faf5ff;
-  --bg-secondary-strong: #e9d4ff;
-  --bg-tertiary: #f3e8ff;
-  --bg-tertiary-soft: #faf5ff;
-  --bg-tertiary-medium: #e9d4ff;
-  --bg-quaternary: #e9d4ff;
-  --bg-quaternary-medium: #dab2ff;
-  --bg-disabled: #f3e8ff;
-  --border-default-subtle: #f3e8ff;
-  --border-default-medium: #dab2ff;
-  --border-default-strong: #c27aff;
-  --border-light: #f3e8ff;
-  --border-light-subtle: #faf5ff;
-  --border-muted: #faf5ff;
-  --text-disabled: #c27aff;
-  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
-     badge, toast vẫn ra đúng màu của theme Modern. */
-  --text-success: var(--color-emerald-600);
-  --text-success-strong: var(--color-emerald-800);
-  --text-danger: var(--color-rose-600);
-  --text-danger-strong: var(--color-rose-800);
-  --text-warning: var(--color-orange-600);
-  --text-warning-strong: var(--color-orange-950);
-  --text-warning-subtle: var(--color-orange-600);
-  --text-info: var(--color-purple-700);
-  --text-info-strong: var(--color-purple-800);
-  --bg-success: var(--color-emerald-500);
-  --bg-success-soft: var(--color-emerald-100);
-  --bg-success-medium: var(--color-emerald-100);
-  --bg-success-strong: var(--color-emerald-700);
-  --bg-danger: var(--color-rose-500);
-  --bg-danger-soft: var(--color-rose-100);
-  --bg-danger-medium: var(--color-rose-100);
-  --bg-danger-strong: var(--color-rose-700);
-  --bg-warning: var(--color-orange-400);
-  --bg-warning-soft: var(--color-orange-100);
-  --bg-warning-medium: var(--color-orange-100);
-  --bg-warning-strong: var(--color-orange-700);
-  --bg-warning-strongest: var(--color-orange-800);
-  --border-success: var(--color-emerald-300);
-  --border-success-subtle: var(--color-emerald-200);
-  --border-danger: var(--color-rose-600);
-  --border-danger-subtle: var(--color-rose-200);
-  --border-warning: var(--color-orange-500);
-  --border-warning-subtle: var(--color-orange-200);
-  --border-info: var(--color-purple-300);
+   Mỗi giá trị đặt ở CẢ HAI khối: thiếu khối `.dark` thì theme mới chỉ có chế
+   độ sáng, và người dùng bật chế độ tối sẽ rơi về màu Ôn Luyện — lệch nửa
+   vời, khó thấy hơn là hỏng hẳn.
 
-  /* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
-  --text-body-subtle: #a855f7;
-}
-
-.dark[data-theme='playful'],
-[data-theme='playful'].dark {
-  --radius-xxs: 4px;
-  --radius-xs: 8px;
-  --radius-sm: 12px;
-  --radius: 14px;
-  --radius-base: 18px;
-  --radius-md: 18px;
-  --radius-lg: 24px;
-  --radius-xl: 28px;
-  --radius-2xl: 32px;
-  --radius-3xl: 40px;
-
-  --bg-brand: #c084fc;
-  --bg-brand-strong: #d8b4fe;
-  --bg-brand-soft: #3b0764;
-  --bg-brand-softer: #2e1065;
-  --text-brand: #d8b4fe;
-  --border-brand: #9333ea;
-
-  --bg-primary: #1e0b36;
-  --bg-primary-soft: #160728;
-  --bg-secondary: #2e1065;
-  --bg-secondary-medium: #3b0764;
-  --border-default: #581c87;
-  --text-heading: #faf5ff;
-  --text-body: #d8b4fe;
-
-  /* Bo sung dai trung tinh cho dark - truoc day roi ve gia tri LIGHT */
-  --bg-primary-medium: #2e1065;
-  --bg-primary-strong: #3b0764;
-  --bg-secondary-soft: #1e0b36;
-  --bg-secondary-strong: #581c87;
-  --bg-tertiary: #3b0764;
-  --bg-tertiary-soft: #2e1065;
-  --bg-tertiary-medium: #581c87;
-  --bg-quaternary: #581c87;
-  --bg-quaternary-medium: #6b21a8;
-  --bg-disabled: #3b0764;
-  --border-default-subtle: #3b0764;
-  --border-default-medium: #6b21a8;
-  --border-default-strong: #9333ea;
-  --border-light: #581c87;
-  --border-light-subtle: #3b0764;
-  --border-muted: #2e1065;
-  --text-disabled: #9333ea;
-  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
-     badge, toast vẫn ra đúng màu của theme Modern. */
-  --text-success: var(--color-emerald-400);
-  --text-success-strong: var(--color-emerald-300);
-  --text-danger: var(--color-rose-400);
-  --text-danger-strong: var(--color-rose-300);
-  --text-warning: var(--color-orange-300);
-  --text-warning-strong: var(--color-orange-200);
-  --text-warning-subtle: var(--color-orange-500);
-  --text-info: var(--color-purple-400);
-  --text-info-strong: var(--color-purple-300);
-  --bg-success: var(--color-emerald-600);
-  --bg-success-soft: var(--color-emerald-950);
-  --bg-success-medium: var(--color-emerald-900);
-  --bg-success-strong: var(--color-emerald-600);
-  --bg-danger: var(--color-rose-600);
-  --bg-danger-soft: var(--color-rose-950);
-  --bg-danger-medium: var(--color-rose-900);
-  --bg-danger-strong: var(--color-rose-600);
-  --bg-warning: var(--color-orange-500);
-  --bg-warning-soft: var(--color-orange-950);
-  --bg-warning-medium: var(--color-orange-900);
-  --bg-warning-strong: var(--color-orange-700);
-  --bg-warning-strongest: var(--color-orange-800);
-  --border-success: var(--color-emerald-600);
-  --border-success-subtle: var(--color-emerald-900);
-  --border-danger: var(--color-rose-600);
-  --border-danger-subtle: var(--color-rose-900);
-  --border-warning: var(--color-orange-500);
-  --border-warning-subtle: var(--color-orange-900);
-  --border-info: var(--color-purple-600);
-
-  /* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
-  --text-body-subtle: #c084fc;
-}
-
-/* =============================================================================
-   THEME MODE: MONO (Monochrome High Contrast)
+   Hướng thiết kế người dùng đã nêu: "dành cho trẻ con, cần đẹp mắt" — bo góc
+   tròn hơn, màu tươi hơn. Chưa có Figma, sẽ dựng bản nháp riêng để duyệt.
    ============================================================================= */
-[data-theme='mono'] {
-  --radius-xxs: 2px;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius: 8px;
-  --radius-base: 10px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --radius-xl: 18px;
-  --radius-2xl: 22px;
-  --radius-3xl: 28px;
-
-  --bg-brand: #09090b;
-  --bg-brand-strong: #000000;
-  --bg-brand-soft: #e4e4e7;
-  --bg-brand-softer: #f4f4f5;
-  --text-brand: #09090b;
-  --border-brand: #09090b;
-
-  --bg-primary: #ffffff;
-  --bg-primary-soft: #fafafa;
-  --bg-secondary: #f4f4f5;
-  --bg-secondary-medium: #e4e4e7;
-  --border-default: #71717a;
-  --text-heading: #09090b;
-  --text-body: #27272a;
-
-  /* Bo sung dai trung tinh - truoc day thieu nen khong doi theo theme */
-  --bg-primary-medium: #f5f5f5;
-  --bg-primary-strong: #e5e5e5;
-  --bg-secondary-soft: #fafafa;
-  --bg-secondary-strong: #d4d4d4;
-  --bg-tertiary: #f5f5f5;
-  --bg-tertiary-soft: #fafafa;
-  --bg-tertiary-medium: #e5e5e5;
-  --bg-quaternary: #e5e5e5;
-  --bg-quaternary-medium: #d4d4d4;
-  --bg-disabled: #f5f5f5;
-  --border-default-subtle: #e5e5e5;
-  --border-default-medium: #a3a3a3;
-  --border-default-strong: #737373;
-  --border-light: #e5e5e5;
-  --border-light-subtle: #f5f5f5;
-  --border-muted: #fafafa;
-  --text-disabled: #a3a3a3;
-  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
-     badge, toast vẫn ra đúng màu của theme Modern. */
-  --text-success: var(--color-gray-700);
-  --text-success-strong: var(--color-gray-900);
-  --text-danger: var(--color-gray-900);
-  --text-danger-strong: var(--color-gray-950);
-  --text-warning: var(--color-gray-700);
-  --text-warning-strong: var(--color-gray-900);
-  --text-warning-subtle: var(--color-gray-600);
-  --text-info: var(--color-gray-700);
-  --text-info-strong: var(--color-gray-900);
-  --bg-success: var(--color-gray-600);
-  --bg-success-soft: var(--color-gray-50);
-  --bg-success-medium: var(--color-gray-100);
-  --bg-success-strong: var(--color-gray-700);
-  --bg-danger: var(--color-gray-800);
-  --bg-danger-soft: var(--color-gray-100);
-  --bg-danger-medium: var(--color-gray-200);
-  --bg-danger-strong: var(--color-gray-900);
-  --bg-warning: var(--color-gray-500);
-  --bg-warning-soft: var(--color-gray-50);
-  --bg-warning-medium: var(--color-gray-100);
-  --bg-warning-strong: var(--color-gray-700);
-  --bg-warning-strongest: var(--color-gray-800);
-  --border-success: var(--color-gray-300);
-  --border-success-subtle: var(--color-gray-200);
-  --border-danger: var(--color-gray-500);
-  --border-danger-subtle: var(--color-gray-300);
-  --border-warning: var(--color-gray-300);
-  --border-warning-subtle: var(--color-gray-200);
-  --border-info: var(--color-gray-300);
-
-  /* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
-  --text-body-subtle: #52525b;
+[data-theme='tieu-hoc'] {
+  /* trống — xem chú thích trên */
 }
 
-.dark[data-theme='mono'],
-[data-theme='mono'].dark {
-  --radius-xxs: 2px;
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius: 8px;
-  --radius-base: 10px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --radius-xl: 18px;
-  --radius-2xl: 22px;
-  --radius-3xl: 28px;
-
-  --bg-brand: #fafafa;
-  --bg-brand-strong: #ffffff;
-  --bg-brand-soft: #27272a;
-  --bg-brand-softer: #18181b;
-  --text-brand: #fafafa;
-  --border-brand: #fafafa;
-
-  --bg-primary: #000000;
-  --bg-primary-soft: #09090b;
-  --bg-secondary: #18181b;
-  --bg-secondary-medium: #27272a;
-  --border-default: #52525b;
-  --text-heading: #ffffff;
-  --text-body: #d4d4d8;
-
-  /* Bo sung dai trung tinh cho dark - truoc day roi ve gia tri LIGHT */
-  --bg-primary-medium: #171717;
-  --bg-primary-strong: #262626;
-  --bg-secondary-soft: #0a0a0a;
-  --bg-secondary-strong: #404040;
-  --bg-tertiary: #262626;
-  --bg-tertiary-soft: #171717;
-  --bg-tertiary-medium: #404040;
-  --bg-quaternary: #404040;
-  --bg-quaternary-medium: #525252;
-  --bg-disabled: #262626;
-  --border-default-subtle: #262626;
-  --border-default-medium: #525252;
-  --border-default-strong: #737373;
-  --border-light: #404040;
-  --border-light-subtle: #262626;
-  --border-muted: #171717;
-  --text-disabled: #737373;
-  /* Trạng thái — trước đây 4 theme phụ không override nhóm này nên alert,
-     badge, toast vẫn ra đúng màu của theme Modern. */
-  --text-success: var(--color-gray-300);
-  --text-success-strong: var(--color-gray-200);
-  --text-danger: var(--color-gray-100);
-  --text-danger-strong: var(--color-gray-50);
-  --text-warning: var(--color-gray-300);
-  --text-warning-strong: var(--color-gray-200);
-  --text-warning-subtle: var(--color-gray-400);
-  --text-info: var(--color-gray-300);
-  --text-info-strong: var(--color-gray-200);
-  --bg-success: var(--color-gray-600);
-  --bg-success-soft: var(--color-gray-950);
-  --bg-success-medium: var(--color-gray-900);
-  --bg-success-strong: var(--color-gray-500);
-  --bg-danger: var(--color-gray-300);
-  --bg-danger-soft: var(--color-gray-800);
-  --bg-danger-medium: var(--color-gray-700);
-  --bg-danger-strong: var(--color-gray-200);
-  --bg-warning: var(--color-gray-600);
-  --bg-warning-soft: var(--color-gray-950);
-  --bg-warning-medium: var(--color-gray-900);
-  --bg-warning-strong: var(--color-gray-500);
-  --bg-warning-strongest: var(--color-gray-400);
-  --border-success: var(--color-gray-600);
-  --border-success-subtle: var(--color-gray-800);
-  --border-danger: var(--color-gray-400);
-  --border-danger-subtle: var(--color-gray-600);
-  --border-warning: var(--color-gray-600);
-  --border-warning-subtle: var(--color-gray-800);
-  --border-info: var(--color-gray-600);
-
-  /* Bổ sung: token này có ở theme khác nhưng thiếu ở đây. */
-  --text-body-subtle: #a1a1aa;
+.dark[data-theme='tieu-hoc'],
+[data-theme='tieu-hoc'].dark {
+  /* trống — xem chú thích trên */
 }