/* Design tokens — nguồn: docs/02-design-tokens.md + bản design 23/08. */
:root {
	/* Nền */
	--cg-bg: #ffffff;
	--cg-bg-alt: #faf8f5;
	--cg-bg-media: #f4f1ec;
	--cg-bg-paper: #fffdf8;

	/* Chữ */
	--cg-text: #1a1714;
	--cg-text-body: #2a251f;
	--cg-text-soft: #5f584f;
	--cg-text-muted: #6b645b;
	--cg-text-footer: #4f483f;
	--cg-text-meta: #8d857b;
	--cg-text-faint: #a09890;
	--cg-text-ghost: #c9c2b8;

	/* Accent */
	--cg-accent: #8a3324;
	--cg-accent-dark: #6f2719;
	--cg-gold: #BE9A65;
	--cg-mark-bg: #f6e7c8;

	/* Xanh lá (bản 29/08 — thay hệ xanh dương của bản 23/08) */
	--cg-green: #2E7D4F;
	/* Chữ trên nền trắng: link "Xem tất cả" ở tiêu đề section. */
	--cg-green-dark: #1F5138;
	/* Viền dưới header mobile — đậm hơn nền để tách khỏi nội dung. */
	--cg-green-deep: #256841;
	/* Đường kẻ mảnh chạy tới link ở tiêu đề section. */
	--cg-green-rule: #7FA98D;
	--cg-on-green: #ffffff;

	/* Nền thanh nav desktop + nền header mobile. Biến RIÊNG của header: khách đổi màu
	   trong Tuỳ biến → Màu header mà không kéo theo --cg-green (còn dùng ở tiêu đề
	   section, badge, đường kẻ). inc/customizer.php ghi đè biến này bằng inline style. */
	--cg-header-bg: #2E7D4F;
	--cg-heading: #12100e;

	/* Bề mặt tối (modal video — sau này còn lightbox bản nhạc, flipbook, audio player) */
	--cg-surface-dark: #000000;
	--cg-on-dark: #ffffff;
	--cg-gold-on-dark: #d8b98a;

	/* Border */
	--cg-border: #eae5de;
	--cg-border-light: #f1ede7;
	--cg-border-input: #e2ddd5;
	--cg-border-btn: #e6e1da;
	--cg-border-faint: #f7f4ef;
	--cg-border-search: #d9d3ca;
	--cg-border-active: #e0d6cd;

	/* Font */
	--cg-font-serif: Lora, serif;
	--cg-font-sans: 'Be Vietnam Pro', system-ui, sans-serif;

	/* Icon — dùng làm mask-image, màu do CSS (currentColor) quyết định nên stroke trong SVG chỉ cần đục màu bất kỳ. */
	--cg-caret-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 4.5L6 8.5 10 4.5'/%3E%3C/svg%3E");
}