/* ==========================================================================
   Mẹ Bé Bống — 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 ------------------------------------------------------ */
  --bg:            #FBFAF8;   /* nền trang — trắng ngà ấm */
  --ink:           #1E2226;   /* chữ chính */
  --ink-soft:      #55606A;   /* chữ phụ — 6.03:1 trên nền, đạt AA */
  --ink-faint:     #667179;   /* nhãn nhỏ — 4.79:1 trên nền, đạt AA */
  --card:          #F1F6F4;   /* nền thẻ, nền băng phụ — mint rất nhạt */
  --line:          #DDE6E2;   /* đường kẻ mảnh 1px */
  --line-soft:     #EAEFEC;   /* kẻ chia trong thẻ */

  /* --- Màu nhấn ---------------------------------------------------------- */
  --mint:          #2E8B84;   /* xanh mint đậm — nút chính, số liệu, link */
  --mint-deep:     #1F6B65;   /* mint đậm hơn — hover, chữ mint cỡ nhỏ */
  --mint-soft:     #DCEDE9;   /* mint nhạt — nền chip, nền badge */
  --peach:         #F0937E;   /* hồng đào — nền badge, chấm trang trí (chỉ nền) */
  --peach-deep:    #B0402A;   /* hồng đào đậm — GIÁ SALE, 5.57:1 trên nền (AA) */
  --peach-soft:    #FBE7E1;   /* hồng đào nhạt — nền badge sale */

  /* --- Chữ --------------------------------------------------------------- */
  --font-display:  'Be Vietnam Pro', system-ui, sans-serif;
  --font-body:     'Nunito Sans', system-ui, sans-serif;
  --font-mono:     'DM Mono', ui-monospace, monospace;

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

  /* --- Hình khối (geometry b) -------------------------------------------- */
  --r-card:        16px;      /* thẻ, ảnh, khối lớn */
  --r-pill:        999px;     /* chip, nút, badge */
  --r-sm:          10px;      /* ô nhập liệu, ô nhỏ */
  --border-w:      1px;       /* viền mảnh — chữ ký hình khối mềm của brand */
  --shadow-soft:   0 2px 10px rgba(30,34,38,.06);
  --shadow-lift:   0 8px 24px rgba(30,34,38,.10);

  /* --- Nhịp khoảng cách (thang tight/base của track VN) ------------------- */
  --section-y:     clamp(2.25rem, 4.4vw, 3.25rem);
  --gutter:        clamp(1rem, 3.6vw, 3.25rem);
  --maxw:          1256px;

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