/* =========================================================================
   TRANG SỨC NGỌC BÍCH — tokens.css
   Toàn bộ giá trị thương hiệu nằm ở đây. Đổi file này = đổi cả website.
   Nạp TRƯỚC thẻ <style> nội tuyến trong index.html.
   ========================================================================= */
:root{

  /* ---------- NỀN & MỰC ---------------------------------------------------
     Nền ngà ấm (không phải #FFF), mực xám than (không phải #000).
     Bản này cố tình SÁNG — khác hẳn dòng trang sức nền đen siêu sang.       */
  --nen:        #FBFAF7;   /* nền trang — ngà ấm                             */
  --nen-sau:    #F2F0EB;   /* nền chìm — dải phụ, mặt thẻ                    */
  --the:        #FFFFFE;   /* mặt thẻ sản phẩm                               */
  --muc:        #1C1E22;   /* mực chính — xám than                           */
  --muc-nhat:   #55595F;   /* chữ phụ trên nền sáng — AA ≥ 7:1               */
  --muc-mo:     #6E737A;   /* chỉ dùng cho chữ ≥ 19px hoặc icon              */
  --ke:         #E3E0D8;   /* đường kẻ 1px                                   */
  --ke-dam:     #CFCABE;   /* kẻ đậm — viền bảng size                        */

  /* ---------- MÀU NHẤN ----------------------------------------------------
     Xanh ngọc = màu nhấn DUY NHẤT (nút, giá, số liệu, hover, chip đang chọn).
     Vàng đồng = màu PHỤ, chỉ dùng cho đường kẻ mảnh và badge quà tặng.      */
  --ngoc:       #2E7D74;   /* xanh ngọc bích — accent chính                  */
  --ngoc-dam:   #22615A;   /* hover / chữ xanh cỡ nhỏ trên nền sáng          */
  --ngoc-sau:   #143A36;   /* nền dải tối, footer                            */
  --ngoc-mo:    #E4EFED;   /* nền chip / vùng nhấn nhạt                      */
  --dong:       #B58A46;   /* vàng đồng — CHỈ kẻ mảnh + badge quà            */
  --dong-sang:  #D9AE68;   /* vàng đồng SÁNG — chữ nhỏ trên nền xanh sâu     */
  --dong-chu:   #7A5A22;   /* vàng đồng cho CHỮ — AA ≥ 4.9:1 trên nền sáng   */
  --dong-mo:    #F7EFE0;   /* nền badge quà tặng                             */
  --sale:       #B3261E;   /* đỏ khuyến mãi — giá sale, số đếm ngược         */

  /* ---------- MÀU TRÊN NỀN TỐI -------------------------------------------- */
  --tren-toi:   #F4F7F5;   /* chữ chính trên nền xanh sâu                    */
  --tren-toi-2: #A9C2BD;   /* chữ phụ trên nền xanh sâu — AA ≥ 4.5:1         */
  --ke-toi:     #2A5B55;   /* kẻ trên nền xanh sâu                           */

  /* ---------- CHỮ ---------------------------------------------------------
     2 họ chữ + 1 mono. Cả ba đều có bộ dấu tiếng Việt đầy đủ.
     Be Vietnam Pro 600/700 → tiêu đề. Montserrat 400/500 → thân.
     IBM Plex Mono → mã SP, trọng lượng bạc, nhãn nhỏ.                       */
  --display:  'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --than:     'Montserrat', system-ui, -apple-system, sans-serif;
  --mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --co-than:      17px;    /* cỡ chữ thân                                    */
  --cao-than:     1.6;     /* line-height thân — ≥1.5 cho dấu tiếng Việt     */
  --cao-display:  1.09;    /* line-height tiêu đề — ≥1.05, tránh cắt Ầ/ỹ/ọ   */
  --giam-display: -.025em; /* letter-spacing âm cho tiêu đề                  */
  --tang-mono:    .11em;   /* letter-spacing dương cho nhãn mono             */

  /* ---------- HÌNH HỌC ----------------------------------------------------
     Hệ radius (b): 12px thẻ/ảnh, 999px chip. Tuyệt đối không dùng 4px.      */
  --bo:       12px;
  --bo-nho:   8px;         /* ô nhập liệu                                    */
  --bo-chip:  999px;

  /* ---------- KHOẢNG CÁCH ------------------------------------------------- */
  --khung:  1240px;                          /* bề rộng nội dung tối đa      */
  --le:     clamp(1.15rem, 4vw, 2.5rem);     /* lề trái/phải                 */
  --doc:      56px;                          /* padding dọc mục — base       */
  --doc-hep:  40px;                          /* padding dọc mục — tight      */

  --khe-1: 1.5rem;   /* khe lưới lớn   */
  --khe-2: 1rem;     /* khe lưới vừa   */
  --khe-3: .7rem;    /* khe lưới nhỏ   */

  /* ---------- CHUYỂN ĐỘNG ------------------------------------------------- */
  --nhip: cubic-bezier(.16, 1, .3, 1);

  /* ---------- BÓNG -------------------------------------------------------- */
  --bong-1: 0 1px 2px rgba(28,30,34,.04), 0 2px 8px rgba(28,30,34,.05);
  --bong-2: 0 4px 12px rgba(28,30,34,.06), 0 16px 36px rgba(28,30,34,.08);
}