/* ==========================================================================
   Thảo Nguyên An — 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.

   Ngân sách màu: 4 màu nền/mực + 1 màu nhấn (xanh lá rừng)
   + 1 màu phụ có nhiệm vụ hẹp (vàng gấc: CHỈ badge và giá sale).
   Mọi cặp chữ/nền dưới đây đã được tính tỉ lệ tương phản WCAG.
   ========================================================================== */

:root {
  /* --- Bảng màu lõi ------------------------------------------------------ */
  --bg:            #FAF8F2;   /* nền trang — kem sáng, cố ý không phải #FFF */
  --ink:           #1D2419;   /* mực chính — xanh đen ám lá (15,0:1 trên nền) */
  --ink-soft:      #4A5348;   /* chữ phụ — 7,5:1 trên nền, 7,1:1 trên thẻ */
  --card:          #F0F3EA;   /* nền thẻ, nền băng chìm */
  --line:          #DDE3D3;   /* đường kẻ mảnh 1px */
  --line-strong:   #C3CDB6;   /* viền ô nhập, viền bảng thành phần */

  /* --- Màu nhấn: xanh lá rừng -------------------------------------------- */
  --green:         #3C6B44;   /* nhấn chính — nút Thêm vào giỏ (trắng trên: 6,2:1) */
  --green-deep:    #2F5536;   /* hover + CHỮ xanh cỡ nhỏ trên nền sáng (8,0:1) */
  --green-dark:    #22301F;   /* nền băng tối: CTA cuối, chân trang, bản đồ */
  --green-soft:    #E4EDDF;   /* nền chip, nền badge nhạt, nền vùng nhấn */

  /* --- Màu phụ: vàng gấc — CHỈ badge và giá sale -------------------------- */
  --gac:           #D98324;   /* vàng gấc — CHỈ làm NỀN badge, không bao giờ làm chữ */
  --gac-text:      #8F4E0C;   /* biến thể dùng cho CHỮ — 6,1:1 trên nền (AA) */
  --gac-soft:      #FBEEDC;   /* nền badge gấc nhạt */
  --sale:          #B0301F;   /* đỏ khuyến mãi — giá sale (6,0:1), trắng trên: 6,4:1 */

  /* --- Màu trên nền tối --------------------------------------------------- */
  --on-dark:       #F3F6EE;   /* chữ chính trên nền xanh đậm */
  --on-dark-soft:  #B9C6B2;   /* chữ phụ trên nền xanh đậm — AA 7,4:1 */
  --line-dark:     #3A4A36;   /* kẻ trên nền xanh đậm */

  /* --- Chữ ---------------------------------------------------------------- */
  --font-display:  'Be Vietnam Pro', system-ui, sans-serif;   /* 600/700 — tiêu đề */
  --font-body:     'Montserrat', system-ui, sans-serif;       /* thân bài 17px */
  --font-mono:     'DM Mono', ui-monospace, monospace;        /* thành phần, dung tích */

  --size-body:     17px;
  --lh-body:       1.6;       /* ≥1.5 — dấu thanh tiếng Việt cần chỗ thở */
  --lh-display:    1.1;       /* ≥1.05 — tránh cắt Ầ / ỹ / ọ */
  --track-display: -.022em;
  --track-mono:    .1em;

  /* --- Hình khối: hệ (b) -------------------------------------------------- */
  --r-card:        12px;      /* thẻ, ảnh, ô nhập */
  --r-pill:        999px;     /* chip, nút tròn, widget nổi */
  --r-sm:          8px;       /* badge, ô nhỏ */
  --border-w:      1px;       /* viền mảnh — khác hẳn viền 2px của vn-tra-sua */

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

  /* --- Chuyển động --------------------------------------------------------- */
  --ease:          cubic-bezier(.16, 1, .3, 1);
  --shadow-card:   0 1px 2px rgba(29,36,25,.05), 0 8px 24px rgba(29,36,25,.06);
  --shadow-lift:   0 4px 10px rgba(29,36,25,.08), 0 16px 40px rgba(29,36,25,.1);
}