/* ================================================================
   BỘ NHẬN DIỆN GAUUX — biến dùng chung
   Nguồn: design/brand.html. Xem THUONG-HIEU.md.

   File này CHỈ chứa token và font. Không có layout, không có component —
   để mọi trang dùng chung mà không kéo theo kiểu của trang khác.

   Tỉ lệ 70·20·10: nhiều nền tối, một chút cam, rất ít gradient.
   Gradient CHỈ dùng cho thứ liên quan trực tiếp đến AI.
   ================================================================ */

/* ---------------- Font ----------------

   Sora KHÔNG có bộ ký tự tiếng Việt — không có dải U+1EA0-1EF9, tức là thiếu
   ạ ả ấ ầ ệ ộ ừ... Đặt Sora cho tiêu đề tiếng Việt thì chữ thường một font,
   dấu rơi sang font dự phòng, nhìn vỡ.

   Nên: Sora chỉ dùng cho chữ ký thương hiệu "GAUUX" (toàn chữ Latin).
   Tiêu đề tiếng Việt dùng Space Grotesk, có đủ dấu.

   Ba font tự host trong /assets/fonts — xem scripts/tai-font.js. */

:root{
  --font-hieu:   'Sora', 'Space Grotesk', system-ui, sans-serif;
  --font-tieu-de:'Space Grotesk', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-than:   'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-so:     'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ================================================================
   TÔNG TỐI — mặc định, đúng bộ nhận diện
   Dùng cho trang công khai: trang chủ, pháp lý, đăng nhập.
   ================================================================ */

:root, [data-th="toi"]{
  /* Bảng màu lấy ĐÚNG `design/gauux-toan-bo.html` — bản đặc tả chính.
     `BAT-DAU-TU-DAY.md`: "dùng thẳng bộ nhận diện trong gauux-toan-bo.html ngay
     từ đầu — đừng dựng bằng màu cũ rồi sơn lại."

     Đã có một vòng sai: file này từng bị kéo về #0D0C0A (ám nâu ấm) cho khớp
     `public/index.html`. Nhưng trang chủ mới là cái lệch — cả ba file v3
     (toan-bo, menu-v3, khung-chat) đều dùng #0F0D15 ám tím. Nên trang chủ được
     sửa theo đây, không phải ngược lại. VẪN CHỈ MỘT BẢNG, và nó ở file này. */
  --obsidian:#0F0D15;
  --onyx:#1B1726;
  --orange:#FF6A00;
  --ember:#FFA361;
  --iris:#7B61FF;
  --aqua:#22D3C5;
  --moon:#F4F2F7;

  /* Xám ĐẶC, không phải trắng pha alpha.
     rgba(moon,.60) chồng lên nền tím ra một màu xỉn và trôi theo từng lớp nền
     đặt dưới nó — chữ trong ô nổi lại nhạt hơn chữ trên nền chính. Bản đặc tả
     khai màu đặc chính vì vậy. */
  --ash:#9A94A8;
  --ash2:#6E687C;
  --line:rgba(255,255,255,.09);
  --grad:linear-gradient(135deg,#FF6A00 0%,#7B61FF 52%,#22D3C5 100%);

  /* Đỏ báo lỗi — bộ nhận diện không có, chủ shop chốt #FF4D5E.
     Bắt buộc phải phân biệt được "guardrail chặn" với "cần chú ý". */
  --do:#FF4D5E;

  /* Token theo vai trò — thứ giao diện thật cần, brand.html chưa có */
  --nen:var(--obsidian);
  --be-mat:var(--onyx);
  --be-mat-2:#241F30;              /* nổi hơn một bậc: ô nhập, hàng hover */
  --be-mat-3:#2E2840;              /* nổi hai bậc: nền khung chat */
  --chu:var(--moon);
  --chu-2:var(--ash);
  --chu-3:var(--ash2);             /* chú thích mờ, placeholder */
  --vien:var(--line);
  --vien-2:rgba(255,255,255,.17);  /* viền rõ hơn: ô nhập, thẻ được chọn */

  --cam-hover:#FF8229;             /* orange 400 */
  --cam-mo:rgba(255,106,0,.10);    /* nền nhạt cho nhãn, vùng nhấn */
  --iris-mo:rgba(123,97,255,.16);
  --aqua-mo:rgba(34,211,197,.14);
  --do-mo:rgba(255,77,94,.14);
  --ember-mo:rgba(255,163,97,.14);

  /* Chữ đặt TRÊN nền cam hoặc gradient.
     Bắt buộc là obsidian, không được trắng: trắng trên #FF6A00 chỉ đạt 2.87:1,
     trượt chuẩn. Obsidian đạt 6.72:1. brand.html ghi rõ điều này. */
  --tren-cam:var(--obsidian);

  --bong:0 1px 2px rgba(0,0,0,.4);
  --bong-lon:0 18px 50px rgba(0,0,0,.55);
  --bong-cam:0 0 0 1px rgba(255,106,0,.45), 0 18px 50px rgba(255,106,0,.22);

  --r:10px;
  --r-lon:16px;
}

/* ================================================================
   TÔNG SÁNG — cho ỨNG DỤNG (hộp thư, đơn hàng, đào tạo)

   Vì sao có: nhân viên trực chat ngồi nhìn 8 tiếng. Nền tối bão hoà cả ngày
   gây mỏi mắt. Trang công khai giữ tông tối theo bộ nhận diện; ứng dụng mặc
   định nền sáng, đổi được.

   Cam và aqua phải ĐẬM LẠI trên nền sáng, nếu không không đủ tương phản:
     #FF6A00 trên trắng = 2.9:1  -> trượt
     #B24A00 trên trắng = 5.9:1  -> đạt AA
     #22D3C5 trên trắng = 1.9:1  -> trượt nặng
     #0E8478 trên trắng = 4.8:1  -> đạt AA
   Nền nút vẫn giữ #FF6A00 nguyên bản với chữ obsidian — cặp đó đạt 6.72:1.
   ================================================================ */

[data-th="sang"]{
  --obsidian:#171512;              /* giờ là màu CHỮ, không phải nền */
  --onyx:#FFFFFF;
  --orange:#FF6A00;                /* giữ nguyên cho NỀN nút */
  --ember:#B24A00;                 /* orange 700 — dùng cho chữ, đủ tương phản */
  --iris:#5B45D6;
  --aqua:#0E8478;
  --moon:#171512;
  --ash:#635E56;
  --line:rgba(23,21,18,.10);
  --grad:linear-gradient(135deg,#FF6A00 0%,#7B61FF 52%,#22D3C5 100%);
  --do:#C42D3C;

  --nen:#F8F7F4;
  --be-mat:#FFFFFF;
  --be-mat-2:#F1EFEA;
  --be-mat-3:#E9E6DF;      /* nền khung chat: ấm hơn để bong bóng trắng nổi lên */
  --chu:#171512;
  --chu-2:#635E56;
  --chu-3:rgba(23,21,18,.45);
  --vien:rgba(23,21,18,.10);
  --vien-2:rgba(23,21,18,.18);

  --cam-hover:#DB5B00;
  --cam-mo:rgba(255,106,0,.10);
  --iris-mo:rgba(91,69,214,.10);
  --aqua-mo:rgba(14,132,120,.10);
  --do-mo:rgba(196,45,60,.10);
  --ember-mo:rgba(178,74,0,.10);

  --tren-cam:var(--obsidian);      /* vẫn là chữ tối trên nền cam */

  --bong:0 1px 2px rgba(23,21,18,.06);
  --bong-lon:0 12px 40px rgba(23,21,18,.12);
  --bong-cam:0 0 0 1px rgba(255,106,0,.35), 0 12px 32px rgba(255,106,0,.18);
}

/* ================================================================
   Ý NGHĨA MÀU — ánh xạ từ hệ cũ, giữ nguyên nghĩa

   Đây là phần quan trọng nhất khi áp cho hộp thư: nhìn màu bong bóng phải
   biết ngay ai viết câu đó. Không phải trang trí — nhân viên cần nó khi truy
   lại một câu trả lời sai.
   ================================================================ */

:root, [data-th="toi"], [data-th="sang"]{
  --y-nguoi:var(--iris);           /* tin do NGƯỜI gửi */
  --y-ai:var(--aqua);              /* thứ do AI sinh ra */
  --y-xong:var(--aqua);            /* đã xong, đã gửi, an toàn */
  --y-chu-y:var(--ember);          /* cần chú ý, ghi chú nội bộ */
  --y-chan:var(--do);              /* bị chặn, phải chuyển người */
  --y-chinh:var(--orange);         /* nút chính */
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ================================================================
   BONG BONG HOI THOAI

   Ba ben phai phan biet duoc o khoang cach mot sai tay: khach, AI, va nguoi.
   Do bang `node scripts/kiem-tuong-phan.js`.

   AI gui phan lon tin nen mau cua AI phai DIU — no chiem dien tich lon nhat
   man hinh. Nguoi gui thi hiem, va la luc dang can chu y nhat (mot nhan vien
   vua nhay vao doan chat), nen de nen DAM cho no dap vao mat.
   ================================================================ */

[data-th="toi"], :root{
  /* Độ sáng tăng dần khách -> AI -> người: 0.013 · 0.074 · 0.113.
     Cùng lúc khác cả sắc (trung tính · ngọc · tím) và khác màu chữ. */
  --bb-khach:#241F30;              /* nổi hơn nền khung chat một bậc */
  --bb-khach-chu:var(--moon);
  --bb-khach-vien:rgba(255,255,255,.08);
  --bb-ai:#17564E;                 /* ngọc vừa: nằm GIỮA khách và người */
  --bb-ai-chu:#E6FBF8;
  --bb-ai-vien:rgba(34,211,197,.34);
  --bb-nguoi:#5B45D6;              /* tím đậm, đập vào mắt */
  --bb-nguoi-chu:#F4F2F7;
  --bb-nguoi-vien:#6B57E0;
  --thr-nen:var(--nen);
}

[data-th="sang"]{
  --bb-khach:#FFFFFF;
  --bb-khach-chu:var(--chu);
  --bb-khach-vien:rgba(23,21,18,.10);
  --bb-ai:#D9F7F3;
  --bb-ai-chu:#083A35;
  --bb-ai-vien:#9FE3DB;
  --bb-nguoi:#4E3BB0;
  --bb-nguoi-chu:#F4F2F7;
  --bb-nguoi-vien:#4E3BB0;
  --thr-nen:var(--be-mat-3);
}