/**
 * Design tokens của giao diện blog VILLAVERDE.
 *
 * Đây là file DUY NHẤT chứa giá trị thị giác. PHP không hardcode màu, spacing
 * hay font-size nào — muốn đổi tông cả blog thì sửa ở đây, không đụng code.
 *
 * Đặt trên :root nên có thể ghi đè lại trong Customizer > CSS bổ sung mà
 * không cần sửa plugin, ví dụ:
 *   :root { --vv-accent: #0b5cff; --vv-radius-lg: 4px; }
 */

:root {
	/* --- Màu --- */
	--vv-ink: #16202c;
	--vv-ink-soft: #4a5568;
	--vv-ink-mute: #7b8794;
	--vv-line: #e3e6ea;
	--vv-line-strong: #b9c2cc;
	--vv-surface: #ffffff;
	--vv-surface-alt: #f6f8fa;
	--vv-accent: #0f7b56;
	--vv-accent-ink: #ffffff;
	--vv-accent-soft: #e7f4ef;
	--vv-warn-line: #d9a441;
	--vv-warn-bg: #fdf8ec;
	--vv-warn-ink: #5c4a1f;

	/* --- Bo góc --- */
	--vv-radius-sm: 6px;
	--vv-radius: 10px;
	--vv-radius-lg: 14px;
	--vv-radius-pill: 999px;

	/* --- Khoảng cách --- */
	--vv-gap-xs: 6px;
	--vv-gap-sm: 10px;
	--vv-gap: 16px;
	--vv-gap-lg: 24px;
	--vv-gap-xl: 40px;

	/* --- Chữ --- */
	--vv-font: inherit;
	--vv-fs-xs: 12px;
	--vv-fs-sm: 13px;
	--vv-fs-base: 15px;
	--vv-fs-md: 17px;
	--vv-fs-lg: 22px;
	--vv-fs-xl: 30px;
	--vv-lh-tight: 1.28;
	--vv-lh: 1.6;

	/* --- Khác --- */
	--vv-shadow: 0 1px 2px rgba(22, 32, 44, .06), 0 6px 18px rgba(22, 32, 44, .05);
	--vv-maxw: 1180px;
	--vv-cols: 3;
	--vv-progress-h: 3px;
}