/* ==========================================================================
   tokens.css — NGUỒN DUY NHẤT cho màu, font, khoảng cách, bo góc.
   Đổi diện mạo site thì SỬA Ở ĐÂY. Cấm hard-code mã màu trong HTML.
   Giá trị trích từ site WordPress cũ (specs/00_system_config.md § C).
   ========================================================================== */

:root {
  /* --- Màu thương hiệu --- */
  --c-primary:      #20295b;   /* navy — header, footer, tiêu đề */
  --c-primary-soft: #2d3872;
  --c-accent:       #f4b755;   /* gold — nút, giá, đường nhấn */
  --c-accent-dark:  #d99a33;

  /* --- Màu nền & chữ --- */
  --c-bg:        #ffffff;
  --c-bg-alt:    #f7f7f9;
  --c-bg-soft:   #ebebeb;
  --c-dark:      #161922;
  --c-text:      #444444;
  --c-text-muted:#626262;
  --c-on-dark:   #ffffff;
  --c-border:    #e2e2e6;

  /* --- Trạng thái --- */
  --c-error:   #c0392b;
  --c-success: #1e7a4d;

  /* Nâu thương hiệu — lấy đúng màu nền của ảnh banner (#4E3928), nên footer và
     banner nối liền nhau thay vì đá nhau navy/nâu. Dùng cho footer. */
  --c-brown:      #4e3928;
  --c-brown-deep: #3a2a1d;   /* đậm hơn — dải bản quyền cuối footer */

  /* --- Sắc nữ tính: hồng phấn / kem, dùng làm NỀN DỊU, không dùng cho chữ --- */
  --c-blush:      #fdf1f0;   /* hồng phấn rất nhạt */
  --c-blush-deep: #f3d9d6;   /* hồng phấn đậm hơn — viền, đường phân cách */
  --c-cream:      #fdfaf5;   /* kem — nền khối xen kẽ */
  --c-rose:       #c98b86;   /* hồng trầm — icon, hoạ tiết */

  /* --- Chữ --- */
  --f-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Tiêu đề: serif nét thanh đậm — mềm và nữ tính hơn sans-serif (§4.2c QT-D3) */
  --f-display: 'Playfair Display', 'Lato', Georgia, serif;
  --f-ui:      'Lato', 'Roboto', system-ui, sans-serif;   /* nút, nhãn, menu */

  --fs-xs:  0.8125rem;
  --fs-sm:  0.9375rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 1.75rem;
  --fs-4xl: 2.125rem;

  --lh-tight: 1.2;
  --lh-body:  1.7;

  /* --- Khoảng cách --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 2.5rem;
  --sp-9: 3.5rem;

  /* --- Hình khối --- */
  --radius:    6px;
  --radius-lg: 12px;
  --shadow:    0 2px 12px rgba(32, 41, 91, 0.08);
  --shadow-lg: 0 8px 32px rgba(32, 41, 91, 0.14);
  --shadow-soft: 0 6px 24px rgba(201, 139, 134, 0.18);   /* bóng ám hồng, mềm hơn */

  /* Viền ảnh — §4.2c QT-D3 */
  --frame-w: 1px;
  --frame-c: var(--c-accent);
  --frame-offset: 10px;

  /* --- Bố cục --- */
  --container: 1200px;
  --header-h:  76px;
  --header-h-mobile: 58px;

  /* Vùng an toàn iPhone (tai thỏ / Dynamic Island / thanh Home) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* MOBILE-FIRST: giá trị ở :root là cho ĐIỆN THOẠI. Desktop phóng to lên. */
@media (min-width: 1024px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
  }
}