/*
 * Design tokens — Vinhomes The Gallery Giảng Võ
 * Nguồn: Figma jlHnnVflObfC7nNmGX59Pv, node 7:83 ("Section 11" — style guide)
 *
 * Letter-spacing trong Figma tính theo % cỡ chữ → đổi sang em (2 → 0.02em).
 * Mobile chưa được định nghĩa trong Figma: cỡ chữ heading co giãn bằng clamp()
 * từ 375px → 1440px (giá trị mobile là tạm tính).
 */

:root {
	/* Màu */
	--vg-color-primary: #162d52;          /* Primary 1 */
	--vg-color-secondary: #f79878;        /* Secondary */
	--vg-color-body-gold: #dbc3b2;        /* Body gold */
	--vg-color-description-gold: #a37462; /* Description gold */
	--vg-color-body-blue: #2c3542;        /* Body blue */
	--vg-color-description-blue: #3f4253; /* Description blue */
	--vg-color-bg-1: #ffffff;             /* Background 1 */
	--vg-color-bg-2: #f4eee6;             /* Background 2 */
	--vg-color-button: #a37462;           /* Button */

	/* Font */
	--vg-font-heading: "Beautique Display", "SVN-Book Antiqua", "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif;
	--vg-font-subheading: "Corinthia", cursive;
	--vg-font-body: "Inter", system-ui, sans-serif;
	--vg-font-signature: "UVN Chu Ky", "Corinthia", cursive;

	/* Kiểu chữ */
	--vg-h1-size: clamp(36px, 28.96px + 1.878vw, 56px);
	--vg-h2-size: clamp(32px, 26.37px + 1.502vw, 48px);
	--vg-h3-size: clamp(28px, 25.18px + 0.751vw, 36px);
	--vg-h4-size: clamp(18px, 17.3px + 0.188vw, 20px);
	--vg-subheader-size: clamp(28px, 25.18px + 0.751vw, 36px);
	--vg-line-height: 1.5;
	--vg-heading-tracking: 0.02em;

	/* Nút */
	--vg-btn-radius: 8px;
	--vg-btn-padding: 12px 16px;
	--vg-btn-gap: 10px;
}

/* Heading: cỡ/độ đậm/tracking do Customizer của Blocksy quản lý (scripts/blocksy-design-tokens.php).
   Font Beautique Display không có trong danh sách của Blocksy, nên gán qua biến của Blocksy. */
h1, h2, h3, h4, h5, h6 {
	--theme-font-family: var(--vg-font-heading);
}

/* Class tiện ích — dùng khi cần kiểu heading trên thẻ không phải h1–h4 */
.vg-h1, .vg-h2, .vg-h3, .vg-h4 {
	font-family: var(--vg-font-heading);
	letter-spacing: var(--vg-heading-tracking);
	line-height: var(--vg-line-height);
}

.vg-h1 { font-size: var(--vg-h1-size); font-weight: 900; }
.vg-h2 { font-size: var(--vg-h2-size); font-weight: 700; }
.vg-h3 { font-size: var(--vg-h3-size); font-weight: 700; }
.vg-h4 { font-size: var(--vg-h4-size); font-weight: 700; }

/* Sub header — Corinthia Bold 36 / 4% */
.vg-subheader {
	font-family: var(--vg-font-subheading);
	font-size: var(--vg-subheader-size);
	font-weight: 700;
	line-height: var(--vg-line-height);
	letter-spacing: 0.04em;
}

/* Title 14px — Inter Semi Bold / -0.5% */
.vg-title {
	font-family: var(--vg-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: var(--vg-line-height);
	letter-spacing: -0.005em;
}

/* Body 16px — Inter Regular / -0.5% */
.vg-body {
	font-family: var(--vg-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: var(--vg-line-height);
	letter-spacing: -0.005em;
}

/* Body 14px — Inter Regular / 0 */
.vg-body-sm {
	font-family: var(--vg-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: var(--vg-line-height);
	letter-spacing: 0;
}

/* Description 12px — UVN Chu Ky / -2% */
.vg-description {
	font-family: var(--vg-font-signature);
	font-size: 12px;
	font-weight: 400;
	line-height: var(--vg-line-height);
	letter-spacing: -0.02em;
}

/* Màu tiện ích */
.vg-text-primary { color: var(--vg-color-primary); }
.vg-text-secondary { color: var(--vg-color-secondary); }
.vg-text-body-gold { color: var(--vg-color-body-gold); }
.vg-text-description-gold { color: var(--vg-color-description-gold); }
.vg-text-body-blue { color: var(--vg-color-body-blue); }
.vg-text-description-blue { color: var(--vg-color-description-blue); }
.vg-bg-1 { background-color: var(--vg-color-bg-1); }
.vg-bg-2 { background-color: var(--vg-color-bg-2); }
.vg-bg-primary { background-color: var(--vg-color-primary); }

/* Nút: xem assets/css/button.css */

/* Logo The Gallery: file gốc 1500×1500 có khoảng trống, Figma cắt khung 138×60 */
.vg-logo {
	display: block;
	width: 138px;
	height: auto;
	aspect-ratio: 138 / 60;
	object-fit: cover;
	object-position: center 46.4%;
}