/* ═══════════════════════════════════════════════════════════════════════
   VINAPET — DESIGN TOKENS
   Nguồn chân lý duy nhất cho màu, chữ, khoảng cách, bo góc, đổ bóng, chuyển động.
   Mọi giá trị trong styles.css phải tham chiếu về đây, không hardcode.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ───────────────────────────────────────────────────────────
     1. MÀU SẮC — lấy từ logo Vinapet (navy + teal)
     ─────────────────────────────────────────────────────────── */

  /* Navy — màu thương hiệu chính, dùng cho heading, nền section đậm */
  --vp-navy-900: #0A2B4F;
  --vp-navy-800: #0E3765;
  --vp-navy:     #12457E;
  --vp-navy-600: #17539A;
  --vp-navy-500: #1B5A9E;
  --vp-navy-200: #B9CFE6;
  --vp-navy-100: #DCE8F3;
  --vp-navy-50:  #EDF3F9;

  /* Teal — màu phụ, dùng cho icon, highlight, tag, viền nhấn */
  --vp-teal-800: #077872;
  --vp-teal-700: #0A8A85;
  --vp-teal:     #0FB9B1;
  --vp-teal-400: #3FCDC6;
  --vp-teal-100: #C9F0ED;
  --vp-teal-50:  #E4F7F5;

  /* CTA — CAM. DUY NHẤT dùng cho hành động mua/chốt đơn.
     Không dùng cam cho bất cứ thứ gì khác để mắt luôn biết "bấm vào đâu". */
  --vp-cta-800: #C2450F;
  --vp-cta-700: #E4551A;
  --vp-cta:     #FF6B2C;
  --vp-cta-400: #FF8D5C;
  --vp-cta-100: #FFDCC9;
  --vp-cta-50:  #FFF0E8;

  /* Màu chức năng */
  --vp-gold:    #FFB020;   /* sao đánh giá, badge tiết kiệm */
  --vp-gold-50: #FFF6E3;
  --vp-success: #12A150;
  --vp-success-50: #E6F6ED;
  --vp-danger:  #DC2626;
  --vp-danger-50: #FEECEC;

  /* Màu 3 dòng sản phẩm con — CHỈ dùng trong section "Ba dòng sản phẩm" */
  --line-cungdinh: #E23B32;
  --line-catchy:   #C42026;
  --line-catholic: #E06797;

  /* Nền — xen kẽ trắng / neutral mềm giữa các section */
  --bg:        #FFFFFF;
  --bg-soft:   #F6F9FB;
  --bg-cream:  #FBF7EF;
  --bg-navy:   var(--vp-navy);
  --surface:   #FFFFFF;
  --surface-2: #FAFCFD;

  /* Chữ */
  --ink:       #14202E;
  --ink-soft:  #47586B;
  --ink-muted: #7C8A99;
  --ink-invert:#FFFFFF;
  --ink-invert-soft: rgba(255, 255, 255, .78);

  /* Đường kẻ */
  --line:        #E3EBF0;
  --line-strong: #CFDBE4;
  --line-invert: rgba(255, 255, 255, .16);

  /* ───────────────────────────────────────────────────────────
     2. TYPOGRAPHY
     Be Vietnam Pro — có subset `vietnamese` đầy đủ nên ư/ơ/ứ/ườ
     hiển thị đúng, không bị fallback lệch chân chữ.
     ─────────────────────────────────────────────────────────── */
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale fluid — mobile 360px → desktop 1440px.
     Body giữ tối thiểu 16px trên mobile để đọc thoải mái. */
  --fs-display: clamp(2rem,    1.35rem + 3.1vw, 3.75rem);  /* 32 → 60 */
  --fs-h1:      clamp(1.75rem, 1.25rem + 2.4vw, 3rem);     /* 28 → 48 */
  --fs-h2:      clamp(1.5rem,  1.15rem + 1.7vw, 2.375rem); /* 24 → 38 */
  --fs-h3:      clamp(1.1875rem, 1.05rem + .7vw, 1.625rem);/* 19 → 26 */
  --fs-h4:      clamp(1.0625rem, 1rem + .35vw, 1.25rem);   /* 17 → 20 */
  --fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);   /* 17 → 20 */
  --fs-body:    1rem;                                      /* 16 */
  --fs-sm:      .875rem;                                   /* 14 */
  --fs-xs:      .8125rem;                                  /* 13 */
  --fs-micro:   .75rem;                                    /* 12 */

  --lh-tight:  1.08;
  --lh-snug:   1.24;
  --lh-normal: 1.5;
  --lh-relax:  1.68;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --ls-tight:  -.03em;   /* headline lớn */
  --ls-snug:   -.015em;
  --ls-normal: 0;
  --ls-wide:   .06em;    /* eyebrow, label viết hoa */

  /* ───────────────────────────────────────────────────────────
     3. SPACING — hệ 8px (4px cho tinh chỉnh nhỏ)
     ─────────────────────────────────────────────────────────── */
  --s-1:  .25rem;   /*   4 */
  --s-2:  .5rem;    /*   8 */
  --s-3:  .75rem;   /*  12 */
  --s-4:  1rem;     /*  16 */
  --s-5:  1.5rem;   /*  24 */
  --s-6:  2rem;     /*  32 */
  --s-7:  2.5rem;   /*  40 */
  --s-8:  3rem;     /*  48 */
  --s-9:  4rem;     /*  64 */
  --s-10: 5rem;     /*  80 */
  --s-11: 6rem;     /*  96 */
  --s-12: 8rem;     /* 128 */

  /* Padding dọc của section — thở rộng, đúng tinh thần premium D2C */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ───────────────────────────────────────────────────────────
     4. LAYOUT
     ─────────────────────────────────────────────────────────── */
  --container:        1200px;
  --container-narrow: 820px;
  --gutter:           1.25rem;   /* 20px mobile */
  --header-h:         64px;
  --announce-h:       38px;

  /* ───────────────────────────────────────────────────────────
     5. BO GÓC — nhất quán toàn trang
     ─────────────────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ───────────────────────────────────────────────────────────
     6. ĐỔ BÓNG — mềm, khuếch tán rộng (cảm giác cao cấp)
     ─────────────────────────────────────────────────────────── */
  --sh-xs:  0 1px 2px rgba(16, 40, 66, .06);
  --sh-sm:  0 2px 8px rgba(16, 40, 66, .06), 0 1px 2px rgba(16, 40, 66, .04);
  --sh-md:  0 8px 24px rgba(16, 40, 66, .08), 0 2px 6px rgba(16, 40, 66, .04);
  --sh-lg:  0 18px 48px rgba(16, 40, 66, .12), 0 4px 12px rgba(16, 40, 66, .06);
  --sh-xl:  0 32px 80px rgba(16, 40, 66, .16);
  --sh-cta:      0 8px 22px rgba(255, 107, 44, .32);
  --sh-cta-hover:0 14px 32px rgba(255, 107, 44, .42);
  --sh-teal:     0 8px 22px rgba(15, 185, 177, .28);

  /* Viền focus — bắt buộc cho accessibility AA */
  --ring: 0 0 0 3px rgba(255, 107, 44, .38);
  --ring-navy: 0 0 0 3px rgba(18, 69, 126, .3);

  /* ───────────────────────────────────────────────────────────
     7. GRADIENT — dùng tiết chế, chỉ ở hero / section nhấn
     ─────────────────────────────────────────────────────────── */
  --grad-cta:   linear-gradient(135deg, #FF7E3F 0%, #FF6B2C 55%, #F1571A 100%);
  --grad-navy:  linear-gradient(160deg, #12457E 0%, #0E3765 60%, #0A2B4F 100%);
  --grad-teal:  linear-gradient(135deg, #17C9C0 0%, #0FB9B1 60%, #0A8A85 100%);
  --grad-soft:  linear-gradient(180deg, #FFFFFF 0%, #F6F9FB 100%);
  --grad-hero:  radial-gradient(90% 70% at 78% 18%, #E4F7F5 0%, rgba(228,247,245,0) 62%),
                radial-gradient(70% 60% at 8% 92%, #FFF0E8 0%, rgba(255,240,232,0) 60%),
                linear-gradient(180deg, #FFFFFF 0%, #F8FBFC 100%);

  /* ───────────────────────────────────────────────────────────
     8. CHUYỂN ĐỘNG
     ─────────────────────────────────────────────────────────── */
  --dur-fast:  .16s;
  --dur:       .28s;
  --dur-slow:  .5s;
  --dur-reveal:.7s;

  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);      /* mượt, dùng cho reveal */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* nảy nhẹ, dùng cho badge/toast */

  /* ───────────────────────────────────────────────────────────
     9. Z-INDEX — khai báo tập trung để không bao giờ đè nhầm
     ─────────────────────────────────────────────────────────── */
  --z-base:      1;
  --z-sticky:    100;
  --z-header:    200;
  --z-mmenu:     300;
  --z-fab:       400;
  --z-stickycta: 450;
  --z-toast:     500;
  --z-drawer:    600;
  --z-modal:     700;
}

/* Tablet trở lên: gutter rộng hơn, header cao hơn */
@media (min-width: 768px) {
  :root {
    --gutter:   2rem;
    --header-h: 72px;
  }
}

/* Tôn trọng người dùng tắt hiệu ứng (accessibility) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .01ms;
    --dur:      .01ms;
    --dur-slow: .01ms;
    --dur-reveal: .01ms;
  }
}