/* ==========================================================================
   Hệ token — nguồn duy nhất cho màu, chữ, khoảng cách.
   Giá trị lấy nguyên từ design-system/giai-phap-kinh-mat/MASTER.md,
   đã đo đạt WCAG AA ở cả 8 cặp màu. Đừng sửa rời rạc ở từng component.
   ========================================================================== */

/* --- font: 3 subset mỗi họ chữ ------------------------------------------
   Tiếng Việt cần đủ CẢ BA: các chữ ă â đ ơ ư nằm ở latin-ext chứ không
   phải vietnamese. Thiếu latin-ext là chữ rơi về font dự phòng ở đúng
   những ký tự đó. unicode-range để trình duyệt chỉ tải file cần dùng.
   ----------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('../fonts/manrope-600-700-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('../fonts/manrope-600-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('../fonts/manrope-600-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/hanken-grotesk-400-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/hanken-grotesk-400-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/hanken-grotesk-400-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* --- nền & mực (Luminous Vision) --------------------------------------- */
  --ink: #1b1c1c;          /* 16,30:1 trên --page */
  --ink-2: #303030;
  --ink-soft: #5b4041;     /* 8,89:1 — on-surface-variant */
  --page: #fcf9f8;
  --surface: #ffffff;
  --surface-2: #f6f3f2;
  /* Task 11 (B1): biến dùng ở woo-single.css (nền nút thêm giỏ khi VÔ HIỆU —
     chưa chọn đủ biến thể) nhưng chưa từng được định nghĩa ở đây — nút mất
     hẳn màu nền, chỉ còn viền + chữ. Có từ commit 4c51d37, trước cả dự án
     Luminous Vision. Đậm hơn --surface-2 một bậc để "trông rõ là chưa dùng
     được" (đúng yêu cầu comment tại chỗ dùng nó), không cần đạt ngưỡng tương
     phản riêng vì đây là NỀN của trạng thái disabled, không phải chữ. */
  --surface-3: #ece6e5;
  --off-white: #F9F9F9;
  --line: #e4bdbe;         /* outline-variant, ngả hồng */
  --line-2: #8f6f70;       /* outline */

  /* --- màu nhấn ----------------------------------------------------------
     HAI biến chứ không một. #E22D4F chỉ đạt 4,45:1 trên trắng nên KHÔNG
     được dùng cho chữ nhỏ; giá tiền và liên kết phải dùng --primary. */
  --primary: #ba0036;      /* 6,69:1 — chữ nhỏ, giá, liên kết */
  --primary-dam: #920029;
  --rose-red: #E22D4F;     /* mảng lớn, viền, icon, nút đặc */
  --pale-pink: #FDEFF2;
  --accent-soft: #FDEFF2;

  /* --- trạng thái -------------------------------------------------------- */
  --loi: #ba1a1a;
  --loi-nhat: #fdeceb;     /* Task 11 (B2): nền nhạt cho khối thông báo lỗi */
  --con-hang: #1f6b3a;

  /* --- chữ --------------------------------------------------------------- */
  --font-tieu-de: 'Manrope', system-ui, sans-serif;
  --font-than: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lh-tieu-de: 1.18;
  --lh-than: 1.6;
  --do-rong-chu: 54ch;

  /* --- khoảng cách: nhịp 8px của Luminous Vision -------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 5rem;            /* section-gap 80px */

  /* --- hình khối --------------------------------------------------------- */
  --bo-goc: 8px;           /* mặc định, thay 3px cũ */
  --bo-goc-lon: 16px;      /* thẻ sản phẩm */
  --bo-goc-vien-thuoc: 999px;
  --vien: 1px solid var(--line);
  --rong-toi-da: 1280px;   /* container-max */

  /* Chiều cao thật của đầu trang dính (Task 4), đo bằng Playwright
     getBoundingClientRect() SAU KHI chờ document.fonts.ready (đo lúc font còn
     chưa vào thì ra số nhỏ hơn thật — đã dính lỗi này ở vòng sửa 1: ghi
     "125px" nhưng thật ra là 129px, khiến biên an toàn thành ÂM 1px). Làm
     tròn lên bội số 8px làm biên an toàn — KHÔNG đoán.
     Đo lại nếu đổi chiều cao đầu trang (logo, hotline, cỡ chữ...). */
  --cao-dau-trang: 136px;  /* đo được 129px, ổn định từ 768px tới 1440px */

  /* --- chiều sâu: phân tầng + kính mờ, không đổ bóng nặng ----------------- */
  --bong-hong: 0 10px 30px rgba(226, 45, 79, 0.08);
  --kinh-nen: rgba(255, 255, 255, 0.8);
  --kinh-mo: blur(12px);

  /* --- chuyển động ------------------------------------------------------- */
  --nhanh: 150ms;
  --vua: 220ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --nhanh: 0ms; --vua: 0ms; }
}

/* Task A (Giai đoạn 2, ô tìm kiếm): trước đây 768px đo ra CÙNG chiều cao với
   desktop (129px, ổn định 768px→1440px) vì .gpkm-dau-trang__giua RỖNG không
   góp bề rộng nào. Từ khi có ô tìm kiếm thật, header.css ép nó xuống HÀNG
   RIÊNG ở mốc 899px (không dùng chung 767px của nav — xem chú thích tại
   .gpkm-dau-trang__giua trong header.css), nên 768px KHÔNG còn bằng desktop
   nữa — cần một bậc riêng. */
@media (max-width: 899px) {
  /* Đo thật (Playwright, sau document.fonts.ready): 191px ổn định ở CẢ 768px
     lẫn 899px (nav vẫn ở dạng desktop tới tận 767px, chỉ ô tìm kiếm xuống
     hàng riêng) — làm tròn lên bội số 8px thành 192px. */
  :root { --cao-dau-trang: 192px; }
}

/* Mốc 767px CỐ Ý khớp với mốc chuyển sang menu cuộn ngang trong header.css. */
@media (max-width: 767px) {
  /* Đầu trang cao hơn ở mobile: ngoài ô tìm kiếm đã xuống hàng riêng (mốc
     899px ở trên), logo + hotline CŨNG không đủ chỗ trên một hàng ở bề rộng
     hẹp nên tự xuống dòng thêm lần nữa — đo được 235px ổn định ở 375px và
     320px (767px tự nó đo ra 175px vì ở đó logo+hotline còn vừa một hàng,
     nhưng 235px là biên an toàn đúng cho các bề rộng thật sự "mobile" mà bộ
     test dùng — 375px/320px), làm tròn lên bội số 8px thành 240px. */
  :root { --cao-dau-trang: 240px; }
}