/**
 * Design tokens — Áo mưa TÂM NGÂN (aomuatanloctan.com redesign)
 * Nguồn: docs/ui/design-system.md — nạp trong child theme tamngan-child
 */
:root {
	/* Màu thương hiệu (kế thừa web cũ #2e57a6) */
	--tn-primary: #2e57a6;
	--tn-primary-dark: #234580;
	--tn-primary-light: #e9effa;

	/* CTA liên hệ (pattern web cũ) */
	--tn-call: #64bc46;
	--tn-call-dark: #4f9a36;
	--tn-zalo: #0068ff; /* mau nhan dien chinh thuc Zalo */
	--tn-email: #22e7f9;
	--tn-accent: #f97e6c; /* chữ "Liên hệ" thay giá */

	/* Trung tính */
	--tn-ink: #222833;
	--tn-gray: #6a7280;
	--tn-line: #e4e8ef;
	--tn-bg: #ffffff;
	--tn-bg-soft: #f6f8fb;

	/* Typography */
	--tn-font: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
	--tn-h1: 26px;
	--tn-h2: 21px;
	--tn-h3: 17px;
	--tn-body: 15px;
	--tn-lh: 1.7;

	/* Spacing scale 4px */
	--tn-sp-1: 4px;
	--tn-sp-2: 8px;
	--tn-sp-3: 12px;
	--tn-sp-4: 16px;
	--tn-sp-6: 24px;
	--tn-sp-8: 32px;
	--tn-sp-12: 48px;
	--tn-sp-16: 64px;

	/* Bo góc + đổ bóng */
	--tn-radius: 8px;
	--tn-radius-lg: 10px;
	--tn-shadow: 0 2px 12px rgba(34, 40, 51, 0.08);
	--tn-shadow-hover: 0 6px 20px rgba(34, 40, 51, 0.14);

	/* Kích thước tương tác */
	--tn-btn-h: 48px;
	--tn-input-h: 48px;
	--tn-header-h: 56px;
	--tn-float-btn: 50px;
}

@media screen and (min-width: 850px) {
	:root {
		--tn-h1: 34px;
		--tn-h2: 27px;
		--tn-h3: 20px;
		--tn-body: 16px;
	}
}