/* ==========================================================================
   Design tokens — trích từ Figma "Thiết Bị Toàn Cầu - X3Sales"
   File: W1WN5QdJQoJeIOSuZEohpY · Page "UI Design" (1:9)
   ========================================================================== */

:root {
  /* ---- Màu ---------------------------------------------------------- */
  --c-navy: #0b2c5f;
  --c-blue: #0056d6;
  --c-orange: #ff6b00;

  --c-text: #191c22;
  --c-desc: #656e7f;
  --c-meta: #535a67;

  --c-white: #ffffff;
  --c-black: #000000;

  --c-border: #e7f0fb;
  --c-border-2: #d7e1f2;

  /* Dẫn xuất — dùng cho nền nhạt, hover, overlay */
  --c-blue-50: #f2f7ff;
  --c-blue-100: #e0ecff;
  --c-orange-50: #fff4ec;
  --c-navy-overlay: rgba(11, 44, 95, 0.72);

  /* ---- Typography --------------------------------------------------- */
  /* Đúng font của thiết kế gốc — Google Sans có trên Google Fonts,
     bản variable 400..700 kèm subset vietnamese. */
  --font-sans: "Google Sans", "Be Vietnam Pro", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-script: "NVN Motherland Signature", "Dancing Script", cursive;

  --fs-display-1: 48px;
  --lh-display-1: 62px;
  --fs-display-2: 40px;
  --lh-display-2: 52px;
  --fs-display-3: 32px;
  --lh-display-3: 42px;
  --fs-display-4: 28px;
  --lh-display-4: 36px;

  --fs-h1: 24px;
  --lh-h1: 32px;
  --fs-h2: 20px;
  --lh-h2: 28px;
  --fs-h3: 18px;
  --lh-h3: 28px;

  --fs-body-lg: 16px;
  --lh-body-lg: 24px;
  --fs-body-md: 15px;
  --lh-body-md: 20px;
  --fs-body: 14px;
  --lh-body: 20px;
  --fs-body-sm: 13px;
  --lh-body-sm: 18px;
  --fs-caption: 12px;
  --lh-caption: 16px;

  /* KHÔNG thêm cặp cỡ/dòng nào ngoài thang trên. Từng có --fs-prose/--lh-prose
     (16/28) cho thân bài blog, nhưng trang chủ mới là chuẩn của site và ở đó
     đoạn văn 16px luôn đi với dòng 24px — đã bỏ để cả site một thang duy nhất. */

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

  /* ---- Spacing (thang 8px của Figma) -------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---- Bo góc ------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---- Đổ bóng ------------------------------------------------------ */
  --sh-button: 0 8px 16px 0 rgba(20, 130, 252, 0.08);
  --sh-card: 0 4px 16px 0 rgba(11, 44, 95, 0.06);
  --sh-card-hover: 0 12px 28px 0 rgba(11, 44, 95, 0.12);
  --sh-header: 0 1px 0 0 var(--c-border);

  /* ---- Layout ------------------------------------------------------- */
  --page-w: 1440px;      /* khổ artboard Figma */
  --container-w: 1312px; /* vùng nội dung */
  --gutter: 64px;        /* (1440 - 1312) / 2 */
  --header-h: 72px;

  /* ---- Chuyển động --------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
}

/* ==========================================================================
   Mobile — khổ artboard 393px (Figma "Homepage - Mobile" 369:4384)
   Chỉ chỉnh biến layout dùng chung. Cỡ chữ của từng section được đặt trong
   file section tương ứng vì thiết kế mobile không dùng chung một thang duy
   nhất cho mọi khối.
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --header-h: 56px; /* mobile 56 thay vì 72 — Figma 369:6141 */
    --gutter: 20px;   /* (393 - 353) / 2 */
  }
}