/* ==========================================================================
   MEKACAO — Design tokens
   Bảng màu 60–30–10 theo brand guideline:
     60%  đỏ cacao   #a51e26
     30%  kem        #fff8e7
     10%  xanh Mekong #98bbe3
   ========================================================================== */

:root {
  /* ---------- Đỏ cacao: thang độ đậm nhạt = chiều sâu hương vị cacao ------ */
  --red-950: #360a0d;
  --red-900: #4d0f13;
  --red-800: #6b141a;
  --red-700: #871a21;
  --red-600: #a51e26;   /* ★ PRIMARY — màu chủ đạo 60% */
  --red-500: #c02730;
  --red-400: #d5444c;
  --red-300: #e57f85;
  --red-200: #f2bcbf;
  --red-100: #f9e0e2;
  --red-50:  #fdf1f2;

  /* ---------- Kem: nền ấm, chiếm 30% ------------------------------------- */
  --cream-50:  #fffdf8;
  --cream-100: #fff8e7;  /* ★ nền chính */
  --cream-200: #fdf2dc;
  --cream-300: #f8e8ca;
  --cream-400: #efd9b2;
  --cream-500: #ddc196;

  /* ---------- Xanh Mekong: điểm nhấn 10% --------------------------------- */
  --blue-100: #e6f0f9;
  --blue-200: #cfe0f1;
  --blue-300: #98bbe3;   /* ★ accent */
  --blue-400: #6f9bcf;
  --blue-500: #4d7cb3;

  /* ---------- Mực / chữ --------------------------------------------------- */
  --ink:       #2b1411;  /* nâu đen — chữ chính */
  --ink-soft:  #6d4a44;  /* chữ phụ */
  --ink-mute:  #9c7a73;  /* chữ mờ */
  --line:      #e6d3bd;  /* đường kẻ trên nền kem */
  --line-red:  rgba(165, 30, 38, .18);

  /* ---------- Vai trò ngữ nghĩa ------------------------------------------ */
  --bg:            var(--cream-100);
  --bg-alt:        var(--cream-200);
  --surface:       var(--cream-50);
  --surface-sunk:  var(--cream-200);
  --on-bg:         var(--ink);
  --primary:       var(--red-600);
  --on-primary:    var(--cream-100);
  --primary-soft:  var(--red-100);
  --accent:        var(--blue-300);
  --on-accent:     var(--red-900);

  /* ---------- Typography -------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* thang chữ — clamp để tự co theo viewport */
  --fs-display-1: clamp(2.1rem, 7.4vw, 5.25rem);
  --fs-display-2: clamp(1.8rem, 5.4vw, 3.75rem);
  --fs-h1:        clamp(1.7rem, 4.4vw, 3rem);
  --fs-h2:        clamp(1.45rem, 3.4vw, 2.35rem);
  --fs-h3:        clamp(1.25rem, 1.7vw, 1.55rem);
  --fs-h4:        1.125rem;
  --fs-body-lg:   1.0625rem;
  --fs-body:      0.9375rem;
  --fs-sm:        0.8125rem;
  --fs-xs:        0.6875rem;

  --lh-tight: 1.06;
  --lh-snug:  1.25;
  --lh-body:  1.7;

  --tracking-eyebrow: .22em;

  /* ---------- Spacing (thang 8) ------------------------------------------ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --section-y: clamp(64px, 8vw, 120px);

  /* ---------- Layout ------------------------------------------------------ */
  --page: 1440px;
  --content: 1240px;
  --gutter: clamp(20px, 4vw, 100px);

  /* ---------- Bo góc ------------------------------------------------------ */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;
  --r-pill: 999px;
  --r-arch: 300px 300px 0 0;   /* khung vòm — motif chính */

  /* ---------- Đổ bóng ----------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(43,20,17,.10), 0 1px 3px rgba(43,20,17,.06);
  --sh-2: 0 2px 6px rgba(43,20,17,.10), 0 8px 24px rgba(43,20,17,.07);
  --sh-3: 0 4px 12px rgba(43,20,17,.10), 0 18px 48px rgba(43,20,17,.12);
  --sh-red: 0 10px 30px rgba(165,30,38,.28);

  /* ---------- Chuyển động ------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .18s;
  --dur-2: .32s;
  --dur-3: .6s;

  --header-h: 68px;
  --topbar-h: 34px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; }
}