/* css/token.css — BẢNG MÀU DÙNG CHUNG, MỘT NGUỒN SỰ THẬT (Đợt 1 giao diện lớp, 12/11/2026).
   Trước đây là khối <style> nội tuyến trong ui/components/_bang_mau.html (chèn ~5 KB vào MỌI trang); nay là tệp tĩnh
   được trình duyệt đệm. _bang_mau.html chỉ còn thẻ <link> tới tệp này — lịch sử và lý do chọn từng giá trị ghi ở đó.

   Ba tầng:
     1. Màu gốc      --mau-*            đổi màu ở đây, không ở đâu khác;
     2. Bí danh      --au-*, --cl-*     tên cũ còn hàng trăm chỗ gọi, chỉ trỏ về tầng 1;
                     (Đợt 8 giao diện lớp, 15/11/2026: 19 bí danh không còn chỗ nào dùng trong toàn bộ mã đã GỠ —
                     bộ "au": blue, green, purple, red, shadow; bộ "cl": accent2, brand-mid, green, hero-top, info,
                     info-bg, light, purple, success, success-bg, surface, warning, warning-bg, yellow.
                     Đừng thêm lại: mã mới dùng thẳng --mau-*.)
     3. Dữ liệu      --bd-*             biểu đồ, Dashboard.
   Tầng theo khu (--lh-* của lớp học, --fc-* của biểu mẫu, --dh-* của điều hành) nằm ở tệp riêng và cũng trỏ về đây.

   CHẾ ĐỘ TỐI: khối :root[data-giao-dien="toi"] ở cuối tệp khai lại các biến; thành phần không phải viết lại.
   Thuộc tính data-giao-dien do đoạn mã đầu trang (ui/components/_giao_dien.html) đặt theo lựa chọn của người dùng
   (Theo thiết bị / Sáng / Tối). Màu viết cứng còn sót trong CSS / template được phủ bằng css/toi.css
   (sinh tự động: python manage.py sinh_giao_dien_toi). */
:root{
  /* ── Màu gốc ─────────────────────────────────────────────── */
  --mau-chu:        #1e293b;   /* chữ chính */
  /* Đợt 8 giao diện lớp (15/11/2026, kiểm trợ năng axe): #64748b chỉ đạt 4,25–4,37:1 trên nền trang (#f0f2f7), nền phụ
     (#f1f5f9) và nền chọn (#eff6ff) → đậm thêm một bậc, ≥ 4,79:1 trên mọi nền sáng của hệ thống (bằng --bd-chu-mo). */
  --mau-chu-mo:     #5f6b82;   /* chữ phụ, nhãn, siêu dữ liệu */
  --mau-vien:       #e3e6ec;
  --mau-nen:        #f8fafc;   /* nền trang */
  --mau-mat:        #ffffff;   /* nền thẻ, bảng, hộp thoại */

  --mau-chinh:      #1d4ed8;   /* hành động chính, liên kết */
  --mau-chinh-vua:  #2563eb;   /* nhấn phụ, viền ô nhập đang chọn */
  --mau-chinh-sang: #3b82f6;   /* biểu tượng, thanh tiến độ */
  --mau-chinh-dam:  #1e3a8a;   /* chữ trên nền xanh nhạt */
  --mau-chinh-nhat: #eff6ff;
  --mau-thuong-hieu:#071a4f;   /* xanh đậm của trường */

  --mau-tim:        #6366f1;   /* cặp với xanh ở dải màu, huy hiệu */
  --mau-tim-dam:    #7c3aed;

  --mau-dat:        #16a34a;   /* đạt, an toàn */
  --mau-dat-nen:    #f0fdf4;
  --mau-nhac:       #d97706;   /* cần chú ý */
  --mau-nhac-nen:   #fffbeb;
  --mau-loi:        #dc2626;   /* lỗi, xoá */
  --mau-loi-nen:    #fef2f2;
  --mau-tin:        #0891b2;   /* thông tin */
  --mau-tin-nen:    #ecfeff;

  /* ── Bổ sung Đợt 1 nền móng (2026-09): gom các bảng riêng --dh-*, --lh-*,
     --ud-* và mã màu viết cứng ở trang Sức khoẻ dữ liệu, Nhật ký của tôi,
     Sao lưu, Thùng rác về đây. Chỉ thêm vai trò mà bảng gốc CHƯA CÓ; giá trị
     lấy theo bản dùng ở nhiều trang nhất để mắt gần như không thấy đổi.
     Hệ thống chưa có chế độ tối dùng chung (chỉ bảng E của trang lớp học tự
     đổi màu), nên các biến dưới đây — như cả bảng — chỉ có bản sáng. */
  --mau-chu-2:      #475569;   /* chữ thân phụ: mô tả, nhãn ô nhập — đậm hơn chữ mờ */
  /* Đợt 8: #94a3b8 chỉ 2,56:1 trên nền trắng mà vẫn được dùng làm CHỮ (tiêu đề cột, nhãn nhóm, gợi ý) → #64748b
     (4,76:1 trên trắng, 4,55:1 trên nền thẻ #f8fafc). Cần nhạt hơn nữa cho thứ KHÔNG phải chữ thì dùng --mau-vien-dam. */
  --mau-chu-nhat:   #64748b;   /* chữ nhạt nhất: gợi ý, dòng trống, tiêu đề cột nhỏ */
  --mau-vien-dam:   #cbd5e1;   /* viền ô nhập, nút viền */
  --mau-mat-2:      #f1f5f9;   /* nền phụ: đầu bảng, thẻ đếm, vạch ray, đường kẻ nhạt */
  --mau-thuong-hieu-dam: #050f2e;
  --mau-do-truong:  #a00d24;   /* đỏ HPU2 — thương hiệu, mốc "hôm nay"; KHÔNG dùng làm màu lỗi */
  --mau-do-truong-nen: #fbe9ec;
  --mau-cham:       #4f46e5;   /* chàm — màu nhấn của khu Sao lưu / Thùng rác */
  --mau-cham-dam:   #3730a3;   /* chữ trên nền chàm nhạt, nút chàm khi rê chuột */
  --mau-cham-nhat:  #eef2ff;
  --mau-cham-vien:  #c7d2fe;
  /* Chữ trạng thái đặt trên nền nhạt (-nen): bản gốc (#16a34a…) chỉ đạt
     ~3:1 nên chỉ hợp cho chấm, biểu tượng; chữ dùng bản -dam (≥ 4,5:1). */
  --mau-dat-dam:    #15803d;
  --mau-dat-vien:   #bbf7d0;
  --mau-nhac-dam:   #b45309;
  --mau-nhac-vien:  #fde68a;
  --mau-loi-dam:    #b91c1c;
  --mau-loi-vien:   #fecaca;

  --bo-goc:         12px;
  --bo-goc-nho:     8px;
  --do-noi:         0 1px 4px rgba(0, 0, 0, .06);

  /* ── Bộ tên "au-" — Học liệu, các biểu mẫu, quản lý đề… ── */
  --au-text:   var(--mau-chu);
  --au-muted:  var(--mau-chu-mo);
  --au-border: var(--mau-vien);
  --au-bg:     var(--mau-nen);
  --au-card:   var(--mau-mat);
  --au-blue2:  var(--mau-chinh-vua);
  --au-blue3:  var(--mau-chinh-sang);
  --au-radius: var(--bo-goc);
  /* Dải xanh→đỏ là dải của trường, dùng ở đầu mọi biểu mẫu. */
  --au-grad:   linear-gradient(135deg, var(--mau-chinh) 0%, var(--mau-chinh-vua) 50%, var(--mau-loi) 100%);
  --au-grad2:  linear-gradient(135deg, var(--mau-chinh) 0%, var(--mau-chinh-vua) 100%);

  /* ── Bộ tên "cl-" — Giáo trình, Lớp học ── */
  --cl-text:        var(--mau-chu);
  --cl-muted:       var(--mau-chu-mo);
  --cl-border:      var(--mau-vien);
  --cl-bg:          var(--mau-nen);
  --cl-white:       var(--mau-mat);
  --cl-brand:       var(--mau-thuong-hieu);
  --cl-brand-dark:  var(--mau-thuong-hieu-dam);
  --cl-brand-light: rgba(7, 26, 79, .08);
  --cl-accent:      var(--mau-chinh-sang);
  --cl-danger:      var(--mau-loi);
  --cl-danger-bg:   rgba(220, 38, 38, .09);
  --cl-red:         var(--mau-loi);
  --cl-radius:      var(--bo-goc);
  --cl-radius-sm:   var(--bo-goc-nho);

  /* ── Bảng màu DỮ LIỆU — Dashboard, biểu đồ (Đợt A, 2026-09) ──────────
     Năm nhóm, mỗi nhóm một việc; đừng dùng lẫn:
     1. Phân loại (lớp, vai trò, loại học liệu): bộ Okabe–Ito — người mù
        màu đỏ–lục vẫn phân biệt được. Tối đa 6 nhóm, dùng đúng thứ tự.
     2. Tuần tự (mật độ, lưới nhiệt, lịch): một sắc navy nhạt → đậm.
     3. Trạng thái (tốt / cần chú ý / lỗi / thông tin): chỉ cho trạng thái,
        luôn kèm chữ. Bản "-chu" đủ tương phản ≥ 4,5:1 để làm màu CHỮ.
     4. Mức rủi ro EWS: 4 bậc ấm dần — thống nhất mọi trang.
     5. Trung tính cho chữ/lưới. */
  --bd-cat-1: #0072B2;  --bd-cat-2: #E69F00;  --bd-cat-3: #009E73;
  --bd-cat-4: #CC79A7;  --bd-cat-5: #56B4E9;  --bd-cat-6: #D55E00;
  --bd-seq-0: #EEF1F6;  --bd-seq-1: #C9D3E8;  --bd-seq-2: #8FA1CC;
  --bd-seq-3: #4D63A0;  --bd-seq-4: #1B2B55;
  --bd-tot:  #0F7B6C;   --bd-tot-nen:  #DDF2EE;
  --bd-nhac: #A8620A;   --bd-nhac-nen: #FBEFD9;
  --bd-loi:  #B42318;   --bd-loi-nen:  #FBE4E1;
  --bd-tin:  #1D4ED8;   --bd-tin-nen:  #E4ECFD;
  --bd-ews-1: #0F7B6C;  --bd-ews-2: #C98A12;  --bd-ews-3: #C0392B;  --bd-ews-4: #6B0F1A;
  --bd-navy: #1B2B55;
  --bd-chu:  #16213A;   --bd-chu-2: #46526B;  --bd-chu-mo: #5F6B82;   /* ≥ 5:1 trên nền trắng */
  --bd-vien: #DDE2EA;   --bd-vien-2: #EAEEF4; --bd-luoi: #E6EAF1;
  --bd-nen:  #F3F5F9;   --bd-mat: #FFFFFF;    --bd-mat-2: #F7F8FB;
}

/* ── Bổ sung Đợt 1 giao diện lớp (12/11/2026) ───────────────────────────────────────
   Ba vai trò mà chế độ tối cần tách khỏi màu gốc (ở chế độ sáng giá trị KHÔNG đổi):
   --mau-tren-mau          chữ đặt TRÊN nền màu nhấn (nút chính, nhãn đạt / lỗi …): sáng = trắng; tối = mực đậm,
                           vì ở chế độ tối các màu nhấn được làm sáng lên để còn đọc được khi làm màu CHỮ.
   --mau-thuong-hieu-chu   xanh đậm của trường khi dùng làm màu CHỮ (tiêu đề): tối phải sáng lên mới thấy.
   --bd-navy-chu           như trên cho navy của Dashboard.
   --phong                 họ phông của cả hệ thống (Be Vietnam Pro tự lưu trữ — css/phong.css). */
:root{
  --mau-tren-mau:        #ffffff;
  --mau-thuong-hieu-chu: var(--mau-thuong-hieu);
  --bd-navy-chu:         var(--bd-navy);
  --phong: 'Be Vietnam Pro','Be Vietnam Pro Fallback','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ═══════════════════════════ CHẾ ĐỘ TỐI ═══════════════════════════
   Giá trị lấy theo bảng "Đêm học" (bảng màu E cũ của trang lớp, đã kiểm tương phản ≥ 4,5:1 cho chữ) để lớp học và
   phần còn lại của hệ thống cùng một nền tối. Quy tắc:
   · nền / mặt / viền: tối dần theo thứ tự nen < mat < mat-2 < vien < vien-dam;
   · màu nhấn và trạng thái (chinh, dat, nhac, loi, tin, tim, cham): làm SÁNG để đọc được khi là chữ, viền, biểu tượng;
     nơi dùng chúng làm NỀN thì chữ đổi sang --mau-tren-mau (css/toi.css tự sinh luật này);
   · bản "-dam" (chữ trên nền nhạt) sáng hơn nữa; bản "-nen" thành sắc tối; bản "-vien" thành sắc trung;
   · xanh đậm của trường (--mau-thuong-hieu) vẫn là NỀN đậm cho chữ trắng (thanh bên, đầu thẻ);
   · dải màu đầu biểu mẫu (--au-grad*) giữ mã cố định để chữ trắng trên dải vẫn đạt tương phản. */
:root[data-giao-dien="toi"]{
  color-scheme:dark;
  --mau-chu:        #dde3f0;
  --mau-chu-2:      #c0c8d8;
  --mau-chu-mo:     #a3acc0;
  --mau-chu-nhat:   #7c869c;
  --mau-vien:       #2a3249;
  --mau-vien-dam:   #3a4460;
  --mau-nen:        #0f1422;
  --mau-mat:        #171d2e;
  --mau-mat-2:      #1f2638;

  --mau-chinh:      #7ea5ff;
  --mau-chinh-vua:  #6f97fa;
  --mau-chinh-sang: #5f8af0;
  --mau-chinh-dam:  #a3bfff;
  --mau-chinh-nhat: #1c2742;
  --mau-thuong-hieu:     #16275e;
  --mau-thuong-hieu-dam: #0d1838;
  --mau-thuong-hieu-chu: #c7d4ff;
  --mau-tren-mau:   #0c1220;

  --mau-tim:        #a5a8ff;
  --mau-tim-dam:    #b894ff;

  --mau-dat:        #4cc38a;   --mau-dat-nen:  #16322a;   --mau-dat-dam:  #6fd6a3;   --mau-dat-vien:  #235c45;
  --mau-nhac:       #f5b04c;   --mau-nhac-nen: #3a2c17;   --mau-nhac-dam: #f7c06e;   --mau-nhac-vien: #6b4f1d;
  --mau-loi:        #ff7a7a;   --mau-loi-nen:  #3b1e22;   --mau-loi-dam:  #ff9a9a;   --mau-loi-vien:  #703038;
  --mau-tin:        #5fd0e6;   --mau-tin-nen:  #15303a;
  --mau-do-truong:  #ff6b81;   --mau-do-truong-nen: #3a1c26;
  --mau-cham:       #a5b4fc;   --mau-cham-dam: #c7d2fe;   --mau-cham-nhat: #232a4d;  --mau-cham-vien: #3b4680;

  --do-noi:         0 1px 4px rgba(0, 0, 0, .4);

  --au-grad:   linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #dc2626 100%);
  --au-grad2:  linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);

  --cl-brand-light: rgba(126, 165, 255, .12);
  --cl-danger-bg:   rgba(255, 122, 122, .14);

  /* Dữ liệu: phân loại Okabe–Ito làm sáng một bậc; thang tuần tự đảo chiều (đậm = nhiều vẫn là màu nổi nhất). */
  --bd-cat-1: #4da3d9;  --bd-cat-2: #f0b429;  --bd-cat-3: #2fc29a;
  --bd-cat-4: #e29cc4;  --bd-cat-5: #7cc6ee;  --bd-cat-6: #f08a4b;
  --bd-seq-0: #1f2638;  --bd-seq-1: #2f3d63;  --bd-seq-2: #4d63a0;
  --bd-seq-3: #8fa1cc;  --bd-seq-4: #c9d3e8;
  --bd-tot:  #4cc38a;   --bd-tot-nen:  #16322a;
  --bd-nhac: #f5b04c;   --bd-nhac-nen: #3a2c17;
  --bd-loi:  #ff7a7a;   --bd-loi-nen:  #3b1e22;
  --bd-tin:  #7ea5ff;   --bd-tin-nen:  #1c2742;
  --bd-ews-1: #4cc38a;  --bd-ews-2: #f5b04c;  --bd-ews-3: #ff7a7a;  --bd-ews-4: #ff4d6d;
  --bd-navy: #2c3f7a;   --bd-navy-chu: #c7d4ff;
  --bd-chu:  #dde3f0;   --bd-chu-2: #c0c8d8;  --bd-chu-mo: #a3acc0;
  --bd-vien: #2a3249;   --bd-vien-2: #232b40; --bd-luoi: #2a3249;
  --bd-nen:  #0f1422;   --bd-mat: #171d2e;    --bd-mat-2: #1b2233;

  /* Biến riêng của khung (css/aurora.css) còn viết mã cứng. */
  --bg-page:      var(--mau-nen);
  --border-mid:   var(--mau-vien);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.35);
  --shadow-md:  0 2px 12px rgba(0,0,0,.4);
  --shadow-lg:  0 6px 24px rgba(0,0,0,.5);
  --text-white: #ffffff;   /* aurora.css trỏ biến này về --mau-mat; trên nền đậm chữ phải trắng thật */
}