/* ==========================================================================
   tokens.css — TẦNG TOKEN DÙNG CHUNG cho index.html và viewer.html

   Đổi màu thương hiệu ở DUY NHẤT --brand-base.

   Trước đây khối này nằm trong cả hai file, nên đổi màu phải sửa hai chỗ và
   sớm muộn sẽ lệch. Tách ra được vì tính "index.html là bản độc lập" thực ra
   không tồn tại: registry đã phải fetch() packages.json mới chạy, mở bằng
   file:// là ra khối cảnh báo đỏ. Đã không standalone thì giữ hai bản palette
   chỉ để nói là standalone là trả giá mà không nhận gì.
   ========================================================================== */

:root{
  --brand-base:#C6237C;

  --spec:#7C4DDB;
  --config:#0C766D;

  /* Bậc chữ nén lại theo cách Atlassian làm. Bản trước: 18.6 → 5.9 → 4.6,
     giãn 4.1 lần nên cấp 1 gào lên còn cấp 3 thì thều thào. Jira giãn 2.8 lần.
     Chữ chính cũng ngả navy thay vì đen trung tính — đen tuyền trên trắng tuyền
     là cặp gắt nhất có thể, không hệ thống thiết kế nghiêm túc nào dùng. */
  --bg:#F4F6F9;
  --card:#FFFFFF;
  --sidebar:#FFFFFF;
  --fg:#172B4D;
  --muted-fg:#46566E;
  --faint-fg:#616F84;
  --border:#E1E5EB;
  --border-strong:#C2CAD4;
  --hover:#F1F4F8;

  /* họ màu TÀI LIỆU — bão hoà, chỉ dùng cho pill mở được */
  --spec-c:var(--spec); --front-c:var(--brand-text); --config-c:var(--config);
  /* họ màu TRẠNG THÁI — chỉ tô một chấm 7px, không đụng ba hue trên */
  --st-draft-c:#6C7784;
  --st-review-c:#A05F08;
  --st-locked-c:#3E8635;
  --st-ship-c:#4A5A6B;
  --st-drop-c:#B4423A;

  --ok:#3E8635;
  --warn:#9C5A0B;
  --neutral:#5C6875;
  --rose:#B42318;

  --radius:12px;
  --radius-sm:8px;
  --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(13,19,28,.04), 0 1px 3px rgba(13,19,28,.05);
  --shadow-2:0 8px 24px -6px rgba(13,19,28,.14);

  --sans:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* Eurus dùng #2A9EFF — sáng, nên phải pha 68% với navy mới đủ tương phản làm chữ,
     và chữ trên nền brand phải là navy. #C6237C tối hơn hẳn: 5.34:1 trên trắng, nên
     brand-text dùng thẳng brand-base (giữ được độ tươi), còn chữ trên nền brand là trắng. */
  --brand:var(--brand-base);
  --brand-text:var(--brand-base);
  --brand-fg:#FFFFFF;
  --brand-soft:color-mix(in srgb, var(--brand-base) 10%, #FFFFFF);

  --sbw:248px;

  /* dùng bởi viewer.html */
  --code-bg:#FBF2F7;
}
/* Dark mode dựng theo nguyên tắc của Atlassian: nền KHÔNG gần đen và chữ chính
   KHÔNG gần trắng. Bản trước để #E7EDF5 trên #101720 = 15.3:1 — vượt xa AAA (7:1),
   chữ trắng phát quầng trên nền tối nên đọc lâu mỏi mắt. Giờ chữ chính 9.0:1,
   đúng mức Jira dùng. Mọi màu còn lại nằm trong khoảng 4.9–6.8:1. */
[data-theme="dark"]{
  --bg:#161A1D;
  --card:#1D2125;
  --sidebar:#1A1E22;
  --fg:#B6C2CF;
  --muted-fg:#9BA9B8;
  --faint-fg:#8393A3;
  --border:#2C333A;
  --border-strong:#454F59;
  --hover:#22272B;
  --brand:#EE7FB8;
  --brand-text:#EE7FB8;
  --brand-fg:#2E0A1D;
  --brand-soft:color-mix(in srgb, #EE7FB8 14%, #1D2125);
  --spec:#9F8FEF;
  --config:#4FB8AC;
  --ok:#5AAF7E; --warn:#C99245; --neutral:#8393A3; --rose:#D97E76;
  --st-draft-c:#8393A3; --st-review-c:#C99245; --st-locked-c:#5AAF7E;
  --st-ship-c:#7B8FA3; --st-drop-c:#D97E76;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 8px 24px -8px rgba(0,0,0,.5);
  --code-bg:#12171C;
}