/* Token DSVH — port MÁY MÓC từ factory/vays-portable/vays-panel/src/styles/dsvh-tokens.css (CHỈ ĐỌC).
   Chỉ lấy primitive `--dsvh-*` + vai ngữ nghĩa `--color-*` của :root và nguyên khối `.dark`.
   Đổi giá trị thì đổi Ở NGUỒN rồi đồng bộ lại, đừng sửa tay ở đây — tests/ui/dsvh.test.ts
   đối chiếu từng giá trị với nguồn.
   Lưu ý bậc cam: --dsvh-orange-600 (#de4400) cho viền/icon/đường chart; mảng ĐẶC mang chữ
   trắng phải dùng --dsvh-orange-700 (#cf3e00) — trắng trên #de4400 chỉ 4.26:1, trượt AA. */
:root {
  --dsvh-ink-900: #001d21;
  --dsvh-ink-700: #334a4d;
  --dsvh-ink-500: #64797c;
  --dsvh-ink-400: #7f9599;
  --dsvh-paper-0: #ffffff;
  --dsvh-paper-50: #fcfeff;
  --dsvh-paper-100: #e4eaea;
  --dsvh-line-200: #dfe6e6;
  --dsvh-line-100: #eef2f2;
  --dsvh-line-300: #d3dede;
  --dsvh-line-400: #cdd7d7;
  --dsvh-line-500: #c3d0d0;
  --dsvh-cream-50: #fff3e0;
  --dsvh-cream-100: #fbf3e6;
  --dsvh-cream-200: #f7ecda;
  --dsvh-cream-300: #f0e6d8;
  --dsvh-navy-900: #212230;
  --dsvh-orange-600: #de4400;
  --dsvh-orange-700: #cf3e00;
  --dsvh-orange-500: #f5872a;
  --dsvh-red-600: #d92d20;
  --dsvh-red-700: #b42318;
  --dsvh-amber-500: #f59e0b;
  --dsvh-amber-700: #b45309;
  --dsvh-peach-200: #ffd8a8;
  --dsvh-yellow-400: #ffc84c;
  --dsvh-yellow-300: #ffe08a;
  --dsvh-teal-500: #21b37a;
  --dsvh-teal-700: #0f7a52;
  --dsvh-mint-300: #86f2c8;
  --dsvh-magenta-400: #e879c7;
  --dsvh-blue-600: #0b6bcb;
  --dsvh-blue-700: #08529c;
  --dsvh-blue-300: #6bb6ff;
}

/* Tối: chỉ remap vai trung tính (bám `.dark` như theme toggle của Panel). */
.dark {
  --color-canvas: #0e0f14;
  --color-scrim: #000000;
  --color-surface: #1a1b23;
  --color-surface-2: #22232e;
  --color-surface-hover: #2c2e3a;
  --color-ink: #eef1f2;
  --color-ink-2: #aeb6b8;
  --color-ink-3: #78838a;
  --color-stroke: #2d2f3d;
  --color-stroke-soft: #24252f;
  --color-stroke-hover: #3a3d4d;
  --color-stroke-strong: #454859;
  --color-stroke-focus: #565a78;
  --color-link: #6bb6ff;
  --color-link-hover: #9acbff;
}

/* === TIỆN ÍCH === */
.dsvh-canvas { background: var(--color-surface-2); color: var(--color-ink); }
.dsvh-card {
  background: var(--color-surface);
  border: 1px solid var(--color-stroke);
  border-radius: 12px;
}
.dsvh-btn {
  background: var(--dsvh-orange-700);
  color: var(--dsvh-paper-0);
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
.dsvh-btn:hover { filter: brightness(1.08); }
.dsvh-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.dsvh-btn-ghost {
  background: transparent;
  color: var(--color-ink-2);
  border: 1px solid var(--color-stroke);
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
.dsvh-btn-ghost:hover { background: var(--color-surface-hover); border-color: var(--color-stroke-hover); }
.dsvh-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-stroke);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-ink);
}
.dsvh-input:focus { outline: 2px solid var(--dsvh-orange-600); outline-offset: 1px; border-color: var(--color-stroke-focus); }
.dsvh-muted { color: var(--color-ink-3); }
.dsvh-link { color: var(--color-link); }
.dsvh-ok { color: var(--dsvh-teal-500); }
.dsvh-err { color: var(--dsvh-red-600); }