/* ============================================================================
   tokens.css — hệ thiết kế Heritage Voice v2
   Bóc từ Figma "Heritage Voice" (W4kaft5y6w1eMPnzTT5AA2), trang Di_san_noi.
   Tài liệu nguồn: docs/superpowers/specs/2026-09-08-v2-bang-token.md

   🪤 File Figma còn lẫn bộ biến gốc của template CHƯA DỌN. Nếu bạn thấy
      #4E61F6 (xanh tím) hoặc #EDEFFE ở bất cứ đâu trong mã v2 → SAI, dừng lại.
      Tông của disannoi là CAM (#ec650b). David chốt 2026-09-08.
   ============================================================================ */

:root {
  /* ---- Primary: thang cam ------------------------------------------------ */
  --primary-50:   #fff6f0;   /* nền cam nhạt nhất: đầu trang, vùng nhấn      */
  --primary-100:  #fee9db;   /* nền phụ, viền nhạt                           */
  --primary-200:  #ffd0ae;   /* viền 3px khi nút/ô được chọn (focus)         */
  --primary-300:  #ffb17a;
  --primary-400:  #f98a42;
  --primary-500:  #ec650b;   /* ★ màu thương hiệu — nền nút mặc định         */
  --primary-600:  #d85a09;
  --primary-700:  #b84b07;   /* nút khi rê chuột                             */
  --primary-800:  #8b3906;   /* nút khi bấm xuống                            */
  --primary-900:  #5e2604;

  /* ---- Xám --------------------------------------------------------------- */
  --grey-50:      #f9fafb;   /* ★ nền trang (David chốt thay cho #f8f8f8)    */
  --grey-100:     #f3f4f6;
  --grey-200:     #e5e7ea;   /* nền nút/ô vô hiệu                            */
  /* 🔴 --grey-300 BỊ THIẾU cho tới 26/09 nhưng có 4 chỗ dùng var(--grey-300):
     doi-ngon-ngu.js:42 và my-tour-detail.html:113 (tay kéo tấm trượt) → VÔ HÌNH;
     my-tour-detail.html:90 và collection.html:339 (viền) → rơi về currentColor = ĐEN.
     Biến không khai thì CSS coi cả khai báo là hỏng, không có cảnh báo nào. */
  --grey-300: #d2d5db;
  --grey-400:     #9ea2ae;   /* chữ + biểu tượng vô hiệu                     */

  /* ---- Chữ · biểu tượng · nền -------------------------------------------- */
  --text-black:        #131927;  /* chữ chính                                */
  --text-strong:       #292524;  /* Text-color-style — nâu-đen ấm            */
  --text-white:        #ffffff;
  --text-grey:         #9ea2ae;  /* chữ phụ                                  */
  --text-disabled-2:   #a8a29e;
  --icon-grey:         #9ea2ae;
  --icon-light-grey:   #d2d5db;
  --surface-white:     #ffffff;  /* nền thẻ                                  */
  --page-bg:           var(--grey-50);

  /* ---- Màu trạng thái ----------------------------------------------------- */
  --success:      #43b75d;   --success-bg:  #ecf8ef;
  --info:         #0095ff;   --info-bg:     #e6f4ff;
  --warning:      #ffaa00;   --warning-bg:  #fff7e6;
  --error:        #ee443f;   --error-bg:    #fdecec;

  /* ---- Bo góc ------------------------------------------------------------- */
  --radius-xs:    8px;    /* nút Small/Tiny, ô nhỏ                            */
  --radius-sm:    12px;   /* nút Giant/Large/Medium, thẻ                      */
  --radius-xl:    24px;   /* khối lớn, cửa sổ nổi                             */

  /* Bo góc THỰC DÙNG, đo từ chính các thành phần trong Figma (08/09) — ba bậc
     này khác thang radius-xs/sm/xl ở trên, đừng lẫn:
       6px  ảnh nhỏ trong lưới (106×80) và chip
       10px thẻ nội dung và ảnh trong thẻ (172×212 · 332×100 · 117×100)
       15px mảng lớn (thẻ trắng chứa nhiều thứ) */
  --radius-thumb:  6px;
  --radius-card:  10px;
  --radius-panel: 15px;

  /* ---- Bóng đổ (màu #1c1917 — nâu-đen ấm, KHÔNG phải đen thuần) ---------- */
  --shadow-0:  none;
  --shadow-1:  0 2px 6px rgba(28,25,23,.06);
  --shadow-2:  0 4px 12px rgba(28,25,23,.08);
  --shadow-3:  0 8px 24px rgba(28,25,23,.10);
  --shadow-4:  0 16px 36px rgba(28,25,23,.12), 0 16px 36px rgba(28,25,23,.08);
  --shadow-5:  0 24px 60px rgba(28,25,23,.16);

  /* ---- Lưới (đo từ Figma) ------------------------------------------------- */
  --page-w:       412px;  /* khung màn hình                                   */
  --gutter:       20px;   /* lề trang  → vùng nội dung 372px                  */
  --card-pad:     20px;   /* đệm trong thẻ → 332px                            */
  --card-gap:     28px;   /* khe giữa 2 thẻ (172×2 + 28 = 372)                */
  --card-w:       172px;  /* thẻ đôi                                          */

  /* ---- Chữ: Google Sans Flex (biến thiên) -------------------------------- */
  --font: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Google Sans Flex là chữ BIẾN THIÊN — thiếu 3 trục này là chữ sai dáng. */
body, button, input, textarea, select {
  font-family: var(--font);
  font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100;
}

/* ============================================================================
   BẬC CHỮ — 15 bậc, tất cả letter-spacing 0
   ============================================================================ */
.t-h1        { font-size: 48px; line-height: 58px; font-weight: 600; }
.t-h2        { font-size: 40px; line-height: 48px; font-weight: 600; }
.t-h3        { font-size: 32px; line-height: 38px; font-weight: 600; }
.t-h4        { font-size: 28px; line-height: 34px; font-weight: 600; }
.t-h5        { font-size: 24px; line-height: 28px; font-weight: 600; }
.t-subtitle  { font-size: 18px; line-height: 28px; font-weight: 600; }
.t-subtitle2 { font-size: 16px; line-height: 24px; font-weight: 600; }
.t-body1     { font-size: 16px; line-height: 24px; font-weight: 400; }
.t-body2     { font-size: 16px; line-height: 24px; font-weight: 500; }
.t-body3     { font-size: 14px; line-height: 20px; font-weight: 400; }
.t-body4     { font-size: 14px; line-height: 20px; font-weight: 500; }
.t-label     { font-size: 12px; line-height: 16px; font-weight: 500; }
.t-caption1  { font-size: 12px; line-height: 16px; font-weight: 400; }
.t-caption2  { font-size: 12px; line-height: 16px; font-weight: 500; }
.t-caption3  { font-size: 10px; line-height: 14px; font-weight: 500; }

/* ============================================================================
   NÚT — 5 cỡ × 5 trạng thái (kiểu Filled)
   🪤 Focus KHÔNG đổi màu nền: giữ cam, chỉ thêm viền 3px --primary-200.
   ============================================================================ */
.btn {
  box-sizing: border-box;   /* thiếu dòng này thì padding cộng thêm vào width → tràn ngang */
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  background: var(--primary-500);
  color: var(--text-white);
  border: 0; cursor: pointer;
  font-weight: 600;
  font-family: var(--font);
  font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn > .btn-text { padding: 0 8px; }

.btn-giant  { padding: 16px 24px; font-size: 18px; line-height: 24px; }
.btn-large  { height: 48px; padding: 14px 20px; font-size: 16px; line-height: 20px; }
.btn-medium { height: 40px; padding: 12px 16px; font-size: 14px; line-height: 16px; }
.btn-small  { height: 32px; padding:  8px 12px; font-size: 12px; line-height: 16px; border-radius: var(--radius-xs); }
.btn-tiny   { height: 24px; padding:  6px  8px; font-size: 10px; line-height: 12px; border-radius: var(--radius-xs); }

/* Chỉ biểu tượng — đệm đều, không có đệm ngang của chữ */
.btn-icon.btn-giant  { padding: 16px; }
.btn-icon.btn-large  { padding: 12px; }
.btn-icon.btn-medium { padding:  8px; }
.btn-icon.btn-small  { padding:  4px; }
.btn-icon.btn-tiny   { padding:  4px; }
.btn-icon.btn-giant  svg, .btn-icon.btn-large svg,
.btn-icon.btn-medium svg, .btn-icon.btn-small svg { width: 24px; height: 24px; }
.btn-icon.btn-tiny   svg { width: 16px; height: 16px; }

.btn:hover              { background: var(--primary-700); }
.btn:focus-visible      { background: var(--primary-500); outline: 0;
                          box-shadow: 0 0 0 3px var(--primary-200); }
.btn:active             { background: var(--primary-800); }
.btn:disabled,
.btn[aria-disabled="true"] { background: var(--grey-200); color: var(--grey-400);
                             cursor: default; }

/* ============================================================================
   Ô NHẬP — 2 cỡ × 2 kiểu × 9 trạng thái
   ============================================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-black); }
.field-hint  { font-size: 12px; line-height: 16px; color: var(--text-grey); }

.input {
  width: 100%; box-sizing: border-box;
  background: var(--surface-white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  color: var(--text-black);
  font-family: var(--font);
  font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100;
  outline: 0;
}
.input-large  { height: 48px; padding: 0 16px; font-size: 16px; }
.input-medium { height: 40px; padding: 0 14px; font-size: 14px; }
.input-filled { background: var(--grey-50); }
.input::placeholder { color: var(--text-grey); }
.input:hover           { border-color: var(--grey-400); }
.input:focus           { border-color: var(--primary-500);
                         box-shadow: 0 0 0 3px var(--primary-200); }
.input:disabled        { background: var(--grey-100); color: var(--grey-400);
                         border-color: var(--grey-200); cursor: default; }
.input.is-success      { border-color: var(--success); }
.input.is-info         { border-color: var(--info); }
.input.is-warning      { border-color: var(--warning); }
.input.is-error        { border-color: var(--error); }
.field.is-success .field-hint { color: var(--success); }
.field.is-info    .field-hint { color: var(--info); }
.field.is-warning .field-hint { color: var(--warning); }
.field.is-error   .field-hint { color: var(--error); }

/* ============================================================================
   NỀN CHUNG
   ============================================================================ */
/* 🪤 Đã vấp HAI lần vì thiếu dòng này: padding cộng thêm vào width/height làm
   nút tràn ngang (08/09) và ô tìm kiếm không tròn được hai đầu (08/09).
   Đặt toàn cục để khỏi mắc lần thứ ba. */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page-bg);
  color: var(--text-black);
  font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
/* Khoá bề ngang như v1 (disannoi là mobile-only) */
.page { max-width: 430px; margin: 0 auto; background: var(--page-bg);
        min-height: 100vh; position: relative; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }