/* ==========================================================================
   Quà Quê Ba Miền — 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 ------------------------------------------------------ */
  --nen:          #FBF7EF;   /* nền trang — giấy dó, cố ý không phải #FFF */
  --nen-sau:      #F3EBDD;   /* nền thẻ, nền băng chìm */
  --nen-vien:     #EADFCB;   /* nền chip nhạt, nền ô bảng */
  --muc:          #231C13;   /* mực chính — 15,3:1 trên nền giấy dó */
  --muc-nhat:     #5A4E3E;   /* chữ phụ — 7,1:1 trên nền, đạt AA thoải mái */
  --ke:           #DCCFB8;   /* đường kẻ mảnh 1px */
  --ke-dam:       #C4B296;   /* viền thẻ, viền ô nhập */

  /* --- Màu nhấn ---------------------------------------------------------- */
  --son:          #A32B22;   /* đỏ son — nút chính, giá, badge (6,4:1 với #fff) */
  --son-dam:      #85211A;   /* đỏ son đậm — hover, chữ đỏ cỡ nhỏ trên nền sáng */
  --son-mo:       #F7E6E3;   /* đỏ son rất nhạt — nền badge, nền chip giá */
  --ma:           #5C7A3F;   /* xanh lá mạ — CHỈ dùng cho chip vùng miền */
  --ma-dam:       #445C2E;   /* xanh mạ đậm — chữ xanh cỡ nhỏ, đạt AA (5,6:1) */
  --ma-mo:        #E8EFDF;   /* xanh mạ rất nhạt — nền chip vùng miền */

  /* --- Màu trên nền tối --------------------------------------------------- */
  --tren-toi:     #FBF7EF;   /* chữ chính trên nền mực */
  --tren-toi-2:   #C9BCA6;   /* chữ phụ trên nền mực — 8,2:1 */
  --ke-toi:       #43382A;   /* đường kẻ trên nền mực */

  /* --- Chữ --------------------------------------------------------------- */
  --hien-thi:     'Be Vietnam Pro', system-ui, sans-serif;  /* 700 — tiêu đề, logo */
  --than:         'Montserrat', system-ui, sans-serif;      /* thân bài, form */
  --mono:         'IBM Plex Mono', ui-monospace, monospace; /* khối lượng, mã hộp */

  --co-than:      17px;
  --cao-than:     1.6;       /* ≥1.5 — dấu thanh tiếng Việt cần chỗ thở */
  --cao-hien-thi: 1.08;      /* ≥1.05 — tránh cắt Ầ / ỹ / ọ */
  --giam-hien-thi: -.025em;
  --tang-mono:    .12em;

  /* --- Hình khối (hệ b) --------------------------------------------------- */
  --bo-the:       12px;      /* thẻ, ảnh, ô nhập */
  --bo-chip:      999px;     /* chip, nút, widget nổi */
  --bo-nho:       8px;       /* ô nhập nhỏ, badge vuông */
  --vien:         1.5px;     /* độ dày viền chuẩn */
  --do-bong:      0 2px 14px rgba(35,28,19,.09);
  --do-bong-noi:  0 6px 20px rgba(35,28,19,.16);

  /* --- Nhịp khoảng cách --------------------------------------------------- */
  --doc:          56px;      /* padding dọc mục — mức base của track VN */
  --doc-hep:      40px;      /* padding dọc mục — mức tight */
  --le:           clamp(1.15rem, 4vw, 3.25rem);
  --khung:        1240px;

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