/* File design token 3 tầng — nơi DUY NHẤT được viết mã màu hex (issue #113).
 *
 * NGUỒN CHÂN LÝ: docs/tai-cau-truc/design-tokens/figma-library.json — bản khai
 * thư viện Figma đã dựng thật 27/08/2026 (38 primitive / 19 semantic, commit
 * 562edbd). Tên và giá trị ở TẦNG 1 và TẦNG 2 dưới đây chép đúng từ đó. Lệch một
 * tên là mọi việc sau (#115 DataTable, #116 tám component nền, #120 màn xác thực)
 * đều phải dịch tay giữa Figma và mã.
 *
 * BA TẦNG, VÀ LUẬT DÙNG TỪNG TẦNG
 * -------------------------------
 *   Tầng 1  --c-*        palette gốc. CHỈ KHAI, KHÔNG dùng trực tiếp trong CSS
 *                        component. Dùng thẳng là mất luôn khả năng đổi chế độ:
 *                        --c-gray-900 là chữ ở chế độ Sáng nhưng là NỀN ở chế độ
 *                        Tối, ai dùng thẳng thì một trong hai chế độ sẽ mù chữ.
 *   Tầng 2  --color-*    token ngữ nghĩa, CÓ GIÁ TRỊ RIÊNG cho từng chế độ.
 *                        Đây là tầng component phải dùng.
 *   Tầng 3  --btn-*      kích thước theo component, không phụ thuộc chế độ.
 *           --table-*
 *           --z-*
 *
 * CHẾ ĐỘ TỐI LÀM BẰNG ĐỔI GIÁ TRỊ TOKEN, KHÔNG THÊM QUY TẮC VÁ
 * ------------------------------------------------------------
 * Trước đây app.css có 35 quy tắc `body.light-mode .xxx { ... }` — mỗi quy tắc là
 * một lần chép lại cùng một component chỉ để đổi màu, và mỗi lần thêm component
 * mới là thêm một quy tắc nữa. Nay chỉ có MỘT khối `[data-theme="dark"]` đổi giá
 * trị token; component viết một lần, chạy cả hai chế độ.
 *
 * Thêm màu mới thì thêm ở TẦNG 1 rồi trỏ token TẦNG 2 vào, đừng viết hex trong
 * app.css — `python scripts/count_hex.py` đếm và chặn (trần chỉ đi xuống, #114).
 *
 * SÁNG LÀ MẶC ĐỊNH, TỐI NẰM TRONG [data-theme="dark"]
 * ---------------------------------------------------
 * Khớp Figma: collection «2 Semantic» dựng mode Light trước (gói Starter chỉ cho
 * 1 mode/collection — NG-16). Nhưng hệ thống đang chạy mặc định TỐI, nên
 * index.html có một bước chuyển đổi: ai chưa từng bấm chọn chế độ thì được ghim
 * sẵn "dark" vào localStorage. Người đang dùng không thấy khác gì; chỉ nhân sự
 * MỚI mở lần đầu mới thấy giao diện Sáng.
 */

/* ══════════════════════════════════════════════════════════════════════
   TẦNG 1 — PALETTE GỐC (38 biến, khớp Figma "1 Primitives")
   Không dùng trực tiếp. Xem luật ở đầu file.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Xám — trục nền/chữ của cả hai chế độ */
  --c-gray-0: #ffffff;
  --c-gray-100: #f4f5f7;
  --c-gray-200: #e8eaef;   /* NG-02 — chữ chế độ Tối */
  --c-gray-300: #d8dbe0;
  --c-gray-400: #b3b8c2;
  --c-gray-500: #949ba8;   /* NG-06 — chữ phụ chế độ Tối */
  --c-gray-600: #6b7280;
  --c-gray-650: #61697a;   /* NG-06 — chữ phụ chế độ Sáng */
  --c-gray-700: #4b5563;
  --c-gray-850: #1c1f26;
  --c-gray-900: #141519;
  --c-gray-950: #0d0e11;

  /* Cam — màu thương hiệu */
  --c-orange-300: #ff9d6e;
  --c-orange-500: #ff6b35;
  --c-orange-600: #e85a26;
  --c-orange-700: #c2410c; /* NG-03b — cam khi làm chữ, chế độ Sáng */

  /* Đỏ · hổ phách · xanh lá — trạng thái */
  --c-red-100: #fee2e2;
  --c-red-500: #ff5c5c;
  --c-red-600: #dc2626;
  --c-red-500-14: #ff5c5c24;    /* NG-02 — nền nhạt chế độ Tối */
  --c-amber-100: #fef3c7;
  --c-amber-500: #f5a623;
  --c-amber-600: #d97706;
  --c-amber-500-14: #f5a62324;  /* NG-02 */
  --c-green-500: #3ecf8e;
  --c-green-600: #16a34a;

  /* Đen trong suốt — bóng đổ và lớp phủ */
  --c-black-08: #00000014;      /* NG-01 — bóng đổ chế độ Sáng */
  --c-black-45: #00000073;      /* NG-01 — bóng đổ chế độ Tối */

  /* Hai màu Figma chưa tạo kịp vì chạm trần lượt gọi MCP (NG-17). Khai ở đây
   * để CSS dùng được ngay; khi Figma mở lại thì tạo đúng hai tên này. */
  --c-orange-50: #fff3ee;
  --c-gray-990: #0f0f14;

  /* Khoảng cách · bo góc · thông số bóng đổ (Figma khai kiểu FLOAT, CSS cần
   * đơn vị nên gắn px ở đây — giá trị số giữ nguyên) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-y: 4px;
  --shadow-blur: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   TẦNG 2 — TOKEN NGỮ NGHĨA (19 biến, khớp Figma "2 Semantic")
   Giá trị dưới đây là mode LIGHT. Mode DARK ở khối [data-theme="dark"].
   Mọi ô đều trỏ về TẦNG 1, không ô nào ghi hex thẳng (NG-02).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* PHẢI khai, và phải khai ở ĐÂY chứ không phải trong quy tắc của component.
   *
   * Vì sao: những phần do TRÌNH DUYỆT tự vẽ bên trong một điều khiển — icon lịch
   * của `input[type=date]`, mũi tên xổ của `<select>`, ô tick, thanh cuộn, con
   * trỏ nhập — KHÔNG lấy màu từ `background`/`color` ta đặt. Chúng lấy từ
   * `color-scheme`. Không khai thì giá trị là `normal`, tức là Sáng, và ở chế độ
   * Tối ta được một icon lịch màu đen gần như tàng hình trên nền #0d0e11.
   *
   * Đây là lý do `color-scheme: inherit` ở app.css:3528 và :7942 lâu nay không
   * có tác dụng gì: hai dòng ấy kế thừa từ một giá trị chưa ai đặt. Đặt ở
   * `:root` là cả hai dòng đó có hiệu lực trở lại, cùng với 63 ô ngày/tháng/giờ
   * đang rải khắp index.html và các file JS.
   *
   * Đi kèm giá trị token chứ không đứng riêng: chế độ nào thì điều khiển gốc
   * cũng phải theo chế độ ấy, nếu không thì lại là một quy tắc vá thứ hai. */
  color-scheme: light;

  --color-bg: var(--c-gray-100);
  --color-surface: var(--c-gray-0);
  --color-surface-hover: var(--c-gray-100);
  --color-border: var(--c-gray-300);
  --color-border-strong: var(--c-gray-400);
  /* NG-10 — vòng lấy nét tô ĐẶC, không dùng màu trong suốt */
  --color-focus: var(--c-orange-600);

  --color-text: var(--c-gray-900);
  --color-text-muted: var(--c-gray-650);
  /* Tương phản thấp là CỐ Ý — WCAG 1.4.3 miễn trừ điều khiển đang tắt */
  --color-text-disabled: var(--c-gray-400);

  /* CHỈ dùng làm NỀN. Cam làm chữ thì dùng --color-primary-text (NG-03b) */
  --color-primary: var(--c-orange-500);
  --color-primary-hover: var(--c-orange-600);
  /* NG-03 — nhãn nằm TRÊN nền --color-primary. Chữ trắng trên cam chỉ đạt
   * 2,84:1 nên cố ý dùng xám đậm, đừng đổi về trắng cho "đẹp" */
  --color-on-primary: var(--c-gray-900);
  --color-primary-text: var(--c-orange-700);

  --color-danger: var(--c-red-600);
  --color-danger-subtle: var(--c-red-100);
  /* NG-12 — 3,19:1 ở chế độ Sáng: đủ cho icon/viền, KHÔNG đủ cho chữ thường */
  --color-warning: var(--c-amber-600);
  --color-warning-subtle: var(--c-amber-100);
  /* NG-12 — 3,30:1 ở chế độ Sáng, cùng cảnh báo như trên */
  --color-success: var(--c-green-600);

  /* NG-01 — thay cho --shadow-md cũ (Figma Variable không có kiểu bóng đổ) */
  --color-shadow: var(--c-black-08);

  /* Hai token Figma chưa tạo kịp (NG-17) — xem ghi chú ở TẦNG 1 */
  --color-primary-subtle: var(--c-orange-50);
  --color-scrim: var(--c-gray-990);
}

:root[data-theme="dark"] {
  /* Cặp của `color-scheme: light` ở khối trên — xem chú thích dài ở đó. */
  color-scheme: dark;

  --color-bg: var(--c-gray-950);
  --color-surface: var(--c-gray-900);
  --color-surface-hover: var(--c-gray-850);
  --color-border: var(--c-gray-850);
  --color-border-strong: var(--c-gray-700);
  --color-focus: var(--c-orange-500);

  --color-text: var(--c-gray-200);
  --color-text-muted: var(--c-gray-500);
  --color-text-disabled: var(--c-gray-700);

  --color-primary: var(--c-orange-500);
  --color-primary-hover: var(--c-orange-300);
  --color-on-primary: var(--c-gray-900);
  --color-primary-text: var(--c-orange-500);

  --color-danger: var(--c-red-500);
  --color-danger-subtle: var(--c-red-500-14);
  --color-warning: var(--c-amber-500);
  --color-warning-subtle: var(--c-amber-500-14);
  --color-success: var(--c-green-500);

  --color-shadow: var(--c-black-45);

  --color-primary-subtle: #ff6b3524;
  --color-scrim: var(--c-gray-990);
}

/* ══════════════════════════════════════════════════════════════════════
   TẦNG 2b — TOKEN NGỮ NGHĨA NGOÀI FIGMA
   Figma collection 2 chưa có, nhưng 35 quy tắc vá `body.light-mode .xxx` cũ
   cần đúng mấy thứ này để xoá được. Khai riêng khối để lần đối chiếu Figma sau
   không nhầm chúng với 19 token chính thức.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Lớp phủ trên mặt phẳng — chip, thanh tiến độ, sọc bảng. Chế độ Sáng phủ
   * ĐEN mờ, chế độ Tối phủ TRẮNG mờ; đó là lý do 6 quy tắc vá cũ tồn tại. */
  --overlay-weak: rgba(0, 0, 0, .02);
  --overlay: rgba(0, 0, 0, .04);
  --overlay-strong: rgba(0, 0, 0, .08);
  /* Nền ảnh khi rê chuột — cả hai chế độ đều phủ ĐEN (ảnh sáng ở cả hai), chỉ
   * khác độ đậm. Đây là lớp phủ duy nhất không đảo màu theo chế độ. */
  --overlay-heavy: rgba(0, 0, 0, .55);

  /* Đường kẻ giữa các dòng bảng — mảnh hơn --color-border, và là lớp phủ chứ
   * không phải màu đặc, nên đổi chiều theo chế độ như nhóm --overlay-*. */
  --divider: rgba(0, 0, 0, .05);

  /* Xanh dương "thông tin" — cột Nhập kho, nhãn Outsource. Bảng màu Figma
   * không có họ xanh dương; khai ở đây và nhớ bổ sung vào Figma đợt sau. */
  --color-info: #1d4ed8;
  --color-info-strong: #2563eb;
  --color-success-subtle: rgba(15, 122, 74, .12);
  /* NG-07 — bốn tone của Alert/Banner, StatusPill và Toast (issue 116) đi theo
   * công thức --color-<tone> trên --color-<tone>-subtle. Ba tone kia đã đủ cặp;
   * "info" thì chỉ có màu đặc, nên biến thể info không có nền để bind. Khai nốt
   * ở đây để công thức áp được cho cả bốn. */
  --color-info-subtle: rgba(29, 78, 216, .12);

  /* Nền pha màu cho thẻ KPI và dải hero — luôn là màu trạng thái pha rất nhạt
   * trên nền mặt phẳng, nên phải đổi theo chế độ. */
  --tint-success: rgba(5, 150, 105, .06);
  --tint-info: rgba(37, 99, 235, .04);
  --tint-primary: rgba(59, 130, 246, .08);
}

:root[data-theme="dark"] {
  --overlay-weak: rgba(255, 255, 255, .015);
  --overlay: rgba(255, 255, 255, .04);
  --overlay-strong: rgba(255, 255, 255, .08);
  --overlay-heavy: rgba(0, 0, 0, .7);
  --divider: rgba(255, 255, 255, .035);

  --color-info: #3b82f6;
  --color-info-strong: #60a5fa;
  --color-success-subtle: rgba(57, 217, 138, .16);
  --color-info-subtle: rgba(59, 130, 246, .16);

  --tint-success: rgba(62, 207, 142, .07);
  --tint-info: rgba(59, 130, 246, .05);
  --tint-primary: rgba(59, 130, 246, .10);
}

/* ══════════════════════════════════════════════════════════════════════
   TẦNG 3 — TOKEN THEO COMPONENT
   Không phụ thuộc chế độ. Giá trị đo từ app.css đang chạy, không đặt mới —
   đổi ở đây là đổi cả hệ thống, nên đợt này chỉ ĐẶT TÊN cho cái đang có.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Nút — .btn hiện là padding 10/18, bo 8, chữ 14/600 */
  --btn-height: 38px;
  --btn-height-sm: 32px;
  --btn-padding-x: 18px;
  --btn-radius: var(--radius-md);
  --btn-font-size: 14px;
  --btn-font-weight: 600;

  /* Ô nhập — .rev-date/.rev-select/.rev-amount: padding 7/11, bo 9, chữ 13 */
  --input-height: 34px;
  --input-padding-x: 11px;
  --input-radius: 9px;
  --input-font-size: 13px;

  /* OrgPicker (#117) — bộ chọn đơn vị theo cây ở thanh trên. Nút kích hoạt cao
   * bằng ô nhập để đứng thẳng hàng với .user-chip; bảng xổ rộng 320 là số
   * .ss-pop (search-select) đang chạy thật, không đặt số mới. Thụt lề 16px mỗi
   * cấp: cây thật sâu 3 cấp (Khối › Team lớn › Dự án), 3×16 vẫn còn chỗ cho tên. */
  --orgpicker-trigger-h: var(--input-height);
  --orgpicker-panel-w: 320px;
  --orgpicker-panel-max-h: 380px;
  --orgpicker-row-h: 32px;
  --orgpicker-indent: 16px;

  /* Bảng — bốn token gốc giữ nguyên tên và giá trị của #113. Chúng là MẬT ĐỘ
   * "default"; ba bộ dưới đây thêm cho `DataTable` (#115) và không đụng tới
   * chúng, nên bảng viết tay cũ trông y như cũ. */
  --table-row-h: 44px;
  --table-header-h: 40px;
  --table-cell-px: var(--sp-3);
  --table-font-size: 13px;

  /* BA MẬT ĐỘ (#115).
   *
   * Bộ `default` KHÔNG đặt số mới — nó trỏ thẳng về bốn token #113 ngay trên.
   * Ba bảng sắp thay đang mỗi bảng một cỡ (`.rev-table` 12,5px · `.ua-table`
   * 13px · `.lr-table` 0,875rem = 14px), nên không có "số đang chạy thật" chung
   * để chép; chọn bừa một trong ba là đẻ ra nguồn sự thật thứ hai cạnh #113.
   * Lấy luôn #113 làm chuẩn: đúng giá trị giữa, và chỉ còn một chỗ để sửa.
   *
   * ⚠️ Ba bảng đó sẽ đổi cỡ chữ vài phần trăm khi chuyển sang `DataTable`. Đó
   * là chủ đích — thống nhất chính là việc của #115 — không phải lỗi hồi quy.
   *
   * `compact` cho bảng dày đặc nhiều dòng; `comfortable` cho bảng ít dòng có ô
   * hai tầng (tên + phụ đề, kiểu `.rev-cell-name b`). */
  --table-row-h-compact: 32px;
  --table-cell-py-compact: 5px;
  --table-cell-px-compact: var(--sp-2);
  --table-font-size-compact: 12px;

  --table-row-h-default: var(--table-row-h);
  --table-cell-py-default: 10px;
  --table-cell-px-default: var(--table-cell-px);
  --table-font-size-default: var(--table-font-size);

  --table-row-h-comfortable: 56px;
  --table-cell-py-comfortable: 14px;
  --table-cell-px-comfortable: var(--sp-4);
  --table-font-size-comfortable: var(--text-md);

  /* Đầu bảng — số đo lấy từ `.rev-table th`: chữ 10px HOA, giãn 0.04em, đậm 700.
   * Nền phải ĐẶC (không trong suốt): đầu bảng dính đè lên dòng đang cuộn qua
   * dưới nó, nền mờ là chữ chồng chữ. */
  --table-header-bg: var(--color-surface);
  --table-header-fg: var(--color-text-muted);
  --table-header-font-size: 10px;
  --table-header-tracking: 0.04em;
  --table-header-weight: 700;

  /* Dòng — kẻ ngang dùng --divider (mảnh hơn --color-border) vì bảng nhiều dòng
   * mà kẻ đậm thì đọc thành lưới thay vì thành hàng. */
  --table-row-border: var(--divider);
  --table-row-hover-bg: var(--color-surface-hover);
  --table-row-selected-bg: var(--color-primary-subtle);

  /* Bóng dưới đầu bảng dính — chỉ hiện khi đã cuộn, để biết còn dòng ở trên. */
  --table-sticky-shadow: 0 1px 0 var(--color-border), 0 4px 8px -6px var(--color-shadow);

  /* Thẻ / mặt phẳng */
  --card-radius: var(--radius-lg);
  --card-padding: var(--sp-4);

  /* ── TÁM COMPONENT NỀN (issue 116) ────────────────────────────────────
   * Cùng luật với ba mật độ bảng ở trên: KHÔNG đặt số mới khi app.css đã có
   * số đang chạy thật. Số dưới đây đo từ `.modal-content` (640px) ·
   * `#globalConfirmModal` (420px) · `.toast` (360px, mép 24px) · `.badge`
   * (4/10, bo 20px, chữ 11/600). `--card-*` ngay trên đã có từ #113, giữ
   * nguyên — `Card` dùng lại chứ không khai bộ thứ hai.
   *
   * Ba cỡ chứ không hơn, theo đúng luật 3 cỡ nút của P5 §6.1. */
  --modal-width-sm: 420px;
  --modal-width-md: 640px;
  --modal-width-lg: 880px;
  --modal-radius: var(--radius-lg);
  --modal-padding: var(--sp-6);
  --modal-max-h: 80vh;
  --modal-backdrop-blur: 4px;

  /* Drawer trượt từ mép phải, cao hết màn. Không có số cũ để chép: `.bm-drawer`
   * tên là drawer nhưng thật ra là panel thả xuống, không phải ngăn kéo. */
  --drawer-width-sm: 360px;
  --drawer-width-md: 480px;
  --drawer-width-lg: 720px;
  --drawer-padding: var(--sp-4);

  /* `--toast-gap` và `--toast-offset` LỆCH lưới 4px (10 và 18, không phải 8 và
   * 16) là cố ý: đó là số `.toast-stack` đang chạy thật, và cột ấy đang giữ hai
   * bảng thông báo của chat-notify/mention-notify. Nắn về lưới ở đây là dịch cả
   * hai cái đó đi vài pixel để đổi lấy đúng một con số đẹp hơn. */
  --toast-width: 360px;
  --toast-gap: 10px;
  --toast-offset: 18px;
  --toast-radius: var(--radius-md);
  --toast-padding-y: 14px;
  --toast-padding-x: 20px;

  --pill-padding-y: 4px;
  --pill-padding-x: 10px;
  --pill-radius: 20px;
  --pill-font-size: var(--text-xs);
  --pill-font-weight: 600;

  --tile-padding: var(--sp-4);
  --tile-value-size: var(--text-2xl);

  --empty-padding: var(--sp-8);
  --empty-icon-size: 40px;

  --filterbar-gap: var(--sp-2);
  --filterbar-padding: var(--sp-3);

  /* Chữ — thang chữ đang dùng thật trong app.css */
  --font-family: "Be Vietnam Pro", "Noto Sans Khmer", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Bóng đổ — ghép từ 3 token Figma (NG-01) */
  --shadow-sm: 0 1px 3px var(--color-shadow);
  --shadow-md: 0 var(--shadow-y) var(--shadow-blur) var(--color-shadow);
  --shadow-lg: 0 8px 32px var(--color-shadow);

  /* Tầng xếp chồng — chép từ z-index đang dùng thật, không đặt thang mới:
   * đặt thang mới mà app.css còn số cũ là hai hệ đè nhau, khó tìm hơn. */
  --z-base: 1;
  --z-sticky: 30;
  --z-nav: 900;
  --z-drawer: 901;
  --z-dropdown: 2000;
  --z-modal: 3000;
  --z-modal-top: 3001;
  --z-toast: 9000;
  --z-popover: 9001;
  --z-max: 10000;
}

/* ══════════════════════════════════════════════════════════════════════
   CẦU NỐI — tên token cũ mà app.css (20.000 dòng) đang dùng
   Đổi tên trong 3.700 quy tắc của app.css là một đợt riêng, rủi ro cao và
   không phải việc của #113. Ở đây trỏ tên cũ về token mới: app.css chạy y như
   cũ, chỗ MỚI viết theo tên Figma, và đợt dọn sau chỉ việc xoá dần khối này.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --bg: var(--color-bg);
  --bg-card: var(--color-surface);
  --bg-hover: var(--color-surface-hover);
  --surface: var(--color-surface);
  --border: var(--color-border);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --accent: var(--color-success);
  --danger: var(--color-danger);
  --warning: var(--color-warning);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-lg);
  --font: var(--font-family);

  /* Tên cũ đã khai trong file này từ trước — giữ nguyên để không gãy chỗ đang dùng */
  --on-primary: var(--color-on-primary);
  --success: var(--color-success);
  --color-danger-text: var(--color-danger);
  --color-warning-text: var(--color-warning);
  --color-text-muted-fallback: var(--c-gray-500);

  /* Cam «nghỉ việc» — chip loại đơn thứ ba. Phải khác hẳn xanh dương (nghỉ phép)
   * và xanh ngọc (làm online): đây là loại đơn hiếm và hệ trọng, nhìn lướt bảng
   * phải nhận ra ngay. Không dùng --color-warning: màu đó mang nghĩa "cảnh báo",
   * không phải "phân loại". */
  --type-resign: #f97316;

  /* Bảng doanh thu — thang nhiệt và dòng tổng */
  --rev-heat-low: var(--color-surface);
  --rev-heat-high: #0d7a6e;
  --rev-mkt-total-bg: #d4a017;
  --rev-mkt-total-fg: #1a1a1a;
  --rev-mkt-sum-bg: #f1f5f9;
}

:root[data-theme="dark"] {
  --rev-mkt-total-bg: #a67c00;
  --rev-mkt-total-fg: var(--c-gray-0);
  --rev-mkt-sum-bg: var(--color-surface-hover);
}

/* Màu cho bản IN ra giấy (@media print). Không dùng lại token theme được: theme
 * tối cho chữ sáng, in lên giấy trắng là mất chữ. Ba giá trị này cố định bất kể
 * người dùng đang để chế độ nào. */
:root {
  --print-ink: #1a1d26;
  --print-ink-soft: #4a5261;
  --print-paper: #ffffff;
  --print-rule: #c9ced9;
}

/* Bốn thị trường của Đồng hồ chốt sổ TCKT. Không mượn lại được token có sẵn:
 * --color-primary và --color-warning đều là cam, mà Campuchia với Philippines–Thái
 * phải phân biệt được bằng mắt trên trục thời gian — đó là toàn bộ công dụng của
 * màu ở màn này. Mỗi thị trường một cặp: màu đặc cho chấm tròn, màu nhạt làm nền
 * nhãn. Cặp này đảo vai theo chế độ, nhờ vậy nhãn luôn là "chữ đậm trên nền cùng
 * tông" ở cả hai chế độ. */
:root {
  --tckt-cam: #b4621b;
  --tckt-cam-soft: #f6e7d8;
  --tckt-pt: #6c4fa3;
  --tckt-pt-soft: #eae3f5;
  --tckt-my: #1e6faf;
  --tckt-my-soft: #dceaf7;
  --tckt-chung: #56666b;
  --tckt-chung-soft: #e3e8ea;
}

:root[data-theme="dark"] {
  --tckt-cam: #e39a5a;
  --tckt-cam-soft: #3a2a1b;
  --tckt-pt: #b39be6;
  --tckt-pt-soft: #2c2540;
  --tckt-my: #6fb0ec;
  --tckt-my-soft: #1b2e40;
  --tckt-chung: #9fb0b5;
  --tckt-chung-soft: #25302f;
}

/* ══════════════════════════════════════════════════════════════════════
 * MÀN ĐĂNG NHẬP — bảng màu riêng, không dùng --color-bg của cả hệ thống.
 *
 * Quyết định 05/09/2026 (#120): màn này giữ bản sắc riêng thay vì nền phẳng
 * theo Figma, và MỖI CHẾ ĐỘ có một bản riêng:
 *
 *   Tối   — xanh đêm, thẻ kính mờ. Giữ y nguyên bản đang chạy.
 *   Sáng  — trắng ấm cùng bố cục ánh sáng, thẻ trắng phẳng.
 *
 * Vì sao khai ở tokens.css chứ không trong login.html: scripts/count_hex.py
 * quét frontend/ và chỉ miễn trừ file này. Để bảng màu trong template là hàng
 * chục mã hex quay lại và trần bánh cóc (351) đỏ ngay.
 *
 * Mọi cặp chữ-trên-nền dưới đây đã đo tay ở CẢ HAI chế độ, thấp nhất 4,02:1 cho
 * chữ lớn và 4,38:1 cho đồ hoạ. check_design_tokens.py không với tới được vì nó
 * chỉ đo tầng ngữ nghĩa khai trong figma-library.json.
 * ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Dải nền, chế độ SÁNG ── */
  --login-ink: #eef1f7;
  --login-ink-hi: #f7f9fd;
  --login-ink-lo: #ffffff;
  --login-glow-brand: rgba(47, 111, 237, 0.14);
  --login-glow-accent: rgba(255, 107, 53, 0.12);
  --login-glow-sky: rgba(62, 160, 255, 0.1);
  --login-grid: rgba(47, 111, 237, 0.07);

  /* Chữ nằm TRÊN nền, ngoài thẻ. Không dùng --color-text được: ở đây nền là dải
     riêng chứ không phải --color-bg.
     Chỉ còn MỘT biến: --login-text đã bỏ vì không nơi nào đọc tới. Chữ đậm ngoài
     thẻ là dòng chuyển sắc --login-word-*, chữ nhạt là --login-muted, còn quy tắc
     tự điền của Chrome nay lấy --color-text. Giữ token chết là đúng thứ khối chú
     thích cũ của mục này đã dọn đi một lượt. */
  --login-muted: #61697a;

  /* Thẻ và ô nhập. Chế độ Sáng phẳng: không trong suốt, không làm mờ hậu cảnh. */
  --login-panel: #ffffff;
  --login-panel-hover: #f4f5f7;
  --login-panel-border: #d8dbe0;
  --login-panel-blur: 0px;
  --login-panel-shadow: rgba(15, 40, 90, 0.12);
  --login-field-bg: #ffffff;
  --login-field-border: #d8dbe0;
  --login-card-text: #141519;
  --login-card-muted: #61697a;
  --login-card-disabled: #b3b8c2;
  --login-link: #c2410c;

  /* Chữ thương hiệu chuyển sắc. Đoạn cuối là cam-700 chứ không phải cam-500:
     cam-500 trên nền sáng chỉ đạt 2,51:1, dưới ngưỡng 3:1 của chữ lớn. */
  --login-word-a: #141519;
  --login-word-b: #2f6fed;
  --login-word-c: #c2410c;

  /* Ô logo */
  --login-logo-a: #ffffff;
  --login-logo-b: #f4f7fd;
  --login-logo-ring: rgba(20, 21, 25, 0.1);
  --login-logo-shadow: rgba(15, 40, 90, 0.12);

  /* Huy hiệu «Hệ thống nội bộ» */
  --login-ok: #107a44;
  --login-ok-soft: #141519;
  --login-ok-line: rgba(16, 122, 68, 0.3);
  --login-ok-bg: rgba(62, 207, 142, 0.14);
  --login-ok-ring: rgba(16, 122, 68, 0.18);

  /* Cam thương hiệu cho nút chính. Giống nhau ở hai chế độ. */
  --login-accent: #ff6b35;
  --login-accent-hi: #ff8548;
  --login-btn-shadow: rgba(255, 107, 53, 0.28);
  --login-btn-shadow-hi: rgba(255, 107, 53, 0.4);

  /* Hình học và kiểu chữ của bản đang chạy */
  --login-radius: 18px;
  --login-radius-field: 11px;
  --login-control-h: 48px;
  --login-font: "Be Vietnam Pro", system-ui, sans-serif;
  --login-display: "Manrope", "Be Vietnam Pro", system-ui, sans-serif;
}

/* ── Vỏ ứng dụng (issue 118 · G0-15 · UI-06) ────────────────────────────
   Rail 72px + sidebar 240px theo P5 §8.1. Để ở tokens.css vì hai số này xuất
   hiện ở cả lưới .app lẫn khuôn mobile — sửa một chỗ, không phải hai. */
:root {
  --rail-w: 72px;
  --sidebar-w: 240px;
}

:root[data-theme="dark"] {
  /* ── Chế độ TỐI — giữ y nguyên bản đang chạy ── */
  --login-ink: #0a1220;
  --login-ink-hi: #0f1a2e;
  --login-ink-lo: #070d18;
  --login-glow-brand: rgba(47, 111, 237, 0.38);
  --login-glow-accent: rgba(255, 107, 53, 0.18);
  --login-glow-sky: rgba(62, 160, 255, 0.16);
  --login-grid: rgba(180, 205, 235, 0.06);

  --login-muted: #9fb0c9;

  /* Thẻ kính mờ: nền trong suốt cộng làm mờ hậu cảnh, đúng bản đang chạy */
  --login-panel: rgba(14, 22, 38, 0.78);
  --login-panel-hover: rgba(20, 30, 50, 0.86);
  --login-panel-border: rgba(148, 178, 220, 0.18);
  --login-panel-blur: 18px;
  --login-panel-shadow: rgba(0, 0, 0, 0.45);
  --login-field-bg: rgba(7, 12, 22, 0.72);
  --login-field-border: rgba(180, 205, 235, 0.16);
  --login-card-text: #f2f5fb;
  --login-card-muted: #9fb0c9;
  --login-card-disabled: #6d7c96;
  --login-link: #ff9d6e;

  --login-word-a: #ffffff;
  --login-word-b: #9ec0ff;
  --login-word-c: #ff9a6b;

  --login-logo-a: #ffffff;
  --login-logo-b: #e8f0ff;
  --login-logo-ring: rgba(255, 255, 255, 0.2);
  --login-logo-shadow: rgba(15, 40, 90, 0.45);

  --login-ok: #3ecf8e;
  --login-ok-soft: #8eecc0;
  --login-ok-line: rgba(62, 207, 142, 0.35);
  --login-ok-bg: rgba(62, 207, 142, 0.1);
  --login-ok-ring: rgba(62, 207, 142, 0.25);

  --login-btn-shadow: rgba(255, 107, 53, 0.32);
}