/* rc-tokens.css — MỘT nguồn brand token cho app./verify./me./ops/partner (design.md v2.1 §10.0-D).
 * Nguồn chân lý: reConsents-design.md + reConsents-design-system-handoff.md. Sửa token = sửa design.md trước.
 * Widget (widget.html) KHÔNG link file này — widget tự chứa, zero request ngoài (§10.2). */

:root{
  /* Chữ — v2: slate, KHÔNG dùng đen #0a1626 cho chữ */
  --ink:#26344d; --ink2:#3a4a63; --muted:#5f6e85; --muted2:#8b99ac;

  /* Nền sáng */
  --bg:#ffffff; --bg2:#f5f8fc; --bg3:#eef3fa;
  --line:#e4ebf4; --line2:#d3deec;

  /* Thương hiệu — PRIMARY teal, SECONDARY indigo (KHÔNG đổi theo theme: logo, dải nhận diện) */
  --teal:#0d9488; --teal-d:#0b7d73; --teal-l:#14b8a6;
  --indigo:#4f46e5; --violet:#7c3aed; --coral:#ff7a59; --sky:#38bdf8;

  /* Trạng thái — KHÔNG BAO GIỜ đổi theo theme (màu tín hiệu nhân viên nhìn 8h/ngày) */
  --ok:#0e9f6e; --ok-bg:#e7f7ef;
  --warn:#b45309; --warn-bg:#fef3e2;
  --bad:#e02424; --bad-bg:#fdecec;

  /* Vùng KÉT — nền tối CHỈ cho bằng chứng/kỹ thuật (S5) */
  --code:#0b1220; --code2:#111a2e; --code-line:#1e2a44;
  --code-tx:#c7d3e8; --code-mut:#6b7c9c; --code-ok:#6ee7b7; --code-ma:#7dd3fc;

  /* Bo góc & bóng — bóng CHỈ cho vật NỔI (modal/popover), card dùng viền (§10.0-B2) */
  --r:18px; --rs:12px; --rx:26px; --btn-r:11px;
  --sh-s:0 1px 2px rgba(10,22,38,.06),0 1px 3px rgba(10,22,38,.05);
  --sh:0 12px 34px rgba(10,22,38,.10);
  --sh-l:0 30px 70px -18px rgba(13,80,120,.30);

  /* Chuyển động */
  --mo-micro:150ms; --mo-fast:260ms; --mo-enter:600ms; --mo-draw:900ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.65,0,.35,1);

  /* Font — Be Vietnam Pro (CẤM Inter: ghép dấu rời, vỡ ộ ồ ụ — design.md §4.2) */
  --f:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ===== 3 THEME MÀU NHẤN (design.md §10.0-C — CHỈ app. dùng; verify./me. luôn mặc áo teal) =====
 * Đúng 6 biến đổi theo theme, không sinh biến thứ 7:
 *   --ac (nút/link/tab active) · --ac-d (hover) · --ac-l · --ac-bg (nền nhạt: hàng chọn, sidebar active)
 *   --ac-ring (focus 3px, accent 30% — mẫu Linear) · --ac-chart (series chính biểu đồ)
 * Semantic ok/warn/bad + gradient thương hiệu teal→violet KHÔNG đổi — áo đổi, người không đổi. */
:root, :root[data-theme=teal]{
  --ac:#0d9488; --ac-d:#0b7d73; --ac-l:#14b8a6; --ac-bg:#effcfa;
  --ac-ring:0 0 0 3px rgba(13,148,136,.30); --ac-chart:#0d9488;
}
:root[data-theme=indigo]{
  --ac:#4f46e5; --ac-d:#4338ca; --ac-l:#6366f1; --ac-bg:#eef2ff;
  --ac-ring:0 0 0 3px rgba(79,70,229,.30); --ac-chart:#4f46e5;
}
:root[data-theme=violet]{
  --ac:#7c3aed; --ac-d:#6d28d9; --ac-l:#8b5cf6; --ac-bg:#f5f3ff;
  --ac-ring:0 0 0 3px rgba(124,58,237,.30); --ac-chart:#7c3aed;
}

/* ===== nền chung tối thiểu (không ép layout của từng trang) ===== */
:focus-visible{ outline:none; box-shadow:var(--ac-ring); border-radius:6px; }
section[id]{ scroll-margin-top:76px; }

/* Số liệu thẳng cột trong bảng (§10.1): thêm class .num cho ô số */
.num{ font-variant-numeric:tabular-nums; text-align:right; }

/* A3 — "ghi thêm vào sổ": entrance mặc định, chạy MỘT lần (design.md §5.2) */
.rv{ opacity:0; transform:translateY(14px); transition:opacity var(--mo-enter) var(--ease-out), transform var(--mo-enter) var(--ease-out); }
.rv.on{ opacity:1; transform:none; }

/* A4 — dấu biên nhận: check vẽ nét (SVG có class .a4 với path .a4p) */
.a4p{ stroke-dasharray:48; stroke-dashoffset:48; }
.a4.on .a4p{ animation:a4draw .38s var(--ease-out) forwards; }
@keyframes a4draw{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .a4p{ stroke-dashoffset:0; animation:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}