/* ==========================================================================
   Trà Sữa Ú Òa — 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:            #FFFFFC;   /* nền trang */
  --ink:           #17161A;   /* chữ chính, viền dày */
  --ink-soft:      #4A4854;   /* chữ phụ — đạt AA trên nền sáng */
  --card:          #F3F1FF;   /* nền thẻ, nền băng phụ */
  --line:          #E4E0F5;   /* đường kẻ mảnh */

  /* --- Màu nhấn ---------------------------------------------------------- */
  --accent:        #6C4BF4;   /* tím sữa — nút chính, giá, số liệu lớn */
  --accent-deep:   #4A2FCB;   /* tím đậm — hover, chữ tím cỡ nhỏ (AA) */
  --accent-soft:   #EDE8FF;   /* tím rất nhạt — nền chip, nền badge */
  --lemon:         #F5D547;   /* vàng chanh — CHỈ dùng cho badge */
  --milk-pink:     #FF7BA9;   /* hồng sữa — CHỈ dùng cho badge */
  --sale:          #D91E45;   /* đỏ khuyến mãi — giá sale, số đếm ngược */

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

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

  /* --- Hình khối --------------------------------------------------------- */
  --r-pill:        999px;     /* mọi nút và chip */
  --r-card:        16px;      /* thẻ, ảnh */
  --r-sm:          10px;      /* ô nhập liệu */
  --border-w:      2px;       /* viền dày — chữ ký hình khối của thương hiệu */
  --shadow-pop:    4px 4px 0 var(--ink);   /* bóng đặc, không nhoè */
  --shadow-pop-sm: 3px 3px 0 var(--ink);

  /* --- 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.75rem);
  --maxw:          1240px;

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