/* ===== anatomy · token v2 · nguồn: work/uiux/design-tokens.md ===== */
:root {
  color-scheme: light dark;
  /* --- màu giao diện (nền sáng) --- */
  --nen: #E3EAE7;            /* nền trang */
  --nen-phu: #F7FAF9;        /* thẻ, bảng lớp, thanh công cụ */
  --lop-noi: #FFFFFF;        /* lớp nổi: menu nhấn giữ, hộp danh sách đã ẩn, gợi ý */
  --chu: #12201C;
  --chu-mo: #4A5C56;
  --nhan: #0A6B63;           /* nhấn duy nhất của giao diện */
  --chu-tren-nhan: #FFFFFF;
  --nhan-hover: #08584F;
  --nhan-bam: #064740;
  --nhan-nen: #E2F0EE;       /* nền mục đang chọn — đặc, đo được tương phản */
  --vien: #C5D2CD;           /* đường chia, viền thẻ */
  --vien-o: #6B7F78;         /* viền thành phần bấm được (≥3:1) */
  --loi: #B42318;  --loi-nen: #FDECEA;
  --canh-bao: #8A5A00;  --canh-bao-nen: #FBF1DC;
  --thanh-cong: #1F7A3D;
  --bong-the: 0 1px 2px rgba(18, 32, 28, 0.08), 0 4px 12px rgba(18, 32, 28, 0.06);
  --bong-noi: 0 12px 32px rgba(18, 32, 28, 0.18), 0 2px 6px rgba(18, 32, 28, 0.10);

  /* --- sân khấu 3D: MỘT bộ màu cho cả hai chế độ (khăn mổ trong phòng tối) --- */
  --san-khau-tam: #24423B;   /* tâm quầng sáng sau mô hình */
  --san-khau-mep: #0C1715;   /* mép sân khấu = màu sương */
  --san-khau: radial-gradient(120% 90% at 50% 38%, var(--san-khau-tam) 0%, #142A25 48%, var(--san-khau-mep) 100%);
  --chu-tren-san-khau: #EAF2EF;
  --chu-mo-tren-san-khau: #B7C9C3;
  --nhan-tren-san-khau: #5FE0CF;       /* chi tiết đang chọn, đường chỉ dẫn, vòng focus + nút chính trên sân khấu */
  --nhan-tren-san-khau-hover: #84EADD;
  --chu-tren-nhan-san-khau: #04201C;   /* chữ trên nút chính đặt trên sân khấu — giống nhau ở hai chế độ */
  --lop-tren-san-khau: rgba(11, 20, 18, 0.80);   /* tấm kính: nút, nhãn, thanh trên sân khấu */
  --vien-tren-san-khau: rgba(234, 242, 239, 0.16);
  --mo-kinh: blur(14px) saturate(1.2);           /* tắt trên điện thoại yếu, xem "Hiệu năng" */

  /* --- chữ --- */
  --font-tieu-de: Literata, "Noto Serif", Georgia, "Times New Roman", serif;
  --font-noi-dung: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tinh-nang-chu: "liga" 0, "calt" 0, "clig" 0;   /* bắt buộc: Be Vietnam Pro vỡ chữ "hị" khi bật ligature */
  --co-chu-nho: 13px;  --co-chu-phu: 14px;  --co-chu-nen: 16px;  --co-chu-vua: 20px;
  --co-chu-lon: 25px;  --co-chu-rat-lon: 31px;  --co-chu-man: clamp(34px, 6vw, 61px);  /* chỉ câu mở trang chủ */
  --gian-dong: 1.5;  --gian-dong-tieu-de: 1.15;

  /* --- giãn cách: một thang --- */
  --gc-1: 4px; --gc-2: 8px; --gc-3: 16px; --gc-4: 24px; --gc-5: 40px; --gc-6: 64px; --gc-7: 104px;

  /* --- bo góc: hai giá trị + viên thuốc cho chip --- */
  --bo-goc: 10px;  --bo-goc-lon: 18px;  --bo-goc-tron: 999px;

  /* --- kích thước --- */
  --vung-cham: 44px;  --cao-thanh-cong-cu: 56px;  --cao-dong-nguon: 44px;
  --rong-bang-lop: 320px;  --rong-the: 380px;

  /* --- CHUYỂN ĐỘNG: một chuỗi "bay tới → soi sáng → chỉ dẫn" --- */
  --tg-1: 90ms;     /* đổi màu khi rê, bấm nút */
  --tg-2: 160ms;    /* hiện/ẩn gợi ý, chip, menu nhấn giữ */
  --tg-3: 240ms;    /* đường chỉ dẫn vẽ ra, viền sáng bật lên */
  --tg-4: 360ms;    /* bảng lớp, thẻ, ngăn kéo trượt; chuyển màn */
  --tg-5: 600ms;    /* bóc lớp: tan dần + trượt ra */
  --tg-camera: 900ms;          /* camera bay tới (co giãn 600–1200 theo quãng bay) */
  --tg-camera-min: 600ms;  --tg-camera-max: 1200ms;
  --tg-xoay-cham: 0.06;        /* rad/giây — trang chủ xoay chậm */
  --dc-vao: cubic-bezier(0.2, 0, 0, 1);       /* thứ đi vào: nhanh rồi đậu êm */
  --dc-ra: cubic-bezier(0.3, 0, 1, 1);        /* thứ đi ra: chậm rồi biến nhanh */
  --dc-camera: cubic-bezier(0.65, 0, 0.35, 1);/* camera: êm hai đầu, không giật */
  --tre-noi-tiep: 120ms;       /* độ trễ giữa 3 nhịp bay → soi → chỉ dẫn */
  --tg-lap-cho: 1.6s;          /* vòng lặp chờ (vạch tải, khung xương) — giảm chuyển động: animation none */

  /* --- VẬT LIỆU 3D (giống nhau ở hai chế độ; đọc bằng getComputedStyle) --- */
  --vl-xuong: #E6DCC6;  --vl-khop: #9FB7CF;  --vl-co: #B5503C;  --vl-than-kinh: #E3C04A;
  --vl-tuan-hoan: #C22F3A;  --vl-noi-tang: #D99A8C;  --vl-bach-huyet: #6FBF8A;
  --vl-da: #E2B592;            /* FE-009 · lớp Da (ngoài cùng) — TOKEN MỚI, chờ uiux ghi vào CTR-004 */
  --vl-co-sac-dau: 350;  --vl-co-buoc-sac: 6;  --vl-co-so-buoc: 8;        /* hue 350° → 32° */
  --vl-co-bao-hoa: 0.42 0.58 0.74;  --vl-co-sang: 0.26 0.33 0.40 0.47 0.54;
  --vl-phan-1: #E69F00; --vl-phan-2: #56B4E9; --vl-phan-3: #19C39A; --vl-phan-4: #F0E442;
  --vl-phan-5: #7AA7FF; --vl-phan-6: #FF7F50; --vl-phan-7: #CC79A7; --vl-phan-8: #BBBBBB;
  --vl-mo-cung-lop: 0.28;   --vl-mo-lop-khac: 0.55;
  --vl-vien-co: 0.55;       --vl-vien-lop-khac: 0.25;
  --vl-phat-sang-chon: #5FE0CF;  --vl-phat-sang-chon-manh: 0.85;   /* viền fresnel chi tiết đang chọn */
  --vl-phat-sang-re: #FFE8B8;    --vl-phat-sang-re-manh: 0.45;     /* viền ấm khi rê chuột */
  --vl-nham: 0.7;  --vl-kim-loai: 0;
  --as-chinh: #FFFFFF;  --as-chinh-manh: 2.4;
  --as-phu: #D5E4FF;    --as-phu-manh: 0.9;
  --as-troi: #FFF3EC;   --as-dat: #4A3F3D;  --as-ban-cau-manh: 1.5;
  --as-phoi-sang: 1.0;                         /* ACES, tone mapping */
  --suong-gan: 4;  --suong-xa: 14;             /* đơn vị cảnh; màu sương = --san-khau-mep */
  --bong-dat-manh: 0.45;                       /* mặt phẳng gradient dưới chân, không dùng bản đồ bóng */

  /* --- ĐIỂM MỐC (ghim DOM trên bề mặt xương) --- */
  --ghim-cham: #FFF6E0;        /* chấm ghim: trắng ngà, viền tối để nổi trên cả xương sáng lẫn nền tối */
  --ghim-vien: #0C1715;
  --ghim-co: 12px;             /* đường kính chấm; vùng bấm luôn 44×44 */
  --ghim-mo-khuat: 0.35;       /* ghim bị xương khác che: mờ, vẫn bấm được */
  --ghim-chon: #5FE0CF;        /* = --nhan-tren-san-khau: ghim đang chọn + vòng */
  --ghim-hien-nhan-tu: 1.6;    /* đơn vị cảnh: camera gần hơn mức này thì hiện ghim + tên */
  --ghim-toi-da: 40;           /* trần số ghim cùng lúc (dữ liệu thật 910) */
}

/* Nền tối — theo hệ điều hành, trừ khi người xem đã chọn sáng */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nen: #0A1110;  --nen-phu: #16221F;  --lop-noi: #22312D;
    --chu: #E7EFEC;  --chu-mo: #9EB2AB;
    --nhan: #4FD6C4;  --chu-tren-nhan: #04201C;  --nhan-hover: #74E2D3;  --nhan-bam: #3BB8A8;
    --nhan-nen: #173430;
    --vien: #34443F;  --vien-o: #5E746D;
    --loi: #F2877C;  --loi-nen: #3A1F1C;  --canh-bao: #E3B54F;  --canh-bao-nen: #33290F;  --thanh-cong: #6BCB8B;
    --bong-the: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --bong-noi: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  --nen: #0A1110;  --nen-phu: #16221F;  --lop-noi: #22312D;
  --chu: #E7EFEC;  --chu-mo: #9EB2AB;
  --nhan: #4FD6C4;  --chu-tren-nhan: #04201C;  --nhan-hover: #74E2D3;  --nhan-bam: #3BB8A8;
  --nhan-nen: #173430;
  --vien: #34443F;  --vien-o: #5E746D;
  --loi: #F2877C;  --loi-nen: #3A1F1C;  --canh-bao: #E3B54F;  --canh-bao-nen: #33290F;  --thanh-cong: #6BCB8B;
  --bong-the: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --bong-noi: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Giảm chuyển động: thời lượng về gần 0 — HÀNH VI từng hiệu ứng xem bảng "Giảm chuyển động" */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tg-1: 0ms; --tg-2: 0ms; --tg-3: 0ms; --tg-4: 0ms; --tg-5: 0ms;
    --tg-camera: 0ms; --tg-camera-min: 0ms; --tg-camera-max: 0ms; --tg-xoay-cham: 0; --tre-noi-tiep: 0ms; --tg-lap-cho: 0s;
  }
}
:root[data-motion="reduce"] {
  --tg-1: 0ms; --tg-2: 0ms; --tg-3: 0ms; --tg-4: 0ms; --tg-5: 0ms;
  --tg-camera: 0ms; --tg-camera-min: 0ms; --tg-camera-max: 0ms; --tg-xoay-cham: 0; --tre-noi-tiep: 0ms; --tg-lap-cho: 0s;
}