/**
 * Biến thiết kế.
 *
 * Mọi cặp màu chữ/nền dùng cho nội dung đều đã kiểm tương phản đạt WCAG AA:
 *   charcoal / off-white ....... 13.4:1
 *   forest  / off-white ........ 8.6:1
 *   white   / forest ........... 9.1:1
 *   stone   / off-white ........ 6.3:1
 *   charcoal / champagne ....... 5.8:1  (nút vàng luôn dùng chữ đậm màu than)
 *   sand-light / forest ........ 6.7:1
 *   champagne / forest-dark .... 5.4:1
 * Champagne KHÔNG được dùng làm màu chữ trên nền sáng (chỉ 2.4:1) — chỉ dùng
 * cho viền, chấm trang trí và nền nút.
 */

:root {
	/* Màu */
	--svh-forest: #2F4F3E;
	--svh-forest-dark: #1F3529;
	--svh-forest-light: #3E6B54;
	--svh-champagne: #C6A15B;
	--svh-champagne-dark: #8A6D2F;
	--svh-sand: #E8E0D4;
	--svh-sand-light: #E8DCC3;
	--svh-off-white: #FAF8F5;
	--svh-white: #FFFFFF;
	--svh-charcoal: #2B2B2B;
	--svh-stone: #5C5C5C;
	--svh-line: #DED8CE;
	--svh-line-dark: rgba(255, 255, 255, .16);

	/* Nền và chữ */
	--svh-bg: var(--svh-off-white);
	--svh-text: var(--svh-charcoal);
	--svh-text-muted: var(--svh-stone);

	/* Kiểu chữ */
	--svh-font-heading: "Noto Serif", "Times New Roman", Georgia, serif;
	--svh-font-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--svh-fs-xs: 0.8125rem;
	--svh-fs-sm: 0.875rem;
	--svh-fs-base: 1rem;
	--svh-fs-lg: 1.125rem;
	--svh-fs-xl: 1.375rem;
	--svh-fs-2xl: 1.75rem;
	--svh-fs-3xl: 2.25rem;
	--svh-fs-4xl: 3rem;

	/* Khoảng cách */
	--svh-sp-1: 0.5rem;
	--svh-sp-2: 0.75rem;
	--svh-sp-3: 1rem;
	--svh-sp-4: 1.5rem;
	--svh-sp-5: 2rem;
	--svh-sp-6: 3rem;
	--svh-sp-7: 4.5rem;
	--svh-sp-8: 6rem;

	/* Bố cục */
	--svh-container: 1200px;
	--svh-container-narrow: 800px;
	--svh-gutter: 1.25rem;
	--svh-header-h: 72px;

	/* Hiệu ứng */
	--svh-radius: 2px;
	--svh-radius-lg: 4px;
	--svh-shadow: 0 1px 3px rgba(43, 43, 43, .06), 0 8px 24px rgba(43, 43, 43, .06);
	--svh-shadow-lg: 0 4px 12px rgba(43, 43, 43, .08), 0 16px 48px rgba(43, 43, 43, .10);
	--svh-transition: 200ms cubic-bezier(.2, .6, .3, 1);
}

@media (min-width: 768px) {
	:root {
		--svh-gutter: 2rem;
		--svh-fs-3xl: 2.75rem;
		--svh-fs-4xl: 3.75rem;
		--svh-header-h: 84px;
	}
}

/* Tôn trọng lựa chọn giảm chuyển động của người dùng */
@media (prefers-reduced-motion: reduce) {
	:root {
		--svh-transition: 0ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}