/* ==========================================================================
   Design tokens cho các trang dựng trước (Blog, Liên hệ, trang chính sách,
   popup tìm kiếm). Tên biến giữ nguyên của thiết kế cũ, GIÁ TRỊ đã đổi sang
   nhận diện LANORA (giao_dien_hoan_chinh/css/base.css) để các trang này đồng bộ với
   header/footer mới mà không phải viết lại CSS.
   ========================================================================== */

:root {
  /* ---- Màu ---------------------------------------------------------- */
  --c-navy: #6f2e7d;   /* LANORA primary-01 */
  --c-blue: #913791;   /* LANORA primary-02 */
  --c-orange: #906a40; /* LANORA secondary-01 */

  --c-text: #252228;
  --c-desc: #625d63;
  --c-meta: #8a858a;

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

  --c-border: #eee9eb;
  --c-border-2: #e4dfe1;

  /* Dẫn xuất — dùng cho nền nhạt, hover, overlay */
  --c-blue-50: #fcf7fc;
  --c-blue-100: #f4e3f6;
  --c-orange-50: #f8f1ea;
  --c-navy-overlay: rgba(111, 46, 125, 0.72);

  /* ---- Typography --------------------------------------------------- */
  /* Font LANORA (lanora/css/fonts.css): Google Sans Flex cho chữ thường,
     Beautique Display cho chữ trang trí. */
  --font-sans: "Google Sans Flex", "Segoe UI", Arial, sans-serif;
  --font-script: "Beautique Display", "Times New Roman", serif;

  --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(111, 46, 125, 0.08);
  --sh-card: 0 4px 16px 0 rgba(111, 46, 125, 0.06);
  --sh-card-hover: 0 12px 28px 0 rgba(111, 46, 125, 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 */
  }
}