/* ============================================================
   tokens.css — thang khoảng cách, thang cỡ chữ, bảng màu.
   Mọi màn hình chỉ dùng biến khai báo ở đây.
   Màu dùng để báo trạng thái, không để trang trí.
   ============================================================ */

:root {
  /* --- Thang khoảng cách (bậc 4 px) --------------------------------- */
  --kc-0: 0;
  --kc-1: 2px;
  --kc-2: 4px;
  --kc-3: 6px;
  --kc-4: 8px;
  --kc-5: 12px;
  --kc-6: 16px;
  --kc-7: 20px;
  --kc-8: 24px;
  --kc-9: 32px;
  --kc-10: 40px;
  --kc-11: 48px;

  /* --- Thang cỡ chữ ------------------------------------------------- */
  --cc-1: 11px;   /* nhãn rất nhỏ, đơn vị trong ô số */
  --cc-2: 12px;   /* chú thích, dòng phụ trong bảng */
  --cc-3: 13px;   /* nhãn form, nút, chip */
  --cc-4: 14px;   /* chữ thân, ô bảng — cỡ nền */
  --cc-5: 16px;   /* chữ nổi, tiêu đề khối nhỏ */
  --cc-6: 18px;   /* tiêu đề khối */
  --cc-7: 22px;   /* tiêu đề trang */

  --dc-chat: 1.3;   /* dòng chật: tiêu đề, ô bảng */
  --dc-thuong: 1.5; /* dòng thường: đoạn văn */

  --dam-thuong: 400;
  --dam-vua: 500;
  --dam-manh: 600;

  /* --- Hình khối ----------------------------------------------------- */
  --bo-1: 3px;   /* chip, ô nhỏ */
  --bo-2: 5px;   /* nút, ô nhập */
  --bo-3: 7px;   /* khối, thẻ */
  --vien: 1px;

  --do-bong-noi: 0 4px 12px rgba(23, 21, 18, 0.13), 0 1px 2px rgba(23, 21, 18, 0.10);

  /* --- Kích thước cố định -------------------------------------------- */
  --cao-header: 48px;
  --cao-dai-canh-bao: 26px;
  --rong-dieu-huong: 224px;
  --cao-o-nhap: 32px;
  --cao-o-nhap-mobile: 44px;
  --cao-nut-mobile: 48px;

  /* --- Thời gian ------------------------------------------------------ */
  --nhanh: 90ms;
}

/* ============================================================
   Bảng màu — chủ đề sáng
   Nền trung tính hơi ấm để tránh vẻ xanh lạnh của template.
   ============================================================ */

:root,
:root[data-theme="light"] {
  --n-trang: #ffffff;
  --n-nen: #f6f5f2;          /* nền trang */
  --n-mat: #ffffff;          /* mặt khối, thẻ, bảng */
  --n-mat-2: #f1efea;        /* mặt chìm: đầu bảng, hàng sọc, ô đọc */
  --n-mat-3: #e7e4dd;        /* mặt chìm sâu hơn: thanh trượt, nền tắt */

  --v-nhat: #e3e0d8;         /* viền thường */
  --v-dam: #c8c3b7;          /* viền rõ: ô nhập, nút phụ */
  --v-tieu-diem: #2f5d8a;    /* viền vùng đang chọn bằng bàn phím */

  --ch-chinh: #232120;       /* chữ chính */
  --ch-phu: #5e5850;         /* chữ phụ, nhãn */
  --ch-mo: #8a8278;          /* chữ mờ: gợi ý, đơn vị, ghi chú */
  --ch-nguoc: #ffffff;       /* chữ trên nền đậm */
  --ch-lien-ket: #24567f;

  /* Nút chính dùng mực đen, không dùng màu thương hiệu */
  --nut-chinh-nen: #2b2724;
  --nut-chinh-nen-ho: #413b36;
  --nut-chinh-chu: #ffffff;

  /* Màu trạng thái: nền — viền — chữ */
  --tt-ok-nen: #e7f0e7;
  --tt-ok-vien: #b6cfb8;
  --tt-ok-chu: #2c6238;

  --tt-canh-nen: #fbf0dc;
  --tt-canh-vien: #e4cf9f;
  --tt-canh-chu: #8a6011;

  --tt-loi-nen: #fbe9e6;
  --tt-loi-vien: #eec2ba;
  --tt-loi-chu: #a33526;

  --tt-tin-nen: #e8eff6;
  --tt-tin-vien: #b9cde0;
  --tt-tin-chu: #2c5680;

  --tt-cho-nen: #eeece7;     /* trung tính: chưa bắt đầu, nháp, không áp dụng */
  --tt-cho-vien: #d3cec3;
  --tt-cho-chu: #5e5850;

  --tt-ngoai-nen: #eceaf2;   /* mất mạng, làm việc ngoại tuyến */
  --tt-ngoai-vien: #ccc7da;
  --tt-ngoai-chu: #514a6b;

}

/* ============================================================
   Bảng màu — chủ đề tối
   ============================================================ */

:root[data-theme="dark"] {
  --n-trang: #1b1a18;
  --n-nen: #141311;
  --n-mat: #1e1d1b;
  --n-mat-2: #262421;
  --n-mat-3: #322f2b;

  --v-nhat: #333029;
  --v-dam: #4b473f;
  --v-tieu-diem: #8fb4d8;

  --ch-chinh: #ece9e3;
  --ch-phu: #b3aca1;
  --ch-mo: #8b8478;
  --ch-nguoc: #1b1a18;
  --ch-lien-ket: #9dbfdf;

  --nut-chinh-nen: #e8e4dc;
  --nut-chinh-nen-ho: #fffdf7;
  --nut-chinh-chu: #201e1c;

  --tt-ok-nen: #1e2c20;
  --tt-ok-vien: #3a5740;
  --tt-ok-chu: #93c79b;

  --tt-canh-nen: #322713;
  --tt-canh-vien: #5f4a1f;
  --tt-canh-chu: #e0b761;

  --tt-loi-nen: #34201c;
  --tt-loi-vien: #653a31;
  --tt-loi-chu: #e79e90;

  --tt-tin-nen: #1c2732;
  --tt-tin-vien: #354c63;
  --tt-tin-chu: #9cc0e2;

  --tt-cho-nen: #26241f;
  --tt-cho-vien: #423e36;
  --tt-cho-chu: #b3aca1;

  --tt-ngoai-nen: #24222c;
  --tt-ngoai-vien: #413c52;
  --tt-ngoai-chu: #b6aecd;

  --do-bong-noi: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);

}