/*
 * File: assets/css/variables.css
 * Vai trò: Định nghĩa CSS variables (design token) dùng chung toàn site cho flatsome-child-189.
 * Không chứa rule bố cục cụ thể — components.css / homepage.css / responsive.css tái sử dụng các
 * biến này. Namespace "taco189-" để tránh xung đột với biến CSS nội bộ của Flatsome.
 *
 * Breakpoint tham chiếu (khớp đúng lưới UX Builder của Flatsome 3.20.9, xem responsive.css):
 * Mobile: <= 549px | Tablet: 550px - 849px | Desktop: >= 850px
 */

:root {
	/* Màu sắc — navy làm chủ đạo, đỏ chỉ dùng cho CTA/điểm nhấn */
	--taco189-color-primary: #102A43;
	--taco189-color-primary-dark: #071A2B;
	--taco189-color-accent: #D62828;
	--taco189-color-background: #FFFFFF;
	--taco189-color-surface: #F5F7F9;
	--taco189-color-text: #17212B;
	--taco189-color-text-muted: #66717D;
	--taco189-color-border: #E2E7EC;
	--taco189-color-white: #FFFFFF;

	/* Typography — dùng font hệ thống / font Flatsome hiện có, không nạp font ngoài */
	--taco189-fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	--taco189-fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--taco189-fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	--taco189-fs-body: 1rem;
	--taco189-fs-eyebrow: 0.8125rem;
	--taco189-lh-heading: 1.15;
	--taco189-lh-body: 1.6;

	/* Spacing scale */
	--taco189-space-xs: 8px;
	--taco189-space-sm: 16px;
	--taco189-space-md: 24px;
	--taco189-space-lg: 40px;
	--taco189-space-xl: 64px;
	--taco189-space-2xl: 96px;

	/* Radius & Shadow — dùng có kiểm soát, tránh bo góc/đổ bóng nặng theo định hướng thiết kế */
	--taco189-radius-sm: 2px;
	--taco189-radius-md: 4px;
	--taco189-shadow-sm: 0 1px 2px rgba(7, 26, 43, 0.06);
	--taco189-shadow-md: 0 4px 16px rgba(7, 26, 43, 0.10);
}