/* ==========================================================================
   NHỊP ĐẦU TƯ · nhip-tokens.css · v1
   NGUỒN DUY NHẤT cho mọi giá trị thiết kế (màu, chữ, bo góc, khoảng cách…).

   3 LUẬT:
   1. File CSS khác chỉ được GỌI biến: var(--fs-md), var(--r-lg)… không ghi số riêng.
   2. Cần giá trị mới → thêm vào file này, không thêm vào file vá.
   3. Không dùng !important để ép giá trị. Sai thì sửa token.

   CÁCH NẠP (index.html): đặt ngay trước /styles.css
     <link rel="stylesheet" href="/nhip-tokens.css?v=1">
   và thêm "/nhip-tokens.css" vào danh sách FILES trong sw.js.
   Các bộ chọn html[data-skin] có độ ưu tiên cao hơn :root nên chạy đúng
   dù đứng trước hay sau theme.css. Tên biến cũ giữ nguyên (mục 8).

   BẢNG QUY ĐỔI GIÁ TRỊ CŨ → TOKEN (dùng khi dọn các file vá)
   Cỡ chữ : 10 – 11.5px → --fs-xs   | 12.5 – 13.5px → --fs-sm
            14 – 14.5px → --fs-md   | 15 – 18px     → --fs-lg
            19 – 24px   → --fs-xl   | 25px trở lên  → --fs-2xl
   Bo góc : 4 – 8px  → --r-sm | 9 – 12px → --r-md
            13 – 16px → --r-lg | 99/999px → --r-pill
   Khoảng : 2 – 4px → --sp-1 | 6 – 8px → --sp-2 | 10 – 12px → --sp-3
            14 – 16px → --sp-4 | 20 – 24px → --sp-5 | 28px trở lên → --sp-6
   Đậm    : 400 → --fw-regular | 600 – 750 → --fw-medium | 800 – 900 → --fw-bold
   ========================================================================== */


/* ---------- 1. THANG GIÁ TRỊ (không đổi theo giao diện) ---------- */
:root {
  /* Chữ: 6 cỡ. Nhỏ nhất 12px để người lớn tuổi vẫn đọc được số liệu */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;    /* chú thích, nhãn nhỏ, nguồn dữ liệu */
  --fs-sm: 13px;    /* nội dung thứ cấp, hàng bảng, nút nhỏ */
  --fs-md: 14px;    /* nội dung chính */
  --fs-lg: 16px;    /* tiêu đề thẻ, giá trong danh sách */
  --fs-xl: 20px;    /* tiêu đề màn hình */
  --fs-2xl: 28px;   /* số lớn: giá mã, giá trị danh mục */
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  /* Bo góc: 4 mức */
  --r-sm: 6px;      /* tag, chip, ô nhập nhỏ */
  --r-md: 10px;     /* nút, ô nhập, hàng danh sách */
  --r-lg: 14px;     /* thẻ, panel, hộp thoại */
  --r-pill: 999px;  /* viên thuốc, huy hiệu, công tắc */

  /* Khoảng cách: bước 4px, nhảy theo nhịp 8px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Lớp xếp chồng: không dùng z-index tuỳ ý */
  --z-sticky: 10;
  --z-nav: 20;
  --z-popover: 100;
  --z-modal: 500;
  --z-ai: 1000;
  --z-toast: 1100;

  /* Chuyển động */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Khung bố cục */
  --topbar-h: 72px;
  --sidebar-w: 218px;
  --bottom-nav-h: 62px;
  --content-max: 1600px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Mật độ (đổi theo Cài đặt → Mật độ, xem mục 5) */
  --pad-card: var(--sp-5);
  --pad-row: var(--sp-3);
  --gap-grid: var(--sp-3);
}

@media (max-width: 720px) {
  :root {
    --topbar-h: 62px;
    --pad-card: var(--sp-4);
    --gap-grid: var(--sp-2);
  }
}


/* ---------- 2. BỐN GIAO DIỆN (khớp data-skin đang dùng) ---------- */
:root,
html[data-skin="light"] {
  color-scheme: light;
  --bg: #f6f8fa; --surface: #ffffff; --surface2: #f1f5f8; --bar: #ffffff;
  --line: #e3e8ed; --line2: #d3dbe3;
  --text: #253442; --text2: #3d5062; --text3: #5b6c7d; --muted: #5f6f82;
  --chip: #eaeff4; --sel: #e8f3ee;
  --warn-bg: #fff7e0; --warn-line: #f0dfa8; --warn-ink: #8a5a00;
  --info: #2563eb;
  --shadow: 0 1px 2px #1d2b3a0d, 0 6px 20px #1d2b3a0a;
  --sh-pop: 0 12px 40px #1d2b3a2e;
  --glow: #16845b14;
  --scrim: #0f172a73;
}
html[data-skin="dark"] {
  color-scheme: dark;
  --bg: #171d24; --surface: #232b35; --surface2: #2a3440; --bar: #1d242c;
  --line: #3a4552; --line2: #4a586a;
  --text: #e6edf4; --text2: #cdd8e3; --text3: #b3c0ce; --muted: #a9b6c4;
  --chip: #313d4a; --sel: #2c3a4b;
  --warn-bg: #352f1a; --warn-line: #5a4f25; --warn-ink: #f3c846;
  --info: #5b9dff;
  --shadow: 0 1px 2px #0006, 0 8px 24px #0004;
  --sh-pop: 0 12px 40px #0009;
  --glow: #34c38f14;
  --scrim: #000a;
}
html[data-skin="soft"] {
  color-scheme: light;
  --bg: #f3eee4; --surface: #fffdf8; --surface2: #f8f3e9; --bar: #fbf7ef;
  --line: #e6dccb; --line2: #d8cbb4;
  --text: #38362f; --text2: #52503f; --text3: #6a6757; --muted: #716b5c;
  --chip: #efe7d6; --sel: #eaf0e2;
  --warn-bg: #fff4d6; --warn-line: #ecd9a0; --warn-ink: #7a5200;
  --info: #2563eb;
  --shadow: 0 1px 2px #5a4a2a0d, 0 6px 18px #5a4a2a0b;
  --sh-pop: 0 12px 40px #5a4a2a33;
  --glow: #b8924a14;
  --scrim: #2a210f73;
}
html[data-skin="blue"] {
  color-scheme: dark;
  --bg: #0b1626; --surface: #12233a; --surface2: #183052; --bar: #0f1d31;
  --line: #243f5f; --line2: #33567d;
  --text: #e8f0fa; --text2: #cfdcec; --text3: #b0c3da; --muted: #9db3cc;
  --chip: #1c3556; --sel: #1b3a63;
  --warn-bg: #33301a; --warn-line: #5b5226; --warn-ink: #f3c846;
  --info: #5b9dff;
  --shadow: 0 1px 2px #0007, 0 10px 28px #0005;
  --sh-pop: 0 12px 40px #000b;
  --glow: #3b9dff1a;
  --scrim: #000b;
}


/* ---------- 3. MÀU THƯƠNG HIỆU (khớp data-brand) ---------- */
:root                          { --brand: #16845b; --on-brand: #fff; }
html[data-brand="green"]       { --brand: #16845b; --on-brand: #fff; }
html[data-brand="blue"]        { --brand: #2563eb; --on-brand: #fff; }
html[data-brand="teal"]        { --brand: #0e8a8a; --on-brand: #fff; }
html[data-brand="purple"]      { --brand: #7048e8; --on-brand: #fff; }
html[data-theme="dark"][data-brand="green"]  { --brand: #34c38f; --on-brand: #06281c; }
html[data-theme="dark"][data-brand="blue"]   { --brand: #5b9dff; --on-brand: #06193a; }
html[data-theme="dark"][data-brand="teal"]   { --brand: #2dd4bf; --on-brand: #052b27; }
html[data-theme="dark"][data-brand="purple"] { --brand: #a78bfa; --on-brand: #1c0f48; }

:root {
  --brand-soft: color-mix(in srgb, var(--brand) 13%, var(--surface));
  --brand-line: color-mix(in srgb, var(--brand) 38%, var(--surface));
  --brand-ink:  color-mix(in srgb, var(--brand) 82%, var(--text));
  --focus: var(--brand);
}
html[data-theme="dark"] { --brand-ink: color-mix(in srgb, var(--brand) 78%, #fff); }


/* ---------- 4. MÀU THỊ TRƯỜNG VIỆT NAM ----------
   Tăng/giảm: JS trong app ghi đè --up/--dn theo Cài đặt (xanh-đỏ / đỏ-xanh / …).
   Trần – sàn – tham chiếu: theo quy ước bảng giá VN, không đổi theo tuỳ chọn. */
:root {
  --up: #0b9f77;
  --dn: #d64550;
  --up-soft: color-mix(in srgb, var(--up) 14%, var(--surface));
  --dn-soft: color-mix(in srgb, var(--dn) 14%, var(--surface));

  --mk-ceil:  #7c3aed;   /* giá trần: tím */
  --mk-floor: #0e7490;   /* giá sàn: xanh lơ */
  --mk-ref:   #a16207;   /* giá tham chiếu: vàng sẫm (đủ tương phản trên nền sáng) */
  --mk-ceil-soft:  color-mix(in srgb, var(--mk-ceil) 14%, var(--surface));
  --mk-floor-soft: color-mix(in srgb, var(--mk-floor) 14%, var(--surface));
  --mk-ref-soft:   color-mix(in srgb, var(--mk-ref) 16%, var(--surface));
}
html[data-theme="dark"] {
  --up: #34c38f;
  --dn: #f07178;
  --mk-ceil:  #c4b5fd;
  --mk-floor: #67e8f9;
  --mk-ref:   #facc15;
}


/* ---------- 5. MẬT ĐỘ (Cài đặt → Mật độ) ---------- */
html[data-den="air"]     { --pad-card: var(--sp-5); --pad-row: var(--sp-3); --gap-grid: var(--sp-3); }
html[data-den="compact"] { --pad-card: var(--sp-3); --pad-row: var(--sp-1); --gap-grid: var(--sp-2); }


/* ---------- 6. TƯƠNG PHẢN CAO & GIẢM CHUYỂN ĐỘNG ---------- */
html[data-hc="1"] {
  --line: var(--text3);
  --line2: var(--text);
  --muted: var(--text2);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}
html[data-rm="1"] { --dur-fast: 0ms; --dur-base: 0ms; }


/* ---------- 7. TIỆN ÍCH TỐI THIỂU (tiền tố nk- để không trùng class cũ) ---------- */
.nk-num {                                   /* mọi con số giá, khối lượng, % */
  font-variant-numeric: tabular-nums;       /* chữ số cùng bề rộng → cột số thẳng hàng */
  font-feature-settings: "tnum" 1;
}
.nk-up    { color: var(--up); }
.nk-dn    { color: var(--dn); }
.nk-ceil  { color: var(--mk-ceil); }
.nk-floor { color: var(--mk-floor); }
.nk-ref   { color: var(--mk-ref); }
.nk-tag-up    { background: var(--up-soft);       color: var(--up); }
.nk-tag-dn    { background: var(--dn-soft);       color: var(--dn); }
.nk-tag-ceil  { background: var(--mk-ceil-soft);  color: var(--mk-ceil); }
.nk-tag-floor { background: var(--mk-floor-soft); color: var(--mk-floor); }
.nk-tag-ref   { background: var(--mk-ref-soft);   color: var(--mk-ref); }
.nk-tag-up, .nk-tag-dn, .nk-tag-ceil, .nk-tag-floor, .nk-tag-ref {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* Viền focus thấy được khi dùng bàn phím (độ ưu tiên 0 nên không đè style cũ) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}


/* ---------- 8. TÊN BIẾN CŨ (giữ để app không vỡ; bỏ dần khi dọn xong) ---------- */
:root {
  --green: var(--brand);
  --green2: var(--brand-soft);
  --mint: var(--brand-soft);
  --blue: var(--brand);
  --red: var(--dn);
  --down: var(--dn);
}