/* tokens.css — NGUỒN DUY NHẤT của màu, chữ, khoảng cách.
   Mọi tệp CSS khác PHẢI dùng biến ở đây. Cấm viết mã màu thô trong tệp khác.

   Bảng màu v3 đo từ landing DeChePro (`dechemotnguoi.com`) — xem `spec/07`.
   Mọi tỷ số tương phản dưới đây đã tính thật, không đoán. */

/* Phông nạp từ máy, KHÔNG gọi mạng.
   Bẫy đã trả giá: HTML không nạp phông nào -> trình duyệt rơi về Georgia, phông đó
   thiếu chữ `ầ` nên dấu huyền RỜI RA, hiện thành "đâ`u" ngay tiêu đề lớn nhất trang. */
@font-face {
  font-family: "Playfair Display";
  src: url('/assets-media/fonts/Playfair.woff2?v=f5934771') format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  /* Be Vietnam Pro dựng riêng cho tiếng Việt — dấu đặt cân hơn Inter ở cỡ lớn */
  font-family: "Be Vietnam Pro";
  src: url('/assets-media/fonts/BeVietnamPro.woff2?v=e14c0e18') format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Nền tối: navy sâu, KHÔNG dùng đen tuyệt đối ──
     Đen tuyệt đối làm trang trông như trang lỗi; navy có chiều sâu. */
  --nen: #0D1F33;            /* nền chính */
  --nen-phu: #091626;        /* nền khối phụ, đậm hơn nền chính */
  --vien: #1E3350;           /* viền thẻ */
  --ke-nhe: #CFE0F0;         /* đường kẻ — dùng kèm độ mờ 12% */

  /* ── Chữ ── */
  --chu: #F8F5EF;            /* chữ chính — 15,31:1 trên nền. Kem ngà, không trắng tinh */
  --chu-phu: #94A3B8;        /* chữ phụ — 6,50:1 */
  --vo-hieu: #64748B;        /* 3,50:1 — CHỈ cho đồ hoạ và viền, KHÔNG cho chữ */

  /* ── Hai tầng vàng: một mã duy nhất thì mọi nhấn bằng nhau, mắt không biết nhìn đâu ── */
  --vang-sang: #F0D08A;      /* nhấn sáng — số lớn, tiêu đề nhấn. 11,18:1 */
  --vang: #C99A4E;           /* nhấn đậm — nút, viền chủ động. 6,52:1 */
  --vang-in: #856633;        /* CHỈ dùng trên nền kem — 4,89:1 */

  /* ── Nền sáng: cho tài liệu in và hồ sơ chương trình ── */
  --nen-sang: #F8F5EF;       /* kem ngà; trắng tinh trông như bản nháp */
  --chu-tren-sang: #0D1F33;  /* 15,31:1 */
  --chu-phu-tren-sang: #334155; /* 9,52:1 */

  --xanh: #1E3A5F;           /* nền phụ khối dữ liệu */
  --canh-bao: #D9490D;       /* chữ cảnh báo — 4,52:1. KHÔNG dùng #C2410C (3,73:1) */

  /* ── Chữ ── */
  --phong-tieu-de: "Playfair Display", Georgia, serif;
  --phong: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --phong-han: "Noto Sans SC", var(--phong);

  --co-hero: 64px;      --dong-hero: 80px;
  --co-khoi: 40px;      --dong-khoi: 52px;
  --co-the: 22px;
  --co-van: 18px;       --dong-van: 1.7;
  --co-chu-thich: 14px;
  --co-so-lon: 88px;

  /* ── Khoảng cách ── */
  --rong-toi-da: 1280px;
  --cach-khoi: 120px;
  --le: 24px;
  --bo-goc: 16px;

  /* ── Chuyển động ── */
  --nhanh: 200ms;
  --vao-man: 600ms;
}

/* Bản tiếng Trung: chữ Hán vuông và dày ngang hơn, giữ 64px là vỡ dòng */
:root:lang(zh), [lang="zh-Hans"] {
  --phong-tieu-de: var(--phong-han);
  --phong: var(--phong-han);
  --co-hero: 56px;  --dong-hero: 76px;
}

body { background: var(--nen); color: var(--chu); font-family: var(--phong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}