/* =========================================================
   QUANG CHAU — DESIGN TOKENS (nguồn duy nhất cho màu/chữ/khoảng cách)
   Chỉ khai báo biến --qc-*; KHÔNG đổi giao diện hiện tại.
   Quy ước dùng: xem design-system/MASTER.md
   ========================================================= */
:root{
  /* Thương hiệu */
  --qc-red-50:#fff0f2; --qc-red-100:#fde3e7; --qc-red-200:#f6c6cc;
  --qc-red-600:#c91424; --qc-red-700:#a80f1e;
  --qc-shell-red:#a71919; --qc-shell-red-dark:#991818; /* thanh menu bên trái */

  /* Trung tính */
  --qc-bg:#f4f6fb;          /* nền trang (khớp shell CRM) */
  --qc-surface:#ffffff;     /* thẻ, modal, bảng */
  --qc-surface-2:#f8fafc;   /* vùng phụ, hàng tổng, ô chỉ đọc */
  --qc-line:#e7e9ee;        /* viền nhạt */
  --qc-line-strong:#d9dde3; /* viền ô nhập */
  --qc-text:#1e2732;        /* chữ chính (15:1) */
  --qc-text-2:#475467;      /* chữ phụ (7.7:1) */
  --qc-text-muted:#667085;  /* nhãn (5.0:1 — đạt AA; thay #76808f chỉ 4.0:1) */

  /* Trạng thái: nền nhạt + chữ đậm (đều đạt AA >= 4.5:1) */
  --qc-success-bg:#dcfce7; --qc-success-fg:#15803d; --qc-success:#148a4b;
  --qc-warning-bg:#fff3d8; --qc-warning-fg:#b45309; --qc-warning:#d97706;
  --qc-info-bg:#dbeafe;    --qc-info-fg:#1d4ed8;    --qc-info:#2563eb;
  --qc-danger-bg:#fee2e2;  --qc-danger-fg:#b91c1c;
  --qc-purple-bg:#ede9fe;  --qc-purple-fg:#6d28d9;

  /* Chữ */
  --qc-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; /* Inter tự host (inter.css), khớp CRM, hỗ trợ tiếng Việt */
  --qc-font-num:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --qc-fs-2xs:11px; --qc-fs-xs:12px; --qc-fs-sm:13px; --qc-fs-md:15px;
  --qc-fs-lg:18px;  --qc-fs-xl:22px; --qc-fs-2xl:28px;
  --qc-fw-regular:400; --qc-fw-medium:500; --qc-fw-semibold:600; --qc-fw-bold:700; --qc-fw-heavy:800;
  --qc-lh-tight:1.25; --qc-lh:1.4; --qc-lh-loose:1.6;

  /* Khoảng cách (lưới 4px) */
  --qc-sp-1:4px; --qc-sp-2:8px; --qc-sp-3:12px; --qc-sp-4:16px;
  --qc-sp-5:20px; --qc-sp-6:24px; --qc-sp-8:32px;

  /* Bo góc */
  --qc-r-sm:8px; --qc-r-md:10px; --qc-r-lg:12px; --qc-r-xl:16px; --qc-r-pill:999px;

  /* Đổ bóng */
  --qc-shadow-sm:0 1px 4px rgba(20,30,45,.08);
  --qc-shadow-md:0 3px 14px rgba(25,35,50,.06);
  --qc-shadow-lg:0 24px 60px rgba(15,23,42,.28);

  /* Kích thước điều khiển */
  --qc-h-control:36px; --qc-h-control-lg:42px; --qc-h-touch:44px;

  /* Tầng hiển thị (z-index) — dùng đúng các mốc này, không tự đặt số mới */
  --qc-z-sticky:40; --qc-z-nav:1200; --qc-z-modal:1000; --qc-z-modal-top:22000; --qc-z-toast:30000;

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

  /* Focus */
  --qc-ring:0 0 0 3px rgba(201,20,36,.28);

  /* Bề rộng khung (modal) */
  --qc-modal-sm:min(560px,96vw); --qc-modal-md:min(1160px,96vw); --qc-modal-lg:min(1760px,98vw);
}

@media (prefers-reduced-motion:reduce){
  :root{--qc-dur-fast:0ms;--qc-dur:0ms}
}