/* =============================================================================
   kq-token.css — BẢNG TOKEN của hệ giao diện sản phẩm (ADR-0022 mục 2.5, QD-049).

   NGUỒN DUY NHẤT của màu, khoảng cách, cỡ chữ, hình. kq-khung.css, kq-thanh-phan.css và CSS riêng từng màn
   CHỈ dùng biến ở đây — không định nghĩa màu mới.

   Ba lớp, nạp theo thứ tự:
     1. :root                 — chế độ SÁNG (mặc định, chế độ được duyệt bằng mẫu 00–05).
     2. html.che-do-toi       — chế độ TỐI, cùng tên biến (máy chủ đặt lớp lúc dựng trang theo tuỳ chọn của người dùng;
                                «theo máy» thì một câu kịch bản có nonce trong <head> đặt trước khung hình đầu — không nháy).
     3. /khung/mau-khach.css  — MÀU KHÁCH HÀNG (QD-049 (1)): máy chủ sinh từ «Nhận diện» (mau_chinh, mau_nhan), chỉ đè
                                nhóm biến thương hiệu/nhấn; đã kiểm tương phản AA ở CẢ HAI chế độ lúc lưu. Là tệp CSS cùng
                                nguồn (style-src 'self'), không phải style nội tuyến.
   Phông: phông HỆ THỐNG (QD-049 (4)) — không tệp phông, không CDN.
   Không dùng color-mix(), :has(), @container — Firefox ESR 102/115 là trình duyệt đích (site.css ràng buộc 2).
   ============================================================================= */
:root {
  /* — Thương hiệu sản phẩm (khách đè được qua /khung/mau-khach.css) — */
  --kq-thuong-hieu: #0e2f44;        /* nền thanh trên — xanh đá đậm; chữ trắng 13,9:1 */
  --kq-thuong-hieu-2: #1a4561;      /* rê chuột trên thanh trên */
  --kq-thuong-hieu-chu: #ffffff;
  --kq-thuong-hieu-chu-2: #b9cddb;  /* chữ phụ trên thanh trên (8,5:1) */

  /* — Màu tác vụ — */
  --kq-chinh: #1a5f8e;              /* nút chính, liên kết, tab chọn (6,8:1 trên trắng) */
  --kq-chinh-dam: #134a6f;          /* rê/nhấn nút chính; chữ mục đang chọn (8,0:1 trên --kq-chinh-nhat) */
  --kq-chinh-nhat: #e4eef6;         /* nền mục đang chọn */
  --kq-chinh-chu: #ffffff;          /* chữ trên nút chính */
  --kq-nhan: #0f7a75;               /* vạch đang chọn, vòng tiêu điểm, thanh kéo khi rê (5,2:1) — khách đè được */
  --kq-nhan-nhat: #dff1ef;
  --kq-nhan-chu: #ffffff;           /* chữ trên nền nhấn (ô chữ cái đầu) */

  /* — Bề mặt — */
  --kq-nen-ud: #d6dde4;             /* nền ứng dụng = màu KHE giữa các vùng */
  --kq-nen-vung: #ffffff;           /* nền vùng */
  --kq-nen-phu: #f4f6f8;            /* đầu bảng, thanh tác vụ, đầu nhóm */
  --kq-nen-dh: #f7f9fb;             /* điều hướng trái */
  --kq-nen-o: #ffffff;              /* nền ô nhập, nút thường */
  --kq-nen-noi: #ffffff;            /* nền lớp nổi (menu, hộp thoại, thông báo) */
  --kq-nen-tat: #f6f7f9;            /* nền nút không dùng được */
  --kq-vien: #d3dae1;               /* viền trang trí, đường kẻ bảng */
  --kq-vien-nhat: #e7ebef;          /* kẻ dòng bảng */
  --kq-vien-dam: #848f9b;           /* viền ô nhập, nút: 3,3:1 (WCAG 1.4.11) */
  --kq-noi-cay: #b5bec8;            /* đường nối cây, điều hướng (trang trí); lệch ADR 1 đơn vị kênh đỏ — xem DUI1_BAO_CAO mục 4 */
  --kq-dong-di: #f0f5f9;            /* rê chuột dòng */
  --kq-dong-chon: #dde9f4;          /* dòng đã chọn */
  --kq-man-che: rgba(14, 47, 68, .38);

  /* — Chữ — */
  --kq-chu: #17232e;                /* 16,0:1 */
  --kq-chu-2: #3f4d5a;              /* 8,7:1 */
  --kq-chu-mo: #5a6672;             /* 5,9:1 — nhỏ nhất cho chữ */
  --kq-chu-tat: #6b7682;            /* chữ nút không dùng được (4,6:1 trên --kq-nen-tat) */

  /* — Trạng thái (luôn kèm biểu tượng + chữ) — */
  --kq-tot: #1b6e37;      --kq-tot-nen: #e2f2e6;
  --kq-canh-bao: #7a4b00; --kq-canh-bao-nen: #fff1cc; --kq-canh-bao-vien: #e0a526;
  --kq-xau: #b42318;      --kq-xau-nen: #fde7e5;      --kq-xau-vien: #e0a8a2;
  --kq-tin: #1a5f8e;      --kq-tin-nen: #e4eef6;
  --kq-chua-do: #5a6672;  --kq-chua-do-nen: #eef1f4;  --kq-chua-do-ke: #f6f8fa;
  --kq-huy-hieu: #c62828; --kq-huy-hieu-chu: #ffffff; /* số chưa đọc: 5,6:1 */

  /* — Biểu đồ: bảng màu loại theo THỰC THỂ (thứ tự cố định, đã kiểm CVD) + trạng thái — */
  --kq-bd-1: #2a78d6; --kq-bd-2: #eb6834; --kq-bd-3: #1baf7a; --kq-bd-4: #eda100;
  --kq-bd-5: #e87ba4; --kq-bd-6: #008300; --kq-bd-7: #4a3aa7; --kq-bd-8: #e34948;
  --kq-bd-luoi: #e6eaee; --kq-bd-truc: #aab5c0; --kq-bd-cung-ky: #9aa6b2;
  --kq-bd-tot: #0ca30c; --kq-bd-canh-bao: #fab219; --kq-bd-nang: #ec835a; --kq-bd-xau: #d03b3b;

  /* — Khoảng cách — */
  --kq-khe: 3px;                    /* khe giữa vùng: 2–4px theo chuẩn dự án */
  --kq-k1: 4px; --kq-k2: 8px; --kq-k3: 12px; --kq-k4: 16px; --kq-k5: 24px;

  /* — Chữ: phông HỆ THỐNG — */
  --kq-phong: "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kq-phong-ma: "Cascadia Mono", Consolas, "Noto Sans Mono", "DejaVu Sans Mono", monospace;
  --kq-co-1: 12px; --kq-co-2: 13px; --kq-co-3: 14px; --kq-co-4: 16px; --kq-co-5: 18px; --kq-co-6: 22px; --kq-co-7: 28px; --kq-co-8: 34px;

  /* — Hình — */
  --kq-bo-1: 2px; --kq-bo-2: 4px; --kq-bo-3: 6px;
  --kq-bong-noi: 0 6px 24px rgba(14, 47, 68, .18), 0 1px 3px rgba(14, 47, 68, .12);
  --kq-cao-thanh-tren: 44px; --kq-cao-trang-thai: 24px; --kq-cao-tieu-de: 40px; --kq-cao-dau-vung: 36px;
  --kq-cao-dong: 32px; --kq-cao-dau-bang: 34px; --kq-cao-nut: 30px; --kq-cao-nut-nho: 26px;
  --kq-rong-dh: 248px; --kq-rong-dh-gon: 52px; --kq-rong-ngan-keo: 280px;
  --kq-rong-cay: 300px;             /* bề rộng mặc định của vùng cây con (dock trái/phải) */

  /* — Lớp (z) — */
  --kq-z-phu-khoan: 20; --kq-z-menu: 50; --kq-z-ngan-keo: 60; --kq-z-hop-thoai: 150; --kq-z-goi-y: 200; --kq-z-thong-bao: 300;

  /* — Chuyển động: 120–180ms; tắt hết khi prefers-reduced-motion (kq-khung.css) — */
  --kq-nhanh: 120ms; --kq-vua: 180ms; --kq-ngan-keo-tg: 200ms;

  color-scheme: light;
}

/* ============================ CHẾ ĐỘ TỐI (ADR-0022 2.5.2) ============================
   Cùng tên biến. Bảng màu chuỗi biểu đồ chọn riêng cho nền tối (không tự đảo màu). Tương phản kiểm bằng luật TUONG_PHAN_KEM. */
html.che-do-toi {
  --kq-thuong-hieu: #0b2333;
  --kq-thuong-hieu-2: #16364d;
  --kq-thuong-hieu-chu: #ffffff;
  --kq-thuong-hieu-chu-2: #a9bfd0;

  --kq-chinh: #5aa7dc;
  --kq-chinh-dam: #8cc4ea;
  --kq-chinh-nhat: #1b3348;
  --kq-chinh-chu: #0b1520;
  --kq-nhan: #3fb9b0;
  --kq-nhan-nhat: #143a38;
  --kq-nhan-chu: #0f1720;

  --kq-nen-ud: #0f1720;
  --kq-nen-vung: #17212b;
  --kq-nen-phu: #1d2833;
  --kq-nen-dh: #141d26;
  --kq-nen-o: #111a23;
  --kq-nen-noi: #1d2833;
  --kq-nen-tat: #1a242e;
  --kq-vien: #2c3a47;
  --kq-vien-nhat: #243240;
  --kq-vien-dam: #6b7a88;
  --kq-noi-cay: #3a4a59;
  --kq-dong-di: #1c2732;
  --kq-dong-chon: #1f3a52;
  --kq-man-che: rgba(0, 0, 0, .55);

  --kq-chu: #e6edf3;
  --kq-chu-2: #b8c4cf;
  --kq-chu-mo: #9aa7b3;            /* ≥ 4,5:1 trên MỌI nền tối kể cả dòng đang chọn (#8d9aa6 cũ chỉ 4,09:1 trên --kq-dong-chon) */
  --kq-chu-tat: #8d9aa6;

  --kq-tot: #6fd08c;      --kq-tot-nen: #16331f;
  --kq-canh-bao: #f2c14e; --kq-canh-bao-nen: #3a2e0f; --kq-canh-bao-vien: #b8862b;
  --kq-xau: #ff8a80;      --kq-xau-nen: #3d1a18;      --kq-xau-vien: #8a3a33;
  --kq-tin: #8cc4ea;      --kq-tin-nen: #1b3348;
  --kq-chua-do: #9aa7b3;  --kq-chua-do-nen: #202a34;  --kq-chua-do-ke: #212d39;
  --kq-huy-hieu: #c62828; --kq-huy-hieu-chu: #ffffff;

  --kq-bd-1: #3987e5; --kq-bd-2: #d95926; --kq-bd-3: #199e70; --kq-bd-4: #c98500;
  --kq-bd-5: #d55181; --kq-bd-6: #008300; --kq-bd-7: #9085e9; --kq-bd-8: #e66767;
  --kq-bd-luoi: #26323d; --kq-bd-truc: #4b5a68; --kq-bd-cung-ky: #7d8a97;
  --kq-bd-tot: #3fbf5a; --kq-bd-canh-bao: #f2c14e; --kq-bd-nang: #f09a72; --kq-bd-xau: #ff6b6b;

  --kq-bong-noi: 0 6px 24px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);

  color-scheme: dark;
}

/* Bản in luôn sáng (ADR-0022 2.1). */
@media print {
  html.che-do-toi {
    --kq-nen-ud: #ffffff; --kq-nen-vung: #ffffff; --kq-nen-phu: #f4f6f8; --kq-chu: #17232e; --kq-chu-2: #3f4d5a; --kq-chu-mo: #5a6672;
    --kq-vien: #d3dae1; color-scheme: light;
  }
}