/**
 * Phoenix — Design tokens dùng chung toàn site.
 *
 * Quy ước kích thước:
 * - Mọi giá trị "max" lấy theo thiết kế ở màn 1920px.
 * - Co giãn tuyến tính từ màn 1024px (giá trị "min") đến 1920px (giá trị "max")
 *   bằng clamp(); ngoài khoảng này giá trị đứng yên ở min/max.
 * - Màn > 1920px: nội dung giữ khung 1920px, khoảng trắng mở rộng đều hai bên
 *   (xem --page-max).
 * - Đơn vị rem tính trên root 16px, để tôn trọng cỡ chữ người dùng đặt trong trình duyệt.
 *
 * Công thức clamp(min, a + b·vw, max):
 *   b = (max - min) / (1920 - 1024) × 100
 *   a = min - b × 1024 / 100
 */

:root {
	/* ------------------------------------------------------------------
	 * Màu
	 * ---------------------------------------------------------------- */

	/* Màu chính (do khách hàng cung cấp) */
	--color-bg: #fbf5f1;            /* nền trang */
	--color-text: #74411b;          /* chữ nội dung */
	--color-heading: #f27221;       /* tiêu đề */
	--color-gradient-start: #f0ac21;
	--color-gradient-end: #ee4623;
	--gradient-primary: linear-gradient(180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);

	/* Màu phụ (trích từ PDF thiết kế, dùng cho một số khối riêng) */
	--color-brown-dark: #513e39;    /* nội dung thẻ 6 nền tảng, mô tả căn hộ, nút lên đầu trang */
	--color-ink: #221f1f;           /* nội dung thẻ "4 phương thức nộp hồ sơ" */
	--color-gray: #6b6b6b;          /* mô tả phụ, tóm tắt tin tức */
	--color-gray-light: #919191;    /* placeholder, ngày đăng */
	--color-white: #ffffff;
	--color-cream: #fff4ed;         /* chữ trên nền cam (form đăng ký) */
	--color-surface: #ffffff;       /* nền thẻ / ô nhập */
	--color-border: var(--color-heading); /* viền thẻ, nút viền */

	/* ------------------------------------------------------------------
	 * Font
	 * ---------------------------------------------------------------- */

	--font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	/* Font tiêu đề: 1FTV VIP Glowing (assets/fonts/title-font.*, khai báo @font-face trong functions.php) */
	--font-title: "Title-font", var(--font-body);
	/* Font chữ hẹp (Big Shoulders Display, Google Fonts, đậm 800 — khớp bề rộng chữ trong Figma) — chỉ dùng cho tiêu đề thẻ chữ in hoa */
	--font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	--lh-tight: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.5;

	/* ------------------------------------------------------------------
	 * Cỡ chữ (min @1024 → max @1920)
	 * ---------------------------------------------------------------- */

	/* Nội dung — Montserrat */
	--fs-xs: clamp(0.6875rem, 0.6161rem + 0.1116vw, 0.75rem);      /* 11 → 12: nhãn nhỏ, ghi chú */
	--fs-sm: clamp(0.8125rem, 0.7411rem + 0.1116vw, 0.875rem);     /* 13 → 14: nhãn thẻ, hotline phụ */
	--fs-base: clamp(0.9375rem, 0.8661rem + 0.1116vw, 1rem);       /* 15 → 16: body */
	--fs-md: clamp(1rem, 0.7857rem + 0.3348vw, 1.1875rem);         /* 16 → 19: nội dung thẻ, link footer */
	--fs-lg: clamp(1.0625rem, 0.7054rem + 0.558vw, 1.375rem);      /* 17 → 22: nhãn thông tin, đoạn dẫn */
	--fs-nav: clamp(0.8125rem, 0.2411rem + 0.8929vw, 1.3125rem);  /* 13 → 21: menu chính */

	/* Tiêu đề — Title-font */
	--fs-title-xs: clamp(1.125rem, 0.8393rem + 0.4464vw, 1.375rem); /* 18 → 22: tiêu đề tin tức */
	--fs-title-sm: clamp(1.375rem, 0.875rem + 0.7812vw, 1.8125rem); /* 22 → 29: tiêu đề thẻ, nút lớn */
	--fs-title-md: clamp(1.25rem, 0.6786rem + 0.8929vw, 1.75rem);   /* 20 → 28: đoạn mô tả cạnh tiêu đề */
	--fs-title-lg: clamp(1.625rem, 0.6964rem + 1.4509vw, 2.4375rem); /* 26 → 39: đoạn dẫn lớn, tab tòa */
	--fs-h3: clamp(1.875rem, 0.7321rem + 1.7857vw, 2.875rem);       /* 30 → 46: tiêu đề thẻ 6 nền tảng */
	--fs-h2-sm: clamp(2.125rem, 0.9107rem + 1.8973vw, 3.1875rem);   /* 34 → 51: tiêu đề section phụ */
	--fs-h2: clamp(2.625rem, 0.7679rem + 2.9018vw, 4.25rem);        /* 42 → 68: tiêu đề section */

	/* ------------------------------------------------------------------
	 * Bố cục
	 * ---------------------------------------------------------------- */

	--page-min: 1280px;  /* desktop nhỏ nhất (dưới mức này dùng bố cục tablet / mobile) */
	--page-max: 1920px;  /* khung nội dung tối đa; lớn hơn thì căn giữa */
	--page-gutter: clamp(2rem, -4rem + 9.375vw, 7.25rem);   /* 32 → 116: lề trái/phải */
	--content-max: calc(var(--page-max) - 2 * 7.25rem);     /* 1688px: bề rộng nội dung ở 1920 */

	--section-space: clamp(4rem, 0rem + 6.25vw, 7.5rem);     /* 64 → 120: khoảng cách dọc giữa section */
	--header-height: clamp(4rem, 2.5714rem + 2.2321vw, 5.25rem); /* 64 → 84 */

	/* ------------------------------------------------------------------
	 * Khoảng cách
	 * ---------------------------------------------------------------- */

	--space-2xs: clamp(0.25rem, 0.1071rem + 0.2232vw, 0.375rem); /* 4 → 6 */
	--space-xs: clamp(0.5rem, 0.2143rem + 0.4464vw, 0.75rem);    /* 8 → 12 */
	--space-sm: clamp(0.75rem, 0.1786rem + 0.8929vw, 1.25rem);   /* 12 → 20 */
	--space-md: clamp(1.25rem, 0.5357rem + 1.1161vw, 1.875rem);  /* 20 → 30: khoảng cách giữa thẻ */
	--space-lg: clamp(1.25rem, 0.3929rem + 1.3393vw, 2rem);      /* 20 → 32 */
	--space-xl: clamp(2rem, 0.2857rem + 2.6786vw, 3.5rem);       /* 32 → 56 */
	--space-2xl: clamp(3rem, 0.7143rem + 3.5714vw, 5rem);        /* 48 → 80 */

	/* ------------------------------------------------------------------
	 * Bo góc, đổ bóng, hiệu ứng
	 * ---------------------------------------------------------------- */

	--radius-xs: 2px;     /* nút vuông (Kiểm tra điều kiện, tab tòa) */
	--radius-sm: 4px;     /* ô nhập, nhãn */
	--radius-md: 12px;    /* thẻ phương thức nộp hồ sơ */
	--radius-lg: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem);   /* 16 → 24: thẻ ảnh tiện ích, thẻ căn hộ */
	--radius-xl: clamp(1.25rem, 0.5357rem + 1.1161vw, 1.875rem); /* 20 → 30: thẻ tin tức, khung form */
	--radius-pill: 999px; /* nút CTA trên header, icon tròn */

	--shadow-card: 0 4px 24px rgb(116 65 27 / 0.08);
	--shadow-raised: 0 8px 32px rgb(238 70 35 / 0.18);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.34, 1.7, 0.5, 1); /* vượt quá một chút rồi bật về (hover phóng to) */
	--duration: 200ms;

	--z-header: 100;
	--z-floating: 200; /* cụm nút liên hệ nổi bên phải */
	--z-modal: 1000;
}