/* ==========================================================================
   NÚT — tokens.css
   Lớp tuỳ biến thương hiệu. Đổi giá trị ở đây là đổi toàn bộ giao diện.
   Được nạp TRƯỚC khối <style> trong index.html.
   ========================================================================== */

:root {
  /* --- Bảng màu lõi (5 màu) ---------------------------------------------- */
  --bg:            #FFFFFE;   /* nền trang — trắng ngà, không phải #FFF thuần */
  --ink:           #161616;   /* mực: chữ chính, khối đảo màu, đường kẻ dày */
  --grey:          #8A8A88;   /* xám nhãn — CHỈ dùng cho chữ ≥18px hoặc trên nền đen */
  --grey-ink:      #61615F;   /* xám đậm — bản AA cho chữ nhỏ trên nền sáng */
  --accent:        #D8281C;   /* đỏ sale — giá giảm, badge -%, nút Mua ngay
                                 (chữ trắng trên nền này đạt 4,95:1 — qua AA) */
  --accent-lit:    #FF5A4C;   /* đỏ trên nền mực — chữ đỏ cỡ nhỏ trên khối đảo màu (5,9:1) */
  --accent-deep:   #B81F14;   /* đỏ đậm — hover, chữ đỏ cỡ nhỏ trên nền sáng (6,47:1) */

  /* --- Dẫn xuất từ mực (không phải màu thứ 6) ----------------------------- */
  --line:          #E3E3E1;   /* kẻ mảnh — mực pha loãng */
  --wash:          #F4F4F2;   /* nền băng phụ — mực pha rất loãng */
  --on-ink:        #FFFFFE;   /* chữ trên khối đảo màu */
  --on-ink-soft:   #B8B8B4;   /* chữ phụ trên khối đảo màu (đạt AA) */

  /* --- Chữ ---------------------------------------------------------------- */
  --font-display:  'Archivo', system-ui, sans-serif;      /* 800, giãn ngang, IN HOA */
  --font-body:     'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono:     'Space Mono', ui-monospace, monospace; /* mã SP, size, số đo */

  --size-body:     16.5px;
  --lh-body:       1.55;      /* ≥1.5 — dấu thanh tiếng Việt cần chỗ thở */
  --lh-display:    1.06;      /* ≥1.05 — tránh cắt Ầ / ỹ / ọ */
  --track-display: -.015em;
  --track-mono:    .12em;
  --stretch-display: 112%;    /* Archivo variable width — dáng chữ "giãn ngang" */

  /* --- Hình khối: hệ bán kính (a) — 0px toàn bộ --------------------------- */
  --r:             0px;       /* mọi nút, thẻ, ảnh, ô nhập liệu */
  --border-w:      1px;       /* lưới sát nhau, kẻ mảnh */
  --border-heavy:  2px;       /* viền khối nhấn */

  /* --- Nhịp khoảng cách (thang tight/base của track VN) -------------------- */
  --section-y:     clamp(2.5rem, 5vw, 3.5rem);
  --gutter:        clamp(1.125rem, 4vw, 3.25rem);
  --maxw:          1280px;

  /* --- Chuyển động -------------------------------------------------------- */
  --ease:          cubic-bezier(.16, 1, .3, 1);
}