/* =====================================================================
   PHR Sale Connector — tokens.css v2
   NGUỒN DUY NHẤT của màu · chữ · nhịp · bo góc · độ cao · chuyển động · tầng z.
   Đọc luật ở docs/11_DESIGN_SYSTEM.md. Không file nào khác được gõ hex (luật L3).

   ĐỒNG BỘ 1:1 tên biến + giá trị với PHR_BI/static/base.css, trừ MỘT ngoại lệ có
   số đo: ba màu CHỮ trạng thái (xem mục "Trạng thái" bên dưới).
   Hai vỏ /m và /d dùng chung file này để nhìn là một hệ.
   ===================================================================== */

:root{
  /* ---------- Thương hiệu (bất biến hai chế độ) ---------- */
  --brand-teal:#00A9AC; --brand-yellow:#FFD400; --brand-navy:#002C73;

  /* ---------- LIGHT (mặc định) ---------- */
  --bg:#F4F6F9; --panel:#FFFFFF; --panel-2:#F1F4F8; --line:#E4E8EE;
  --ink:#16202E; --muted:#5B6675; --faint:#66707D;
  --accent:#00A9AC; --accent-ink:#04191A; --accent-weak:#E1F4F4; --accent-hover:#0A8F92;
  /* --accent-text: teal dành riêng cho CHỮ và ĐƯỜNG VIỀN FOCUS trên nền sáng.
     Teal thương hiệu #00A9AC chỉ đạt 2.88:1 trên nền trắng và 2.53:1 trên chip
     accent-weak — quá thấp cho chữ 11-12px, và cũng dưới 3:1 của viền focus.
     Bản đậm này đạt 5.21:1 / 4.58:1. Ở cỡ chữ nhỏ hai màu gần như không phân
     biệt được bằng mắt, nên nhận diện thương hiệu không đổi.
     MẢNG TÔ (nền nút, thanh tiến độ, viền trái nav) vẫn dùng --accent nguyên bản. */
  --accent-text:#04797C;

  /* ---------- Trạng thái ----------
     CHỮ và MẢNG TÔ là hai màu khác nhau — đây là chỗ SC lệch PHR_BI, có lý do đo được:
     bộ màu gốc của BI trên nền chip chỉ đạt 3.10 / 2.81 / 3.84 : 1, dưới chuẩn AA 4.5:1
     cho chữ 11-12px (ngoài nắng là không đọc được).
       --good/--warn/--bad       = màu CHỮ, đã hạ độ sáng để đạt 4.50 / 5.08 / 4.64 : 1
       --good-vivid/...          = ĐÚNG hex PHR_BI, cho chấm đèn · thanh bar · mảng tô
                                   (đồ họa chỉ cần 3:1) => nhận diện hai hệ vẫn y hệt
     Dark mode đã đo đạt 7.5 / 9.3 / 5.9 : 1 nên giữ nguyên hex BI cho cả chữ lẫn mảng. */
  --good:#15773F;       --warn:#8A5D0B;       --bad:#C03535;       --none:#5B6675;
  --good-vivid:#1F9D57; --warn-vivid:#C08512; --bad-vivid:#D14343; --none-vivid:#939CA9;
  --good-bg:#E7F5EC;    --warn-bg:#FAF0DA;    --bad-bg:#FAE7E7;
  /* Chữ nằm TRÊN mảng đỏ đặc (nút .danger). Trắng chỉ đạt 3.82:1 trên đỏ dark,
     nên chế độ tối lật sang chữ sẫm — 4.95:1. */
  --bad-ink:#FFFFFF;

  /* ---------- Thang teal tuần tự (1 hue, sáng -> đậm) ----------
     Cho MỨC ĐỘ MỘT CHIỀU: % hoàn thành KH, heatmap cường độ, tiến độ trung tính.
     KHÔNG thay đèn X/V/Đ. Số % luôn hiện cạnh thanh — màu không đứng một mình.
     Map chuẩn %KH: <60->t2 · 60-80->t3 · 80-95->t4 · 95-105->t5 · >105->t6 */
  --teal-1:#E6F6F6; --teal-2:#BCE7E8; --teal-3:#84D2D4; --teal-4:#3FB9BC;
  --teal-5:#00A9AC; --teal-6:#00888B; --teal-7:#046769;

  /* ---------- Màu chuỗi dữ liệu (categorical) ----------
     Dùng khi so sánh DANH MỤC (PosK/Khác · SALE/CS/MKT · HN1-HN6).
     KHÔNG dùng bộ trạng thái cho chuỗi dữ liệu, KHÔNG hard-code hex trong trang. */
  --c-1:#00A9AC; --c-2:#3E63DD; --c-3:#E08A1E; --c-4:#8B5CF6;
  --c-5:#D2568C; --c-6:#5B6675;

  /* ---------- Chữ ----------
     Thứ tự QUAN TRỌNG: -apple-system đứng đầu => máy Apple ra SF Pro thật.
     Đặt "Segoe UI" lên trước sẽ làm máy Mac có cài MS Office ăn Segoe, và SC sẽ
     nhìn khác PHR_BI trên cùng một máy. Không tải một byte font nào (PWA offline). */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    "Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,monospace;

  /* ---------- Thang khoảng cách 4px (một nhịp cho toàn hệ) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* ---------- Bo góc theo VAI TRÒ (chỉ bốn giá trị, cấm số lẻ) ---------- */
  --radius-ctl:8px; --radius-card:12px; --radius-sheet:16px; --radius-pill:999px;

  /* Núm công tắc: trắng ở CẢ HAI chế độ (nhịp iOS) — không đổi theo --panel,
     núm sẫm trên rãnh teal đọc ra thành "đang tắt". */
  --knob:#FFFFFF;

  /* ---------- Ba nấc độ cao ---------- */
  --e1:0 1px 2px rgba(16,32,46,.06);      /* thẻ, panel */
  --e2:0 4px 14px rgba(16,32,46,.10);     /* dropdown, popover, user menu */
  --e3:0 18px 48px rgba(16,32,46,.24);    /* modal, sheet, slide-over */

  /* ---------- Chuyển động ---------- */
  --mo-fast:120ms; --mo-base:200ms; --mo-slow:320ms;
  --ease-out:cubic-bezier(.32,.72,0,1);   /* nhịp iOS — sheet, slide-over */
  --ease-std:cubic-bezier(.2,0,0,1);

  /* ---------- Tầng z (không gõ z-index bằng số trong trang) ---------- */
  --z-topbar:20; --z-head:30; --z-tabbar:40; --z-over:50;
  --z-sheet:60; --z-modal:70; --z-toast:90;

  /* ---------- Kích thước vỏ ---------- */
  --hp-h:52px; --tb-h:42px; --side-w:220px; --side-w-min:56px; --over-w:380px;

  /* ---------- MẬT ĐỘ · nấc 1: compact (desktop mặc định = PHR_BI) ---------- */
  --fs-title:19px; --fs-h2:15px; --fs-body:13px; --fs-sm:12px; --fs-xs:11px;
  --fs-kpi:24px;
  --row-h:34px; --ctl-h:32px; --ctl-h-sm:26px; --ctl-h-lg:40px; --tap-min:32px;
  --main-pad:18px; --card-pad:15px; --tbl-py:7px;
}

/* ---------- MẬT ĐỘ · nấc 2: comfortable (desktop tùy chọn) ---------- */
:root[data-density="comfortable"]{
  --fs-body:14px; --fs-sm:12.5px;
  --row-h:40px; --ctl-h:36px; --ctl-h-sm:30px; --tap-min:36px;
  --main-pad:24px; --card-pad:18px; --tbl-py:11px;
}

/* ---------- MẬT ĐỘ · nấc 3: touch (vỏ /m ép cứng) ----------
   Ngón cái, đứng ngoài nắng, một tay. Mọi vùng chạm >= --tap-min 44px. */
:root[data-density="touch"]{
  --fs-title:26px; --fs-h2:17px; --fs-body:15.5px; --fs-sm:13.5px; --fs-xs:12px;
  --fs-kpi:30px;
  /* .sm ở nấc chạm vẫn phải 44px: nút nhỏ là khái niệm của màn hình có chuột,
     trên điện thoại nó chỉ tạo ra thao tác bấm trượt. */
  --row-h:52px; --ctl-h:46px; --ctl-h-sm:44px; --ctl-h-lg:52px; --tap-min:44px;
  --main-pad:16px; --card-pad:16px; --tbl-py:12px;
  --radius-card:14px; --radius-sheet:18px;
}

/* ---------- DARK (bộ token riêng, KHÔNG đảo màu tự động) ---------- */
:root[data-theme="dark"]{
  --bg:#0E1117; --panel:#161B22; --panel-2:#1C2230; --line:#2A3140;
  --ink:#E6EDF3; --muted:#9AA6B6; --faint:#8B94A1;
  /* Dark: teal đã nâng sáng sẵn để nổi trên nền tối, đo được 6.23:1 — không cần bản riêng */
  --accent:#16C0C3; --accent-ink:#04191A; --accent-weak:#10312F; --accent-hover:#39D3D6;
  --accent-text:#16C0C3;
  --good:#2ECC71;       --warn:#F1C40F;       --bad:#E74C3C;       --none:#9AA6B6;
  --good-vivid:#2ECC71; --warn-vivid:#F1C40F; --bad-vivid:#E74C3C; --none-vivid:#6B7686;
  --good-bg:#12271C;    --warn-bg:#2A2410;    --bad-bg:#2A1414; --bad-ink:#0E1117;
  /* thang teal dark: tối -> sáng dần theo mức (nổi trên nền tối) */
  --teal-1:#11302F; --teal-2:#0C4A4C; --teal-3:#0A6B6E; --teal-4:#0E9093;
  --teal-5:#16C0C3; --teal-6:#57D5D7; --teal-7:#9FE9EA;
  --c-1:#16C0C3; --c-2:#7C9BFF; --c-3:#F0B45C; --c-4:#B191FF;
  --c-5:#F189B4; --c-6:#9AA6B6;
  --e1:0 1px 2px rgba(0,0,0,.40);
  --e2:0 4px 14px rgba(0,0,0,.50);
  --e3:0 18px 48px rgba(0,0,0,.60);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}