/* ==========================================================================
   F2F v2 · Design tokens
   Một nguồn duy nhất cho màu, chữ, khoảng cách, lưới, tỉ lệ ảnh, chuyển động.
   Component chỉ được đọc biến ở đây — không viết mã màu/khoảng cách trần.
   ========================================================================== */
:root {
  /* ── Color ─────────────────────────────────────────────────────────────
     Nền trắng ấm, chữ than đen. Màu nhấn duy nhất = đỏ rượu F2F (#7A1C2E,
     kế thừa từ nhận diện cũ) — chỉ dùng cho chi tiết nhỏ, không phủ mảng. */
  --c-bg:        #F4F1EC;   /* warm white — nền trang */
  --c-bg-alt:    #EAE5DD;   /* stone — section xen kẽ */
  --c-paper:     #FBFAF7;   /* form, modal */
  --c-ink:       #151413;   /* chữ chính, nút chính */
  --c-ink-soft:  #3B3936;   /* thân bài */
  --c-mute:      #7A756E;   /* metadata, nhãn phụ */
  --c-line:      rgba(21, 20, 19, .14);
  --c-line-strong: rgba(21, 20, 19, .32);
  --c-dark:      #121211;   /* section tối */
  --c-on-dark:   #F4F1EC;
  --c-on-dark-mute: rgba(244, 241, 236, .58);
  --c-line-dark: rgba(244, 241, 236, .16);
  --c-accent:    #7A1C2E;   /* F2F bordeaux — dùng tiết kiệm */
  --c-error:     #A3352B;
  --c-success:   #2F5D46;

  /* ── Typography (bộ font giống Marcher, theo yêu cầu chủ shop 08/10/2026) ──
     Tiêu đề: Cormorant Garamond (đủ dấu tiếng Việt).
     Thân bài / nhãn / nút: Jost. Jost THIẾU dải U+1EA0–1EF1 (ạ ả ấ ế ệ ồ ữ ự…),
     nên xếp Mulish ngay sau — trình duyệt chỉ lấy đúng các glyph thiếu từ Mulish
     (đã so sánh: khớp nét hơn Montserrat/Lexend/Be Vietnam Pro). */
  --f-sans:  'Jost', 'Mulish', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --f-serif: 'Cormorant Garamond', 'Times New Roman', serif;

  --t-display: clamp(56px, 9vw, 148px);    /* hero */
  --t-h1:      clamp(46px, 6.6vw, 108px);  /* statement, final CTA */
  --t-h2:      clamp(40px, 5vw, 80px);     /* section title */
  --t-h3:      clamp(28px, 2.6vw, 38px);   /* card / step title */
  --t-lead:    clamp(17px, 1.35vw, 20px);
  --t-body:    15px;
  --t-small:   13px;
  --t-eyebrow: 11px;

  --lh-tight: .95;
  --lh-head:  1.04;
  --lh-body:  1.65;
  --tr-display: -.02em;
  --tr-head:    -.01em;
  --tr-eyebrow: .22em;

  /* ── Spacing (8pt) ── */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 144px;
  --section-y: clamp(96px, 12vw, 176px);

  /* ── Grid ── */
  --gutter: clamp(20px, 4.4vw, 64px);   /* lề trang trái/phải */
  --col-gap: clamp(12px, 1.6vw, 24px);
  --max: 1680px;

  /* ── Image ratios ── */
  --r-portrait: 4 / 5;
  --r-tall:     2 / 3;
  --r-land:     3 / 2;
  --r-wide:     16 / 9;

  /* ── Motion: chậm, có chủ đích ── */
  --ease: cubic-bezier(.22, .61, .21, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d-fast: .25s;
  --d-base: .5s;
  --d-slow: 1.1s;
  --d-img:  1.6s;

  /* ── Layers ── */
  --z-header: 50;
  --z-sticky: 40;
  --z-menu:   60;
  --z-modal:  80;

  --header-h: 72px;
}
@media (max-width: 900px) {
  :root { --header-h: 60px; }
}